Tag Archives

4 Articles
Patterns CSS en base64

Patterns CSS en base64

Bonjour à tous. Par cette journée de vacances, je vais vous faire partager une ressource pour créer des patterns CSS basiques le tout encodés en base64.

Les images encodées en base64 sont directement ajoutées dans votre fichier CSS en texte. Ceci permet de n’avoir aucun chargement supplémentaires en plus de votre fichier CSS.

Mais qu’est-ce qu’un pattern ?

Un pattern en CSS, ou du moins dans notre exemple, correspond à une portion d’image répétée en X et en Y permettant de générer un motif comme, par exemple, un motif écossais, des stripes, …

Bien entendu, dans la ressource d’aujourd’hui, il va nous permettre de générer des motifs allant de 1px par 1px jusqu’à 10px par 10px. Ce qui restera assez limité si vous voulez reproduire un motif très complexe. Si vous êtes curieux, sachez que les stripes du header et du footer ont été générés avec cet outil.

L’outil en question s’appelle Patternify. Il s’agit d’un service web entièrement gratuit et permettant d’éditer pixel par pixel votre motif. Pour y accéder : http://www.patternify.com/

Maintenant vous pourrez créer des motifs sympas ne nécessitant aucun script JS ou autre image extérieure.

Introduction au Framework Zend – Partie 4

Chose promise, chose due, malgré une semaine de retard, je vous offre la suite du tutoriel Zend sur la création d’un blog. Aujourd’hui, il va s’agir de la partie authentification de l’administrateur.

Je vais donc commencer par vous montrer la création d’un nouveau module (module admin). Ensuite je vais vous montrer la création d’un formulaire avec Zend (il faut bien vous identifier quelque part non ?) et pour finir, nous allons entrer dans les détails de l’authentification par base de données.

Tout d’abord, reprenez le projet concernant cette suite de sujets et créez le module admin basée sur la structure montrée lors du précédent sujet (organisation des dossiers). Pour qu’un module autre que default marche, il faut lui créer un bootstrap de module permettant de charger ses models, ses formulaires et surtout ses contrôleurs.

Comme vous pouvez le voir, toutes les classes du module admin commencent par le Namespace Admin_, ceci est normal et permet à Zend de trouver facilement vos classes. Si vous oubliez cette information, Zend vous retournera une erreur comme quoi il ne trouve pas vos classes. Faites donc attention.
Dans le Bootstrap aussi vous devez renseigner le Namespace utilisé. Si il diffère de celui renseigné au début du nom de vos classes, vous aurez le droit à la même erreur.

/application/modules/admin/Bootstrap.php :

class Admin_Bootstrap extends Zend_Application_Module_Bootstrap
{  
    protected function _initAutoload()
    {
        $moduleLoader = new Zend_Application_Module_Autoloader(array(
            'namespace' => 'Admin_',
            'basePath'  => APPLICATION_PATH . '/modules/admin'));
        $moduleLoader->addResourceType('Models', 'models', 'Models');
        $moduleLoader->addResourceType('Forms', 'forms', 'Forms');
        return $moduleLoader;
    }
}

Afin de tester si notre module marche bien, nous allons ajouter l’IndexController et la vue associée à l’indexAction : /application/modules/admin/controllers/IndexController.php

class Admin_IndexController extends Zend_Controller_Action 
{
    public function indexAction() {
        $this->view->title="Authentification utilisateur";
    }
}

/application/modules/admin/views/scripts/index/index.phtml

<h3>Authentification</h3>

Normalement, si vous tapez http://localhost/tutosite.com/admin, vous devriez tomber sur La page suivante :

Je vous dis félicitation, vous venez de créer votre premier module pour le site. Maintenant, nous allons nous attaquer à quelque-chose de plus dur. La création du formulaire d’authentification.

Il faut savoir que dans la classe Zend_form, un élément comprend la légende et l’élément input. On peut aussi rajouter certains filtres et des validateurs pour automatiser des traitements rébarbatifs en PHP (combien ont fait des tests sur des $_POST).

Pour l’authentification, je prends les deux champs traditionnels : Login et Password. Le login ne sera pas une adresse E-Mail mais un pseudo. Je vous le dis pour le choix des validateurs. Si vous choisissez un e-mail, vous pouvez rajouter un validateur d’adresse e-mail qui accepte vos infos si et seulement si votre email a une structure valide (a@a.a). Vous pouvez aller plus loin en vérifiant que le nom de domaine existe bien (hotmail.com validé alors qu’azdfes.azdf est refusé).

Je vais donc vous montrer la classe formulaire que j’utilise sans trop rentrer dans les détails. La documentation explique beaucoup mieux que moi. Je vous expliquerais juste l’utilité des filtres et des validateurs que j’utilise.

/application/modules/admin/forms/Identification.php

class Admin_Forms_Identification extends Zend_Form 
{ 
    public function init()
    {
        $this ->setMethod('post')
              ->setName('identification'); 

        $login = new Zend_Form_Element_Text('login');
        $login ->setLabel('Identifiant')
               ->setRequired(TRUE)
               ->addFilters(array('StringTrim', 'StripTags'))
               ->addValidators(array( array('validator' => 'StringLength', 'options' => array(0, 20))))
               ->getDecorator('label')->setOption('tag', null);

        $passwd = new Zend_Form_Element_Password('password');
        $passwd ->setLabel('Mot de Passe')
                ->setRequired(TRUE)
                ->addFilters(array('StringTrim', 'StripTags'))
                ->addValidators(array( array('validator' => 'StringLength', 'options' => array(0, 20))))
                ->getDecorator('label')->setOption('tag', null);

        $submit = new Zend_Form_Element_Submit('submit');
        $submit ->setLabel('Connexion')
                ->setIgnore(true);

        $this->addElement($login);
        $this->addElement($passwd);
        $this->addElement($submit);

        $this->setDecorators(array(
            array('ViewScript', array('viewScript' => 'identification.phtml'))
        ));
    }
}

Tout d’abord, les filtres que j’utilise servent à limiter la casse et les injections de code (même si Zend ne permet pas ce genre de choses. Striptags permet d’enlever de notre variable toutes les balises de code afin d’éviter les injections JavaScript par exemple. Le filtre StringTrim quand à lui permet de supprimer les espaces en trop en début et en fin de notre variable afin de ne pas tricher sur le nombre de caractères requis. Ensuite le validateur StringLength quand à lui permet de définir le nombre min/max de caractères requis pour valider le formulaire.

Pour les décorateurs, j’ai décidé de passer par une vue externe afin de définir ma propre présentation. Cela permet une meilleure flexibilité de présentation e nos formulaires. Je trouve que les décorateurs sont trop complexes et limités mais en même temps, je suis nul avec. Pour pouvoir faire ce que je veux, j’ai donc désactivé les balises mises par défaut autour de notre élément.

Comme je vous l’ai expliqué, j’utilise un script de vue pour mettre en forme mon formulaire. Je vous le fournis bien entendu pour que vous puissiez voir comment cela marche.

/application/modules/admin/views/scripts/identification.phtml

<form action="<?php echo $this->escape($this->element->getAction()); ?>"         
      method="<?php echo $this->escape($this->element->getMethod()); ?>"         
      class="formident">         

    <p>Vous devez vous identifier pour accéder au backoffice.</p>        
    <div>        
        <span class="labelform"><?php echo $this->element->login->renderLabel(); ?></span>       
        <span><?php echo $this->element->login->renderViewHelper(); ?></span>        
    </div>       
    <div>        
        <span class="labelform"><?php echo $this->element->password->renderLabel(); ?></span>        
        <span><?php echo $this->element->password->renderViewHelper(); ?></span>         
    </div>       
    <?php echo $this->element->submit->renderViewHelper(); ?>                
</form>

Pour pouvoir afficher notre vue, nous ajoutons juste ces lignes pour le moment dans notre contrôleur :

$form = new Admin_Forms_Identification();
$this->view->form = $form;
$this->view->message = null;

Et dans notre vue, juste ces ligne :

<?php 
    if(!empty($this->message))
    {
?>
<div class="warning"><?php echo $this->message; ?></div>
<?php  
    }
    $this->form->setAction($this->url());
    echo $this->form;
    echo md5(azerty);

Voici le rendu final de notre vue :

En ajoutant le code css suivant à notre style, nous pouvons obtenir le résultat suivant :

/**
 * Formulaire authentification
 */
.formident{
    text-align: center;
}
.formident div{
    margin-top: 3px;
    margin-bottom: 3px;
    position: relative;
    width: 300px;
    margin-left: 330px;
} 
.formident div .labelform{
    width: 100px;
    display:block;
    float: left;
    text-align: left;
}

Alors ? Ce n’est pas sympa ce que l’on peut faire ? Nous pouvons aussi rajouter des images et des effets visuels sympas, mais ce n’est pas le but de cet article.

Bien, maintenant nous pouvons enfin attaquer le vif du sujet : L’authentification.

Comme je vous l’ai expliqué, nous allons authentifier notre utilisateur par une base de données. Je vais donc vous fournir le script de la base avec la table utilisateur. Je vais me baser dessus pour tous les autres articles du tutoriel.

CREATE DATABASE `tutosite` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `tutosite`;
CREATE TABLE IF NOT EXISTS `utilisateurs` (
    `idutilisateur` int(11) NOT NULL AUTO_INCREMENT,
    `login` varchar(50) NOT NULL,
    `passwd` varchar(100) NOT NULL,
PRIMARY KEY (`idutilisateur`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Bien évidemment, nous devons toucher les fichiers de configuration Zend pour pouvoir nous connecter à la base de donnée :

; Base de donnée
resources.db.adapter = PDO_MYSQL
resources.db.params.charset = UTF8
resources.db.params.host = localhost
resources.db.params.username = root
resources.db.params.password = passwd
resources.db.params.dbname = tutosite
resources.db.isDefaultTableAdapter = true

Voilà, maintenant que la connexion à la base de données fonctionne, voici les étapes à rajouter dans l’indexController->indexAction() pour s’identifier. J’ai commenté chaque ligne afin que vous ayez directement les explications :

if($this->_request->isPost())
{
    //on récupère le login
    $username = $this->_request->getPost('login');
    //on récupère le password  
    $password = $this->_request->getPost('password'); 

    if (empty($username)) 
    {
        $this->view->message = 'Veuillez saisir un identifiant';
    } 
    else
    {
        //on récupère la connexion à la base de donnée
        $dbAdapter = Zend_Db_Table::getDefaultAdapter();
        //récupération de l'adaptateur dbAdapter 
        $authAdapter = new Zend_Auth_Adapter_DbTable($dbAdapter);
        //on indique le nom de la table 
        $authAdapter->setTableName('utilisateurs'); 
        //on indique la colonne du login 
        $authAdapter->setIdentityColumn('login');
        //on indique la colonne du mot de passe 
        $authAdapter->setCredentialColumn('passwd');
        //on dit que les mots de passes sont hashés en MD5
        $authAdapter->setCredentialTreatment('MD5(?)'); 

        //ajout des données du formulaire pour l'authentification
        $authAdapter->setIdentity($username);
        $authAdapter->setCredential($password);

        //lancement de l'authentification
        $auth = Zend_Auth::getInstance()->setStorage(new Zend_Auth_Storage_Session('admin'));
        $result = $auth->authenticate($authAdapter);

        if ($result->isValid()) 
        {
            //succès: on stoque dans un objet sessions toutes les infos de la ligne
            //de la table sauf le mot de passe pour des raisons de sécurité.
            $data = $authAdapter->getResultRowObject(null, 'password');
            $auth->getStorage()->write($data);
            //on redirige vers notre page admin
            $this->_redirect('/admin/accueil');
        } 
        else 
        {
            //failure: clear database row from session
            $this->view->message = "Echec de l'identification";
        } 
    }
}

Avant de tester ceci, sachez que nous allons être redirigés vers un nouveau contrôleur du module admin. Pour éviter à quelqu’un de non authentifié d’accéder à ce contrôleur, j’initialise la fonction preDispatch() qui permet d’effectuer des réglages avant la fin de l’initialisation du contrôleur.
/application/modules/admin/controllers/AccueilController.php :

class Admin_AccueilController extends Zend_Controller_Action 
{ 
    public function preDispatch()
    {
        $auth = Zend_Auth::getInstance()->setStorage(new Zend_Auth_Storage_Session('admin'));

        if (!$auth->hasIdentity()) {
            $this->_redirect('/admin/index');
        }
    }

    /**
     * The default action - show the home page
     */
    public function indexAction() 
    {
        $this->view->title = "Partie Administration - Accueil";
    }
}

/application/modules/admin/views/scripts/accueil/index.phtml

Partie Admin, vous êtes authentifiés.</code> Maintenant votre authentification est optionnelle. 

Pour vous déconnecter, il suffit de faire un lien vers l’action déconnexion de l’IndexController par exemple et qui serait comme ceci :

public function logoutAction()
{
    Zend_Auth::getInstance()->setStorage(new Zend_Auth_Storage_Session('admin'))->clearIdentity();
    $this->_redirect('/admin/index');
}

Pour éviter de tomber sur le formulaire d’identification, vous pouvez rajouter ceci autour de toutes les lignes de codes d’indexAction() afin d’arriver directement sur l’accueil admin :

$ident = Zend_Auth::getInstance()->setStorage(new Zend_Auth_Storage_Session('admin'))->getIdentity(); 
if($ident){
    $this->_redirect('/admin/accueil');
}else{
    //code authentification
}
Pour les mots de passe créez une page php de base avec juste un echo md5(‘motdepasse’) ; et après insérez votre nouvel utilisateur avec, comme mot de passe, celui qui vient d’être généré.

Voilà. Maintenant vous pouvez vous authentifier et rajouter d’autres utilisateurs à votre base de données. La prochaine fois, nous verrons les classes métiers et table_abstract pour ajouter nos premiers articles.

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.

Headers – Compression CSS

Bonjours, je commence une série d’articles pour vous montrer la solution mise en place pour compresser les en-têtes de votre site.

Attention, pour le moment la solution n’est pas encore 100% fonctionnelle, à l’heure où j’écris ces lignes, sur le site je fonctionne encore avec le Zend_Cache utilisant les fichiers. En local, je travail avec Zend_Cache utilisant le cache APC. Certains problèmes me sont apparus avec les fichiers et ils ont disparus avec APC.

Donc tout d’abord je vais vous présenter le filtre que j’utilise pour compresser le contenu de mes fichiers CSS, ensuite je vous présente la méthode utilisée pour récupérer dans mon layout tous les appels à mes styles et pour finir comment je fais croire qu’il y a qu’un seul fichier CSS.

Attention: dans les exemples que je vais vous montrer, je vais faire appel à la classe App_Cache. Cette classe est donnée dans le livre Zend Framework – Bien développer en php.

Tout d’abord, pour compresser le contenu des fichiers CSS j’utilise le filtre présent ci-dessous. Il permet de supprimer toutes les tabulations, espaces en trop, commentaires présents dans le fichier.

/**
* Filtre servant à compresser des données CSS lors de la mise en cache par exemple.
*
* Supprime les espaces en trop, les commentaires et met tout sur une seule ligne.
*
* @author Throrin
*
*/
class App_Filter_CssCompressor implements Zend_Filter_Interface
{
public function filter($value)
{
$value = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $value);
$value = str_replace(array("\r\n", "\r", "\n", "\t", ' '), '', $value);
$value = str_replace('{ ', '{', $value);
$value = str_replace(' }', '}', $value);
$value = str_replace('; ', ';', $value);
$value = str_replace(', ', ',', $value);
$value = str_replace(' {', '{', $value);
$value = str_replace('} ', '}', $value);
$value = str_replace(': ', ':', $value);
$value = str_replace(' ,', ',', $value);
$value = str_replace(' ;', ';', $value);

return $value;
}
}

Ensuite, nous devons commencer par rajouter certaines lignes dans la partie contenant tous nos appels au CSS. Pour ce faire j’utilise la fonction ob_start() de PHP permettant de stocker ce qui suit dans un buffer et je le récupère avec la fonction ob_get_contents(). Pour finir à la suite de sa je ferais appel aux actions qui serviront à stocker le tout dans le cache grâce à la fonction $this->action().

<

headScript()."\n"; ?>


jQuery()->addStylesheet($this->baseUrl().'/styles/jquery-ui-1.7.2.custom.css')
->setUiLocalPath($this->baseUrl().'/scripts/jquery-ui-1.7.2.custom.min.js')
->setLocalPath($this->baseUrl().'/scripts/jquery-1.3.2.min.js')."\n"; ?>

action('compresscss', 'header', 'compress', array('contenu' => $output));
ob_end_clean();
?>

Voilà pour ici, maintenant on s’attaque à notre contrôleur qui va parcourir le contenu du buffer pour récupérer le lien vers chaque CSS. Ensuite il va lire le contenu des CSS, le compresser grâce à notre filtre et envoyer son contenu en cache. Pour éviter de répéter cette action assez lourde à chaque appel de l’action, on testera si le cache a bien été créé.

class Compress_HeaderController extends Zend_Controller_Action
{
public function compresscssAction()
{
$css = App_Cache::get('csssite');

if(!$css) {
$cssoffset = $this->_request->getParam('contenu');

//on récupère tous les fichiers CSS
preg_match_all('/link rel="stylesheet" href="(.*?)"/', $cssoffset, $matches);
$i = 0;
$n = count($matches[1]);
$contenucss = '';
//on parcour le tableau des fichiers CSS
while($i < $n) { $lienscss = str_replace('//', '/', $_SERVER['DOCUMENT_ROOT']."/zendtuto18/public"); //lien absolu vers votre dossier public $liens = str_replace('/test18', '', $matches[1][$i]); $handle = fopen($lienscss.$liens,'r'); $contenucss .= fread($handle, filesize($lienscss.$liens)); $i++; } $filtrecss = new App_Filter_CssCompressor(); $contenucss = $filtrecss->filter($contenucss);

App_Cache::set($contenucss, 'csssite');
}
}
}

Voilà pour le contrôleur. Le problème c’est qu’il faut bien dire quel CSS on affiche. C’est pourquoi dans la vue de cette action vous allez mettre juste cette ligne:


Maintenant il y a une question qui vous brûle les levres et qui doit être: « Qu’est-ce que ce fichier style.css? ». Ce fichier est en fait un lien vers notre action d’affichage. Pour ce faire nous devons créer la règle de réécriture présente ci-dessous (htaccess et zend_route).

.htaccess :

RewriteRule ^(.*)styles/style.css$ /compress/header/css [L]

bootstrap.php dans l’action _initRoute() :

$router->addRoute(
'manageCSS',
new Zend_Controller_Router_Route('styles/style.css', array('module' => 'compress', 'controller'=>'header','action'=>'css'))
);

Voilà, cette règle a été nécessaire pour pas casser tous les liens relatifs présents dans les fichiers CSS. Ensuite il ne vous reste plus qu’à créer cette action dans le contrôleur header afin d’afficher le style:

public function cssAction()
{
$this->_helper->layout()->disableLayout();
$this->_helper->viewRenderer->setNoRender(true);
$css = App_Cache::get('css');

$this->getResponse()->setHeader("Content-type","text/css; charset: UTF-8");
$this->getResponse()->setHeader("Cache-Control","must-revalidate");
$offset = 60 * 60 ;
$ExpStr = gmdate("D, d M Y H:i:s",time() + $offset) . " GMT";
$this->getResponse()->setHeader("Expires: ", $ExpStr);
echo $css;
}

Après ceci tout devrai fonctionner comme sur des roulettes. Pour la partie JS tout est à peu près de ce genre. Seules quelques étapes supplémentaires sont nécessaires pour tout récupérer. J’espère que cet article vous aura permi de trouver une méthode pour compresser vos styles. Par contre évitez de l’utiliser pour un site necessitant un fichier CSS différent par pages. Effectivement en cache vous aurez que le contenu des css inclus dans la première page.