Votre question

Menu déroulant base de données et javascript

Tags :
  • Php
  • Programmation
Dernière réponse : dans Programmation
15 Novembre 2011 17:10:37

Bonjour,
j'ai quelques connaissances en html, css, php et mysql, mais pas suffisamment car je bloque dans l'élaboration de mon projet. Sur mon site web je souhaite créer , un menu déroulant vertical genre accordéon mais couplé avec une base de données.
j'ai téléchargé le menu déroulant vertical2 dans la galerie
http://css.developpez.com/galerie/?p...-verticaux#MV1
avec un menu simple , je me suis débrouillé, mais avec des sous-menu et du javascript , je bloque pour la conception de ma base de données et les requêtes php.
je n'ai pas trouvé sur le web des tutos ou des informations qui pourraient m'aider à réaliser mon projet. je travaille également avec dreamweaver.
Avez-vous une idée du travail à accomplir.
Merci

Autres pages sur : menu deroulant base donnees javascript

a c 232 L Programmation
15 Novembre 2011 18:07:55

Salut,

Pour ta base de données, ce qu'il faut que tu fasses, c'est avoir une clé étrangère dans ta table, qui pointe vers la clé primaire de ta même table.
En effet, elle va contenir le menu "parent".

Quelque chose dans ce genre :
TABLE Menu

  • id
  • texte
  • lien
  • parent_id


  • Et tu auras des données de ce genre :
    1 | Menu 1 | page1.html | NULL
    2 | S-M 1.1 | page1.1.html | 1
    3 | S-M 1.2 | page1.2.html | 1
    4 | Menu 2 | page2.html | NULL


    Comme tu peux le voir, tous les éléments de ton menu qui ne sont pas des sous menus, ils ont un parent_id qui est NULL.
    Les autres, ont un parent_id qui est égal à l'ID du menu parent.

    Ca te donnerait :
    - Menu 1
    | - S-M 1.1
    | - S-M 1.2
    - Menu 2
    15 Novembre 2011 19:05:39

    Merci de ta réponse
    je vois bien la structure de la table, ensuite c'est l'association des requêtes php et du javascript qui me bloque, dans le html pour conserver la structure du menu accordéon indiqué dans le premier post.
    Contenus similaires
    a c 232 L Programmation
    15 Novembre 2011 19:46:10

    Tu vas faire une requête SQL qui te retourne tous les menus dont le parent_id est NULL
    Ca va te donner tous tes menus principaux sous ce format:
    Menu 1
    Menu 2
    Menu 3


    Et pour chaque menu, tu fais une requête SQL qui te retourne tous les sous-menus de ce menu (donc, dont le parent_id est égal à l'id du menu actuel).
    Donc, pour Menu 1, tu fais ta requête, il va te ressortir ton Sous Menu 1-1, Sous Menu 1-2, Sous Menu 1-3,...
    Puis pour Menu 2, idem...

    Après tu as juste besoin d'écrire le HTML sous le format que tu veux.


    Edit: c'est la méthode la plus simple pour un débutant. Tu dois certainement pouvoir faire une requête SQL qui te retourne toutes les données structurées, et triées
    15 Novembre 2011 19:55:21

    Merci
    je vais me mettre au travail, j'aurais peut-être besoin de toi , au fur et mesure de ma progression.
    15 Novembre 2011 23:52:28

    j'ai structuré ma base de données et réalisé la table suivante:

    je bute concernant les requêtes sql, pour afficher les menus principaux et les sous menus correspondant.
    a c 232 L Programmation
    16 Novembre 2011 00:35:32

    Tu as déjà tout fait là... la requête SQL c'est du SQL standard rien de plus simple...

    Pour avoir tes menus principaux :
    Citation :
    Tu vas faire une requête SQL qui te retourne tous les menus dont le parent_id est NULL


    Et pour avoir tes sous menus :
    Citation :
    Et pour chaque menu, tu fais une requête SQL qui te retourne tous les sous-menus de ce menu (donc, dont le parent_id est égal à l'id du menu actuel).
    16 Novembre 2011 16:05:34

    je cherche à afficher les menus principaux :
    1. SELECT item_menu
    2. FROM menu
    3. WHERE menu.id_menu_dir= 'null'
    4. <?php echo $row_Recordset1['item_menu']; ?>

    ca ne marche pas , je pense que je ne suis pas assez doué, il faut donc travailler plus.tu n'aurais pas un petit coup de pouce pour débuter.
    a c 232 L Programmation
    16 Novembre 2011 21:24:07

    NULL est une valeur spéciale, il ne faut pas mettre de ' autour

    Ta requête est bonne, par contre, tu ne l'exécutes pas avec mysql_query (ou similaire) là...
    17 Novembre 2011 00:25:48

    pour afficher les sous menus
    1. mysql_select_db($database_dream, $dream);
    2. $query_Recordset1 = "SELECT item_menu FROM menu WHERE menu.id_menu = menu.id_menu_dir";
    3. $Recordset1 = mysql_query($query_Recordset1, $dream) or die(mysql_error());
    4. $row_Recordset1 = mysql_fetch_assoc($Recordset1);
    5. $totalRows_Recordset1 = mysql_num_rows($Recordset1);

    à incorporer dans le html
    1. <?php do { ?>
    2. <?php echo $row_Recordset1['item_menu']; ?>
    3. <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>

    <div id="menu">
    <div class="menu" id="menu1" onclick="afficheMenu(this)">
    <a href="#">Menu 1</a>
    </div>
    <div id="sousmenu1" style="display:none">
    <div class="sousmenu">
    <a href="#">Sous-Menu 1.1</a>
    </div>
    <div class="sousmenu">
    <a href="#">Sous-Menu 1.2</a>
    </div>
    <div class="sousmenu">
    <a href="#">Sous-Menu 1.3</a>
    </div>
    <div class="sousmenu">
    <a href="#">Sous-Menu 1.4</a>
    </div>
    </div>
    à l'endroit des sous menus 1.1
    mais çà ne fonctionne pas
    a c 232 L Programmation
    17 Novembre 2011 01:08:13

    Ca donnerait (environ, il est 1h du mat, et j'ai pas fait de PHP depuis des années) :
    1. <?php
    2. mysql_select_db($database_dream, $dream);
    3. $query = 'SELECT item_menu, id_menu FROM menu WHERE id_menu = NULL';
    4. $data = mysql_query($query) or die(mysql_error());
    5. echo '<div id="menu">';
    6. $i = 1;
    7. while($row = mysql_fetch_assoc($data)) {
    8. echo '<div class="menu" id="menu' . $i++ . '" onclick="afficheMenu(this);"><a href="#">' . $row['item_menu'] . '</a></div>';
    9. $subQuery = 'SELECT item_menu FROM menu WHERE id_menu = ' . $row['id_menu'];
    10. $subData = mysql_query($subQuery) or die(mysql_error());
    11. echo '<div id="sousmenu1" style="display:none;">';
    12. $j = 1;
    13. while ($subRow = mysql_fetch_assoc($subData)) {
    14. echo '<div class="sousmenu"><a href="#">' . $subRow['item_menu'] . '</a></div>';
    15. }
    16. echo '</div>';
    17. }
    18.  
    19. echo '</div>';
    20. ?>
    20 Novembre 2011 09:57:37

    merci omar
    j'ai intégré ton script , pour quelqu'un qui n'a pas l'habitude , je trouve que c'est pas mal.
    le résultat est le suivant: les menus principaux apparaissent , mais pas les sous menus correspondants.
    car j'ai modifié une partie au niveau de la première requête
    1. $query = 'SELECT item_menu, id_menu FROM menu WHERE id_menu = NULL';

    par
    1. $query = 'SELECT item_menu, id_menu FROM menu WHERE id_menu IS NULL';

    c'est au niveau de seconde requête que ça cloche.
    si on peut trouver , je pense que l'on est sur la bonne voix.
    a c 232 L Programmation
    20 Novembre 2011 11:17:58

    Ah oui pardon, IS NULL et pas = NULL...
    Et les menus n'apparaissent pas parce qu'ils sont en display:none, j'ai copié le code HTML de manière à ce que ça te donne le code du menu vertical que tu voulais.
    Donc si tu as bien copié le CSS qui allait avec, quand tu passes la souris sur un menu, ça doit t'afficher le sous-menu.
    20 Novembre 2011 12:16:50

    c'était
    id_menu_dir ou lieu de id_menu
    1. $query = 'SELECT item_menu, id_menu FROM menu WHERE id_menu_dir IS NULL';

    j'ai refait un copier coller, malheureusement je n'ai pas les sous menus
    j'ai bien le code css et js
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
    <title>Menu déroulant vertical sur clic</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script type="text/javascript" src="functions.js"></script>
    </head>
    quand je clique sur le premier menu, ca me donne la même chose, en sous menu ( ordinateurs portable, sous menu ordinateurs portable, qui fait parti du menu principal) . Clic sur les 2 autres ca ne donne rien
    il manque peut de chose
    a c 232 L Programmation
    20 Novembre 2011 17:01:20

    Faut mettre id_menu_dir = $row['id_menu'] (enfin, la même chose que ce que j'ai fait pour les sous menus, mais avec la bonne colonne, id_menu_dir et pas id_menu
    20 Novembre 2011 19:57:30

    je crois que je vais abuser de ton dévouement, j'ai modifié avec
    1. $subQuery = 'SELECT item_menu FROM menu WHERE id_menu_dir =' . $row['id_menu'];

    j'ai bien le menu principal de ordinateurs portable avec les sous menus , mais pas les autres?
    a c 232 L Programmation
    20 Novembre 2011 22:35:57

    fais voir le code et ta base de données
    20 Novembre 2011 22:51:49

    çà marche comme çà;
    1. <?php
    2. mysql_select_db($database_dream, $dream);
    3. $query = 'SELECT item_menu, id_menu FROM menu WHERE id_menu_dir is NULL';
    4. $data = mysql_query($query) or die(mysql_error());
    5. echo '<div id="menu">';
    6. $i = 1;
    7. while($row = mysql_fetch_assoc($data)) {
    8. echo '<div class="menu" id="menu' . $i . '" onclick="afficheMenu(this);"><a href="#">' . $row['item_menu'] . '</a></div>';
    9. $subQuery = 'SELECT item_menu FROM menu WHERE id_menu_dir =' . $row['id_menu'];
    10.  
    11. $subData = mysql_query($subQuery) or die(mysql_error());
    12. echo '<div id="sousmenu' . $i . '" style="display:none;">';
    13. $j = 1;//??
    14. while ($subRow = mysql_fetch_assoc($subData)) {
    15. echo '<div class="sousmenu"><a href="#">' . $subRow['item_menu'] . '</a></div>';
    16. }
    17. echo '</div>';
    18. $i++;
    19. }
    20.  
    21. echo '</div>';
    22. ?>

    tu en pense quoi
    a c 232 L Programmation
    21 Novembre 2011 00:21:19

    c'est bon si ça marche.
    et le $j ne sert à rien ;) 
    21 Novembre 2011 00:44:48

    Merci encore omar, tu m'as bien dépanné, c'est le début le plus difficile, c'est toi qui est à l'origine de cette réussite.
    Tom's guide dans le monde
    • Allemagne
    • Italie
    • Irlande
    • Royaume Uni
    • Etats Unis
    Suivre Tom's Guide
    Inscrivez-vous à la Newsletter
    • ajouter à twitter
    • ajouter à facebook
    • ajouter un flux RSS