การสร้างหน้า Static Pages ใน CodeIgniter

Static Page ก็คือหน้าเว็บเพจหน้าหนึ่งนั่นแหละครับ เป็นหน้าเว็บที่เอาไว้แสดงข้อมูลตามที่เราต้องการ

ในบทความนี้เราจะมาทดลองสร้าง Static Page ใน CodeIgniter ดู ซึ่ง CodeIgniter เป็นเฟรมเวิร์ค ที่ทำงานในแบบ MVC (Model View Controller) ดังนั้น สิ่งที่เราจะต้องทำเป็นลำดับแรกก่อนสร้าง Static Page ก็คือการสร้าง Controller นั่นเอง

โดยปกติ เว็บไซต์ที่ทำงานแบบ MVC นั้น จะมี URL ที่ประกอบไปด้วย controller-class/controller-method/arguments ซึ่งจะมีรูปแบบดังนี้

http://example.com/[controller-class]/[controller-method]/[arguments]

ตัวอย่างเช่น

http://example.com/news/latest/10

จาก URL ด้านบน news เป็น controller-class ส่วน latest เป็น controller-method และ 10 เป็น argument

เรามาสร้าง Controller แรกกันดีกว่า

การสร้าง Controller ใน CodeIgniter 4 เราจะสร้างไว้ในโฟลเดอร์ app/Controllers

ลำดับแรกให้สร้างไฟล์ชื่อว่า Pages.php ไว้ในโฟลเดอร์ app/Controllers

ในไฟล์ Pages.php ให้เพิ่มโค้ดเข้าไปดังนี้

<?php namespace App\Controllers;
use CodeIgniter\Controller;

class Pages extends Controller {

    public function index()
    {
        return view('welcome_message');
    }

    public function showme($page = 'home')
    {
    }
}
  • บรรทัดที่ 4 สร้างคลาสชื่อว่า Pages
  • บรรทัดที่ 6 สร้างเมธอด index() ที่คืนค่ากลับมาเป็นข้อความ
  • บรรทัดที่ 11 สร้างเมธอดชื่อ showme() ที่รับอากิวเมนต์ 1 ตัวคือ $page

ลำดับต่อไปเราจะมาสร้าง Template สำหรับแสดงผลในทุก ๆ หน้าของเว็บไซต์ ซึ่งจะประกอบด้วยส่วน Header และ Footer ซึ่งเราจะสร้างแยกออกเป็น 2 ไฟล์ คือ header.php และ footer.php

ลำดับแรก ให้สร้างโฟลเดอร์ templates ไว้ในโฟลเดอร์ app/Views

หลังจากนั้นสร้างไฟล์ header.php ไว้ในโฟลเดอร์ app/Views/templates/

เพิ่มโค้ดเข้าไปในไฟล์ header.php ดังนี้

<!doctype html>
<html>
<head>
        <title>CodeIgniter Tutorial</title>
</head>
<body>

        <h1><?= $title; ?></h1>

จะเห็นได้ว่า ไฟล์ header.php ประกอบไปด้วยโค้ดพื้นฐานของ HTML ซึ่งเราจะใช้ไฟล์นี้เป็นเทมเพลทของหน้าเว็บทุก ๆ หน้านั่นเอง

  • ตัวแปร $title ในบรรทัดที่ 8 เป็นตัวแปร php ที่ประกาศไว้รับค่าที่จะถูกส่งมาจาก Controller อีกที

ต่อไปสร้างไฟล์ footer.php ไว้ในโฟลเดอร์ app/Views/templates

แทรกโค้ดเข้าไปในไฟล์ footer.php ดังนี้

        <em>&copy; 2020</em>
</body>
</html>

ไฟล์ footer.php เป็นไฟล์ที่เก็บโค้ดส่วนปิดท้ายเอกสาร HTML

เมื่อนำโค้ดในไฟล์ header.php กับ footer.php มารวมกัน ก็จะได้โค้ด HTML ที่ถูกต้องตามหลักภาษา HTML

กำหนด logic การทำงานให้กับ controller

ต่อไปเราจะมากำหนดตรรกะหรือ logic การทำงานให้กับ Controller แต่ก่อนอื่นสิ่งที่จำเป็นอย่างหนึ่งที่ต้องมีในการทำเว็บไซต์แบบ MVC คือ View (V) เพราะ View นี่คือส่วนที่จะแสดงผลต่าง ๆ ให้ผู้ชมเว็บไซต์ของเราได้เห็น เพราะฉะนั้น เราจะสร้าง View ขึ้นมารอไว้ก่อน

ให้สร้างโฟลเดอร์ pages ไว้ในโฟลเดอร์ app/Views

หลังจากนั้นให้สร้างไฟล์ home.php และ about.php ไว้ในโฟลเดอร์ app/Views/pages แล้วก็พิมพ์ข้อความอะไรก็ได้ตามที่ต้องการ

ทีนี้การที่จะโหลดหน้าเพจที่สร้างไว้ได้ เราต้องไปกำหนดการทำงานใน Controller

ให้เปิดไฟล์ Pages.php แล้วแก้ไขโค้ดในเมธอด showme() ดังนี้

public function showme($page = 'home')
    {
        if ( ! is_file(APPPATH.'/Views/pages/'.$page.'.php'))
        {
            // Whoops, we don't have a page for that!
            throw new \CodeIgniter\Exceptions\PageNotFoundException($page);
        }

        $data['title'] = ucfirst($page); // Capitalize the first letter

        echo view('templates/header', $data);
        echo view('pages/'.$page, $data);
        echo view('templates/footer', $data);
    }
  • บรรทัดที่ 3 เช็ดว่าเพจที่ถูกเรียกเข้ามามีอยู่หรือไม่ ถ้าไม่มีจะแสดงหน้า 404 Page not found
  • บรรทัดที่ 9 ตัวแปร $data['title'] จะถูกส่งออกไปยัง Views ที่ถูกโหลดขึ้นมาแสดงผล
  • บรรทัดที่ 11-13 โหลด Views มาแสดงผลตามลำดับดังนี้
    • บรรทัดที่ 11 โหลดเทมเพลท header คือส่วนหัวของเว็บเพจ
    • บรรทัดที่ 12 โหลดหน้าเพจตามอากิวเมนต์ที่ถูกส่งเข้ามา ในตัวอย่างคือหน้า home
    • บรรทัดที่ 13 โหลดเทมเพลท footer คือส่วนท้ายของเว็บเพจ

ทดลองรันเว็บไซต์

หลังจากทำทุกอย่างตามขั้นตอนด้านบนแล้ว เราจะมาลองรันเว็บไซต์ของเราดูว่าเป็นอย่างไร ให้เปิด Command Prompt ขึ้นมา แล้วเข้าไปยังโฟลเดอร์ที่เก็บเว็บไซต์ของเรา และพิมพ์คำสั่ง php spark serve แล้วกดปุ่ม Enter

เปิดเว็บเบราเซอร์ขั้นมาแล้วไปที่ http://localhost:8080/pages/showme/home

จะเห็นข้อความที่เราได้พิมพ์ไว้ในหน้าเพจที่เราสร้างไว้ในโฟลเดอร์ Views

Tags

เรื่องที่น่าสนใจ