1. Introduction

Avoir une page web où l'on peut enregistrer ses sons, les configurer sur des boutons et les jouer en cliquant sur ces mêmes boutons... Inutile ? Peut-être, donc indispensable. C'est en cela que consiste mon projet. Une page web liée à une banque de données où sont stockés des fichiers son. Des boutons auxquels on peut liés ces sons et les jouer en appuyant sur ces boutons.

Shema.png _Figure 1 : Shéma du projet initial_

Les principales difficultés de ce projet sont la mise en place de la banque de données dans laquelle chacun pourrait ajouter ses sons puis de liés ces sons aux différents afin de pouvoir les jouer. Un autre objectif serait de pouvoir détecter qui se connecte à la page afin de garder les sons que cette personne aurait enregistrés et les "bindings" qu'elle aurait fait.

Les enjeux principaux à mon projet sont de pouvoir liés html, css, php et les bases de donné afin de pouvoir écrire cette page et la détection de la personne allant sur la page afin de restituer les présets qu'elle aurait enregistrés.

Malheureusement, pour des raisons de méconnaissance du sujet le projet de launchpad s'est transformé en banque de son dans laquelle il est possible d'ajouter ces propres sons

2. Matériel et méthodes

2.1 Matériel

L'avantage d'un projet consistant en une page web est qu'il ne demande presque pas de matériel. Un ordinateur avec une connection internet et disposant d'un éditeur de texte, un clavier et un écran sont suffisant à la réalisation du projet. Néanmoins un serveur sur lequel déposer le code en HTML pour le visualiser est recommandé. Egalement, pour ma part, le projet a été réalisé à l'aide de phpMyAdmin pour le stockage de la base de données. Un serveur attribué était donc nécessaire.

2.2 Méthode

2.2.1 Base de donnée

La première étape de mon projet consistait à mettre en place une base de donnée afin de pouvoir stocker puis récupérer les différents son dont j'ai besoin. En réalité ce ne sont pas les fichier qui sont stocké dans la base de données mais leur emplacement relatif dans l'arborescence de la machine serveur pour des raisons que j'aborderais plus tard. La base de donnée, dans ce cas appelée "music" est composée de 3 entrées ; id, path et type. La première entrée (id) permet d'attribuer un numéro unique (pour cela ajouter l'Extra "AUTO_INCREMENT") à chaque son afin de pouvoir facilement l'identifier. La deuxième entrée (path), quant à elle, et le chemin d'accès du fichier son relativement au fichier HTML. La troisième (type) permet d'attribuer une phrase descriptive à chaque son afin de le reconnaître si l'on fait un tableau de données.

info1.PNG _Figure 1 : Les entrées de la base de donnée._

Par la suite, j'ai remplis ma base de donnée de quelques données afin de pouvoir les insérée dans le code HTML.

info2.PNG _Figure 2 : Quelques données insérées._

La base de données est dorénavant mise en place, on peut passer à la page web à proprement parlé.

2.2.2 La page web

Pour commencer, il faut établir la connexion entre la page web et le serveur pypMySQL afin de de pouvoir interagir avec la base de données. Pour ce faire on utilise la série de commande :

<?php
       ###############################################################################
       # import connection details (check there for details!)
       include_once("../../etc/mysql.inc.php");
       # open the connection to one database (use "paqc_" followd 
       # by your educanet2 email address username, but without a dot)
       $db = mysqli_connect($MYSQL_SERVER, $MYSQL_USER, $MYSQL_PASS, "paqc_diegorindisbacher");
       # how to check for any problem after each call to a mysqli database (connect, query, …)
       print mysqli_error($db);
       ###############################################################################
{   ?>

Une fois cette connexion établie, on indique le type de document qu'est cette page, on lui donne un titre, et on indique le lien menant au fichier css permettant d'écrire le visuel de la page :

<!DOCTYPE html>
<html>
   <head>
       <title> Music</title>
       <link rel="stylesheet" type="text/css" href="./style/music.css" />
       <meta charset="UTF-8" />
   </head>

Ensuite, vient la partie visuelle, celle qui sera affiché à l'écran lors du chargement de la page web. Elle est premièrement composée d'un tableau à 3 entrées correspondantes aux 3 entrées de la base de données :

   <body>
       <h1> Banque de son <h1>
       <table>
           <tr>
               <th></th>
               <th> Son</th>
               <th> Audio</th>
           </tr>
<?php   $results = $db->query("SELECT * FROM music");
       while  ($row =  $results->fetch_assoc()) { ?>
           <tr>
               <td><?php print $row'id'; ?></td>
               <td><?php print $row'type'; ?></td>
               <td><audio src="<?php print $row'path'; ?>" controls></audio> </td>
           <tr>
<?php   } ?>
       </table>

La partie php (1) permet d'imprimer les informations contenue dans la base de donnée dans le tableau et la balise audio permet au son, enregistré à la position relative indiquée dans la base de donnée, d'être lu puis joué par le navigateur. Les premières lignes :

<?php   $results = $db->query("SELECT * FROM music");
             while  ($row =  $results->fetch_assoc()) { ?>
indiquent dans quelle tableau de données le navigateur doit chercher les informations, et les commandes :
<?php print $row'...'; ?>

indiquent l'entrée de laquelle le navigateur doit "imprimer" l'information.

La seconde partie de la page consiste en un formulaire permettant d'entrer les informations (chemin d'accès et description) d'un son que l'on voudrait enregistrer dans la base de données et donc dans le tableau de la page web. Pour cela on crée un formulaire (2) contenant deux cases à remplir :

<h2>Enregistrer ses propres fichiers son<h2>
       <form action = "index.php" method="POST">
       <table>
           <tr>
               <th> Chemin d'acces </th>
               <th><input type="text" name="path" value="<?php echo($result->path) ;?>"> </th>
           </tr>
           <tr>
               <th> Description du son </th>
               <th><input type="text" name="type" value="<?php echo($result->type) ;?>"> </th>
           </tr>
           <tr>
               <th><input type="submit" value="Add"></th>
           </tr>
       </table>
       </form>

Puis vient la commande (3) permettant de modifier sa base de données et d'y ajouter les nouvelles informations entrées dans le formulaire :

<?php   $results = $db->query("INSERT INTO music VALUE('','.$_POST'path'.', '.$_POST'type'.' )"); ?>

Mais suite à une modification du code de ma part engendrant une erreur qui n'a pas pu être corrigée cette dernière commande est supprimée du fichier HTML afin d'avoir quand même accès à la page.

Enfin la dernière partie du code permet de couper la connexion avec la base de données (1) :

<?php
       ###############################################################################
       # always close the connection before leaving the page
       mysqli_close($db);
       # you're done
       ###############################################################################
}    ?>
!!2.2.3 Le visuel
Par manque de temps le visuel de la page est très simple et rédigé en css :
body {
       background-color : black;
}
h1, h2 {
       color: white ;
}

Ces commandes permettent d'avoir un texte écrit en blanc sur un fond de page noir.

3. Résultats

Malheureusement le projet est un échec sur plusieurs point. Premièrement le projet initial de launchpad n'a pas pu être réalisé demandant des connaissance en JavaScript que je n'ai pas afin de réaliser des menus déroulant liés à des bases de données. Le projet c'est à ce moment transformer en banque de son. Le résultat final est effectivement une banque de son grâce à laquelle il est possible de jouer des sons mais due à une erreur de syntaxe à la fin du projet il n'est pas possible d'enregistrer de nouveaux sons. (4)

4. Discussion

La plus grosse erreur dans ce projet et ce qui à mené à son échec est de m'être focaliser sur le projet de base quand bien même il n'était pas réalisable qu'avec du HTML ou du php. Cette erreur à conduit à une immense perte de temps qui à empêchée de remplir touts les objectif et qui a mené à une fin de projet bâclée.
Au niveau des choix qui ont été faits, le principale est le choix d'avoir stocké les sons sous forme de chemin relatif et non directement sous forme de fichier ce qui semble à première vu le plus logique. Ce choix et dû au faite qu'il est généralement bien plus facile de manipuler des URLs que des fichiers ces dernier étant bien plus lourd. L'objectif étant de pouvoir modifier cette base de données il était donc logique de stocker ces fichiers sous forme d'URL.
Une des principales difficulté dans la manipulation de bases de données et que la syntaxe des commandes changes légèrement selon le système de gestion de bases de données utilisé. C'est en voulant m'appuyer sur des blogs indiquant la marche à suivre pour lier une base de données (probablement pas avec le même système de gestion) à un formulaire que la dernière erreur à été commise.

5. Conclusion

Le projet est un échec principalement pour cause de mauvaise gestion du temps qui ont entraîné un stresse débouchant à une suite d'erreur qui ont encore réduit le temps à disposition afin d'arriver au résultat final.

Références

(1)Notes du cours de M.Iglesias, Gymnase provence (2017-2018) (2)https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/les-formulaires-8 (3)Compilation de codes venants de plusieurs sources : http://www.lephpfacile.com/cours/8-recuperer-les-donnees-des-formulaires, https://openclassrooms.com/forum/sujet/formulaire-pour-remplir-une-base-de-donnee-32136 (4)https://dev.gyp.ch/diego.rindisbacher/