|
Untitled Document
 |
Génération d'un menu
déroulant |
|
Tutorial écrit par : Daniel Fabien - Script
Masters
|
|
Introduction |
|
|
Avant toute chose, sachez que ce tutorial s’adresse essentiellement
à des utilisateurs ayant un niveau intermédiaire en PHP.
Nous allons générer à l’aide de PHP le menu déroulant
étudié lors de précédents tutoriaux. Si vous
n’avez pas lu ces tutoriaux, sachez que cette technique peut-être
reprise dans de nombreux cas.
Voici le menu obtenu avec l’exemple que nous allons suivre au cours
de ce tutorial :
Titre 1 |
|
Titre 2 |
Pour obtenir cet exemple, consultez les tutoriaux suivants :
- Menu
déroulant dynamique vertical en DHTML - Partie 1
- Menu
déroulant dynamique vertical en DHTML - Partie 2
- Menu
déroulant dynamique vertical en DHTML - Partie 3
Ci-dessous une liste de liens à suivre si vous voulez appliquer
la méthode à d’autres menus :
- Menu
dynamique vertical (dhtml)
- Double
Menu Déroulant Dynamique
- Menu
déroulant dynamique (2)
- Menu
Dynamique Vertical 2 (dhtml)
- Menu
Dynamique
- Menu
Dynamique 2
Le menu est disponible en téléchargement dans l’archive
des sources en haut de ce tutorial. Il contient également le script
PHP de génération et bien sûr ce tutorial au format
imprimable.
Voila, maintenant nous pouvons commencé !
|
| |
Principe |
|
|
Pour effectuer cette génération, il faut dans un premier
temps sauvegardé les données du menu (les textes, les liens
et les cibles de ces liens). Pour ce faire, il existe deux solutions.
La première consiste à stocker les informations dans une
base de données. La seconde d’utiliser un fichier texte structuré
de telle manière qu’un programme peut aisément le
lire et en comprendre les données.
Nous choisirons cette dernière technique car elle est plus simple
à mettre en œuvre. En effet, il est plus facile et plus rapide
de modifier un fichier texte à la main. Une base de données
nécessiterait également une interface d’administration.
Sujet qu’on ne peut traiter dans un seul tutorial.
La deuxième étape consiste à trouver l’endroit
du script contenant les données afin d’adapter le script
PHP à celles-ci.
Enfin, il suffit de générer le script en recueillant les
informations contenues dans notre fichier.
|
|
Fichier texte |
| |
Comme nous venons de le dire, le fichier doit être structuré
afin d’automatiser la lecture par notre script.
Voici le modèle que j’ai utilisé pour notre exemple
(je l’ai nommé « données.txt ») :
| 2
Titre 1|3|
Sous Titre 1.1|http://www.script-masters.com|2|
Sous Titre 1.2|http://www.script-masters.com|2|
Sous Titre 1.3|http://www.script-masters.com|2|
Titre 2|2|
Sous Titre 2.1|http://www.script-masters.com|2|
Sous Titre 2.2|http://www.script-masters.com|2|
|
A ce stade une petite explication s’impose. Tout d’abord,
je vous invite à faire la correspondance entre l’exemple
se trouvant en haut de ce tutorial et les lignes du fichier.
Sur la première ligne, vous pouvez voir le nombre de menu que nous
souhaitons afficher (ici 2 pour « Titre 1 » et « Titre
2 »). La ligne suivante contient le nom du premier menu («
Titre 1 ») suivi par le nombre de sous-menu qui le compose (2).
Ces deux valeurs sont séparé par une barre verticale afin
de pouvoir les différencié lors de la lecture du script.
Ensuite, nous détaillons les caractéristiques de chaque
sous-menu. Chacun d’entre eux sont composé d’un titre
(de type « Sous Titre 1.x ») , de l’adresse vers laquelle
nous souhaitons pointé (ici Script Masters pour chaque option :)
) et enfin du type d’ouverture du lien (1 : Dans la fenêtre
active et 2 dans une nouvelle fenêtre. Nous ne traitons pas le cas
particulier des frames, mais rien ne vous empêchera en petit exercice
de traiter ce cas). Comme vous pouvez le remarquer, les caractéristiques
sont séparées par la barre verticale pour la même
raison que cité précédemment.
Puis, nous recommençons cette technique pour chacun des menus suivants.
Remarques :
- Veillez à indiquer le nombre exact de menu et sous-menus. Dans
le cas contraire, le script ne fonctionnera pas.
- Le caractère de séparation se trouvant à la fin
de chaque ligne n’est pas là par hasard. Il permet de séparer
le texte avec le caractère de saut de ligne (« \n »).
|
|
Localiser le script à générer |
| |
Tout d’abord, il faut avoir une vue d’ensemble du script
que nous souhaitons générer. Le notre possède le
schéma suivant :
| Fig. 2.1 : Schéma du tableau du script |
| <table width="200" border="0" cellspacing="1"
cellpadding="0">
<tr>
<td class="titre" onClick="clicMenu('1')">
<img name="image1" src="fleche2.gif" width="10"
height="10">Titre 1
</td>
</tr>
<tr id="menu1" style="display:none">
<td><table width="198" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td class="soustitre" onclick="ouvrirLien('http://www.script-masters.com','2')"
onMouseOver="changeCouleur(this,'#A7ADB7','#FFFFFF')"
onMouseOut="changeCouleur(this,'#C3C9D4','#000000')">Sous
Titre 1.1 </td>
</tr>
<tr>
<td class="soustitre" onclick="ouvrirLien('http://www.script-masters.com','2')"
onMouseOver="changeCouleur(this,'#A7ADB7','#FFFFFF')"
onMouseOut="changeCouleur(this,'#C3C9D4','#000000')">Sous
Titre 1.2 </td>
</tr>
</table>
</td>
</tr>
</table>
|
Nous pouvons voir que ce code html obéit à une certaine
hiérarchie et certaines données sont redondantes. Le but
du script que nous allons écrire est donc de respecter cette hiérarchie
(la redondance étant bien évidemment géré
par des boucles) et de remplacer les valeurs variables par celles que
nous allons récupérer dans le fichier.
Ci-dessous, un exemple de sous-menu dont certaines valeurs seront à
remplacer :
| Fig. 2.2 : Exemple de sous menu |
| <td class="soustitre"
onclick="ouvrirLien('http://www.script-masters.com','2')"
onMouseOver="changeCouleur(this,'#A7ADB7','#FFFFFF')"
onMouseOut="changeCouleur(this,'#C3C9D4','#000000')">Sous
Titre x.y
</td>
|
Les valeurs en italique seront donc à remplacer par celle que
nous piochons dans notre fichier.
|
|
Le script PHP |
| |
Avant de s’attaquer à ce script, il est préférable
de connaître les commandes simples de lecture d’un fichier.
Si nécessaire, aidez-vous du cours sur le sujet : Utilisation
des fichiers Voici en détail le script PHP utilisé
pour lire le fichier :
Il faut tout d’abord ouvrir le fichier « donnees.txt »
en vérifiant que celui-ci existe bien :
| Fig. 3.1 : Ouverture du fichier |
| // Ouverture du fichier en lecture
if($fp = fopen("donnees.txt","r")){
// Placez ici la suite du script
}
else
{
// Echec à l'ouverture
echo "Erreur : impossible d'ouvrir ".$fichier;
exit();
}
|
Les scripts vus ci-dessous seront à copier en lieu et place du
commentaire « Placer ici la suite du script ».
L’étape suivante consiste à lire la première
ligne du fichier. Celle-ci contient le nombre de menu à générer.
Nous allons donc récupérer cette valeur et la conserver
dans la variable $nbMenu :
| Fig. 3.2 : Lecture de la première ligne |
| // On lit la première ligne du fichier
if(!feof($fp))
$ligne = fgets($fp,4000);
else
printf("Fichier vide : génération du menu impossible.");
// On récupère le nombre de menu
$nbMenu = (int)$ligne;
|
Maintenant nous allons générer le code html du menu. Dans
un premier temps, il faut ouvrir le tableau du menu. Nous avons placé
le code dans une fonction d’entête (nous la détaillerons
plus tard). Il nous suffit donc de l’appeler :
| Fig. 3.3 : Entete du menu |
Puis, nous allons boucler sur chacun des menus :
| Fig. 3.4 : Lecture du fichier en boucle |
| for($i=1; $i<=$nbMenu && !feof($fp); $i++)
{
// Suite du script à placer ici
}
|
A la fin de la boucle, nous pourrons écrire la fin du tableau
qui est contenu dans la fonction enqueueMenu(). Puis, il est bien sûr
nécessaire de refermer le fichier.
| Fig. 3.5 : Fin du menu et fermeture du fichier |
| enqueueMenu();
fclose($fp); // Fermeture du fichier
|
Les scripts vus ci-dessous se dérouleront à l’intérieur
de la boucle for et seront à placer en lieu et place du commentaire
« Placer ici la suite du script ».
Une fois dans la boucle, il faut lire la ligne suivante du fichier. Il
s’agiras des informations concernant le menu numéro i (i
étant l’indice de la boucle).
Pour cette ligne, on la décomposera à l’aide de la
fonction explode() (Suivez ce lien pour plus d’informations sur
cette fonction : Scinder
une chaine de caractère).
On obtiendra ainsi le titre du menu et le nombre de sous menu. On passera
le titre et le numéro du menu à la fonction generationMenu
qui se chargera de les mettre en forme :
| Fig. 3.6 : Génération de la partie menu |
| // On lit les informations du menu $i
$ligne = fgets($fp,4000);
// On décompose les informations
$tabMenu = explode("|",$ligne);
$titreMenu = $tabMenu[0];
$nbSousMenu = (int)$tabMenu[1];
// On génère le code html associé
generationMenu($i,$titreMenu);
}
|
Une fois le menu générer, il faut s’occuper de ses
sous-menus. On place donc le code suivant à la suite du précédent
(toujours dans la boucle for) :
Toujours le même principe, on ajoute l’ente du sous menu
:
| Fig. 3.7 : En-tête du sous-menu |
| // Haut du sous menu
enteteSousMenu();
|
Puis on boucle afin de lire les lignes suivantes. Pour chaque ligne,
on récupère le titre, l’url et la cible. On passe
ces informations à la fonction generationSousMenu qui se chargera
de les mettre en forme (voir plus bas). Enfin on décrémente
le nombre de sous-menu. La boucle s’arrêtera dès que
son nombre sera nulle (égale à 0) :
| Fig. 3.8 : Génération des sous-menus |
| // Passage suivant : on lit les informations des sous-menus
while($nbSousMenu)
{
// On lit chaque ligne des sous-menus
$ligne = fgets($fp,4000);
// On décompose les informations
$tabSousMenu = explode("|",$ligne);
$titreSousMenu = $tabSousMenu[0];
$urlSousMenu = $tabSousMenu[1];
$cibleSousMenu = $tabSousMenu[2];
// On génère le sous menu
generationSousMenu($titreSousMenu,$urlSousMenu,$cibleSousMenu);
// On passe au menu suivant
$nbSousMenu--;
}
|
Enfin, on écrit le bas du tableau de sous menu à l’aide
de la fonction enqueueSousMenu() :
| Fig. 3.7 : En-tête du sous-menu |
| // Bas du tableau du sous menu
enqueueSousMenu();
|
|
|
Les fonctions de mise en forme |
| |
Les fonctions suivantes sont données à titre indicatif
et correspondent au menu étudié dans le tutorial javascript.
Si vous souhaitez utiliser le script PHP pour un autre menu, il vous faudra
modifier ces fonctions pour les adapter à votre script (elles peuvent
aussi ne rien faire).
| Fig. 4.1 : Fonctions de mise en forme du menu |
| function enteteMenu($nbMenu)
{
echo "<script>\n";
echo "var nbTotalMenu = ".$nbMenu.";";
echo "</script>";
echo "<table width=\"200\" border=\"0\"
cellspacing=\"1\" cellpadding=\"0\">";
}
function enqueueMenu()
{
echo "</table>";
}
function enteteSousMenu()
{
echo "<table width=\"198\" border=\"0\"
cellspacing=\"0\" cellpadding=\"0\">";
}
function enqueueSousMenu()
{
echo "</table>\n</td>\n</tr>\n";
}
function generationMenu($i,$titreMenu)
{
echo"<tr>\n";
echo" <td class=\"titre\" onClick=\"clicMenu('".$i."')\">\n";
echo" <img name=\"image".$i."\" src=\"fleche2.gif\"
width=\"10\" height=\"10\">".$titreMenu."\n";
echo" </td>\n";
echo"</tr>\n";
echo"<tr id=\"menu".$i."\" style=\"display:none\">\n";
echo" <td>\n";
}
function generationSousMenu($titreSousMenu,$urlSousMenu,$cibleSousMenu)
{
echo" <tr>\n";
echo" <td class=\"soustitre\" ";
echo"onclick=\"ouvrirLien('".$urlSousMenu."','".$cibleSousMenu."')\"
";
echo"onMouseOver=\"changeCouleur(this,'#A7ADB7','#FFFFFF')\"
";
echo"onMouseOut=\"changeCouleur(this,'#C3C9D4','#000000')\">".$titreSousMenu;
echo" </td>\n";
echo" </tr>\n";
}
|
|
|
Améliorations possibles |
| |
Couleurs et allures du menu
Si vous utilisez le script « tel quel », n’oublier
pas de consulter le tutorial sur ce menu (les liens se trouvent en haut
de cette page).
Vous récupérerez alors les feuilles de styles qui vous permettront
de modifier l’allure du menu.
Pour personnaliser davantage celui-ci, vous pouvez bien sûr modifier
d’en-tête et de génération. Vous aurez notamment
la possibilité de modifier les couleurs du menu.
Interface de mise à jour
Pour finaliser l’application, on peut imaginer une interface de
mise à jour permettant de modifier le fichier « donnees.txt
».
Voici quelques pistes pour sa conception :
- Penser toujours à permettre l’ajout, la suppression et
la mise à jour des menus et des sous menus.
- Lorsque vous modifier une valeur, il est conseiller de supprimer la
ligne et de la remplacer.
- La plus grande difficulté est de gérer le positionnement
des menus. Pensez à générer une interface permettant
à l’utilisateur de se situer facilement.
Pour vous aidez dans votre tache, consultez le tutorial sur l'utilisation
avancée des fichiers
|
|
Conclusion |
| |
Ce sera tout pour cette série de tutoriaux sur les menus dynamiques.
Vous devez vous être aperçu de la difficulté pour
concevoir et gérer de telles applications. Sachez cependant que
si vous avez mené à bien les opérations du début
à la fin, vous avez certainement acquis d’excellente base
pour la conception d’applications Javascript et PHP.
Si vous avez rencontré des difficultés, sachez que le script
complet (menu + génération de celui-ci en PHP est disponible
dans l’archive en téléchargement) vous y trouverez
également ce tutorial au format imprimable.
|
|
|
|
