Mempercantik paging dengan style
Assalamuaikum wr.wb
Selamat malam sobat blogger , kali ini Belajar di Perantaun 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
<!-- sertakan file css dengan nama standart .css -->
<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 ;)
BACA JUGA NI :
0 Response to "Mempercantik paging dengan style"
Post a Comment