Menu et sous menu déroulant

**feldi** · 04/01/2011, 11h28

Bonjour,

dans l'optique de la refonte d'un site internet, j'aimerais changer le menu.
Ce que j'aimerais faire c'est une sorte de menu déroulant, horizontal et sous l'image du site. En cliquant sur la catégorie souhaitée, on obtient une liste comportant les sous-catégories.
Puis en cliquant sur les sous-catégories, la page appelée s'ouvre.

1er problème : comment puis-je faire ce menu en utilisant une base de données ?

Code sql :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
create table sommaire(
	numSommaire int(10) NOT NULL AUTO_INCREMENT,
	nomSommaire VARCHAR2(25),
	CONSTRAINT Pk_Sommaire PRIMARY KEY (numSommaire));
INSERT INTO SOMMAIRE VALUES (1, 'Accueil');
INSERT INTO SOMMAIRE VALUES (2, 'Eau');
INSERT INTO SOMMAIRE VALUES (3, 'Electricité');
INSERT INTO SOMMAIRE VALUES (4, 'Eclairage public');
INSERT INTO SOMMAIRE VALUES (5, 'GRD');
INSERT INTO SOMMAIRE VALUES (6, 'Contact');
INSERT INTO SOMMAIRE VALUES (7, 'Liens utiles');
INSERT INTO SOMMAIRE VALUES (8, 'Relevés');

J'ai bien entendu la fonction de connexion à la base

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$base = mysql_connect('localhost', 'root', '');  
		mysql_select_db('ume', $base);
		$req = mysql_query("SELECT * FROM sommaire");
		$requete = mysql_query($req, $base);

Si vous pouviez m'aider, merci ! Je posterais mes autres problèmes ensuite.

**Benjamin Delespierre** · 04/01/2011, 12h11

Personnellement je ne le verrait pas comme ça. Je verrais plutôt une table catégories:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
CREATE TABLE IF NOT EXISTS `categories` (
  `id` BIGINT(25) NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(90) NOT NULL,
  `description` TEXT NULL,
  `parent` BIGINT(25) NULL,
  PRIMARY KEY (`id`),
  UNIQUE (`name`)
) ENGINE=innodb;

Ainsi tu peux créer tes menu en fonction des catégories avec des catégories parentes:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
INSERT INTO `categories` (`id`,`name`, `description`) VALUES
(0, 'index', 'Sommaire'); 
INSERT INTO `categories` (`id`,`name`, `description`, `parent`) VALUES
(1, 'cat1', 'Première catégorie', 0),
(2, 'cat1', 'Seconde catégorie', 0),
(3, 'cat1', 'Troisième catégorie', 0),
(4, 'cat11', 'Première catégorie > sous categorie 1', 1),
(5, 'cat12', 'Première catégorie > sous categorie 2', 1),
(6, 'cat13', 'Première catégorie > sous categorie 3', 2),
(7, 'cat21', 'Seconde catégorie > sous categorie 1', 0);

Ensuite, tu n'a plus qu'a construire le menu

--- EDIT: j'ai fait ça à l'arache et ça marche pas en fait >>> voir 2 post plus loin

**feldi** · 04/01/2011, 12h18

J'ai édité le titre, il est plus juste ainsi.

Je ne comprends pas trop les bases que tu me proposes

Est-ce que tu peux un peu expliciter ?

**stealth35** · 04/01/2011, 12h20

Envoyé par feldi

J'ai édité le titre, il est plus juste ainsi.

Je ne comprends pas trop les bases que tu me proposes

Est-ce que tu peux un peu expliciter ?

dans ta base ou voit on les sous catégories ?

**feldi** · 04/01/2011, 12h25

Ah bah oui, c'est exact.
Merci. Je vais donc changer mes bases.

En fait je l'avais déjà fait mais je pensais pas que ça me servirait. :/

Code sql :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
create table sousCateg(
	numSousCateg int(10) NOT NULL AUTO_INCREMENT,
	nomSousCateg VARCHAR2(25),
	numSommaire int(10) NOT NULL,
	CONSTRAINT Pk_sousCateg PRIMARY KEY (numSousCateg)
	CONSTRAINT Fk_sousCateg FOREIGN KEY (numSommaire) REFERENCES SOMMAIRE (numSommaire)
	);
 
-- Accueil
INSERT INTO sousCateg VALUES (1, 'Présentation générale', 1);
-- Eau
INSERT INTO sousCateg VALUES (2, 'Présentation technique', 2);
INSERT INTO sousCateg VALUES (4, 'Contrôle sanitaire', 2);
INSERT INTO sousCateg VALUES (5, "Tarif de l\'eau potable", 2); 
INSERT INTO sousCateg VALUES (6, 'Règlement de service', 2);
INSERT INTO sousCateg VALUES (7, 'Rapport annuel', 2);
INSERT INTO sousCateg VALUES (8, 'Relevé de vos index', 2);
-- Electricité
INSERT INTO sousCateg VALUES (9, 'Présentation technique', 3);
INSERT INTO sousCateg VALUES (10, 'Tarifs règlementés', 3);
INSERT INTO sousCateg VALUES (11, 'Infos EJP', 3);
INSERT INTO sousCateg VALUES (12, 'Infos factures', 3);
INSERT INTO sousCateg VALUES (13, 'Statistiques coupures', 3);
INSERT INTO sousCateg VALUES (14, 'Relevé de vos index', 3);
-- Marché public
INSERT INTO sousCateg VALUES (15, 'Dématérialisation des marchés publics', 4);
-- GRD
INSERT INTO sousCateg VALUES (16, 'Photovoltaïque', 5);
INSERT INTO sousCateg VALUES (17, 'Catalogue des prestations', 5);
INSERT INTO sousCateg VALUES (18, 'Barème de raccordement', 5);
-- Contact
INSERT INTO sousCateg VALUES (19, 'Vos interlocuteurs', 6);
INSERT INTO sousCateg VALUES (20, 'E-mail', 6);
INSERT INTO sousCateg VALUES (21, "Plan d\'accès", 6);
INSERT INTO sousCateg VALUES (22, "Horaires d\'ouverture", 6);
INSERT INTO sousCateg VALUES (23, 'Communes desservies', 6);
-- Liens utiles
INSERT INTO sousCateg VALUES (24, 'Liens utiles', 7);
INSERT INTO sousCateg VALUES (25, "Relevés d\'index en cas d\'absence", 7);
-- Historique des relevés
INSERT INTO sousCateg VALUES (26, "Analyse d\'eau", 8);
INSERT INTO sousCateg VALUES (27, "Qualité de l\'eau", 8);

ça va aussi de cette façon? Même si c'est pas exactement comme tu m'as montré ?

**Benjamin Delespierre** · 04/01/2011, 12h47

Comme tu as fait là c'est pas faux. Je trouvais ça plus cohérent de tout mettre dans une seule table avec une relation 1-n sur elle même:

Ainsi, tu peux créer autant de catégories et de niveaux de sous catégories que tu souhaite, avec une seule table, en gardant la sécurité des contraintes.

Le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
CREATE  TABLE IF NOT EXISTS `mydb`.`categories` (
  `id` BIGINT(25) UNSIGNED NOT NULL AUTO_INCREMENT ,
  `name` VARCHAR(90) NOT NULL ,
  `description` TEXT NULL ,
  `parent_category` BIGINT(25) UNSIGNED NULL ,
  PRIMARY KEY (`id`) ,
  INDEX `fk_categories_categories` (`parent_category` ASC) ,
  UNIQUE INDEX `unique_name` (`name` ASC) ,
  CONSTRAINT `fk_categories_categories`
    FOREIGN KEY (`parent_category` )
    REFERENCES `mydb`.`categories` (`id` )
    ON DELETE NO ACTION
    ON UPDATE NO ACTION)
ENGINE = InnoDB

Insérer une catégorie racine:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
insert into categories (`name`,`description`,`parent_category`) values ('root', 'Index', null);

Insérer une sous catégorie (sous la racine):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
insert into categories (`name`,`description`,`parent_category`) values ('Cat1', 'First category', 1);

(bon et cette fois c'est testé et ça marche :p)

Je te fais un exemple de requête de séléction bouge pas.

**feldi** · 04/01/2011, 12h52

"Je trouvais ça plus cohérent de tout mettre dans une seule table avec une relation 1-n sur elle même:"

Ouh la, j'ai pas encore vu ça moi ! Bon après l'essentiel c'est que ça fonctionne.
(juste par curiosité, c'est quel niveau d'études les tables à relation 1-n sur elles-mêmes?)

**Benjamin Delespierre** · 04/01/2011, 13h24

(on voit ça en première année.)

En fait, si tu regarde tes tables sommaire et sousCateg tu te rends compte qu'elles sont identiques à un champ près: le numéro de la catégorie parente (dans sommaire).

C'est exactement comme si je te disait de modéliser une table personne avec la cardinalité suivante: "une personne est mariée à une autre personne". Si tu considère l'exemple suivant:

(j'aime les schémas)

Dans cet exemple, le trait en pointillé caractérise une relation "un homme à une femme et une seule." (si c'était "un homme à obligatoirement une femme et une seule", le trait serait plein et le champ marqué en rouge ferait partie de la clé).

Cet exemple n'est pas faux, mais il ne permet pas de modéliser les mariages homosexuels par exemple. De plus, on constate une redondance entre les tables hommes et femmes qui ont en commun le nom, le prénom et la date de naissance.

Il pourra donc s'avérer judicieux de généraliser tout ça:

Dans ce dernier exemple, on a fait disparaitre une table inutile, on a pour cela créé une table personne avec un champ sexe permettant de différencier les hommes de femmes. La relation permet les mariages homosexuels, si on avait voulu faire de la polygamie / polyandrie, on aurait pu faire:

(note que la cardinalité est devenue 1-n).

**Benjamin Delespierre** · 04/01/2011, 13h41

Toujours en se plaçant dans mon dernier exemple de la table categories , la requête permettant d'obtenir la liste des catégories et leur catégories parentes est:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
select a.`name` as `name`, b.`name` as `parent_name` from categories as a join categories as b on (a.`parent_category`=b.`id`);

Avec les valeurs suivantes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
insert into categories (`name`,`description`,`parent_category`) values
('root', 'Sommaire', null), /*id 1*/
('cat1', 'Première catégorie', 1), /*id 2*/
('cat2', 'Seconde catégorie', 1), /*id 3*/
('cat3', 'Troisième catégorie', 1), /*id 4*/
('cat11', 'Sous catégorie 11', 2),
('cat12', 'Sous catégorie 12', 2),
('cat31', 'Sous catégorie 31', 4);

produit:

Je réfléchis à un algo pour modéliser le menu et je reviens.

**feldi** · 04/01/2011, 14h19

Wah !

ça en fait des choses à retenir la. Rassure moi, quand tu parles de 1ère année, c'est bien 1ère année d'école d'ingénieur ?
Je suis en 2ème année de BTS IG et je n'ai jamais vu ça.

Merci beaucoup pour le mal que tu te donnes pour moi.

**Benjamin Delespierre** · 04/01/2011, 15h02

ça faisait partie de ma première année d'IUT en Analyse et Conception des Systèmes d'Information. On avait un bon prof pour le cours.

Si ça t'intéresse la l'analyse, tu peux jeter un oeil aux méthodes Merise et Lapage:
http://fr.wikipedia.org/wiki/Merise_%28informatique%29
http://www.priceminister.com/offer/b...que-Livre.html

Tu ne trouvera pas beaucoup de cours sur internet sur Lapage pour la bonne raison que c'est notre prof et sa collègue qui ont écrit ce bouquin, et à part de lui, j'ai jamais entendu parler de cette méthode. Mais elle est très puissante.

**stealth35** · 04/01/2011, 15h03

c'est un façon simple de le concevoir cette manière mais qui n'est pas simple a mettre en place après surtout en itération, tu peu t'orienter vers la technique nested :
http://dev.mysql.com/tech-resources/...ical-data.html

j'ai vu un article sympa sur les différentes techniques de menu je vais le retrouver

EDIT : retrouver -> Models for hierarchical data@@AMEPARAM@@ssplayer2.swf?doc=modelsforhierarchicaldata-100520123959-phpapp02&stripped_title=models-for-hierarchical-data@@AMEPARAM@@modelsforhierarchicaldata-100520123959-phpapp02@@AMEPARAM@@models-for-hierarchical-data

**feldi** · 04/01/2011, 15h07

Envoyé par Benjamin Delespierre

Si ça t'intéresse la l'analyse, tu peux jeter un oeil aux méthodes Merise et Lapage:
http://fr.wikipedia.org/wiki/Merise_%28informatique%29
http://www.priceminister.com/offer/b...que-Livre.html

On a fait du Merise en première année, mais pas aussi "poussé". On est en train de voir la méthode étendue, Merise 2, donc peut être que ça viendra.

Merci pour vos réponses.
Reste plus qu'à trouver comment faire un menu en utilisant ces informations :p

Au fait, au fur et à mesure de vos réponses, je me demande :
on est bien toujours sur mon problème de menu la ?
Quelque chose de ce style ? (on rigole pas sur mon talent artistique !)
http://img152.imageshack.us/img152/3...lustration.png

En bleu l'image, en dessous mon menu. Quand je clique sur une case du menu, il se déroule et dans les cases déroulées, il y a les sous menus.

**Benjamin Delespierre** · 04/01/2011, 15h39

J'ai trouvé un bout de code sur stack overflow qui correspond bien à ce que tu veux faire et qui s'adapte parfaitement au cas présent:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
function generate_tree_list($array, $parent = 0, $level = 0)
{
    $buffer = "";
    $has_children = false;
    foreach($array as $key => $value)
    {
        if ($value['parent_id'] == $parent)
        {
            if ($has_children === false)
            {
                $has_children = true;
                $buffer .= '<ul class="level-' . $level . '">';
                $level++;
            }
            $buffer .= '<li><a href="?id=' . $value['id'] . '">' . $value['description'] . '</a>' .
                       generate_tree_list($array, $key, $level) .
                	   '</li>';
        }
    }
    if ($has_children === true) $buffer .= '</ul>';
    return $buffer;
}

Edit: j'allais oublier le lien: http://stackoverflow.com/questions/3...w-with-php-sql
A mettre avec tes librairies.

Pour l'appeller, voilà un exemple testé en situation réele:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
$mysql_connection = mysql_connect('localhost', 'root', '');
mysql_select_db('menu', $mysql_connection);
 
$query = "select a.`name` as `name`, a.`description` as `description`, b.`name` as `parent_name` from categories as a join categories as b on (a.`parent_category`=b.`id`) order by b.`name`";
if ($results = mysql_query($query, $mysql_connection))
{
	$categories = array();
	while ($row = mysql_fetch_assoc($results))
	{
		$categories[$row['name']] = array(
			'id'        => $row['name'],
			'description' => $row['description'],
			'parent_id'      => $row['parent_name']);
	}
 
	echo generate_tree_list($categories, 'root');
}
else
{
	die('Error while fetching menu entries!');
}

ça produit:

Bon maintenant il faut que je retrouve mon bout de code CSS capable d'afficher et de cacher des nodes de menus déroulant sans Javascript et c'est gagné

@stealth35 je suis pas convaincu que cette technique soit plus simple...

**Benjamin Delespierre** · 04/01/2011, 15h45

Envoyé par feldi

Au fait, au fur et à mesure de vos réponses, je me demande :
on est bien toujours sur mon problème de menu la ?
Quelque chose de ce style ? (on rigole pas sur mon talent artistique !)
http://img152.imageshack.us/img152/3...lustration.png
.

Une seconde, ça vient.

Edit: Damned, je l'ai pas sur moi, il faut que je le refasse...

**stealth35** · 04/01/2011, 15h54

Envoyé par Benjamin Delespierre

@stealth35 je suis pas convaincu que cette technique soit plus simple...

plus simple au final oui, c'est toujours plus simple de faire de l'itératif que du récursif

, suffis de voir les ressources que tu bouffes pour faire ton menu

**Benjamin Delespierre** · 04/01/2011, 16h39

Envoyé par stealth35

plus simple au final oui, c'est toujours plus simple de faire de l'itératif que du récursif

, suffis de voir les ressources que tu bouffes pour faire ton menu

Bof, une toute petite récursion sur un invariant pas bien lourd

Enfin, j'ai jeté un œil à la technique proposée sur le site de MySQL,c'est vrai que c'est bien, mais si j'ai tout compris, on ne peut théoriquement pas avoir un niveau de nesting infini, et les requêtes pour avoir l'ensemble de l'arbre consomment de toute façon de la mémoire. Après, ça dépend où tu veux mettre la charge.

Reconnais quand même que comme ça c'est pas bien compliqué

**feldi** · 05/01/2011, 09h23

Envoyé par Benjamin Delespierre

Bon maintenant il faut que je retrouve mon bout de code CSS capable d'afficher et de cacher des nodes de menus déroulant sans Javascript et c'est gagné

Techniquement ce code CSS servirait à quoi ? Afficher les sous-menus en cliquant sur le menu principal ?

**Benjamin Delespierre** · 05/01/2011, 13h57

Plutôt dérouler les sous menu au passage de la souris sur les éléments parents. J'avais réalisé des règles CSS qui permettaient de le faire à un niveau infini. Mais je ne retrouve plus mon travail.

En fait je vais pas avoir le temps de le refaire. Il va faloir te débrouiller, voici tout de même un début de piste:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
#menu {
	width: 500px;
	margin: 10px auto;
}
 
#menu a,
#menu a:hover,
#menu a:link,
#menu a:visited {
	color: #333;
}
 
#menu ul {
	display: none;
}
 
#menu > ul {
	display: block;
}
 
#menu > ul > li {
	float: left;
}
 
#menu li {
	float: none;
	display: block;
}
 
#menu li a {
	display: block;
	width: 130px;
	height: 23px;
	padding: 5px;
	margin: 3px;
	border: 1px solid #aaa;
	text-align: center;
}
 
#menu li:hover > ul {
	display: block;
	position: relative;
 
}
 
#menu li:hover > ul > li {
	position: absolute;
	bottom: -50px;
	left: -9px;
}

Dans l'état ça marche pas bien, adapte-le un peu...

Pour un code HTML de la forme:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
 
<div id="menu"><ul class="level-0"><li><a href="?id=cat1">Première catégorie</a><ul class="level-1"><li><a href="?id=cat11">Sous catégorie 11</a></li><li><a href="?id=cat12">Sous catégorie 12</a></li></ul></li><li><a href="?id=cat2">Seconde catégorie</a></li><li><a href="?id=cat3">Troisième catégorie</a><ul class="level-1"><li><a href="?id=cat31">Sous catégorie 31</a><ul class="level-2"><li><a href="?id=cat311">Sous sous catégorie 311</a></li></ul></li></ul></li></ul></div>

**feldi** · 05/01/2011, 14h20

Merci beaucoup.
Dès que je pourrais j'essayerais ton code.

Je ne mets pas (encore) le sujet en résolu, si quelqu'un a quelque chose à rajouter ou modifier.

Menu et sous menu déroulant

PHP & Base de données

Discussions similaires

Partager

Partager