Membuat Sistem CRUD Produk Sederhana dengan PHP & MySQL (Upload Gambar)

⚠️ PENTING SEBELUM MULAI: Pastikan kalian sudah membuat folder baru dengan nama img di dalam folder project kalian (sejajar dengan file index.php). Kalau foldernya nggak ada, gambarnya bakal gagal tersimpan!

Langkah 7 - Modifikasi `tambah.php` (Upload Gambar)

Biar form HTML bisa dipakai buat ngirim file, kita wajib nambahin atribut enctype="multipart/form-data" di tag <form>. Buka file tambah.php kalian, dan ubah kodenya jadi seperti ini:

<?php
include "koneksi.php";

if (isset($_POST['submit'])) {

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

    // Tangkap data file gambar
    $nama_file = $_FILES['gambar']['name'];
    $source = $_FILES['gambar']['tmp_name'];
    $folder = './img/';

    // Pindahkan file dari tempat sementara ke folder tujuan
    move_uploaded_file($source, $folder.$nama_file);

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

    header("Location: index.php");
}
?>

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

    <!-- Wajib tambahkan enctype -->
    <form method="POST" enctype="multipart/form-data">
        <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>Upload Gambar</label>
            <!-- Ubah type menjadi file -->
            <input type="file" name="gambar" class="form-control" required>
        </div>

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

</body>
</html>

Penjelasan Kode Upload Gambar:

Syarat Form Upload
```
<form method="POST" enctype="multipart/form-data">
```
Atribut enctype="multipart/form-data" adalah syarat mutlak. Kalau ini lupa ditulis, file gambar yang di-upload nggak bakal kebaca sama PHP (cuma kebaca nama filenya doang berupa teks biasa).
Input Type File
```
<input type="file" name="gambar" class="form-control" required>
```
Kita ubah type="text" menjadi type="file" biar muncul tombol Choose File atau Browse untuk milih gambar dari laptop.
Menangani File di PHP ($_FILES)
```
$nama_file = $_FILES['gambar']['name'];
$source = $_FILES['gambar']['tmp_name'];
$folder = './img/';

move_uploaded_file($source, $folder.$nama_file);
```
- $_FILES : Khusus untuk menangkap inputan berupa file, kita nggak pakai $_POST, tapi pakai $_FILES.
- ['name'] : Berfungsi ngambil nama asli filenya (contoh: sepatu.png).
- ['tmp_name'] : PHP nyimpen file yang baru di-upload di folder sementara (temporary). Ini adalah lokasi sementaranya.
- move_uploaded_file() : Fungsi PHP untuk memindahkan file dari folder sementara tadi ke folder img yang udah kita siapkan.

(Catatan: Untuk halaman detail.php, kita tidak perlu mengubah apa-apa karena di materi sebelumnya kita sudah menampilkan gambar dengan tag <img src="img/<?= $data['gambar'] ?>">)

Langkah 8 - Modifikasi `edit.php` (Update Gambar Lama)

Proses edit agak sedikit tricky. Kenapa? Karena user mungkin cuma mau ngedit harga atau nama, tapi nggak mau ganti gambar. Jadi kita harus bikin logika pengecekan: "Apakah user upload gambar baru atau nggak?".

Buka file edit.php, ubah kodenya jadi seperti ini:

<?php
include "koneksi.php";

$id = $_GET['id'];
$query = mysqli_query($conn, "SELECT * FROM produk WHERE id=$id");
$data = mysqli_fetch_assoc($query);

if (isset($_POST['submit'])) {

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

    // Cek apakah user upload gambar baru
    if ($_FILES['gambar']['name'] != "") {

        $nama_file = $_FILES['gambar']['name'];
        $source = $_FILES['gambar']['tmp_name'];
        $folder = './img/';

        // Hapus file gambar lama dari folder
        unlink($folder.$data['gambar']);

        // Upload gambar baru
        move_uploaded_file($source, $folder.$nama_file);

        // Update database (termasuk nama gambar baru)
        mysqli_query($conn, "UPDATE produk SET nama='$nama', harga='$harga', deskripsi='$deskripsi', gambar='$nama_file' WHERE id=$id");

    } else {
        // Kalau gambar tidak diganti, update data yang lain saja
        mysqli_query($conn, "UPDATE produk SET nama='$nama', harga='$harga', deskripsi='$deskripsi' WHERE id=$id");
    }

    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" enctype="multipart/form-data">
        <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>

        <label>Gambar Produk</label><br>
        <img src="img/<?= $data['gambar'] ?>" width="100" class="mb-2"><br>
        <input type="file" name="gambar" class="form-control mb-3">
        <small class="text-danger">*Abaikan jika tidak ingin ganti gambar</small><br><br>

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

</body>
</html>

Penjelasan Kode Edit Gambar:

Pengecekan Kondisi Upload
```
if ($_FILES['gambar']['name'] != "") {
    // Proses kalau user milih gambar baru
} else {
    // Proses kalau user membiarkan kosong (nggak ganti gambar)
}
```
Kita ngecek apakah nama file gambarnya kosong atau nggak. Kalau nggak kosong (berarti user milih gambar baru), kita jalankan proses hapus gambar lama dan upload yang baru.
Menghapus File Fisik Gambar Lama
```
unlink($folder.$data['gambar']);
```
Fungsi unlink() ini krusial banget! Gunanya untuk menghapus file fisik gambar yang lama dari dalam folder img. Kalau ini nggak dipakai, folder kita bakal makin penuh sama foto-foto sampah bekas editan (foto lama nggak kehapus, foto baru nambah).

Langkah 9 - Modifikasi `hapus.php` (Hapus Data & File)

Sama seperti edit, ketika kita menghapus data dari database, file fotonya yang ada di folder img juga harus ikut dihapus biar rapi.

Buka file hapus.php dan ubah menjadi seperti ini:

<?php
include "koneksi.php";

$id = $_GET['id'];

// 1. Ambil data nama file gambar yang mau dihapus
$query = mysqli_query($conn, "SELECT gambar FROM produk WHERE id=$id");
$data = mysqli_fetch_assoc($query);

// 2. Hapus file fisik gambar dari folder
$folder = './img/';
unlink($folder.$data['gambar']);

// 3. Baru hapus baris datanya dari database
mysqli_query($conn, "DELETE FROM produk WHERE id=$id");

header("Location: index.php");
?>

Penjelasan Kode Hapus File:

Ambil Nama File Dulu
```
$query = mysqli_query($conn, "SELECT gambar FROM produk WHERE id=$id");
```
Sebelum baris datanya di-DELETE, kita harus narik dulu informasi nama gambarnya (misal: buku.jpg) dari database untuk dipakai di fungsi unlink().
Eksekusi unlink()
```
unlink($folder.$data['gambar']);
```
Hapus gambar secara fisik dari folder img. Penting: Pastikan urutannya bener. Hapus file gambarnya dulu pakai unlink(), baru jalankan query DELETE FROM. Kalau databasenya dihapus duluan, kita nggak bakal tau apa nama file gambar yang harus dihapus.Silahkan menulis di sini

Membuat Sistem CRUD Produk Sederhana dengan PHP & MySQL (Upload Gambar)

Langkah 7 - Modifikasi `tambah.php` (Upload Gambar)

Penjelasan Kode Upload Gambar:

Langkah 8 - Modifikasi `edit.php` (Update Gambar Lama)

Penjelasan Kode Edit Gambar:

Langkah 9 - Modifikasi `hapus.php` (Hapus Data & File)

Penjelasan Kode Hapus File:

Series Artikel

Postingan Lainnya

Membuat Sistem CRUD Produk Sederhana dengan PHP & MySQL (Upload Gambar)

Langkah 7 - Modifikasi tambah.php (Upload Gambar)

Penjelasan Kode Upload Gambar:

Langkah 8 - Modifikasi edit.php (Update Gambar Lama)

Penjelasan Kode Edit Gambar:

Langkah 9 - Modifikasi hapus.php (Hapus Data & File)

Penjelasan Kode Hapus File:

Series Artikel

Postingan Lainnya

Controller & Read Data (Menampilkan Produk)

Mahasiswa UMMI Kembangkan Aplikasi Bimbingan Kerja Praktik Berbasis Web di SMKN 4 Kota Sukabumi

Overview UAS Web Framework: Ayo Donasi & Struktur Kode di Baliknya

Langkah 7 - Modifikasi `tambah.php` (Upload Gambar)

Langkah 8 - Modifikasi `edit.php` (Update Gambar Lama)

Langkah 9 - Modifikasi `hapus.php` (Hapus Data & File)