Mise à jour

include/js/charts.js

-// Requête pour obtenir les données du serveur
-const httpRequest = new XMLHttpRequest()
-httpRequest.onreadystatechange = () => {
+/**
+ * Requête AJAX pour obtenir une information du serveur et l'utiliser pour faire deux graphiques.
+ * Il faut déclarer la requête et lui dire de faire les graphiques dès qu'on reçoit le résultat.
+ */
+const httpRequest = new XMLHttpRequest() // 1. Déclaration de la requête
+httpRequest.onreadystatechange = () => { // 2. Définition de ce qu'il faut faire quand on obtient une réponse
     if (httpRequest.readyState === XMLHttpRequest.DONE) {
         if (httpRequest.status === 200) {
             // On a reçu la réponse du serveur, on peut générer la graphique
@@ -14,11 +17,12 @@ httpRequest.onreadystatechange = () => {
         }
     }
 }
-httpRequest.open('POST', 'include/php/data.php', true)
+httpRequest.open('POST', 'include/php/data.php', true) // 3. Ouverture et configuration de la requête
 httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
 // Requête SQL
 const query = "SELECT acad_mies, sum(capa_fin) AS places FROM parcoursup GROUP BY acad_mies ORDER BY places DESC"
-httpRequest.send(`query=${encodeURIComponent(query)}`)
+httpRequest.send(`query=${encodeURIComponent(query)}`) // 4. Envoi de la requête
+
 
 /**
  * Fonction qui fait deux graphiques avec les données du serveur

index.php

 <?php
 /**
- * Différents examples de requêtes SQL
+ * Différents exemples de requêtes SQL
  */
 include 'include/php/functions.php';
 ?>
@@ -60,13 +60,13 @@ foreach ($result as $row) {
 		<h2>Les BUT Informatique avec le plus grand nombre de candidates admises</h2>
 		<ol>
 <?php
-$sth = $dbh->prepare('SELECT lib_comp_voe_ins, acc_tot_f FROM parcoursup
+$sth = $dbh->prepare('SELECT lib_comp_voe_ins, acc_tot_f, acc_tot FROM parcoursup
 	WHERE lib_for_voe_ins LIKE "BUT - Informatique%"
     ORDER BY acc_tot_f DESC LIMIT 5');
 $sth->execute();
 $result = $sth->fetchAll();
 foreach ($result as $row) {
-	echo '<li>' . $row['lib_comp_voe_ins'] . ' (<em>' . $row['acc_tot_f'] . ' femmes</em>)</li>';
+	echo '<li>' . $row['lib_comp_voe_ins'] . ' (<em>' . $row['acc_tot_f'] . ' étudiantes sur ' . $row['acc_tot'] . '</em>)</li>';
 }
 ?>
 		</ol>

search.php

@@ -2,9 +2,9 @@
 /**
  * Barre de recherche de formations avec affichage d'informations
  * 
- * L'utilisateur choisir dans le formulaire une formation.
+ * L'utilisateur choisit une formation dans le formulaire.
  * Le formulaire envoie cette information vers la même page, et on
- * affiche le nombre de places et le nombre de candidats.
+ * affiche le nombre de places et de candidats.
  */
 include 'include/php/functions.php';
 ?>
@@ -24,9 +24,7 @@ include 'include/php/functions.php';
         </label>
         <datalist id="formations">
 <?php
-/* On remplit l'élément datalist (les suggestions pour le formulaire)
- * avec les noms des formations
- */
+// On remplit l'élément datalist (les suggestions pour le formulaire) avec les noms des formations
 $dbh = db_connection();
 $sth = $dbh->prepare('SELECT lib_comp_voe_ins FROM parcoursup
     ORDER BY lib_comp_voe_ins ASC');
@@ -41,10 +39,9 @@ foreach ($result as $row) {
     </form>
 
 <?php
-/* Si $_GET['formation'] est défini, ça veut dire qu'on est arrivé dans cette page
- * après avoir sélectionné une formation. Dans ce cas, on affiches les information
- * de cette formation
- */
+// Si $_GET['formation'] est défini, ça veut dire qu'on est arrivé dans cette page
+// après avoir sélectionné une formation. Dans ce cas, on affiche les informations
+// de cette formation
 if (isset($_GET['formation'])) {
     $sth = $dbh->prepare('SELECT capa_fin, voe_tot FROM parcoursup
     WHERE lib_comp_voe_ins = :formation');
@@ -54,7 +51,7 @@ if (isset($_GET['formation'])) {
     $sth->execute($donnees);
     $result = $sth->fetchAll();
     if (count($result) == 1) {
-        // Si on obtient un résultat, afficher les informations
+        // Si on obtient un résultat, on affiche les informations
         echo "<h2>" . $_GET['formation'] . "</h2>";
         echo "<p>" . $result[0]['voe_tot'] . " candidats pour " . $result[0]['capa_fin'] . " places</p>";
     }

test-charts.html

@@ -3,16 +3,16 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <title>SAÉ 303</title>
 </head>
 <body>
     <div class="container">
         <div class="row">
-            <div class="col-12 col-md-6">
+            <div class="col-12 col-lg-6">
                 <div id="piechart_div"></div>
             </div>
-            <div class="col-12 col-md-6">
+            <div class="col-12 col-lg-6">
                 <div id="barchart_div"></div>
             </div>
         </div>
@@ -20,6 +20,6 @@
 
     <script src="https://www.gstatic.com/charts/loader.js"></script>
     <script src="include/js/charts.js" defer></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
 </body>
 </html>
\ No newline at end of file