Pemrograman Web
Untuk web yang menampilkan artikel hingga ratusan atau bahkan ribuan kurang efektif apabila berita tersebut ditampilkan dalam satu halaman, tentunya akan terjadi scroll yang teramat panjang dan memerlukan loading yang lama sehingga akan mengganggu kenyamanan bagi para pembaca.
CSS DAN QUERY
<style>
body {background:url(bg.jpg);padding:0px; -webkit-background-size: cover;
-moz-background-size: cover;-o-background-size: cover;background-size:
cover;}
h1 {font-family:Arial, Helvetica, sans-serif;color:#ffffff; text-shadow:1px
1px 1px #333333}
.top {position:fixed;top:0px;left:0px; width:100%;background:rgba(0, 0, 0,
0.7);color:#ffffff; height:20px;}
.top a {float:left;margin-left:20px;color:#ffffff;font-family:Arial,
Helvetica, sans-serif;font-size:13px; text-align:left; text-decoration:none}
#container {min-height:300px;border:solid 4px #cccccc;
padding:12px;width:600px;margin-top:40px;background:rgba(0, 0, 0, 0.7);}
.isi{ margin-bottom:10px;border-bottom:dotted 1px #cccccc; padding:10px;
text-align:justify;color:#ffffff;
text-shadow:1px 1px 1px #333333;font-family:Arial, Helvetica,
sans-serif;font-size:15px;}
.kode
{float:left;line-height:35px;margin:2px;font-size:40px;font-family:Arial,
Helvetica, sans-serif;}
.loading{display: none;font-size: 13px;font-weight:
bold;height:160px;position: absolute;
padding-top:140px;text-decoration: none;width: 600px;}.loading
label{}
#paging_button ul{width: 600px; padding:0px; margin:8px;}
#paging_button ul li { font-family:Arial, Helvetica,
sans-serif;text-align:center; padding:10px 15px 10px
15px;background:#0099FF;color:#ffffff; float:left;
list-style:none;cursor:pointer}
#paging_button ul li:hover{ color: #fff; cursor: pointer;background:#333333;}
</style>
<script>
$(document).ready(function(){
//show loading bar
function showLoader(){
$('.loading').fadeIn(500);
}
//hide loading bar
function hideLoader(){
$('.loading').fadeOut(500);
};
$("#paging_button
li").click(function(){
//show the loading
bar
showLoader();
$("#paging_button li").css({'background-color' : ''});
$(this).css({'background-color' : '#333333'});
$("#content").load("data.php?page=" + this.id, hideLoader);
});
// by default first time this will execute
$("#1").css({'background-color' :
'#333333'});
showLoader();
$("#content").load("data.php?page=1", hideLoader);
});
</script>
<script type="text/javascript" src="jquery-1.3.2.js"></script>\
3. Buatlah
Database baru denga nama Test dan buat tb_pagination
|
id
|
:
|
INT
|
12
|
|
isi
|
:
|
Text
|
|
4. Silahkan
Buat koneksi dan masukkan Script Dibawah ini dan simpan
PHP
<?PHP
$host="localhost";
$user="root";
$pass="";
$db="test";// Nama Database
$entries=1;
$waktu=date("Y-m-d H:i:s");
$koneksi=mysql_connect($host,$user,$pass);
mysql_select_db($db,$koneksi);
$user="root";
$pass="";
$db="test";// Nama Database
$entries=1;
$waktu=date("Y-m-d H:i:s");
$koneksi=mysql_connect($host,$user,$pass);
mysql_select_db($db,$koneksi);
if($koneksi){
//echo "Berhasil koneksi";
}else{
echo "Koneksi Gagal";
}
?>
//echo "Berhasil koneksi";
}else{
echo "Koneksi Gagal";
}
?>
5. Kembali lagi ke page index.php Sekarang kita buat HTML dan script PHP nya, dan kopi paste ini dibawah kode <body>
PHP
<div class="top"><a href="http://s-widodo.com"
target="_blank">s-widodo.com</a></div>
<!-- start:SCRIPT PHP -->
<?php $per_page = 2;include("koneksi.php");
$sql = "select * from tb_pagination";
$rows2= mysql_query($sql);
$count = mysql_num_rows($rows2);
$pages = ceil($count/$per_page); ?>
<div align="center">
<h1>PAGINATION DENGAN AJAX PHP </h1>
<div id="container">
<div class="loading"><label><img
src="loader.gif" alt="" width="30"
height="15"/></label></div>
<div id="content"></div>
</div>
<div id="paging_button"><ul>
<!-- start:SCRIPT PHP -->
<?php //Show page links
for($i=1; $i<=$pages; $i++) { echo '<li id="'.$i.'">'.$i.'</li>';
}?> </ul> </div>
</div>
6. Kalo udah ditutup semua sekarang kita buat lagi page baru dengan nama data.php, hapus kode htmlnya dan kopi paste Script dibawah ini
PHP
<?php
include("koneksi.php");
$per_page = 2;
$sqlc = "show columns from tb_pagination ";
$rowsc = mysql_query($sqlc);
$cols = mysql_num_rows($rowsc);
$page = $_REQUEST['page'];
$start = ($page-1)*2;
$sql = "select * from tb_pagination order by id limit $start,2";
$rows2 = mysql_query($sql);?>
<?php while ($rows = mysql_fetch_assoc($rows2)) {?>
<div class="isi">
<span class="kode"><?PHP echo $rows ['id'];?></span>
<?php echo $rows['isi'];?></div>
<?php }?>
Tidak ada komentar:
Posting Komentar