CRUD Aplikacija za Upravljanje Člancima - Tutorijal

TD – Application de Gestion d’Articles (CRUD)
Correction très détaillée avec le code complet commenté ligne par ligne.
Technologies : HTML, CSS, JavaScript, PHP, MySQL
1. Création de la base de données
Cette étape consiste à créer la base de données et la table qui stockera les articles.
CREATE DATABASE gestion_articles;
USE gestion_articles;
CREATE TABLE article (
id INT AUTO_INCREMENT PRIMARY KEY, -- Identifiant unique
titre VARCHAR(150) NOT NULL, -- Titre de l'article
description TEXT NOT NULL, -- Description détaillée
prix INT NOT NULL, -- Prix de l'article
date_creation DATE NOT NULL -- Date de création
);
2. Connexion à la base de données (connexion.php)
Ce fichier permet de centraliser la connexion à MySQL grâce à PDO.
<?php
$host = "localhost"; // Serveur MySQL
$dbname = "gestion_articles"; // Nom de la base
$user = "root"; // Utilisateur
$password = ""; // Mot de passe
try {
// Création de la connexion PDO
$connexion = new PDO(
"mysql:host=$host;dbname=$dbname;charset=utf8",
$user,
$password
);
// Activation du mode erreur
$connexion->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
// Message d'erreur en cas d'échec
die("Erreur de connexion : " . $e->getMessage());
}
?>
3. Affichage des articles (index.php)
Ce fichier affiche tous les articles dans un tableau HTML.
<?php
require "connexion.php"; // Inclusion de la connexion
$requete = $connexion->query("SELECT * FROM article ORDER BY id DESC");
$articles = $requete->fetchAll(); // Récupération des articles

?>
4. Formulaire d'ajout et de modification (form_article.php)
Un même formulaire est utilisé pour l'ajout et la modification.
<form method="POST" action="ajouter.php" onsubmit="return verifierFormulaire();">
<!-- Champ titre -->
<input type="text" name="titre" id="titre">
<!-- Champ description -->
<textarea name="description" id="description"></textarea>
<!-- Champ prix -->
<input type="number" name="prix" id="prix">
<!-- Bouton de validation -->
<button type="submit">Enregistrer</button>
</form>
5. Ajout d’un article (ajouter.php)
Insertion d'un nouvel article après vérification des données.
<?php
require "connexion.php";
if (!empty($_POST['titre']) && !empty($_POST['description']) && !empty($_POST['prix'])) {
$req = $connexion->prepare(
"INSERT INTO article (titre, description, prix, date_creation)
VALUES (?, ?, ?, CURDATE())"
);
$req->execute([
$_POST['titre'],
$_POST['description'],
$_POST['prix']
]);
}
header("Location: index.php"); // Redirection
?>
6. Modification d’un article (modifier.php)
Mise à jour d'un article existant.
<?php
require "connexion.php";
$req = $connexion->prepare(
"UPDATE article SET titre=?, description=?, prix=? WHERE id=?"
);
$req->execute([
$_POST['titre'],
$_POST['description'],

$_POST['prix'],
$_POST['id']
]);
header("Location: index.php");
?>
7. Suppression d’un article (supprimer.php)
Suppression sécurisée avec confirmation JavaScript.
<?php
require "connexion.php";
$req = $connexion->prepare("DELETE FROM article WHERE id = ?");
$req->execute([$_GET['id']]);
header("Location: index.php");
?>
8. JavaScript (script.js)
Vérification des champs et confirmation des actions.
function verifierFormulaire() {
let titre = document.querySelector("#titre").value;
let description = document.querySelector("#description").value;
let prix = document.querySelector("#prix").value;
if (titre === "" || description === "" || prix === "") {
alert("Tous les champs sont obligatoires !");
return false;
}
return true;
}
function confirmerSuppression() {
return confirm("Voulez-vous vraiment supprimer cet article ?");
}
9. Mise en forme CSS (style.css)
Amélioration de l’apparence de l’application.
body {
font-family: Arial;
padding: 20px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {

border: 1px solid #ccc;
padding: 10px;
}
.btn-supprimer {
background: red;
color: white;
}
10. Conclusion générale
Ce TD montre une application complète respectant les principes CRUD et les bonnes pratiques
du développement web.