Exemple de conception d'un site dynamiqueDate de publication : 11 Mai 2006 , Date de mise à jour : 11 Mai 2006
Par
Pierre-Baptiste Naigeon (Tutos, tests et articles web)
Le but de ce tutorial est de vous montrer un exemple de conception de site dynamique. Bien entendu, rien ne vous empêche de ne pas suivre cette structure, et de coder votre site autrement. I. Définition de la structure du site I-A. Arborescence I-B. Les contraintes II. Base de donnée II-A. Structure de la base II-B. Remplissage de la base III. PHP III-A. Fonctions de connexion à la base III-B. Création du template III-C. Détail des fonctions de récupération et d'affichage des données III-D. Gestion de la feuille de style IV. Conclusion I. Définition de la structure du siteI-A. Arborescence
Voici l'arborescence que nous souhaitons créer :
Bien entendu, ce n'est qu'un exemple, vous pouvez adapter à volonté.
I-B. Les contraintes
Dans le cadre de cet exemple, nous allons définir notre besoin.
II. Base de donnée
Passons maintenant à la création de la base de donnée.
II-A. Structure de la base
Commencez par créer une base nomée BASE_TEST. Nous allons ensuite créer la table `pages`, en fonction des besoins ennoncés ci-dessus :
Afin de définir la page 'racine' du site, nous allons déclarer que son Id_parent vaudra 0. Il n'y aura donc qu'une seule page à posséder cet Id_parent.
Pour le champ Id_parent, j'ai choisi 1 comme valeur par défaut, afin d'éviter que par mégarde plusieurs pages ne se retrouvent avec soit une valeur nulle soit 0 comme parent. Au pire donc, pout toutes les pages dont l'Id_parent ne sera pas spécifié, elles seront considérées comme enfant de l'accueil.
Bon, un peu plus d'explications concernant l'Id_parent. Comme un dessin vaut souvent mieux qu'une longue explication, voici notre arborescence représentée avec les Id de chaque page :
Nous allons insérer dans la base les pages par 'niveau' (et de gauche à droite) dans l'arborescence.
Arborescence du site
Comme vous pouvez le constater, chaque page n'a qu'un et un seul parent (exception faite de la page d'accueil), et 0 à n enfants.
Prenons maintenant un exemple pour bien comprendre le système de parenté : "Mer Morte" a pour Id 12, et comme parent "A la mer" qui elle a pour Id 10. L'Id_parent de "Mer Morte" sera donc l'Id de "A la mer" soit 10. En remontant encore d'un cran, "A la mer" a pour parent "Mes vacances" (Id=3). L'Id_parent de "A la mer" est donc 3. Et faisons de même pour le dernier niveau : "Mes vacances" a pour parent "Accueil" (Id=1). L'Id_parent de "Mes vacances" est donc 1.
La page d'accueil est la seule en orange, car elle subira un traitement particulier, du fait qu'elle est la seule à ne pas avoir de parent. Les pages en vert sont les pages 'feuilles', n'ayant pas d'enfant. Les pages en bleu et en rose représentent les différents niveau de profondeur.
Pour le champ Contenu, Deux solutions s'offrent à nous pour le remplissage :
II-B. Remplissage de la base
Pour le remplissage de la base, je ne me suis pas embêté : le titre, les mots clés, la description et le contenu seront identiques.
Voici le SQL généré par l'ajout de notre arborescence :
Remarquez bien ici que seul l'accueil à comme Id_parent 0.
III. PHPIII-A. Fonctions de connexion à la base
Créons tout d'abord un fichier nommé mes_fonctions.php. Ce fichier contiendra les différentes fonctions permettant de se connecter et d'interroger la base (et d'autres par la suite) :
Pas besoin de plus de détails sur ces fonctions, contentons-nous de les utiliser.
III-B. Création du template
L'intérêt de ce tutorial étant tout autre, nous n'allons pas nous étaler sur la création du template. Définissons ici simplement nos besoins en terme d'affichage :
L'idée va simplement être de créer une seule et unique page PHP qui chargera dynamiquement les différents éléments dont elle a besoin pour son affichage.
Nommons cette page index.php :
Et voici le CSS lié :
Et enfin le fichier pied_page.html
Le CSS sera ammené à évoluer au fil du temps, le PHP restera en l'état, toutes les fonctions appelées seront ajoutées dans mes_fonctions.php.
Nous avons défini ici trois fonctions : extraction_infos_DB(), affiche_menu(), et affiche_chemin_fer(). En les construisant bien, rien de plus ne sera necessaire.
III-C. Détail des fonctions de récupération et d'affichage des données
Nous allons détailler ici les différentes fonctions auxquelles nous faisons appel dans notre index.php.
Ces fonctions seront à ajouter dans le fichier "mes_fonctions.php" Commençons par la première, extraction_infos_DB() :
Nous nous contentons simplement ici de récupérer les différentes informations de la base de données pour la page en cours. On colle toutes ces informations dans des variables d'environnement histoire d'être tranquilles, et hop ! Rien de bien sorcier quoi ;)
Mais pourquoi ce intval lors de la récupération de la valeur passée par l'URL ? Tout simplement pour s'assurer que la valeur récupérée est bien un nombre, et ne risque pas de détourner la requête de son but initial. Dans cet exemple, ce n'est pas flagrant, mais documentez-vous sur l'injection SQL pour vous rendre compte des risques.
Passons maintenant à un peu plus difficile... L'affichage du chemin de fer. Commençons par le code, l'explication viendra après :
N'ayez pas peur, ce n'est pas si compliqué que ca y paraît ... Il s'agit simplement d'une fonction récursive (qui se rappelle elle-même). Elle récupère les informations de la page en cours, puis elle crée le lien correspondant et se rappelle elle même. Elle prend en paramètre l'ID de la page parent, tant que cet ID n'est pas égal à 0 (id_parent = 0 -> page racine du site).
Reste la dernière fonction, celle chargée d'afficher le menu... L'idée est la suivante :
Rien de bien compliqué ici. On sélectionne toutes les pages filles de la page passée en paramètre. Si il n'y en a pas, on sélectionne toutes les pages filles de la page parent. Il ne reste plus ensuite qu'à générer notre liste, laissons les CSS gérer l'affichage :) III-D. Gestion de la feuille de style
Le plus important d'abord... Afficher notre liste 'en ligne'. Rien de bien compliqué, rassurez-vous.
Rajoutons le code suivant à notre fichier "styles.css" :
Ce simple petit bout de code suffit à préciser l'écartement entre nos différents éléments, l'affichage ou non d'une puce, ainsi que l'affichage en ligne. Le #menu_haut li signifie que ce style s'appliquera à tout les éléments de type liste contenus dans le bloc ayant pour id menu_haut.
Rajoutons encore quelques styles pour rendre notre affichage plus agréable :
IV. Conclusion
Et voilà, vous disposez à présent d'un site entièrement dynamique. Vous pouvez rajouter autant de pages que vous le souhaitez, en supprimer à la volée, les menus seront toujours à jour, de même que les liens. Finalement, avec un tout petit effort de conception à la base, il est facile d'être fainéant après. Plus besoin désormais de modifier 42 pages, si vous souhaitez déplacer le menu, une simple édition du fichier index.html suffira.
|
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2006 Pierre-Baptiste Naigeon. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.