Belajar Paging

7 Apr

Paging disini merupakan penomoran suatu halaman. Dimana jika kita menginginkan pada suatu halaman web kita hanya ingin menampilkan beberapa record maka kita membutuhkan teknik paging ini.

Pertama untuk pembelajaran kita, kita buat struktur databasenya. Database ini akan kita beri nama paging dengan struktur tabelnya yang diberi nama Anggota sebagai berikut:
1. Nama – varchar(30)
2. Alamat – varchar(50)

Sekarang kita buat file paging tersebut

<link href=”standar.css” rel=”stylesheet” type=”text/css”>
<?php
mysql_connect(“localhost”,”root”,””);
mysql_select_db(“pintar”);

echo “<table align=center><tr><th>No</th><th>Nama</th><th>Alamat</th></tr>”;

// Langkah 1: Tentukan batas,cek halaman & posisi data
$batas   = 5;
$halaman = $_GET[‘halaman’];
if(empty($halaman)){
$posisi  = 0;
$halaman = 1;
}
else{
$posisi = ($halaman-1) * $batas;
}

//Langkah 2: Sesuaikan perintah SQL
$tampil = “SELECT * FROM anggota LIMIT $posisi,$batas”;
$hasil  = mysql_query($tampil);

$no = $posisi+1;
while($r=mysql_fetch_array($hasil)){
echo “<tr><td>$no</td><td>$r[nama]</td><td>$r[alamat]</td></tr>”;
$no++;
}
echo “</table><br>”;

//Langkah 3: Hitung total data dan halaman
$tampil2 = mysql_query(“SELECT * FROM anggota”);
$jmldata = mysql_num_rows($tampil2);
$jmlhal  = ceil($jmldata/$batas);

echo “<div>”;
// Link ke halaman sebelumnya (previous)
if($halaman > 1){
$prev=$halaman-1;
echo “<span><a href=$_SERVER[PHP_SELF]?halaman=1>« First</a></span>
<span><a href=$_SERVER[PHP_SELF]?halaman=$prev>« Prev</a></span> “;
}
else{
echo “<span>« First</span><span>« Prev</span> “;
}

// Tampilkan link halaman 1,2,3 …
for($i=1;$i<=$jmlhal;$i++)
if ($i != $halaman){
echo ” <a href=$_SERVER[PHP_SELF]?halaman=$i>$i</a> “;
}
else{
echo ” <span>$i</span> “;
}

// Link kehalaman berikutnya (Next)
if($halaman < $jmlhal){
$next=$halaman+1;
echo “<span><a href=$_SERVER[PHP_SELF]?halaman=$next>Next »</a><a href=$_SERVER[PHP_SELF]?halaman=$jmlhal>Last »</a></span>”;
}
else{
echo “<span>Next » Last »</span>”;
}
echo “</div>”;
echo “<p align=center>Total anggota : <b>$jmldata</b> orang</p>”;
?>
Sekarang simpan dengan nama file index.php

Kemudian kita buat css nya

body {
color       : #2E6AB1;
font-family : Tahoma;
font-size   : 13;
}
table {
border-collapse : collapse;
}
th {
background-color : #2E6AB1;
padding-left     : 10px;
padding-right    : 8px;
padding-top      : 3px;
padding-bottom   : 3px;
border           : 1px solid #969BA5;
text-align       : left;
color            : #FFFFFF;
font-size        : 13;
}
td {
background-color : #F0F0F0;
padding-left     : 8px;
padding-right    : 8px;
padding-top      : 3px;
padding-bottom   : 3px;
border           : 1px solid #969BA5;
color            : #2E6AB1;
font-size        : 13;
}

div.paging {
padding     : 2px;
margin      : 2px;
text-align  : center;
font-family : Tahoma;
font-size   : 12px;
}
div.paging a {
padding         : 2px 5px 2px 5px;
margin-right    : 2px;
border          : 1px solid #9AAFE5;
text-decoration : none;
color           : #2E6AB1;
}
div.paging a:hover {
border           : 1px solid #2B66A5;
color            : #000000;
background-color : #FFFF80;
}
div.paging span.current {
padding          : 2px 5px 2px 5px;
margin-right     : 2px;
border           : 1px solid navy;
font-weight      : bold;
background-color : #2E6AB1;
color            : #FFFFFF;
}
div.paging span.disabled {
padding      : 2px 5px 2px 5px;
margin-right : 2px;
border       : 1px solid #999999;
color        : #999999;
}
div.paging span.prevnext {
font-weight : bold;
}

Simpan dengan nama standar.css

InsyaAllah paging yang telah anda buat dapat berjalan sebagaimana mestinya. Semoga artikel ini dapat membantu anda. Jika ada terjadi kesalahan atau bug berilah saran kepada saya. Terima Kasih telah membaca artikel ini.

Download file

3 Tanggapan to “Belajar Paging”

  1. Roy siregar April 12, 2011 pada 4:53 am #

    MAS minta satu paket dong webnya. . klo bisa semua yang ada di htdoc. heheheheheeeee…

  2. Heru April 13, 2011 pada 9:22 am #

    weeee…. mantap gan.. sukses.. tambah lagi dong tutorial nya🙂

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

mydesigncrowd

%d blogger menyukai ini: