Mempercantik paging dengan style

Assalamuaikum wr.wb

Selamat malam sobat blogger , kali ini Kiri Kanan Bung akan melanjutkan pemmbahasan kita yang tadi malam , malam ini kita akan belajar mempercantik tampilan paging kita.

Tampilan paging memang perlu , salah satunya untuk membuat data tampilan kita menjadi rapi , kalo teman-teman lupa boleh baca lagi ni , 3 langkah membuat paging .

Ok langsung aja ni kayak nya udah gak pada saba hehe. Saat menjelajah ke beberapa website, Ane menjumpai beberapa paging yang di tampilkan dengan ciantik kayak yang baca , khusus baut cewek aja ya ;), yang membuat ane tergelitik untuk menerapkan nya pada paging yang telah kita buat sebelumnya.. . Sekalian kita lengkapin deh navigasi pagingnya dengan link Previous dan Next.

Wokeh sekarang saatnya menerapkan style pada paging. Pertama, kita akan membuat file CSS untuk style nya (keteranggan masing-masing block kode dapat di bca pada script nya) , Perhatikan sript berikut :

Skript stylepaging.css:

/* div dengan nama paging */

div.paging{

padding: 2px;
margin: 2px;
font-family: Tahoma;
font-size: 12px;
}
/* div pagin untuk link */

div.paging a{

padding: 2px 5px 2 px 5px;
margin-right: 2px;
border: 1px solid #9AAFE5;
text-decoration: none;
color: #2E6AB1;
}
/* div paging ketika mouse berada di atas link */
div.paging a:hover {

border: 1px solid #2B66A5;
color: #000000;
background-color: #FFFF80;
}
/* div paging untuk halaman yang aktip saat itu */
div.paging span.current {

padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid navy;
font-weight: bold;
background-color: #2E6AB1;
color: #FFFFFF;
}
/* paging untuk halaman yang tidak aktip saat itu */
div.paging span.disabled {

padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #999999;
color: #999999;

}
/* div paging untuk prev dan next */
div.paging span.prevnext{

font-weight: bold;
}

Selanjutnya, kita buat script paging yang di dalamnya nanti akan menerapkan style yang telah kita definisikan pada stylepaging.css, lihat teks dan tebalkan :

Script paging_style.php


<link rel="stylesheet" type="text/css" href="stylepaging.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css"/>
<script type="text/javascript" src="assets/js/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/icon.css">
<?php

$konek = mysqli_connect("localhost","root","","cerdas");

//Langkah 1. tentukan batas, cek halaman & posisi data
$batas= 5;
$halaman = @$_GET['halaman'];

if (empty($halaman)) {

$posisi= 0;
$halaman = 1;

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

// Langkah 2. sesuaikan query dengan posisi dan batas

$query = "SELECT * FROM anggota LIMIT $posisi,$batas";
$tampil = mysqli_query($konek,$query);

echo "<table table-striped>
<tr><th>No</th><th>Nama</th><th>Alamat</th></tr>";

$no = $posisi+1;
while ($data=mysqli_fetch_array($tampil)) {

echo "
<tr>
<th>$no</th>
<th>$data[nama]</th>
<th>$data[alamat]</th>
</tr>";

$no++;

}
echo "</table><br>";

// Langkah 3: hitung total data dan halaman serta link 1,2,3

$query2 = mysqli_query($konek, "select * FROM anggota");
$jmldata = mysqli_num_rows($query2);
$jmlhalaman = ceil($jmldata/$batas);

//Mengambil nama file saat ini : paging_style.php
$file = $_SERVER['PHP_SELF'];

// Panggil div paging

echo "<div class=\"paging\">";
// Link kehalaman sebelumnya Previous
if ($halaman> 1) {
$prev = $halaman-1;
echo "<span class=\"prevnext\">
<a href=\"$file?halaman=$prev\">Prev</a>
</span>";
} else {
echo "<span class=disabled>Prev</span>";
}

// Tampilkan link halaman 1,2,3 ...
for ($i = 1;$i<=$jmlhalaman;$i++)
if ($i !=$halaman){

echo "<a href=\"$file?halaman=$i\">$i</a>";
}else{

echo "<span class=\"current\">$i</span>";

}

//Link halaman kehalaman berikutnya Next
if ($halaman < $jmlhalaman) {
$next = $halaman+1;
echo "<span class=\"prevnext\">
<a href=\"$file?halaman=$next\">Next</a>;
</span>";
} else {
echo "<span class=disabled>Next</span>";
}
echo "</div>";

?>

Jalankan Script paging_style.php, maka hasil nya akan terlihat seperti ini :

Nah , sudah lebih bagus kan tampilan pagingnya, dan lebih terlihat mana link halaman yang aktip (enabled) dan tidak aktip (disabled) .

Silahkan di kembangkan lebih lanjut, misalnya menambah kan link navigasi First dan Last atau bisa juga berekspolasi dengan style paging lainya.

Na bagaimana teman-teman blogger udah paham kan , alhamdulilah kalo uda hehe , sekiian dulu yak

jalan ke tanah abang

jangan lupa beli sayur

jangan lupa tinggalin jejak

sambil juga klik iklan sayur hehhehehehe

kagak ngambung yak ;)

AE-KOMPUTER

Mempercantik paging dengan style

0 Response to "Mempercantik paging dengan style"

Posting Komentar