Tutorial Pemula - NewBie

MENAMBAHKANKAN GAMBAR PRODUK DI TAMPILAN DAFTAR PRODUK DAN INPUT PRODUK DENGAN PHP MYSQLI

Tutorial ini membahas bagaimana cara menambahkan gambar produk di tampilan daftar produk sehingga produk memiliki foto, lalu membuat form input beserta input foto produk. Tutorial ini meneruskan tutorial sebelumnya, anda sudah berhasil membuat daftar produk, input, edit dan hapus data produk, namun belum terdapat foto produk tersebut. Sekarang anda akan menambahkan foto produk untuk setiap produknya.

Ikuti cara Menambahkankan Foto Produk di Tampilan Daftar Produk, Input Produk dengan php mysqli

Pertama, Tambahakan 1 field di tb_produk di database anda dengan struktur seperti ini

gambar-produk

Anda hanya perlu menambahkan 1 field saja yaitu gambar produk (varchar 105)

Kedua, Buat folder images di dalam folder latihan (folder anda)

folder-images

Seperti terlihat di gambar diatas.

 

Ketiga, Buka kembali file input.php

Tambahkan 1 elemen untuk menginputkan foto dengan code seperti ini (yang ditambahakan yang berwarna merah)

<tr>

        <td>Diskon Produk</td>

        <td>:</td>

        <td><input type="text" name="diskon" placeholder="Diskon Produk" size="30" maxlength="10"/></td>

    </tr>

<tr>

        <td>Gambar Produk</td>

        <td>:</td>

        <td><input type="file" name="foto" accept=".jpg, .png"/></td>

    </tr>

<tr>
        <td colspan="3"><button type="submit" name="simpan">Proses Data</button</td>
    </tr>

Taruh di bawah </tr> penutup diskon produk.

Coba jalankan input produk maka akan muncul tampilan baru seperti ini

input-produk

Selanjutnya, buka kembali file input.php

ganti script dimulai dari tag

<?php

sampai...

?>

dengan script berikut ini

<?php

//buat variabel dari setiap field name form produk
$nama= mysqli_real_escape_string($conect, $_POST['nama']);    //varibel field nama
$stok= mysqli_real_escape_string($conect, $_POST['stok']);    //varibel field stok
$deskripsi= mysqli_real_escape_string($conect, $_POST['deskripsi']);  //varibel field deskripsi
$harga= mysqli_real_escape_string($conect, $_POST['harga']);        //varibel field harga
$kategori= mysqli_real_escape_string($conect, $_POST['kategori']);  //varibel field kategori
$berat= mysqli_real_escape_string($conect, $_POST['berat']);       //varibel field berat
$diskon= mysqli_real_escape_string($conect, $_POST['diskon']);     //varibel field diskon

$file=$_FILES['foto']['tmp_name'];    //temporary foto
$nama_file=$_FILES ['foto']['name']; //ambil nama file
$ukuran=$_FILES['foto']['size'];    //ukuran file
$extensi= strtolower(substr(strrchr($nama_file,"."),1));  //extensi setelah .(titik)


if(isset($_POST['simpan'])){
 if(empty($nama)){    //jika nama kosong maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Nama Produk</p>";
    }
    elseif(empty($kategori)){ //jika kategori kosong maka muncul pesan
        $error="<p style='color:#F00;'>* Pilih Kategori Produk</p>";
    }
    elseif(empty($deskripsi)){  //jika deskripsi kosong maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Deskripsi Produk</p>";
    }
    elseif(strlen($deskripsi) < 10){  //jika deskripsi kosong maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Deskripsi Produk minimal 10 karakter</p>";
    }
    elseif(empty($stok)){   //jika Stok kosong maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Stok Produk</p>";
    }
    elseif(!is_numeric($stok)){   //jika Stok Bukan angka maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Jumlah Stok Dengan Angka</p>";
    }
    elseif(empty($berat)){   //jika berat produk kosong maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Berat Produk dalam satuan gram</p>";
    }
    elseif(!is_numeric($berat)){  //jika berat bukan angka maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Berat Produk Dengan Angka</p>";
    }
    elseif(empty($harga)){ //jika harga kosong maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Harga Produk</p>";
    }
    elseif(!is_numeric($berat)){  //jika harga bukan angka maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Harga Produk Dengan Angka</p>";
    }
    elseif(empty($file)){
        $error="<p style='color:#F00;'>* Masukan Gambar Produk</p>";
    }
    elseif($ukuran > 2000000){
        $error="<p style='color:#F00;'>* Ukuran File Maksimal 2MB</p>";
    }
    elseif(strlen($nama_file) > 100){
        $error="<p style='color:#F00;'>* Nama File Maksimal 100 Karakter</p>";
    }
    elseif($extensi !="jpg" && $extensi !="png"){
        $error="<p style='color:#F00;'>* Format File yang diizinkan hanya .jpg/.png</p>";
    }
    else{  //jika semua sudah terpenuhi maka simpan ke tb_produk
    //simpan gambar ke folder
    move_uploaded_file($file,"images/$nama_file");

    $save=mysqli_query($conect, "INSERT INTO tb_produk (id_produk,nama_produk,stok_produk,deskripsi_produk,harga_produk,id_kategori,berat_produk,diskon_produk,gambar_produk)
    values ('','$nama','$stok','$deskripsi','$harga','$kategori','$berat','$diskon','$nama_file')");
    if($save){ //jika simpan berhasil maka muncul pesan dan menuju ke halaman produk
        echo "<script>alert('Data Produk Berhasil disimpan ke database');document.location='produk.php'</script>";
    }else{  //jika simpan gagal maka muncul pesan
         echo "<script>alert('Proses simpan gagal, coba kembali');document.location='input.php'</script>";
    }
}
}
?>

Oke, setelah anda menambakan script, silahkan anda coba form input tersebut. Jika data tersimpan silahkan cek di folder images apakah terdapat gambar yang diinputkan atau tidak, jika gambar masuk ke dalam folder images maka proses berhasil.

Selanjutnya...

Menambahkan tampilan Foto Produk pada tampilan daftar produk

Perhatikan caranya.

Pertama buka kembali file produk.php

Tambahkan satu judul kolom Gambar, seperti ini (yang berwarna merah yah)

<table border="1" width="900" align="center">
       <thead>
       <tr>
           <td colspan="10"><a href="input.php" title="input data">Tambah Produk</a></td>
       </tr>
       <tr>
           <th>ID Produk</th>
           <th>Nama Produk</th>
           <th>Kategori Produk</th>
           <th>Deskripsi</th>
           <th>Stok</th>
           <th>Berat</th>
           <th>Harga</th>
           <th>Diskon</th>
           <th>Gambar</th>
           <th>Action</th>
       </tr>
       </thead>

       <tbody>
<?php
//ambil data dari tb_produk dan tb_kategori  di database
$ambildata=mysqli_query($conect, "SELECT * FROM tb_produk, tb_kategori where tb_produk.id_kategori=tb_kategori.id_kategori order by id_produk desc");
while($a=mysqli_fetch_array($ambildata)){
    ?>
       <tr>
           <td><?php echo $a['id_produk'];?></td>
           <td><?php echo $a['nama_produk'];?></td>
           <td><?php echo $a['nama_kategori'];?></td>
           <td><?php echo $a['deskripsi_produk'];?></td>
           <td><?php echo $a['stok_produk'];?></td>
           <td><?php echo $a['berat_produk'];?>(gr)</td>
           <td>Rp. <?php echo $a['harga_produk'];?></td>
           <td><?php echo $a['diskon_produk'];?>%</td>
           <td><img src="images/<?php echo $a['gambar_produk'];?>" alt="<?php echo $a['nama_produk'];?>" width="100px" height="100px"></td>
           <td><a href="edit.php?id=<?php echo $a['id_produk'];?>" title="edit data"><button>Edit</button></a> |
           <a href="hapus.php?id=<?php echo $a['id_produk'];?>" title="edit data"><button>Hapus</button></a>
           </td>
       </tr>
<?php
}
?>
</tbody>

</table>

 

Simpan kembali file produk.php, dan jalankan kembali maka akan muncul gambar pada kolom gambar, namun jika tidak ada gambar maka hanya akan muncul text alt yaitu nama produknya.

tampilan-gambar-produk

Oke, itulah cara menampilkan foto produk pada daftar produk dan cara membuat input foto produk. Silahkan anda coba yah

Terimakasih

 

Develindo Web | Tutorial Pemrograman Website