Walaupun cuma berisi angka, nyatanya tidak banyak yang bisa membuat page navigation. Karena membuat page navigation tidak semudah membalikkan tangan.
Membuat page naviagtion itu mudah setelah kita tahu bagaimana behavior page navigation yang akan dibuat. Karena ada banyak cara tentang bagaimana page navigation ini bekerja, maka untuk tulisan ini, kita hanya akan membahasa tentang salah satu model saja. Berikut behavior page navigation yang akan kita buat..
- Setiap page yang sedang dipilih akan berusaha memiliki maksimal 3 sisi buah page disampingnya.
- Setelah kita membuat 3 page kosong dibagian kiri; Jika di bagian kirinya lagi terdapat >= 1 page lain, selain angka 1; maka sisa page itu akan diganti elipsis ( ... ). Begitu pula jika dibagian kanan; kita harus melihat jumlah halaman totalnya.
Untuk membuat sebuah page, ada beberapa parameter yang harus disediakan.
WritePage($pageStart,$itemCount,$pageCapacity)
pageStart: Halaman yang diinginkan.
itemCount: Jumlah total konten yang dimiliki
pageCapacity : Jumlah konten/item yang ditampung setiap page.
Tahapan awal yang perlu dilakukan adalah mengetahui jumlah page dari parameter yang telah diberikan. Rumusnya adalah...
$pageCount = $itemCount / $pageCapacity;
Sebelum diproses dengan rumus tersebut, itemCount harus dibulatkan(align) menjadi kelipatan pageCapacty. Misal: pageCapacity 10, itemCount 99 --> itemCount diubah jadi 100; pageCapacity 10, itemCount 80 --> itemCount tetap 80; pageCapacity 10, itemCount 81 --> itemCount diubah jadi 90. Rumit? Tenang, saya sudah siapkan kode untuk ini.
function AlignValue($value,$align){
if($value % $align){
$value += ($align - ($value % $align));
return $value;
}
else return $value;
}
Jadi, total halaman yang ada adalah: AlignValue (itemCount, pageCapacity) / pageCapacity.
Masih penasaran kenapa harus menggunakan AlignValue() ? bayangkan ada 19 item dengan kapasitas 10 item. Kalau tidak di align; 19 / 10 = 1 ! Padahal kita butuh 2 halaman, lho.
Sekarang, kita sudah bisa mulai membuat page nya; dimulai dari menulis page di bagian kiri dari halaman yang terpilih (pageStart).
1. Jika page pertama dari 3 page sebelum page terpilih (pageStart) adalah 1 atau 2, maka kita langsung saja menulis page navigation secara berurutan. Misal pageStart nya halaman 5 atau 6:
5 > 1 2 3 4 5
6 > 1 2 3 4 5 6
if ($pageStart-3 <= 2){
for($p = 1; $p < $pageStart; $p++){
echo "|$p|";
}
}
2. Tapi, jika lebih dari itu, kita harus menulis elipsis. Misal pageStart 7 atau 8.
5 > 1 ... 4 5 6 7
6 > 1 ... 5 6 7 8
else{
echo "|1||...|";
for($p = $pageStart-3; $p < $pageStart; $p++){
echo "|$p|";
}
}
3. Bagian kiri beres. Kita tulis dan tandai tebal, di halaman mana kita sekarang.
echo "<b>|$pageStart|</b>";
4. Sekarang tulis page di sebelah kanan pageStart.
Jika halaman terakhir dari 3 page pengikut pageStart berada tepat sebelum page terakhir, atau selebihnya; kita tulis page langsung tanpa elipsis. Misal pageStart 6, 7 atau 8 dari total (pageCount) berjumlah 10.
6 > 6 7 8 9 10
7 > 7 8 9 10
8 > 8 9 10
if ($pageStart+3 >= $pageCount-1){
for($p = $pageStart+1; $p <= $pageCount; $p++){
echo "|$p|";
}
}
5. Tapi, jika tidak; kita perlu membuatkan elipsis. Misalnya pada pageStart 4 atau 5 dari total page 10.
4 > 4 5 6 7 ... 10
5 > 5 6 7 8 ... 10
else{
for($p = $pageStart+1; $p <= $pageStart+3; $p++){
echo "|$p|";
}
echo "|...||$pageCount|";
}
Full code
<?php
function AlignValue($value,$align){
if($value % $align){
$value += ($align - ($value % $align));
return $value;
}
else return $value;
}
function WritePage($pageStart,$itemCount,$pageCapacity){
$itemCount = AlignValue($itemCount,$pageCapacity);
$pageCount = 0;
$pageCount = $itemCount / $pageCapacity;
//write before current
if ($pageStart-3 <= 2){
for($p = 1; $p < $pageStart; $p++){
echo "|$p|";
}
}
else{
echo "|1||...|";
for($p = $pageStart-3; $p < $pageStart; $p++){
echo "|$p|";
}
}
echo "<b>|$pageStart|</b>";
//write after current
if ($pageStart+3 >= $pageCount-1){
for($p = $pageStart+1; $p <= $pageCount; $p++){
echo "|$p|";
}
}
else{
for($p = $pageStart+1; $p <= $pageStart+3; $p++){
echo "|$p|";
}
echo "|...||$pageCount|";
}
}
WritePage(6,121,10);
?>
Bagaimana dengan link URL untuk navigasi ?
Kodenya hanya perlu dimodifikasi sedikit. Dengan tambahan parameter $cont (container) dan $link (url/link). Format page navigation yang saya buat adalah:
<li><a href=’?page=halaman’>halaman</a></li>
Dengan fungsi baru yang telah dimodifikasi berikut ini, kita bisa memperoleh format seperti di atas. Anda sendiri pasti bisa membuat fungsi serupa ini. Hanya sedikit tambahan str_replace() pada fungsi sebelumnya. Jika ada yang kurang, coba modifikasi CSS nya.
XyzWritePage(1,1000,16,"<li>[@link]</li>","<a href='?page=[@page]'>[@page]</a>");
function XyzAlignValue($value,$align){
if($value % $align){
$value += ($align - ($value % $align));
return $value;
}
else return $value;
}
function XyzWritePage($pageStart,$itemCount,$pageCapacity,$cont,$link){
$html='';
$itemCount = XyzAlignValue($itemCount,$pageCapacity);
$pageCount = 0;
$pageCount = $itemCount / $pageCapacity;
//write before current
if ($pageStart-3 <= 2){
for($p = 1; $p < $pageStart; $p++){
//echo "$p,";
$l = str_replace('[@page]',$p,$link);
$html = $html . str_replace('[@link]',$l,$cont);
}
}
else{
//echo "1,...,";
$l = str_replace('[@page]',1,$link);
$html = $html . str_replace('[@link]',$l,$cont);
$html = $html . str_replace('[@link]','...',$cont);
for($p = $pageStart-3; $p < $pageStart; $p++){
//echo "$p,";
$l = str_replace('[@page]',$p,$link);
$html = $html . str_replace('[@link]',$l,$cont);
}
}
//echo "$pageStart";
$html = $html . str_replace('[@link]',$pageStart,$cont);
//write after current
if ($pageStart+3 >= $pageCount-1){
for($p = $pageStart+1; $p <= $pageCount; $p++){
//echo "$p,";
$l = str_replace('[@page]',$p,$link);
$html = $html . str_replace('[@link]',$l,$cont);
}
}
else{
for($p = $pageStart+1; $p <= $pageStart+3; $p++){
//echo "$p,";
$l = str_replace('[@page]',$p,$link);
$html = $html . str_replace('[@link]',$l,$cont);
}
//echo "...,$pageCount";
$html = $html . str_replace('[@link]','...',$cont);
$l = str_replace('[@page]',$pageCount,$link);
$html = $html . str_replace('[@link]',$l,$cont);
}
return $html;
}
Demo?
Klik www.lomba.asia
0 comments