Jurnal Modul 7

Modul 7 ini mempelajari tentang membuat sebuah aplikasi web sederhana menggunakan PHP dan MySQL.

Berikut merupakan codingan beserta penjelasan singkatnya :

<aside> 🐘

config.php

</aside>

<?php
$host = 'localhost';
$user = 'root';
$password = '';
$database = 'todo_app';

$mysqli = new mysqli($host, $user, $password, $database);

if ($mysqli->connect_errno) {
  die("Koneksi gagal: " . $mysqli->connect_error);
}

// Set charset untuk menghindari masalah encoding
$mysqli->set_charset("utf8mb4");

// Di config.php, tambahkan session_start();
session_start();

// Di add.php, sesuaikan query dengan user_id
$stmt = $mysqli->prepare("INSERT INTO tasks (title, description, user_id) VALUES (?, ?, ?)");
$stmt->bind_param("ssi", $title, $description, $_SESSION['user_id']);

?>

Kode ini digunakan untuk menghubungkan PHP dengan database todo_app di server lokal menggunakan mysqli. Setelah koneksi dibuat, dicek dulu apakah berhasil atau tidak, kalau gagal maka program langsung berhenti dan menampilkan pesan error. Kemudian charset diset ke utf8mb4 supaya semua karakter termasuk emoji bisa terbaca dengan baik. session start() dipanggil supaya bisa menggunakan data session user yang login. Kemudian ada perintah untuk menambahkan data tugas baru ke tabel tasks, yang isinya berupa judul, deskripsi, dan id user dari session yang sedang aktif. Kode ini penting supaya tugas yang dibuat tersimpan sesuai dengan user yang memasukkannya.

<aside> 🐘

add.php

</aside>

<?php
include 'config.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $title = $mysqli->real_escape_string($_POST['title']);
    $description = $mysqli->real_escape_string($_POST['description'] ?? '');

    $stmt = $mysqli->prepare("INSERT INTO tasks (title, description)VALUES(?, ?)");
    $stmt->bind_param("ss", $title, $description);

    if ($stmt->execute()) {
      header("LOCATION: index.php?success=1");
    } else {
      echo "Error: ",$stmt->error;
    } 

    $stmt->close();
}

$mysqli->close();

Kode ini digunakan untuk menyimpan data tugas baru ke tabel tasks di database. File config.php dipanggil untuk koneksi ke database. Kalau ada form yang dikirim (metode POST), data title dan description diambil dan diamankan dulu agar tidak kena serangan SQL Injection. Setelah itu, data dimasukan ke database menggunakan query INSERT. Kalau berhasil, user langsung diarahkan ke halaman utama (index.php) dengan pesan sukses, kalau gagal akan menampilkan pesan error. Setelah semua selesai, koneksi ke database ditutup.

<aside> 🐘

index.php

</aside>

<?php include 'config.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Modul 7 - Todo App</title>
    <link href= "<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet">
</head>
<body class="container mt-5">
    <h1> 👸 My Todo List 👸</h1>

    <!-- Form Tambah Data -->
    <form method="POST" action="add.php" class="mb-4">
        <div class="row">
            <div class="col-8">
                <input type="text" name="title" class="form-control" placeholder="Judul task" required>
        </div>
        <div class="col-4">
            <button type="submit" class="btn btn-info">➕ Tambah</button>
        </div>
    </div>
</form>
 
<!-- Tabel Data -->
 <table class="table table-striped">
    <thead>
     <tr>
        <th>#</th>
        <th>Task</th>
        <th>Deskripsi</th>
        <th>Aksi</th>
    </tr>
  </thead>
  <tbody>
    <?php
    $result = $mysqli->query("SELECT * FROM tasks ORDER BY created_at DESC");
    while ($row = $result->fetch_assoc()):
    ?>
    <tr>
      <td><?= $row['id'] ?></td>
      <td><?= htmlspecialchars($row['title']) ?></td>
      <td><?= htmlspecialchars($row['description']) ?></td>
      <td>
        <a href="edit.php?id=<?= $row['id'] ?>" class="btn btn-sm btn-warning"> 🌠 Edit</a>
        <a href="delete.php?id=<?= $row['id'] ?>" class="btn btn-sm btn-danger"> 🕳 Hapus</a>
      </td>
    </tr>
    <?php endwhile; ?>
  </tbody>
 </table>
</body>
</html>

Kode ini digunakan untuk menampilkan halaman utama dari aplikasi web todo_app. config.php dipanggil supaya terkoneksi ke database. Di bagian <head>, halaman ini memakai Bootstrap lewat CDN agar desain webnya kelihatan rapi, modern, dan responsif tanpa harus banyak nulis CSS manual. Lalu di <body>, ada judul besar "My Todo List" yang memberi tahu isi halaman ini. Setelah itu ada form untuk menambahkan task baru, dimana pengguna bisa menulis judul tugas yang mau ditambahkan, lalu klik tombol "Tambah" untuk mengirim data tersebut ke file add.php lewat metode POST.

Setelah form, ada tabel yang isinya semua tugas yang sudah disimpan di database. Data tugas ini diambil menggunakan query (SELECT * FROM tasks ORDER BY created_at DESC), artinya tugas ditampilkan dari yang terbaru dulu. Di dalam tabel, setiap baris mewakili satu tugas, lengkap dengan kolom id, judul task, deskripsi task, dan tombol aksi. Untuk setiap task, ada dua tombol aksi yaitu Edit (untuk mengubah isi task lewat edit.php) dan Hapus (untuk menghapus task lewat delete.php). Supaya lebih aman, data yang ditampilkan (judul dan deskripsi) di escape menggunakan htmlspecialchars, jadi kalau ada karakter aneh dari input pengguna, tidak langsung dijalankan browser (menghindari serangan XSS).