Thumbnail Image
Samedi 12 mars 2011 dans PHP par Kanzari Haithem .

LibHTML : Générez dynamiquement vos pages web – une introduction à la POO en php

Informations Article:
Thème: PHP Objet..
Difficulte: Intermédiaire.
Temps: 45min.
TELECHARGER

Chaque site web statique est composé d’une multitude de page HTML liées les unes avec les autres selon un arbre de navigation définit par le développeur de site web. Les sites web dynamiques ne font que auto générer ces pages web pour facilité la mise à jours du contenu, et l’extension du site avec l’ajout de nouvelles fonctionnalités. Il existe une multitude de langages permettant le codage de sites dynamiques, PHP est l’une de ces langages qui est facile, léger et puissant. Dans ce tutoriel nous allons étudier une méthode possible de coder une librairie PHP qui nous permet de générer un document HTML à partir d’un contenu passer en paramètre et en tenant compte de la possibilité d’ajout d’appel à des fichiers CSS et à des fichiers JavaScript externes.
Dans ce tutoriel nous allons utiliser et expliquer le pattern singleton, les classes abstraites et les fameux setters et getters.

Le Document HTML:

Un document HTML est composé de balises placées dans un ordre bien définit pour être bien interpréter par un navigateur web (FireFox, InternetExplorer…), un document HTML basique à une structure semblable à ce qui suit :

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

La Balise <HTML>

La balise <html> est la balise principale d’un document HTML, elle regroupe tout élément que peut contenir un document. Elle est obligatoire pour que le navigateur sache le début et la fin du scripte HTML.

La Balise <head>

La balise <head> représente l’entête d’un document HTML, elle regroupe d’autres balises indispensables pour le bon fonctionnement d’un document HTML comme la balise <title> requise pour afficher le titre du document par le navigateur, les balises d’appels de fichiers CSS et JavaScript externes:

<link rel="stylesheet" type="text/css" href="mon fichier css" />
<script type="text/javascript" src="mon fichier javascript"></script>

Notre classe doit donc prêter attention à la possibilité d’appel de fichiers CSS et JavaScript externes, ainsi que l’ajout du titre du document entre les balise <title></title>

La balise <body>

Cette balise contient le corps de notre document qui représente les informations à afficher à l’utilisateur final.

Composition de notre librairie

Pour commencer nous allons définir la classe principale de notre librairie et modifier sa composition selon les besoins que nous découvrirons ensemble, pour commencer nous avons besoin d’une classe HTML qui sera la classe principale de notre librairie c’est-à-dire la classe a utiliser pour construire un document HTML :

/**
 * Class HTML Classe principale de la lib HTML
 */
Class HTML{
/**
 * Constructeur de la classe
*/
private function __construct(){}
}

Pour l’instant notre classe est composée que du constructeur de classes :

/**
 * Constructeur de la classe
*/
private function __construct(){}

Chaque document HTML est composé par un HEADER, qui n’est autre qu’un ensemble de balise :

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="monfichierjs.js"></script>
…
<link href="monfichiercss.css" rel="stylesheet" type="text/css" title="A" />
…
</head>

Ainsi, pour gérer le HEADER on propose de lui associer une classe propre à lui qui sera développée plus loin.

D’autre part un document HTML doit afficher des informations à l’utilisateur, sinon quelle est l’utilité de l’avoir crée ? (sauf pour des questions de sécurités qu’on verra dans un autre tutoriel) c’est le rôle du BODY :

<body>
Mon contenu est ici !
</body>

Ainsi une nouvelle classe de gestion du BODY s’impose.

A ce niveau, nous avons détecté trois classes, la classe HTML, la classe Header et la classe BODY, nous allons maintenant étudier chacune de ces classes pour approfondir notre conception et voir si on peut détecté de nouvelles composantes.

La classe HTML

C’est la classe principale de notre librairie, cette classe est appelée à chaque fois où nous avons besoins d’afficher du contenu, ceci dit, elle ne doit pas être instanciée plus d’une fois afin de ne pas encombrer la mémoire de notre serveur. Pour respecter cela facilement, une solution existe, le pattern singleton.

Le pattern singleton, fait partie d’un ensemble de pattern nommé design pattern qui sont des concepts de génie logiciel décrivant des standards et approches visant la résolution de problèmes de conception et d’architectures logiciels, oui c’est un peut vague mais pédagogie l’oblige, mais on peut les voire comme des techniques de conceptions et de codages standardisés pour assurer un bon fonctionnement du logiciel final et la réutilisabilité du code résultant.

Dans notre cas, la problématique est la suivante : comment utilisé notre classe HTML sans êtres obligé a l’instancié chaque foi qu’on a besoin d’affiché un contenue et de cette façons évité d’encombrer la mémoire du serveur ? La solution est le pattern singleton.

Le pattern singleton assure que la classe qui l’utilise n’est instanciée qu’une seule fois durant le cycle de vie du logiciel, il est à mon avis le pattern le plus facile a implémenter, il suffit d’écrire une classe contenant une méthode qui vérifie la présence d’une instance de sa propre classe, si oui elle renvoie une référence sur l’objet déjà crée, si non elle crée une nouvelle instance.

Application du pattern singleton dans notre classe HTML :

/**
 * Class HTML Classe principale de la libHTML
 */
class HTML
{
/**
* Instance de la classe HTML utilisé pour
* le patter singleton
*/
private static $_instance;
/**
* Méthode d'instanciation de notre classe (pattern singleton)
* teste si une instance existe si oui retourne une référence
* si non crée une instance
*/
public static function getInstance(){
 if(!isset(self::$_instance)){
 self::$_instance = new HTML();
 }
 return self::$_instance;
 }
}

Notre classe HTML est composée d’une variable privé statique $_instance et d’une méthode getInstance().

La variable $_instance servira a gardé une référence sur l’instance de notre classe HTML crée, la méthode getInstance() vérifie l’existence d’une référence sur un objet de type HTML :

if(!isset(self::$_instance))

Si non, elle crée une nouvelle instance et garde une référence dans la variable $_instance :

self::$_instance = new HTML();

Si oui elle renvoie la référence sur l’objet déjà créé:

return self::$_instance;

C’est facile de l’implémenter le pattern singleton non ? Maintenant pour instancier notre classe HTML on procède comme suit :

require_once('HTML.php');
/**
* Instanciation de la classe HTML
*/
$dochtml = HTML::getInstance();

C’est la classe HTML qui va nous générer notre code final, ainsi, c’est à elle que revient la responsabilité d’instancié les classes HEADER et BODY en gardant une référence sur chacun des objets créés pour d’éventuels changements, de ce fait, il faut prévoir de munir notre classe de deux variables privés (ici privé c’est pour organiser l’accès aux ressources utilisé par notre librairie), ainsi on va ajouter ces lignes juste après la déclaration de la variable $_instance :

private $_body;<br>private $_header;

Ces deux variables, représentes simultanément des références sur les objets BODY et HEADER que vas instancier notre classe HTML.

Maintenant, il faut préciser où est ce qu’on va instancier ces classes ? Et bien il n’y a pas mille solutions, le mieux dans notre cas est de les instanciés dans le constructeur de notre classe HTML parce qu’un document HTML est composé d’un HEADER et d’un BODY et donc dès l’instanciation de notre objet HTML, il serait mieux d’instancier les classes HEADER et BODY associé a notre HTML.

Dans le constructeur de notre classe HTML, nous allons donc instancier les classes HEADER et BODY :

/**
* Constructeur de la classe
* Instanciation des classe Header et Body
*/
private function __construct(){
        $this->_header = new Header();
        $this->_body = new Body();
    }

Et maintenant nous allons coder les getters de notre classe HTML pour permettre l’accès a nos instances HEADER et BODY :

/**
* Méthode utilisé pour récupérer l'instance
* de la classe Header (GETTER)
*/
public function getHeader(){
        return $this->_header;
    }
/**
* Méthode utilisé pour récupérer l'instance
* de la classe Body (GETTER)
*/
public function getBody(){
        return $this->_body;
    }

Il est possible de se passé de ces getters a condition de codé les méthodes de manipulation des éléments du HEADER et ceux du BODY dans la classe HTML, mais je vous laisse le libre choix.
Une fois que nous avons notre HEADER et notre BODY, il ne nous reste que la construction du code HTML de notre page :

/**
* Construction du code HTML du document
* en utilisant les classes Header et Body
*/
public function getHTMLCode(){
$out = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' ."\n"
.'<html>'  . "\n"
. $this->_header->getHeaderCode() . "\n"
. $this->_body->getBodyCode() . "\n"
.'</html>';

if ( $print )
echo $out;
}

La méthode getHeaderCode () et la méthode getBodyCode() serons détaillés plus loin dans ce tutoriel Notre classe HTML ressemble alors a:

require_once ('Header.php');
require_once ('Body.php');
/**
* Class HTML Classe principale de la libHTML
*/
class HTML
{
    /**
     * Instance de la classe HTML utilisé pour
     * le patter singleton
     */
    private static $_instance;
    /**
     * Instance de la classe Body
     */
    private $_body;
    /**
     * Instance de la classe Header
     */
    private $_header;
   /**
    * Méthode d'instanciation de notre classe (pattern singleton)
    * teste si une instance existe si oui retourne une référence
    * si non crée une instance
    */
    public static function getInstance(){
        if(!isset(self::$_instance)){
            self::$_instance = new HTML();
        }
        return self::$_instance;
    }
   /**
    * Constructeur de la classe
    * Instanciation des classe Header et Body
    */
    private function __construct(){
        $this->_header = new Header();
        $this->_body = new Body();
    }
    /**
     * Méthode utilisé pour récupérer l'instance
     * de la classe Header (GETTER)
     */
    public function getHeader(){
        return $this->_header;
    }
    /**
     * Méthode utilisé pour récupérer l'instance
     * de la classe Body (GETTER)
     */
    public function getBody(){
        return $this->_body;
    }
    /**
     * Construction du code HTML du document
     * en utilisant les classes Header et Body
     */
    public function getHTMLCode(){
       $out = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' ."\n"
	.'<html>'  . "\n"
	. $this->_header->getHeaderCode() . "\n"
	. $this->_body->getBodyCode() . "\n"
	.'</html>';

	if ( $print )
		echo $out;

		return $out;
    }
}

La classe BODY

Notre classe BODY construits le code HTML qui sera inséré entre les balise <BODY></BODY> d’où la variable :

private $_bodyCode='';

Qui s’occupe de stocké le code HTML du BODY, pour récupérer ce code, nous allons coder la méthode getBodyCode() on retrouve alors notre getter, la variable $_bodyCode est déclaré privé pour pouvoir contrôler l’accès aux ressources :

/**
* Retourne le code HTML du BODY
* @return String
*/
public function getBodyCode(){
  return '<body>'. "\n" . '   ' .$this->_bodyCode . "\n" .'</body>';
}

Vous voyez bien que cette méthode insert le code contenu dans la variable $_bodyCode entre les balises <BODY></BODY>, maintenant nous allons coder une méthode addBodyElement() qui reçoit un paramètre ; qui est le code de notre BODY ; et l’insert dans la variable $_bodyCode :

/**
* Ajout d'un element dans le corps du document
* @param element string
*/
public function addBodyElement($bodyelement){
  $this->_bodyCode .= $bodyelement;
}

Cette méthode, concatène les paramètres dans la variable $_bodyCode de ce fait nous pouvant construire le corps de notre document HTML étape par étape et à chaque fois notre méthode addBodyElement rajoute le contenue du paramètre à la fin de notre variable $_ bodyCode, la classe BODY aura cet allure :

class Body{
    /**
     * Stockage des données du corps
     * de notre document
     */
    private $_bodyCode='';

    /**
     * Ajout d'un element dans le corps du document
     * @param element string
     */
    public function addBodyElement($bodyelement){
        $this->_bodyCode .= $bodyelement;
    }
    /**
     * Retourne le code HTML du BODY
     * @return String
     */
    public function getBodyCode(){
        return '<body>' . $this->_bodyCode .'</body>';
    }
}

La classe Header :

Notre classe HEADER ; tel qu’expliqué en haut ; doit construire le header de notre document HTML:

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="monfichierjs.js"></script>
…
<link href="monfichiercss.css" rel="stylesheet" type="text/css" title="A" />
…
</head>

Le HEADER d’un document HTML est composé de plusieurs éléments parmi lesquels :

  • Titre
  • Definition du charset
  • Appels de fichiers JavaScripte externes
  • Appels de fichiers CSS externes

Donc on doit prendre en charges la gestion de chacun de ces éléments, de ce fait on va déclarer les variables suivantes dans notre classe HEADER :

class Header{
/**
* Stockage du charset utilisé
* par notre document
*/
private $_charset= 'utf-8';

/**
* Stockagr du titre du
* document par defaut (sans titre)
*/
private $_title = 'sans titre';

/**
*Stockage de l'instance de
* la classe CSS
*/
private $_css;

/**
* Stockage de l'instance de
* la classe JS
*/
private $_js;

/**
* Constructeur de la classe Header
* Instanciation des classe JS et CSS
*/
private $_headercode='';
}

La variable $_charset vas être utilisé pour spécifier le charset de notre document (par défaut on utilisera le utf-8) mais si on veut passer à un autre charset? La il faut ajouter un setter pour modifier la valeur du charset stocké dans la variable $_charset et un getter pour récupérer sa valeur:

/**
* Setter du charset
* @param String charset
*/
public function setCharset($charSet){
$this->_charset = $charSet;
}

/**
* Getter du charset
* @return String charset
*/
public function getCharset(){
return $this->_charset;
}

La méthode setCharset() doit recevoir un paramètre $charSet qui est le nouveau charset a utilisé pour notre document qui sera stocké dans la variable $_ charset
Nous avons aussi déclaré une variable $_title ; initialisé a ‘sans titre’, cette variable stocke le titre de notre document, pour changer la valeur par défaut on doit ajouter un nouveau setter pour le titre et pour la récupérer on doit ajouter un getter:

/**
* Setter du titre
* @param String titre
*/
public function setTitle($title){
$this->_title = $title;
}

/**
* Getter du titre
* @return String titre
*/
public function getTitle(){
return $this->_title;
}

La méthode setTitle() reçoit un paramètre qui est le nouveau titre de notre document qui va être stocké dans la variable $_title.

La variable $_headercode vas être utilisé pour stocké le code générer de notre header.

Maintenant nous allons voir comment on peut gérer nos fichiers JavaScript et CSS, avant de commencer on doit prendre en considération la possibilité d’utiliser plusieurs fichiers JavaScript et plusieurs fichiers CSS, donc il est préférable de mettre en place deux classes JS et CSS pour la gestion des deux types de fichiers JavaScript et CSS, ces deux classes serons instanciées par la classe HEADER donc cette dernière doit pouvoir garder une référence pour chacune des classes JS et CSS d’où l’utilité d’avoir deux variables $_css et $_js pour le stockage des références.
L’instanciation des deux classes JS et CSS se fera donc le constructeur de la classe HEADER qui devient alors:

/**
* Constructeur de la classe Header
* Instanciation des classe JS et CSS
*/
public function __construct(){
$this-&gt;_css = new CSS();
$this-&gt;_js = new JS();
}

Classes JS,CSS et HADERPART

Les classes JS et CSS vont accepter chacune un paramètre qui n’est autre que le fichier CSS ou JavaScript qui sera stocké dans un tableau via une méthode d’ajout qu’on définira plus loin, donc chacune de ces classes peut stocker un nombre indéfini de fichiers pour pouvoir générer les balises correspondantes a chaque type de fichiers, a ce niveau, vous remarquez que ces deux classes ont un comportement identique de ce fait on va essayer de voir s’il est possible de trouver une approche pour simplifier leurs codages et par la même occasion utiliser un concept de génie logiciel, ceci dit, le concept de classe abstraite s’impose (abstract).

Une classe abstraite est une classe qui ne peut être instancié directement et qui doit contenir au moins une méthode abstraite, une méthode abstraite est une méthode déclarée dans sa classe sans implémentation, l’implémentation de la méthode abstraite se fait par le billet des classes dérivées de la classe abstraite ; rien ne vaut un bon exemple pour comprendre le concept :

Les deux classes JS et CSS serons deux classes dérivées d’une classe abstraite qu’on nommera HeaderPart (un grand merci à patouche au passage), nos classes JS et CSS doivent pouvoir gérer plusieurs fichiers JS et CSS vu qu’un HEADER d’un document HTML peut faire appel à plusieurs fichiers JavaScript et plusieurs fichiers CSS, ainsi on doit pouvoir stocker une liste de fichiers dans chacune des deux classes et on doit prévoir une méthode pour l’ajout de fichier dans chaque liste, vu que nous allons utiliser une classe abstraite HeaderPart c’est dans cette classe qu’on doit codé le fonctionnement générale et qui consiste a chargé un fichier dans une liste et déclaré la méthode qui va générer le code HTML de l’integration du fichier dans notre document, oof c’est trop pédagogique, mais maintenant nous avons une idée sur la forme de notre classe HeaderPart :

/**
*Classe abstraite HeaderPart
* etendu par les classe JS et CSS
*/
abstract class HeaderPart{

/**
* Tableau de stockage des elements
* fichiers JavasCript ou css
*/
private $_src = array();

/**
* Ajoute une source
*
* @param string $src
* @return void
*/
public function add( $src ){
$this->_src = $src;
}

/**
* Méthode abstraite, implémenté par les classes filles
*/
abstract protected function format($src);
}

Nous avons donc déclaré une variable privée $_src de type tableau, cette variable va jouer le rôle du support de stockage pour nos fichiers, une méthode publique add($src) qui ajoute des éléments $src dans notre tableau $_src et une méthode abstraite format($src) qui n’est pas implémenté et qui va l’être par les classes JS et CSS (d’où le chois de protected) pour que chacune d’elles formate sa propre chaine pour chaque fichier situé dans notre tableau $_src.
Nos classes JS et CSS doivent retourner chacune le code HTML généré à partir de leurs listes de fichiers respectives donc une méthode publique doit être ajouté a notre classe abstraite HeaderPart pour être hérité par les classes dérivé JS et CSS, cette méthode doit en faite parcourir le tableau des fichiers et faire appel à la méthode abstraite format en lui passant le fichier a traité, concaténé le code HTML générer pour le retourner au script appelant, donc cette méthode qu’on va nommer getCode() aura cette allure :

/**
* Rendu du code
*/
public function getCode(){
$out = '';
foreach($this->_src as $src ) {
	$out .= $this->format($src) . "\n";
}
return $out;
}

Notre classe HeaderPart finale aura cette allure :

/**
*Classe abstraite HeaderPart
* etendu par les classe JS et CSS
*/
abstract class HeaderPart{

/**
* Tableau de stockage des elements
* fichiers JavasCript ou css
*/
private $_src = array();

/**
* Ajoute une source
*
* @param string $src
* @return void
*/
public function add( $src ){
$this->_src = $src;
}

/**
* Méthode abstraite, implémenté par les classes filles
*/
abstract protected function format($src);

/**
* Rendu du code
*/
public function getCode(){
$out = '';
foreach($this->_src as $src ) {
$out .= $this->format($src);
}
return $out;
}
}

Comme précisé précédemment notre classe JS est une classe dérivé de la classe HeaderPart qui implémente la méthode abstraite format() de la classe HeaderPart pour pouvoir générer le code HTML d’importation de fichiers JavaScripte dans notre document d’où notre classe JS aura cette allure :

/**
*Classe JS etend la classe HeaderPart
*hérite donc add() et getCode()
*/
class JS extends HeaderPart {

/**
*methode déclarer dans HeaderPart
*/
protected function format($src){
return '<script type="text/javascript" src="'.$src.'"></script>';
}
}

De même pour la classe CSS qui est elle aussi dérivé de la classe HeaderPart et qui implémente la méthode format() pour générer le code HTML d’importation des fichiers CSS d’où elle aura cette allure :

/**
*Classe CSS étend la classe HeaderPart
*hérite donc add() et getCode()
*/
class CSS extends HeaderPart {

/**
*methode déclarer dans HeaderPart
*/
protected function format($src){
return '<link rel="stylesheet" type="text/css" href="'.$src.'" />';
}
}

Ainsi chacune des classes JS et CSS est dérivé de la classe HeaderPart donc elles héritent toutes les deux la méthode add() et getCode() de ce fait dans notre classe Header présenté précédemment où nous avons instancié nos classes JS et CSS je propose de codé quatre nouvelles méthodes pour éviter l’appel directe aux méthodes add() et getCode() des deux classes JS et CSS.

La méthode addJSFile($jsfile) :

/**
* Ajout d'un nouveau fichier JavaScript
* @param String Fichier JavaScript
*/
public function addJSFile($jsfile){
$this->_js->add($jsfile);
}

La méthode addCSSFile($cssfile) :

/**
* Ajout d'un nouveau fichier JavaScript
* @param String Fichier JavaScript
*/
public function addCSSFile($cssfile){
$this->_css->add($cssfile);
}

La méthode getJSCode():

/**
* Getter du JavaScript générer par la classe JS
* @return String
*/
public function getJSCode(){
return $this->_js->getCode();
}

La méthode getCSSCode() :

/**
* Getter du css générer par la classe CSS
* @return String
*/
public function getCSSCode(){
return $this->_css->getCode();
}

Maintenant notre classe Header doit construire le code HTML du header on doit donc ajouter une nouvelle méthode dont le rôle est de construire le code HTML du header qu’on va nommer getHeaderCode()

/**
* Construction du code HTL du header
* @return String Code HTL du header
*/
public function getHeaderCode( $print = false ){
return '<head>'. "\n"
.'<title> ' . $this->getTitle() . '</title>' . "\n"
. '<meta http-equiv="Content-Type" content="text/html; charset='. $this->getCharset() . '">' . "\n"
. $this->getCSS()->getCode() . "\n"
. $this->getJS()->getCode() . "\n"
. '</head>' . "\n";
}

Au final notre classe Header est de cette forme :

require_once ('Js.php');
require_once ('Css.php');

class Header{
    /**
     * Stockage du charset utilisé
     * par notre document
     */
    private $_charset= 'utf-8';

    /**
     * Stockagr du titre du
     * document par defaut (sans titre)
     */
    private $_title = 'sans titre';

    /**
     *Stockage de l'instance de
     * la classe CSS
     */
    private $_css;

    /**
     * Stockage de l'instance de
     * la classe JS
     */
    private $_js;

    /**
     * Constructeur de la classe Header
     * Instanciation des classe JS et CSS
     */
    public function __construct(){
        $this->_css = new CSS();
        $this->_js = new JS();
    }

    /**
     * Setter du charset
     * @param String charset
     */
    public function setCharset($charSet){
        $this->_charset = $charSet;
    }

    /**
     * Setter du titre
     * @param String titre
     */
    public function setTitle($title){
        $this->_title = $title;
    }

    /**
     * Getter du titre
     * @return String titre
     */
    public function getTitle(){
        return $this->_title;
    }

    /**
     * Getter du charset
     * @return String charset
     */
    public function getCharset(){
        return $this->_charset;
    }

    /**
     * Ajout d'un nouveau fichier JavaScript
     * @param String Fichier JavaScript
     */
    public function addJSFile($jsfile){
        $this->_js->add($jsfile);
    }

    /**
     * Ajout d'un nouveau fichier JavaScript
     * @param String Fichier JavaScript
     */
    public function addCSSFile($cssfile){
        $this->_css->add($cssfile);
    }

    /**
     * Getter du JavaScript générer par la classe JS
     * @return String
     */
    public function getJSCode(){
        return $this->_js->getCode();
    }

    /**
     * Getter du css générer par la classe CSS
     * @return String
     */
    public function getCSSCode(){
        return $this->_css->getCode();
    }

    /**
     * Getter de la classe JS
     * @return Instance de la classe JS
     */
    public function getJS(){
        return $this->_js;
    }

    /**
     * Getter de la classe CSS
     * @return Instance de la classe CSS
     */
    public function getCSS(){
        return $this->_css;
    }

    /**
     * Construction du code HTL du header
     * @return String Code HTL du header
     */
    public function getHeaderCode( $print = false ){
        return '<head>'. "\n"
	.'<title> ' . $this->getTitle() . '</title>' . "\n"
	. '<meta http-equiv="Content-Type" content="text/html; charset='. $this->getCharset() . '">' . "\n"
	. $this->getCSS()->getCode() . "\n"
	. $this->getJS()->getCode() . "\n"
	. '</head>' . "\n";
	}
}

A ce stade notre librairie HTML est normalement fonctionnel et rien ne veaux un exemple d’utilisation pour la tester.

Vous pouvez télécharger la version finale de la librairie dans le liens suivant :

libhtml.zip


TEST DE NOTRE LIBHTML :

Pour commencer nous allons placer les fichiers de notre librairie dans un dossier nommé html et nous allons ajouter au même niveau un fichier index.html et un fichier style.css :

Arborécence


Nous allons éditer le fichier index.html et ajouter les lignes suivantes :

require_once('html/HTML.php');
    $page = HTML::getInstance();
    $page->getHeader()->setTitle('TestPage');
    $page->getBody()->addBodyElement('<p>Teste de la LibHTML</p>');
    $page->getBody()->addBodyElement('<a href="http://www.farkess.com">Allez a  farkess</a>');
    echo $page->getHTMLCode();

est tester notre code pour avoir ce résultat :


Nous allons maintenant appliquer un peut de style a notre document, édité notre fichier style.css et ajoutez les lignes suivantes :

body{
    background-color: gray;
}
p{
    font-family: arial;
    font-size: 50px;
    color: white;
}
a{
    text-decoration: none;
    color: lime;
}

Modifiez le fichier index.php en ajoutant la ligne suivante :

$page->getHeader()->addCSSFile('style.css');

Pour qu’il devient :

require_once('html/HTML.php');
    $page = HTML::getInstance();
    $page->getHeader()->setTitle('TestPage');
    $page->getHeader()->addCSSFile('style.css');
    $page->getBody()->addBodyElement('<p>Teste de la LibHTML</p>');
    $page->getBody()->addBodyElement('<a href="http://www.farkess.com">Allez a farkess</a>');
    echo $page->getHTMLCode();

Rafraichir le navigateur notre page ressemble a présent a :


Conclusion

La librairie qu’on vient de codé n’est pas une référence car il existe des solutions plus complètes et présentant de meilleures approches de sécurité, mais cette librairie peut être utilisée pour de petits scripts, personnelles je vais l’utiliser dans tous mes tutoriels nécessitant la génération de document HTML.
Merci à Patouche pour ces brillantes remarques et son soutien.

private function __construct(){

$this->_header = new Header();

$this->_body = new Body();

}

Pas d articles similaires.

4 Commentaires.

  1. Fabrice dit :
    31 août 2011 à 1 h 50 min

    Bonjour,

    Excellent tutoriel par la pratique… bravo !
    Toutefois, le lien libhtml.zip semble brisé. Serait-il possible de le rétablir ?

    Bien à vous

    Répondre
  2. Fabrice dit :
    1 septembre 2011 à 22 h 22 min

    Possédant déjà de solides bases en programmation objet (C++, C# java), le PHP orienté objet faisait partie des conquêtes qu’il me restait à faire. Au risque de me répéter, cette librairie libhtml de base, qui mérite d’être davantage développée, m’a fourni un tremplin pour approfondir le sujet. Notamment, par le concept d’instanciation d’une référence unique de classe (ou singleton) – réutilisable -, par l’existence d’une propriété static de classe. Excellent ! Ensuite, il faut également saluer l’effort de modélisation, introduisant une classe abstraite destinée à créer des sous-classes CSS et JS dans le head de la page HTML, bien entendu dynamiquement. Sur cette lancée, je vais étendre le concept à bodyPart par l’insertion dynamique de tag « div »…

    Toutefois, en ayant testé dans un premier temps la librairie, telle que rédigée, j’y ai trouvé une erreur que signale furieusement l’interpréteur php. Une erreur à la ligne : foreach($this->_src as $src ), dans la classe abstraite HeaderPart. En fait, l’erreur ne vient pas de cette ligne, à proprement dit, mais de la méthode « public function add( $src ) » de cette même classe. En effet, la ligne de code que contient cette dernière ( « $this->_src = $src; »), se conduit comme une simple méthode « setter », ce qui signifie que le tableau « $this->_src » restera perpétuellement vide ! Il serait, à mon humble avis, plus judicieux de la remplacer par « array_push($this->_src,$src); ». En ayant fait cette modification, la librairie fonctionne désormais très bien…

    Un grand merci, Kanzari !

    Répondre
    • Kanzari Haithem dit :
      17 février 2012 à 15 h 24 min

      Merci pour vos commentaires est compliments, je tien a vous informez que nous allons suspendre l’activité sur farkess car nous somme en phase de codage de notre propre plateforme avec le framework CodeIgniter donc nous allons passé un bon bout de temps la dessus encore merci pour tout nos lecteurs.

      Répondre

Image CAPTCHA