BTS Informatique de Gestion (lycée Rostand Chantilly) Initiation au PHP Fiche 5 Floats dynamiques - Page 1. Sommaire

Transcription

1 Initiation au PHP Fiche 5 Floats dynamiques - Page 1 FICHE 5 Objectifs : Etre capable de gérer dynamiquement un site. Utiliser la propriété Float et la fonction include( ) Gérer à la fois du XHTML, du PHP et une feuille de style CSS Ressource : Dossier Fiche5 Sommaire I. Problématique... 2 II. Etape n 1 : Création des partie communes... 3 III. Etape n 2 : Gestion de la fonction include( )... 5

2 Initiation au PHP Fiche 5 Floats dynamiques - Page 2 I. Problématique Nous avons vu lors des TP CSS comment gérer les float en CSS. Toutefois la manière de procéder dans ce TP est relativement lourde à maintenir puisqu'elle oblige à dupliquer toute une partie de code (celle contenant les différents blocs constituant les pages et le contenu du menu) sur l'ensemble des pages. Si une modification doit être réalisée, par exemple l'ajout d'un nouveau choix dans le menu, cela nécessite de modifier l'ensemble des pages. Il est possible de rendre dynamique les floats. L'idée est d'obtenir une partie commune dont le code n'est écrit qu'une seule fois et une partie spécifique qui variera en fonction des choix effectués dans le menu et qui sera donc propre à chaque page appelée. Pour parvenir à ce résultat on utilisera la fonction PHP include( ). Parties communes Partie spécifique propre à chaque page

3 Initiation au PHP Fiche 5 Floats dynamiques - Page 3 La fonction include permet d'insérer dans un script le code contenu dans un fichier. Exemple : <?php include("arle.html");?> Cette fonction permet d'insérer une partie de code dans une autre. En clair, on peut insérer un contenu dans un endroit précis d une page d un site (là où se trouve la fonction include). Partie commune à l'ensemble des pages appelé avec la fonction include() Partie spécifique à une page Attention : A partir du moment où il apparaît du code PHP n oubliez pas que votre fichier doit posséder une extension.php Renommer l'ensemble des fichiers.html en fichiers.php II. Etape n 1 : Création des parties communes Intéressons nous pour l'instant au fichier index.php. Nous avons sept blocs dans ce fichier. Nous trouvons : Une enveloppe globale du site o un en-tête o une fausse colonne (contenant une image qui sera répétée vers le bas) un menu un corps du texte un ajustement pour que le futur bas de page se positionne sous le menu et le corps de texte o un bas de page Quelles sont les parties communes à l'ensemble des pages?

4 Initiation au PHP Fiche 5 Floats dynamiques - Page 4 <!-- début de l'enveloppe globale du site --> <div id="haut"> <!-- en-tête --> <div id="header">. <!-- fin en-tête --> <!-- début de la fausse colonne --> <div id="faux"> 1ere partie commune <!-- début colonne de gauche (menu) --> <div id="colonnegauche">... <!-- fin colonne de gauche --> <!-- corps (partie droite) --> <div id="droitecorps">... <!-- fin corps --> Partie spécifique propre à chaque page <!-- positionnement --> <div class="clear"> <!-- fin positionnement --> <!-- fin de la fausse colonne --> <!-- début pied de page --> <div id="footer">. <!-- fin pied de page --> <!-- fin enveloppe globale du site--> 2ème partie commune On voit donc que l'on trouve deux parties communes séparées par une partie spécifique. Il ne doit rester dans notre fichier que les blocs "spécifiques". Les blocs communs vont être gérés dans des fichiers à part. Etant donné que les deux parties communes sont séparées par une partie spécifique, nous allons devoir gérer ces deux parties dans deux fichiers distincts. - Dupliquer index.php en hautpage.html. - Ne conserver dans ce fichier que la 1ère partie commune. - Modifier les liens url du menu (fichiers avec extension html à remplacer par extension.php) - Dupliquer index.php en baspage.html. - Ne conserver dans ce fichier que la 2ème partie commune. - Déplacer ces deux fichiers dans un sous-répertoire nommé «includes».

5 Initiation au PHP Fiche 5 Floats dynamiques - Page 5 III. Etape n 2 : Gestion de la fonction include( ) - Ouvrir le fichier index.php. - Supprimer la première partie commune et la remplacer par une inclusion du fichier hautpage.html. - Supprimer la seconde partie commune et la remplacer par une inclusion du fichier baspage.html. - Tester votre page index.php (attention, vous devez passer par votre serveur web local pour que le php soit interprété) L ensemble de vos pages doit être construit sur le même modèle que la page index.php. - Modifier tous les autres fichiers afin d y inclure les fichiers hautpage.html et baspage.html. - N oubliez pas de définir le bloc «corps» (voir structure des pages ci-après) - Tester les différents liens et ce depuis les différentes pages. Structure des pages <body> <?php include("includes/hautpage.html");?> <!-- corps (partie droite) --> <div id="droitecorps">... <!-- fin corps --> <?php include("includes/baspage.html");?> </body> Pour finir, et pour voir maintenant l intérêt de ce mode de construction de pages web, nous allons ajouter un nouveau choix dans le menu. Renommez le fichier enquete.html en enquete.php et adaptez-le afin que sa structure soit identique à celle des autres pages. Modifiez le menu de vos pages selon le modèle ci-après. Testez.

6 Initiation au PHP Fiche 5 Floats dynamiques - Page 6