Creating AdminUser Page

The AdminUser page displays all user accounts in a list so that the administrator can perform some administrative work. For simplicity, the administrative work our blog system supports include editting a user account and deleting a user account.

We will display the user list in a table. Each row of the table represents a single user account, and the following columns are to be displayed:

  • Username - displays the usernames. In each cell a hyerplink is displayed which leads to the corresponding EditUser page.
  • Email - displays the emails.
  • Administrator - shows whether the user account is of the administrator role.
  • Command - displays a column of "Delete" buttons. Clicking on any of them will lead to deletion of the corresponding user account.

We create two files protected/pages/users/AdminUser.page and protected/pages/users/AdminUser.php to save the page template and page class, respectively.

Creating Page Template

We use TDataGrid to display the user accounts. Based on the above analysis, we configure the following four columns:

  • THyperLinkColumn displays the username column. The URL is constructed according to the PHP expression specified in the DataNavigateUrlFormatString property.
  • TBoundColumn displays the email column.
  • TCheckBoxColumn uses checkboxes to indicate whether a user account is of role administrator.
  • TButtonColumn displays a column of "Delete" buttons.

The complete page template is shown as follows:

<%@ Title="My Blog - Manage User Accounts" %>

<com:TContent ID="Main">

<h1>Manage User Accounts</h1>

<a href="<%= $this->Service->constructUrl('users.NewUser')%>">Create New User</a>
<br/>

<com:TDataGrid ID="UserGrid"
    DataKeyField="username"
    AutoGenerateColumns="false"
    OnDeleteCommand="deleteButtonClicked">

    <com:THyperLinkColumn
        HeaderText="Username"
        DataTextField="username"
        DataNavigateUrlField="username">
        <prop:DataNavigateUrlFormatString>#
          $this->Service->constructUrl('users.EditUser',array('username'=>{0}))
        </prop:DataNavigateUrlFormatString>
    </com:THyperLinkColumn>

    <com:TBoundColumn
        HeaderText="Email"
        DataField="email" />

    <com:TCheckBoxColumn
        HeaderText="Administrator"
        DataField="role" />

    <com:TButtonColumn
        HeaderText="Command"
        Text="Delete"
        ButtonType="PushButton"
        CommandName="delete" />

</com:TDataGrid>

</com:TContent>

Creating Page Class

In the above page template, the datagrid's OnDeleteCommand event is ttached with the method deleteButtonClicked() which we shall implement in the page class. In addition, the datagrid needs to be populated with user accounts data when the page is initialized. Therefore, we write the page class as follows:

class AdminUser extends TPage
{
    /**
     * Populates the datagrid with user lists.
     * This method is invoked by the framework when initializing the page
     * @param mixed event parameter
     */
    public function onInit($param)
    {
        parent::onInit($param);
        // fetches all data account information
        $this->UserGrid->DataSource=UserRecord::finder()->findAll();
        // binds the data to interface components
        $this->UserGrid->dataBind();
    }

    /**
     * Deletes a specified user record.
     * This method responds to the datagrid's OnDeleteCommand event.
     * @param TDataGrid the event sender
     * @param TDataGridCommandEventParameter the event parameter
     */
    public function deleteButtonClicked($sender,$param)
    {
        // obtains the datagrid item that contains the clicked delete button
        $item=$param->Item;
        // obtains the primary key corresponding to the datagrid item
        $username=$this->UserGrid->DataKeys[$item->ItemIndex];
        // deletes the user record with the specified username primary key
        UserRecord::finder()->deleteByPk($username);
    }
}

In the above, the deleteButtonClicked() method is invoked whenever a "Delete" button is clicked. To determine which row of the buttons is clicked, we check the Item.ItemIndex property of the event parameter. To further identify which user account is to be deleted, we retrieve the primary key (username) value via the datagrid's DataKeys property.

Tip: All data-bound controls have similar usage pattern. That is, set the DataSource property with the data and call dataBind() method to binds the data to the control's internal structure.

Testing

To test the AdminUser page, visit the URL http://hostname/blog/index.php?page=users.AdminUser. You may be required to login as an administrator first if you have not done so. We shall expect to see the following result.