Posted on by

TP(PHP) : Gestion des tâches

Dans ce TP, vous allez créer une application CRUD pour gérer une liste de tâches en utilisant PHP et HTML. Voici les fonctionnalités que votre application devrait avoir :

Fonctionnalités

  • Afficher la liste des tâches existantes
  • Ajouter une nouvelle tâche
  • Marquer une tâche comme terminée
  • Supprimer une tâche

Instructions

  1. Créez une base de données MySQL avec une table tasks contenant les colonnes suivantes :
    • id : identifiant de la tâche (clé primaire)
    • title : titre de la tâche (texte)
    • completed : indique si la tâche est terminée (booléen)
    • created_at : date de création de la tâche (timestamp)
  2. Créez un script PHP config.php qui se connecte à la base de données.
  3. Créez un script PHP tasks.php qui implémente les fonctionnalités CRUD suivantes :
    • getTasks() : récupère la liste des tâches depuis la base de données
    • createTask($title) : crée une nouvelle tâche avec le titre spécifié
    • updateTask($id, $completed) : met à jour l’état de la tâche avec l’identifiant spécifié
    • deleteTask($id) : supprime la tâche avec l’identifiant spécifié
  4. Créez une page HTML index.html avec les éléments suivants :
    • un formulaire pour ajouter une nouvelle tâche, avec un champ de saisie et un bouton « Ajouter »
    • une liste de tâches, avec une case à cocher pour marquer une tâche comme terminée et un bouton pour supprimer une tâche
  5. Créez un fichier PHP index.php qui utilise les scripts config.php et tasks.php pour afficher la liste des tâches et gérer les opérations CRUD via des soumissions de formulaire.
  6. Utilisez des styles CSS pour améliorer l’apparence de votre application.

Conseils

  • Pour gérer les soumissions de formulaire, vous pouvez utiliser les méthodes HTTP GET et POST de PHP.
  • Pour générer du code HTML dynamiquement en PHP, vous pouvez utiliser la syntaxe <?php ... ?> et la fonction echo.

Solution

1- Créez une base de données MySQL avec une table tasks : 

CREATE DATABASE IF NOT EXISTS `nom_de_votre_base_de_donnees`;

USE `nom_de_votre_base_de_donnees`;

CREATE TABLE `tasks` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `completed` tinyint(1) NOT NULL DEFAULT '0',
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Ce code va créer une base de données avec le nom spécifié (remplacez nom_de_votre_base_de_donnees par le nom que vous souhaitez utiliser), puis crée une table tasks avec les colonnes spécifiées (id, title, completed et created_at). La colonne id est la clé primaire de la table, qui est auto-incrémentée pour chaque nouvelle ligne ajoutée.

2- Créez un script PHP config.php qui se connecte à la base de données.

EN PDO
<?php

// Configuration de la connexion à la base de données
$hostname = 'localhost';   // Le nom d'hôte du serveur MySQL
$username = 'utilisateur'; // Le nom d'utilisateur MySQL
$password = 'motdepasse';  // Le mot de passe MySQL
$database = 'ma_base';     // Le nom de la base de données

// Connexion à la base de données
try {
  $bdd = new PDO('mysql:host='.$hostname.';dbname='.$database, $username, $password);
  $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
  echo 'Erreur de connexion : ' . $e->getMessage();
}
EN MySQLi
<?php

// Configuration de la connexion à la base de données
$hostname = 'localhost';   // Le nom d'hôte du serveur MySQL
$username = 'utilisateur'; // Le nom d'utilisateur MySQL
$password = 'motdepasse';  // Le mot de passe MySQL
$database = 'ma_base';     // Le nom de la base de données

// Connexion à la base de données
$bdd = new mysqli($hostname, $username, $password, $database);

// Vérification de la connexion
if ($mysqli->connect_error) {
    die("La connexion à la base de données a échoué : " . $bdd->connect_error);
}

3- Créez un script PHP tasks.php qui implémente les fonctionnalités CRUD suivantes :

  • getTasks() : récupère la liste des tâches depuis la base de données
  • createTask($title) : crée une nouvelle tâche avec le titre spécifié
  • updateTask($id, $completed) : met à jour l’état de la tâche avec l’identifiant spécifié
  • deleteTask($id) : supprime la tâche avec l’identifiant spécifié

EN MySQLI

<?php

// Inclure le fichier de configuration de la base de données
require_once 'config.php';

// Fonction pour récupérer la liste des tâches
function getTasks() {
    global $bdd;
    $query = "SELECT * FROM tasks";
    $result = $bdd->query($query);
    $tasks = $result->fetch_all(MYSQLI_ASSOC);
    return $tasks;
}

// Fonction pour créer une nouvelle tâche
function createTask($title) {
    global $bdd;
    $title = $bdd->real_escape_string($title);
    $query = "INSERT INTO tasks (title) VALUES ('$title')";
    $bdd->query($query);
    return $bdd->insert_id;
}

// Fonction pour mettre à jour l'état d'une tâche
function updateTask($id, $completed) {
    global $bdd;
    $query = "UPDATE tasks SET completed='$completed' WHERE id=$id";
    $bdd->query($query);
}

// Fonction pour supprimer une tâche
function deleteTask($id) {
    global $bdd;
    $query = "DELETE FROM tasks WHERE id=$id";
    $bdd->query($query);
}

EN PDO

<?php

// Inclure le fichier de configuration de la base de données
require_once 'config.php';

// Fonction pour récupérer la liste des tâches
function getTasks() {
    global $pdo;
    $query = "SELECT * FROM tasks";
    $statement = $pdo->query($query);
    $tasks = $statement->fetchAll(PDO::FETCH_ASSOC);
    return $tasks;
}

// Fonction pour créer une nouvelle tâche
function createTask($title) {
    global $pdo;
    $query = "INSERT INTO tasks (title) VALUES (:title)";
    $statement = $pdo->prepare($query);
    $statement->bindValue(':title', $title, PDO::PARAM_STR);
    $statement->execute();
    return $pdo->lastInsertId();
}

// Fonction pour mettre à jour l'état d'une tâche
function updateTask($id, $completed) {
    global $pdo;
    $query = "UPDATE tasks SET completed=:completed WHERE id=:id";
    $statement = $pdo->prepare($query);
    $statement->bindValue(':completed', $completed, PDO::PARAM_BOOL);
    $statement->bindValue(':id', $id, PDO::PARAM_INT);
    $statement->execute();
}

// Fonction pour supprimer une tâche
function deleteTask($id) { 
    global $pdo;
    $query = "DELETE FROM tasks WHERE id=:id";
    $statement = $pdo->prepare($query);
    $statement->bindValue(':id', $id, PDO::PARAM_INT);
    $statement->execute();
}

4- Créez une page HTML index.html avec les éléments suivants :

  • un formulaire pour ajouter une nouvelle tâche, avec un champ de saisie et un bouton « Ajouter »
  • une liste de tâches, avec une case à cocher pour marquer une tâche comme terminée et un bouton pour supprimer une tâche
<!DOCTYPE html>
<html>
<head>
	<title>Ma liste de tâches</title>
	<meta charset="UTF-8">
</head>
<body>
	<h1>Ma liste de tâches</h1>

	<!-- Formulaire pour ajouter une nouvelle tâche -->
	<form action="ajouter_tache.php" method="POST">
		<label for="nouvelle_tache">Ajouter une nouvelle tâche :</label>
		<input type="text" id="nouvelle_tache" name="nouvelle_tache">
		<input type="submit" value="Ajouter">
	</form>

	<!-- Liste de tâches -->
	<table>
		<thead>
			<tr>
				<th>Tâche</th>
				<th>Terminée</th>
				<th>Action</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Faire les courses</td>
				<td><input type="checkbox" id="tache_1" name="tache_1"></td>
				<td><button>Supprimer</button></td>
			</tr>
			<tr>
				<td>Faire la vaisselle</td>
				<td><input type="checkbox" id="tache_2" name="tache_2"></td>
				<td><button>Supprimer</button></td>
			</tr>
			<tr>
				<td>Sortir la poubelle</td>
				<td><input type="checkbox" id="tache_3" name="tache_3"></td>
				<td><button>Supprimer</button></td>
			</tr>
		</tbody>
	</table>
</body>
</html>

5- Créez un fichier PHP index.php qui utilise les scripts config.php et tasks.php pour afficher la liste des tâches et gérer les opérations CRUD via des soumissions de formulaire.

<?php
// inclusion des scripts de connexion et de gestion de tâches
require_once('config.php');
require_once('tasks.php');

// gestion des opérations CRUD via des soumissions de formulaire
if (isset($_POST['action'])) {
    if ($_POST['action'] == 'create') {
        $title = $_POST['title'];
        createTask($title);
    } elseif ($_POST['action'] == 'update') {
        $id = $_POST['id'];
        $completed = isset($_POST['completed']) ? 1 : 0;
        updateTask($id, $completed);
    } elseif ($_POST['action'] == 'delete') {
        $id = $_POST['id'];
        deleteTask($id);
    }
}

// récupération de la liste des tâches
$tasks = getTasks();
?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Liste des tâches</title>
</head>
<body>
    <h1>Liste des tâches</h1>

    <!-- formulaire d'ajout de tâche -->
    <form method="POST">
        <label for="title">Ajouter une tâche :</label>
        <input type="text" name="title" id="title">
        <input type="submit" value="Ajouter">
        <input type="hidden" name="action" value="create">
    </form>

    <!-- liste des tâches -->
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Titre</th>
                <th>Terminée</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($tasks as $task) { ?>
                <tr>
                    <td><?= $task['id'] ?></td>
                    <td><?= $task['title'] ?></td>
                    <td>
                        <form method="POST">
                            <input type="checkbox" name="completed" value="1" <?= $task['completed'] ? 'checked' : '' ?> onchange="this.form.submit()">
                            <input type="hidden" name="id" value="<?= $task['id'] ?>">
                            <input type="hidden" name="action" value="update">
                        </form>
                    </td>
                    <td>
                        <form method="POST">
                            <input type="submit" value="Supprimer" onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette tâche ?')">
                            <input type="hidden" name="id" value="<?= $task['id'] ?>">
                            <input type="hidden" name="action" value="delete">
                        </form>
                    </td>
                </tr>
            <?php } ?>
        </tbody>
    </table>
</body>
</html>

6- Utilisez des styles CSS pour améliorer l’apparence de votre application.

/* Styles pour la table des tâches */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th, td {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #4CAF50;
  color: white;
}

/* Styles pour le formulaire d'ajout de tâches */
form {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

input[type=text] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 10px;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Styles pour les boutons de la table */
button {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #d32f2f;
}

/* Styles pour les cases à cocher */
input[type=checkbox] {
  margin-right: 10px;
}
Posted in PHP

Published by Fadili

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *