Comment faire un menu qui se reproduit sur toutes les pages?

[Ymai]

[edit 06/09/2008] Pour ceux qui n'ont pas envie de lire de longues pages de discussion sur les errements de la procédure, on peut lire la version finale (?) là: http://www.geckozone.org/forum/viewtopi ... 215#462215 [/edit]

Bonjour
La question a souvent été posée:
Comment réaliser un menu dont le contenu puisse être modifié et qui, après modification, sera reproduit sur toutes les pages du site web, sans qu'il soit nécessaire d'éditer chaque page?

Ci-dessous, quelques éléments de réponse.
- Il est nécessaire d'avoir un hébergeur qui supporte le PHP
- Je pars de l'hypothèse que:
* le "Gestionnaire de sites" est configuré pour le traitement du site local
* l'excellent et indispensable NsmContext est installé.

- Etablir une page type pour le site web. Dans cette page, incorporer le menu dans un bloc.
<autopromo>
Voir, éventuellement, la structure proposée dans: http://info.sio2.be/NVU/1/2.php .
</autopromo>
Idéalement, ce bloc de menu doit avoir le style "height: auto" afin qu'il s'adapte à son contenu.

- Lorsque le menu est au point, se munir d'une pince de chirurgien et entrer dans l'onglet "Source" afin de procéder à la menuectomie.
- Repérer le fragment de code HTML qui correspond au menu. Par exemple, quelque chose comme

Code: Tout sélectionner

<ul>
  <li><a href="page1.html">item1</a></li>
  <li><a href="page2.html">item2</a></li>
  <li><a href="page3.html">item3</a></li>
  <li><a href="page4.html">item4</a></li>
</ul>


- Couper ce code vers le presse-papier

Préparer la page qui va contenir le menu et rien que le menu.
- Fichier > Nouveau
- Enregistrer la page vierge sous le nom "menu.inc.php"
- Fermer cette page sans y avoir rien apporté.

- Dans le gestionnaire de sites, faire un clic droit sur le nom du fichier "menu.inc.php" et l'ouvrir sous Notepad ou Context (par exemple) : merci NsmContext
- Dans l'éditeur choisi, coller le fragment de code correspondant au menu.
- changer tous les .html en .php
Le menu devient donc

Code: Tout sélectionner

<ul>
  <li><a href="page1.php">item1</a></li>
  <li><a href="page2.php">item2</a></li>
  <li><a href="page3.php">item3</a></li>
  <li><a href="page4.php">item4</a></li>
</ul>


- enregistrer et fermer l'éditeur externe.

Retour dans NVU à (aux) la page(s) qui doivent contenir le menu (nous avions laissé le patient sur la table d'opération).
- A l'endroit où le menu doit venir prendre place, insérer un fragment de code PHP: Insertion > Code PHP
- écrire

Code: Tout sélectionner

include ("menu.inc.php");

et fermer la boîte de dialogue
- enregistrer le fichier ainsi modifié et le publier avec FileZilla, par exemple
- uploader également le fichier "menu.inc.php"
- voir la page publiée
A la place du code PHP se présente le menu souhaité.
Faire de même pour toutes les pages (menuectomie et greffe d'include) du site web existantes ou à venir.

Lorsque de nouvelles pages sont ajoutées au site, revoir le fichier "menu.inc.php" pour qu'il pointe également vers ces pages-là. Plus rien d'autre à faire au niveau des pages existantes.

Remarques importante:
Chacune des pages qui contiendra l'include *doit* être munie de l'extension .php. Il faut donc probablement ré-enregistrer chacune de ces pages après insertion du code PHP.
Pour éditer les pages .php créées, il n'est plus possible de faire un double clic sur le nom du fichier dans le gestionnaire de site. A la place: clic droit sur le nom du fichier, sélectionner "Nouvel onglet" ou "Nouvelle fenêtre".
Attention, si la page est déjà ouverte, le Gestionnaire de sites se plante lamentablement!!


Voilà, ceci est certainement à retravailler.
Merci pour vos remarques, rectifications, modifications.
Ah, évidemment, s'il y avait un Wiki...

[edit]Exemple à télécharger et à tester:
http://sapajou.be/menu/
[/edit]

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.1) Gecko/2008072820 Firefox/3.0.1

[chinon37]

Super, le tuto... à faire encadrer à coté de Nvu
Merci, Ymai

[Kazé]

Je me permets d'ajouter mon grain de sel...

- Lorsque le menu est au point, se munir d'une pince de chirurgien et entrer dans l'onglet "Source" afin de procéder à la menuectomie.
- Repérer le fragment de code HTML qui correspond au menu [...]
- Couper ce code vers le presse-papier

Alternative sans passer par l'onglet "source" :

• cliquer n'importe où dans le menu ;
• dans la barre d'état, sur la balise <ul> :
  * clic droit, "Code HTML..." (nécessite HandCoder)
  * ou clic gauche, menu Insertion > Code HTML...
• sélectionner tout, copier et fermer la fenêtre "Insertion du code HTML" (Ctrl+A, Ctrl+C, Esc).

Ca permet d'être sûr qu'on a bien pris toute la liste, de <ul> à </ul> inclus.

Préparer la page qui va contenir le menu et rien que le menu.
- Fichier > Nouveau
- Enregistrer la page vierge sous le nom "menu.inc.php"
- Fermer cette page sans y avoir rien apporté.

Attention, ce fragment de code ne doit pas contenir d'élément <html>, <head>, ou <body> ; je pense qu'il vaut mieux utiliser un éditeur texte pour coller le code.

Dans ma version de travail de HandCoder, j'ai ajouté un item "Enregistrer sous..." dans le menu contextuel de la barre d'état, pour enregistrer un élément HTML dans un fichier texte (ça réduit le nombre d'actions nécessaires). J'essaierai de la mettre en ligne rapidement.

Nota : HandCoder peut éditer en WYSIWYG le fragment "menu.inc.php" sans le corrompre (il faut basculer une préférence cachée). Ca permet de tout faire sans ouvrir d'éditeur texte.

Retour dans NVU à (aux) la page(s) qui doivent contenir le menu (nous avions laissé le patient sur la table d'opération).
- A l'endroit où le menu doit venir prendre place, insérer un fragment de code PHP: Insertion > Code PHP
- écrire

Code: Tout sélectionner

include ("menu.inc.php");

et fermer la boîte de dialogue

Alternative qui utilise la barre d'état :

• cliquer n'importe où dans le menu à remplacer ;
• dans la barre d'état, clic gauche la balise <ul> :
• Insertion > Code PHP, insérer le code.

Ca remplace tout le menu <ul> par le code PHP.

Merci pour ce tuto ! Je vais tâcher de poster une version de HandCoder qui permette de faire toute la manip sans éditeur texte.

[Quent1]

euh, dsl, mais les url fontionnent plus...

et autre chose aussi, est-on vraiment obligé de installer nmscontent ?

[chinon37]

Attention, on ne peut pas voir l'effet de "include" directement dans le navigateur en local sans avoir installer une base de données.
Pour voir le résultat, soit tu charges ta page php chez ton hebergeur après avoir activer la fonction php, soit tu utlises un logiciel comme easyphp...n'est ce pas, Kazé
<fayot> NmsContext, c'est vraiment un plus </fayot>

[Ymai]

<fayot> NmsContext, c'est vraiment un plus </fayot>

Faux!
Ce n'est pas un "plus", c'est obligatoire.
Un de ces jours, quand j'aurai un peu de temps, je me fendrai d'un post politiquement incorrect ayant pour thème: "NVU tout nu, quel intérêt?".

[Kazé]

Attention, on ne peut pas voir l'effet de "include" directement dans le navigateur en local sans avoir installer une base de données.
Pour voir le résultat, soit tu charges ta page php chez ton hebergeur après avoir activer la fonction php, soit tu utlises un logiciel comme easyphp...n'est ce pas, Kazé

Non pas une base de données, mais juste un serveur PHP.
C'est l'occasion de recopier ce que je t'avais écrit dans le sujet HandCoder :

Nota :

• Contrairement à une page complète, l'extension ".inc.php" du menu n'a aucune importance : on peut aussi bien utiliser html, tpl, txt, xml ou dieu sait quoi encore. Personnellement je n'aime pas utiliser html ni php comme extension pour un fragment HTML...
• "include" fontionne en relatif par rapport à la page où il est appelé. Attention, il utilise une adresse de fichier : /menu.inc.php fait référence à la racine du disque sur le serveur web, et non à la racine du site. Nuance !
• Une page contenant du code PHP doit porter l'extension 'php' (et non html).
• Pour faire fonctionner un "include" ou tout autre code serveur (PHP), il faut disposer d'un serveur PHP ! En clair, si on fait une prévisualisation avec Firefox :
  • à l'adresse file:///C:/Monsite/index.php, on ne voit rien (le code PHP est ignoré) ;
  • à l'adresse http://monsite.com/index.php, ça marche !
  Pour travailler localement tout en utilisant du PHP, on peut installer EasyPHP sous Windows : c'est un serveur WAMP (Apache + MySQL + PHP sous Win32) prêt à l'emploi.

En espérant que ça t'aide un peu ! Le top serait qu'une bonne âme fasse un tutoriel pour inclure un menu en PHP avec HandCoder...

Sur le coté "indispensable" de NsmConText pour cette manip, je ne sais pas quoi dire !
Je ne vais pas cracher sur une si belle pub, non ?

[chinon37]

Non pas une base de données, mais juste un serveur PHP

Autant pour moi, J'ai encore beaucoup à apprendre

[NsmContext]Ce n'est pas un "plus", c'est obligatoire.

C'est vrai; j'imagine mal travailler maintenant avec Nvu sans la "suite d"extensions" de Kaze. Ce qui fait l'intérêt de Nvu, ce sont tous ces petits bouts qui sont ajoutés. Dommage que Htmlheader bugue un peu car c'est aussi une extension qui améliore l'ergonomie (en autre, pour ouvrir les feuilles de style internes grâce à sa barre d'outils spécifiques... oui, oui, oui, ça fait une barre de plus.... mais bientôt on aura des écrans 25", alors! Calimo, si tu peux faire pression sur le développeur de cette ext pour qu'il la peaufine, merci d'avance!

[Kazé]

Non pas une base de données, mais juste un serveur PHP

Autant pour moi, J'ai encore beaucoup à apprendre

On fait souvent la confusion, tellement le trio Apache / mySQL / PHP semble indissociable.

<html Header> Calimo, si tu peux faire pression sur le développeur de cette ext pour qu'il la peaufine, merci d'avance!

C'est une extension déjà ancienne, peut-être même la toute première qui ait été sortie pour Nvu. Son développement semble arrêté... Si tu as l'e-mail de son auteur (Simon Wunderlin), je pourrais prendre contact avec lui pour savoir s'il accepterait des patches ?

[Quent1]

c'est quoi le gestionnaire des sites ?

[chinon37]

F9 ou affichage barre d'outils
en paramétrant le gestionnaire de site avec l'adresse de ton site, tu peux ainsi accéder directement à tous les fichiers de ce site (pages html, photos, feuilles de style, etc)
Tu peux aussi le paramètrer en local pour avoir directement accès aux dits fichiers présents sur ton dique dur ( par exemple si tu veux créer tout ton site sur ton disque dur avnat de le transférer chez ton hébergeur)
Ensuite, l'installation de l'extension "nsmcontext" (je prends désormais 10% sur les ventes ) permet un usage élargi du gestionnaire de site

[Do-IT]

Oups, tromper de sujet

[Ymai]

Sujet remis en forme dans la FAQ.

[Kazé]

Joli. J'irai y mettre mon grain de sel

[pasdechance]

Il faut bien préciser pour les gens comme moi que quand il faut rajouter la partie en php qu'il faut le faire dans l'onglet html et non source si on veut pouvoir le faire