Monday, March 7, 2011

Pagination dengan PHP

Pagination atau membuat halaman adalah suatu teknik membuat segmentasi pada hasil query dari perintah SELECT.
Seperti pada phpmyadmin yang langsung menambahkan skrip limit ketika mengeksekusi suatu pencarian atau mengeksekusi perintah SELECT. Saya baru menyadarinya.. Dan ternyata fungsinya adalah untuk mempercepat loading ketika eksekusi suatu query.
Tujuan pagination sama persis dengan skrip limit, yaitu mempercepat loading dari pada aplikasi PHP kita..

Berikut adalah skriptnya :
<?
// Halaman yang akan ditampilkan untuk pertengahan?
$adjacents = 3;

$sql= mysql_query("select count(a.no_bib) as jumlah from master_buku as a");
$hitung=mysql_fetch_array($sql);
$total_pages = $hitung[jumlah];

/* variabel query. */
$targetpage = "index.php"; //nama file (nama file ini)
$limit = 5; //Jumlah record database yang akan ditampilkan setiap halaman
$page = $_GET['page'];
if($page)
$start = ($page - 1) * $limit;
else
$start = 0;

if ($page == 0) $page = 1;//jika variabel kosong maka defaultnya halaman pertama.
$prev = $page - 1;//tombol prev; halaman sebelumnya
$next = $page + 1;//tombol next; halaman berikutnya
$lastpage = ceil($total_pages/$limit); //tombol hal terakhir
$lpm1 = $lastpage - 1; //tombol sebelum hal terakhir (hal terakhir-1)

$pagination = "";
if($lastpage > 1)
{
$pagination .= "<div class=\"pagination\">";
//Link halaman sebelumnya
if ($page > 1)
$pagination.= "<a href=\"$targetpage?page=$prev\">« Prev</a>";
else
$pagination.= "<span class=\"disabled\">« Prev</span>";

//halaman
if ($lastpage < 5 + ($adjacents * 2))
{
for ($counter = 1; $counter <= $lastpage; $counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";
}
}
elseif($lastpage > 5 + ($adjacents * 2)) //enough pages to hide some
{

if($page < 1 + ($adjacents * 2))
{
for ($counter = 1; $counter < 4 + ($adjacents * 2); $counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";
}
$pagination.= "...";
$pagination.= "<a href=\"$targetpage?page=$lpm1\">$lpm1</a>";
$pagination.= "<a href=\"$targetpage?page=$lastpage\">$lastpage</a>";
}

elseif($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2))
{
$pagination.= "<a href=\"$targetpage?page=1\">1</a>";
$pagination.= "<a href=\"$targetpage?page=2\">2</a>";
$pagination.= "...";
for ($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";
}
$pagination.= "...";
$pagination.= "<a href=\"$targetpage?page=$lpm1\">$lpm1</a>";
$pagination.= "<a href=\"$targetpage?page=$lastpage\">$lastpage</a>";
}

else
{
$pagination.= "<a href=\"$targetpage?page=1\">1</a>";
$pagination.= "<a href=\"$targetpage?page=2\">2</a>";
$pagination.= "...";
for ($counter = $lastpage - (2 + ($adjacents * 2)); $counter <= $lastpage; $counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";
}
}
}

//link halaman selanjutnya
if ($page < $counter - 1)
$pagination.= "<a href=\"$targetpage?page=$next\">Next »</a>";
else
$pagination.= "<span class=\"disabled\">Next »</span>";
$pagination.= "</div>\n";
}

//untuk memanggilnya, cukup meletakkan variabel $pagination pada posisi yang anda inginkan
echo "<table width='100%' border='0'>
<tr>
<td>
<div class='judul_pen'>Daftar Skripsi Mahasiswa</div><br>
Jumlah : $total_pages Records
</td>
</tr>
<tr bgcolor='#B0C4DE'><td><div align='center'>$pagination</div></td></tr>
</table>";
?>

Dan berikut ini adalah cssnya :
div.pagination {
padding: 3px;
margin: 3px;
}

div.pagination a {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #AAAADD;

text-decoration: none; /* no underline */
color: #000099;
}

div.pagination a:hover, div.pagination a:active {
border: 1px solid #000099;

color: #000;
}

div.pagination span.current {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #000099;

font-weight: bold;
background-color: #000099;
color: #FFF;
}

div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #EEE;

color: #DDD;
}
Kode css ini silahkan anda paste-kan di antara tag <head> atau anda pasang pada file css tersendiri.

Hasilnya adalah seperti berikut :

No comments:

Post a Comment