Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

CRÉER UN SITE WEB SIMPLE AVEC UN TEMPLATE


Information sur le tutorial

Catégorie :Application Date de création : 31/12/2008 10:20:13 Vu : 16 462 fois

Note :
Aucune note

Commentaire sur cette source (29)
Ajouter un commentaire et/ou une note


Description

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 semblez encore flou. Une conclusion a donc été écrite et résume de façon très simple ce que vous allez lire.
Bonne lecture.

Vous pouvez télécharger la source dans cet exemple concret, allez y faire un tour, c'est la mise en pratique de ce tuto :
http://baddarkspirit.olympe-network.com/

Tutorial

Template pour création de site web simple


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 semblez 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 = " fr " >
< head >
< meta http-equiv= "Content-Type" content= "text/html; charset =iso-8859-1" / >
< title >Test sur les templates< /title >
< l ink 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 fonction s 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 construteur 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 quatres parties de notre page web.


Je vous remercie d'avoir lu ce tutoriel jusqu'au bout, en espérant avoir été clair.

31 décembre 2008 10:27:05 :
Edit du 31/12 : mise en page
31 décembre 2008 10:28:52 :
Edit du 31/12 : mise en page
31 décembre 2008 10:29:40 :
Edit du 31/12 : mise en page
31 décembre 2008 10:37:00 :
Edit du 31/12 : Mise en page (encore, la version beta pour le chargement de fichier .docx n'est pas super)
02 janvier 2009 09:03:41 :
Edit du 02/01/09 : Encore de la mise en page, la prochaine fois je taperais mes tutos directement sur le site.
16 janvier 2009 13:49:54 :
Ajout d'un lien pour le téléchargement des sources. Sur ce site, vous aurez une mise en pratique de ce tuto
signaler à un administrateur
Commentaire de meeng le 05/01/2009 14:24:46

ce totu est vraiment simple et très compréhensible il met en oeuvre les base de la poo mais j'aurai aimer pour plus de détaille qu'il mette en oeuvre le charge d'une troisieme mis à part les deux primière

en tout cas bravo!!! tu es un bon pedagogue

Meeng

signaler à un administrateur
Commentaire de dfs le 12/01/2009 15:56:14

c coool

signaler à un administrateur
Commentaire de papin59 le 14/01/2009 12:30:44

Ce qui est bien c'est que tu n'as pas surchargé tes explications, ce qui est souvent un défaut des tutos.

Bravo.

signaler à un administrateur
Commentaire de Unpacker le 15/01/2009 11:31:23

C'est possible avoir un exemple complait, à téléchargé, car j'ai un peut de mal à le faire marcher, en temps amateur voir amateur. Merci de votre réponse...

signaler à un administrateur
Commentaire de bad_dark_spirit le 15/01/2009 11:54:20

@ Unpacker --> J'ai bien un exemple à télécharger, qui est un site web fait avec un template de ma création, et qui en plus sert aussi de tutoriel. Donc oui je peux le mettre en ligne avant lundi et donner le lien dans les explications plus haut. Bien entendu, comme le site est de moi, je souhaiterais que si vous utilisez le template ou bien le contenu, de citer la source voire mon nom (le nom d'auteur).
J'essaie de faire ça pour ce week end.

signaler à un administrateur
Commentaire de bad_dark_spirit le 16/01/2009 13:57:31

Voilà, tout est en ligne comme prévu.

le lien : http://baddarkspirit.olympe-network.com/

signaler à un administrateur
Commentaire de Unpacker le 20/01/2009 17:15:45

ok merci, si non pour le nom de l'auteur, je le métré sur une page copyright, ou si non j'utilise le moteur de template de phpbb2, mais bon, je testé ta template en c'est jamais...

signaler à un administrateur
Commentaire de Unpacker le 20/01/2009 17:26:58

A oui..

Il manque plus une fonction, de chargement des images dynamique avec barre de chargement....

Est la sa serais cool ;=) ...

signaler à un administrateur
Commentaire de Unpacker le 21/01/2009 09:44:58

allé je te mais une note pour ton script(s).
Pour un débutant, c'est super pratique et simple emploi.
Merci à toi

signaler à un administrateur
Commentaire de sirtal3ab le 23/01/2009 03:08:06

merci et bonne contunuatio ------------> toto

signaler à un administrateur
Commentaire de lakhssas le 24/01/2009 15:19:19

Merci

signaler à un administrateur
Commentaire de paolo125 le 05/02/2009 11:11:50

Je le trouve très interessant ton tuto très grand merci

signaler à un administrateur
Commentaire de chidap le 09/02/2009 14:47:52

pas si mal

signaler à un administrateur
Commentaire de Orange73 le 19/02/2009 16:41:56

Une autre manière de parler de templates effectivement sans moteur de templates ...
Sa permet tout de même de faire une approche pour la POO, les classes...

Mais je prefère la gestion de template via un moteur du genre Smarty ou fastTemplate :)

signaler à un administrateur
Commentaire de flaydeer le 02/03/2009 13:35:48

Salut,

et au point de vue sécurité, cette solution est elle bien sécuriser ?

Merci.

signaler à un administrateur
Commentaire de thouraya8700 le 16/03/2009 16:49:23

vous pouvez m'aider à completer mon site de vente en enchére

signaler à un administrateur
Commentaire de kaken le 24/03/2009 11:05:22

Salut, ton tuto est super cool pour bien démarrer en POO

signaler à un administrateur
Commentaire de the_vrp le 29/03/2009 17:19:11

tu utilise quel appli pour creer tes pages html ou css ou pour editer les templates ?  
je suis debutant et cela m interesse de ne pas partir sur une appli trop compliquée

merci

signaler à un administrateur
Commentaire de bad_dark_spirit le 29/03/2009 19:08:27

the_vrp --> Bonjour, je pense que je vais te décevoir, mais j'utilise simplement Notepad++ pour la création de mes sites web ou services web. J'ai juste besoin d'un coloration syntaxique pour programmer. Pour le reste, les images sont crées avec Photofiltre. Je suis un grand fan du libre.

Kaken --> Merci, une critique positive fait toujours plaisir :)

Thouraya8700 --> Je suis désolé, mais je suis en pleine période d'examen, et j'ai quatre projets en cours. En ce moment aider quelqu'un m'est impossible.

Flaydeer --> Cette méthode est aussi (voire plus) sécurisé qu'un site web en PHP crée "normalement".

orange73 --> Chacun ces goût en matière de programmation. Je n'ai jamais utilisé de moteur de template, mais ça doit aussi avoir ces avantages. Pour ma part je préfère taper tout le code, de A à Z.

Pour le reste --> Merci :D

signaler à un administrateur
Commentaire de xsaiddx le 29/04/2009 19:19:15

salut j'ai soucis
c'est quoi cette ligne

echo($application- > header);

ce n'est pas un appelle de fonction c'est un attribut si je me trompe pas

sinon rectifier moi ca
et merci

signaler à un administrateur
Commentaire de bigsony le 06/05/2009 16:45:38

très bon tuto.
Je suis un débutant en POO ,cela m'a beaucoup aidé.
Dans mes manipulations j'ai constaté que lorsque je met du code php dans la partie "content" il n'est pas interpreté. En fait je voulais appeler une autre page à partir d'une page "content" mais je n'arrive pas.
S'il te plait j'attends votre aide.

signaler à un administrateur
Commentaire de khalidsign le 11/05/2009 14:27:10

pas mal ......

signaler à un administrateur
Commentaire de maxma le 23/05/2009 10:41:55

Bonjour Stéphane,
J'ai eu connaissance de ce script sur votre site et depuis 48h mais je ne parviens pas à surmonter quelques difficulés. Je suis donc impatient de pouvoir communiquer directement avec vous.
Le code est très propre, les commentaires parfaits. Mais voila :
Dans "application.class.php" :
J'inclus mes fichiers-perso.php dans la boucle < function getContent (); >.
Dans "fichier-perso.php" :
j'encadre le contenu par   <? php $this->content = 'contenu de la page'; ?>.
Ce qui me pose problème :
1- le contenu est grisé (mais il suffit d'enlever la balise php le temps de travailler sur la page)
2- les apostrophes et guillemets du contenu créent un "parse error" que je ne parviens à résoudre. Je ne peux me permettre de rajouter des antislashs à chacune des occasions (les contenus sont longs et d'autres personnes via un espace admin participent au contenu, c'est pour un collège).
J'ai essayé :
- de conjuguer la balise php du contenu avec l'include;
- avec "get_contents";
- de bidouiller les addcslashes les stripslashes ...
- et je ne sais plus quelle comme méthode douteuse;
et au mieux le contenu s'affiche au-dessus du fichier-perso.php mais jamais dans la balise <divContent> de "template.html".
Quelle peut être la solution ?
J'espère avoir été clair.
Bon courage pour vos exams et projets !
Max

signaler à un administrateur
Commentaire de bad_dark_spirit le 23/05/2009 12:05:18

Bonjour Max,
Pour votre problème numéro 1, c'est tout à fait normal que le contenu soit grisé vu que le contenu de la page se trouve entre quote ' . Il n'y a pas de moyen de parer ceci mis à part votre solution de rajouter les quotes à la fin. Pour ma part je connais suffisamment le PHP pour me permettre de continuer à coder malgré le fait que le code est gris.

Le second problème est plus embêtant. La première solution est de placer un antislash \ devant chaque quote, mais si le contenu est long, cela devient vite rébarbatif. La seconde solution est de créer vous même une fonction qui ajoute un antislash avant chaque quote. Pour cela, aidez-vous des expressions régulière. Je vous donne un exemple

$this->content = str_replace("\'", "\\'", $this->content);
// Ici on remplace tous les ' par des \'

Je n'ai pas testé, mais c'est pour vous donner une piste.

bon courage.

signaler à un administrateur
Commentaire de maxma le 23/05/2009 12:25:48

Stéphane,
Je ne m'attendais pas à une réponse si rapide, merci d'être là...
Je vais tester (et en profiter pour étudier les regex, j'en fais l'impasse depuis le début). Je vous en informerai bien sûr.
Bonne journée
Max

signaler à un administrateur
Commentaire de maxma le 23/05/2009 14:50:51

J'ai beau créer des variables, bidouiller différentes expressions régulières, inclure, etc. je parviens au mieux à des problèmes de vue. Je vais continuer et vous tiendrai au courant.
Puisqu'il s'agit d'un site de collège, donc du ministère, je ne pourrai pas mettre de lien vers votre site, en revanche je l'indiquerai dans le code source (je sais qu'un élève au moins est susceptible d'y jeter un coup d'oeil, il lui est d'ailleurs interdit d'approcher la salle d'info pour piratage...).
Merci pour tout.
Bon courage
Max

signaler à un administrateur
Commentaire de bad_dark_spirit le 23/05/2009 16:12:18

Re,

A la limite, tu peux créer un script à part, dans n'importe quelle langage. Tu balance ta chaîne de caractère dans un formulaire et ton script va s'occuper de transformer les quotes en \', ensuite tu fais un copy/paste dans ton code PHP et le tour est joué...

Bon courage

signaler à un administrateur
Commentaire de maxma le 24/05/2009 13:33:06

Bonjour Stéphane, j'ai pris connaissance de ton message ce matin. Voici ce que j'ai composé et qui fonctionne parfaitement. Si cela peut être utile à d'autres. J'ai essayé d'être didactique ...
<body>
<!---------------------------------------------------------------------
Voici un script nommée slash.php
Il est utile si le "content" de votre balise divContent contient
un long texte avec des apostrophes et des guillemets et que vous ne voulez pas ou ne pouvez pas placer devant chacun d'eux un antislash.
Le principe :
Vous tapez votre script html dans le body ;
Vous le copiez/collez dans le formulaire ci-dessous ;
Copiez/collez le résultat comme "content" dans :
$this->content .= 'Ici j\'colle avec l\'apostrophe';
----------------------------------------------------------------------->
<div>
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" enctype="multipart/form-data" method="post" >
<fieldset>
<legend>Transformation des quotes</legend>
<label for="texte"></label><br />
<textarea name="texte" id="texte" cols="100" rows="20"></textarea>
<input type="submit" value="Transformer">
</fieldset>
</form>
</div>

<?php
//Ouverture du fichier où la transformation sera effective
$fp = fopen("transformation.txt", "w+");

//On convertit la chaîne de caractères :  
$texte = addslashes(nl2br(htmlentities($_POST['texte'])));
$page = "";
$page .= "<span>$texte</span>\n";

//Ecriture du texte dans le .txt
fwrite($fp,"$page");

//fermeture du fichier
fclose($fp);

//On affiche le message enregistré à coller en tant que "content"
echo "$page";
?>
</body>

Voici pour l'instant un moyen pour éviter de mettre des antislashs devant chaque quote d'un script html.
Merci Stéphane
Max

signaler à un administrateur
Commentaire de maxma le 24/05/2009 13:55:33

Correction:
Utile seulement devant les quote, id est les apostrophes !
Et précision :
utile seulement pour le html, non le php (qui n'aurait plus aucun sens sans quote)
Max

Ajouter un commentaire



Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Comparez les prix Nouvelle version

Photothèque Nouveau !



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,250 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.