Apa itu BRC (Black Rose Community)?

Black Rose Community (BRC) adalah sebuah komunitas kecil yang berfokus pada dunia digital dan koding berbasis web/blog dan aplikasi.

BRC - Black Rose Community, atau komunitas mawar hitam memiliki sejarah kelam yang gelap, sebab itulah Kami membuat komunitas ini yang melambangkan masa lalu yang suram dan gelap. Selain itu simbolis dari mawar hitam ini melambangkan misteri, perpisahan, dan duka cita, namun juga memiliki makna mendalam berupa cinta yang abadi dan awal yang baru.

Tutorial PHP MySQL — Part 2: Membuat Form Input dan Menampilkan Data Barang

Tutorial PHP MySQL: Membuat Form Input dan Menampilkan Data Barang

Setelah berhasil membuat koneksi pada artikel sebelumnya, sekarang kita akan masuk ke tahap yang paling seru: ().

Di artikel ini, kita akan membuat dua fitur utama yang saling terhubung:

Form Input: Halaman HTML untuk memasukkan data barang ke database.
Tabel Data: Halaman untuk mengambil dan menampilkan data barang dari database ke web.

A. Persiapan: Buat Tabel Barang di phpMyAdmin

Sebelum menulis kode, kita butuh sebuah tabel di dalam database db_toko yang sudah kita buat sebelumnya.

Buka http://localhost/phpmyadmin/ dan pilih database db_toko.
Masuk ke tab SQL, lalu salin dan jalankan (Go) perintah berikut untuk membuat tabel barang:

CREATE TABLE barang (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nama_barang VARCHAR(100) NOT NULL,
    harga INT NOT NULL,
    stok INT NOT NULL
);

B. Membuat Form Input Data Barang (input-barang.php)

Buat file baru bernama input-barang.php di folder proyek Kamu. File ini berisi form HTML untuk menginput data dan kode PHP untuk menyimpannya ke .

<?php
// Hubungkan dengan file koneksi yang sudah dibuat sebelumnya
include 'koneksi.php';

// Cek apakah tombol simpan sudah diklik
if (isset($_POST['simpan'])) {
    // Ambil data dari form input
    $nama  = $_POST['nama_barang'];
    $harga = $_POST['harga'];
    $stok  = $_POST['stok'];

    // Perintah SQL untuk memasukkan data ke tabel barang
    $query = "INSERT INTO barang (nama_barang, harga, stok) VALUES ('$nama', '$harga', '$stok')";

    // Jalankan query
    if ($koneksi->query($query) === TRUE) {
        echo "<script>alert('Data barang berhasil disimpan!'); window.location='tampil-barang.php';</script>";
    } else {
        echo "Error: " . $query . "<br>" . $koneksi->error;
    }
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Tambah Data Barang</title>
</head>
<body>
    <h2>Form Tambah Barang</h2>
    <!-- Form akan mengirimkan data ke file ini sendiri menggunakan metode POST -->
    <form action="input-barang.php" method="POST">
        <label>Nama Barang:</label><br>
        <input type="text" name="nama_barang" required><br><br>

        <label>Harga Barang:</label><br>
        <input type="number" name="harga" required><br><br>

        <label>Stok Barang:</label><br>
        <input type="number" name="stok" required><br><br>

        <button type="submit" name="simpan">Simpan Barang</button>
    </form>
    <br>
    <a href="tampil-barang.php">Lihat Daftar Barang</a>
</body>
</html>

C. Menampilkan Data Barang ke Tabel HTML (tampil-barang.php)

Sekarang, buat file baru bernama tampil-barang.php. File ini bertugas mengambil data dari tabel barang dan menyusunnya ke dalam tabel HTML agar rapi.

<?php
// Hubungkan dengan file koneksi
include 'koneksi.php';

// Perintah SQL untuk mengambil seluruh data dari tabel barang
$query = "SELECT * FROM barang";
$hasil = $koneksi->query($query);
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Daftar Barang</title>
    <style>
        table { border-collapse: collapse; width: 50%; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <h2>Daftar Stok Barang Toko</h2>
    <a href="input-barang.php">+ Tambah Barang Baru</a><br><br>

    <table>
        <thead>
            <tr>
                <th>No</th>
                <th>Nama Barang</th>
                <th>Harga</th>
                <th>Stok</th>
            </tr>
        </thead>
        <tbody>
            <?php
            // Cek apakah ada data di dalam tabel barang
            if ($hasil->num_rows > 0) {
                $no = 1;
                // Looping untuk menampilkan setiap baris data
                while($row = $hasil->fetch_assoc()) {
                    echo "<tr>";
                    echo "<td>" . $no++ . "</td>";
                    echo "<td>" . $row['nama_barang'] . "</td>";
                    echo "<td>Rp " . number_format($row['harga'], 0, ',', '.') . "</td>";
                    echo "<td>" . $row['stok'] . "</td>";
                    echo "</tr>";
                }
            } else {
                echo "<tr><td colspan='4' style='text-align:center;'>Belum ada data barang.</td></tr>";
            }
            ?>
        </tbody>
    </table>
</body>
</html>

Cara Mengujinya

Akses halaman input melalui browser:
http://localhost/belajar-php/input-barang.php
Isi formulir dengan nama barang, harga, dan stok, lalu klik Simpan Barang.
Jika sukses, browser akan memunculkan notifikasi alert dan otomatis mengarahkan (redirect) Kamu ke halaman tampil-barang.php
Kamu akan melihat data yang baru saja Kamu masukkan langsung tampil di dalam tabel HTML.

Kesimpulan Akhir

Selamat! Kamu sudah berhasil menguasai dua pilar utama CRUD, yaitu Create (memasukkan data) dan Read (menampilkan data). Website Kamu sekarang sudah bersifat dinamis karena bisa berinteraksi langsung dengan database server.

Untuk Cara menghapus data barang (Delete) atau Cara mengubah/mengedit data barang (Update) yang salah input! kita lanjut di artikel berikutnya!

Postingan Populer