formations / php / php-les-formulaires-html
PHP & les formulaires HTML
Les formulaires HTML sont des éléments importants du développement web. Ils permettent aux utilisateurs de communiquer des informations à un site web. Dans ce tutoriel, nous allons voir comment créer un formulaire HTML avec PHP et MySQLi.
Mise en place du projet
Au cas ou vous n'ayez pas suivi les tutoriels précédent vous pouvez récupérer les sources ci-dessous. Il conviendra de créer une base de données nommée "base_demo" et d'importer celle fournie. Par ailleurs un projet devra être créé à la racine du dossier de l'émulateur, "www" pour Wamp et "htdocs" pour Xamp ou Mamp.
Les sources PHP/HTML/CSS du projet à mettre dans un dossier "animalerie" à la racine du dossier "www" ou "htdocs" de l'émulateur de serveur Apache en local.
Le fichier SQL de la base de données à importer dans une base de données vide de tables dans PhpMyAdmin.
Ensuite ? Vous êtes prêt, on peut commencer.
Dans le tutoriel sur le CRUD avec PHP et MySQLi, nous avons abordé l'utilisation des requêtes SQL abordées dans les tutoriels MySQL dans un contexte PHP. La limite de ce que nous avons vu concerne l'ajout et la modification des données, qui dans les sources fournies précédemment ne sont que des scripts qui exécute l'action une fois unique.
L'idée est donc de mettre en place un formulaire HTML qui permettra d'ajouter ou de modifier des données de la table des animaux. Ce formulaire devra contenir une partenir dynamique notamment quand au choix du type d'animal.
Nous allons donc préparer deux formulaires et nous verrons dans un tutoriel suivant comment gérer les données envoyées. C'est parti.
Le formulaire
Tout d'abord nous allons renommer le fichier "ajouter.php" en "create.php". On pensera à changer le lien vers cette page dans le fichier "index.php".
On crée un dossier ensuite "inc" dans lequel on crée deux fichiers nommés "_head.php" et "_header.php" (Pour rappel les bons usages veulent que les fichiers d'include commencent par _).
On coupe/colle le code de la balise "head" du fichier index.php dans le fichier "_head.php" à l'exception de la balise "title" et en lieu est place du code coupé dans le fichier index.php on fait un include du fichier "_head.php".
Le fichier "_head.php" :
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
La balise head du fichier "index.php" devient donc
<head>
<?php include("inc/_head.php"); ?>
<title>Ajouter un animal</title>
</head>
On répète l'opération pour le code du "header" en faisant un fichier d'include dans lequel on coupe/colle le code de la balise header du fichier "index.php".
Le fichier "_header.php" :
<header class="py-3 px-5 bg-dark text-light">L'animalerie</header>
On remplace la balise "header" du fichier "index.php" par un include php.
L'include du fichier "_header.php" dans le fichier "index.php".
<body class="bg-secondary">
<?php include("inc/_header.php"); ?>
<main class="container bg-white py-4">
<!-- Le reste du code -->
</main>
</body>
On met en place la structure html5 dans le fichier "create.php" et on y ajoute les includes de sorte que le code du fichier devient le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<?php include("inc/_head.php"); ?>
<title>Ajouter un animal</title>
</head>
<body class="bg-secondary">
<?php include("inc/_header.php"); ?>
<main class="container bg-white py-4">
<h1>Ajouter un animal</h1>
</main>
</body>
</html>
<?php
// On se connecte à la base de données en faisant un "require_once" du fichier "connexion.php"
require_once("connexion.php");
// On prépare la requête SQL qui va nous permettre d'ajouter un animal
$sql = "INSERT INTO animaux (nom, id_type_animal) VALUES ('Oscar', 2)";
// On exécute la requête SQL
//$result = mysqli_query($mysqli, $sql);
// On vérifie si la requête SQL s'est bien exécutée
/*if ($result === false) {
// On affiche l'erreur grâce à la fonction "mysqli_error()"
echo mysqli_error($mysqli);
} else {
// On redirige l'utilisateur vers la page "index.php"
header("Location: index.php");
}*/
?>
Nous gardons le code php d'origine, nous nous contentons de commenter pour la ligne d'exécution de la requête et la condition if.
Nous insérons le code html du formulaire sous la balise h1 comme illustré ci-dessous :
<form action="" method="post">
<div class="form-group">
<label for="nom">Nom de l'animal</label>
<input type="text" name="nom" id="nom" class="form-control">
</div>
<div class="form-group mt-3">
<label for="">Type d'animal</label>
<select name="type" class="form-control">
<!-- Les options dynamiques viendront ici -->
</select>
</div>
<button type="submit" class="btn btn-dark mt-4">Ajouter</button>
</form>
Comme l'indique le commentaire html dans le code précédent, nous allons maintenant mettre en place les balises "option" de la liste de choix de manière dynamique à l'aide de php.
Pour faire cela nous ajoutons le code suivant en lieu et place du commentaire html
<form action="" method="post">
<div class="form-group">
<label for="nom">Nom de l'animal</label>
<input type="text" name="nom" id="nom" class="form-control">
</div>
<div class="form-group mt-3">
<label for="">Type d'animal</label>
<select name="type" class="form-control">
<!-- Les options dynamiques viendront ici -->
<?php
// Connexion à la base de données
require_once("connexion.php");
// Requête SQL pour récupérer tous les types d'animaux
$sql = "SELECT * FROM animal_type";
// Exécution de la requête SQL
$result = mysqli_query($mysqli, $sql);
// On boucle sur le résultat de la requête SQL pour afficher chaque type d'animal dans une balise <option>
while ($row = mysqli_fetch_assoc($result)) {
echo "<option value='" . $row["id_type_animal"] . "'>" . $row["nom_type"] . "</option>";
}
?>
</select>
</div>
<button type="submit" class="btn btn-dark mt-4">Ajouter</button>
</form>
Nous avons maintenant un formulaire contenant une liste de choix (select/option) dynamique d'après la base de données.
On reproduit ce que l'on vient de faire pour le fichier "create.php" dans le fichier "update.php", de sorte que le code du fichier devient comme celui-ci dessous :
<!DOCTYPE html>
<html lang="en">
<head>
<?php include("inc/_head.php"); ?>
<title>Modifier l'animal</title>
</head>
<body class="bg-secondary">
<?php include("inc/_header.php"); ?>
<main class="container bg-white py-4">
<h1>Modifier l'animal</h1>
<form action="" method="post">
<div class="form-group">
<label for="nom">Nom de l'animal</label>
<input type="text" name="nom" id="nom" class="form-control">
</div>
<div class="form-group mt-3">
<label for="">Type d'animal</label>
<select name="type" class="form-control">
<!-- Les options dynamiques viendront ici -->
<?php
// Connexion à la base de données
require_once("connexion.php");
// Requête SQL pour récupérer tous les types d'animaux
$sql = "SELECT * FROM animal_type";
// Exécution de la requête SQL
$result = mysqli_query($mysqli, $sql);
// On boucle sur le résultat de la requête SQL pour afficher chaque type d'animal dans une balise <option>
while ($row = mysqli_fetch_assoc($result)) {
echo "<option value='" . $row["id_type_animal"] . "'>" . $row["nom_type"] . "</option>";
}
?>
</select>
</div>
<button type="submit" class="btn btn-dark mt-4">Ajouter</button>
</form>
</main>
</body>
</html>
<?php
// On se connecte à la base de données en faisant un "require_once" du fichier "connexion.php"
require_once("connexion.php");
// On prépare la requête SQL qui va mettre à jour le nom de l'animal dont l'id est 11
$sql = "UPDATE animaux SET nom = 'Speedy' WHERE id = 11";
// On exécute la requête SQL
//$result = mysqli_query($mysqli, $sql);
// On vérifie si la requête SQL s'est bien exécutée
/*if ($result === false) {
// On affiche l'erreur grâce à la fonction "mysqli_error()"
echo mysqli_error($mysqli);
} else {
// On redirige l'utilisateur vers la page "index.php"
header("Location: index.php");
}*/
?>
Les sources en l'état peuvent être téléchargées.
Nous allons maintenant pouvoir aller plus loin avec le tutoriel sur le traitement des formulaires avec Php et les notions des superglobales que sont notamment $_POST, $_GET ou encore $_FILES
Tutos du jour
