13 Mei 2013

paging data : membagi data per blok untuk ditampilkan

Hai semua kawanku, sekarang saya akan memberikan tutorial lanjutan Belajar PHP (Hypertext Preprocess... thumbnail 1 summary
Hai semua kawanku, sekarang saya akan memberikan tutorial lanjutan Belajar PHP (Hypertext Preprocessor) dengan mudah  dan sekarang kita akan membuat paging data. Apakah itu paging data?

Paging data itu adalah teknik untuk membagi keluaran data dari database yang akan dibagi untuk beberapa halaman. Dibagi untuk beberapa halaman? dibagi untuk beberapa halaman ini maksudnya, Jika anda mempunyai data sebanyak 1000 , apakah anda ingin menampilkan sampai 1000 data per halaman? apakah akan memakan memory server untuk data sebanyak itu?

Di sini saya akan mengimplementasikan sedikit teori matematisnya :
d=1000 /jumlah data
p=20 //data per halaman
bp=? //berapa blok yang akan ditampilkan
bp=1000/20
bp=50

Tenang, dibagi per halaman tersebut adalah bukan membuat sampai halamannya, akan tetapi membuat parameter url untuk menginisialkan halaman berapa. Contoh index.php?page=24 . maka akan ditampilkan blok 24 . Data yang keberapa di blok 24 ?
b24mulai=((24/50) * 1000) - 19
b24mulai=461

b24akhir=((24/50) * 1000)
b24akhir=480
Sudah mengerti bukan teori teknik paging tersebut?

- Buatlah 1000 data pada tabel anggota , download di sini scriptnya (Mediafire)
- Buatlah 2 file php dan diberi nama data.php dan paging.php
- Simpan gambar loader.gif ini ke satu folder www/htdocs, bisa pake gambar lainnya kok :D
- Masukkan kode pada file data.php
<style>
.pagin {
padding: 10px 0;
font:bold 11px/30px arial, serif;
}
.pagin * {
padding: 2px 6px;
color:#0A7EC5;
margin: 2px;
border-radius:3px;
}
.pagin a {
        border:solid 1px #8DC5E6;
        text-decoration:none;
        background:#F8FCFF;
        padding:6px 7px 5px;
}

.pagin span, a:hover, .pagin a:active,.pagin span.current {
        color:#FFFFFF;
        background:-moz-linear-gradient(top,#B4F6FF 1px,#63D0FE 1px,#58B0E7);
           
}
.pagin span,.current{
    padding:8px 7px 7px;
}
.content{
    padding:10px;
    font:bold 12px/30px gegoria,arial,serif;
    border:1px dashed #0686A1;
    border-radius:5px;
    background:-moz-linear-gradient(top,#E2EEF0 1px,#CDE5EA 1px,#E2EEF0);
    margin-bottom:10px;
    text-align:left;
    line-height:20px;
}
.outer_div{
    margin:auto;
    width:600px;
}
#loader{
    position: absolute;
    text-align: center;
    top: 75px;
    width: 100%;
    display:none;
}

</style>
<?php
    /* Koneksi database*/
    $con=mysql_connect("localhost","root","");
    mysql_select_db("belajar");
    include 'paging.php'; //include pagination file
   
    //pagination variables , di cek terlebih dahulu di url ada parameter ?page=xx,jika tidak ada maka blok adalah 1
    $page = (isset($_REQUEST['page']) && !empty($_REQUEST['page']))?$_REQUEST['page']:1;
    $per_page = 20; //berapa banyak blok
    $adjacents  = 20;
    $offset = ($page - 1) * $per_page;
   
    //Cari berapa banyak jumlah data*/
    $count_query   = mysql_query("SELECT COUNT(id) AS numrows FROM anggota",$con);
    if($count_query === FALSE) {
    die(mysql_error());
    }
    $row     = mysql_fetch_array($count_query);
    $numrows = $row['numrows']; //dapatkan jumlah data
   
    $total_pages = ceil($numrows/$per_page);

   
    //jalankan query menampilkan data per blok $offset dan $per_page
    $query = mysql_query("SELECT * from anggota GROUP BY id LIMIT $offset,$per_page");

?>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="responsive table table-striped table-bordered">
<thead>
  <tr>
    <td class="no_sort">Kode Cabang</td>
    <td class="no_sort">Nama Cabang</td>
    <td class="no_sort">Alamat Cabang</td>
    <td class="no_sort">Telepon Cabang</td>
    </tr>
  </thead>
<?php
while($result = mysql_fetch_array($query)){
?>
<tr >

    <td><?php echo $result['id']; ?></td>
    <td><?php echo $result['nama']; ?></td>  
    <td><?php echo $result['alamat']; ?></td>
    <td><?php echo $result['tlp']; ?></td>
  </tr>
<?php
}
?>
</table>
<?php
echo paginate($reload, $page, $total_pages, $adjacents);
?>
Lalu masukkan script ini di paging.php
<?php
function paginate($reload, $page, $tpages, $adjacents) {
    $prevlabel = "&lsaquo; Prev";
    $nextlabel = "Next &rsaquo;";
    $out = '<div class="pagin green">';

   
/* buat halaman pertama*/
    if($page==1) {
        $out.= "<span>$prevlabel</span>";
    } else if($page==2) {
        $out.= "<a href='data.php?page=".($page-1)."'>$prevlabel</a>";
    }else {
        $out.= "<a href='data.php?page=".($page-1)."'>$prevlabel</a>";

    }
   
   
    if($page>($adjacents+1)) {
        $out.= "<a href='data.php?page=1'>1</a>";
    }
   
    if($page>($adjacents+2)) {
        $out.= "...\n";
    }

   
/* buat kode 1,2,3,dst*/
    $pmin = ($page>$adjacents) ? ($page-$adjacents) : 1;
    $pmax = ($page<($tpages-$adjacents)) ? ($page+$adjacents) : $tpages;
    for($i=$pmin; $i<=$pmax; $i++) {
        if($i==$page) {
            $out.= "<span>$i</span>";
        }else if($i==1) {
            $out.= "<a href='data.php?page=$i'>$i</a>";
        }else {
            $out.= "<a href='data.php?page=$i'>$i</a>";
        }
    }

   

    if($page<($tpages-$adjacents-1)) {
        $out.= "...\n";
    }

   

    if($page<($tpages-$adjacents)) {
        $out.= "<a href='data.php?page=$tpages'>$tpages</a>";
    }

   
/* buat label next*/
    if($page<$tpages) {
        $out.= "<a href='data.php?page=".($page+1)."'>$nextlabel</a>";
    }else {
        $out.= "<span>$nextlabel</span>";
    }
    $out.= "</div>";
    return $out;
}
?>
Coba anda copy paste kode tersebut dan jalankan di browser anda.
Jika ada yang tidak dimengerti, bisa diberikan komentar di bawah artikel ini
 Download script nya (Mediafire)