Selamat pagi sobat blogger yang berbahagia, setelah kemarin kita membahas materi mengenai cara mengupload gambar dengan preview menggunakan php dan javascript. Maka pada kesempatan kali ini saya akan berbagi informasi mengenai cara menampilkan gambar dalam bentuk grid (seperti pada gallery atau pada web e-commerce ). Sebenarnya artikel ini berkaitan dengan artikel sebelumnya, jika artikel sebelumnya itu membahas cara mengupload image ke database sedangkan artikel ini membahas mengenai cara menampilkan gambar atau image yang sudah tersimpan kedalam database tentunya ditampilkan dalam bentuk grid. Untuk dapat menampilkan gambar dalam bentuk grid sebenarnya sederhana saja, kita bisa menggunakan tabel dengan menentukan jumlah kolom yang akan dibuat, lalu dibuatkan perulangan.
Cara membuat tampilan Grid seperti gallery pada photo menggunakan php dan html

Sebelum menampilkan gambar dalam bentuk grid, kita harus mempunyai database dan tabel untuk untuk mengupload gambar. Untuk langkah-langkah lengkapnya silahkan klik link dibawah ini :


Jika sobat sudah berhasil melakukan langkah-langkah diatas tersebut, langkah selanjutnya adalah inti dari artikel ini yaitu mengatur agar tampilan menjadi tampilan seperti gallery pada e-commerce .  oiya jika sobat mendownload source code yang ada pada artikel  cara mengupload gambar dengan preview menggunakan php dan javascript sobat hanya perlu mengedit script yang ada di “index.php” tanpa tanda kutip, berikut adalah script code untuk halaman index.php : 
<?php
error_reporting(0);
//membuat koneksi ke database
include "koneksi.php";
// jumlah data yang akan ditampilkan per halaman
$dataPerPage = 10;
// apabila $_GET['page'] sudah didefinisikan, gunakan nomor halaman tersebut, 
// sedangkan apabila belum, nomor halamannya 1.
if(isset($_GET['page']))
{
    $noPage = $_GET['page'];
} 
else $noPage = 1; {
}
// perhitungan offset
$offset = ($noPage - 1) * $dataPerPage;
?>
 
 <html>
 <title> Upload Gambar </title>
 <script language="javascript">
 function tanya() {
 if (confirm ("Apakah Anda yakin akan menghapus data ini ?")) {
 return true;
  } else {
   return false;
  }
  }
</script>
<body width='900px'>
<center> 
<h3> MEMBUAT TAMPILAN GAMBAR GRID</h3>  UpLoad gambar dengan Preview menggunakan PHP dan Javascript 
<hr>
<br>
<!-- /////////////////////////////tombol untuk menambah data//////////////////////////////////-->
<form action='tambah.php' method='POST'>
<table >
 <tr>
 <center><td> <input type='submit' name='tambah' value='Tambah Gambar'> </td> 
 </tr>
</table>
</form>
<!-- ///////////////////////////// Script untuk membuat tabel///////////////////////////////// -->
<table  border='0' Width='800'  cellpadding="5" cellspacing="5">  
 <tr height="140" bgcolor="#eee">
<?php  
// Perintah untuk menampilkan data
$queri="Select * From tabel_gambar order by id desc LIMIT $offset, $dataPerPage " ;  //menampikan data dari tabel siswa menggunakan limit (untuk membatasi)
$hasil=MySQL_query ($queri);    //fungsi untuk SQL
// nilai awal variabel untuk no urut
$i = $offset+1;
//menentukan jumlah kolom
$jml_colom=5;
$cnt = 0;
// perintah untuk membaca dan mengambil data dalam bentuk array
while ($data = mysql_fetch_array ($hasil)){
$id = $data['id'];
  if ($cnt >= $jml_colom) 
      {
         echo "</tr><tr height='140' bgcolor='#eee'> ";
         $cnt = 0;
   }

   $cnt++;
 echo "  
   
  <td><center>
  <div>
  <img src='upload/" . $data['gambar']. "' alt='' width='80' height='60' />
  </div>
  <div>
  ".$data['ket']." <br>
  </div>
  </td> ";
  
 
 $i++; 
}
?>
</table>
<br>
<br>
<?php
// mencari jumlah semua data dalam tabel guestbook
$query   = "SELECT COUNT(*) AS jumData FROM tabel_gambar";
$hasil  = mysql_query($query);
$data     = mysql_fetch_array($hasil);
$jumData = $data['jumData'];
// menentukan jumlah halaman yang muncul berdasarkan jumlah semua data
$jumPage = ceil($jumData/$dataPerPage);
// menampilkan link previous
if ($noPage > 1) echo  "<a href='".$_SERVER['PHP_SELF']."?page=".($noPage-1)."'>&lt;&lt; Prev</a>";
// memunculkan nomor halaman dan linknya
for($page = 1; $page <= $jumPage; $page++)
{
         if ((($page >= $noPage - 3) && ($page <= $noPage + 3)) || ($page == 1) || ($page == $jumPage)) 
         {   
            if (($showPage == 1) && ($page != 2))  echo "..."; 
            if (($showPage != ($jumPage - 1)) && ($page == $jumPage))  echo "...";
            if ($page == $noPage) echo " <b>".$page."</b> ";
            else echo " <a href='".$_SERVER['PHP_SELF']."?page=".$page."'>".$page."</a> ";
            $showPage = $page; 
         }
}
// menampilkan link next
if ($noPage < $jumPage) echo "<a href='".$_SERVER['PHP_SELF']."?page=".($noPage+1)."'>Next &gt;&gt;</a>";
?>


</body>
</html>  

Catatan:

  1. Untuk mmebuat tampilan grid ini kita menggunakan tabel, namun border nya kita buat “0”, sehingga tidak telihat garis tepinya.
  2. Untuk menentukan jumlah kolomnya, kita atur pada script dibaris ke 53 yaitu, $jml_colom=5; angka 5 pada baris tersebut menunjukkan jumlah kolom, silahkan ganti angka 5 tersebut sesuai dengan keinginan sobat.
  3. Pada tutorial ini sudah menggunakan fitur pagging, soba tbisa menentukan julah gambar yang akan ditampilkan pada setiap halaman aktif, disini saya menentukan gambar yang tampil adalah 10 setiap halaman, bisa sobat lihat pada baris ke-6, yaitu “$dataPerPage = 10;” tanpa tanda kutip. Sehingga ketika kita menambahkan gambar maka jumlah halaman akan bertambah menyesuaikan dengan jumlah gambar dengan batas masksimal yang telah kita tentukan.

Oke sobat, begitulah tutorial yang dapat saya berikan pada kesempatan kali ini, bagaimana? Mudah bukan cara membuat tampilan Grid seperti gallery pada photo menggunakan php dan html ini? Sobat dapat mempraktikkannya langsung dengan cara mendownload script codenya disini
Terimkasih sudah menyempatkan waktu untuk berkunjung di blog sederhana, semoga bisa membantu dan memberikan apa yang sobat butuhkan, tetap semangat dan happy coding :)
Selamat pagi sobat blogger yang berbahagia, setelah kemarin kita membahas materi mengenai cara mengupload gambar dengan preview menggunakan php dan javascript. Maka pada kesempatan kali ini saya akan berbagi informasi mengenai cara menampilkan gambar dalam bentuk grid (seperti pada gallery atau pada web e-commerce ). Sebenarnya artikel ini berkaitan dengan artikel sebelumnya, jika artikel sebelumnya itu membahas cara mengupload image ke database sedangkan artikel ini membahas mengenai cara menampilkan gambar atau image yang sudah tersimpan kedalam database tentunya ditampilkan dalam bentuk grid. Untuk dapat menampilkan gambar dalam bentuk grid sebenarnya sederhana saja, kita bisa menggunakan tabel dengan menentukan jumlah kolom yang akan dibuat, lalu dibuatkan perulangan.
Cara membuat tampilan Grid seperti gallery pada photo menggunakan php dan html

Sebelum menampilkan gambar dalam bentuk grid, kita harus mempunyai database dan tabel untuk untuk mengupload gambar. Untuk langkah-langkah lengkapnya silahkan klik link dibawah ini :


Jika sobat sudah berhasil melakukan langkah-langkah diatas tersebut, langkah selanjutnya adalah inti dari artikel ini yaitu mengatur agar tampilan menjadi tampilan seperti gallery pada e-commerce .  oiya jika sobat mendownload source code yang ada pada artikel  cara mengupload gambar dengan preview menggunakan php dan javascript sobat hanya perlu mengedit script yang ada di “index.php” tanpa tanda kutip, berikut adalah script code untuk halaman index.php : 
<?php
error_reporting(0);
//membuat koneksi ke database
include "koneksi.php";
// jumlah data yang akan ditampilkan per halaman
$dataPerPage = 10;
// apabila $_GET['page'] sudah didefinisikan, gunakan nomor halaman tersebut, 
// sedangkan apabila belum, nomor halamannya 1.
if(isset($_GET['page']))
{
    $noPage = $_GET['page'];
} 
else $noPage = 1; {
}
// perhitungan offset
$offset = ($noPage - 1) * $dataPerPage;
?>
 
 <html>
 <title> Upload Gambar </title>
 <script language="javascript">
 function tanya() {
 if (confirm ("Apakah Anda yakin akan menghapus data ini ?")) {
 return true;
  } else {
   return false;
  }
  }
</script>
<body width='900px'>
<center> 
<h3> MEMBUAT TAMPILAN GAMBAR GRID</h3>  UpLoad gambar dengan Preview menggunakan PHP dan Javascript 
<hr>
<br>
<!-- /////////////////////////////tombol untuk menambah data//////////////////////////////////-->
<form action='tambah.php' method='POST'>
<table >
 <tr>
 <center><td> <input type='submit' name='tambah' value='Tambah Gambar'> </td> 
 </tr>
</table>
</form>
<!-- ///////////////////////////// Script untuk membuat tabel///////////////////////////////// -->
<table  border='0' Width='800'  cellpadding="5" cellspacing="5">  
 <tr height="140" bgcolor="#eee">
<?php  
// Perintah untuk menampilkan data
$queri="Select * From tabel_gambar order by id desc LIMIT $offset, $dataPerPage " ;  //menampikan data dari tabel siswa menggunakan limit (untuk membatasi)
$hasil=MySQL_query ($queri);    //fungsi untuk SQL
// nilai awal variabel untuk no urut
$i = $offset+1;
//menentukan jumlah kolom
$jml_colom=5;
$cnt = 0;
// perintah untuk membaca dan mengambil data dalam bentuk array
while ($data = mysql_fetch_array ($hasil)){
$id = $data['id'];
  if ($cnt >= $jml_colom) 
      {
         echo "</tr><tr height='140' bgcolor='#eee'> ";
         $cnt = 0;
   }

   $cnt++;
 echo "  
   
  <td><center>
  <div>
  <img src='upload/" . $data['gambar']. "' alt='' width='80' height='60' />
  </div>
  <div>
  ".$data['ket']." <br>
  </div>
  </td> ";
  
 
 $i++; 
}
?>
</table>
<br>
<br>
<?php
// mencari jumlah semua data dalam tabel guestbook
$query   = "SELECT COUNT(*) AS jumData FROM tabel_gambar";
$hasil  = mysql_query($query);
$data     = mysql_fetch_array($hasil);
$jumData = $data['jumData'];
// menentukan jumlah halaman yang muncul berdasarkan jumlah semua data
$jumPage = ceil($jumData/$dataPerPage);
// menampilkan link previous
if ($noPage > 1) echo  "<a href='".$_SERVER['PHP_SELF']."?page=".($noPage-1)."'>&lt;&lt; Prev</a>";
// memunculkan nomor halaman dan linknya
for($page = 1; $page <= $jumPage; $page++)
{
         if ((($page >= $noPage - 3) && ($page <= $noPage + 3)) || ($page == 1) || ($page == $jumPage)) 
         {   
            if (($showPage == 1) && ($page != 2))  echo "..."; 
            if (($showPage != ($jumPage - 1)) && ($page == $jumPage))  echo "...";
            if ($page == $noPage) echo " <b>".$page."</b> ";
            else echo " <a href='".$_SERVER['PHP_SELF']."?page=".$page."'>".$page."</a> ";
            $showPage = $page; 
         }
}
// menampilkan link next
if ($noPage < $jumPage) echo "<a href='".$_SERVER['PHP_SELF']."?page=".($noPage+1)."'>Next &gt;&gt;</a>";
?>


</body>
</html>  

Catatan:

  1. Untuk mmebuat tampilan grid ini kita menggunakan tabel, namun border nya kita buat “0”, sehingga tidak telihat garis tepinya.
  2. Untuk menentukan jumlah kolomnya, kita atur pada script dibaris ke 53 yaitu, $jml_colom=5; angka 5 pada baris tersebut menunjukkan jumlah kolom, silahkan ganti angka 5 tersebut sesuai dengan keinginan sobat.
  3. Pada tutorial ini sudah menggunakan fitur pagging, soba tbisa menentukan julah gambar yang akan ditampilkan pada setiap halaman aktif, disini saya menentukan gambar yang tampil adalah 10 setiap halaman, bisa sobat lihat pada baris ke-6, yaitu “$dataPerPage = 10;” tanpa tanda kutip. Sehingga ketika kita menambahkan gambar maka jumlah halaman akan bertambah menyesuaikan dengan jumlah gambar dengan batas masksimal yang telah kita tentukan.

Oke sobat, begitulah tutorial yang dapat saya berikan pada kesempatan kali ini, bagaimana? Mudah bukan cara membuat tampilan Grid seperti gallery pada photo menggunakan php dan html ini? Sobat dapat mempraktikkannya langsung dengan cara mendownload script codenya disini
Terimkasih sudah menyempatkan waktu untuk berkunjung di blog sederhana, semoga bisa membantu dan memberikan apa yang sobat butuhkan, tetap semangat dan happy coding :)
Label: ,
This is the most recent post.
Older Post

Post a Comment

Author Name

Contact Form

Name

Email *

Message *

Powered by Blogger.