Persiapan Database

Sebelum lanjut bikin kodenya, pastiin dulu tabel produk di database kalian udah punya kolom yang lengkap. Silahkan jalankan query ini di phpMyAdmin:

ALTER TABLE produk
ADD harga INT,
ADD deskripsi TEXT,
ADD gambar VARCHAR(255);

Catatan: Kalau kolom ini belum ditambahin, nanti datanya bakal gagal disimpan dan error pas mau ditampilin.

Pengenalan CSS Framework

Biar tampilan web kita nggak kaku dan otomatis rapi (responsif), kita nggak perlu bikin CSS murni dari nol. Kita bisa pakai CSS Framework. Dua yang paling populer saat ini:

  1. Bootstrap Framework ini udah nyediain komponen siap pakai. Kita tinggal panggil class aja, tampilannya langsung beres.

    • Dokumentasi: getbootstrap.com

    • Cara pakai (CDN): Cukup taruh kode ini di dalam tag <head> HTML kalian:

      <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet">

  2. Tailwind CSS Beda sama Bootstrap, Tailwind pakai konsep utility-first. Kita nggak pakai class gede kayak btn atau card, tapi langsung pakai class kecil-kecil buat ngebangun desainnya.

    • Contoh: p-4 (buat padding), bg-blue-500 (warna background), text-white (warna teks).

    • Dokumentasi: tailwindcss.com

    • Cara pakai (CDN):

      <script src="<https://cdn.tailwindcss.com>"></script>

Di materi kali ini, kita bakal pakai Bootstrap biar lebih cepet.

Langkah 1 - Menampilkan Data Produk

Karena file koneksi ke database udah kita buat di pertemuan sebelumnya, kita tinggal panggil aja filenya. Silahkan buat file baru dengan nama index.php, lalu ketikkan kode berikut:

<?php
include "koneksi.php";

// Ambil semua data dari tabel produk
$query = mysqli_query($conn, "SELECT * FROM produk");
?>

<!DOCTYPE html>
<html>
<head>
    <title>Data Produk</title>
    <link href="<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">Data Produk</h2>

    <table class="table table-bordered table-striped">
        <thead class="table-dark">
            <tr>
                <th>Nama</th>
                <th>Harga</th>
                <th>Deskripsi</th>
                <th>Gambar</th>
            </tr>
        </thead>

        <tbody>
            <?php while($data = mysqli_fetch_assoc($query)) { ?>
            <tr>
                <td><?= $data['nama'] ?></td>
                <td>Rp <?= number_format($data['harga']) ?></td>
                <td><?= $data['deskripsi'] ?></td>
                <td>
                    <img src="img/<?= $data['gambar'] ?>" width="80">
                </td>
            </tr>
            <?php } ?>
        </tbody>
    </table>
</div>

</body>
</html>

Penjelasan Kode index.php:

  1. Memanggil Koneksi Database

    include "koneksi.php";

    Kode ini berfungsi untuk menyambungkan file index.php ke database. Tanpa kode ini, web kita nggak bakal bisa ngakses data apa-apa.

  2. Menarik Data dari Tabel

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

    Perintah SELECT * FROM produk adalah query SQL untuk mengambil seluruh data yang ada di dalam tabel produk.

  3. Looping (Perulangan) Data

    <?php while($data = mysqli_fetch_assoc($query)) { ?>
    <!-- baris data tabel -->
<?php } ?>
    • mysqli_fetch_assoc(): Berfungsi memecah data dari database menjadi array associative biar gampang dipanggil namanya (seperti $data['nama']).
    • while: Karena datanya pasti lebih dari satu, kita pakai perulangan while untuk menampilkan datanya satu per satu ke dalam baris tabel HTML secara otomatis.

  4. Merapikan Format Tampilan

    <td>Rp <?= number_format($data['harga']) ?></td>

    Fungsi number_format() bawaan PHP ini dipakai biar format angka harganya lebih rapi, otomatis dikasih pemisah ribuan (contoh: 10000 jadi 10,000).

Langkah 2 - Menambah Data Produk (INSERT)

Lanjut, kita bikin form untuk input data baru. Silahkan buat file baru dengan nama tambah.php, lalu ketikkan kode ini:

<?php
include "koneksi.php";

// Cek apakah tombol submit sudah ditekan
if (isset($_POST['submit'])) {

    // Tangkap data yang diisi dari form
    $nama = $_POST['nama'];
    $harga = $_POST['harga'];
    $deskripsi = $_POST['deskripsi'];
    $gambar = $_POST['gambar'];

    // Simpan ke database
    mysqli_query($conn, "INSERT INTO produk (nama, harga, deskripsi, gambar) VALUES ('$nama', '$harga', '$deskripsi', '$gambar')");

    echo "<div class='alert alert-success mt-3'>Data berhasil ditambahkan!</div>";
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>Tambah Produk</title>
    <link href="<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">Tambah Produk</h2>

    <form method="POST">
        <div class="mb-3">
            <label>Nama Produk</label>
            <input type="text" name="nama" class="form-control" required>
        </div>

        <div class="mb-3">
            <label>Harga</label>
            <input type="number" name="harga" class="form-control" required>
        </div>

        <div class="mb-3">
            <label>Deskripsi</label>
            <textarea name="deskripsi" class="form-control"></textarea>
        </div>

        <div class="mb-3">
            <label>Gambar (nama file)</label>
            <input type="text" name="gambar" class="form-control">
        </div>

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

</body>
</html>

Penjelasan Kode tambah.php:

  1. Pengecekan Tombol Submit

    if (isset($_POST['submit'])) {
    // Proses simpan data dijalankan
}

    Fungsi isset() di sini bertugas ngecek: "Apakah tombol simpan/submit di form HTML sudah diklik?". Kalau sudah diklik, baru deh blok kode di dalamnya (proses simpan data) dieksekusi.

  2. Menangkap Inputan User

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

    Variabel $_POST dipakai untuk menampung data apa saja yang diketik user di dalam form HTML. Pastikan tulisan di dalam kurung siku ['nama'] sama persis dengan atribut name="nama" yang ada di tag <input> HTML.

  3. Query Simpan ke Database

    mysqli_query($conn, "INSERT INTO produk (nama, harga, deskripsi, gambar) VALUES ('$nama', '$harga', '$deskripsi', '$gambar')");

    Ini adalah baris paling penting. Query INSERT INTO digunakan untuk memasukkan data-data yang sudah kita tangkap tadi langsung ke dalam tabel database.

  4. Validasi Form HTML

    <input type="text" name="nama" class="form-control" required>
    • required: Ini adalah fitur validasi bawaan HTML. Fungsinya untuk mencegah user ngirim form kalau kolom tersebut masih kosong.
    • class="form-control": Ini adalah class dari Bootstrap yang bikin kotak inputan otomatis tampil lebar dan rapi tanpa perlu kita atur CSS-nya lagi.