Zend Framework

Introduction au Framework Zend – Partie 3

Comme promis, voici la suite du tutoriel mais, avant de vous faire l’intégration du Layout, j’aimerais corriger un oubli et pas n’importe lequel car, il est de taille.

J’ai oublié de vous parler de l’ErrorController. Ce contrôleur, d’une importance cruciale, sert à capturer toutes les erreurs Apache que génère votre projet. Il n’existe qu’un seul contrôleur d’erreur pour tout le site et il se trouve dans le module default. Je vais donc vous passer le controller officiel.

Certains le personnalisent afin d’avoir des informations supplémentaires et des fonctions de plus (ajout dans un log, …).

/application/modules/default/controllers/ErrorController.php :

class ErrorController extends Zend_Controller_Action
{
    public function errorAction()
    {
        $errors = $this->_getParam('error_handler');

        switch ($errors->type) { 
            case Zend_Controller_Plugin_ErrorHandler::EXCEPTION_NO_CONTROLLER:
            case Zend_Controller_Plugin_ErrorHandler::EXCEPTION_NO_ACTION:
                // 404 error -- controller or action not found
                $this->view->title = "Erreur 404: Page non trouvée";
                $this->getResponse()->setHttpResponseCode(404);
                $this->view->message = 'Erreur 404 : Page non trouvée';
                break;
            default:
                // application error 
                $this->view->title = "Erreur 500 : Problème d'Application";
                $this->getResponse()->setHttpResponseCode(500);
                $this->view->message = "Erreur 500 : Problème d'Application";
                break;
        } 
        $this->view->exception = $errors->exception;
        $this->view->request   = $errors->request;
    }
}

Et la vue associée /application/modules/default/views/scripts/error/error.phtml :

<h1>Une erreur est apparue</h1> 
<h2><?php echo $this->message; ?></h2> 

<h3>Exception information:</h3> 
<p>
    <b>Message:</b> 
    <?php echo $this->exception->getMessage(); ?> 
</p> 
<h3>Stack trace:</h3> 
<pre>
    <?php echo $this->exception->getTraceAsString(); ?> 
</pre> 
<h3>Request Parameters:</h3> 
<pre>
    <?php var_dump($this->request->getParams()); ?> 
</pre>

Comme ceci, nous aurons plus de facilité pour débugger notre application en cas d’erreur. Bien, maintenant que cet oubli est réparé, nous allons pouvoir commencer à nous occuper du Layout.

Pour cette partie sachez que nous aurons un nouveau dossier. Le dossier application/layouts qui contiendra tous nos fichiers composant la structure du site. J’ai pour habitude de séparer le header, footer et structure globale afin de me faciliter les parties de maintenance du site.

La partie CSS sera stockée dans le dossier /public/styles, la partie JS sera stockée dans /public/scripts et les images du site seront stockées dans /public/images.

Tout d’abord, vous voudrez peut-être voir le rendu final du layout, le voici :

Ensuite je vous passe le CSS : /public/styles/styleprincipal.css

a{
    text-decoration: none;
    color: #FFFFFF;
}
a:visited{}
a:hover{
    color: #724C2A;
}
input{
    border: 1px solid #4083A4;
    font-size: 12px;
    font-family:Arial, Helvetica, sans-serif;
    color: #0A0A0A;
}
#page{
    width: 950px;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    font-size: 12px;
    font-family:Arial, Helvetica, sans-serif;
    border: 1px solid #4083A4;
    text-align: left;
}
#header{
    background-color: #4083A4;
    color: #FDFDFD;
    text-align: center;
    padding-top: 40px;
    font-size: 25px;
    height: 105px;
}
#liensheader{
    background-color: #4083A4;
    font-size: 15px;
    padding-bottom: 5px;
    color: #FDFDFD;
}
#liensheader span
{
    margin-left: 15px;
}
#contenu
{
    overflow: hidden;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 15px;
    font-size: 12px;
    font-family:Arial, Helvetica, sans-serif;
    position: relative;
}
#contenu a{
    text-decoration: none;
    color: #000000;
}
#contenu a:visited{}
#contenu a:hover{
    color: #724C2A;
}
#piedpage{
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    border-top: 1px solid #4083A4;
}

Pour finir voici le Layout composé des fichiers : /application/layouts/layout.phtml

<?php echo '<?xml version="1.0" encoding="UTF-8"?>'; ?>
<html xmlns="http://www.w3.org/1999/xhtml">
    <body>
        <div id="page">
            <?php echo $this->partial('header.phtml'); ?>
            <div id="contenu">
                <?php 
                    //cette fonction permet de récupérer la vue de l'action appelée
                    echo $this->layout()->content; 
                ?>
            </div>
            <div id="piedpage">
                Ignoti posticas pervadendoque vero pervadendoque.
            </div>
        </div>
    </body>
</html>

/application/layouts/meta.phtml

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></code> 

/application/layouts/styles.phtml

<link rel="stylesheet" type="text/css" href="<?php echo $this->BaseUrl(); ?>/styles/styleprincipal.css" />

/application/layouts/header.phtml

<div id="header">Tutoriel ZF</div>
<div id="liensheader">
    <a href="#"><span>Accueil</span></a>
    <a href="#"><span>Identifiez-vous</span></a>
</div>
Le fichier /application/layouts/scripts.phtml est vide car il n’y a pas encore de fichiers Javascripts. Quand à la fonction $this->BaseUrl(); elle retourne le répertoire de base du site. Ici il retournera /tutosite.com. Cela permet à Zend de savoir qu’il faut chercher ces fichiers dans le répertoire public et non dans les actions (sauf si vous avez créer des routes pour sa).

Après tout ceci, il ne nous reste plus qu’à rajouter les lignes suivantes dans le fichier /application/configurations/app.ini à la fin de la partie [production].

; ADD THE FOLLOWING LINES
resources.layout.layout = "layout"
resources.layout.layoutPath = APPLICATION_PATH "/layouts"

Maintenant, si vous allez sur le site http://localhost/tutosite.com, vous devriez tomber sur le même rendu que moi. Après, libre à vous d’en créer de nouveaux et pourquoi pas, de les faire partager ici. Si votre thème est vraiment bien fait, je pourrais l’intégrer pour la suite du tutoriel.

La semaine prochaine, nous allons commencer le module admin avec l’authentification à travers la base de données. Bon week-end à tous.