Créer un site web simple avec un template
Template pour création de site web simple
Introduction
Bonjour et bienvenue sur ce tutoriel. Nous allons apprendre, ici, à créer un site web simple géré par un template. Compliqué me direz-vous? eh bien vous vous trompez.
Cependant, à la première lecture de ce tutoriel, l'utilisation des templates pourra vous sembler encore flou. Une conclusion a donc été prise et résume de façon très simple ce que vous allez lire.
Bonne lecture.
Pré requis
- Connaissance du HTML
- Connaissance du PHP
- Création de classe en PHP
La toute première chose à faire est de créer une coquille vide de votre site web. Un simple fichier HTML suffit amplement. Bien évidemment, vous pouvez coupler cette page HTML avec un fichier CSS .Cette coquille vide est le template et en voici le code de base (vous pouvez ajouter du CSS évidemment, je le conseille même très fortement) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns= "http://www.w3.org/1999/xhtml" xml:lang="f">
<head>
<meta http-equiv= "Content-Type" content= "text/html; charset=iso-8859-1"/>
<title>Test sur les templates</title>
<link rel="stylesheet" media="screen" type="text/css" href= "style.css"/>
</head>
<body>
<div id="divHeader">
<? php echo($application-> header); ?>
</div>
<div id="divMenu">
<? php echo($application->menu); ?>
</div>
<div id="divContent">
<? php echo($application->content); ?>
</div>
<div id="divFooter">
<? php echo($application->footer); ?>
</div>
</body>
</html>
Notre coquille vide ne va pas rester comme ça. Ne faites pas attention au code PHP du template pour le moment, nous y reviendrons en temps voulu. La deuxième étape consiste à créer une classe application. Cette classe va comprendre plusieurs éléments. Mais tout d'abord voici le code, les explications viennent ensuite :
<? php
class application {
/* ATTRIBUTS */
var $header;
var $menu;
var $content;
var $footer;
var $template;
/*===========================================================
METHODES
Ici sont regroupées les fonctions du programme, qui récupère
les valeurs du header, du contenu, du pied de page, et enfin, la
fonction buildPage() exécute ces fonctions d'un coup.
On a aussi le constructeur de la classe ici,
qui nous donne l'emplacement du template
===============================================================*/
//FONCTION CONSTRUCTEUR
functionapplication() {
$this->template='template.html';
}
//FONCTION QUI CREE LE HEADER
functiongetHeader() {
$this->header = 'ici le contenu du header';
}
//FONCTION QUI CREE LE MENU
functiongetMenu() {
$this->menu.='<a href="?action=afficherIndex">Index</a>';
}
//FONCTION QUI CREE LE CONTENU
functiongetContent() {
if(isSet($_GET['action'])) {
switch($_GET['action']) {
case 'home' :
include('content/home.php');
break;
case 'afficherTutoriel' :
include('content/tutoriel.php');
break;
//Par défaut, on affiche la page d'accueil
default :
include('content/home.php');
}
}
//Sinon on fait afficher la page d'accueil
else {
include('content/home.php');
}
}
//FONCTION QUI CREE LE PIED DE PAGE
functiongetFooter() {
$this->footer = 'contenu du pied de page';
}
/*FONCTION QUI APPELLE LES FONCTIONS DE
CREATION DES DIFFERENTES PARTIES DE LA PAGE*/
functionbuildPage() {
$this->getHeader();
$this->getMenu();
$this->getContent();
$this->getFooter();
}
} //Fin de la classe application
?>
On crée donc notre classe avec 6 attributs : 5 contenant les différentes parties de notre page, et un qui va contenir l'adresse de notre template (notre fameuse coquille vide). On a notre méthode constructeur qui va nous donner le lien vers notre template, puis, les 4 fonctions suivantes remplissent les attributs et ceux-ci vont donc contenir le code HTML (ou PHP) des différentes partie du site. On a, par exemple, la fonction getMenu() qui nous donne le code pour le menu de notre site web.
Pour le contenu, c'est différent. Quand on clique sur un lien du menu, on renvoi vers l'index du site, mais avec une information transmise avec la méthode GET. Et donc, c'est notre méthode "getContent()" qui récupère cette info, puis, grâce à un switch sur cette variable, on en défini le contenu. Pour que le code soit plus clair, le contenu est mis dans un fichier php qui va contenir un code du style :
<? php
$this->content = 'contenu de la page';
?>
Enfin, la méthode "buildPage()", fait appel au 4 méthodes précédentes, et les fait s'exécuter.
Pour finir nous avons le fichier index.php. C'est ce fichier PHP qui se lance au démarrage de votre site web, mais c'est pourtant le plus petit des fichiers dans ce tutoriel. En voici d'abord le contenu, les explications venant après :
<? php
//On inclut et on instancie notre classe
include("application.class.php");
$application = new application;
//On contruit la page
$application->buildPage();
//On inclut le template qui appel les différents éléments de la page
include($application->template);
?>
Ici, pas de souci à se faire. On inclut notre classe et on l'instancie. Ensuite, on fait appel à notre méthode "buildPage()", qui va nous construire la page par rapport à l'information GET['action']. Puis, pour finir, on inclut notre attribut $template (ici $application-> template). Et c'est ici que l'on peut parler du code PHP du fichier "template.html".
Ces tous petits bouts de code PHP de ce fichier vont juste nous afficher nos attributs là où on le désire, et donc, c'est à ce moment que notre coquille vide se remplit.
En conclusion, on a un fichier index.php qui instancie une classe. A l'instanciation de cette classe on nous donne dans une variable (attribut), l'emplacement de notre coquille vide (template). Ensuite notre fichier index.php appelle la méthode buildPage() qui rempli quatre variables qui correspondent à l'en-tête, le menu, le corps et le pied de page de notre site web.
Pour finir, notre fichier index.php inclut notre template et celui-ci affiche le contenu de nos quatre attributs correspondant à nos quatre parties de notre page web.
Je vous remercie d'avoir lu ce tutoriel jusqu'au bout, en espérant avoir été clair.
- Modele site internet
- Modele de site web - Meilleures réponses
- Modèle de site internet - Meilleures réponses
- Modèle devis site internet ✓ - Forum PHP
- Modele bulletin scolaire - Forum PHP
- Nombre de visite d un site internet - Forum PHP
- Test connection internet - Forum Delphi / Pascal
- Remplissage site internet - Forum C# / .NET