ตัวควบคุม CodeIgniter, การกำหนดเส้นทางการดู: เรียนรู้ด้วยแอปตัวอย่าง

ในบทช่วยสอนนี้ คุณจะได้เรียนรู้หัวข้อต่อไปนี้

• การกำหนดเส้นทาง – การกำหนดเส้นทางมีหน้าที่รับผิดชอบในการตอบสนองต่อคำขอ URL การกำหนดเส้นทางจะจับคู่ URL กับเส้นทางที่กำหนดไว้ล่วงหน้า หากไม่พบเส้นทางที่ตรงกัน CodeIgniter จะส่งหน้าที่ไม่พบข้อยกเว้น
• ตัวควบคุม – เส้นทางเชื่อมโยงกับตัวควบคุม ตัวควบคุมจะติดโมเดลและมุมมองเข้าด้วยกัน การขอข้อมูล/ตรรกะทางธุรกิจจากแบบจำลองและส่งคืนผลลัพธ์ในการนำเสนอมุมมอง เมื่อ URL ถูกจับคู่กับเส้นทางแล้ว URL นั้นจะถูกส่งต่อไปยังฟังก์ชันสาธารณะของคอนโทรลเลอร์ ฟังก์ชันนี้จะโต้ตอบกับแหล่งข้อมูล ตรรกะทางธุรกิจ และส่งคืนมุมมองที่แสดงผลลัพธ์
• เข้าชม – มุมมองมีหน้าที่นำเสนอ มุมมองมักจะเป็นการผสมผสานระหว่าง HTML, CSS และ Javaสคริปต์ เป็นส่วนรับผิดชอบในการแสดงหน้าเว็บให้ผู้ใช้ดู โดยทั่วไปข้อมูลที่แสดงมักจะดึงมาจากฐานข้อมูลหรือแหล่งข้อมูลอื่นที่มีอยู่

วิธีสร้างโปรเจ็กต์ CodeIgniter ใหม่

เราจะใช้ Composer เพื่อสร้างโปรเจ็กต์ใหม่ ฉันจะใช้เซิร์ฟเวอร์ PHP ในตัว ดังนั้นจึงไม่จำเป็นต้องมีซอฟต์แวร์เพิ่มเติม เช่น อาปาเช่- ในบทช่วยสอนนี้ เราใช้ Windows ระบบปฏิบัติการ ดังนั้นเราจึงสร้างโฟลเดอร์ Sites ไว้ที่ไดรฟ์ C คุณสามารถใช้ไดเรกทอรีใดก็ได้ที่เหมาะกับคุณ

เปิดบรรทัดคำสั่ง/เทอร์มินัลและรันคำสั่งต่อไปนี้

cd C:\Sites

ตอนนี้เราจะสร้างโปรเจ็กต์ CodeIgniter โดยใช้ Composer รันคำสั่งต่อไปนี้

composer create-project CodeIgniter/framework ci-app

ที่นี่

• คำสั่งข้างต้นจะสร้างโปรเจ็กต์ CodeIgniter ใหม่เวอร์ชัน 3 โดยใช้รีลีสเสถียรล่าสุด เช่น 3.1.9 ลงในไดเร็กทอรี ci-app

เมื่อคำสั่งด้านบนทำงานเสร็จเรียบร้อยแล้ว คุณควรจะเห็นผลลัพธ์ที่คล้ายกับต่อไปนี้ในเทอร์มินัล

รันคำสั่งต่อไปนี้เพื่อเรียกดูไดเร็กทอรีโครงการ ci-app ที่เพิ่งสร้างใหม่

cd ci-app

ตอนนี้เรามาเริ่มเว็บเซิร์ฟเวอร์ในตัว PHP กันดีกว่า

 php -S localhost:3000

ที่นี่

• คำสั่งดังกล่าวเริ่มต้นเซิร์ฟเวอร์ PHP ในตัวที่ทำงานบนพอร์ต 3000

เปิดเว็บเบราว์เซอร์และเรียกดู URL ต่อไปนี้: http://localhost:3000/

คุณจะได้รับหน้าต่อไปนี้

หากคุณสามารถเห็นหน้าข้างต้น แสดงว่าคุณติดตั้งสำเร็จแล้ว CodeIgniter.

ตามที่คุณสามารถอ่านได้จากหน้าเว็บด้านบน หน้าที่แสดงด้านบนถูกเรนเดอร์โดยมุมมองที่อยู่ใน application/views/welcome_message.php และตัวควบคุมที่รับผิดชอบอยู่ใน application/controllers/Welcome.php

การกำหนดเส้นทาง CodeIgniter

ในตอนนี้ แอปพลิเคชันของเรามีเพียง URL เดียวเท่านั้นซึ่งเป็นหน้าแรก ในส่วนนี้เราจะปรับแต่งส่วนหน้าแรก เราจะสร้าง URL ใหม่ที่จะตอบสนองต่อคำขอที่แตกต่างกัน

เริ่มจากเส้นทางหน้าแรกกันก่อน

เปิดไฟล์เส้นทางตามเส้นทางด้านล่าง

application/config/routes.php

คุณควรจะสามารถเห็นเนื้อหาต่อไปนี้ได้

$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

ที่นี่

• $route['default_controller'] = 'ยินดีต้อนรับ'; กำหนดตัวควบคุมเริ่มต้นที่ตอบสนองต่อคำขอ URI
• $เส้นทาง['404_override'] = ”; เส้นทางนี้ช่วยให้คุณกำหนดเส้นทางที่กำหนดเองสำหรับข้อผิดพลาด 404 ข้อผิดพลาด 404 เกิดขึ้นเมื่อไม่พบเพจ CodeIgniter มีตัวจัดการเริ่มต้นสำหรับข้อผิดพลาด แต่คุณสามารถกำหนดข้อผิดพลาดของคุณเองได้หากต้องการ
• $เส้นทาง['translate_uri_dashes'] = FALSE; ตัวเลือกนี้ช่วยให้คุณสามารถแปลขีดกลางเป็นขีดล่างได้ เราจะพูดถึงตัวเลือกนี้เมื่อเราดูวิธีการทำงานของเส้นทางใน CodeIgniter

ตอนนี้เรามาดูวิธีการควบคุมที่รับผิดชอบในการแสดงหน้าแรกที่เราเห็นเมื่อเราเปิด URL http://localhost:3000/ ในเว็บเบราว์เซอร์

เปิดไฟล์ต่อไปนี้

application/controllers/Welcome.php

คุณควรจะสามารถเห็นรหัสต่อไปนี้ได้

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {

	public function index()
	{
		$this->load->view('welcome_message');
	}
}

ที่นี่

• กำหนด ('BASEPATH') หรือออก ('ไม่อนุญาตให้เข้าถึงสคริปต์โดยตรง'); ป้องกันการเข้าถึงคลาสคอนโทรลเลอร์โดยตรงโดยไม่ต้องผ่านไฟล์ index.php โปรดจำไว้ว่า ในกระบวนทัศน์ MVC คำขอทั้งหมดมีจุดเริ่มต้นเดียว และสำหรับ CodeIgniter นั้นคือ index.php รหัสนี้จะบล็อกคำขอทั้งหมดที่ไม่ได้มาจาก index.php
• ยินดีต้อนรับคลาสขยาย CI_Controller {…} กำหนดยินดีต้อนรับคลาสที่ขยายคลาสผู้ปกครอง CI_Controller
• ฟังก์ชั่นสาธารณะ index() กำหนดฟังก์ชั่นสาธารณะที่ถูกเรียกโดยค่าเริ่มต้นเมื่อคุณเปิดหน้าแรก
• $this->load->view('welcome_message'); บรรทัดนี้โหลดมุมมองยินดีต้อนรับ_ข้อความ ไฟล์welcome_messageอยู่ในไดเร็กทอรี application/views/welcome_message.php

จนถึงตอนนี้ เราได้สำรวจเฉพาะสิ่งที่อยู่ใน CodeIgniter เท่านั้น ตอนนี้เรามาลองทำการเปลี่ยนแปลงบางอย่างกัน เราจะสร้างโฮมเพจและแทนที่เพจเริ่มต้น

สร้างไฟล์ใหม่ใน application/views/home.php

เพิ่มโค้ดต่อไปนี้ลงใน home.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Hello CodeIgniter!</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
        <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    </head>
    <body>
        <section class="section">
            <div class="container">
                <h1 class="title">
                    CodeIgniter Hello World
                </h1>
            </div>
        </section>
    </body>
</html>

ที่นี่

โค้ด HTML ข้างต้นโหลดเฟรมเวิร์ก Burma SSS และแบบอักษรจากเครือข่าย CDN สร้างเอกสาร HTML ขั้นพื้นฐาน ใช้กฎ CSS ง่ายๆ จากเฟรมเวิร์ก CSS ของพม่า

เปิด URL ต่อไปนี้ในเบราว์เซอร์ของคุณ: http://localhost:3000/

คุณควรจะสามารถเห็นสิ่งต่อไปนี้ได้

เยี่ยมมาก เราเพิ่งแก้ไขหน้าแรกสำเร็จแล้ว ต่อไปเรามากำหนดเส้นทางของเรากันดีกว่า สมมติว่าแอปพลิเคชันของเราต้องสามารถแสดงหน้าเกี่ยวกับเราได้ด้วย

สร้างเส้นทาง

เปิดไฟล์เส้นทาง application/config.routes.php

เพิ่มเส้นทางดังต่อไปนี้

$route['about-us'] = 'welcome/about_us';

ที่นี่

• เมื่อผู้เยี่ยมชมเยี่ยมชม URL /about-us เรากำลังสั่งให้ CodeIgniter ค้นหาคอนโทรลเลอร์ ยินดีต้อนรับ และดำเนินการตามเมธอด about_us

สร้างคอนโทรลเลอร์

ตอนนี้เรามากำหนดวิธีการควบคุมเกี่ยวกับเรากันดีกว่า

เปิด application/controllers/Welcome.php

เพิ่มวิธีการดังต่อไปนี้

public function about_us(){
            $this->load->view('about_us');
        }

ที่นี่

• โค้ดด้านบนกำหนดฟังก์ชัน about_us และโหลดมุมมอง about_us

สร้างมุมมอง

ตอนนี้เรามาสร้างมุมมองที่เราเพิ่งอ้างอิงในส่วนด้านบนกัน

สร้างไฟล์ใหม่ about_us.php ใน application/views/about_us.php

เพิ่มโค้ดดังต่อไปนี้:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>About CodeIgniter!</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
        <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    </head>
    <body>
        <section class="section">
            <div class="container">
                <h1 class="title">
                    About us yap...                
                </h1>
            </div>
        </section>
    </body>
</html>

เราพร้อมแล้ว เปิด URL ต่อไปนี้ในเว็บเบราว์เซอร์ของคุณ: http://localhost:3000/index.php/about-us

คุณจะเห็นหน้าต่อไปนี้

หากคุณสามารถเห็นหน้าด้านบน ขอแสดงความยินดี คุณได้สร้างแอปพลิเคชันแบบง่ายใน CodeIgniter สำเร็จแล้ว

สรุป

ในบทช่วยสอนนี้ เราได้กล่าวถึงองค์ประกอบหลักสาม (3) ส่วนที่ประกอบขึ้นเป็นแอปพลิเคชัน CodeIgniter เราดูที่เส้นทางและวิธีการกำหนด ตัวควบคุมและวิธีการสร้างวิธีการที่ตอบสนองต่อคำขอเส้นทาง และสร้างมุมมองแบบง่ายที่ส่งคืนให้กับผู้ใช้เมื่อพวกเขาร้องขอทรัพยากร