Posted by : Unknown Selasa, 11 Desember 2012

Untuk menampilkan data dari table yang memiliki banyak records sangat dibutuhkan sistem Paginasi, untuk memudahkan navigasi. Ada beberapa teknik membuat paginasi, berikut salah satu teknik paginasi menggunakan Ajax-PHP-MySQL.



Langkah pertama adalah membuat contoh database yang memiliki struktur tabel sebagai berikut :

CREATE TABLE `records` (
`id` int(11) NOT NULL auto_increment,
`img` varchar(255) NOT NULL,
`message` varchar(200) NOT NULL,
PRIMARY KEY (`id`)
)
Isi tabel tersebut dengan beberapa contoh data dengan struktur data yang ada, Kemudian buat program PHP yang berfungsi untuk menghubungkan PHP dengan database, simpan file ini dalam bentuk PHP :

<?php
/* Database config */

$db_host = 'localhost';
$db_user = 'user database';
$db_pass = 'password database';
$db_database = 'nama database';

/* End config */

$link = @mysql_connect($db_host,$db_user,$db_pass) or die('Unable to establish a DB connection');

mysql_query("SET NAMES 'utf8'");
mysql_select_db($db_database,$link);
?>
Berikutnya membuat program PHP yang bertujuan untuk mengambil dan menampilkan isi dari tabe, simpan dalam bentuk PHP :

<?php
include("connect.php");

$per_page = 4;
$sqlc = "show columns from records ";
$rsdc = mysql_query($sqlc);
$cols = mysql_num_rows($rsdc);
$page = $_REQUEST['page'];

$start = ($page-1)*4;
$sql = "select * from records order by id limit $start,4";
$rsd = mysql_query($sql);
?>
<?php
while ($rows = mysql_fetch_assoc($rsd))
{?>
<div class="each_rec"> <img src="<?php echo $rows['img'];?>" height="50" width="70" style="float:left; margin-right:3px;" alt="" /> <?php echo $rows['message'];?></div>
<?php
}?>

Program javascript berikut untuk menampilkan data yang telah diambil menggunakan Program PHP di atas :

$(document).ready(function(){
//show loading bar
function showLoader(){
$('.search-background').fadeIn(200);
}
//hide loading bar
function hideLoader(){
$('.search-background').fadeOut(200);
};

$("#paging_button li").click(function(){
//show the loading bar
showLoader();

$("#paging_button li").css({'background-color' : ''});
$(this).css({'background-color' : '#A5CDFA'});

$("#content").load("data.php?page=" + this.id, hideLoader);
});

// by default first time this will execute
$("#1").css({'background-color' : '#A5CDFA'});
showLoader();
$("#content").load("data.php?page=1", hideLoader);
});
Berikut style CSS untuk mengatur tampilan paginasi :

/* CSS Document  www.99points.info */
#heading
{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:56px;
color:#CC0000;
}
body{
text-align:center;
font-family:Arial, Sans-Serif;
font-size:0.75em;
}

/* CSS Document */
#container {
height:300px;
padding:12px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-align: center;
text-decoration: none;
width: 600px;
margin-top:40px;
}

#container .each_rec{

color:#000066;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
padding:5px 5px 12px 5px;
border-bottom:solid #669900;
text-align:justify;
margin-bottom:11px;
}

.search-background {
display: none;
font-size: 13px;
font-weight: bold;
height:160px;
position: absolute;
padding-top:140px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-align: center;
opacity:0.5;filter: alpha(opacity=50) ;
text-decoration: none;
width: 600px;
}

.search-background {
background-color: #ff4242;
color:#FFFFFF;
text-shadow: #fff 0px 0px 20px;
}

search-background label{

border:solid #66FF00 1px;
}

#paging_button ul{ width: 600px; padding:0px; margin:8px;}

#paging_button ul li { -moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
float:left; height:20px; width:20px; list-style-image:none;
list-style-type:none; font-weight:bold; border:solid #CCCCCC 1px;
margin:3px; cursor:pointer}

li:hover{ color: #CC0000; cursor: pointer; }
Akhirnya semua program tersebut dijadikan satu dalam sebuah halam :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Paginasi Halaman dengan Ajax</title>
<link rel="stylesheet" type="text/css" media="screen" href="css.css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>


<?php
$per_page = 4;
include("connect.php");
$sql = "select * from records ";
$rsd = mysql_query($sql);
$count = mysql_num_rows($rsd);
$pages = ceil($count/$per_page)
?>
<div align="center">

<h1>Paginasi Halaman dengan Ajax</h1>
<div id="container">

<div class="search-background">
<label><img src="loader.gif" alt="" /></label>
</div>

<div id="content"></div>
</div>
<div id="paging_button">
<ul>
<?php
//Show page links
for($i=1; $i<=$pages; $i++)
{
echo '<li id="'.$i.'">'.$i.'</li>';
}?>
</ul>
</div>
</div>


<br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" />
</body>
</html>

Untuk meliha contoh dari program ditas bisa dilihat disini, dan untuk download contoh programnya disini.


Description: Paginasi Data menggunakan PHP-MySQL-Ajax
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Paginasi Data menggunakan PHP-MySQL-Ajax

Leave a Reply

Monggo Tinggalkan Jejak Kaks :)

Subscribe to Posts | Subscribe to Comments

Welcome to My Blog

Popular Post

Labels

Arsip Blog

Followers

- Copyright © 2013 shad0w-share | Designed by Johanes Djogan -