CodeS-SourceS
Rechercher un code, un tuto, une réponse

Créer un site web simple avec un template

Mai 2017


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.

A voir également

Publié par bad_dark_spirit.
Ce document intitulé «  Créer un site web simple avec un template  » issu de CodeS-SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Affichage en tableau : afficher des données dans un tableau
Gentoo ovh, innodb : impossible de stoper ou demarrer mysql