PHP für Anfänger: Erstellen Sie Ihre erste datenbankgesteuerte Web-App

Wenn Sie gerade erst mit PHP beginnen, ist die Erstellung einer datenbankgesteuerten Web-App eines der aufregendsten Projekte, die Sie durchführen können. Dies ist eine großartige Möglichkeit, die Funktionsweise des Backends zu verstehen, mit einer Datenbank zu interagieren und Ihren Benutzern dynamische Inhalte bereitzustellen.

In diesem Tutorial erstellen wir eine einfache To-Do-Listen-App mit PHP und MySQL. Am Ende verfügen Sie über eine funktionierende Anwendung, in der Benutzer Aufgaben hinzufügen, anzeigen und löschen können.

---

Voraussetzungen

Bevor wir eintauchen, stellen Sie sicher, dass Sie Folgendes haben:

• PHP (Version 7.4 oder höher)
• MySQL (oder MariaDB)
• Ein lokaler Server wie XAMPP oder Laragon
• Ein Code-Editor wie VS Code

---

Schritt 1: Richten Sie Ihre Umgebung ein

1. Installieren Sie Ihren lokalen Server (z. B. XAMPP).
2. Starten Sie die Apache- und MySQL-Dienste.
3. Navigieren Sie zu Ihrem Web-Stammverzeichnis (htdocs für XAMPP) und erstellen Sie einen neuen Ordner namens todo_app.

---

Schritt 2: Erstellen Sie die Datenbank

1. Öffnen Sie phpMyAdmin.
2. Erstellen Sie eine neue Datenbank mit dem Namen todo_app.
3. Führen Sie die folgende SQL-Abfrage aus, um eine Aufgabentabelle zu erstellen:

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

---

Schritt 3: Erstellen Sie das HTML-Frontend

Erstellen Sie eine index.php-Datei im Ordner todo_app und fügen Sie den folgenden HTML-Code hinzu:

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

---

Schritt 5: Behandeln Sie das Löschen von Aufgaben

Erstellen Sie eine neue Datei mit dem Namen 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();
}
?>

---

Schritt 6: Fügen Sie etwas CSS hinzu (optional)

Erstellen Sie eine styles.css-Datei im selben Ordner, um Ihre App zu formatieren:

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

---

Schritt 7: Führen Sie Ihre Anwendung aus

1. Öffnen Sie Ihren Browser und gehen Sie zu http://localhost/todo_app/index.php.
2. Fügen Sie einige Aufgaben hinzu, zeigen Sie sie an und löschen Sie sie. ?

---

Herzlichen Glückwunsch! Sie haben gerade Ihre erste datenbankgesteuerte Web-App mit PHP und MySQL erstellt. Dieses einfache Projekt legt den Grundstein für die Erstellung komplexerer Anwendungen. Experimentieren Sie mit dem Hinzufügen von Funktionen wie Aufgabenpriorisierung oder Benutzerauthentifizierung.

Wenn Ihnen dieses Tutorial gefallen hat, hinterlassen Sie einen Kommentar oder teilen Sie ihn mit Ihren Entwicklerkollegen. Viel Spaß beim Codieren! ?