Codeตัวควบคุม Igniter และการกำหนดเส้นทางมุมมอง: เรียนรู้จากตัวอย่าง

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

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

วิธีการสร้างใหม่ Codeโครงการ Igniter

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

เปิดหน้าต่างคำสั่งหรือเทอร์มินัล แล้วรันคำสั่งต่อไปนี้:

cd C:\Sites

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

composer create-project CodeIgniter/framework ci-app

ที่นี่:

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

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

เรียกใช้คำสั่งต่อไปนี้เพื่อไปยังไดเร็กทอรีโปรเจ็กต์ ci-app ที่สร้างขึ้นใหม่:

cd ci-app

ตอนนี้ให้เริ่มใช้งานเว็บเซิร์ฟเวอร์ PHP ในตัว:

php -S localhost:3000

ที่นี่:

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

เปิดเว็บเบราว์เซอร์และเข้าชมเว็บไซต์ต่อไปนี้ URL: http://localhost:3000/คุณจะได้รับหน้าต่อไปนี้:

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

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

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

มาเริ่มกันที่เส้นทางของหน้าแรกกันก่อน เปิดไฟล์ routes ได้ที่พาธด้านล่างนี้:

application/config/routes.php

คุณควรเห็นเนื้อหาต่อไปนี้:

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

ที่นี่:

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

ต่อไปนี้เราจะมาดูเมธอดคอนโทรลเลอร์ที่รับผิดชอบในการแสดงหน้าแรกที่เราเห็นเมื่อเปิดโปรแกรมขึ้นมา 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');
}
}

ที่นี่:

• `defined('BASEPATH') OR exit('No direct script access allowed');` ป้องกันการเข้าถึงคลาสคอนโทรลเลอร์โดยตรงโดยไม่ผ่านไฟล์ index.php ในรูปแบบ MVC คำขอทั้งหมดจะมีจุดเริ่มต้นเพียงจุดเดียว ซึ่งสำหรับ CodeIgniter คือไฟล์ index.php โค้ดนี้จะบล็อกคำขอทั้งหมดที่ไม่ผ่านไฟล์ index.php
• class Welcome extends CI_Controller {…} กำหนดคลาส Welcome ที่สืบทอดมาจากคลาสแม่ CI_Controller
• public function index() กำหนดฟังก์ชันสาธารณะที่จะถูกเรียกใช้โดยค่าเริ่มต้นเมื่อคุณเปิดหน้าแรก
• $this->load->view('welcome_message'); โหลดวิว welcome_message ซึ่งอยู่ใน application/views/welcome_message.php

จนถึงตอนนี้ เราได้สำรวจเฉพาะสิ่งที่มีมาให้ในกล่องเท่านั้น CodeIgniter ตอนนี้เรามาทำการเปลี่ยนแปลงกัน เราจะสร้างหน้าแรกของเราเองและแทนที่หน้าเริ่มต้น สร้างไฟล์ใหม่ที่ application/views/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 ด้านบนจะโหลดเฟรมเวิร์ก CSS ของ Bulma และ Font Awesome จาก CDN และสร้างเอกสาร HTML พื้นฐานมาก ๆ โดยใช้กฎ CSS อย่างง่ายจากเฟรมเวิร์ก CSS ของ Bulma

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

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

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

เปิดไฟล์ routes ที่ application/config/routes.php แล้วเพิ่มเส้นทางต่อไปนี้:

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

ที่นี่:

• เมื่อผู้เยี่ยมชมมาเยือน URL /เกี่ยวกับเรา เราให้คำแนะนำ CodeIgniter จะค้นหาคอนโทรลเลอร์ Welcome และเรียกใช้เมธอด about_us

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

ต่อไปนี้เราจะกำหนดเมธอด 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คุณจะเห็นหน้าต่อไปนี้:

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

คำถามที่พบบ่อย