Bonjour et bienvenue dans un nouveau chapitre de cette formation.

La semaine passée nous avons mis en place la base de données. Si vous n’avez pas encore lu l’article, il est disponible ICI. Désormais, notre BDD est prête à recevoir des informations et ce sera l’objet de l’article d’aujourd’hui:

Comment envoyer des données vers notre base de données ?

Premièrement il va nous falloir créer un formulaire, c’est lui qui enverra par la suite les données vers la BDD.

Nous allons donc créer un fichier nommé ‘add.php’ dans un dossier ‘admin’ car tout le monde ne pourra pas créer d’article.

Tout d’abord, pas besoin de PHP, juste la construction du formulaire en HTML.

Nous voulons les champs suivants:

  • Titre
  • Sous-titre
  • Corps de texte
  • Note

Le formulaire de base pour ces derniers donne:

<form>

   <input type="text" placeholder="Titre" /><br /><br />

   <input type="text" placeholder="Sous-titre" /><br /><br />

   Contenu de l'article:<br />

   <textarea></textarea><br /><br />

   1.<input type="radio" name="note" value="1" /><br /><br />

   2.<input type="radio" name="note" value="2" /><br /><br />

   3.<input type="radio" name="note" value="3" /><br /><br />

   <input type="submit" value="Ajouter"/>

</form>

Pour récupérer les données du formulaire, il faut choisir la méthode que nous allons utiliser par la suite. Nous avons le choix entre GET et POST. La plus utile dans notre cas est la méthode POST, nous allons donc l’utiliser.

Pour cela il faut rajouter ‘ method=”post” ’ dans la balise

.

Par ailleurs, il faut aussi donner un nom aux champs qui n’en ont pas.

Nous pouvons aussi obliger l’utilisateur à ce que tous les champs soient remplis en ajoutant ‘required’ comme attribut dans les balises input.

Nous voilà avec un formulaire terminé comme celui-ci:

<form method="post">

   <input type="text" placeholder="Titre" name="title" required /><br /><br />

   <input type="text" placeholder="Sous-titre" name="subtitle" required /><br /><br />

   Contenu de l'article:<br />

   <textarea name="content" required ></textarea><br /><br />

   1.<input type="radio" name="note" value="1" /><br /><br />

   2.<input type="radio" name="note" value="2" /><br /><br />

   3.<input type="radio" name="note" value="3" /><br /><br />

   <input type="submit" value="Ajouter"/>

</form>

Maintenant, il faut rendre ce formulaire fonctionnel. Pour cela nous allons rajouter au début de notre fichier les balises <?php ?> qui permettent de rajouter du code PHP dans notre fichier.

Avant d’envoyer les données vers la base de données, il faut déjà s’y connecter.

$conn = mysqli_connect('localhost', 'root','', 'cms');

Si vous souhaitez vérifier que la connexion se fait bien, vous pouvez ajouter:

var_dump($conn);

Ensuite, il faut créer la query en langage SQL.

$query = "INSERT INTO

 articles (title, subtitle, content, note)

VALUES

 (

   '$_POST[title]',

   '$_POST[subtitle]',

   '$_POST[content]',

   '$_POST[note]'

 )";

Maintenant que l’on a notre query, il faut l’exécuter et vérifier si tout fonctionne correctement.

$insert = mysqli_query($conn,$query); //

 if ($insert) {

   echo 'Article publié !';

 } else {

   echo 'Il y a eu une erreur !';

   var_dump($conn->error);

 }

}

Tout ce code mis bout à bout nous donne un fichier add.php comme celui-ci:

<?php

$conn = mysqli_connect('localhost', 'root','', 'cms'); //connection à la base de données

if (isset($_POST['submit'])){ //vérification que le formulaire a bien été envoyé

 $query = "INSERT INTO

 articles (title, subtitle, content, note)

VALUES

 (

   '$_POST[title]',

   '$_POST[subtitle]',

   '$_POST[content]',

   '$_POST[note]'

 )"; //création de la query avec récupération des valeurs du formulaire

 $insert = mysqli_query($conn,$query); //éxecution de la query

 if ($insert) {

   echo 'Article publié !'; //Si la query a été éxecutée correctement alors on affiche un message de confirmation

 } else {

   echo 'Il y a eu une erreur !'; //Dans le cas contraire, un message d'alerte

   var_dump($conn->error); //accompagné de l'erreur.

 }

}

?>

<html>

<head>

 <title>Page d'Ajout d'articles</title>

 <meta charset="utf-8" />

</head>

<body>

 <form method="post">

   <input type="text" placeholder="Titre" name="title" required /><br /><br />

   <input type="text" placeholder="Sous-titre" name="subtitle" required /><br /><br />

   Contenu de l'article:<br />

   <textarea name="content" required ></textarea><br /><br />

   1.<input type="radio" name="note" value="1" /><br /><br />

   2.<input type="radio" name="note" value="2" /><br /><br />

   3.<input type="radio" name="note" value="3" /><br /><br />

   <input type="submit" name="submit" value="Ajouter"/>

 </form>

</body>

</html>

Pour vérifier que tout fonctionne, on peut essayer d’envoyer des données à travers notre page.

On rempli le formulaire puis on clique sur ‘Envoyer’ et ensuite direction PhpMyAdmin pour vérifier que les valeurs ont bien été envoyées à la table ‘articles’.

Nous voyons que les données ont bien été ajoutées correctement. On recommence avec un deuxième envoi.

De même que précédemment, cela fonctionne. Notre script est donc fonctionnel. Aussi, nous voyons que les colonnes de ID et date se sont correctement remplies automatiquement.

Voilà ce chapitre terminé ! Désormais il va falloir récupérer ces valeurs depuis la BDD pour les afficher sur notre page d’accueil. Ce sera l’objet de notre prochain article !

N’hésitez pas à partager si vous pensez que cela peut aussi permettre d’aider d’autres personnes.

Merci pour votre présence sur le blog, on avance ensemble !