Tutorial Membuat Pengaturan data Foto Slide di halaman admin
Pengaturan ini berfungsi untuk mengatur foto/banner yang ditampilkan di halaman user nantinya
Pertama, Buat folder baru di dalam folder images dengan nama slider
Kedua, Buat tabel baru dengan nama tb_slider di databse anda
Struktur dari tb_slider seperti ini
Ketiga, buat file baru beri nama slider.php simpan di folder ADMINWEB
isi dari file slider.php seperti ini
<?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>
Pengaturan Foto Slide / Banner
<a href="input_slider.php" title="Input data"><button name="input" class="btn btn-primary pull-right"><i class="fa fa-plus fa-fw"></i> Tambah Baru</button></a>
</h3>
<ol class="breadcrumb">
<li class="active">
<i class="fa fa-dashboard"></i> Home
</li>
<li class="active">
<i class="fa fa-list"></i> Foto Slide
</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-primary">
<!-- panel heading -->
<div class="panel-heading">
Daftar Foto slide / banner
</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";
?>
Hasil dari slider.php maka akan menampilkan seperti ini
Ketiga, buat file baru beri nama input_slider.php simpan di folder ADMINWEB
isi dari file input_slider.php seperti ini
<?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>
Tambah Foto Slide
</h3>
<ol class="breadcrumb">
<li class="active">
<i class="fa fa-dashboard"></i> Home
</li>
<li class="active">
<i class="fa fa-list"></i> Tambah Foto Slide
</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'>×</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'>×</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'>×</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'>×</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'>×</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'>×</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'>×</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-primary">
<!-- panel heading -->
<div class="panel-heading">
<a href="slider.php" title="Input data"><button name="input" class="btn btn-default">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";
?>
Hasil dari input_slider.php maka akan menampilkan seperti ini
Ketiga, buat file baru beri nama edit_slider.php simpan di folder ADMINWEB
isi dari file edit_slider.php seperti ini
<?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>
Ubah Foto Slide
</h3>
<ol class="breadcrumb">
<li class="active">
<i class="fa fa-dashboard"></i> Home
</li>
<li class="active">
<i class="fa fa-list"></i> Ubah Foto Slide
</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'>×</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'>×</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'>×</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'>×</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'>×</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'>×</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=mysqli_query($conect, "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'>×</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-primary">
<!-- panel heading -->
<div class="panel-heading">
<a href="slider.php" title="Input data"><button name="input" class="btn btn-default">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";
?>
Hasil dari edit_slider.php maka akan menampilkan seperti ini
Ketiga, buat file baru beri nama hapus_slider.php simpan di folder ADMINWEB
isi dari file hapus_slider.php seperti ini
<?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>";
}
}
?>
Oke selesai
Develindo Web | Tutorial Pemrograman Website
Leave a comment