Menampilkan Gambar dari Database dengan Paging via PHP

Sebelumnya saya sudah berbagi tentang menampilkan gambar dari database dengan php, tetapi jika kita lihat hasilnya kurang efektif, kenapa? karena bila gambar yang diambil dari database bayak misalnya 100, maka tidak mungkin kita menampilkan semuanya dalam satu halaman. Untuk itu kali ini saya berbagi tentang menambahkan paging (halaman). Seperti anda lihat di pencarian google, di bawahnya ada navigasi Halaman 1, 2, 3 da seterusnya. Oke langsung saja.

Database

CREATE DATABASE `dbtutor` ;

Table

CREATE TABLE `dbtutor`.`gambar` (
`id_gambar` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`nama` VARCHAR( 50 ) NOT NULL ,
`lokasi` VARCHAR( 50 ) NOT NULL ,
`diskripsi` TEXT NOT NULL ,
`link` VARCHAR( 50 ) NOT NULL
)

Mengisi Tabel Gambar

INSERT INTO `dbtutor`.`gambar` (
`id_gambar` ,
`nama` ,
`lokasi` ,
`diskripsi` ,
`link`
)
VALUES (NULL , '', 'images/elephant.jpg', '', ''), 
(NULL , '', 'images/cat.jpg', '', ''),
(NULL , '', 'images/bee.jpg', '', ''),
(NULL , '', 'images/ant.jpg', '', ''),
(NULL , '', 'images/dog.jpg', '', ''),
(NULL , '', 'images/bird.jpg', '', ''),
(NULL , '', 'images/lion.jpg', '', ''),
(NULL , '', 'images/tiger.jpg', '', ''),
(NULL , '', 'images/fish.jpg', '', ''),
(NULL , '', 'images/hourse.jpg', '', ''),
(NULL , '', 'images/mouse.jpg', '', ''),
(NULL , '', 'images/monkey.jpg', '', ''),
(NULL , '', 'images/pig.jpg', '', ''),
(NULL , '', 'images/buffalo.jpg', '', ''),
(NULL , '', 'images/giraffe.jpg', '', ''),
(NULL , '', 'images/camel.jpg', '', ''),
(NULL , '', 'images/butterfly.jpg', '', ''),
(NULL , '', 'images/snake.jpg', '', '');

Kode PHP untuk menampilkan gambar dengan paging

<html>
<head>
<title>Gambar Thumbnail</title>
<style type="text/css">
 .gambar{
  border:1px solid #999;
  margin:3px;
  padding:5px;
 }
 .gambar:hover{
  background-color:#36F;
 }
 .gambar img{
  
 }
 .hal{
  border:1px solid #999;
  background-color:#CCC;
  width:20px;
  float:left;
  padding:1px;
  margin:1px;
  text-align:center;
  display:block;
 }
 .hal:hover{
  border-color:#333;
 }
  
</style>
</head>

<body>
<?php
mysql_connect("localhost","root","");
mysql_select_db("dbtutor");


$batas=6;
if ($_GET['hal']<=1){
 $posisi=0;
}else{
 $posisi=($_GET['hal']-1)*$batas; 
}

$jum_per_bar=3;


$sql_rec=mysql_query("select * from gambar");
$jum_rec=mysql_num_rows($sql_rec);

$sql_paging=mysql_query("select * from gambar limit $posisi,$batas");
$no=$posisi+1;
while ($row=mysql_fetch_array($sql_paging)){
 echo "<a href=$row[link] title='$row[nama]'><img class='gambar' src='$row[lokasi]' width=150px height=150px /></a>";
 if ($no % $jum_per_bar==0 || $no==$jum_rec){
  echo "</br>"; 
 }
 $no++;
}


$jum_hal=ceil($jum_rec/$batas);

for ($i=1;$i<=$jum_hal;$i++){
 if ($i==$_GET['hal']){
  echo "<div class='hal'><b>$i</b></div>";
 }else{
  echo "<a href='gambar_paging.php?&hal=$i' class='hal'>$i</a>";
 }
}
?>
</body>
</html>

Menampilkan Gambar dari Database dengan Paging via PHP

Related : Menampilkan Gambar dari Database dengan Paging via PHP

1 komentar:

Cari Tutorial

Tutorial Populer

Labels