Teknik Paging Simple CRUD PHP

Assalamualaikum,

Para pengunjung sekalian, di pagi hari yang saya sendiri agak aras-arasen untuk Update Blog kesayangan ini, maka saya tetapkan diri untuk tetap mengupdate, demi saya sendiri juga, hehe, Dengan Pepatah Ikatlah ilmu dengan Menunliskannya, Lipatgandakan Ilmu dengan Menyebarkannya, akhirnya tetap Semangat.

Langsung saja, bahasan kali ini adalah Teknik Paging? Apa itu Paging? singkat nya, paging adalah pembagian data menjadi beberapa file halaman, untuk mencegah Scroll yang terlalu banyak dan memperindah tampilan.

masih bingung? anda pasti tahu paging jika meliat gambar ini

google-paging

dan kita akan menerapkan ke CRUD kita yang dahulu menjadi seperti ini

paging1 paging2

Oke, untuk menerapkannya, anda bisa Replace file Index.php pada Simple Crud yang lama dengan kode berikut

<html>
<head>

<script type=”text/javascript” src=”js/jquery-1.9.1.js”></script>
<script type=”text/javascript” src=”js/jquery-1.2.1.pack.js”></script>
<script type=”text/javascript”>
function lookup(a)
{
if(a.length==0){$(“#suggestions”).hide()
}
else
{
$.post(“carinama.php”,{queryString:””+a+””},
function(b){if(b.length>0)
{
$(“#suggestions”).show();$(“#autoSuggestionsList”).html(b)}
}
)
}
}function fill(a){$(“#inputString”).val(a);setTimeout(“$(‘#suggestions’).hide();”,200)}
</script>
<style type=”text/css”>
.suggestionsBox{
position:relative;
left:30px;
margin:0 auto;
width:300px;
background-color:#212427;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border:2px solid #000;
color:#fff}
.suggestionList{
margin:0;
padding:0}
.suggestionList
li{
margin:0 0 3px 0;
padding:3px;
cursor:pointer}
.suggestionList
li:hover
{
background-color:#659cd8}
.tengah{
margin:0 auto;padding-top:10px;
padding-left:310px;
font-family:Helvetica;
font-size:14px}
.judul{padding-left:390px;
font-family:Helvetica,Geneva,sans-serif}

.tengah{
padding-left: 500px;

}
</style>

<table border=”0″ align=’center’>
<tr><td>
<form method=”POST” action=”index.php”>
<input type =’text’ name = ‘KUNCI’ placeholder=”Inputkan Nama Disini” id=”inputString” onkeyup=”lookup(this.value)” onblur=”fill()”>
<input type =’submit’ name = ‘CARI’ value=’CARI’>
<font style=”font-size:12px”><br><!–b>Mencari Data 1 Bulan = “01/2013″</b–></font>

<font style=”font-size:12px”><br><!–b>Mencari Berdasarkan tanggal Format = “05/11/2012″<br>
Mencari Data 1 Bulan = “01/2013″</b–>
</font>
<div class=”suggestionsBox” id=”suggestions” style=”display:none”>
<img src=”upArrow.png” style=”position:relative;top:-12px;left:30px” alt=”upArrow” />
<div class=”suggestionList” id=”autoSuggestionsList”>
&nbsp;
</div>
</div>
</td></tr>
</form>
</table>

<?php

include “koneksi.php”;

//echo “<a href=’input.php’>Add New data</a>”;

$batas = 5;
$halaman = $_GET[Page];

//———————————————-
if (empty($halaman))
{
$posisi = 0;
$halaman = 1;

}
else
{
$posisi = ($halaman – 1) * $batas;

}

if(isset($_POST[CARI]))
{
$nama = $_POST[KUNCI];
$sql = “SELECT * FROM mahasiswa WHERE nama = ‘$nama'”;

}
else
{

$sql = “SELECT * FROM mahasiswa LIMIT $posisi,$batas”;//-> ini query untuk select satu tabel. yaitu tabel mahasisiwa
}

//$sql = “SELECT * FROM mahasiswa”;//-> ini query untuk select satu tabel. yaitu tabel mahasisiwa
$hasil = mysql_query($sql);

$warnaGenap = “#FFFFF”; // warna abu-abu
$warnaGanjil = “#CEF6F5”; // warna putih
//$warnaHeading = “#66CC00”; // warna merah untuk heading tabel

echo “<table align=center border=1 cellpadding=2 cellspacing=0 width=600><tr>”;
echo “<tr bgcolor = ‘##F6CECE’><td align=’center’ colspan=’4′><b>Data Mahasiswa<b></td></tr>”;
echo “<th>Nama</th>”;
echo “<th>Jurusan</th>”;
echo “<th>Email</th>”;
echo “<th>Action</th>”;
echo “<tr>”;
$no=0;
WHILE($data = mysql_fetch_array($hasil)){

if ($no % 2 == 0) $warna = $warnaGenap;
else $warna = $warnaGanjil;

echo “<tr bgcolor=’.$warna’>”;
echo “<td>$data[nama]</td>”;
echo “<td>$data[jurusan]</td>”;
echo “<td>$data[email]</td>”;
echo “<td><a href=’ubah.php?ID=$data[ID]’>Ubah Data</a> | <a href=’hapus.php?DEL=$data[ID]’>Hapus Data</a></td></tr>”;

$no++;

}
echo “</table>”;

$tampil2 = mysql_query(“SELECT * FROM mahasiswa”);
$jmldata = mysql_num_rows($tampil2);
$jmlhalaman = ceil($jmldata/$batas);

echo “<div class = ‘tengah’>”;
echo “Page : “;
for($z=1;$z<=$jmlhalaman;$z++)
if ($z != $halaman)
{

echo “<a href=’index.php?Page=$z’><color>$z</color></a> |”;

}
else
{
echo “<b>$z</b> | “;
}
echo “Total Data Mahasiswa : <b>$jmldata</b> Orang</p></div>”;

echo “</div>”;//end of div tengah
?>

</body>
</html>

di Script tersebut, saya batasi setiap halaman pada 1 page hanya berjumlah 5 baris, untuk mengganti jumlahnya misal menjadi 10 baris per halaman anda dapat mengganti pada baris berikut

$batas = 5;// ubah angkanya menjadi 10 atau terserah anda

Oke, anda bisa langsung coba jalankan. Insyallah Jalan, (Lawong sebelum Posting saya pasti Coding dulu untuk membuktikan keberhasillnya. hehehe :D) yg perlu anda ketahui, semua sumber yang ada septiyo.com merupakan hasil dari rangkuman kerjaan saya yang saya potong satu demi satu tiap bagian. Jadi ini murni ngoding sendiri. 😀

Yang masih keberatan untuk Replace, anda bisa langsung Download File nya disini Clik Me

Oke Sekian dari saya, jika ada komentar, kritik dan saran, anda layangkan saja pada Pak Presiden. hehehe 😀 karena beliau yang manaikkan harga BBM, Cukup dari saya, yang mau download buat belajar silahkan, yang gk mau juga gak papa, toh saya nulis ini juga buat saya pribadi agar ilmu lebih manfaat aja.

Jumpa lagi lain kali

Wassalamualaikum..

Leave a Reply

Your email address will not be published. Required fields are marked *