Langkah 3 - Menambahkan Tombol Aksi di index.php

Biar data yang udah tampil bisa diapa-apain (dilihat detailnya, diedit, atau dihapus), kita perlu nambahin tombol aksi di tabel pada file index.php.

Tambahin kolom Aksi di bagian <thead>:

<th>Aksi</th>

Lalu, tambahin tombol-tombolnya di dalam <tbody> (di dalam perulangan while):

<td>
    <a href="detail.php?id=<?= $data['id'] ?>" class="btn btn-info btn-sm">Detail</a>
    <a href="edit.php?id=<?= $data['id'] ?>" class="btn btn-warning btn-sm">Edit</a>
    <a href="hapus.php?id=<?= $data['id'] ?>" onclick="return confirm('Yakin ingin hapus?')" class="btn btn-danger btn-sm">Hapus</a>
</td>

Penjelasan Kode Tombol Aksi:

  • ?id=<?= $data['id'] ?> : Ini cara kita ngirim ID produk lewat URL (namanya URL parameter). Jadi pas tombol diklik, halaman selanjutnya tau data mana yang lagi diproses.
  • onclick="return confirm('...')" : Fitur bawaan JavaScript buat nampilin pop-up konfirmasi sebelum data beneran dihapus. Biar nggak bahaya kalau kepencet.

Langkah 4 - Menampilkan Detail Data

Sekarang kita buat halaman untuk nampilin informasi lengkap satu produk. Buat file baru bernama detail.php dan masukkan kode berikut:

<?php
include "koneksi.php";

// Tangkap ID dari URL
$id = $_GET['id'];

// Ambil data produk yang ID-nya sesuai
$query = mysqli_query($conn, "SELECT * FROM produk WHERE id=$id");
$data = mysqli_fetch_assoc($query);
?>

<!DOCTYPE html>
<html>
<head>
    <title>Detail Produk</title>
    <link href="[<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>](<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>)" rel="stylesheet">
</head>

<body class="bg-light">

<div class="container mt-5">
    <h2 class="mb-4">Detail Produk</h2>

    <div class="card" style="width: 400px;">
        <img src="img/<?= $data['gambar'] ?>" class="card-img-top">

        <div class="card-body">
            <h5 class="card-title"><?= $data['nama'] ?></h5>
            <p class="card-text">
                Harga: Rp <?= number_format($data['harga']) ?>
            </p>
            <p class="card-text"><?= $data['deskripsi'] ?></p>

            <a href="index.php" class="btn btn-secondary">Kembali</a>
        </div>
    </div>
</div>

</body>
</html>

Penjelasan Kode detail.php:

  1. Menangkap Data dari URL

    $id = $_GET['id'];

    Kalau di form kita pakai $_POST, nah kalau datanya dikirim lewat URL (seperti detail.php?id=5), kita tangkapnya wajib pakai $_GET.

  2. Query Mengambil Satu Data Spesifik

    $query = mysqli_query($conn, "SELECT * FROM produk WHERE id=$id");

    Perhatikan ada tambahan WHERE id=$id. Ini fungsinya buat memfilter, jadi database cuma ngembaliin satu baris data aja yang ID-nya cocok, nggak semuanya.

  3. Tampilan Card Bootstrap

    <div class="card" style="width: 400px;">
   <!-- isi detail -->
</div>

    Biar tampilannya kayak katalog, kita pakai komponen Card dari Bootstrap. Tinggal masukin gambar, judul, dan teks di dalamnya, otomatis jadi rapi.

Langkah 5 - Edit Data (UPDATE)

Buat ngedit data, kita butuh file edit.php. Kodenya lumayan panjang karena kita gabungin proses nampilin data lama ke dalam form, sekaligus proses nyimpen perubahan datanya:

<?php
include "koneksi.php";

// Tangkap ID dan ambil data lama
$id = $_GET['id'];
$data = mysqli_fetch_assoc(mysqli_query($conn, "SELECT * FROM produk WHERE id=$id"));

// Proses kalau tombol update diklik
if (isset($_POST['submit'])) {

    $nama = $_POST['nama'];
    $harga = $_POST['harga'];
    $deskripsi = $_POST['deskripsi'];

    // Update data di database
    mysqli_query($conn, "UPDATE produk SET
        nama='$nama',
        harga='$harga',
        deskripsi='$deskripsi'
        WHERE id=$id
    ");

    // Pindah otomatis ke halaman index
    header("Location: index.php");
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>Edit Produk</title>
    <link href="[<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>](<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>)" rel="stylesheet">
</head>

<body class="bg-light">

<div class="container mt-5">
    <h2 class="mb-4">Edit Produk</h2>

    <form method="POST">
        <label>Nama Produk</label>
        <input name="nama" value="<?= $data['nama'] ?>" class="form-control mb-2">

        <label>Harga</label>
        <input name="harga" value="<?= $data['harga'] ?>" class="form-control mb-2">

        <label>Deskripsi</label>
        <textarea name="deskripsi" class="form-control mb-3"><?= $data['deskripsi'] ?></textarea>

        <button name="submit" class="btn btn-primary">Update</button>
    </form>
</div>

</body>
</html>

Penjelasan Kode edit.php:

  1. Menampilkan Data Lama di Form

    <input name="nama" value="<?= $data['nama'] ?>" class="form-control mb-2">
<textarea name="deskripsi"><?= $data['deskripsi'] ?></textarea>

    Biar form editnya nggak kosong, kita isi pakai data yang ada di database. Untuk <input>, datanya ditaruh di dalam atribut value. Tapi khusus untuk <textarea>, datanya diselipin di tengah-tengah tag pembuka dan penutup.

  2. Query Update Data

    mysqli_query($conn, "UPDATE produk SET nama='$nama', harga='$harga', deskripsi='$deskripsi' WHERE id=$id");

    Perintah UPDATE ... SET digunakan untuk nimpa data lama dengan data baru. Penting: Harus selalu pakai WHERE id=$id di belakangnya! Kalau nggak pakai WHERE, semua data produk kalian bakal berubah semua.

3. Redirect Halaman

header("Location: index.php");

Fungsi header() ini dipakai buat redirect atau mindahin user secara otomatis balik ke halaman utama (index.php) setelah data berhasil di-update.

Langkah 6 - Hapus Data (DELETE)

Terakhir, bikin file hapus.php. File ini nggak butuh tampilan HTML, karena dia cuma jalan di latar belakang buat ngehapus data, terus langsung redirect ke halaman utama lagi.

<?php
include "koneksi.php";

// Tangkap ID dari URL
$id = $_GET['id'];

// Hapus data dari database
mysqli_query($conn, "DELETE FROM produk WHERE id=$id");

// Pindah otomatis ke halaman index
header("Location: index.php");
?>

Penjelasan Kode hapus.php:

Query Hapus Data

mysqli_query($conn, "DELETE FROM produk WHERE id=$id");

Perintah DELETE FROM produk berfungsi untuk menghapus baris data. Sama kayak proses update, di sini kita juga wajib banget ngasih WHERE id=$id biar sistem tau mana data spesifik yang mau dihapus. Kalau lupa kasih WHERE, data seisi tabel bisa hilang semua.