Creating Login Portlet

The skeleton application we created already contains a login page. In this section, we will convert this page into a login portlet named UserLogin. The portlet will be displayed in the side bar section of pages when the current user is a guest user who is not authenticated. If he logs in successfully, the portlet will disappear and the previously developed user menu portlet will show up.

1. Creating UserLogin Class ¶

Like the user menu portlet, we create the UserLogin class to contain the logic of the user login portlet and save it in the file /wwwroot/blog/protected/components/UserLogin.php. The file has the following content:

<?php
class UserLogin extends Portlet
{
    public $title='Login';
 
    protected function renderContent()
    {
        $form=new LoginForm;
        if(isset($_POST['LoginForm']))
        {
            $form->attributes=$_POST['LoginForm'];
            if($form->validate())
                $this->controller->refresh();
        }
        $this->render('userLogin',array('form'=>$form));
    }
}

The code in the renderContent()method is copied from the actionLogin() method of SiteController that we generated at the beginning using the yiic tool. We mainly change the render() method call by rendering a view named userLogin. Notice also that we create an object of the LoginForm class in this method. The class represents the user input that we collect from the login form. It is in the file /wwwroot/blog/protected/models/LoginForm.php and is generated by the yiic tool when we create the skeleton application.

2. Creating userLogin View ¶

The content of the userLogin view also comes largely from the login view for the SiteController's login action. The view is saved in the file /wwwroot/blog/protected/components/views/userLogin.php and has the following content:

<?php echo CHtml::beginForm(); ?>
<div class="row">
<?php echo CHtml::activeLabel($form,'username'); ?>
<br/>
<?php echo CHtml::activeTextField($form,'username') ?>
<?php echo CHtml::error($form,'username'); ?>
</div>
<div class="row">
<?php echo CHtml::activeLabel($form,'password'); ?>
<br/>
<?php echo CHtml::activePasswordField($form,'password') ?>
<?php echo CHtml::error($form,'password'); ?>
</div>
<div class="row">
<?php echo CHtml::activeCheckBox($form,'rememberMe'); ?>
<?php echo CHtml::label('Remember me next time',CHtml::getActiveId($form,'rememberMe')); ?>
</div>
<div class="row">
<?php echo CHtml::submitButton('Login'); ?>
<p class="hint">You may login with <b>demo/demo</b></p>
</div>
<?php echo CHtml::endForm(); ?>

In the login form, we display a username text field and a password field. We also display a check box indicating whether the user login status should be remembered even if the browser is closed. The view has a local variable named $form which comes from the data passed to the render() method call in UserLogin::renderContent().

Because LoginForm data model contains validation rules (like in the Post model), when a user submits the form, the model will perform data validation. If there is any validation error, the form will display it next to the incorrect input field via CHtml::error().

3. Using UserLogin Portlet ¶

We use UserLogin like we do with UserMenu by modifying the layout file /wwwroot/blog/protected/views/layouts/main.php as follows,

......
<div id="sidebar">
 
<?php $this->widget('UserLogin',array('visible'=>Yii::app()->user->isGuest)); ?>
 
<?php $this->widget('UserMenu',array('visible'=>!Yii::app()->user->isGuest)); ?>
 
</div>
......

Notice that UserLogin is visible only when the current user is a guest, which is contrary to UserMenu.

4. Testing UserLogin Portlet ¶

To test the UserLogin portlet, follow the steps below:

1. Access the URL http://www.example.com/blog/index.php. If the current user is not logged in, we should be able to see the UserLogin portlet.
2. Without entering anything in the login form, if we click the Login button, we should see error messages.
3. Try logging in with username demo and password demo. The current page will be refreshed, the UserLogin portlet disappears, and the UserMenu portlet appears.
4. Click on the Logout menu item in the UserMenu portlet, we should see that the UserMenu portlet disappears while the UserLogin portlet appears again.

5. Summary ¶

The UserLogin portlet is a typical example that follows the MVC design pattern. It uses the LoginForm model to represent the data and business rules; it uses the userLogin view to generate user interface; and it uses the UserLogin class (a mini controller) to coordinate the model and the view.