Tutorial Web E-commerce

PART 8 - TUTORIAL MEMBUAT PENGATURAN FOTO SLIDE DI HALAMAN ADMIN

TUTORIAL MEMBUAT PENGATURAN FOTO SLIDE DI HALAMAN ADMIN

Tutorial ini akan membahasa bagaimana cara membuat pengaturan daftar foto slider di halaman admin, Jadi admin dapat mengelola data foto slider secara dinamis. Foto slider akan tampil di halaman utama website yang dilihat oleh pengunjung nantinya. Foto slider dapat berupa banner promo, produk baru, iklan atau foto-foto yang membuat pengunjung tertarik dengan bisnis anda.

Ikuti Panduan berikut ini

Pertama, buat tabel baru dengan nama tb_slider di database dengan struktur tabel seperti ini

tabel-slider

Setelah anda membuat tabel slider selanjutnya

Kedua, buat file baru beri nama slider.php simpan di folder adminweb

Ketikkan script slider.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 Foto Slider
                        </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 Foto Slider
                            </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_slider.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>Judul Foto</th>
                                                <th>Deskripsi</th>
                                                <th>Foto Slider</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_slider order by id_slider 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['judul_slider'];?></td>
                                            <td><?php echo $a['ket_slider'];?></td>
                                            <td><img src="<?php echo $hostname;?>/assets/images/slider/<?php echo $a['gambar'];?>" class="img-thumbnail" style="width:100px; height:100px;"></td>
                                            <td><a href="hapus_slider.php?id_slider=<?php echo $a['id_slider'];?>" 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_slider.php?id_slider=<?php echo $a['id_slider'];?>" 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_slider order by id_slider 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 slider.php di folder adminweb.

Coba jalankan dengan klik sub menu Foto Slider pada menu pengaturan, maka akan muncul halaman seperti ini

foto-slider-kosong

Tampilan tersebut menandakan bahwa di dalam tb_slider tidak terdapat data, sehingga data tidak muncul pada halaman web anda.

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

Ketikkan script ini input_slider.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 Foto Slider
                        </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 Foto Slider
                            </li>
                        </ol>
                    </div>
                </div>
                <!-- /.row -->

                <?php
                //variabel setiap input di form
                $nama=mysqli_real_escape_string($conect, $_POST['nama']);  //variabel dari name input nama
                $keterangan=mysqli_real_escape_string($conect, $_POST['keterangan']);     //variabel dari name input keterangan

                $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 Judul Foto </div>";
                }
                elseif(empty($keterangan)){ //jika field url kosong
                $er_keterangan="<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 Keterangan Foto</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</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 brand dan simpan data ke tb_brand
                move_uploaded_file($foto,"../assets/images/slider/$nama_foto");
                $save=mysqli_query($conect, "INSERT INTO tb_slider (id_slider,judul_slider,ket_slider,gambar)values('','$nama','$keterangan','$nama_foto')");
                if($save){ //jika simpan berhasil
                echo "<script>alert('Data Berhasil Ditambahkan');document.location='slider.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="slider.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>Judul Foto</label>
                                <input type="text" class="form-control" placeholder="Judul Foto" name="nama" value="<?php echo $_POST['nama'];?>" maxlength="50" autocomplete="off" autofocus>
                            </div>
                            <?php echo $er_nama;?>
                            <div class="form-group">
                                <label>Keterangan Foto</label>
                                <textarea class="form-control" placeholder="Ketrangan" name="keterangan" rows="3"><?php echo $_POST['keterangan'];?></textarea>
                            </div>
                            <?php echo $er_url;?>
                            <div class="form-group">
                                <label>Gambar</label>
                                <input type="file" class="form-control-file" name="foto" accept=".jpg, .png">
                            </div>
                            <?php echo $er_foto;?>

                            <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 dan coba jalankan dengan klik tombol input pada daftar slider maka akan muncul form input seperti ini

input-slider

Inputkan beberapa data ke dalam database maka pada daftar foto slider akan menampilkan data seperti ini

foto-slider

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

Ketikkan script ini edit-slider.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 Foto Slider
                        </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 Foto Slider
                            </li>
                        </ol>
                    </div>
                </div>
                <!-- /.row -->

                <?php
                //ambil data berdasarkan id
                $tampildata=mysqli_query($conect, "select*from tb_slider where id_slider='$_GET[id_slider]'");
                $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
                $keterangan=mysqli_real_escape_string($conect, $_POST['keterangan']);     //variabel dari name input keterangan

                $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 Judul Foto </div>";
                }
                elseif(empty($keterangan)){ //jika field url kosong
                $er_keterangan="<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 Keterangan Foto</div>";
                }
                else{
                if(empty($foto)){  //jika foto tidak diubah maka
                $save=mysqli_query($conect, "UPDATE tb_slider set judul_slider='$nama', ket_slider='$keterangan' where id_slider='$_GET[id_slider]'");
                if($save){   //save
                echo " <script>alert('Data Berhasil Diubah');document.location='slider.php'</script>";
                }
                else{    //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/slider/'.$lama); //hapus foto lama di folder
                move_uploaded_file($foto,"../assets/images/slider/$nama_foto"); //upload foto baru
                $save=mysql_query("UPDATE tb_slider set gambar='$nama_foto', judul_slider='$nama', ket_slider='$keterangan' where id_slider='$_GET[id_slider]'");
                if($save){   //save
                echo " <script>alert('Data Berhasil Diubah');document.location='slider.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="slider.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>Judul Foto</label>
                                <input type="text" class="form-control" placeholder="Judul Foto" name="nama" value="<?php echo $b['judul_slider'];?>" maxlength="50" autocomplete="off" autofocus>
                            </div>
                            <?php echo $er_nama;?>
                            <div class="form-group">
                                <label>Keterangan Foto</label>
                                <textarea class="form-control" placeholder="Ketrangan" name="keterangan" rows="3"><?php echo $b['ket_slider'];?></textarea>
                            </div>
                            <?php echo $er_url;?>
                            <div class="form-group">
                                <label>Gambar</label>
                                <input type="file" class="form-control-file" name="foto" accept=".jpg, .png">
                                <input type="hidden" name="foto_lama" value="<?php echo $b['gambar'];?>">
                            </div>
                            <?php echo $er_foto;?>

                            <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 dan jalankan dengan klik tombol edit, maka akan muncul form edit seperti ini

edit-foto-slider

Edit data dan simpan kembali. Lihat hasilnya apakah data berhasil diedit atau tidak.

Kelima, buat file baru beri nama hapus_slider.php simpan di folder adminweb

Ketikkan script ini hapus_slider.php

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

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

if(isset($id)){ //jika ada id
//ambil data di tabel berdasarkan id
$data=mysqli_fetch_array(mysqli_query($conect, "select * from tb_slider where id_slider='$id'"));
//hapus gambar di folder
unlink("../assets/images/slider/$data[gambar]");

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

}
?>

Uji coba script dapat dilakukan dengan klik tombol hapus maka data slider akan terhapus dari database.

 

Demikian tutorial membuat halaman daftar slider di halaman admin

Terimakasih

Develindo Web | Tutorial Pemrograman Website