Syntaxe jQuery
Dans ce tutorial nous allons voir une application de la POO en PHP pour générer une page web
Dans ce tutorial nous allons voir une petite application de la POO en PHP pour générer une page web.
Une page web (document HTML) est composée de balises placées dans un ordre bien définit pour être bien interpréter par un navigateur web (FireFox, InternetExplorer, Opera…),
Une page web statique est constituée d’un entête, un corps et un pied de page.
Un document HTML basique à une structure semblable à ce qui suit :
Exemple : Copier le code <!DOCTYPE html> <html> |
|
Exemple : Copier le code <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="description" content="description de la page" /> <meta name="keywords" content="mots clés" /> <link href="monfichiercss.css" rel="stylesheet" type="text/css" title="A" /> <script type="text/javascript" src="monfichierjs.js"></script> </head> |
|
Exemple : Copier le code <body> // contenu de la page |
|
Pied ou footer |
Exemple : Copier le code <div> </div> |
Fin de page |
Exemple : Copier le code </body> </html> |
Un site est une application composée d’un certain nombre de pages HTML liées les unes avec les autres selon un arbre de navigation définit par le développeur de site web.
Pour commencer nous allons définir la classe principale de notre librairie et modifier sa composition selon les besoins au fur et à mesure de l’évolution du tutorial.
Nous avons besoin d’une classe PageHTML qui sera la classe principale de notre librairie c’est-à-dire la classe a utiliser pour construire une page HTML :
Exemple : Copier le code
// Class PageHTML Classe principale de la lib HTML Class PageHTML{ /* Constructeur de la classe */ private function __construct(){} }
Pour l’instant notre classe n’est composée que du constructeur de classes :
Chaque page (document HTML) est composée par un HEADER, qui n’est un ensemble de balises (voir le tableau analytique en dessus).
Pour gérer le HEADER on lui associer une classe propre qui sera développée plus loin.
D’autre part une page HTML doit afficher des informations à l’utilisateur, c’est le rôle du CORPS. Ainsi une nouvelle classe pour le générer s’impose.
Et voilà pour l’instant nous avons trois classes.
C’est la classe principale de notre librairie, cette classe est appelée à chaque fois où nous avons besoins de générer une page, elle ne doit pas être instanciée plus d’une fois afin de ne pas encombrer la mémoire de notre serveur.
Pour cela nous allons utiliser le pattern singleton.
Le pattern singleton est utilisé dans les situations où l'on a besoin qu'il y ait une unique instance d'une classe. L'implémentation de ce pattern permet au développeur de rendre cette unique instance facilement accessible par beaucoup d'autres objets.
Voici le code de la méthode singleton :
Exemple : Copier le code
public static function singleton() { if (!isset(self::$instance)) { self::$instance = new self; } return self::$instance; }
Le pattern singleton assure que la classe qui l’implémente n’est instanciée qu’une seule fois durant le cycle de vie du logiciel, il est 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 PageHTML :
Exemple : Copier le code
// Class HTML Classe principale de la librairie class PageHTML { /* Instance de la classe PageHTML utilisé pour le pattern 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 à cette instance si non crée une instance*/ public static function getInstance(){ if(!isset(self::$_instance)){ self::$_instance = new PageHTML(); } return self::$_instance; } }
La classe PageHTML est composée d’une variable privé statique $_instance et d’une méthode singleton() nommée ici getInstance().
La variable $_instance servira a stocker une référence sur l’instance de la classe PageHTMLcréée, la méthode getInstance() vérifie l’existence d’une référence sur un objet de type PageHTML.
Si oui elle renvoie la référence sur l’objet déjà créé.
Si non, elle crée une nouvelle instance et stock une référence dans la variable $_instance
Pour instancier notre classe PageHTMLon procède comme suit :
Exemple : Copier le code
require_once('PageHTML.php'); /* Instanciation de la classe PageHTML*/ $dochtml = PageHTML::getInstance();
C’est la classe PageHTMLqui va générer le code final de notre page web, et donc, c’est elle que a le rôle d’instancié les classes HEADER et CORPS en stockant une référence sur chacun des objets créés pour d’éventuels changements, ainsi, il faut munir notre classe de deux variables privés, qu’on va ajouter juste après la déclaration de la variable $_instance
Exemple : Copier le code
private $_corps; private $_header;
Ces deux variables, représentes simultanément des références sur les objets instanciés par les classe CORPS et HEADER que vas instancier la classe PageHTML.
Il faut par préciser où on va instancier ces classes ?
Et bien dans notre cas c’est dans le constructeur de notre classe PageHTMLqu’il faut les instanciées, pour que notre page HTML soit composée d’un HEADER et d’un CORP dès l’instanciation de notre objet PageHTML, il serait mieux d’instancier les classes HEADER et BODY associé a notre HTML.
Dans le constructeur de notre classe PageHTML, nous allons donc instancier les classes HEADER et CORPS comme suit:
Exemple : Copier le code
/* Constructeur de la classe Instanciation des classe Header et Body */ private function __construct(){ $this->_header = new HEADER(); $this->_body = new CORPS(); }
Toujours dans la classe PageHTML nous allons coder les getters pour permettre l’accès a nos instances HEADER et CORPS :
Exemple : Copier le code
/* 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 CORPS (GETTER)*/ public function getCorps(){ return $this->_corps; }
Et maintenant que notre classe HEADER et notre classe CORPS sont prêtes, il ne nous reste que la construction du code HTML de notre page :
Exemple : Copier le code
/* Construction du code HTML du document en utilisant les classes Header et CORPS*/ 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->getCorpsCode() . "\n" .'</html>'; if ( $print ) echo $out; }
Les méthodes getHeaderCode() et getBodyCode() seront étudiées plus loin dans ce tutorial
Le fichier de notre classe PageHTML.phpsera alors comme suit:
Exemple : Copier le code
<?php require_once ('Header.php'); require_once ('Corps.php'); /*** Class PageHTML Classe principale de la libHTML*/ Class PageHTML { /*** Instance de la classe HTML utilisé pour * le patter singleton */ private static $_instance; /*** Instance de la classe CORPS*/ private $_Corps; /*** 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 PageHTML(); } return self::$_instance; } /** * Constructeur de la classe * Instanciation des classe HEADER et CORPS */ private function __construct(){ $this->_header = new Header(); $this->_Corps = new Corps(); } /* * 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 Corps (GETTER) */ public function getCorps(){ return $this->_Corps; } /* Construction du code HTML du document en utilisant les classes Header et Corps */ public function getHTMLCode($print = false){ $sortie = '<!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->_Corps->getCorpsCode() . "\n" .'</html>'; if ( $print ) echo $sortie; return $sortie; } } ?>
La classe CORPS construits le code HTML qui sera inséré entre les balise <BODY></BODY> d’où la variable :
Exemple : Copier le code
private $_bodyCode=''; Qui s’occupe de stocker le code HTML du CORPS, pour récupérer ce code nous allons coder la méthode getBodyCode() comme suit:
Exemple : Copier le code
/* Retourne le code HTML du CORPS Retourne une chaîne de caractères*/ public function getCorpsCode(){ return '<body>'. "\n" . ' ' .$this->_corpsCode . "\n" .'</body>'; }
Vous constatez que cette méthode insert le code contenu dans la variable $_corpsCode entre les balises <body> et </body>.
Maintenant on va coder une méthode addCorpsElement() qui reçoit un paramètre ; qui est le code de notre classe CORPS et l’insert dans la variable $_CorpsCode :
Exemple : Copier le code
/* Ajout d'un élément dans le corps du document Avec un paramètre élément string*/ public function addCorpsElement($Corpselement){ $this->_corpsCode .= $bodyelement; }
Cette méthode, concatène les paramètres dans la variable $_corpsCode
Et donc nous pouvant construire le corps de notre document HTML étape par étape et à chaque fois la méthode addCorpsElement rajoute le contenue du paramètre à la fin de notre variable $_ corpsCode.
Le fichier de la classe CORPS.php aura le code comme suit :
Exemple : Copier le code
<?php class Corps{ /* Stockage des données du corps de notre document */ private $_corpsCode=''; /*Ajout d'un élément dans le corps du document*/ public function addCorpsElement($corpselement){ $this->_corpsCode .= $corpselement; } /* Retourne le code HTML du CORPS */ public function getCorpsCode(){ return '<body>' . $this->_corpsCode .'</body>'; } } ?>
La classe HEADER ; tel qu’expliqué dans le tableau analytique en haut ; doit construire le header de notre document HTML.
Le HEADER du document HTML est composé de plusieurs éléments :
Donc on doit prendre en considération la gestion de chacun de ces éléments, de ce fait on va déclarer les variables suivantes dans notre classe HEADER :
Exemple : Copier le code
class Header{ // Stockage du charset utilisé par notre document private $_charset= 'utf-8'; // Stockage de la description utilisé par notre document private $_description= 'description du document'; // Stockage des mots clé utilisé par notre document private $_keyWord= 'mot cle'; // 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 classes JavaScript et CSS private $_headercode=''; }
La variable $_charset vas être utilisé pour spécifier le charset de notre document Par défaut initialisé a ‘utf-8’ vous pouvez utiliser un autre charset?
La il faut ajouter :
De même pour les variables $_description par défaut initialisé a ‘description du document’ et $_keyWord par défaut initialisé a ‘mot cle’ pour manipuler la description et les mots clés du document.
Le code sera comme suit :
Exemple : Copier le code
// Setter du charset public function setCharset($charSet){ $this->_charset = $charSet; } // Setter de la description public function setDescription($description){ $this->_description = $description; } // Setter de keyWord public function setKeyWord($keyWord){ $this->_keyWord = $keyWord; } // Getter du charset public function getCharset(){ return $this->_charset; } // Getter de la description public function getDescription(){ return $this->_description; } // Getter du keyWord public function getKeyWord(){ return $this->_keyWord; }
Les méthode setCharset(),setDescription() et setKeyWord() doivent recevoir respectivement un paramètre $charSet, $description et $keyWord qui sont les nouveaux charset, description et keyWord a utilisé dans notre document qui seront stockées dans la variable $_ charset, $_description et $_keyWord .
Nous avons aussi déclaré une variable $_title ; Par défaut 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:
Exemple : Copier le code
// Setter du titre public function setTitle($title){ $this->_title = $title; } // Getter du titre public function getTitle(){ return $this->_title; }
La méthode setTitle() reçoit elle aussi en paramètre 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.
Mais comment peut-on gérer less fichiers JavaScript et CSS ?
Avant tout chose on doit prendre en considération la possibilité qu’on peut utiliser plusieurs fichiers JavaScript et plusieurs fichiers CSS, donc il vaut mieux 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 et donc il faut prévoir deux variables $_css et $_js pour le stockage des références.
L’instanciation des deux classes JS et
CSS se fera donc dans le constructeur de la classe
HEADER qui devient alors:
Exemple : Copier le code
// Constructeur de la classe Header Instanciation des classe JS et CSS public function __construct(){ $this->_css = new CSS(); $this->_js = new JS(); }
Les classes JS et CSS vont accepter chacune un paramètre qui est le fichier CSS ou JavaScript qu’on stockera dans un tableau par une méthode d’ajout qu’on va définir plus loin dans ce tutorial.
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.
Vous constatez que ces deux classes ont un comportement identique.
De ce fait et pour simplifier leurs codages et le concept de classe abstraite s’impose.
Rappel :
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 :
Les deux classes JS et CSS serons dérivées d’une classe abstraite qu’on nommera HeaderPart .
Les classes JS et CSS doivent pouvoir gérer plusieurs fichiers JS et CSS, comme on vient de dire, vu qu’un HEADER d’un document HTML peut faire appel à plusieurs fichiers JavaScript et plusieurs fichiers CSS, et donc 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 fichiers 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 pour l’intégration du fichier dans notre document.
Le code de a classe HeaderPart sera comme suit :
Exemple : Copier le code
/**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*/ public function add( $src ){ $this->_src = $src; } /* Méthode abstraite, implémenté par les classes filles*/ abstract protected function format($src); }
On a déclaré :
Nos classes JS et CSS doivent
retourner le code HTML généré à partir de leurs listes de
fichiers respectives.
Et 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 :
On va nommer cette méthode getCode() sera comme suit :
Exemple : Copier le code
// Rendu du code public function getCode(){ $out = ''; foreach($this->_src as $src ) { $out .= $this->format($src) . "\n"; } return $out; }
Et le fichier pour le code de la classe HeaderPart.phpfinale sera comme suit :
Exemple : Copier le code
<?php // Classe abstraite HeaderPart abstract class HeaderPart{ /* Tableau de stockage des elements fichiers JavasCript ou css */ private $_src = array(); /** Ajoute une source */ 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(){ $sortie = ''; foreach($this->_src as $src ) { $sortie .= $this->format($src) . "\n"; } return $sortie; } } ?>
Comme dit en haut la classe JS est une classe dérivé de la classe HeaderPart
Le fichier de La classe JS aura le code suivant :
Exemple : Copier le code
<?php /* Classe JS fille de la classe HeaderPart hérite donc les méthodes add() et getCode()*/ require_once ('HeaderPart.php'); class JS extends HeaderPart { // methode abstraite déclarée 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
Le fichier final de la classe Css.php aura le code suivant :
Exemple : Copier le code
/* Classe CSS étend la classe HeaderPart hérite donc add() et getCode()*/ class CSS extends HeaderPart { // methode abstraite déclarée dans HeaderPart protected function format($src){ return '<link rel="stylesheet" type="text/css" href="'.$src.'" />'; } }
Chacune des classes JS et CSS est dérivé de la classe HeaderPart donc elles héritent toutes les deux la méthode.
Nous allons à présent ajouter dans le code de la classe HEADER quatre nouvelles méthodes pour éviter l’appel directe aux méthodes add() et getCode() des deux
Ces 4 méthodes sont en fait des accesseurs qui nous permettent d’accéder aux méthodes add() et getCode() des classes JS et CSS.
Le code est le suivant :
Exemple : Copier le code
<?php /* Classe CSS étend la classe HeaderPart hérite donc add() et getCode()*/ require_once ('HeaderPart.php'); class CSS extends HeaderPart { // methode abstraite déclarée dans HeaderPart protected function format($src){ return '<link rel="stylesheet" type="text/css" href="'.$src.'" />'; } } ?>
Et on ajoute aussi une méthode, qui va construire le code HTML du header, qu’on nomme getHeaderCode()
Exemple : Copier le code
// Construction du 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" .'<meta name="description" content="'. $this->getDescription(). '" />'. "\n" .'<meta name="keywords" content="'. $this->getKeyWord(). '" />. "\n" . $this->getCSS()->getCode() . "\n" . $this->getJS()->getCode() . "\n" . '</head>' . "\n"; }
Et voici le fichier contenant le code final de la classe Header.php
Exemple : Copier le code
<?php require_once ('Js.php'); require_once ('Css.php'); class Header{ // Stockage du charset utilisé par notre document private $_charset= 'utf-8'; // Stockage de la description utilisé par notre document private $_description= 'description du document'; // Stockage des mots clé utilisé par notre document private $_keyWord= 'mot cle'; // 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 public function setCharset($charSet){ $this->_charset = $charSet; } // Setter de la description public function setDescription($description){ $this->_description = $description; } // Setter de keyWord public function setKeyWord($keyWord){ $this->_keyWord = $keyWord; } // Getter du charset public function getCharset(){ return $this->_charset; } // Getter de la description public function getDescription(){ return $this->_description; } // Getter du keyWord public function getKeyWord(){ return $this->_keyWord; } // Setter du titre public function setTitle($title){ $this->_title = $title; } // Getter du titre public function getTitle(){ return $this->_title; } // Ajout d'un nouveau fichier JavaScript public function addJSFile($jsfile){ $this->_js->add($jsfile); } // Ajout d'un nouveau fichier JavaScript public function addCSSFile($cssfile){ $this->_css->add($cssfile); } // Getter du JavaScript générer par la classe JS 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 public function getJS(){ return $this->_js; } // Getter de la classe CSS public function getCSS(){ return $this->_css; } // Construction du 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" .'<meta name="description" content="'. $this->getDescription(). '" />'. "\n" .'<meta name="keywords" content="'. $this->getKeyWord(). '" />'. "\n" . $this->getCSS()->getCode() . "\n" . $this->getJS()->getCode() . "\n" . '</head>' . "\n"; } } ?>
Voila notre librairie est fin prête à être utilisée .
On va donc la tester.
Pour tester notre librairie, on va placer nos fichiers dans un dossier
Puis on édite le fichier index.html comme suit :
Exemple : Copier le code
<?php require_once('lib/PageHTML.php'); $page = PageHTML::getInstance(); /* Ajouter le titre de votre page en remplaçant: Page de teste */ $page->getHeader()->setTitle('Page de teste'); /* Ajouter la description de votre page en remplaçant: Nouvelle description */ $page->getHeader()->setDescription('Nouvelle description'); /* Ajouter les mots clé de votre page séparés par virgules en remplaçant: mot1,mot2 */ $page->getHeader()->setKeyWord('mot1,mot2'); $page->getHeader()->addCSSFile('style.css'); $page->getCorps()->addCorpsElement('<p>Teste de la Librairie HTML</p>'); $page->getCorps()->addCorpsElement('<a href="https://www.oujood.com/"> Cliquez ici pour allez a Apprendre créer sites</a>'); echo $page->getHTMLCode(); ?>
Nous allons appliquer un peut de style a notre document.
Editez le fichier style.css comme suit :
Exemple : Copier le code
body{ background-color: #000000; } p{ font-family: arial; font-size: 50px; color: #FFFFFF; } a{ text-decoration: none; color: #FFFF00; }
La librairie qu’on vient de codé n’est pas une référence.
Ce n’est qu’une petite application pour vous initier à la création de pages web en POO avec PHP.
Il existe des solutions plus complètes, je compte sur votre imagination pour coder des applications plus complète, que vous pouvez publier si vous voulez dans la zone Espce membre de notre cite.
Mais cette librairie peut être utilisée pour de petits scripts, personnelles nécessitant la génération de document HTML.