Update Aplikasi PPDB Premium Versi 4.2 : Penambahan Galeri Foto

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 ini
    
    function 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>
      
    
    
Terakhir tambahkan bari beriku ke htaccess di main direktori aplikasi
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