Gestion des pages Web sous CodeIgniter

Bonsoir à tous,

Je pense que c'est l'un des tutoriels les plus important de mon blog. Vous devriez gagner en rapidité de développement, car optimiser pour faire les tâche les plus importantes : création de contenu de la page et création de chaque composante de la page. De plus , nous gagnerons en visibilité car les contenus seront stockés dans le répertoire 'controllers' et les composantes dans le répertoire views. Tenez vous prêt, ce tuto est très très long ... Accrochez vous !

Je fais une première annonce, je bascule sur CodeIgniter 2.0. L'arborescence du projet ainsi qu'un certain nombre de fonctionnalités ont été modifié. Tous mes prochain posts prendront en compte ces changements.

Dans ce tutoriel, je souhaite vous montrer comment gérer de pages web, même complexes, dans le processus de création d'un site internet, qu'il soit petit, moyen ou grand...

La problématique aujourd'hui est que un nombre de plus en plus important de technologies s'ajoute au fur et à mesure(Rss, json, Ajax, Rest, Soap, Mail, Atom, Minify, Trackback, Css2/3, HTML4.1/4.4/5, etc ...), et il est de plus en plus difficile de de répondre de manière satisfaisante à ces technologies.

Nous allons structurer un projet web afin de ce concentrer sur l'essentiel, le CONTENU de la page !

Je vous conseille au préalable de lire cet article "Controller de controller", qui est un prérequis à cet article.

Présentation de répertoire controllers

La première chose à vous montrer est le répertoire 'controllers' comme le montre l'image ci dessous


Vous voyez 2 fichiers de configuration _config_html.ini.php et _config_mail.ini.php. Il permettent de configurer un ensemble de pages internet et l'autre configurer un ensemble de mail.

Les fichiers doctype_****.php sont en faire les formats de sorties d'une requête. simplement, si vous souhaitez renvoyer au client une page internet, alors vous utiliserez doctype_html.php. Si vous souhaitez renvoyer un flux RSS, et bien vous utiliserez le fichier doctype_rss.php...

Vous avez aussi le fichier controller.php. Ce fichier permet simplement d'implémenter des fonctionnalités qui peuvent être utiliser par toutes les pages. Cela peut être le cas de service de géolocalisation, WebServices Amazon, ou twitter ...etc... il sera pour l'instant 'vide'.

Enfin, les autres fichiers sont simplement les contrôleurs dans une architecture MVC.

Ficher _config_html.ini.php

Voici le contenu du fichier _config_html.ini.php :

;langue de la page en 2 lettres
lg        = jp

;titre de la page 
title       = My website

;Encodage de la page
charset       = UTF-8 

;Favicon de la page
;true ou false
favicon       = true

;adresse rss
rss        =

;css & js
min_css       = toto.css
min_js       = titi.js

;cdn & host
cdn        = cdn.toto.com
host       = ceramique-paris.fr

;balises meta_
meta_description    = coucou
meta_keywords     =  
meta_Author      =  
meta_Copyright      =  
meta_geo.region     =  
meta_geo.placename    =  
meta_geo.position    =  
meta_ICBM      =  
meta_DC.Title     =  
meta_DC.Creator     =  
meta_DC.Type     =  
meta_DC.Date     =  
meta_DC.Format     =  
meta_google-site-verification =

Vous voyez donc les paramètres de configuration d'une page internet(langue, encodage,balise meta,favicon ...). Si la variable est vide, alors elle ne s'affichera pas dans le code html. Vous pouvez déjà faire une configuration de base pour un ensemble de page internet, et créer une autre configuration pour un autre ensemble: (par exemple: créer un fichier _config_html_content.ini.php pour le contenu et _config_html_user.ini.php pour les pages utilisateurs)

fichier controller.php et doctype_html.php

Vous devez créer ces deux fichier et faire un copy-past sur votre projet.
Voici le fichier controller.php:

class Controller extends CI_Controller{
 
 function __construct()
 {
  parent::__construct();
 }
 
 // Ajouter des fonctionnalité
 /*
  webservices ...
  reporting
  mail
 */
 
}

et ici, le fichier le fichier doctype_html.php

require_once 'controller.php';

class Doctype_html extends Controller{

 
 /*
  Attributs interne
 */ 
 public $param      = array();

 
 /*
  Constructeur
 */ 
 function __construct($config_file="")
 {
  parent::__construct();
  
  $this->param{'lg'}         = 'fr'; 
  $this->param{'title'}        = 'Undefined title'; 
  $this->param{'charset'}        = 'UTF-8'; 
  $this->param{'favicon'}        = true;
  $this->param{'js'}         = array();
  $this->param{'js_ext'}        = array();
  $this->param{'min_js'}        = '';
  $this->param{'css'}         = array();
  $this->param{'min_css'}        = '';
  $this->param{'rss'}         = '';
  $this->param{'cdn'}         = '';
  $this->param{'host'}        = '';
  $this->param{'meta'}{'description'}     = ''; 
  $this->param{'meta'}{'keywords'}     = ''; 
  $this->param{'meta'}{'Author'}      = ''; 
  $this->param{'meta'}{'Copyright '}     = ''; 
  $this->param{'meta'}{'geo.region'}     = ''; 
  $this->param{'meta'}{'geo.placename'}    = ''; 
  $this->param{'meta'}{'geo.position'}    = ''; 
  $this->param{'meta'}{'ICBM'}      = ''; 
  $this->param{'meta'}{'DC.Title'}     = ''; 
  $this->param{'meta'}{'DC.Creator'}     = ''; 
  $this->param{'meta'}{'DC.Type'}      = ''; 
  $this->param{'meta'}{'DC.Date'}      = ''; 
  $this->param{'meta'}{'DC.Format'}     = ''; 
  $this->param{'meta'}{'google-site-verification'} = ''; //google webmastertools
  $this->param{'body'}        = '';
  
  if(!empty($config_file)){
   $fichier = dirname(__FILE__)."/".$config_file;
   $tableauIni = parse_ini_file($fichier);
   foreach($tableauIni as $k=>$v){
    $fn    = '_'.$k;
    $this->$fn($v);}
   }
 }
 
 /*
  __call
 */ 
 public function __call($methode,$arg){
  
  if($methode=='send')
   $this->send();
  
  // méthode ne commencant pas par '_' éliminé
  if(substr($methode,0,1)!='_')
   return false;
   
  // balise meta
  if(substr($methode,0,6)=='_meta_'){
   $this->param{'meta'}{str_replace('_meta_','',$methode)} = $arg[0];
   return true;
  }
   
  // existe dans param, modification de la valeur
  if(isset($this->param{substr($methode,1,strlen($methode))}))
   $this->param{substr($methode,1,strlen($methode))} = $arg[0];
   
  return true;
 }
 
 /*
  Envoi du code html
 */ 
 public function send(){
  // genere js ... todo
   
  // genere css ... todo
 
  // return code html
  echo $this->load->view('tpl_html',$this->param);
 }
}

Nous remarquerons que CI_Controller hérite Controller qui lui hérite doctype_html, qui lui héritera le controleur de notre page internet...

Voici le fichier tpl_html.php qu'il faudra mettre dans le répertoire views de votre projet. Ce fichier récupéra les valeurs du fichier _config_html.ini.php, et les utilisera pour générer le code html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="<?php echo !empty($lg) ? $lg:'fr';?>" lang="<?php echo !empty($lg) ? $lg:'fr';?>" >
<head>
<meta http-equiv="content-type" content="text/html; charset=<?php echo isset($charset) ? $charset:'UTF-8';?>" />
<title><?php echo !empty($title) ? $title:'Undefined title !';?></title>
<?php if(!empty($meta{'description'})):?><meta name="description" content="<?php echo $meta{'description'};?>" />
<?php endif;?>
<?php if(!empty($meta{'keywords'})):?><meta name="keywords" content="<?php echo $meta{'keywords'};?>" />
<?php endif;?>
<?php if(!empty($meta{'geo.region'})):?><meta name="geo.region" content="<?php echo $meta{'geo.region'};?>" />
<?php endif;?>
<?php if(!empty($meta{'geo.placename'})):?><meta name="geo.placename" content="<?php echo $meta{'geo.placename'};?>" />
<?php endif;?>
<?php if(!empty($meta{'geo.position'})):?><meta name="geo.position" content="<?php echo $meta{'geo.position'};?>" />
<?php endif;?>
<?php if(!empty($meta{'ICBM'})):?><meta name="ICBM" content="<?php echo $meta{'ICBM'};?>" />
<?php endif;?>
<?php if(!empty($meta{'DC.Title'})):?><meta name="DC.Title" content="<?php echo $meta{'DC.Title'};?>" />
<?php endif;?>
<?php if(!empty($meta{'DC.Creator'})):?><meta name="DC.Creator" content="<?php echo $meta{'DC.Creator'};?>" />
<?php endif;?>
<?php if(!empty($meta{'DC.Type'})):?><meta name="DC.Type" content="<?php echo $meta{'DC.Type'};?>" />
<?php endif;?>
<?php if(!empty($meta{'DC.Date'})):?><meta name="DC.Date" content="<?php echo $meta{'DC.Date'};?>" />
<?php endif;?>
<?php if(!empty($meta{'DC.Format'})):?><meta name="DC.Format" content="<?php echo $meta{'DC.Format'};?>" />
<?php endif;?>
<?php if(!empty($meta{'google-site-verification'})):?><meta name="google-site-verification" content="<?php echo $meta{'google-site-verification'};?>" />
<?php endif;?>
<?php if(!empty($min_css)):?><link href="<?php echo !empty($cdn) ? 'http://'.$cdn.'/'.$min_css:'http://'.$host.'/'.$min_css;?>" rel="stylesheet" type="text/css" />
<?php endif;?>
<?php if(!empty($js_ext)):foreach($js_ext as $v){?><script type="text/JavaScript" src="<?php echo $v;?>"></script>
<?php }?>
<?php endif;?>
<?php if(!empty($min_js)):?><script type="text/JavaScript" src="<?php echo !empty($cdn) ? 'http://'.$cdn.'/'.$min_js:'http://'.$host.'/'.$min_js;?>"></script>
<?php endif;?>
<?php if($favicon==true):?><link rel="icon" type="image/png" href="<?php echo !empty($cdn) ? 'http://'.$cdn.'/favicon.ico':'http://'.$host.'/favicon.ico';?>" />
<?php endif;?>
</head>
<body>
<?php echo $body;?>
</body>
</html>

Création de votre page monTest/index/

Il faut créer le fichier monTest.php dans le répertoire controllers, et mettre le code suivant

require_once 'doctype_html.php';

class MonTest extends Doctype_html{

 function __construct(){
  parent::__construct('_config_html.ini.php');
 }
 
 
 
 public function index(){
 //print_r($this->param);
  $this->send();
  
 }
}

Vous comprendrez que dans le code précédent, on charge le fichier de configuration '_config_html.ini.php' dans le constructeur du contrôleur monTest qui est hérité de Doctype_html.
Dans la fonction index, vous pourrez visualisez les valeurs des variables de la page, grâce à print_r($this->param);.
De plus, si vous allez dans la page http://localhost/[APP]/monTest/index/, vous verrez une page blanche (parce qu'il n ' a pas de contenu), mais, via firebug, vous aurez le code html suivant:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="jp" lang="jp" >
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>My website</title>
<meta name="description" content="coucou" />
<link href="http://cdn.toto.com/toto.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript" src="http://cdn.toto.com/titi.js"></script>
<link rel="icon" type="image/png" href="http://cdn.toto.com/favicon.ico" />
</head>
<body>
</body>
</html>

Vous voyez le titre de la page My website.

Modifier les variables dynamiquement

Question, allons nous créer un fichier _config_html.ini.php par page ? et bien non, ce n'est pas obligatoire, et cela est même déconseillé pour du très grand contenu (milliers de pages ^^).
En fait il est possible de modifier tous les valeurs de ces variables dynamiquement, nous allons modifier le title de la page avec le code suivant, à mettre dans la fonction index():

$this->_title('nouveau titre');
$this->send();

Vous devriez voir dans la balise title :'nouveau titre'.
En fait, vous précédez le nom de la variable par le caractère underscore. donc pour le title, faire:

$this->_title('[TITLE]');

pour la langue, faire:

$this->_lg('[LANGUE]');

, pas compliqué ... non ?
et pour le contenu, c'est :

$this->_body('[CONTENU]');

A priori, vous n'aurez pas besoin d'utiliser la variable body dans la méthode index(), nous verrons pourquoi dans la section suivante ...

Pour faire un récap des possibilités de manipulation, d'abord vous charger le fichier de configuration de votre page internet, puis si des paramètres ne vous plaisent pas, comme le titre de la page, vous la modifiez à la volé ! C'est la classe, non ?

Composants d'une page internet

Il y a une chose que nous avons oublié est qu'une page internet est composé d'éléments qui sont placé au même endroit: header en haut, footer en bas, menu à gauche ou sous le header ...

Pour faire simple, nous allons créer une structure simplifié :
header/menu/contenu/extra/footer superposé les uns sur les autres.
extra, situé entre contenu et footer s'affichera uniquement pour la page monTest/index, et non pas sur une autre page.

dans le répertoire views, nous allons 5 fichiers:
gb_content.php:

<div style="border:1px solid blue;margin: 5px;padding :5px;color:blue;"><h2><?php echo $content;?></h2></div>

gb_extra.php:

<?php echo$_SERVER{'REQUEST_URI'};if($_SERVER{'REQUEST_URI'}=='/bimpoo/monTest/index.html'){?><div style="border:1px solid green;margin: 5px;padding: 5px;color:green;"><h2>EXTRA</h2></div><?php }?>

gb_footer.php:

<div style="border:1px solid red;margin: 5px;padding :5px;color:red;"><h2>FOOTER</h2></div>

gb_header.php:

<div style="border:1px solid red;margin :5px;padding :5px;color:red;"><h2>HEADER</h2></div>

gb_menu.php:

<div style="border:1px solid red;margin :5px;padding: 5px;color:red;"><h2>MENU</h2></div>

Nous allons remplacer la méthode index par la suivante:

 public function index(){
 $this->param{'content'}    = 'COUCOU !';
 $this->send();
 }

Nous ajoutons la variable content qui sera le contenu de la page internet, puis nous appelons la focntion send pour générer la page internet et la renvoyer. Nous allons créer une méthode similaire index2() avec le même contenu que index(). Si nous générons la page monTest/index, il n y aura toujours qui s'affichera car on n' a pas encore chargé les vus... !

pour cela, il faut ouvrir le fichier doctype_html.php et aller à la méthode send()
sur le fichier, il y avait juste:

echo $this->load->view('tpl_html',$this->param);

C'est avant cette ligne de code que nous allons rajouter toutes les autres vues, avec le code suivant:

  $html     = $this->load->view('gb_header',$this->param,true);
  $html     .= $this->load->view('gb_menu',$this->param,true);
  $html     .= $this->load->view('gb_content',$this->param,true);
  $html     .= $this->load->view('gb_extra',$this->param,true);
  $html     .= $this->load->view('gb_footer',$this->param,true);
  $this->_body($html);
  echo $this->load->view('tpl_html',$this->param);

nous chargeons toutes les vues dans la variable $html que nous mettons ensuite dans la variable body ! puis nous générons la page internet.
C'est donc ici que vous allez imposer une structure (ou plusieurs structure si vous répliquez le fonction send()) d'une page internet !
N'oubliez que chaque vu se gérée d'elle même, dans le but de simplifier le traitement du contrôleur et de lui dédier uniquement le contenu principale de la page : par exemple pour activer l'onglet d'un menu en fonction de l'url, il vous suffit de rajouter une variable dans $this->param (par exemple $this->param{'onglet_actif'}) et lui attribuer le nom du contrôleur.

$this->param{'onglet_actif'} = __method__;

ensuite, vous le récupérez dans la vue et faire le traitement adéquate ...

voici le résultat de la page monTest/index :







Et la, le résultat de la page monTest/index2

Si vous avez remarquez le code dans le fichier gb_extra, le code html est entouré de balises php. Ces balisent testent pour savoir si l'url est celle de monTest/index ou pas. Si c'est oui, alors le code html est affiché !

Conclusion

J'espère que vous aurez compris l'intérêt de ce tutoriel : Vous faire gagner du temps et rendre le projet facile à maintenir !
Voilà, si vous êtes arrivé là, alors vous etiez un vrai warior ! N'hésitez pas à me contacter pour plus d'info ou pour des corrections !

Faire une table html en 4 lignes de code !

Introduction

Humm ... je vous vois très sceptique sur le titre de ce nouveau tuto ! Mais vous allez voir que c'est vrai ... hihihi ...
Par contre ce que je n'ai pas dit, c'est que nous allons créer une table html à partir des données d'une table mysql !

Un tableau simple

On va créer un contrôleur test_table ... et mettre le code suivant

class test_table extends Controller{

 public function test(){
 
  $this->load->database();
  $this->load->library('table');
  $query = 'SELECT * FROM [TABLE] LIMIT 0,10';
  echo $this->table->generate($query);
 }
}

Vous affichez le contenu d'une table mysql. Vous pouvez choisir les colonnes que vous souhaitez afficher en remplaçant l'étoile par les noms des colonnes, comme on le fait pour une requête mysql...

Modifier l'intitulé de la colonne

Parfois l'intitulé ne correspond pas à ce que vous souhaitez afficher ou même pire, il n'a pas forcément de sens explicite. C'est la raison pour laquelle, il serait préférable de changer l'intitulé.
Pour cela, rien de plus simple, à côté de chaque nom de colonne, on rajoute "AS [nouvel intitulé]" dans la requête...
Par exemple, si on a comme requête:

SELECT nom,prenom,add,tel FROM user LIMIT 0,10

on mettra:

SELECT 
nom AS 'Nom de famille',
prenom AS 'Prénom',
add as 'Adresse de domicile',
tel AS 'Téléphone fixe de la maison' 
FROM user LIMIT 0,10

Voila, vous suivez ... ?

Nouvelle mise en page...

Plus compliqué, on va faire un tableau à 2 colonnes. La première colonne concernera les informations de l'utilisateur(nom, prénom, adresse), et le second son statut (connecté, non connecté)...
tout en utilisant un template spécifique ...
alors ... ?
Bon, tout d'abord, on va faire ce que nous savons faire ... c'est à dire la deuxième colonne:on aura donc :

SELECT [UN TRUC] AS Utilisateur, 
statut AS 'Statut de l\'utilisateur' 
FROM user LIMIT 0,10

Maintenant, il faut remplacer [UN TRUC] parle code que l'on souhaite ajouter...
le template sera de la forme suivante :
<b>Nom</b> : [nom]<br />
<b>Prénom</b> : [prenom]<br />
<b>Adresse</b> : [adresse]
En fait, on utilisera la fonction CONCAT de mysql ! de la manière suivante :

CONCAT('<b>Nom</b> : ',nom,
'<br/><b>Prénom</b> : ',prenom,
'<br /><b>Adresse</b> : ',adresse)

on a donc au final la requête suivante :

SELECT CONCAT(
'<b>Nom</b> : ',nom,
'<br/><b>Prénom</b> : ',prenom,
'<br /><b>Adresse</b> : ',adresse) AS Utilisateur, 
statut AS 'Statut de l\'utilisateur' 
FROM user LIMIT 0,10

Conclusion

Voilà, nous pouvons faire des tableaux plus agréable à voir et surtout nous avons des possibilités importantes de présentation !
Je vous revois à la documentation de codeIgniter pour customiser encore plus vos tableaux ...
Mais vous pouvez déjà voir que l'on peut créer des tables avec du code concis ...

Un controlleur de controlleur ...

Qu'est ce que c'est ce titre ???

Alors, le but de ce tutoriel est de proposer une petite astuce qui bien pensé améliora votre développement web sous codeIgniter ... Pour comprendre ou je veux en venir, on va passer tout de suite à un exemple, sous forme de problématique simple et usuelle que vous pourrez réemployer pour d'autre cas divers et variés...

Problématique ...

Le contrôleur est le "chef d'orchestre" lorsqu'une requête arrive au serveur. Il va trouver les éléments à afficher, se connecter à la base de données, mettre en forme le contenu, puis envoyer le tout au client ...
Lorsque le contrôleur doit générer une page internet, alors, pour certaines parties de la page, il génèrera toujours le même code html (comme c'est le cas pour le header, footer, ou le menu ...), et certaines parties changent en fonction de la requête, comme c'est le cas du contenu par exemple.
Nous allons donc faire en sorte que chaque partie ai un code html par défaut et, que l'on puisse modifier n'importe quelle partie en fonction de la page demandée. Nous allons faire une page "Erreur 404", puis nous allons faire en sorte que l'on puisse transformer en une autre page ...

Le contrôleur de la page 404

Il faut créer un fichier main_controlleur.php dans le répertoire [MYAPP]/system/controllers
et vous mettez le code suivant:

class main_controller extends Controller{

 public function _header(){
  echo '<h1>HEADER</h1>';
 }
 
 public function _footer(){
  echo '<h1>FOOTER</h1>'; 
 }
 
 public function _content(){
  echo '<h1>PAGE 404</h1>';
 
 }
 
 public function _process(){
  $this->_header();
  $this->_content();
  $this->_footer();
 }
}

Vous avez 4 fonctions privées. Les trois premières servent à générer une partie du code html (header, contenu de la page 404, et footer).
Et la dernière sert à générer la page, en appelant les autres fonctions privées.
Aucune méthode de se contrôleur ne peut être appelé directement puisque toutes les méthodes sont privées, ce qui nous arrange.

nous allons maintenant créer un nouveau contrôleur "crtl_test", qui lui sera accessible et qui sera la classe fille de main_controller. Il faut donc créer le fichier crtl_test.php et mettre le code suivant:

require_once APPPATH.'controllers/main_controller.php';

class crtl_test extends main_controller{
 
 function test(){
  $this->_process();
 }

}

Si vous appelez la page [HOST]/crtl_test/test.php, alors vous verrez:
HEADER
PAGE 404
FOOTER

Maintenant, on va redéclarer la fonction privée _content dans la classe crtl_test, on a alors au finale:

require_once APPPATH.'controllers/main_controller.php';

class crtl_test extends main_controller{

 public function _content(){
  echo '<h1>AUTRE PAGE ...</h1>';
 }
 
 function test(){
  $this->_process();
 }
}

Vous verrez, si vous appelez la même page, vous aurez le contenu qui changera ...c'est à dire:
HEADER
AUTRE PAGE ...
FOOTER

Ensuite ...

Vous faites dérivez tous les contrôleurs que vous créerez à main_controller, afin qui jouissent automatiquement des mêmes fonctions par défaut. Vous devriez aller bcp plus vite dans le développement et surtout la maintenance y sera facilité ... !

Dans vos futures développements

Pensez à toujours créer un "controleur de controleur" (même si le main_controller est vide), car pour factoriser le code facilement, vous allez devoir migrer certaines fonctions de crtl_test vers main_controller.

Enlever le index.php de l'URL

Lorsque vous débutez un nouveau projet sur codeIgniter, a première chose est de supprimer le chaine "index.php" de l'url.
Ce mini tuto est une note pour moi même ...

1- ouvrir le fichier application/config/config.php et remplacer

$config['index_page'] = "index.php";

par

$config['index_page'] = "";

2- créer un fichier .htaccess et mettre :

RewriteEngine On
RewriteBase /modificationDuCheminDeBase
RewriteCond %{REQUEST_URI} ^system.*
RewriteRule ^(.*)$ /index.php/$1 [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

Et maintenant, ca devrait marcher ...

Installation d'un compresseur Javascript YUI sur CodeIgniter

Bonsoir à tous,

Après un moment d'absence, je vais vous présenter comment installer YUI Compressor, et l'utiliser. Mais nous allons tout d'abord voir à quoi cela peut il servir ...

I. Introduction
YUI compressor a été développé par Julien Lecomte, il y a pas mal de temps, c'est à dire lors de YUI 2.0 (à vérifié...) En tout cas, son script est toujours apprécié et rend service à bien des développeur comme moi. YUI Compressor a été développé sous Java et permet de compresser des codes javascript. YUI Compressor est très utilisé pour des applications full-javascript ou le code peut aller à plusieurs centaines de milliers octets ! Mais aussi pour compresser des fichiers css(en enlevant tout le superflu). Je crois que la moyenne de compression est un facteur 44%, ce qui est plutôt pas mal ... !

II. Installation
Vous vous rendez sur la page suivante et vous téléchargez YUI Compressor.
page de téléchargement
A la racine de votre répertoire d'application (ou se trouve le répertoire "system" de CodeIgniter), vous allez créer le répertoire 'lib','min', et 'js'. Afin d'avoir un environnement plus développé, vous pouvez créer un répertoire 'media' ou vous mettrez tous les fichiers media, c'est à dire images, musics, et videos (créez les répertoires correspondants).
Vous ajouterez de plus le répertoire 'yuiCompressor', dans lequel vous décompresserez votre fichier zip.

on aura donc une arborescence de la manière suivante:

|- js
|- lib
  |- yuiCompressor
|- media
  |- images
  |- musics
  |- videos
|- min
|- system (répertoire de CodeIgniter)

le répertoire 'js' est votre répertoire de développement javascript,et le répertoire 'min' deviendra le lieu ou seront stocké vos fichier compréssés...

Maintenant, Il faut installer une partie de mon framework maison qui se nomme 'Corus'.
donc dans le répertoire system de Codeigniter, il faut aller sur lib et créer un répertoire 'corus' et vous mettrez le fichier explorer.php et yuiComressor.php. Le premier permet de récupérer l'arborescence d'un répertoire ainsi que tous ses fichiers existants, et le deuxième permet d'effectuer une compression javascript ou css.

ps :N'oubliez pas de rajouter les balise php !!!
voici le contenu des deux fichiers:
explorer.php

class explorer {

 public $file = array();
 public $dir  = array();
 
 
 public function __construct($path){
  $this->mklist($path);
 }


 public function mklist($p) { 
  if(is_array($p) && isset($p{'path'}))
   $path     = $p{'path'};
  else $path     = $p;

  if ($dir = opendir($path)) { 
   while($file = readdir($dir)) {
    if($file!='.' && $file!='..'){
     if(is_file("$path/$file"))
      $this->file[] = "$path/$file";
      
     if(is_dir("$path/$file"))
      $this->dir[] = "$path/$file";
     }
      
    if(is_dir("$path/$file") && !in_array($file, array(".","..")))  
     $this->mklist("$path/$file"); 
   } 
   closedir($dir); 
  } 
 } 
}

yuiCompressor.php

/**
* Définir la version de yui compressor
* La version se trouve dans le nom du fichier yusiCompressor/build/yuicompressor-x.y.z.jar
* la forme est : x.y.z ou x,y,z sont des chiffres
*/
define('YUI_COMPRESSOR_VERSION','2.4.2');


class yuiCompressor {

 public $directories    = array();
 public $files      = array();
 private $debugExist     = false;
 public $nom       = '';
 
 
 
 /*
  Constructeur
 */
 public function __construct($name=''){
  if(empty($name))
   $name      = 'default';
  $this->nom      = $name{'name'};}
 
 
 
 /*
  Effacer les repertoire et fichiers ...
 */
 public function delete(){
  $this->directories    = array();
  $this->files     = array();
  $this->debugExist    = false;
 }
 
 
 
 
 /*
  Ajout d'un répertoire
 */
 public function addDir($dir=''){
  try{
   if(empty($dir))
    throw new Exception('argument vide');
    
    
   if(!file_exists($dir))
    throw new Exception('Repertoire inexistant');
    

   $this->directories[]   = $dir;   
   // Récupération de tous les fichiers à partir des repertoires selectionnés par l'utilisateur
   $ci        = & get_instance();
   $param{'path'}     = $dir;
   if(!isset($ci->explorer))
    $ci->load->library('corus/explorer',$param);
   else
    $ci->explorer->mklist($param);
   $temp       = $ci->explorer->file;
   foreach($temp as $v)
    $this->files[]    = $v; 
   return true;
  }
  catch(Exception $e){
   return '< pre>'.$e.'';
  }
 }
 
 
 
 /*
  Ajout d'un fichier
 */
 public function addFile($file){
  try{
   if(empty($file))
    throw new Exception('argument vide');
    
    
   if(!file_exists($file))
    throw new Exception('Fichier inexistant');
    
    
   $this->files[]   = $file;
   return true;
  }
  catch(Exception $e){
   return '< pre>'.$e.'';
  } 
 }
 
 
 
 
 /*
  Création du fichier *.debug.js 
 */
 private function generateDebug($option,$type){
  try{
   $liste     = array();
   $ci      = & get_instance();

   // Efface le fichier précompilé si il existe
   $path     = FCPATH;
   if(file_exists($path.'min/'.$this->nom.'.debug.'.$type.'.'.$option))
    unlink($path.'min/'.$this->nom.'.debug.'.$type.'.'.$option);

    
   // Vérification qu'il n y a pas de doublons
   $verif     = array();
   foreach($this->files as $el){
    if(array_search($el,$verif)===false && substr($el,strlen($option)*(-1)-1)=='.'.$option )
     $verif[]      = $el;
   }
   $this->files   = $verif;
   $this->directories  = array();
   if(empty($this->files))
    throw new Exception('Aucun fichier trouvé');
 
   // Création du fichier
   $temp     = '';
   foreach($this->files as $v){
    $temp    .= file_get_contents($v);}
   file_put_contents($path.'min/'.$this->nom.'.debug.'.$type.'.'.$option,$temp);
   $this->debugExist  = true;
   return true;
    
  }
  catch(Exception $e){
   return '< pre>'.$e.'';
  } 

 }
 
 
 
 /*
  Création du fichier *.min.js
 */
 private function generateMin($option,$type){
  try{

   // Supprime la dernière version du fichier
   $path     = str_replace('system/','',BASEPATH);
   if(file_exists($path.'min/'.$this->nom.'.min.'.$type.'.'.$option))
    unlink($path.'min/'.$this->nom.'.min.'.$type.'.'.$option);
    
   // Création de la requête
   $version = YUI_COMPRESSOR_VERSION;
   $entre  = $path.'min/'.$this->nom.'.debug.'.$type.'.'.$option;
   $sortie  = $path.'min/'.$this->nom.'.min.'.$type.'.'.$option;
   $cmd  = "java -jar ".$path."lib/yuiCompressor/build/yuicompressor-$version.jar $entre -o $sortie --charset utf-8";
   exec($cmd,$out);
   if(!empty($out))
    throw new Exception('Erreur dans l\'execution de la commande');
   return true;
  }
  catch(Exception $e){
   return '< pre>'.$e.'';
  }
 }
 
 
 
 /*
  Minifier les fichiers
  option : js ou css
  type: mobile ou page
 */
 public function min($option,$type){
  try{
   // type de page invalide
   if($type!='page' && $type!='mobile')
    throw new Exception('type de page invalide');

   // Extension du fichier invalide
   if($option!='js' && $option!='css')
    throw new Exception('Extension de fichier invalide');

   // si pas de fichier
   if(empty($this->directories) && empty($this->files) ){
    throw new Exception('pas de fichier');}
   
   
   // création du fichier *.debug.js
   $this->generateDebug($option,$type);
   
   
   if($this->debugExist!==true)
    throw new Exception('Erreur dans la création de *.debug.js');
   
   
   // création du fichier *.min.js   
   $this->generateMin($option,$type);
   
   return true;
  }
  catch(Exception $e){
   return '< pre>'.$e.'';
  }
 }
}

Retenez que pour utiliser yuiCompressor, il vous faudra explorer.php ! (sinon, rien ne marchera ...)

Voila, nous somme arrivé au terme de notre installation ! Et nous allons pouvoir faire nos premiers compressions!

pour ceux qui utilise Linux, il faudra faire une modification à la fonction generateMin et modifier le contenu de la variable $cmd. Pour cela, il fau se référé à la documentation yui compressor.


III.Utilisation

L'utilisation est plutôt simple, et se décompose en 4 parties:

1. Appel de la librairie yui compressor
Dans une fonction d'une classe de parent Controller
mettre :

$this->load->library('corus/yuiCompressor',$param);

2. Ajouter les fichiers ou répertoire de votre projet javascript:

   $path = 'PATHFC.'js/index';
   $this->yuicompressor->addDir($path);//exemple d'ajout de répertoire
   $this->yuicompressor->addFile($path.'/toto.js');// exemple d'ajout de fichier javascript

3. Action ! compresser les fichier en 1 seul fichier :

$this->yuicompressor->min('js');

4. Optionnel, si vous devez compressez en plusieurs fichiers, utlisez :

$this->yuicompressor->delete();

entre les différentes phases de compression

Commentaire: pour compresser des fichiers css, à l'étape 3, il faudra simplement remplacer 'js' par 'css'. Remarquons, que la classe yuiCompressor, sera distinguer les type de fichiers js du css !

Vous remarquerez les fichiers compressé sont dans le répertoire min !
vous avez une extension .debug.js (ou .debug.css) (qui est simplement un agglomérat des fichiers ajouté les uns aux autres)
et les extensions (.min.js ou .min.css) étant les fichier compressé et à utiliser en production... !


IV Conclusion
Nous avons vu comment compresser des fichiers javascript et css avec yui Compressor. Les fichiers compressés avec une compression zip (deflate) deviennent au final la meilleurs solution en terme de rapidité de chargement d'une application web full javascript !
imaginez ce module associé à extjs + Sencha Touch + intégration de la librairie Zend sur CodeIgniter, et vous obtiendrez un outil de développement ultra efficace !
nous verrons justement comment intégré extjs et sencha Touch sur CodeIgniter ... !

A très bientot
Takitano !

Installer Zend Framework dans Codeigniter

I. Introduction

Alors pourquoi installer zend framework dans CodeIgniter ? C'est pour dire, que l'on est super fort, ou pour faire des choses inutiles ? Non, en fait la Zend est très riche en fonctionnalité, et couplé avec CodeIgniter, on obtient passe d'une mobylette à un super tank !
En effet, on pourra aisément utiliser les library d'Amazon, Twitter, yahoo, Delicious, flirck, et surtout GOOGLE API (qui est nommé aussi GDATA) !!!
Mais aussi les autres fonctionnalités qui se trouve dans Zend Framework ... ! bref, TOUT CE QUI SE TROUVE DANS LA DOC DE ZEND SERA ACCESSIBLE !


II. Une installation de 5 minutes
top chrono ... !
1. Tout d'abord, aller sur le site de Zend Framwork, puis télécharger toute la lirairie Zend.
2. Dezipper le fichier, et mettre tout le contenu du repertoire

Zend

dans

[MON_APPLICATION]/system/library/Zend

3. ouvrir le fichier

[MON_APPLICATION]/system/config/config.php

et remplacer

$config['enable_hooks'] = FALSE;

par

$config['enable_hooks'] = TRUE;

4. Créer un fichier zend.php dans

[MON_APPLICATION]/system/hook/

et mettre le contenu suivant :

<?php
/*
 Ajout de la librarie Zend dans l'include _path
 Chargement de la llibrairie Zend
 
 Attention: il faut activer la la variable $config['enable_hooks'] à TRUE ! 
*/
function zend(){

 set_include_path(get_include_path() . 
PATH_SEPARATOR . str_replace(array('/','C:'),
array('\\','c:'),FCPATH.'system\libraries'));
 
 require_once 'Zend/Loader/Autoloader.php';
 $temp   = Zend_Loader_Autoloader::getInstance();
}
?>

4. Dans le fichier

[MON_APPLICATION]/system/config/hook.php

rajouter le code suivant:

$hook['pre_controller'][] = array(
                                'class'    => '',
                                'function' => 'zend',
                                'filename' => 'zend.php',
                                'filepath' => 'hooks',
                                'params'   => array()
                                );

III .Comment ca marche ?
Alors, si vous avez bien suivi les instruction de la deuxieme partie, votre librarie sera installer.
Ce qui est intéressant, c'est que la Zend Framework sera automatiquement chargée et que surtout l'autoloader de zend framework sera activer ! donc EFFICACITE et RAPIDITE !

Pour utiliser Zend Framework, il suffira tout simplement de suivre la documentation de Zend (mélange du francais et de l'anglais :( ).

Je vous propose de suivre l'exemple suivante (utiliser le web service de yahoo pour faire une recherche ...):

1. aller à la page suivante de la documentation
2. Vous recopier le code d'exemple :

$yahoo = new Zend_Service_Yahoo("ID_APPLICATION_YAHOO");
$results = $yahoo->imageSearch('PHP');
 foreach ($results as $result) {
 echo $result->Title .'<br />';
 }

et vous le coller dans un controller que vous aurez préalablement créé ...
3. vous appeler le controller ... et magique, vous obtenez le résultat de la recherche PHP !

IV. Conclusion
Je pense que l'installation proposée, n'est pas trop compliqué à suivre, sinon, n'hésitez pas à mettre un commentaire. Il était possible d'intégrer plus intimement Zend framework avec CodeIgniter, mais le chargement d'une librairie par instanciation sur CodeIgniter est difficilement compatible avec les design pattern de Zend qui utilise parfois un factory ou singleton ...
Le faite de suivre la documentation zend pour utiliser cette librairie, ne donnera pas de confusion à l'utilisateur sur le processus d'intanciation des objets zend.

Le dernière touche , vue sur Codeigniter

La vue sous codeIgniter , qu'est ce donc ?
C'est simplement l'une des trois composantes du modèle MVC (Modèle MVC étant un design pattern reconnu dans la communauté des développeurs ...)
Pour rappel, le Controleur est le chef d'orchestre, et c'est lui qui appellera les classes, méthodes, librairie et tout autre outils afin de pouvoir réponse à la requète. Il appellera notamment le Modèle (afin de récupérer les valeurs des variables) et la Vue afin de les mettre en formes.
Remarquons simplement que le Modèle, la Vue et le Controleur forme le MVC, comme Modèle MVC ... mm intéressant, non ? :)

Je vais donner dans cette présente article, une vue réutilisable (pour chaque controleur) et très simplement configurable, qui permet de finaliser la présentation du controleur.


I. Se mettre dans le contexte...
Le controleur après avoir récupérer les données, avec le modèle puis mise en page avec une vue particulière, il lui faut faire un bel encadrement pour mettre en valeur tout le code html qu'il a généré. Cet encadrement prend la forme d'une ou plusieurs balises div imbriquées les unes sur les autres(si l'on souhaite ou pas faire des coins arrondis).

Il y a deux écoles: les webdesigner auront tendances à mettre le code pour l'encadrement dans la vue de chaque controlleur, et les développeurs créront une autre vue pour l'encadrement qu'il appliqueront pour tous les controlleurs concernés. Les deux approches se valent, mais avec cependant avec un petit avantage pour les développeurs. En effet, si un jour, l'on souhaite intégré un nouveau type d'encadrement avec un structure différentes, alors le webdesigner devra modifier alors toutes les vues de tous les controleurs alors que le developpeur modifira uniquement la vue de cet encadrement...


II.Un peu de pratique, présentation de notre vue !
Sur CodeIgniter, la vue se situe dans le répertoire

Racine/system/application/view

Pour créer une vue, il vous suffit de créer un fichier dont l'extension est '.php', par exemple 'maVue.php'. Vous ouvrez le fichier, puis vous tapé:

<<?php
 if(isset($type))echo $type;else echo 'div';
 if(isset($id)) echo " id=\"$id\"";
 if(isset($class)&& sizeof($class)>0)
  echo ' class="'.implode(' ',$class).'"';
 if(isset($autre)&& !empty($autre))
  foreach($autre as $k=>$v)
   echo " $k=\"$v\"";?>>
 <?php echo $content;?>
</<?php if(isset($type))echo $type;else echo 'div';?>>

Ce code vous permettra de généré la plupart du code html, et pour être plus précis, il pourra généré toutes les balises ouvrantes, avec toutes les options que vous souhaitez ... !


III.Alors comment l'utiliser ?
Dans une méthode du controleur, il vous faut créer un tableau associé dans lequel vous devez renseigner au moins la valeur qui a pour clé 'content', afin de renseigner le contenu de la balise (a part les balises <a>, si l on souhaite faire une ancre...)
Sinon, pour le reste, c'est optionnel. Voici un exemple dans lequel on reseigne tous les champ utiles :

 $t{'type'}  = 'a';
 $t{'autre'}  = array('href'=>'www.yahoo.fr');
 $t{'id'}  = 'id_de_a';
 $t{'class'}  = array('class_1','class_2');
 $t{'content'}  = 'mon contenu de id_de_a';
 $this->load->view('maVue',$t);

On peut remarquer que $t{'autre'} a pour type de valeur un tableau associé. En effet, pour rajouter des option à part l'identifiant et la classe, on a besoin d'une paire clé/valeur (Bases de xhtml).
De plus $t{'class'} est un tableau, cela vient du fait que l'on peut ajouter plusieur class dans une balise.
Je pense qu'il est aisément compréhensible que :
- $t{'type'} est le type de balise,
- $t{'autre'} est l'ajout de champ optionnel dans la balise
- $t{'id'} est l'identifiant de la balise
- $t{'class'} est les classes de la balise
- $t{'content'} est le contenu situé à l'intérieur de la balise


IV.Conclusion
Vous pouvez modifier cet objet à votre convenance et l'adapter a vos besoin ... cependant, je vous conseille fortement de replir $t{'autre'} au strict minimum, c'est à dire lorsque c'est nécessaire. Qu'est ce qui n'est pas nécessaire ? mm par exemple les styles ....Pourquoi? parce que lorsque vous appelerez d'autres controlleurs pour générer des petit bout de html, vous multiplierez inutilement le calcul de votre serveur ...
Ce bout de code est a utiliser (pour optimiser son efficacité) à la fin de chaque méthode du controleur, qui permettra de faire un belle mise en page avec le css.(donc ne pas appeler cette vue 50 fois dans une même méthode du controleur !)