floats dynamiques

BTS Informatique de Gestion (lycée Rostand Chantilly)
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
BTS Informatique de Gestion (lycée Rostand Chantilly)
Initiation au PHP
I.
Fiche 5 – Floats dynamiques -
Page 2
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
BTS Informatique de Gestion (lycée Rostand Chantilly)
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
Travail à faire
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 ?
BTS Informatique de Gestion (lycée Rostand Chantilly)
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">
….
</div>
<!-- fin en-tête -->
1ere partie
commune
<!-- début de la fausse colonne -->
<div id="faux">
<!-- début colonne de gauche (menu) -->
<div id="colonnegauche">
.....
</div>
<!-- fin colonne de gauche -->
<!-- corps (partie droite) -->
<div id="droitecorps">
.....
</div>
<!-- fin corps -->
Partie spécifique
propre à chaque
page
<!-- positionnement -->
<div class="clear"></div>
<!-- fin positionnement -->
</div>
<!-- fin de la fausse colonne -->
<!-- début pied de page -->
<div id="footer">
….
</div>
<!-- fin pied de page -->
2ème partie
commune
</div>
<!-- fin enveloppe globale du site-->
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.
Travail à faire
- 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 ».
BTS Informatique de Gestion (lycée Rostand Chantilly)
Initiation au PHP
Fiche 5 – Floats dynamiques -
Page 5
III. Etape n° 2 : Gestion de la fonction include( )
Travail à faire
- 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.
Travail à faire
- 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">
...
</div>
<!-- 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.
Travail à faire
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.
BTS Informatique de Gestion (lycée Rostand Chantilly)
Initiation au PHP
Fiche 5 – Floats dynamiques -
Page 6