PHP untuk Pemula: Membina Apl Web Dipacu Pangkalan Data Pertama Anda-tutorial php-php.cn

PHP untuk Pemula: Membina Apl Web Dipacu Pangkalan Data Pertama Anda

Susan Sarandon

Lepaskan： 2025-01-06 01:23:43

asal

789 orang telah melayarinya

Jika anda baru bermula dengan PHP, salah satu projek paling menarik yang boleh anda lakukan ialah membina apl web dipacu pangkalan data. Ini cara yang bagus untuk memahami cara bahagian belakang berfungsi, berinteraksi dengan pangkalan data dan membawa kandungan dinamik kepada pengguna anda.

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

Dalam tutorial ini, kami akan membina Apl Senarai Tugasan mudah menggunakan PHP dan MySQL. Pada akhirnya, anda akan mempunyai aplikasi yang berfungsi di mana pengguna boleh menambah, melihat dan memadamkan tugasan.

Prasyarat

Sebelum kami menyelam, pastikan anda mempunyai:

PHP (versi 7.4 ke atas)
MySQL (atau MariaDB)
Pelayan tempatan seperti XAMPP atau Laragon
Penyunting kod seperti Kod VS

Langkah 1: Sediakan Persekitaran Anda

Pasang pelayan setempat anda (cth., XAMPP).
Mulakan perkhidmatan Apache dan MySQL.
Navigasi ke direktori akar web anda (htdocs untuk XAMPP) dan buat folder baharu bernama todo_app.

Langkah 2: Cipta Pangkalan Data

Buka phpMyAdmin.
Buat pangkalan data baharu yang dipanggil todo_app.
Jalankan pertanyaan SQL berikut untuk mencipta jadual tugas:

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

Salin selepas log masuk

Langkah 3: Bina HTML Frontend

Buat fail index.php dalam folder todo_app dan tambahkan HTML berikut:

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

Salin selepas log masuk

Langkah 5: Mengendalikan Tugasan Pemadaman

Buat fail baharu bernama 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();
}
?>

Salin selepas log masuk

Langkah 6: Tambah Beberapa CSS (Pilihan)

Buat fail styles.css dalam folder yang sama untuk menggayakan apl anda:

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

Salin selepas log masuk

Langkah 7: Jalankan Aplikasi Anda

Buka penyemak imbas anda dan pergi ke http://localhost/todo_app/index.php.
Tambahkan beberapa tugasan, lihatnya dan padamkannya. ?

Tahniah! Anda baru sahaja membina apl web dipacu pangkalan data pertama anda dengan PHP dan MySQL. Projek mudah ini meletakkan asas untuk mencipta aplikasi yang lebih kompleks. Eksperimen dengan menambahkan ciri seperti keutamaan tugas atau pengesahan pengguna.

Jika anda menikmati tutorial ini, lepaskan ulasan atau kongsikannya dengan rakan pembangun anda. Selamat mengekod! ?

Atas ialah kandungan terperinci PHP untuk Pemula: Membina Apl Web Dipacu Pangkalan Data Pertama Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!