PHP pour les débutants : créer votre première application Web basée sur une base de données

Si vous débutez avec PHP, l'un des projets les plus passionnants que vous puissiez entreprendre consiste à créer une application Web basée sur une base de données. C'est un excellent moyen de comprendre le fonctionnement du backend, d'interagir avec une base de données et d'apporter du contenu dynamique à vos utilisateurs.

Dans ce didacticiel, nous allons créer une application de liste de tâches simple en utilisant PHP et MySQL. À la fin, vous disposerez d’une application fonctionnelle dans laquelle les utilisateurs pourront ajouter, afficher et supprimer des tâches.

---

Conditions préalables

Avant de plonger, assurez-vous d'avoir :

• PHP (version 7.4 ou supérieure)
• MySQL (ou MariaDB)
• Un serveur local comme XAMPP ou Laragon
• Un éditeur de code comme VS Code

---

Étape 1 : Configurez votre environnement

1. Installez votre serveur local (par exemple, XAMPP).
2. Démarrez les services Apache et MySQL.
3. Accédez à votre répertoire racine Web (htdocs pour XAMPP) et créez un nouveau dossier appelé todo_app.

---

Étape 2 : Créer la base de données

1. Ouvrez phpMyAdmin.
2. Créez une nouvelle base de données appelée todo_app.
3. Exécutez la requête SQL suivante pour créer une table de tâches :

sql
CREATE TABLE tasks (
    id INT AUTO_INCREMENT PRIMARY KEY,
    task VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

---

Étape 3 : Créer l'interface HTML

Créez un fichier index.php dans le dossier todo_app et ajoutez le HTML suivant :

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List App</title>
    <link rel="stylesheet" href="styles.css">


    <div>




<hr>

<h2>
  
  
  Step 4: Handle Adding Tasks
</h2>

<p>Create a new file called <em>add_task.php</em> and add the following code:<br>
</p>

<pre class="brush:php;toolbar:false"><?php if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $task = $_POST['task'];

    // Connect to the database
    $conn = new mysqli("localhost", "root", "", "todo_app");

    // Insert the task into the database
    $stmt = $conn->prepare("INSERT INTO tasks (task) VALUES (?)");
    $stmt->bind_param("s", $task);
    $stmt->execute();

    $stmt->close();
    $conn->close();

    // Redirect back to the main page
    header("Location: index.php");
    exit();
}
?>

---

Étape 5 : Gérer la suppression de tâches

Créez un nouveau fichier appelé delete_task.php :

<?php if (isset($_GET['id'])) {
    $id = $_GET['id'];

    // Connect to the database
    $conn = new mysqli("localhost", "root", "", "todo_app");

    // Delete the task from the database
    $stmt = $conn->prepare("DELETE FROM tasks WHERE id = ?");
    $stmt->bind_param("i", $id);
    $stmt->execute();

    $stmt->close();
    $conn->close();

    // Redirect back to the main page
    header("Location: index.php");
    exit();
}
?>

---

Étape 6 : ajouter du CSS (facultatif)

Créez un fichier styles.css dans le même dossier pour styliser votre application :

body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    color: #333;
    margin: 0;
    padding: 0;
}

.container {
    width: 50%;
    margin: 50px auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

h1 {
    text-align: center;
}

form {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

form input {
    flex: 1;
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

form button {
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

form button:hover {
    background-color: #218838;
}

ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

ul li a {
    color: #dc3545;
    text-decoration: none;
}

---

Étape 7 : Exécutez votre application

1. Ouvrez votre navigateur et accédez à http://localhost/todo_app/index.php.
2. Ajoutez des tâches, affichez-les et supprimez-les. ?

---

Félicitations ! Vous venez de créer votre première application Web basée sur une base de données avec PHP et MySQL. Ce projet simple jette les bases de la création d'applications plus complexes. Expérimentez en ajoutant des fonctionnalités telles que la priorisation des tâches ou l'authentification des utilisateurs.

Si vous avez apprécié ce tutoriel, déposez un commentaire ou partagez-le avec vos collègues développeurs. Bon codage ! ?