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

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

Susan Sarandon

Libérer： 2025-01-06 01:23:43

original

745 Les gens l'ont consulté

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.

PHP for Beginners: Building Your First Database-Driven Web App

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

Installez votre serveur local (par exemple, XAMPP).
Démarrez les services Apache et MySQL.
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

Ouvrez phpMyAdmin.
Créez une nouvelle base de données appelée todo_app.
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
);

Copier après la connexion

Étape 3 : Créer l'interface HTML

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

<!DOCTYPE html>
<html lang="en">
<head>
    <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">
</head>
<body>
    <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();
}
?>

Copier après la connexion

É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();
}
?>

Copier après la connexion

É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;
}

Copier après la connexion

Étape 7 : Exécutez votre application

Ouvrez votre navigateur et accédez à http://localhost/todo_app/index.php.
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 ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!