[Résolut] Système de menu vertical déroulant automatique

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : [Résolut] Système de menu vertical déroulant automatique

Re: Système de menu vertical déroulant automatique

par Cyrano » 19 sept. 2011, 09:30

Tu as laissé quelques éléments illogiques et l'indentation serait à revoir aussi.

Observe attentivement ton code : qu'est-ce qui va être affiché si ta requête ne retourne aucun résultat ?

Quant à l'indentation, pour te repérer facilement, veille à ce qu'un accolade ouvrante soit à la même position que l'accolade ouvrante qui lui correspond, et limite l'indentation à 4 espaces, pas 8, 12 ou -4 comme ici.

Re: Système de menu vertical déroulant automatique

par Fre3z69 » 19 sept. 2011, 09:10

Voici ce que j'ai fait, par l'aide de Cyrano

J'ai essayer de commenter le tout afin que vous puissiez comprendre, j’espère que ça seras bien expliqué.
<?php
$Hote = "VOTRE HOTE";
$Base = "VOTRE BASE";
$BaseLogin = "VOTRE LOGIN";
$BasePassword = "VOTRE MDP";
$mysql_link = mysql_connect($Hote, $BaseLogin, $BasePassword);
mysql_select_db($Base);

//on sélectionne la base de donnée
$sql  = "SELECT ".
        "  p.Menu, ".
        "  p.MenuUrl, ".
        "  t.SousMenu, ".
        "  t.SousMenuUrl ".
        "FROM `Menu` AS p ".
        "  LEFT OUTER JOIN `SousMenu` AS t ON p.Id = t.MenuId ".
        "ORDER BY p.Id, t.Id ASC";
$res = mysql_query($sql);

$menu               = null;
$listeOuverte       = false;
$sousListeOuverte   = false;
$nbl = mysql_num_rows($res);
// Si il n'y a pas de données
if($nbl == 0)
{
    $sMenuHtml = <<<CODE_HTML
<div id="menu">
    <ul id="menu">
      <li class="imageSeparateur"><!--ne placer rien dans ce li --></li>
      <li><a href="index.php">Accueil</a></li>
    </ul>
</div>

CODE_HTML;
    echo $sMenuHtml;
}
//sinon
else
{
    // on ouvre la balise <ul> des menus, et si il y a des "<li></li>" de menus "fixés", on les place ici.
    $sMenuHtml = <<<HTML
<div id="menu">
    <ul id="menu">
      <li><!--ne placer rien dans ce li --></li>
      <li><a href="index.php">Accueil</a></li>
      <!-- <li></li> fixés de menus -->

HTML;
    //on boucle afin de construire la liste des liens
    while(false !== ($result = mysql_fetch_assoc ($res)))
    {
        // On vérifie que le menu est le premier de la liste, SACHANT qu'on sait qu'il y 'en a.
        if ($menu != $result['Menu'])
        {
            // Si la liste des menus est ouverte
            if(true === $listeOuverte)
            {
                // Si la liste des sous-menus est ouverte
                if (true === $sousListeOuverte)
                {
                    // on la ferme la liste des sous-menus en définissant $sousListeOuverte sur FALSE
                    $sousListeOuverte = false;
                    // on ferme la balise </ul> de sousmenu
                    $sMenuHtml .= <<<HTML
          </ul>

HTML;
                }
                //on la ferme la liste des menus en définissant $listeouverte sur FALSE
                $listeOuverte = false;
                // on ferme la balise </li> de menu
                $sMenuHtml .= <<<HTML
      </li>

HTML;
            }
            $menu = $result['Menu'];
            // on donne une valeur TRUE à $listeouverte
            $listeOuverte = true;
            // on définit l'url des menus (si il y'en à tjs, sinon faire un if else à cette endrois)
            $url='index.php'.$result['MenuUrl'];
            // on ouvre la balise <li> de menu, et on affiche les menus
            $sMenuHtml .= <<<HTML
      <li>
        <a href="{$url}">{$menu}</a>

HTML;
            //Si il y a des sousmenus
            if (!is_null($result['SousMenu']))
            {
                //on définit $souslisteouverte sur TRUE
                $sousListeOuverte = true;
                //on ouvre la balise <ul> des sousmenu attachés au menu parent
                $sMenuHtml .= <<<HTML
          <ul>

HTML;
            }
        }
        // on s'assure qu'il y a un sous-menu
        if(!is_null($result['SousMenu']))
        {
            // on définit l'url des sousmenus
            $surl='index.php?s='.$result['SousMenuUrl'];
            //on ouvre la balise <li> des sousmenu, on affiche les sousmenus sans un <a> et on ferme la balise </li>
            $sMenuHtml .= <<<HTML
            <li class="sousmenu">
              <a class="sousmenu" href="{$surl}">{$result['SousMenu']}</a>
            </li>

HTML;
        }
    }
    // si la liste de menu est ouverte
    if (true === $listeOuverte)
    {
        // on ferme la dernière balise </li> des menus, fermeture non traitée dans la boucle
        $sMenuHtml .= <<<HTML
      </li>

HTML;
    }
    // une fois la boucle terminée, on ferme la balise </ul> des menus, et éventuellement la balise </div>
    $sMenuHtml .= <<<HTML
    </ul>
</div>

HTML;
}
// on affiche le résultat via la variable $sMenuHtml
echo $sMenuHtml;
?>
Voila, je remercie Cyrano pour l'aide apporté, et j’espère que ce script serviras pour d'autre, ou du moins d’exemple afin de réussir là où j'ai échoué.

Merci pour tout

Cordialement

Édité afin de corriger une erreur

Re: Système de menu vertical déroulant automatique

par Cyrano » 16 sept. 2011, 11:24

Bon ok, on va partir de la base, voici à quoi ton code HTML devrait ressembler une fois correctement généré :
    <div id="menu">
      <ul>
        <li>
          <a href="index.php?s=Menu1">Menu1</a>
          <ul>
            <li>
              <a href="index.php?s=Menu1">Menu1SousMenu1</a>
            </li>
            <li>
              <a href="index.php?s=Menu1">Menu1SousMenu2</a>
            </li>
            <li>
              <a href="index.php?s=Menu1">Menu1SousMenu3</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="index.php?s=Menu2">Menu2</a>
          <ul>
            <li>
              <a href="index.php?s=Menu2">Menu2SousMenu1</a>
            </li>
            <li>
              <a href="index.php?s=Menu2">Menu2SousMenu2</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="index.php?s=Menu3">Menu3</a>
          <ul>
            <li>
              <a href="index.php?s=Menu3">Menu3SousMenu1</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="index.php?s=Menu4">Menu4</a>
        </li>
      </ul>
    </div>
Pour le besoin, puisque c'est une maquette, j'ai ajouté un Menu4 sans sous-menu. Observe bien et note la manière d'imbriquer des listes à puces. Là, c'est du HTML, il est important que tu veilles à ce que ce code soit conforme et valide, donc par exemple, tes balises de liens avec <a />...</a>, c'est non conforme.

Ensuite, à partir de ça, tu as besoin de trois points de repères :
  1. Un indicateur te permettant d'identifier le menu traité : ça, c'est déjà là;
  2. Un indicateur (booléen) pour savoir si une liste est ouverte ou non;
  3. Un indicateur (booléen) pour savoir si une sous-liste est ouverte ou non;
À toi la main : note bien que j'ai disposé le code HTML de cette manière exprès, c'est plus clair et ça te permet de voir correctement les points d'insertions éventuelles.

Essaye déjà d'identifier les éléments et si tu as une interrogation, ben pose la question.

Re: Système de menu vertical déroulant automatique

par Fre3z69 » 16 sept. 2011, 11:13

Je tiens avant tout à te remercier de l'aide apportée, mais faut que tu sache que j'ai jamais, jamais fait ce genre de code.

J'ai déjà développé des listes, mais jamais avec ce genre de requêtes.

Je suis complétement perdu, et c'est pas faute de réfléchir, mais là, mes connaissances en php me font arriver à la limite de mes capacités de dev.

J'ai compris et apprécier ta façon de me m'indiquer les choses afin que j'apprenne, mais là, STP, j'ai besoin de solution concrète, je sature, et je sais plus où donner de la tête, j'ai pas l’esprit logique, car l'agencement de la requête me perturbe.

Le fait est que je vois comment faire, j'ai compris ce que tu as essayer de me dire, mais niveau ressource, j'en est plus.

le début, je sais le faire, (enfin définir si on à un sous menu attaché au menu, si oui, l'a t'on déjà traiter, si oui on passe à la suite, sinon on l'affiche en commençant à mettre en place le HTML permettant de dire qu'il s'agit d'un SousMenu d'un <ul></ul> dans un autre <ul></ul>.

Mais pour la suite, (précisément le second IF (if ($menu==$result['Menu']) ) je suis perdu.

J'obtiens ceci, preuve qu'il manque bien la fin, que je n'arrive pas à faire.
<div id="menu">
<ul>
			<li><a href="index.php?s=menu1" />Menu 1<a></li>
					<ul>
					<li><a href="index.php?s=Menu1SousMenu1" />Menu1SousMenu 1</a></li>
				<li><a href="index.php?s=Menu1SousMenu2" />Menu1SousMenu 2</a></li>
				<li><a href="index.php?s=Menu1SousMenu3" />Menu1SousMenu 3</a></li>

			<li><a href="index.php?s=Menu2" />Menu 2<a></li>
					<ul>
					<li><a href="index.php?s=Menu2SousMenu1" />Menu2SousMenu 1</a></li>
				<li><a href="index.php?s=Menu2SousMenu2" />Menu2SousMenu 2</a></li>
			<li><a href="index.php?s=" />Menu 3<a></li>
					<ul>
					<li><a href="index.php?s=Menu3SousMenu1" />Menu3SousMenu 1</a></li>

</ul>
</div>
Désolé si tu pense que je te fait perdre ton temps, j'ai pas pour habitude de le faire, mais là j'ai besoin de ce script, il me manque plus que ça et j'ai "fini" mon site.
Si tu peux plus, ou veux plus aider, je comprendrais, personnellement à ta place c'est fort probable que j'aurais abandonné.

En tous cas, vraiment merci, et encore désolé.

Cordialement

Re: Système de menu vertical déroulant automatique

par Cyrano » 16 sept. 2011, 09:09

:roll: Décidément tu es plus têtu que trois douzaines de bourriques : qu'est-ce que je t'ai dit et répété plusieurs fois à propos du second if() dans ta boucle ?

Ensuite je t'ai indiqué autre chose : partir du HTML, donc construis une maquette avec un code HTML propre et correctement aligné. Sers-toi ensuite de ce code pour insérer les éléments dans ton code PHP en remplaçant les valeurs en dur de la maquette par les variables de la boucle PHP. Si tu ne fais pas ça, tu risques fort d'y être encore à Noël en cherchant encore comment faire... :-k

En clair, ben ... recommence, mais sans oublier la moitié des éléments en cours de route :-*

Re: Système de menu vertical déroulant automatique

par Fre3z69 » 16 sept. 2011, 08:52

Ok, merci

Alors voila, j'ai obtenu un code html, très biard, il me manque la fin en fait.

Je pense que pour commencer à ouvrir la liste c'est bon mais pour la fermer j'ai plus d'idées.

Voici le résultat obtenu (attention, c'est sale Oo)
<div id="menu">
<ul>
	<li>
	<a href="index.php?s=menu1" />Menu 1<a></li>
		<ul>
			<li><a href="index.php?s=Menu1SousMenu1" />Menu1SousMenu 1</a></li>
			<li><a href="index.php?s=Menu1SousMenu2" />Menu1SousMenu 2</a></li>
		</ul>
		<li><a href="index.php?s=Menu1SousMenu3" />Menu1SousMenu 3</a></li>
</ul>
	<li><a href="index.php?s=Menu2" />Menu 2<a></li>
<ul>
	<li><a href="index.php?s=Menu2SousMenu1" />Menu2SousMenu 1</a></li>
	<li><a href="index.php?s=Menu2SousMenu2" />Menu2SousMenu 2</a></li>
</ul>
<li><a href="index.php?s=" />Menu 3<a></li>
<ul>
	<li><a href="index.php?s=Menu3SousMenu1" />Menu3SousMenu 1</a></li>
</ul>
</div>
Voici le code php que j'ai fait, je pense que le début est bon, mais pas la fin.
	$sql = "SELECT * FROM `Menu` AS p LEFT OUTER JOIN `SousMenu` AS t ON p.Id = t.MenuId ORDER BY p.Id, t.Id ASC;";
	$res = mysql_query($sql);
	$menu=NULL;
	$smenu=NULL;
	while ($result = mysql_fetch_assoc ($res))
	{
		if ($menu!=$result['Menu'])
		{
			$menu = $result['Menu'];

				$url='index.php?s='.$result['MenuUrl'];


			echo '<li><a href="'.$url.'" />'.$menu.'<a></li>';
			
			// on vérrifie que SousMenu est bien le premier de la liste
			if ($result['SousMenu']!=$smenu)
			{
				// on donne pour valeur à smenu, result_SousMenu
				$smenu=$result['SousMenu'];
				// on affiche le premier SousMenu, en initialisant la liste
				$surl='index.php?s='.$result['SousMenuUrl'];
				// on affiche
				echo '<ul><li><a href="'.$surl.'" />'.$smenu.'</a></li>';
			}
		}
		if ($menu==$result['Menu'])
		{
			// On vérifie que SousMenu n'a pas était déja traiter
			if ($result['SousMenu']!=$smenu)
			{
			// on définit une nouvelle variable, et on lui donne pour valeur à smenu, result_SousMenu
			$sousm=$result['SousMenu'];
			$surl='index.php?s='.$result['SousMenuUrl'];
			// on affiche
			echo '<li><a href="'.$surl.'" />'.$sousm.'</a></li>';
				//si malgrès tout, tous les SousMenu ont étaient traités, alors on feme la liste
				if ($result['SousMenu']==$sousm)
				{
				echo '</ul>';
				}			
			
			}
		}
	}
?>
Pour la fin j'ai penser faire un truc du genre
.......	(code similaire à celui du dessus)
	
				//si malgrès tout, tous les SousMenu ont étaient traités, alors on feme la liste
				if ($result['SousMenu']==$sousm)
				{
				echo '</ul>';
				}			

			}
/* ICI L'idée */
			// On vérifie que SousMenu n'a pas était déja traiter			
			if ($result['SousMenu']==$smenu)
			{
				echo '<li><a href="'.$surl.'" />'.$smenu.'</a></li></ul>';
			}
Suis je sur le bonne voie?

Que faire à la fin?

Merci

Re: Système de menu vertical déroulant automatique

par Cyrano » 16 sept. 2011, 08:21

SI tu ne fais pas des essais de code, tu ne verras pas le résultat et tu comprendras d'autant moins quels oublis ou erreurs tu aurais pu faire.

Tu as déjà un tableau de données avec ta liste : et tu sais déjà que tu dois la traiter dans une boucle... continue, je peux t'indiquer le chemin, certainement pas le parcourir à ta place ;)

Re: Système de menu vertical déroulant automatique

par Fre3z69 » 16 sept. 2011, 08:13

Je ne vois pas comment faire.

Peux tu me monter vite fait un exemple, afin que je puis voir les possibilités que je peux avoir?

J'ai essayer de comprendre.

J'ai est déduit, que avant même de passer à l'étape, if ($menu==$result['Menu']), dans l'étape if ($menu!=$result['Menu']) il faut faire quelque chose, mais concrètement, je vois pas.

Merci

Re: Système de menu vertical déroulant automatique

par Cyrano » 16 sept. 2011, 07:42

Salut,
c'est presque ça : en fait, c'est plus simple que ça : soit il y a des sous-menu pour le menu considéré, soit il n'y en a pas, en d'autres termes, le nombre de sous-menu est-il supérieur à zéro, justifiant la création d'une liste imbriquée.

Donc si on revient aux questions : quand ouvrir une sous-liste ? N'oublie pas qu'à chaque ligne de données, si tu es sur un nouveau menu, tu traiteras en réalité deux liens : celui du menu et le premier sous-menu s'il est non null et au tour suivant, si le menu est le même, tu l'ignores et tu ne traites que le sous-menu.
Quand fermer la sous-liste ? D'abord avant de fermer l'item du menu en cours, et donc quand fermer ce dernier ? Lorsque tu traites un nouveau menu à l'exception du premier puisque là, aucune liste n'a encore été créée.

Je te laisse continuer sur ce schéma, fais des essais en restant logique.

Re: Système de menu vertical déroulant automatique

par Fre3z69 » 16 sept. 2011, 07:19

Salut, alors voilà, j'ai un peux réfléchit, et j'ai un doute.
Voici ce que je pense qu'il faut faire (enfin obtenir au final):

Il faut vérifier combien il y a de SousMenu par Menu

Si il y en a que un, on affiche simplement <ul><li></li></ul>
Si il y en a plus que un, alors là il faut savoir le quel est le premier:
- Pour le premier, on affiche <ul><li></li>
Ensuite,
- Si il y en a deux, alors pour le deuxième, on affiche <li></li></ul>
- Si il y en a trois où plus, alors pour le deuxième (ou ceux entre le premier et le troisième, on affiche <li></li> et pour le dernier, on affiche <li></li></ul>

Je pense que c'est cela, mais là il vas falloir compter le nombre de SousMenu dans la requette non?

Merci de ton aide

Re: Système de menu vertical déroulant automatique

par Fre3z69 » 14 sept. 2011, 12:14

Ouai je vais stopper pour aujourd'hui, (enfin jusqu’à ce que l'envie m'en reprenne)

Déjà j'ai appris pas mal, et tu m'a même fait voir comment interpréter les is_null()

ce que je ferrais, j'écrirais les question en langue française, je te les montrerais avec si je peux, les éventuelles traduction en php ^^

En tous cas merci à toi, c'est vrai qu'il faut avoir le sens logique pour ça, et comme à dit un amis à son élève, tu utilise ta mémoire, hors ici(maths pour lui, php pour moi) il faut en premier utiliser la logique.

Merci de ton aide, je pause un peux, au moins, grâce à toi, j'ai déjà le début de ce que je voulais, j'en est même profiter pour le mettre dans le choix des menus liées avec les pages de descriptions, mais plus simple, c'est <select><option> ^^.
On va arriver à le faire ce fichu menu.

Merci

Très cordialement

Re: Système de menu vertical déroulant automatique

par Cyrano » 14 sept. 2011, 11:46

Je reviens sur un truc : ton second if n'a pas de sens.

Il faut que tu prennes le problème global et que tu l'atomise en problèmes à réponses binaires. Je vais illustrer avec tout à fait autre chose pour que tu saisisses bien le principe général. Je prends cet exemple lorsque je m'adresse à des non informaticiens qui me disent « Ho tu sais moi, je n'y connais strictement rien en programmation », à quoi je leur réponds qu'ils font de la programmation tous les jours que Dieu fait sans même s'en rendre compte.

Supposons un instant, à midi tu as envie de te faire des frites : Sans même y réfléchir consciemment, tu vas te poser une succession de questions de base : « Est-ce que j'ai des pommes de terre ? » : si la réponse est non, il faudra te rabattre sur une boite de petits-pois, mais si c'est oui, alors tu vas passer à la question 2 : « Est-ce que j'ai de l'huile pour frire mes patates ? » : Non ? alors je ferai de l purée; Oui ? « Est-ce que j'ai un couteau pour couper mes frites ? » etc, etc... et tout ça en quelques fractions de secondes.

Revenons à ton menu, comme quoi on est toujours dans la bouffe : tu dois ralentir un peu le rythme cérébral pour isoler les bonnes questions, parce que je suis sur que tu sais très bien classer toi-même les éléments HTML pour construire un menu, mais il faut traduire ça en code pour la machine qui ne comprend ni le français ni l'anglais ni aucune langue humaine, elle ne capte que des zéro et des un. Tu as quand même entre les deux un langage qui s'appelle en l'occurrence le PHP qui te permet de définir des boucles while, for ou foreach et des alternavives if/else : rien qu'avec ça, tu peux avancer. Il faut donc définir quelles sont les questions à poser et traduire ça en questions PHP. Lorsque tu te demandes si il existe un sous-menu pour le menu courant, la même question en PHP serait « if(!is_null($result['SousMenu'])) » et la réponse au lieu d'être oui ou non sera TRUE ou FALSE et en fonction de cette réponse, tu pourras passer à l'étape suivante, soit c'est FALSE et tu affiches le sous-menu, soit c'est TRUE et tu passes à la ligne de résultat suivante. Mais tu dois aussi insérer du code HTML avec des balises ouvrantes et les mêmes fermantes. Quand ouvrir une balise, quand la refermer ? Quelles sont les conditions pour définir l'un ou l'autre ? C'est à cette gymnastique intellectuelle que tu dois te livrer pour avancer. Le cerveau humain non seulement n'utilise pas le même langage que la machine mais va largement plus vite, sauf qu'il n'existe pas encore d'interface cerveau-humain/machine pour traduire automatiquement, il faut le faire pour la machine à la main en lui traduisant dans son langage.

Re: Système de menu vertical déroulant automatique

par Fre3z69 » 14 sept. 2011, 11:23

Je vois pas, je bloque,
j'ai tenté
				//si on à pas encore de valeur à smenu, on l'initialise
				if ($smenu!=$result['MenuMenu'])
				{
					$smenu=$result['MenuMenu'];
					echo '<ul>';
				}
				//on affiche
					$surl='index.php?s='.$result['SousMenuUrl'];
					$sousmenu=$result['SousMenu'];
					echo '<li><a href="'.$surl.'" />'.$sousmenu.'</a></li>';
				//sinon
				if ($smenu==$result['MenuMenu'])
				{
					echo '</ul>';
				}
ça reviens au même, même pire

Je ne vois pas trop comment agencer.

Peux tu me metre sur la piste STP?

Re: Système de menu vertical déroulant automatique

par Cyrano » 14 sept. 2011, 10:40

Déjà il faudrait faire du HTML convenable.

Les listes ordonnées ou non s'imbriquent fort bien, mais pas n'importe comment, voici à quoi devrait ressembler ton code :
<div id="menu">
    <ul>
        <li>
            <a href="#">Menu 1</a>
            <ul style="">
                <li>testmenu 2</li>        
                <li>testmenu 1</li>
            </ul>
        </li>
        <li>
            <a href="#">Menu 2</a>
            <ul style="">
                <li>testmenu 1</li>
            </ul>
        </li>
        <li>
            <a href="#">Menu 3</a>
        </li>
    </ul>
</div>
C'est pour ça que je t'ai suggéré plus tôt de commencer par la fin : c'est ça que tu dois mettre au point dès le départ, avant même de travailler sur tes requêtes SQL : que dois-tu obtenir en bout de ligne ? Si tu as la réponse, alors remonte d'un cran et développe le code qui va te permettre de l'obtenir.

Là tu as déjà la requête et l'essentiel du code d'implémentation. Il te reste à intégrer ça avec le code HTML correct.

Re: Système de menu vertical déroulant automatique

par Fre3z69 » 14 sept. 2011, 10:29

oui, sauf que..

Comment ferais tu pour afficher tous les SousMenu liées au même Menu dans le même <ul>??

Voici le rendu HTML du code actuel, on vois bien que à chaque fois ça remet le <ul>
<div id="menu">
<ul>
	<li><a href="#">Menu 1</a></li>
		<ul style="">
			<li>testmenu 2</li>	
		</ul>
		<ul style="">
			<li>testmenu 1</li>
		</ul>
	<li><a href="#">Menu 2</a></li>
		<ul style="">
			<li>testmenu 1</li>
		</ul>
	<li><a href="#">Menu 3</a></li>
</ul>
</div>
J'ai essayer de faire un système comme on a fait avec $menu=null; mais je ne suis arrivé à rien de concret.

Merci