-->
หน้าแรก
php

PHP แสดงรูปใน Folder แบบแบ่งหน้า


ด้วยความที่ว่าวันนี้เปิดเข้าเว็บ Thaiseobaord แล้วเจอกระทู้เรื่องของ การเขียน PHP แสดงรูปใน Folder แบบแบ่งหน้า ผมก็เลยเอามาลองนั่งเขียนเล่นๆ เขียนแบบดิบๆ ตามประสาผมนะครับ ใครที่เอาไปใช้ต้องเอาไปเกาเพิ่มกันหน่อยนะครับ

เริ่มจากที่ผม กำหนดตัวแปรเล็กน้อยก่อนครับ ผมกำหนดว่าโฟลเดอร์ชื่อว่าอะไร ที่ต้องแยกออกมาเผื่อเอาไปใช้งานอย่างอื่นได้ครับ แล้วผมใช้ function glob ที่เป็นตัวดึงไฟล์มาครับ ซึ่งฟงัก์ชั่นนี้ สามารถระบุได้ว่าดึงไฟล์นามสกุลอะไรได้ด้วยนะครับ

$folder = 'img';
$files = glob($folder."/*.*");

ยกตัวอย่างตัวนี้จะดึงเฉพาะไฟล์ที่นามสกุล JPG เท่านั้น มาแสดงครับ 
$files = glob($folder."/*.jpg");

ในที่นี้ผมดึงมาหมดก่อนอิๆๆ ผมคิดว่าโฟล์เดอร์ img ของผมนี้มีแต่รูปแหละ คงไม่เอาอะไรมาเพิ่มหรอก เลยตั้งเอาทั้งหมดมาแสดงเลย

การที่จะแบ่งหน้าได้ ต้องมีการ GET ค่าเป็นหน้าๆมาครับ ซึ่งคอนเซ็ปตรงนี้ ผมต้องนึกออกมาก่อนว่า การแบ่งหน้าเราต้องทราบว่า

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

ผมสร้างตัวแปรกำหนด ให้แสดงแค่ 4 ภาพต่อหน้าครับ 
$perpage = 4;

จากนั้นมาดูโค้ดยาวๆกันหน่อยครับ 
if (isset($_GET['page'])) {
            $i = $_GET['page']*$perpage;
            $max = $i+$perpage;
        }else{
            $i=0;
            $max = $perpage;
        }

        if ($max>count($files)) {
            $max=count($files);
        }

        for ($i; $i<$max; $i++) 
            { 
                $num = $files[$i]; 
                $title = str_replace($folder.'/', '', $num);
                echo '
                <div class="col-sm-6 col-md-3">
<div class="thumbnail">
<div class="caption">
<h3>
'.$title.'</h3>
..</div>
</div>
</div>
';
}

ผมเช็คก่อนว่าที่ URL มีการ GET['page'] มาไหม เพราะว่าผมต้องเอาค่าลำดับหน้าตัวนี้ไปคำนวนเรื่องของการเรียกไฟล์มาแสดงอีกทีครับ
กรณีที่ 1 ถ้ามีการรับค่า GET['page'] มา ผมจะให้ค่า $i มันเท่ากับค่าตำแหน่งหน้าคูณค่าแสดงผลต่อหน้าครับ ก็จะได้ค่าเริ่มต้นแล้วครับ *หน้าแรก GET['page'] ที่ url ผมเป็น 0 นะครับ จะทำให้ค่า $i ผมจะเป็น 0 เช่นกัน หน้า 2 GET['page'] ที่ url ผมเป็น 1 ค่า $i จะเท่ากับ 4 หน้า 2 จึงดึงภาพลำดับที่ 4 มาแสดงเป็นภาพแรกครับ งงไหมน้อ
และถ้าไม่มีการ GET['page'] มา ถือว่าเป็นหน้าแรกครับ คือให้ค่า $i เป็น 0 อ้าวเดี๋ยวงงไปใหญ่ ค่า $i คืออะไร
ค่า $i ในที่นี้ของผมนะครับ คือลำดับภาพครับ ที่ผมเขียน loop for ขึ้นมานั่นเองครับ ลำดับภาพ ที่ 0 คือภาพแรก $i=0 ครับ 
if ($max>count($files)) {
            $max=count($files);
        }

เจ้าบรรทัดด้านบนนี้กำหนดมาทำไม เนื่องจากว่า หน้าสุดท้ายครับ เราไม่มีทางรู้หรอกว่ามันจะครบ 4 ภาพ ไหม เดี๋ยวมัน loop for แล้วไม่เจอภาพอีก ผมเลยให้กำหนดค่าไม่ให้ loop เกินค่ารูปทั้งหมดไว้เท่านั้นเองครับผม ใช้ function count() นับไฟล์ทั้งหมดนั่นเองครับ 
$title = str_replace($folder.'/', '', $num);

อย่างที่บอกไปเมื่อข้างตันครับว่า สร้างตัวแปร folder ขึ้นมาเพื่อผมจะเอาค่า title หรือว่าชื่อของรูปมาแสดงเท่านั้นเองครับ โดยการเอาแทนค่าและลบชื่อออกเท่านั้นเองครับ

ต่อไปเป็นเรื่องของการแบ่งหน้าครับผม 
//Page
        $p = round(count($files)/$perpage);

        echo '
            <nav>
                <ul class="pagination">';

        for ($i=0; $i < $p; $i++) { 
            $page = $i+1;

            if ( isset($_GET['page']) && ($_GET['page']==$i) ) {

                $class = ' class="active"';

            }else{

                $class = '';

            }

            echo '
                <li'.$class.'>
                    <a href="?page='.$i.'">'.$page.'</a>
                </li>';
        }

        echo '
                </ul>
            </nav>';

จับหารกันก่อน 
$p = round(count($files)/$perpage);
อย่างแรกที่ต้องทำคือการต้องรู้ว่าไฟล์ทั้งหมดมันแบ่งได้กี่หน้า ผมก็จับหารกันธรรมดาเลยครับ ฮ่าๆ แต่ต้องปัดเศษขึ้นนะครับ ตรงค่า $p นะครับ ซึ่งผมจะเอาจำนวนหน้าหรือว่าค่า $p ไปวน loop ให้เราคลิกไปหน้าอื่นๆได้นี่เองครับ 
if ( isset($_GET['page']) && ($_GET['page']==$i) ) {

ใจเจ้ากรรมอยากสวยขึ้นมาซะงั้น ก็เลยต้องเช็คอีกว่ามัน $_GET[] หน้าไหนมา และตรงกับ loop Pagination เราตัวไหน ก็ให้แทนค่าด้วย class='active' เท่านั้นเองครับ

PHP แสดงรูปใน Folder แบบแบ่งหน้า 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>

    <div class="container">

        <h1 id="badges" class="page-header">php show image from folder # TempKaew</h1>
    <?php 

        $folder = 'img';

        $files = glob($folder."/*.*"); 

        echo '<h3>รูปภาพทั้งหมด <span class="label label-default">'.count($files).'</span></h3>';

        $perpage = 4;

        if (isset($_GET['page'])) {
            $i = $_GET['page']*$perpage;
            $max = $i+$perpage;
        }else{
            $i=0;
            $max = $perpage;
        }

        if ($max>count($files)) {
            $max=count($files);
        }

        for ($i; $i<$max; $i++) 
            { 
                $num = $files[$i]; 
                $title = str_replace($folder.'/', '', $num);
                echo '
                <div class="col-sm-6 col-md-3">
                    <div class="thumbnail">
                      <img src="'.$num.'" alt="...">
                      <div class="caption">
                        <h3>'.$title.'</h3>
                        <p>...</p>
                      </div>
                    </div>
                </div>';
            }

        echo '<div style="clear:both;"></div>';

        //Page
        $p = round(count($files)/$perpage);

        echo '
            <nav>
                <ul class="pagination">';

        for ($i=0; $i < $p; $i++) { 
            $page = $i+1;

            if ( isset($_GET['page']) && ($_GET['page']==$i) ) {

                $class = ' class="active"';

            }else{

                $class = '';

            }

            echo '
                <li'.$class.'>
                    <a href="?page='.$i.'">'.$page.'</a>
                </li>';
        }

        echo '
                </ul>
            </nav>';

    ?>

    </div>
    
</body>
</html>

ผิดพลาดประการใด แนะนำผมได้ครับ โค๊ดด้านบนเป็นเพียงการชี้นำให้ท่านนำไปปรับปรุงแก้ไขเพิ่มเติมครับ

1 ความคิดเห็น

  1. แจ่วมากๆ เลยครับ ขอบคุณมากๆ เลยยย ขอให้พี่เทพๆ ยิ่งๆ ขึ้นไปครับ