Projets Développement et Base De Données

Après un petit moment, mon tuteur me proposa de commencer à me former au développement via OpenClassrooms et m’a donné comme défit de créer une page web qui devrait communiquer avec une base de données. L’idée m’a plu, c’est donc comme cela que j’ai commencé à créer une VM Debian. Une fois toutes les configurations faites, j’ai testé plusieurs manières de créer un site avec base de données. Après de multiples ratés, j’ai décidé de tout simplement installer xampp. XAMPP contient plusieurs programmes entièrement gratuits et faciles à installer tels qu’Apache (pour créer le site), MySQL (la base données), PHP (un langage qui permet de rendre son site interactif) et Perl. Le paquetage open source XAMPP a été mis au point pour être incroyablement facile à installer et à utiliser. Une fois tous ces logiciels installés, il n’y a plus qu’à taper son adresse ip dans la barre de recherche, si tout marche bien et que le serveur apache est en marche, une page comme celle-ci devrait apparaitre :

  Une fois toutes ces étapes effectuées, j’ai pu passer à l’étape suivante, rentrer dans le vif du sujet, la création des différentes pages. Il y a un fichier s’appelant /opt/lampp/htdocs/ et qui permet de créer des pages qui vont pouvoir s’afficher via internet. C’est donc ici que j’ai commencé à découvrir la base de la base, le html. Le html permet de créer une page statique. En effet, avec les différentes balises, on peut écrire du texte de la couleur que l’on veut et le placer ou l’on veut avec la police que l’on veut. On peut mettre des couleurs sur la page et bien d’autre choses.  A cet html va venir s’ajouter du css. Ce langage a un seul but, embellir la page html. Cet outil va permettre de rendre la page plus accueillante. Une de cette fonctionnalité est de permettre de mettre des images facilement. Enfin le dernier langage qui vient se mêler aux deux autres sont le php. Ce langage est une pièce maitresse. En effet, un site bien présenté mais qui n’est pas interactif n’est pas intéressant. C’est donc ici que le php allié au phpmyadmin et au mysql va donner de la vitalité au site. Phpmyadmin est un programme permettant d’enregistrer des données tels que les identifiants et les mots de passe et bien d’autre choses. Et dans un autre temps de les restituer, ce qui va permette au visiteur de se connecter et bien d’autres fonctionnalités. Voici à quoi ressemble l’interface de phpmyadmin :

Après arrive la partie la plus dure pour moi et heureusement que Vincent, le développeur de IPTWINS, était là pour m’expliquer et m’aider. Il faut s’imaginer qu’il y a deux manières d’entrer une information dans un tableau phpmyadmin. Soit on le fait depuis l’interface graphique ci-dessus. C’est assez simple mais ça signifie que pour toute modification, ajout, suppression, il faut passer par la page de phpmyadmin et donc il faut avoir les accès. Vous imaginez bien que ce n’est pas faisable. Le visiteur doit pouvoir s’inscrire depuis le site. Et c’est là qu’interviens la deuxième solution. Via le langage SQL, on peut écrire plusieurs lignes de code qui vont permettre au visiteur de s’inscrire depuis un formulaire sur le site et les informations qu’il aura saisi vont venir s’enregistrer dans la base de donner de SQL:

Voici une explication détaillée du code PHP ligne par ligne :

1. <?php: Cette ligne indique que la suite du code est du code PHP.
2. $bdd = new PDO('mysql:host=localhost;dbname=Incidents_interne;charset=utf8', 'root', '');: Cette ligne crée une nouvelle connexion à la base de données MySQL « Incidents_interne » en utilisant le pilote PDO. Les paramètres passés à PDO() sont :
   • 'mysql:host=localhost' : spécifie l’hôte de la base de données (ici, il s’agit de l’hôte local)
   • 'dbname=Incidents_interne' : spécifie le nom de la base de données à laquelle se connecter
   • 'charset=utf8' : spécifie l’encodage des caractères à utiliser pour la connexion
   • 'root' : spécifie l’utilisateur MySQL utilisé pour la connexion
   • '' : spécifie le mot de passe pour l’utilisateur MySQL (ici, aucun mot de passe n’est utilisé).
3. $requete = $bdd->prepare('INSERT INTO incidents(event_user, event_objet, event_com, event_dt_debut) VALUES(?, ?, ?, ?)');: Cette ligne prépare une requête SQL pour insérer des données dans la table « incidents » de la base de données. La requête utilise la syntaxe SQL standard d’insertion de données et spécifie les noms des colonnes auxquelles les données doivent être insérées. Les valeurs à insérer sont représentées par des marqueurs de paramètre (les symboles ‘?’ dans cet exemple). Les marqueurs de paramètre sont utilisés pour éviter les attaques par injection SQL et sont remplacés par les vraies valeurs lors de l’exécution de la requête.
4. $requete->execute(array($_POST['event_user'], $_POST['event_objet'], $_POST['event_com'], $_POST['event_dt_debut']));: Cette ligne exécute la requête préparée précédemment en passant un tableau de valeurs en tant que paramètre. Les valeurs sont récupérées à partir de la superglobale $_POST qui contient les données saisies par l’utilisateur dans un formulaire HTML. Les valeurs sont associées aux marqueurs de paramètre de la requête SQL dans l’ordre où elles apparaissent dans le tableau.
5. ?>: Cette ligne indique que la fin du code PHP est atteinte.

En résumé, ce code établit une connexion à une base de données MySQL, prépare une requête SQL pour insérer des données dans la table « incidents » et exécute la requête en utilisant les données saisies par l’utilisateur dans un formulaire HTML qui pourrai être le suivant :

Voici l’explication de ce formulaire :

1. <form action="insertion.php" method="post">: Crée un formulaire HTML pour soumettre des données à « insertion.php » via la méthode HTTP POST.
2. <label for="event_user">Nom d'utilisateur :</label> et <input type="text" id="event_user" name="event_user"><br>: Crée un champ de saisie pour le nom d’utilisateur avec une étiquette associée.
3. <label for="event_objet">Objet de l'incident :</label> et <input type="text" id="event_objet" name="event_objet"><br>: Crée un champ de saisie pour l’objet de l’incident avec une étiquette associée.
4. <label for="event_com">Commentaires :</label> et <textarea id="event_com" name="event_com"></textarea><br>: Crée un champ de saisie de type « textarea » pour les commentaires de l’incident avec une étiquette associée.
5. <label for="event_dt_debut">Date et heure de début :</label> et <input type="datetime-local" id="event_dt_debut" name="event_dt_debut"><br>: Crée un champ de saisie pour la date et l’heure de début de l’incident avec une étiquette associée.
6. <input type="submit" value="Envoyer">: Crée un bouton d’envoi pour soumettre les données saisies dans le formulaire.