M-e-e P-e-d

มีคำถามที่ผู้หัดเขียนเว็บเพจถามถึงกันบ่อยคำถามหนึ่ง คือ ทำอย่างไรจึงจะแสดงผลได้ทีละหน้า? วันนี้เราลองมาศึกษาดูกันสักหน่อยว่า จะเขียน Page Navigator ได้อย่างไร...

หลักในการเขียน Page Navigator 1. ก่อนอื่นจะต้องรู้ว่าเราจะแสดงผลหน้าไหน นั่นคือจะต้องมีการส่งค่าหมายเลขหน้าที่ต้องการแสดงผลมาให้จากการคลิก 2. หลังจากนั้นก็ต้องกำหนดจำนวนรายการต่อหน้า 3. และจะต้องรู้ว่าช่วงของรายการที่จะแสดงผล เริ่มต้นที่รายการที่เท่าไหร่และหมดลงที่รายการที่เท่าไหร่ 4. การแสดงผลรายการ จะต้องตรวจสอบว่ารายการที่กำลังแสดงผลนั้น อยู่ในช่วงของรายการที่จะแสดงผลหรือไม่

วิธีการเขียน 1. กำหนดหน้าที่จะแสดงผล

if ( ! IsSet($page) ) $page=1; // กำหนดหน้า = 1 ในกรณีที่ไม่ได้กำหนดมาก่อน

1. กำหนดจำนวนรายการต่อหน้า

   $itemsPerPage=10; // กำหนดจำนวนรายการต่อหน้า
   

2. กำหนดค่าอื่นๆ และ ตรวจสอบหมายเลขหน้า

   $allItems = Count($data); // กำหนดจำนวนรายการทั้งหมด
   $totalPage = Ceil($allItems / $itemsPerPage); // หาค่าจำนวนหน้าทั้งหมด
   if ( $page < 1 ) $page = 1; // ถ้าหน้าที่ต้องการแสดงผลน้อยกว่าหน้า 1 ให้กำหนดเป็นหน้า 1
   if ( $page > $totalPage ) $page = $totalPage; // ถ้าหน้าที่ต้องการแสดงผลมากกว่าจำนวนหน้าทั้งหมด ให้กำหนดเป็นหน้าสุดท้าย
   

3. ช่วงของรายการที่จะแสดงผล

   $startItem = ($page-1)*$itemsPerPage; // คำนวณหารายการแรกที่จะแสดงผล
   $endItem = $startItem+$itemsPerPage-1; // คำนวณหารายการสุดท้าที่จะแสดงผล
   

4. กำหนดตัวนับรายการ

   $item = 0; // กำหนดตัวนับรายการเพื่อนำไปใช้ในการตรวจสอบว่ารายการอยู่ในหน้าที่ต้องการแสดงผลหรือเปล่า
   

5. การแสดงผลรายการ

   // แสดงหัวของตาราง
   echo "<table width=100% cellspacing=1 cellpadding=2>";
   echo "<tr bgcolor=AA99DD align=center>";
   echo "<td>no</td>";
   echo "<td>date</td>";
   echo "<td>address</td>";
   echo "<td>call_number</td>";
   echo "<td>page</td>";
   echo "<td>access</td>";
   echo "</tr>";
   while ( List(,$row) = each($data) ) {
   if ( $item >= $startItem and $item <p align="left"> $endItem ) { // ตรวจสอบว่ารายการนี้อยู่ในหน้าที่ต้องการแสดงผลหรือไม่
   </p>
       echo "<tr align=center>";
       echo "<td>".($item+1)."</td>";
       while ( List($key,$value) = each($row) ) {
           echo "<td>$value</td>";
       }
       echo "</tr>";
   } elseif ( $item > $endItem ) break; // ถ้าหากรายการเกินจำนวนหน้าที่ต้องการแสดงผล ให้หยุดการทำงาน
   $item++;
   }
   echo "</table>";
   

6. การสร้างลิงค์เพื่อดูหน้าถัดไป

   // สร้างลิงค์สำหรับเลือกหน้าแสดงผล
   echo "<table width=100%><tr><td nowrap width=100%>PageNavigator</td><td nowrap>Page :: $page</td>";
   echo "<td nowrap>";
   $self = $PHP_SELF;
   // ถ้าหน้าที่กำลังแสดงผลเป็นหน้าแรก ก็ไม่ต้องแสดงลิงค์ไปหน้าแรก
   if ( $page > 1) {
   echo "<a href=$self?page=1 title=หน้าแรก>|<</a> ";
   echo "<a href=$self?page=".($page-1)." title=หน้าก่อนนี้><</a> ";
   }
   // แสดงลิงค์ของทุกหน้า
   for ( $i = 1; $i <p align="left"> $totalPage; $i++ ) {
   </p>
   echo "<a href=$self?page=$i>";
   echo "$i";
   echo "</a> ";
   }
   // ถ้าหน้าที่กำลังแสดงผลเป็นหน้าสุดท้าย ก็ไม่ต้องแสดงลิงค์ไปหน้าสุดท้าย
   if ( $page < $totalPage ) {
   echo "<a href=$self?page=".($page+1)." title=หน้าถัดไป>></a> ";
   echo "<a href=$self?page=$totalPage title=หน้าสุดท้าย>>|</a> ";
   }
   echo "</td></tr></table>";
   

<?
// สร้างข้อมูลจำลอง
for ( $i = 1; $i<p align="left">112; $i++ ) {
</p>
    $data[] = array(    "date"=>date("m-d-Y H:i:s"),
                                    "address"=>rand(0,255).".".rand(0,255).".".rand(0,255).".".rand(0,255),
                                    "call_number"=>"346".rand(100,999),
                                    "page"=>rand(0,100),
                                    "access"=>rand(0,1000)
                                );
}
/**
คำนวณค่าที่เกี่ยวข้องกับการแบ่งหน้า
1. ตำแหน่งหน้าปัจจุบันที่ต้องการให้แสดงรายการ $page
2. จำนวนรายการต่อหน้า $itemsPerPage
3. จำนวนรายการทั้งหมด $totalItems
4. จำนวนหน้าทั้งหมด $totalPage
5. รายการแรกและรายการสุดท้ายที่จะต้องแสดงผล $startItem,$endItem
*/
if ( ! IsSet($page) ) $page=1; // กำหนดหน้า = 1 ในกรณีที่ไม่ได้กำหนดมาก่อน
$itemsPerPage=10; // กำหนดจำนวนรายการต่อหน้า
$allItems = Count($data); // กำหนดจำนวนรายการทั้งหมด
$totalPage = Ceil($allItems / $itemsPerPage); // หาค่าจำนวนหน้าทั้งหมด
if ( $page < 1 ) $page = 1; // ถ้าหน้าที่ต้องการแสดงผลน้อยกว่าหน้า 1 ให้กำหนดเป็นหน้า 1
if ( $page > $totalPage ) $page = $totalPage; // ถ้าหน้าที่ต้องการแสดงผลมากกว่าจำนวนหน้าทั้งหมด ให้กำหนดเป็นหน้าสุดท้าย
$startItem = ($page-1)*$itemsPerPage; // คำนวณหารายการแรกที่จะแสดงผล
$endItem = $startItem+$itemsPerPage-1; // คำนวณหารายการสุดท้าที่จะแสดงผล


// สร้างลิงค์สำหรับเลือกหน้าแสดงผล
echo "<table width=100%><tr><td nowrap width=100%>PageNavigator</td><td nowrap>Page :: $page</td>";
echo "<td nowrap>";
$self = $PHP_SELF;
// ถ้าหน้าที่กำลังแสดงผลเป็นหน้าแรก ก็ไม่ต้องแสดงลิงค์ไปหน้าแรก
if ( $page > 1) {
    echo "<a href=$self?page=1 title="หน้าแรก">|<</a> ";
    echo "<a href=$self?page=".($page-1)." title="หน้าก่อนนี้"><</a> ";
}
// แสดงลิงค์ของทุกหน้า
for ( $i = 1; $i <p align="left"> $totalPage; $i++ ) {
</p>
    echo "<a href=$self?page=$i>";
    echo "$i";
    echo "</a> ";
}
// ถ้าหน้าที่กำลังแสดงผลเป็นหน้าสุดท้าย ก็ไม่ต้องแสดงลิงค์ไปหน้าสุดท้าย
if ( $page < $totalPage ) {
    echo "<a href=$self?page=".($page+1)." title="หน้าถัดไป">></a> ";
    echo "<a href=$self?page=$totalPage title="หน้าสุดท้าย">>|</a> ";
}
echo "</td></tr></table>";

$item = 0; // กำหนดตัวนับรายการเพื่อนำไปใช้ในการตรวจสอบว่ารายการอยู่ในหน้าที่ต้องการแสดงผลหรือเปล่า
// แสดงหัวของตาราง
echo "<table width=100% cellspacing=1 cellpadding=2>";
echo "<tr bgcolor=AA99DD align=center>";
echo "<td>no</td>";
echo "<td>date</td>";
echo "<td>address</td>";
echo "<td>call_number</td>";
echo "<td>page</td>";
echo "<td>access</td>";
echo "</tr>";
while ( List(,$row) = each($data) ) {
    if ( $item >= $startItem and $item <p align="left"> $endItem ) { // ตรวจสอบว่ารายการนี้อยู่ในหน้าที่ต้องการแสดงผลหรือไม่
</p>
        echo "<tr align=center>";
        echo "<td>".($item+1)."</td>";
        while ( List($key,$value) = each($row) ) {
            echo "<td>$value</td>";
        }
        echo "</tr>";
    } elseif ( $item > $endItem ) break; // ถ้าหากรายการเกินจำนวนหน้าที่ต้องการแสดงผล ให้หยุดการทำงาน
    $item++;
}
echo "</table>";
?>

หมายเหตุ ตัวอย่างโปรแกรมผมสร้างข้อมูลจำลองจำนวน 112 รายการ เก็บไว้ในตัวแปร $data ซึ่งในการใช้งานจริงจะต้องดัดแปลงโปรแกรม 2-3 จุด คือ 1. ส่วนของการดึงข้อมูลจากฐานข้อมูล เพื่อทดแทนข้อมูลจำลองที่สร้างขึ้น 2. ลูปในการควบคุมรายการข้อมูล จะต้องดึงข้อมูลรายการจากฐานข้อมูลที่เปิดไว้แล้ว

ทำไมไม่ลองเขียนเป็นวัตถุ(Object) ดูล่ะ? การเขียนโปรแกรมเชิงวัตถุจะทำให้เราสามารถนำเอาวัตถุนั้นไปวางไว้ตรงตำแหน่งไหนก็ได้ กี่ครั้งก็ได้ โดยไม่ต้องเขียนโปรแกรมในส่วนนั้นใหม่ ตัวอย่างจะแสดงให้เห็นถึงการวางวัตถุ PageNavigator ไว้ 2 ตำแหน่ง โดยมีการแสดงผลที่ไม่เหมือนกัน