MichaelHenriksen.dk Random bits and bytes…

8Nov/090

Handling messages in web applications – Part 2

Welcome to part two of Handling messages in web applications. Part one went through how the message handler system is built. This part will show how to actually implement and use the component in a Zend Framework application.

Using the component

To use the component, we first of all need to have a place where the messages will be outputted, if there are any stored in the message handler. A good place for that would be in the application layout file. By putting it in the layout file, you won't need to think about rendering the messages in your views - it will just happen automatically. It will also ensure that messages always show in the same area of your application. That is good from a usability point of view, because users will always know where to look for messages.

Layout code:

<?php echo $this->doctype(); ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
    <?php echo $this->HeadMeta(); ?> 
    <?php echo $this->headTitle(); ?>
    <?php echo $this->headLink()->appendStylesheet($this->baseUrl('/css/main.css')); ?>
</head>
<body>
<div id="content">
    <div id="messagearea">
        <?php $messageHandler = App_MessageHandler::getInstance(); ?>
        <?php if (count($messageHandler) > 0): ?>
            <?php echo $messageHandler->render(); ?>
        <?php endif; ?>
    </div>
 
    <?php echo $this->layout()->content; ?>
</div>
</body>
</html>

All the interesting stuff is happening inside the <div id="messagearea"> ... </div>. First we retrieve the Singleton instance of the message handler and then go on, to see if there's any stored messages. Because the message handler implements the Countable interface, it is as simple as giving the instance to the PHP count() function. If there's any messages, the HTML presentation of the messages is displayed by echoing the output from the render() method.

Now that we're ready to register messages, let's have a look at how that is done in an action controller:

class IndexController extends Zend_Controller_Action
{
    public function indexAction()
    {
        App_MessageHandler::addSuccess("This is a success message");
        App_MessageHandler::addError("This is an error message");
        App_MessageHandler::addNotice("This is a notice message");
        App_MessageHandler::addInfo("This is an information message");
    }
}

As we can see, it is very simple to register messages with our component. Let's see how it looks...

Message with no styling

Well, it doesn't look that good yet, so let's give it some styling with CSS. All messages are going to have a class message together with one of the following classes: success, error, notice and info.

The CSS

.message {
    font: normal 12px/1.5em "Lucida Grande","Verdana",sans-serif;
    border: 1px solid #DEDEDE;
    background-color: #EFEFEF;
    color: #222222;
    padding: 4px;
    margin: 4px;
    text-align: center;
 
    /* A bit of CSS3 for rounded corners ;) */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
 
.message p {
    margin: 0px;
}
 
.error {
    border-color: #CB2026;
    background-color: #F6CBCA;
    color: #D02F2F;
    font-weight: bold;
}
 
.success {
    border-color: #359545;
    background-color: #CEE6C3;
    color: #1B8D44;
    font-weight: bold;
}
 
.notice {
    border-color: #DFDFDE;
    background-color: #FCF9CE;
}
 
.info {
    border-color: #D7E8F0;
    background-color: #F5F8FA;
}

Now that we have some nice styling in place, let's reload the page and see how it looks now...

Messages with styling

That looks much better!

So how does it look when we use the component in a more realistic way? Let's try to implement it, in an controller action that authenticates people:

class AccountController extends Zend_Controller_Action
{
    public function loginAction()
    {
        App_MessageHandler::addInfo("Please login by filling out the form below");
 
        $form = new Form_Authenticate();
 
        if ($this->getRequest()->isPost()) {
 
            if ($form->isValid($_POST)) {
 
                $values = $form->getValues();
 
                $auth  = Zend_Auth::getInstance();
                $adapter = $this->_helper->bootstrap('authAdapter');
                $adapter->setUsername($values['username']);
                $adapter->setPassword($values['password']);
 
                $result  = $auth->authenticate($adapter);
 
                if (!$result->isValid()) {
                    App_MessageHandler::addNotice("Sorry, your username and/or password is incorrect. Please try again");
                } else {
                    App_MessageHandler::addSuccess("You are now successfully logged in!");
                }
            }
 
        }
 
        $this->view->form = $form;
    }
}

The action will first add an information message telling the user to please fill out the form below to log in. Then it checks if the action is requested with a POST request and then tries to authenticate the user with the supplied credentials. If the authentication is successful, it adds another message with the type of 'success', telling the user that the authentication was successful, otherwise it adds an notice message telling the user that the credentials was invalid.

So that's it! I hope you liked the post and didn't get too scared by all the code. If you would like to use the component in your own applications, I have made a little zip file with all the code. The only thing you have to do, is to drop the App folder in your library and register the App_ namespace in your autoloader, and you're ready to go!

Download link to App_MessageHandler component.

Share this post:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • StumbleUpon
  • Twitter

Related posts:

Tagged as: , , , Leave a comment
Comments (0) Trackbacks (0)

No comments yet.


Leave a comment


Please leave these two fields as-is:

No trackbacks yet.

« Dompdf and special characters Handling messages in web applications – Part 1 »

Categories

Archives

RSS Twitter

Tag Cloud

apache bug dompdf excel Growl htmlpurifier ie8 messages php PHPIDS regex RSS security ssl SVN Trac ui webscraping zend framework Zend_Http

Meta