Tutorial Web E-commerce

PART 7 – TUTORIAL MEMBUAT TAMPILAN DAFTAR PRODUK DI HALAMAN ADMIN

Tutorial ini akan membahas cara membuat halaman yang menampilkan daftar produk, cari produk, input produk, edit produk dan hapus produk. Part sebelumnya anda telah membuat halaman daftar brand, daftar supplier dan kategori produk. Selanjutnya anda dapat membuat daftar produk dengan menghubungkan ketiga tabel tersebut yaitu tb_brand, tb_supplier dan tb_kategori yang terhubung ke tb_produk.

Ikuti langkah berikut ini

Pertama, buat tabel dengan nama tb_produk dengan struktur seperti ini

tabel-produk

Perhatikan !

Pada tabel produk terdapat kunci tamu (foreign key) dari tb_brand yaitu id_brand, tb_supplier yaitu id_supplier dan tabel kategori yaitu id_kategori.

Kedua, buat file baru dengan nama produk.php simpan di folder adminweb seperti ini

produk.php

<?php
//pemanggilan file metatag
include "setting_metatag.php";

//pemanggilan file navbar
include "setting_navbar.php";
?>

        <div id="page-wrapper">

            <div class="container-fluid">
                <!-- .row -->
                <!-- Page Heading  breadcumb-->
                <div class="row">
                    <div class="col-lg-12">
                        <h3>
                            Daftar Produk
                        </h3>
                        <ol class="breadcrumb">
                            <li class="active">
                                <i class="fa fa-dashboard"></i> Home
                            </li>
                            <li class="active">
                                <i class="fa fa-list"></i> Daftar Produk
                            </li>
                        </ol>
                    </div>
                </div>
                <!-- /.row -->

                <!-- .row -->
                <div class="row">

                <!-- .col lg 12 -->
                    <div class="col-lg-12">

                    <!-- panel . (Pelajari cara membuat panel di bootstrap yah)-->
                        <div class="panel panel-default">

                        <!-- panel heading -->
                            <div class="panel-heading">
                            <div class="col-lg-6">
                            <a href="input_produk.php" title="Input data"><button name="input" class="btn btn-primary"><i class="fa fa-plus-square-o fa-fw"></i> Input</button></a>
                            </div>
                            <div class="col-lg-6">
                            <!-- form pencarian produk -->
                            <form action="cari_produk.php" method="get" class="form-inline text-right">
                            <input type="text" class="form-control" name="qw" placeholder="Cari Produk" required>
                            <button type="submit" class="btn btn-primary">Cari</button>
                            </form>
                            <!-- form pencarian produk -->
                            </div>
                            <div style="clear:both;"></div>
                            </div>
                        <!-- /.panel heading -->

                        <!-- panel body -->
                            <div class="panel-body">

                            <!-- /.tabel responsive -->
                                <div class="table-responsive">
                                    <table class="table table-bordered table-hover table-striped">
                                        <thead>
                                            <tr>
                                                <th>No</th>
                                                <th>Nama Produk</th>
                                                <th>Kategori</th>
                                                <th>Brand</th>
                                                <th>Supplier</th>
                                                <th>Harga</th>
                                                <th>Qty</th>
                                                <th>Berat</th>
                                                <th>Diskon</th>
                                                <th>Gambar</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        <?php
                                        $pg = isset( $_GET['pg'] ) ? $_GET['pg'] : "";
                                        $batas = 10; /*batas tampilan setiap halaman*/
                                        if ( empty( $pg ) ) {
                                        $posisi = 0;
                                        $pg = 1;
                                        } else {
                                        $posisi = ( $pg - 1 ) * $batas;
                                        }
                                        /*Jika variabel $pg kosong maka akan menampilkan halaman pertama dengan batas baris 10*/

                                        $ambildata=mysqli_query($conect, "select*from tb_produk, tb_brand, tb_kategori, tb_supplier where tb_produk.id_brand=tb_brand.id_brand and tb_produk.id_kategori=tb_kategori.id_kategori and tb_produk.id_supplier=tb_supplier.id_supplier order by id_produk desc limit $posisi, $batas");
                                        $jumlah=mysqli_num_rows($ambildata);  /*mysql_num_rows untuk menghitung total baris di tabel databse*/
                                        if($jumlah == 0){  //jika tidak ada data
                                            ?>
                                        <tr>
                                            <td colspan="11">Tidak Terdapat Data</td>
                                        </tr>
                                        <?php
                                        }else{
                                        //jika ada data di tb_brand
                                        while($a=mysqli_fetch_array($ambildata)){ /*mysql_fetch array untuk mengambil data di setiap field di tabel databse*/
                                        ?>
                                        <tr>
                                            <td><?php echo $posisi=$posisi+1;?></td>
                                            <td><?php echo $a['nama_produk'];?></td>
                                            <td><?php echo $a['nama_kategori'];?></td>
                                            <td><?php echo $a['nama_brand'];?></td>
                                            <td><?php echo $a['nama_supplier'];?></td>
                                            <td><?php echo number_format($a['harga_produk']);?></td>
                                            <td><?php echo $a['stok_produk'];?></td>
                                            <td><?php echo number_format($a['berat_produk']);?></td>
                                            <td><?php echo $a['diskon_produk'];?>%</td>
                                            <td><img src="<?php echo $hostname;?>/assets/images/produk/<?php echo $a['gambar_produk'];?>" class="img-thumbnail" style="width:100px; height:100px;"></td>
                                            <td><a href="hapus_produk.php?id_produk=<?php echo $a['id_produk'];?>" onclick="return confirm('Yakin akan meghapus data ini')" title="Hapus data"><button class="btn btn-danger btn-sm"><i class="fa fa-trash-o fa-fw"></i> Hapus</button></a>
                                            <a href="edit_produk.php?id_produk=<?php echo $a['id_produk'];?>" title="Edit data"><button class="btn btn-primary btn-sm"><i class="fa fa-pencil-square-o fa-fw"></i> Edit</button> </a>
                                            </td>
                                        </tr>
                                        <?php
                                            }
                                        }
                                        ?>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- /.tabel responsive -->

                                <div class="text-center">
                                    <?php
                                //script paging, untuk menampikan setiap halaman
                                $jml_data = mysqli_num_rows(mysqli_query($conect, "select*from tb_produk, tb_brand, tb_kategori, tb_supplier where tb_produk.id_brand=tb_brand.id_brand and tb_produk.id_kategori=tb_kategori.id_kategori and tb_produk.id_supplier=tb_supplier.id_supplier order by id_produk desc"));
                                $JmlHalaman = ceil($jml_data/$batas); //ceil digunakan untuk pembulatan keatas
                                if($jml_data != 0){
                                if ( $pg > 1 ) {
                                $link = $pg-1;
                                $prev = "<a href='?pg=$link'><button name='prev' class='btn btn-primary btn-sm'>Prev</button></a> ";
                                } else {
                                $prev = "<button name='prev' class='btn btn-default btn-sm'>Prev </button> ";
                                }
                                $nmr = '';
                                for ( $i = 1; $i<= $JmlHalaman; $i++ ){

                                if ( $i == $pg ) {
                                $nmr .= "<button name='prev' class='btn btn-primary btn-sm'>$i</button> ";
                                } else {
                                $nmr .= "<a href='?pg=$i'><button name='prev' class='btn btn-default btn-sm'>$i</button></a> ";
                                }
                                }
                                if ( $pg < $JmlHalaman ) {
                                $link = $pg + 1;
                                $next = "<a href='?pg=$link'><button name='prev' class='btn btn-primary btn-sm'>Next</button></a> ";
                                } else {
                                $next = "<button name='prev' class='btn btn-default btn-sm'>Next</button> ";
                                }
                                echo $prev.$nmr.$next;
                                ?>
                                <br><br>
                                <span class="text-muted">Menampilkan <?php echo $jumlah; ?> dari <?php echo $jml_data; ?> Record </span>
                                <?php
                                }
                                ?>
                                </div>
                            </div>
                            <!-- /.panel body -->

                        </div>
                        <!-- /.panel -->

                    </div>
                    <!-- /.col lg 12-->

                </div>
                <!-- /.row -->


           </div>
            <!-- /.container-fluid -->

        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

<?php
//pemanggilan file setting footer
include "setting_footer.php";

?>

Simpan file dan untuk mencoba file tersebut, silahkan buka halaman admin di browser anda dan klik link daftar produk maka akan muncul tampilan seperti ini

tampilan-produk

Tampilan tersebut menandakan di dalam tb_produk tidak terdapat data apapun.

Ketiga, buat file baru beri nama input_produk.php simpan di folder adminweb

input_produk berfungsi untuk membuat form inputan dan menginput data ke tb_produk di database.

input_produk.php

<?php
//pemanggilan file metatag
include "setting_metatag.php";

//pemanggilan file navbar
include "setting_navbar.php";
?>

        <div id="page-wrapper">

            <div class="container-fluid">
                <!-- .row -->
                <!-- Page Heading  breadcumb-->
                <div class="row">
                    <div class="col-lg-12">
                        <h3>
                            Daftar Produk
                        </h3>
                        <ol class="breadcrumb">
                            <li class="active">
                                <i class="fa fa-dashboard"></i> Home
                            </li>
                            <li class="active">
                                <i class="fa fa-list"></i> Daftar Produk
                            </li>
                        </ol>
                    </div>
                </div>
                <!-- /.row -->

                <?php
                //variabel setiap input di form
                $nama=mysqli_real_escape_string($conect, $_POST['nama']);  //variabel dari name input nama
                $kategori=mysqli_real_escape_string($conect, $_POST['kategori']);     //variabel dari name input kategori
                $brand=mysqli_real_escape_string($conect, $_POST['brand']);     //variabel dari name input brand
                $supplier=mysqli_real_escape_string($conect, $_POST['supplier']);     //variabel dari name input supplier
                $deskripsi=mysqli_real_escape_string($conect, $_POST['deskripsi']);     //variabel dari name input deskripsi
                $stok=mysqli_real_escape_string($conect, $_POST['stok']);     //variabel dari name input stok
                $harga=mysqli_real_escape_string($conect, $_POST['harga']);     //variabel dari name input harga
                $diskon=mysqli_real_escape_string($conect, $_POST['diskon']);     //variabel dari name input diskon
                $berat=mysqli_real_escape_string($conect, $_POST['berat']);     //variabel dari name input berat

                $foto=$_FILES['foto']['tmp_name'];               //variabel dari temporary foto
                $nama_foto=$_FILES ['foto']['name'];             //variabel dari name input foto
                $type=$_FILES['foto']['type'];                   //variabel dari type foto
                $ukuran=$_FILES['foto']['size'];                 //variabel dari ukuran foto
                $files= strtolower(substr(strrchr($nama_foto,"."),1)); //variabel untuk extensi file

                //jika menekan tombol simpan
                if(isset($_POST['simpan'])){
                if(empty($nama)){  //jika field nama kosong
                $er_nama="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Masukan Nama Produk </div>";
                }
                elseif(empty($kategori)){ //jika field kategori kosong
                $er_kategori="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Pilih Kategori Produk</div>";
                }
                elseif(empty($brand)){ //jika field brand kosong
                $er_brand="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Pilih Brand / Merk Produk</div>";
                }
                elseif(empty($supplier)){ //jika field supplier kosong
                $er_supplier="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Pilih Supplier Produk</div>";
                }
                elseif(empty($deskripsi)){ //jika field deskripsi kosong
                $er_deskripsi="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Masukan Deskripsi Produk</div>";
                }
                elseif(empty($harga)){ //jika field harga kosong
                $er_harga="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Masukan Harga Produk</div>";
                }
                elseif(empty($stok)){ //jika field stok kosong
                $er_stok="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Masukan Stok Produk</div>";
                }
                elseif(empty($berat)){ //jika field berat kosong
                $er_berat="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Masukan Berat Produk</div>";
                }
                elseif(empty($foto)){  //jika foto kosong
                $er_foto="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Masukan Foto Produk</div>";
                }
                elseif($files !="jpg" && $files !="png"){ //jika foto tidak berekstensi .jpg atau .png
                $er_foto="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Format Gambar yang diizinkan hanya .jpg dan .png</div>";
                }
                elseif($ukuran > 2000000){   //jika ukuran lebih besar dari 2MB
                $er_foto="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Maksimal ukuran gambar 2MB </div>";
                }
                elseif(strlen($nama_foto) > 100){  //jika jumlah karakter nama foto lebih dari 100 karakter
                $er_foto="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Nama File Gambar Mak 100 karakter</div>";
                }
                else{ //jika semua field terpenuhi maka smpan gambar ke folder produk dan simpan data ke tb_produk
                move_uploaded_file($foto,"../assets/images/produk/$nama_foto");
                $save=mysql_query("INSERT INTO tb_produk (id_produk,nama_produk,id_brand,id_kategori,id_supplier,diskon_produk,berat_produk,harga_produk,stok_produk,gambar_produk,deskripsi_produk)
                values('','$nama','$brand','$kategori','$supplier','$diskon','$berat','$harga','$stok','$nama_foto','$deskripsi')") or die(mysql_error());
                if($save){ //jika simpan berhasil
                echo "<script>alert('Data Berhasil Disimpan');document.location='produk.php'</script>";
                }
                else{  //jika simpan gagal
                $error="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Error</div>";
                }

                }
                }
                ?>
                <!-- .row -->
                <div class="row">

                <!-- .col lg 12 -->
                    <div class="col-lg-12">

                    <!-- panel . (Pelajari cara membuat panel di bootstrap yah)-->
                        <div class="panel panel-default">

                        <!-- panel heading -->
                            <div class="panel-heading">
                                <h3 class="panel-title">
                                <a href="produk.php" title="Input data"><button name="input" class="btn btn-primary">Kembali</button></a>
                                </h3>
                            </div>
                        <!-- /.panel heading -->

                        <!-- panel body -->
                            <div class="panel-body">

                            <!-- /.form menggunakan form group, pelajari cara membuat form di bootstrap-->

                            <form action="" method="post" enctype="multipart/form-data" role="form">
                            <?php echo $error;?>
                            <div class="form-group row">
                                <label class="col-lg-2 col-md-3 col-sm-3 col-xs-12">Nama Produk</label>
                                <div class="col-lg-8 col-md-7 col-sm-7 col-xs-12">
                                <input type="text" class="form-control" placeholder="Nama Produk" name="nama" value="<?php echo $_POST['nama'];?>" maxlength="100">
                                </div>
                            </div>
                            <?php echo $er_nama;?>
                            <div class="form-group row">
                                <label class="col-lg-2 col-md-3 col-sm-3 col-xs-12">Kategori Produk</label>
                                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
                                <select name="kategori" class="form-control">
                                        <option value="">Pilih Kategori Produk</option>
                                        <?php $kategori=mysqli_query($conect, "select *from tb_kategori");
                                        while($q=mysqli_fetch_array($kategori)){
                                        if($q['id_kategori']== $_POST['kategori']){
                                        echo "
                                        <option value='$q[id_kategori]' selected>$q[nama_kategori]</option>";
                                        }
                                        else{
                                        echo "
                                        <option value='$q[id_kategori]'>$q[nama_kategori]</option>";
                                        }

                                        }
                                        ?> </select>
                                        </div>
                            </div>
                            <?php echo $er_kategori;?>
                            <div class="form-group row">
                                <label class="col-lg-2 col-md-3 col-sm-3 col-xs-12">Brand / Merk Produk</label>
                                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
                                <select name="brand" class="form-control">
                                        <option value="">Pilih Brand / Merk Produk</option>
                                        <?php $brand=mysqli_query($conect, "select *from tb_brand");
                                        while($c=mysqli_fetch_array($brand)){
                                        if($c['id_brand']== $_POST['brand']){
                                        echo "
                                        <option value='$c[id_brand]' selected>$c[nama_brand]</option>";
                                        }
                                        else{
                                        echo "
                                        <option value='$c[id_brand]'>$c[nama_brand]</option>";
                                        }

                                        }
                                        ?> </select>
                                        </div>
                            </div>
                            <?php echo $er_brand;?>
                            <div class="form-group row">
                                <label class="col-lg-2 col-md-3 col-sm-3 col-xs-12">Supplier Produk</label>
                                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
                                <select name="supplier" class="form-control">
                                        <option value="">Pilih Supplier Produk</option>
                                        <?php $supplier=mysqli_query($conect, "select *from tb_supplier");
                                        while($d=mysqli_fetch_array($supplier)){
                                        if($d['id_supplier']== $_POST['supplier']){
                                        echo "
                                        <option value='$d[id_supplier]' selected>$d[nama_supplier]</option>";
                                        }
                                        else{
                                        echo "
                                        <option value='$d[id_supplier]'>$d[nama_supplier]</option>";
                                        }

                                        }
                                        ?> </select>
                                        </div>
                            </div>
                            <?php echo $er_supplier;?>
                            <div class="form-group row">
                                 <label class="col-lg-2 col-md-3 col-sm-3 col-xs-12">Deskripsi Produk</label>
                                   <div class="col-lg-8 col-md-7 col-sm-7 col-xs-12">
                                   <textarea name="deskripsi" class="form-control" id="editor1" rows="5" placeholder="Deskripsi Artikel"><?php echo $_POST['deskripsi'];?></textarea>
                                   </div>
                            </div>
                            <?php echo $er_deskripsi;?>
                            <div class="form-group row">
                                <label class="col-lg-2 col-md-3 col-sm-3 col-xs-12">Harga Produk</label>
                                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
                                <div class="input-group"><span class="input-group-addon">Rp.</span>
                                <input type="text" class="form-control" placeholder="Harga Produk" name="harga" value="<?php echo $_POST['harga'];?>" maxlength="100">
                                </div>
                                </div>
                            </div>
                            <?php echo $er_harga;?>
                            <div class="form-group row">
                                <label class="col-lg-2 col-md-3 col-sm-3 col-xs-12">Stok Produk</label>
                                <div class="col-lg-4 col-md-3 col-sm-3 col-xs-12">
                                <div class="input-group">
                                <input type="text" class="form-control" placeholder="Stok Produk" name="stok" value="<?php echo $_POST['stok'];?>" maxlength="100">
                                <span class="input-group-addon">item</span></div>
                                </div>
                            </div>
                            <?php echo $er_stok;?>
                            <div class="form-group row">
                                <label class="col-lg-2 col-md-3 col-sm-3 col-xs-12">Berat Produk (gram)</label>
                                <div class="col-lg-4 col-md-3 col-sm-3 col-xs-12">
                                <div class="input-group">
                                <input type="text" class="form-control" placeholder="Berat Produk dalam gram" name="berat" value="<?php echo $_POST['berat'];?>" maxlength="100">
                                <span class="input-group-addon">gram</span></div>
                                </div>
                            </div>
                            <?php echo $er_berat;?>
                            <div class="form-group row">
                                <label class="col-lg-2 col-md-3 col-sm-3 col-xs-12">Diskon Produk</label>
                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                                <div class="input-group">
                                <input type="number" class="form-control" placeholder="Diskon Produk" name="diskon" value="<?php echo $_POST['diskon'];?>" maxlength="3">
                                <span class="input-group-addon">%</span></div>
                                </div>
                            </div>
                            <?php echo $er_diskon;?>
                            <div class="form-group row">
                                <label class="col-lg-2 col-md-3 col-sm-3 col-xs-12">Gambar Produk</label>
                                <div class="col-lg-8 col-md-7 col-sm-7 col-xs-12">
                                <input type="file" class="form-control-file" name="foto" accept=".jpg, .png">
                                </div>
                            </div>
                            <?php echo $er_foto;?>
                            <hr>
                            <button type="submit" name="simpan" class="btn btn-success">Simpan</button>

                            </form>
                                <!-- /.form -->

                            </div>
                            <!-- /.panel body -->

                        </div>
                        <!-- /.panel -->

                    </div>
                    <!-- /.col lg 12-->

                </div>
                <!-- /.row -->


           </div>
            <!-- /.container-fluid -->

        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

<?php
//pemanggilan file setting footer
include "setting_footer.php";

?>

Selanjutnya, anda buat sebuah folder dengan nama produk di dalam folder images seperti ini

folder-images

C://xampp/htdoc/Tutorial Ecommerce/assets/images

Selanjutnya untuk menguji script input_produk.php silahkan klik tombol input pada tampilan daftar produk, maka akan muncul form input produk seperti ini

input-produk

Setiap elemen terdapat validasi untuk keamanan sistem, silahkan coba dan modifikasi sendiri yah

Setelah anda menginput data maka pada tampilan daftar produk akan menampilkan data seperti ini

daftar-produk

Oke, begitulah cara kerja dari input dan daftar produk

Keempat, buat file baru beri nama edit_produk.php simpan di folder adminweb

edit_produk.php

<?php
//pemanggilan file metatag
include "setting_metatag.php";

//pemanggilan file navbar
include "setting_navbar.php";
?>

        <div id="page-wrapper">

            <div class="container-fluid">
                <!-- .row -->
                <!-- Page Heading  breadcumb-->
                <div class="row">
                    <div class="col-lg-12">
                        <h3>
                            Daftar Produk
                        </h3>
                        <ol class="breadcrumb">
                            <li class="active">
                                <i class="fa fa-dashboard"></i> Home
                            </li>
                            <li class="active">
                                <i class="fa fa-list"></i> Daftar Produk
                            </li>
                        </ol>
                    </div>
                </div>
                <!-- /.row -->

                <?php
                ///ambil data berdasarkan id
                $tampildata=mysqli_query($conect, "select*from tb_produk where id_produk='$_GET[id_produk]'");
                $b=mysqli_fetch_array($tampildata);

                //variabel setiap input di form

                $lama=$_POST['foto_lama'];  //variabel foto lama
                $nama=mysqli_real_escape_string($conect, $_POST['nama']);  //variabel dari name input nama
                $kategori=mysqli_real_escape_string($conect, $_POST['kategori']);     //variabel dari name input kategori
                $brand=mysqli_real_escape_string($conect, $_POST['brand']);     //variabel dari name input brand
                $supplier=mysqli_real_escape_string($conect, $_POST['supplier']);     //variabel dari name input supplier
                $deskripsi=mysqli_real_escape_string($conect, $_POST['deskripsi']);     //variabel dari name input deskripsi
                $stok=mysqli_real_escape_string($conect, $_POST['stok']);     //variabel dari name input stok
                $harga=mysqli_real_escape_string($conect, $_POST['harga']);     //variabel dari name input harga
                $diskon=mysqli_real_escape_string($conect, $_POST['diskon']);     //variabel dari name input diskon
                $berat=mysqli_real_escape_string($conect, $_POST['berat']);     //variabel dari name input berat

                $foto=$_FILES['foto']['tmp_name'];               //variabel dari temporary foto
                $nama_foto=$_FILES ['foto']['name'];             //variabel dari name input foto
                $type=$_FILES['foto']['type'];                   //variabel dari type foto
                $ukuran=$_FILES['foto']['size'];                 //variabel dari ukuran foto
                $files= strtolower(substr(strrchr($nama_foto,"."),1)); //variabel untuk extensi file

                //jika menekan tombol simpan
                if(isset($_POST['simpan'])){
                if(empty($nama)){  //jika field nama kosong
                $er_nama="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Masukan Nama Produk </div>";
                }
                elseif(empty($kategori)){ //jika field kategori kosong
                $er_kategori="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Pilih Kategori Produk</div>";
                }
                elseif(empty($brand)){ //jika field brand kosong
                $er_brand="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Pilih Brand / Merk Produk</div>";
                }
                elseif(empty($supplier)){ //jika field supplier kosong
                $er_supplier="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Pilih Supplier Produk</div>";
                }
                elseif(empty($deskripsi)){ //jika field deskripsi kosong
                $er_deskripsi="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Masukan Deskripsi Produk</div>";
                }
                elseif(empty($harga)){ //jika field harga kosong
                $er_harga="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Masukan Harga Produk</div>";
                }
                elseif(empty($stok)){ //jika field stok kosong
                $er_stok="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Masukan Stok Produk</div>";
                }
                elseif(empty($berat)){ //jika field berat kosong
                $er_berat="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Masukan Berat Produk</div>";
                }
                else{
                if(empty($foto)){  //jika foto tidak diubah maka
                $save=mysqli_query($conect, "UPDATE tb_produk set nama_produk='$nama',id_brand='$brand',id_kategori='$kategori',id_supplier='$supplier',diskon_produk='$diskon',berat_produk='$berat',harga_produk='$harga',stok_produk='$stok',deskripsi_produk='$deskripsi' where id_produk='$_GET[id_produk]'");
                if($save){ //jika simpan berhasil
                echo "<script>alert('Data Berhasil Ditambahkan');document.location='produk.php'</script>";
                }
                else{  //jika simpan gagal
                $error="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Error</div>";
                }
                }
                else{ //jika foto ikut diubah maka
                if($files !="jpg" && $files !="png"){ //jika foto tidak berekstensi .jpg atau .png
                $er_foto="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Format Gambar yang diizinkan hanya .jpg dan .png</div>";
                }
                elseif($ukuran > 2000000){   //jika ukuran lebih besar dari 2MB
                $er_foto="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Maksimal ukuran gambar 2MB </div>";
                }
                elseif(strlen($nama_foto) > 100){  //jika jumlah karakter nama foto lebih dari 100 karakter
                $er_foto="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Nama File Gambar Mak 100 karakter</div>";
                }
                else{
                unlink('../assets/images/brand/'.$lama); //hapus foto lama di folder
                move_uploaded_file($foto,"../assets/images/produk/$nama_foto"); //upload foto baru
                $save=mysqli_query($conect, "UPDATE tb_produk set nama_produk='$nama',id_brand='$brand',id_kategori='$kategori',id_supplier='$supplier',diskon_produk='$diskon',berat_produk='$berat',harga_produk='$harga',stok_produk='$stok',gambar_produk='$nama_foto',deskripsi_produk='$deskripsi' where id_produk='$_GET[id_produk]'");
                if($save){ //jika simpan berhasil
                echo "<script>alert('Data Berhasil Disimpan');document.location='produk.php'</script>";
                }
                else{  //jika simpan gagal
                $error="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Error</div>";
                }
                }
                }
                }
                }
                ?>
                <!-- .row -->
                <div class="row">

                <!-- .col lg 12 -->
                    <div class="col-lg-12">

                    <!-- panel . (Pelajari cara membuat panel di bootstrap yah)-->
                        <div class="panel panel-default">

                        <!-- panel heading -->
                            <div class="panel-heading">
                                <a href="produk.php" title="Input data"><button name="input" class="btn btn-primary">Kembali</button></a>
                            </div>
                        <!-- /.panel heading -->

                        <!-- panel body -->
                            <div class="panel-body">

                            <!-- /.form menggunakan form group, pelajari cara membuat form di bootstrap-->

                            <form action="" method="post" enctype="multipart/form-data" role="form">
                            <?php echo $error;?>
                            <div class="form-group row">
                                <label class="col-lg-2 col-md-3 col-sm-3 col-xs-12">Nama Produk</label>
                                <div class="col-lg-8 col-md-7 col-sm-7 col-xs-12">
                                <input type="text" class="form-control" placeholder="Nama Produk" name="nama" value="<?php echo $b['nama_produk'];?>" maxlength="100">
                                </div>
                            </div>
                            <?php echo $er_nama;?>
                            <div class="form-group row">
                                <label class="col-lg-2 col-md-3 col-sm-3 col-xs-12">Kategori Produk</label>
                                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
                                <select name="kategori" class="form-control">
                                        <option value="">Pilih Kategori Produk</option>
                                        <?php $kategori=mysqli_query($conect, "select *from tb_kategori");
                                        while($q=mysqli_fetch_array($kategori)){
                                        if($q['id_kategori']== $b['id_kategori']){
                                        echo "
                                        <option value='$q[id_kategori]' selected>$q[nama_kategori]</option>";
                                        }
                                        else{
                                        echo "
                                        <option value='$q[id_kategori]'>$q[nama_kategori]</option>";
                                        }

                                        }
                                        ?> </select>
                                        </div>
                            </div>
                            <?php echo $er_kategori;?>
                            <div class="form-group row">
                                <label class="col-lg-2 col-md-3 col-sm-3 col-xs-12">Brand / Merk Produk</label>
                                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
                                <select name="brand" class="form-control">
                                        <option value="">Pilih Brand / Merk Produk</option>
                                        <?php $brand=mysqli_query($conect, "select *from tb_brand");
                                        while($c=mysqli_fetch_array($brand)){
                                        if($c['id_brand']== $b['id_brand']){
                                        echo "
                                        <option value='$c[id_brand]' selected>$c[nama_brand]</option>";
                                        }
                                        else{
                                        echo "
                                        <option value='$c[id_brand]'>$c[nama_brand]</option>";
                                        }

                                        }
                                        ?> </select>
                                        </div>
                            </div>
                            <?php echo $er_brand;?>
                            <div class="form-group row">
                                <label class="col-lg-2 col-md-3 col-sm-3 col-xs-12">Supplier Produk</label>
                                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
                                <select name="supplier" class="form-control">
                                        <option value="">Pilih Supplier Produk</option>
                                        <?php $supplier=mysqli_query($conect, "select *from tb_supplier");
                                        while($d=mysqli_fetch_array($supplier)){
                                        if($d['id_supplier']== $b['id_supplier']){
                                        echo "
                                        <option value='$d[id_supplier]' selected>$d[nama_supplier]</option>";
                                        }
                                        else{
                                        echo "
                                        <option value='$d[id_supplier]'>$d[nama_supplier]</option>";
                                        }

                                        }
                                        ?> </select>
                                        </div>
                            </div>
                            <?php echo $er_supplier;?>
                            <div class="form-group row">
                                 <label class="col-lg-2 col-md-3 col-sm-3 col-xs-12">Deskripsi Produk</label>
                                   <div class="col-lg-8 col-md-7 col-sm-7 col-xs-12">
                                   <textarea name="deskripsi" class="form-control" id="editor1" rows="5" placeholder="Deskripsi Artikel"><?php echo $b['deskripsi_produk'];?></textarea>
                                   </div>
                            </div>
                            <?php echo $er_deskripsi;?>
                            <div class="form-group row">
                                <label class="col-lg-2 col-md-3 col-sm-3 col-xs-12">Harga Produk</label>
                                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
                                <div class="input-group"><span class="input-group-addon">Rp.</span>
                                <input type="text" class="form-control" placeholder="Harga Produk" name="harga" value="<?php echo $b['harga_produk'];?>" maxlength="100">
                                </div>
                                </div>
                            </div>
                            <?php echo $er_harga;?>
                            <div class="form-group row">
                                <label class="col-lg-2 col-md-3 col-sm-3 col-xs-12">Stok Produk</label>
                                <div class="col-lg-4 col-md-3 col-sm-3 col-xs-12">
                                <div class="input-group">
                                <input type="text" class="form-control" placeholder="Stok Produk" name="stok" value="<?php echo $b['stok_produk'];?>" maxlength="100">
                                <span class="input-group-addon">item</span></div>
                                </div>
                            </div>
                            <?php echo $er_stok;?>
                            <div class="form-group row">
                                <label class="col-lg-2 col-md-3 col-sm-3 col-xs-12">Berat Produk (gram)</label>
                                <div class="col-lg-4 col-md-3 col-sm-3 col-xs-12">
                                <div class="input-group">
                                <input type="text" class="form-control" placeholder="Berat Produk dalam gram" name="berat" value="<?php echo $b['berat_produk'];?>" maxlength="100">
                                <span class="input-group-addon">gram</span></div>
                                </div>
                            </div>
                            <?php echo $er_berat;?>
                            <div class="form-group row">
                                <label class="col-lg-2 col-md-3 col-sm-3 col-xs-12">Diskon Produk</label>
                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                                <div class="input-group">
                                <input type="number" class="form-control" placeholder="Diskon Produk" name="diskon" value="<?php echo $b['diskon_produk'];?>" maxlength="3">
                                <span class="input-group-addon">%</span></div>
                                </div>
                            </div>
                            <?php echo $er_diskon;?>
                            <div class="form-group row">
                                <label class="col-lg-2 col-md-3 col-sm-3 col-xs-12">Gambar Produk</label>
                                <div class="col-lg-8 col-md-7 col-sm-7 col-xs-12">
                                <input type="file" class="form-control-file" name="foto" accept=".jpg, .png">
                                <input type="hidden" name="foto_lama" value="<?php echo $b['gambar_produk'];?>">
                                </div>
                            </div>
                            <?php echo $er_foto;?>
                            <hr>
                            <button type="submit" name="simpan" class="btn btn-success">Simpan</button>

                            </form>
                                <!-- /.form -->

                            </div>
                            <!-- /.panel body -->

                        </div>
                        <!-- /.panel -->

                    </div>
                    <!-- /.col lg 12-->

                </div>
                <!-- /.row -->


           </div>
            <!-- /.container-fluid -->

        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

<?php
//pemanggilan file setting footer
include "setting_footer.php";

?>

Uji coba script dapat dilakukan dengan klik tombol edit maka akan muncul tampilan seperti ini

edit-produk

Form edit produk akan menampilkan data berdasarkan id yang dipilih dan simpan data setelah anda mengeditnya.

Kelima, buat file baru beri nama hapus_produk.php

hapus_produk.php berfungsi menghapus data dari tb_produk di dalam database

<?php
session_start();
//panggil koneksi
include "../assets/relasi/koneksi.php";

$id=$_GET['id_produk'];  //dapatkan id

if(isset($id)){ //jika ada id
//ambil data di tabel berdasarkan id
$data=mysqli_fetch_array(mysqli_query($conect, "select * from tb_produk where id_produk='$id'"));
//hapus gambar di folder
unlink("../assets/images/produk/$data[gambar_produk]");
//hapus data di tabel
$hapus=mysqli_query($conect, "DELETE from tb_produk where id_produk='$id'");
//jika hapus berhasil
if($hapus){
    echo"<script>alert('Data Berhasil di Hapus');document.location='produk.php'</script>";
}
else{ //jika gagal
    echo"<script>alert('Error Bos !!');document.location='produk.php'</script>";
}

}
?>

Klik tombol hapus untuk menghapus data produk

Keenam, buat file baru beri nama cari_produk.php simpan di folder adminweb

cari_produk.php berfungsi untuk pencarian produk dengan mengetikkan nama atau karakter huruf di form pencarian produk dan klik cari, maka akan menampilkan hasil dari pencarian tersebut.

cari_produk.php

<?php
//pemanggilan file metatag
include "setting_metatag.php";

//pemanggilan file navbar
include "setting_navbar.php";
?>

        <div id="page-wrapper">

            <div class="container-fluid">
                <!-- .row -->
                <!-- Page Heading  breadcumb-->
                <div class="row">
                    <div class="col-lg-12">
                        <h3>
                            Daftar Produk
                        </h3>
                        <ol class="breadcrumb">
                            <li class="active">
                                <i class="fa fa-dashboard"></i> Home
                            </li>
                            <li class="active">
                                <i class="fa fa-list"></i> Daftar Produk
                            </li>
                        </ol>
                    </div>
                </div>
                <!-- /.row -->

                <!-- .row -->
                <div class="row">

                <!-- .col lg 12 -->
                    <div class="col-lg-12">

                    <!-- panel . (Pelajari cara membuat panel di bootstrap yah)-->
                        <div class="panel panel-default">

                        <!-- panel heading -->
                            <div class="panel-heading">
                            <div class="col-lg-6">
                            <a href="input_produk.php" title="Input data"><button name="input" class="btn btn-primary"><i class="fa fa-plus-square-o fa-fw"></i> Input</button></a>
                            </div>
                            <div class="col-lg-6">
                            <!-- form pencarian produk -->
                            <form action="cari_produk.php" method="get" class="form-inline text-right">
                            <input type="text" class="form-control" name="qw" placeholder="Cari Produk" value="<?php echo $_GET['qw'];?>" required>
                            <button type="submit" class="btn btn-primary">Cari</button>
                            </form>
                            <!-- form pencarian produk -->
                            </div>
                            <div style="clear:both;"></div>
                            </div>
                        <!-- /.panel heading -->

                        <!-- panel body -->
                            <div class="panel-body">

                            <!-- /.tabel responsive -->
                                <div class="table-responsive">
                                    <table class="table table-bordered table-hover table-striped">
                                        <thead>
                                            <tr>
                                                <th>No</th>
                                                <th>Nama Produk</th>
                                                <th>Kategori</th>
                                                <th>Brand</th>
                                                <th>Supplier</th>
                                                <th>Harga</th>
                                                <th>Qty</th>
                                                <th>Berat</th>
                                                <th>Diskon</th>
                                                <th>Gambar</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        <?php
                                        $pg = isset( $_GET['pg'] ) ? $_GET['pg'] : "";
                                        $batas = 10; /*batas tampilan setiap halaman*/
                                        if ( empty( $pg ) ) {
                                        $posisi = 0;
                                        $pg = 1;
                                        } else {
                                        $posisi = ( $pg - 1 ) * $batas;
                                        }
                                        /*Jika variabel $pg kosong maka akan menampilkan halaman pertama dengan batas baris 10*/

                                        $ambildata=mysqli_query($conect, "select*from tb_produk, tb_brand, tb_kategori, tb_supplier where tb_produk.id_brand=tb_brand.id_brand and tb_produk.id_kategori=tb_kategori.id_kategori and tb_produk.id_supplier=tb_supplier.id_supplier and tb_produk.nama_produk LIKE '%$_GET[qw]%' order by id_produk desc limit $posisi, $batas");
                                        $jumlah=mysqli_num_rows($ambildata);  /*mysql_num_rows untuk menghitung total baris di tabel databse*/
                                        if($jumlah == 0){  //jika tidak ada data
                                            ?>
                                        <tr>
                                            <td colspan="11">Tidak Terdapat Data</td>
                                        </tr>
                                        <?php
                                        }else{
                                        //jika ada data di tb_brand
                                        while($a=mysqli_fetch_array($ambildata)){ /*mysql_fetch array untuk mengambil data di setiap field di tabel databse*/
                                        ?>
                                        <tr>
                                            <td><?php echo $posisi=$posisi+1;?></td>
                                            <td><?php echo $a['nama_produk'];?></td>
                                            <td><?php echo $a['nama_kategori'];?></td>
                                            <td><?php echo $a['nama_brand'];?></td>
                                            <td><?php echo $a['nama_supplier'];?></td>
                                            <td><?php echo number_format($a['harga_produk']);?></td>
                                            <td><?php echo $a['stok_produk'];?></td>
                                            <td><?php echo number_format($a['berat_produk']);?></td>
                                            <td><?php echo $a['diskon_produk'];?>%</td>
                                            <td><img src="<?php echo $hostname;?>/assets/images/produk/<?php echo $a['gambar_produk'];?>" class="img-thumbnail" style="width:100px; height:100px;"></td>
                                            <td><a href="hapus_produk.php?id_produk=<?php echo $a['id_produk'];?>" onclick="return confirm('Yakin akan meghapus data ini')" title="Hapus data"><button class="btn btn-danger btn-sm"><i class="fa fa-trash-o fa-fw"></i> Hapus</button></a>
                                            <a href="edit_produk.php?id_produk=<?php echo $a['id_produk'];?>" title="Edit data"><button class="btn btn-primary btn-sm"><i class="fa fa-pencil-square-o fa-fw"></i> Edit</button> </a>
                                            </td>
                                        </tr>
                                        <?php
                                            }
                                        }
                                        ?>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- /.tabel responsive -->

                                <div class="text-center">
                                    <?php
                                //script paging, untuk menampikan setiap halaman
                                $jml_data = mysqli_num_rows(mysqli_query($conect, "select*from tb_produk, tb_brand, tb_kategori, tb_supplier where tb_produk.id_brand=tb_brand.id_brand and tb_produk.id_kategori=tb_kategori.id_kategori and tb_produk.id_supplier=tb_supplier.id_supplier and tb_produk.nama_produk LIKE '%$_GET[qw]%' order by id_produk desc"));
                                $JmlHalaman = ceil($jml_data/$batas); //ceil digunakan untuk pembulatan keatas
                                if($jml_data != 0){
                                if ( $pg > 1 ) {
                                $link = $pg-1;
                                $prev = "<a href='?pg=$link'><button name='prev' class='btn btn-primary btn-sm'>Prev</button></a> ";
                                } else {
                                $prev = "<button name='prev' class='btn btn-default btn-sm'>Prev </button> ";
                                }
                                $nmr = '';
                                for ( $i = 1; $i<= $JmlHalaman; $i++ ){

                                if ( $i == $pg ) {
                                $nmr .= "<button name='prev' class='btn btn-primary btn-sm'>$i</button> ";
                                } else {
                                $nmr .= "<a href='?pg=$i'><button name='prev' class='btn btn-default btn-sm'>$i</button></a> ";
                                }
                                }
                                if ( $pg < $JmlHalaman ) {
                                $link = $pg + 1;
                                $next = "<a href='?pg=$link'><button name='prev' class='btn btn-primary btn-sm'>Next</button></a> ";
                                } else {
                                $next = "<button name='prev' class='btn btn-default btn-sm'>Next</button> ";
                                }
                                echo $prev.$nmr.$next;
                                ?>
                                <br><br>
                                <span class="text-muted">Menampilkan <?php echo $jumlah; ?> dari <?php echo $jml_data; ?> Record </span>
                                <?php
                                }
                                ?>
                                </div>
                            </div>
                            <!-- /.panel body -->

                        </div>
                        <!-- /.panel -->

                    </div>
                    <!-- /.col lg 12-->

                </div>
                <!-- /.row -->


           </div>
            <!-- /.container-fluid -->

        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

<?php
//pemanggilan file setting footer
include "setting_footer.php";

?>

Ketikkan nama produk pada form pencarian dan klik tombol cari maka akan muncul pencarian produk sesuai dengan kata kunci yang anda inputkan, silahkan di coba.

Demikianlah tutorial membuat halaman daftar produk di dalam halaman admin.

Terimakasih

Develindo Web | Tutorial Pemrograman Website