Tutorial Web E-commerce

PART 6 – TUTORIAL MEMBUAT DAFTAR SUPPLIER DAN KATEGORI PRODUK

Daftar supplier dan kategori produk adalah bagian dari data produk nantinya, setelah kemarin kita membuat daftar brand / merk sekarang kita akan meneruskan untuk membuat daftar supplier dan kategori produk. Part 5 akan membahas untuk membuat daftar produk dan pengaturannya. Ikuti terus tutorial ini.

Tutorial ini hanya akan membahas cara membuat daftar supplier dan daftar kategori silahkan kalian buat sendiri untuk latihan dengan ketentuan yang sudah saya berikan dibagian bawah tutorial ini. Anda dapat melihat semua cara membuat daftar supplier dan kategori di video yang sudah saya berikan.

Bagian pertama, Buat tabel dengan nama tb_supplier di database Tutorial_ecommerce, dengan struktur sebagai berikut:

tabel-supplier

Setelah anda membuat tabel, buka notepad++ anda dan buat sebuah file dengan nama supplier.php simpan di folder adminweb.

Supplier.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 Supplier 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 Supplier 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">
                                <a href="input_supplier.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>
                        <!-- /.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 Supplier Produk</th>
                                                <th>Alamat</th>
                                                <th>Nomor Telp</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_supplier order by id_supplier 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="6">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_supplier'];?></td>
                                            <td><?php echo $a['alamat_supplier'];?></td>
                                            <td><?php echo $a['telp_supplier'];?></td>
                                            <td><a href="hapus_supplier.php?id_supplier=<?php echo $a['id_supplier'];?>" 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_supplier.php?id_supplier=<?php echo $a['id_supplier'];?>" 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_supplier order by id_supplier 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";

?>

Selanjutnya anda buka halaman admin, dan pada menu produk anda klik link supplier sehingga muncul tampilan seperti ini.

daftar-supplier

Karena data supplier pada tb_supplier belum ada maka tidak menampilkan data.

Selanjutnya kita buat form input untuk meginputkan data supplier ke database.

Bagian kedua, Buat file baru dengan nama input_supplier.php simpan di folder adminweb

input_supplier.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 Supplier 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 Supplier 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
                $alamat=mysqli_real_escape_string($conect, $_POST['alamat']);  //variabel dari name input alamat
                $telp=mysqli_real_escape_string($conect, $_POST['telp']);  //variabel dari name input telp

                //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 Supplier </div>";
                }
                elseif(empty($alamat)){  //jika field alamat kosong
                $er_alamat="<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 Alamat Supplier </div>";
                }
                elseif(empty($telp)){  //jika field telp kosong
                $er_telp="<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 Telp Supplier </div>";
                }
                elseif(!is_numeric($telp)){  //jika field telp tidak angka
                $er_alamat="<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 Nomor Telp dengan angka </div>";
                }
                else{
                $save=mysqli_query($conect, "INSERT INTO tb_supplier (id_supplier,nama_supplier,alamat_supplier,telp_supplier)values('','$nama','$alamat','$telp')");
                if($save){ //jika simpan berhasil
                echo "<script>alert('Data Berhasil Disimpan');document.location='supplier.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="supplier.php" title="Input data"><button name="input" class="btn btn-primary">Kembali</button></a>
                            </div>
                        <!-- /.panel heading -->

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

                            <!-- col sm 4 -->
                            <div class="col-sm-4">
                            <!-- /.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">
                                <label>Nama Supplier Produk</label>
                                <input type="text" class="form-control" placeholder="Nama Supplier Produk" name="nama" value="<?php echo $_POST['nama'];?>" maxlength="100" autocomplete="off" autofocus>
                            </div>
                            <?php echo $er_nama;?>
                            <div class="form-group">
                                <label>Alamat</label>
                                <textarea class="form-control" placeholder="Alamat Supplier" name="alamat"><?php echo $_POST['alamat'];?></textarea>
                            </div>
                            <?php echo $er_alamat;?>
                            <div class="form-group">
                                <label>Nomor Telp</label>
                                <input type="text" class="form-control" placeholder="Nomor Telp" name="telp" value="<?php echo $_POST['telp'];?>" maxlength="100" autocomplete="off" autofocus>
                            </div>
                            <?php echo $er_telp;?>
                            <button type="submit" name="simpan" class="btn btn-success">Simpan</button>

                            </form>
                                <!-- /.form -->
                            </div>
                                <!-- /.col sm 4 -->
                            </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 yang sudah anda buat.

Selanjutnya uji coba form yang sudah dibuat dengan cara klik tombol input pada bagian halaman supplir, maka akan tampil form input supplier seperti ini

input-supplier

Terdapat validasi disetiap kolom inputan, silahkan dicoba sendiri yah

Setelah anda membuat form input , silahkan inputkan beberapa data ke dalam databse sehingga tampilan menjadi seperti ini

daftar-supplier

Tampilan diatas menandakan sudah terdapat data di tb_supplier didalam database.

Bagian ketiga, Buat file beri nama edit_supplier.php simpan di folder adminweb

edit_supplier.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 Supplier 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 Supplier Produk
                            </li>
                        </ol>
                    </div>
                </div>
                <!-- /.row -->

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

                //variabel setiap input di form
                $nama=mysqli_real_escape_string($conect, $_POST['nama']);  //variabel dari name input nama
                $alamat=mysqli_real_escape_string($conect, $_POST['alamat']);  //variabel dari name input alamat
                $telp=mysqli_real_escape_string($conect, $_POST['telp']);  //variabel dari name input telp

                //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 Supplier </div>";
                }
                elseif(empty($alamat)){  //jika field alamat kosong
                $er_alamat="<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 Alamat Supplier </div>";
                }
                elseif(empty($telp)){  //jika field telp kosong
                $er_telp="<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 Telp Supplier </div>";
                }
                elseif(!is_numeric($telp)){  //jika field telp tidak angka
                $er_alamat="<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 Nomor Telp dengan angka </div>";
                }
                else{
                $save=mysqli_query($conect, "UPDATE tb_supplier set nama_supplier='$nama',alamat_supplier='$alamat',telp_supplier='$telp' where id_supplier='$_GET[id_supplier]'");
                if($save){ //jika simpan berhasil
                echo "<script>alert('Data Berhasil Disimpan');document.location='supplier.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="supplier.php" title="Input data"><button name="input" class="btn btn-primary">Kembali</button></a>
                            </div>
                        <!-- /.panel heading -->

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

                            <!-- col sm 4 -->
                            <div class="col-sm-4">
                            <!-- /.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">
                                <label>Nama Supplier Produk</label>
                                <input type="text" class="form-control" placeholder="Nama Supplier Produk" name="nama" value="<?php echo $b['nama_supplier'];?>" maxlength="100" autocomplete="off" autofocus>
                            </div>
                            <?php echo $er_nama;?>
                            <div class="form-group">
                                <label>Alamat</label>
                                <textarea class="form-control" placeholder="Alamat Supplier" name="alamat"><?php echo $b['alamat_supplier'];?></textarea>
                            </div>
                            <?php echo $er_alamat;?>
                            <div class="form-group">
                                <label>Nomor Telp</label>
                                <input type="text" class="form-control" placeholder="Nomor Telp" name="telp" value="<?php echo $b['telp_supplier'];?>" maxlength="100" autocomplete="off" autofocus>
                            </div>
                            <?php echo $er_telp;?>
                            <button type="submit" name="simpan" class="btn btn-success">Simpan</button>

                            </form>
                                <!-- /.form -->
                            </div>
                                <!-- /.col sm 4 -->
                            </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 yang sudah anda buat dan uji coba dengan klik tombol edit maka akan muncul form edit supplier seperti ini

edit-supplier

Silahkan anda coba untuk mengedit data dan simpan kembali setelah menegdit data.

Bagian keempat, Buat file beri nama hapus_supplier.php simpan di folder adminweb

hapus_supplier.php

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

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

if(isset($id)){ //jika ada id
//hapus data di tabel
$hapus=mysqli_query($conect, "DELETE from tb_supplier where id_supplier='$id'");
//jika hapus berhasil
if($hapus){
    echo"<script>alert('Data Berhasil di Hapus');document.location='supplier.php'</script>";
}
else{ //jika gagal
    echo"<script>alert('Error Bos !!');document.location='supplier.php'</script>";
}

}
?>

Uji coba dapat anda lakukan dengan klik pada tombol hapus maka data akan terhapus dari database.

Nah, demikian lah cara membuat halaman daftar supplier, input supplier, edit supplier dan hapus supplier

LATIHAN

Silahkan kalian mencoba membuat halaman daftar kategori produk dengan ketentuan sebagai berikut:

Pertama, Buat tabel dengan nama tb_kategori dengan struktur sebagai berikut

tabel-kategori

Kedua, buat file kategori.php untuk menampilkan data dari database dengan hasilnya nanti seperti ini

kategori-produk

Ketiga, buat file input_kategori.php untuk menginputkan data ke database dengan hasil seperti ini

input-kategori

Keempat, Buat file edit_kategori.php untuk mengedit data kategori produk dengan tampilan seperti ini

edit-kategori

Kelima, buat file hapus_kategori.php untuk menghapus data kategori dari database seperti menghapus data supplier.

 

Demikian tutorial part 6 dan part 7 akan membahas membuat daftar produk beserta pengaturannya.

Terimakasih

Develindo Web | Tutorial Pemrograman Website