Deux listes deroulante liées qui affichent un resultat

Signaler
Messages postés
4
Date d'inscription
samedi 30 novembre 2013
Statut
Membre
Dernière intervention
3 décembre 2013
-
Messages postés
4
Date d'inscription
samedi 30 novembre 2013
Statut
Membre
Dernière intervention
3 décembre 2013
-
Bonjour :

Je suis entrain de concevoir un site web pour l'université . ce dernier propose des actualités et des informations concernant l université et aussi un espace qui présente la formation : cet espace de formation , a son tour qui comporte plusieurs filières chaque filière mène vers deux pages soit : une première page dédiée a la présentation de la filière .(a savoir que la formation dans chaque filière dure 3 ans )

- soit une deuxième page qui mène a l'espace des TD-TP-EXAMENS ( c'est dans cette page ou se présente le problème)

j ai pu creer deux listes deroulantes liées : la premiere contient trois choix concernant l année d'etude (Premiere Année-Deuxieme Année -Troisieme Année ) et la deuxieme liste comporte deux choix : (Semestre 1,Semestre2) si l etudiant etait en premiere année ou bien (Semestre 3,semestre4) Si l etudiant est en deuxieme année ou (Semestre 5, Semestre 6) si il est en 3 eme année.

jusqu'à ce stade la il n y a aucun probleme.

Le Problème est le suivant : apres une longue recherche sur le fameux Google mais aucun resultat satisfaisant ;

1/- j aimerai bien savoir comment faire pour que dès que l'etudiant choisit son niveau et le semestre , et apres qu'il clique sur un boutton " Recherche " l ensemble des examens et Td et TP adéquats s'affichent juste en dessous du bouton recherche sous forme de lien de telechargement



2/- aussi j aimerai bien savoir comment trier ces résultats selon leur catégories : Examen ( soit juste afficher dans la <div> Examens) et TD (dans la <div> travaux Dirigés ) et TP ( au seins de la div Travaux pratiques)



voila mon code :

<!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-FR" lang="fr-FR">  
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset="UTF-8" />
  <meta http-equiv="Content-Language" content="fr-FR" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
 
  <title>Formation Génie Informatique TP</title>
  
  
  
  
  <!-- superfish -->
  <link rel="stylesheet" type="text/css" media="screen" href="css/superfish-custom.css" /> 
  <script type="text/javascript" src="js/superfish-1.4.8/js/hoverIntent.js"></script> 
  <script type="text/javascript" src="js/superfish-1.4.8/js/superfish.js"></script> 
  <!-- ENDS superfish -->
  
  
  <!-- CSS -->
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="css/spring.css" type="text/css" media="screen" />
  <!--[if IE 6]>
   <link rel="stylesheet" type="text/css" media="screen" href="css/ie-hacks.css" />
     <script type="text/javascript">
 
function choisir()
{
 var liste = document.getElementById("select");
 var deuxiemeannée = liste.selectedIndex;
 var valeur = liste.options[deuxiemeannée].value;
 var div = document.getElementById("liste2");
 var select1 = '<select name="select2"> <option value="a">Semestre 1</option> <option value="autresLettres">Semestre 2</option>  </select>' // ta liste déroulante alphabétique
 var select2 = '<select name="select3"> <option value="0">Semestre 3</option> <option value="numeros">Semestre 4</option>  </select>' // ta liste déroulante des chiffres
var select3 = '<select name="select4"> <option value="a">Semestre 5</option> <option value="autresLettres">Semestre 6</option>  </select>' // ta liste déroulante alphabétique
          
   if(valeur == "Premiere Année") // si ta valeur est alphabet, on insère le select1
   {
   div.innerHTML = select1
   }
   if(valeur == "Deuxieme Année") // si ta valeur est chiffre, on insère le select2
   {
   div.innerHTML = select2
   }
   if(valeur == "Troisieme Année") // si ta valeur est chiffre, on insère le select2
   {
   div.innerHTML = select3
   }
}
</script>
  
  
  
  
 </head>
 <body>
 <!-- WRAPPER -->
 <div id="wrapper"> 
 <!-- MAIN -->
 <div id="main">
  <p class="section-title" style="margin-bottom:0px;"><span class="title custom">Formation Genie Informatique </span><span class="desc"><i>Traveaux Pratiques,Dirigés et examens .</i></span></p>
  
   </div></center>
    
   <div>
    <center>
                               <from action="#" methode="post">
 

          <p><label for="select" style="font-variant: small-caps;margin-right: 30px;">Choisissez Votre Année :<select name="select" id="select" onChange="choisir()"></label>
     <option value="Premiere Année" id="Premiere Année">Premiere Année</option>
       <option value="Deuxieme Année" id="Deuxieme Année">Deuxieme Année</option>
      <option value="Troisieme Année" id="Troisieme Année">Troisieme Année</option>
           </select>
           
    </p>
     
    <div id="liste2">
            <p style="font-variant: small-caps;">Choisissez le Semestre d'Etudes:<select id="select2" name="select2"> <option value="Semestre 1">Semestre 1</option> <option value="Semestre 2">Semestre 2</option></select></p>
    </div>
    
     
     <input type="submit" name="submit" id="submit" value="Rechercher">
     
    </from>
   </div></center>
  <div class="one-col">
   
   <div class="col">
    
    <h3 class="custom title-1"style=" font-variant: small-caps;">TP | TD | EXAMENS </h3>
    
    <h5 class="toggle-trigger custom" ><a href="#">Traveaux Pratiques</a></h5>
    
    
    <h5 class="toggle-trigger custom"><a href="#">Traveaux Diriges </a></h5>
    
    <h5 class="toggle-trigger custom"><a href="#"> Examens </a></h5>
    
   </div>   
  </div>
  
  
 </div>
 
 </div>
 <!-- ENDS WRAPPER -->

 </body>
</html>




Je vous remercie d'avance.

1 réponse

Messages postés
4200
Date d'inscription
samedi 16 octobre 2004
Statut
Modérateur
Dernière intervention
13 juin 2020
30
On vas déjà s'attaquer à la structure de stockage des fichiers, c'est assé invariable donc on peu travailler un index de répertoires prédéfinis :

documents/A[y]/S[s]/[TDS|TPS|EXS]

le fichier "getfiles.php" qui se composera de trois scandir sur chaque répertoire TDS TPS et EXS puis foreach pour générer des liens html retourné à la page principale

et bien sur, la page principale corrigé html5 + jQuery pour faciliter la vie :

<!DOCTYPE html>
<html lang="fr">  
 <head>
  <meta charset="UTF-8"/>

  <title>Formation Génie Informatique TP</title>
  
  <!-- jQuery -->
  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <!-- /jQuery -->
  
  <!-- superfish -->
  <link rel="stylesheet" media="screen" href="css/superfish-custom.css" /> 
  <script src="js/superfish-1.4.8/js/hoverIntent.js"></script> 
  <script src="js/superfish-1.4.8/js/superfish.js"></script> 
  <!-- /superfish -->
  
  
  <!-- CSS -->
  <link rel="stylesheet" href="css/style.css" media="screen" />
  <link rel="stylesheet" href="css/spring.css" media="screen" />
  <!--[if IE 6]>
  <link rel="stylesheet" type="text/css" media="screen" href="css/ie-hacks.css" />
  <![endif]-->
  
  <script>
  $(document).ready(function()
  {
    // sel_yea.onChange -> Chargement des semestres quand selection
      $('#sel_year').on('change', function()
      {
        var y = $(this).val();
        if(y >= 1 && y <= 3)
        {
          var countOptions = 0;
          $('#sel_semester').html( $('#op_semester_'+$(this).val()).html() );
        }
        else
        {
          $('#sel_semester').html( $('#op_semester_none').html() );
        }
      });
    
    // sel_semester.onChange -> Auto chargement des fichiers quand selection
      $('#sel_semester').on('change', function()
      {
        var s = $(this).val();
        if(s >= 1 && s <= 6)
        {
          $.ajax({
            type: "POST",
            url: $('#sel_form').attr('action'),
            data: $('#sel_form').serialize(),
            success: function( result ){
              $('#filelist').html( result );
            },
            error: function(){
              $('#filelist').html( $('#def_filelist').html() );
            }
          });
        }
      });
    
    
    // default loading :
      $('#sel_semester').html( $('#op_semester_none').html() );
    
  });
  </script>
</head>
<body>
 <div id="wrapper"> 
    <div id="main">
      <p class="section-title" style="margin-bottom:0px;">
        <span class="title custom">Formation Genie Informatique </span><span class="desc"><i>Traveaux Pratiques,Dirigés et examens .</i></span>
      </p>
    </div>
    
    
    <div id="form" style="text-align:center">
    <form id="sel_form" name="sel_form" action="getfiles.php" method="post">
      <p>
        <label style="font-variant: small-caps;margin-right: 30px;">Choisissez Votre Année :</label>
        <br/>
        <select name="sel_year" id="sel_year" size="3">
          <option value="0" selected>---</option>
          <option value="1">Premiere Année</option>
          <option value="2">Deuxieme Année</option>
          <option value="3">Troisieme Année</option>
        </select>
      </p>
      <p>
        <label style="font-variant: small-caps;margin-right: 30px;">Choisissez le Semestre d'Etudes:</label>
        <br/>
        <select id="sel_semester" name="sel_semester" size="3">
        </select>
      </p>
    </form>
    </div>
  </div>
  
  <div id="filelist">
  </div>
</div>




<!-- HIDDEN PARTS -->
<div style="display:none;width:0;height:0;opacity:0;">
  <content id="op_semester_none">
    <option value="0" selected></option>
  </content>
  
  <content id="op_semester_1">
    <option value="0" selected></option>
    <option value="1">Semestre 1</option>
    <option value="2">Semestre 2</option>
  </content>
  
  <content id="op_semester_2">
    <option value="0" selected></option>
    <option value="3">Semestre 3</option>
    <option value="4">Semestre 4</option>
  </content>
  
  <content id="op_semester_3">
    <option value="0" selected></option>
    <option value="5">Semestre 5</option>
    <option value="6">Semestre 6</option>
  </content>
  
  <!-- 
  ICI, exemple de retour de liste de fichiers définit par l'action (getfiles.php) du formulaire
  de selection année/semestre
  -->
  <content id="def_filelist"> 
    <h3>Fichiers Travaux Pratique :</h3>
    <ul id="files_tps">
      <li>
        <p class="filenofiles">
          Aucuns travaux pratiques trouvés...       
        </p>
      </li>
      <!-- exemple de retour d'une ligne pour un fichier 
      <li>
        <a href="download.php?file=XXXXXX" target="_blank">
          <span class="filename"></span>
          <span class="filesize"></span>
          <span class="filedate"></span>
        </a>
        <p class="filedescription">
        </p>
      </li>
      -->
    </ul>
    
    <h3>Fichiers Travaux Dirigés :</h3>
    <ul id="files_tds">
      <li>
        <p class="filenofiles">
          Aucuns travaux dirigés trouvés...       
        </p>
      </li>
    </ul>
    
    <h3>Fichiers Examens :</h3>
    <ul id="files_exa">
      <li>
        <p class="filenofiles">
          Aucuns examens trouvés...       
        </p>
      </li>
    </ul>
  </content>
</div>
<!-- /HIDDEN PARTS -->
 
  </body>
</html>


Messages postés
4
Date d'inscription
samedi 30 novembre 2013
Statut
Membre
Dernière intervention
3 décembre 2013

woww Super merci pour l astuce foxi ;

le premier probleme s est reglé . mais le deuxieme je sais pas comment faire pour creer une base de donnee qui comporte des liens vers les examens , tp et td :

je m explique : l étape dans laquelle je me suis bloqué est la suivante :

Lorsque je soumets mon formulaire via le bouton rechercher.

Le système prend en compte la page renseignée dans l'action du formulaire s'il n'y en pas de défini alors il affichera la même page.

Il faut récupérer les valeurs renseignées dans les select avec php tout au début de ma page à l'aide $_POST.

Ensuite je dois me connecter à la base de données pour récupérer et filtrer les documents que j'afficherai ensuite.

c est la ou reside le grand travail

Cordialement,
tajadin