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

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.

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

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

---

Langkah 2: Cipta Pangkalan Data

1. Buka phpMyAdmin.
2. Buat pangkalan data baharu yang dipanggil todo_app.
3. 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
);

---

Langkah 3: Bina HTML Frontend

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

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

---

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

---

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

---

Langkah 7: Jalankan Aplikasi Anda

1. Buka penyemak imbas anda dan pergi ke http://localhost/todo_app/index.php.
2. 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! ?