Update Aplikasi PPDB Premium Versi 4.2 : Penambahan Galeri Foto
Bagi yang sebelumnya sudah mendapatkan aplikasi ppdb premium versi 4.1, maka pada versi 4.2 ini ada tambahan untuk module galeri. Dengan module galeri ini kita bisa menambahkan foto – foto lingkungan atau kegiatan sekolah sehingga calon pendaftar bisa tahu seperti apa nantinya lingkungan sekolah mereka. Untuk galeri sendiri nantinya akan di kategorikan kedalam album – album.
Update ini terdiri dari dua sisi, yaitu untuk bagian admin tentunya, dan bagian user yang akan ditampilkan secara umum. Anda bisa menambahkan update ini, namun tidak pun tidak karena ini tergantung kebutuhan sekolah/instansi masing – masing. Update tidak akan disertakan dalam bentuk file secara keseluruhan, karena ada beberapa sekolah yang mungkin sudah melakukan costum pada aplikasi, oleh karena itu saya hanya akan menampilkan potongan – potongan script yang bisa Anda tambahkan ke aplikasi
Database
Tambahkan tabel baru ke database, Anda bisa menjalankan query berikut ke SQL phpmyadmin
CREATE TABLE `ppdb_album` (
`id` int(5) NOT NULL,
`nama` varchar(50) NOT NULL,
`keterangan` varchar(8) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `ppdb_album`
--
ALTER TABLE `ppdb_album`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `ppdb_album`
--
ALTER TABLE `ppdb_album`
MODIFY `id` int(5) NOT NULL AUTO_INCREMENT;
-- COPY KEDUA BISA PAKE SQL INI
CREATE TABLE `ppdb_album_isi` (
`id` int(20) NOT NULL,
`id_album` varchar(5) NOT NULL,
`judul` varchar(100) NOT NULL,
`deskripsi` varchar(100) NOT NULL,
`urut` varchar(5) NOT NULL,
`file` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `ppdb_album_isi`
--
ALTER TABLE `ppdb_album_isi`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `ppdb_album_isi`
--
ALTER TABLE `ppdb_album_isi`
MODIFY `id` int(20) NOT NULL AUTO_INCREMENT;
Admin
Selanjutnya pada sisi Admin, Anda bisa menambahkan hal – hal berikut ini
- function
Tambahkan potongan script berikut pada function admin/*New Modul Album Foto */ function InsertAlbum($nama, $keterangan){ $sql="INSERT INTO ppdb_album (nama, keterangan) VALUES(?,?)"; if($stmt=prepare($sql)){ mysqli_stmt_bind_param($stmt,"ss",$param_nama, $param_keterangan); $param_nama=$nama; $param_keterangan=$keterangan; if(execute($stmt)){ return true; }else{ return false; } } stmt_close($stmt); } function DetailAlbum($id_album){ global $id, $nama, $keterangan; $sql="SELECT id, nama, keterangan WHERE id=?"; if($stmt=prepare($sql)){ mysqli_stmt_bind_param($stmt,"i",$param_id); $param_id=$id_album; if(execute($stmt)){ store_result($stmt); mysqli_stmt_bind_result($stmt, $id, $nama, $keterangan); mysqli_stmt_fetch($stmt); if(num_rows_2($stmt)==1){ return true; }else{ return false; } } } stmt_close($stmt); } function EditAlbum($nama, $keterangan, $id_album){ $sql="UPDATE ppdb_album SET nama=?, keterangan=? WHERE id=?"; if($stmt=prepare($sql)){ mysqli_stmt_bind_param($stmt,"ssi", $param_nama, $param_keterangan, $param_id_album ); $param_nama=$nama; $param_keterangan=$keterangan; $param_id_album=$id_album; if(execute($stmt)): return true; else: return false; endif; } stmt_close($stmt); } function DeleteAlbum($data){ $sql="DELETE FROM ppdb_album WHERE id=?"; if($smtm=prepare($sql)){ mysqli_stmt_bind_param($stmt,"i",$param_id); $param_id=$data; if(execute($stmt)){ return true; }else{ return false; } } stmt_close($stmt); } function ShowIdAlbum(){ $sql="SELECT id, nama, keterangan FROM ppdb_album ORDER by id desc"; $perintah=query($sql); return $perintah; } function UploadFotoAlbum($id_album, $judul, $deskripsi, $urut, $file){ global $FileItem, $FileDestination; $sql="INSERT INTO ppdb_album_isi (id_album, judul, deskripsi, urut, file) VALUES (?,?,?,?,?) "; if($stmt=prepare($sql)){ mysqli_stmt_bind_param($stmt,"sssss",$param_id_album,$param_judul,$param_deskripsi,$param_urut,$param_file); $param_id_album=$id_album; $param_judul=$judul; $param_deskripsi=$deskripsi; $param_urut=$urut; $param_file=$FileItem; if(execute($stmt) && (move_uploaded_file($file, $FileDestination.$FileItem))){ return true; }else{ return false; } } stmt_close($stmt); } function AlbumView($data){ global $id, $nama, $keterangan; $sql="SELECT id, nama, keterangan FROM ppdb_album WHERE id=?"; if($stmt=prepare($sql)){ mysqli_stmt_bind_param($stmt,"i",$param_id); $param_id=$data; if(execute($stmt)){ store_result($stmt); mysqli_stmt_bind_result($stmt, $id, $nama, $keterangan); mysqli_stmt_fetch($stmt); if(num_rows_2($stmt)==1){ return true; }else{ return false; } } } stmt_close($stmt); } function AlbumIsi($data){ $sql="SELECT id, id_album, judul, deskripsi, urut, file FROM ppdb_album_isi WHERE id_album='$data'"; $perintah=query($sql); return $perintah; } function AlbumDelete($data){ $sql="DELETE FROM ppdb_album WHERE id=?"; if($stmt=prepare($sql)){ mysqli_stmt_bind_param($stmt,"i",$param_id); $param_id=$data; if(execute($stmt)){ return true; }else{ return false; } } stmt_close($stmt); } function AlbumIsiDelete($data){ $sql="DELETE FROM ppdb_album_isi WHERE id_album=?"; if($stmt=prepare($sql)){ mysqli_stmt_bind_param($stmt,"i",$param_id); $param_id=$data; if(execute($stmt)){ return true; }else{ return false; } } stmt_close($stmt); }
- album.tambah.php
<?php //include properties include ('head.php'); include ('css.php'); include ('navigasi.php'); ?> <?php //Database function and session include ('../databases/koneksi.php'); include ('../function/admin.web.fungsi.php'); ?> <?php $nama = $keterangan = $nama_err = $keterangan_err = $berhasil_simpan = $berhasil_simpan_err =""; if($_SERVER['REQUEST_METHOD']=='POST'){ if(empty(trim($_POST['nama']))){ $nama_err = "Nama album tidak boleh kosong"; }else{ $nama=test_input($_POST['nama']); $nama=mysqli_real_escape_string($koneksi, $nama); } if(empty(trim($_POST['keterangan']))){ $keterangan_err="Keterangan album tidak boleh kosong"; }else{ $keterangan=test_input($_POST['keterangan']); $keterangan=mysqli_real_escape_string($koneksi, $keterangan); } if(empty($nama_err) && empty($keterangan_err)){ if(InsertAlbum($nama, $keterangan)){ $berhasil_simpan="Album berhasil dibuat"; echo " <meta http-equiv=\"refresh\"content=\"2;URL=album.tambah.php\"/> "; }else{ $berhasil_simpan_err="Album gagal dibuat"; } } } ?> <div id="content-wrapper"> <div class="container-fluid"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="index.php">Dashboard</a> </li> <li class="breadcrumb-item active">Buat Album</li> </ol> <h3>Tambah album</h3> <hr> <p class="sukses-form"><?php echo $berhasil_simpan; ?></p> <p class="error-form"><?php echo $berhasil_simpan_err; ?></p> <form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>" method="post"> <div class="form-group"> <label>Nama Album:</label> <input type="text" name="nama" class="form-control" id="nama" placeholder="Masukan nama album" required=""> <span class="error-form"><?php echo $nama_err; ?></span> </div> <div class="form-group"> <label>Keterangan:</label> <input type="text" name="keterangan" class="form-control" id="keterangan" placeholder="Masukan keterangan album" required=""> <em>Untuk keterangan foto masukan <b>default</b></em> <span class="error-form"><?php echo $keterangan_err; ?></span> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> <hr/> <?php include('footer.php'); ?>
- album.tampil.php
<?php //include properties include ('head.php'); include ('css.php'); include ('navigasi.php'); ?> <?php //Database function and session include ('../databases/koneksi.php'); include ('../function/admin.web.fungsi.php'); ?> <div id="content-wrapper"> <div class="container-fluid"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="index.php">Dashboard</a> </li> <li class="breadcrumb-item active">Album</li> </ol> <h3>Album</h3> <hr> <div class="card-body"> <div class="table-responsive"> <table class='table table-striped table-bordered table-hover' id='dataTables-example' width='100%' cellspacing='0'> <thead> <tr> <th>Nama Album</th> <th>Keterangan</th> <th>Aksi</th> </tr> </thead> <?php $ShowIdAlbum=ShowIdAlbum(); if(num_rows($ShowIdAlbum)>0){ while($DataAlbum=mysqli_fetch_array($ShowIdAlbum)){ //test echo ' <tr> <td>'.$DataAlbum['nama'].'</td> <td>'.$DataAlbum['keterangan'].'</td> <td> <a title="Lihat Album" href="album.view.php?id='.$DataAlbum['id'].'"><i class="fa fa-eye"></i></a> <a title="Hapus Album" href="album.delete.php?id='.$DataAlbum['id'].'"><i class="fa fa-trash"></i></a> </td> </tr> '; } } ?> </table> </div> </div> <?php include('footer.php'); ?>
- album.upload.php
<?php //include properties include ('head.php'); include ('css.php'); include ('navigasi.php'); ?> <?php //Database function and session include ('../databases/koneksi.php'); include ('../function/admin.web.fungsi.php'); ?> <?php $id_album_err = $judul_err = $deskripsi_err = $urut_err = $file_err = $berhasil_simpan = $berhasil_simpan_err =""; if($_SERVER['REQUEST_METHOD']=='POST'){ if(empty(trim($_POST['id_album']))){ $id_album_err="Id album tidak boleh kosong"; }else{ $id_album=test_input($_POST['id_album']); $id_album=mysqli_real_escape_string($koneksi, $id_album); } if(empty(trim($_POST['judul']))){ $judul_err="Nama judul foto tidak boleh kosong"; }else{ $judul=test_input($_POST['judul']); $judul=mysqli_real_escape_string($koneksi, $judul); } if(empty(trim($_POST['deskripsi']))){ $deskripsi_err="Deskripsi foto tidak boleh kosong"; }else{ $deskripsi=test_input($_POST['deskripsi']); $deskripsi=mysqli_real_escape_string($koneksi,$deskripsi); } if(trim($_POST['urut']=='')){ $urut_err="Urutan nomor tidak boleh dikosongkan"; } else{ $urut=test_input($_POST['urut']); $urut=mysqli_real_escape_string($koneksi,$urut); } $FileName=$_FILES['file_foto']['name']; $FileDir=$_FILES['file_foto']['tmp_name']; $FileSize=$_FILES['file_foto']['size']; $FileDestination='../content/album/'; $FileExtension=strtolower(pathinfo($FileName, PATHINFO_EXTENSION)); $FileValid=array('jpg','jpeg','png'); $FileItem=rand(100,1000000).".".$FileExtension; if(in_array($FileExtension, $FileValid)){ if($FileSize>2000000){ $file_err="Ukuran foto tidak boleh lebih dari 2MB"; }else{ $file=$FileDir; } }else{ $file_err="Wajib diisi dengan format JPG, JPEG, atau PNG"; } if(empty($id_album_err)&& empty($judul_err) && empty($deskripsi_err)&& empty($urut_err) && empty($file_err)){ if(UploadFotoAlbum($id_album, $judul, $deskripsi, $urut, $file)){ $berhasil_simpan="Foto berhasil ditambahkan ke album"; echo "<meta http-equiv=\"refresh\"content=\"2;URL=album.upload.php\" />"; }else{ $berhasil_simpan_err="Foto gagal ditambahkan ke album"; } } //echo var_dump($koneksi); } ?> <div id="content-wrapper"> <div class="container-fluid"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="index.php">Dashboard</a> </li> <li class="breadcrumb-item active">Upload Galeri</li> </ol> <h3>Upload</h3> <p>Upload foto tambahkan ke album yang sudah dibuat. Jika urut album 0, maka disarankan judul dan deskripsi disesuaikan dengan nama albumnya</p> <hr> <p class="sukses-form"><?php echo $berhasil_simpan; ?></p> <p class="error-form"><?php echo $berhasil_simpan_err; ?></p> <form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>" method="post" enctype="multipart/form-data"> <div class="form-group"> <label>Pilih Album</label> <select class="form-control" name="id_album" id="id_album"> <?php $ShowIdAlbum=ShowIdAlbum(); while($data=mysqli_fetch_array($ShowIdAlbum)){ ?> <?php echo ' <option value='.$data['id'].'>'.$data['nama'].'</option> '; } ?> </select> <span style="color:red;"><?php echo $id_album_err; ?></span> </div> <div class="form-group"> <label>Judul foto</label> <input class="form-control" type="text" name="judul" id="judul" required="" placeholder="Masukan nama judul foto"> <span style="color:red;"><?php echo $judul_err; ?></span> </div> <div class="form-group"> <label>Deskripsi</label> <input class="form-control" type="text" name="deskripsi" id="deskripsi" required="" placeholder="Masukan deskripsi foto"> <span style="color:red;"><?php echo $deskripsi_err; ?></span> </div> <div class="form-group"> <label>Urutan</label> <input class="form-control" type="text" name="urut" id="urut" required="" minlength="1" maxlength="1" placeholder="Masukan nomor urut foto"> <span style="color:red;"><?php echo $urut_err; ?></span> <em>Set nilai 0 untuk menjadikannya cover album</em> </div> <div class="form-group"> <input type="file" name="file_foto"> <span style="color:red;"><?php echo $file_err; ?></span> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> <hr/> <?php include('footer.php'); ?>
- album.view.php
<?php //include properties include ('head.php'); include ('css.php'); include ('navigasi.php'); ?> <?php //Database function and session include ('../databases/koneksi.php'); include ('../function/admin.web.fungsi.php'); ?> <?php if(isset($_GET["id"]) && !empty(trim($_GET["id"]))){ if(!AlbumView(trim($_GET['id']))){ die("Error: Data tidak ditemukan, atau belum ada foto yang di unggah"); exit(); } }else{ die("Error: Id data tidak ditemukan"); exit(); } ?> <div id="content-wrapper"> <div class="container-fluid"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="index.php">Dashboard</a> </li> <li class="breadcrumb-item active">Album</li> </ol> <h3>Isi Album</h3> <hr> <div class="row" style="margin-top: 20px;"> <?php $AlbumIsi=AlbumIsi($id); if(num_rows($AlbumIsi)>0){ while($DataAlbumIsi=mysqli_fetch_array($AlbumIsi)){ ?> <div class="col-sm-6 col-md-4 grid-costum"> <a href="../content/album/<?php echo"$DataAlbumIsi[file]"; ?>" data-lightbox="mygallery" data-title="<?php echo"$DataAlbumIsi[judul]"; ?>"><img class="img-fluid" src="../content/album/<?php echo"$DataAlbumIsi[file]"; ?>" alt="<?php echo"$DataAlbumIsi[deskripsi]"; ?>"></a> </div> <?php } }else{ echo ' <div class="col-md-12"> <em>Maaf album ini belum memiliki foto</em> </div> '; } ?> </div> <?php include('footer.php'); ?>
- album.delete.php
<?php include ('../databases/koneksi.php'); include ('../function/admin.web.fungsi.php'); ?> <?php if(isset($_POST["id"]) && !empty(trim($_POST["id"]))){ if(AlbumDelete(trim($_POST['id'])) && AlbumIsiDelete(trim($_POST['id']))){ // jika berhasil menghapus data header("location: album.tampil.php"); exit(); } else{ echo "Oops! terjadi kesalahan.Coba lagi nanti"; } }else{ // Mengecek keberadaan ID if(!AlbumView(trim($_GET['id']))){ die("Error: Data tidak ditemukan, atau belum ada foto yang di unggah"); exit(); } } ?> <?php include ('head.php'); include ('css.php'); include ('navigasi.php'); ?> <div id="content-wrapper"> <div class="container-fluid"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="index.php">Dashboard</a> </li> <li class="breadcrumb-item active">Delete Album</li> </ol> <form action="<?php echo htmlspecialchars(basename($_SERVER['REQUEST_URI']));?>" method="post"> <div class="form-group"> Yakin album ini akan di hapus ? <input type="hidden" name="id" id="id" value="<?php echo $id; ?>"> </div> <div class="form-group"> <button type="submit" class="btn btn-primary">Delete</button> <div class="form-group"> </form> <?php include('footer.php'); ?>
- navigasi.php
pada navigasi nantinya anda bisa menambahkan menu – menu berikut :<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="pagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-fw fa-image"></i> <span>Galeri</span> </a> <div class="dropdown-menu" aria-labelledby="pagesDropdown"> <h6 class="dropdown-header">Galeri :</h6> <a class="dropdown-item" href="album.tambah.php">Buat Album</a> <a class="dropdown-item" href="album.upload.php">Upload Foto</a> <a class="dropdown-item" href="album.tampil.php">Lihat Album</a> </li>
User
Pada sisi user, Anda bisa menambahkan file – file berikut ke main direktori aplikasi
- Function
Pada file public function tambahkan potongan script berikut inifunction AlbumTampilCover(){ $sql="SELECT id, id_album, judul, deskripsi, urut, file FROM ppdb_album_isi WHERE urut='0'"; $perintah=query($sql); return $perintah; } function AlbumView($data){ global $id, $nama, $keterangan; $sql="SELECT id, nama, keterangan FROM ppdb_album WHERE id=?"; if($stmt=prepare($sql)){ mysqli_stmt_bind_param($stmt,"i",$param_id); $param_id=$data; if(execute($stmt)){ store_result($stmt); mysqli_stmt_bind_result($stmt, $id, $nama, $keterangan); mysqli_stmt_fetch($stmt); if(num_rows_2($stmt)==1){ return true; }else{ return false; } } } stmt_close($stmt); } function AlbumTampilIsi($data){ $sql="SELECT id, id_album, judul, deskripsi, urut, file FROM ppdb_album_isi WHERE id_album='$data' "; $perintah=query($sql); return $perintah; }
- ro-galeri.php
<?php //Include properties include ('databases/koneksi.php'); include ('function/public.web.fungsi.php'); include ('head.php'); include ('css.php'); include ('navigasi.php'); ?> <div class="container-fluid"> <div class="row" style="margin-top: 20px;"> <?php $AlbumIsi=AlbumTampilCover(); if(num_rows($AlbumIsi)>0){ while($row=mysqli_fetch_array($AlbumIsi)){ echo ' <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item"> <div class="card h-100"> <a href="view_galeri.php?id='.$row['id_album'].'"><img class="card-img-top" src="content/album/'.$row['file'].'" alt="'.$row['judul'].'"></a> <div class="card-body"> <div class="post-info"> <span class="label-info"><i class="fas fa-fw fa-tags"></i>'.$row['deskripsi'].'</span> </div> </div> </div> </div>'; } }else{ echo ' <div class="col-md-12"> <em>Maaf album ini belum memiliki foto</em> </div> '; } ?> </div> </div> <?php //footer include('footer.php'); ?>
- view_galeri.php
<?php //Include properties include ('databases/koneksi.php'); include ('function/public.web.fungsi.php'); include ('head.php'); include ('css.php'); include ('navigasi.php'); ?> <?php if(isset($_GET["id"]) && !empty(trim($_GET["id"]))){ if(!AlbumView(trim($_GET['id']))){ die("Error: Data tidak ditemukan, atau belum ada foto yang di unggah"); exit(); } }else{ die("Error: Id data tidak ditemukan"); exit(); } ?> <div class="container-fluid"> <div class="row" style="margin-top: 20px;"> <?php $AlbumIsi=AlbumTampilIsi($id); if(num_rows($AlbumIsi)>0){ while($DataAlbumIsi=mysqli_fetch_array($AlbumIsi)){ ?> <div class="col-sm-6 col-md-4 grid-costum"> <a href="content/album/<?php echo"$DataAlbumIsi[file]"; ?>" data-lightbox="mygallery" data-title="<?php echo"$DataAlbumIsi[judul]"; ?>"><img class="img-fluid" src="content/album/<?php echo"$DataAlbumIsi[file]"; ?>" alt="<?php echo"$DataAlbumIsi[deskripsi]"; ?>"></a> </div> <?php } }else{ echo ' <div class="col-md-12"> <em>Maaf album ini belum memiliki foto</em> </div> '; } ?> </div> </div> <?php //footer include('footer.php'); ?>
- navigasi.php
pada file navigasi.php main direktori tambahkan menu galeri, contohnya seperti berikut ini :<li class="nav-item"> <a class="nav-link" href="galeri">Galeri</a> </li>
RewriteRule ^galeri ro-galeri.php [NC,L]
Plugins
Tambahkan plugins berikut ke folder plugins aplikasi. Anda bisa mendownloadnya di https://lokeshdhakar.com/projects/lightbox2/ atau baca contoh tutorialnya di Cara Mudah Membuat Galeri Foto Menggunakan Lightbox2