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

Heim

PHP-Tutorial

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

Jan 06, 2025 am 01:23 AM

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.

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

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

Installieren Sie Ihren lokalen Server (z. B. XAMPP).
Starten Sie die Apache- und MySQL-Dienste.
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

Öffnen Sie phpMyAdmin.
Erstellen Sie eine neue Datenbank mit dem Namen todo_app.
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
);

Nach dem Login kopieren

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:

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;To-Do List App&lt;/title&gt;
    &lt;link rel="stylesheet" href="styles.css"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;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">&lt;?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-&gt;prepare("INSERT INTO tasks (task) VALUES (?)");
    $stmt-&gt;bind_param("s", $task);
    $stmt-&gt;execute();

    $stmt-&gt;close();
    $conn-&gt;close();

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

Nach dem Login kopieren

Schritt 5: Behandeln Sie das Löschen von Aufgaben

Erstellen Sie eine neue Datei mit dem Namen delete_task.php:

&lt;?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-&gt;prepare("DELETE FROM tasks WHERE id = ?");
    $stmt-&gt;bind_param("i", $id);
    $stmt-&gt;execute();

    $stmt-&gt;close();
    $conn-&gt;close();

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Schritt 7: Führen Sie Ihre Anwendung aus

Öffnen Sie Ihren Browser und gehen Sie zu http://localhost/todo_app/index.php.
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! ?

Das obige ist der detaillierte Inhalt vonPHP für Anfänger: Erstellen Sie Ihre erste datenbankgesteuerte Web-App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn