Bộ điều khiển CodeIgniter, Định tuyến chế độ xem: Tìm hiểu với ứng dụng mẫu

Bởi: Fiona Nâu Fiona Nâu
Hours cập nhật

Trong hướng dẫn này, bạn sẽ học các chủ đề sau.

  • Định tuyến – định tuyến chịu trách nhiệm đáp ứng các yêu cầu URL. Định tuyến khớp URL với các tuyến được xác định trước. Nếu không tìm thấy tuyến đường nào phù hợp thì CodeIgniter sẽ đưa ra một trang không tìm thấy ngoại lệ.
  • Bộ điều khiển – các tuyến đường được liên kết với bộ điều khiển. Bộ điều khiển dán các mô hình và khung nhìn lại với nhau. Yêu cầu dữ liệu/logic nghiệp vụ từ mô hình và trả về kết quả trong phần trình bày của dạng xem. Khi một URL đã được khớp với một tuyến đường, nó sẽ được chuyển tiếp đến chức năng công khai của bộ điều khiển. Hàm này tương tác với nguồn dữ liệu, logic nghiệp vụ và trả về dạng xem hiển thị kết quả.
  • Lượt xem – quan điểm có trách nhiệm trình bày. Một khung nhìn thường là sự kết hợp của HTML, CSS và JavaScript. Đây là phần chịu trách nhiệm hiển thị trang web cho người dùng. Thông thường, dữ liệu hiển thị thường được lấy từ cơ sở dữ liệu hoặc bất kỳ nguồn dữ liệu nào khác có sẵn.

Cách tạo dự án CodeIgniter mới

Chúng ta sẽ sử dụng Composer để tạo một dự án mới. Tôi sẽ sử dụng máy chủ tích hợp PHP nên không cần thiết phải có thêm phần mềm như Apache. Trong hướng dẫn này, chúng tôi đang sử dụng Windows hệ điều hành. Do đó, chúng tôi đã tạo thư mục Sites trên ổ C. Bạn có thể sử dụng bất kỳ thư mục nào phù hợp với mình.

Mở dòng lệnh/terminal và chạy lệnh sau

cd C:\Sites

Bây giờ chúng ta sẽ tạo một dự án CodeIgniter bằng Composer. Chạy lệnh sau

composer create-project CodeIgniter/framework ci-app

ĐÂY,

  • Lệnh trên tạo dự án CodeIgniter phiên bản 3 mới sử dụng bản phát hành ổn định mới nhất, tức là 3.1.9 vào thư mục ci-app.

Khi lệnh trên chạy xong, bạn sẽ có thể thấy kết quả tương tự như sau trong terminal

Tạo dự án CodeIgniter mới

Chạy lệnh sau để duyệt đến thư mục dự án mới được tạo ci-app

cd ci-app

Bây giờ chúng ta hãy khởi động máy chủ web tích hợp PHP

 php -S localhost:3000

ĐÂY,

  • Lệnh trên khởi động máy chủ PHP tích hợp chạy trên cổng 3000.

Mở trình duyệt web và duyệt URL sau: http://localhost:3000/

Bạn sẽ nhận được trang sau

Tạo dự án CodeIgniter mới

Nếu bạn thấy được trang trên thì xin chúc mừng, bạn đã cài đặt thành công CodeIgniter.

Như bạn có thể đọc từ trang web trên, trang hiển thị ở trên được hiển thị bằng chế độ xem nằm trong application/views/welcome_message.php và bộ điều khiển chịu trách nhiệm nằm trong application/controllers/Welcome.php

Định tuyến CodeIgniter

Hiện tại, ứng dụng của chúng tôi chỉ có một URL duy nhất là trang chủ. Ở phần này chúng ta sẽ tùy chỉnh phần home. Chúng tôi sẽ tạo một số URL mới sẽ đáp ứng các yêu cầu khác nhau.

Hãy bắt đầu với lộ trình trang chủ

Mở tệp tuyến đường như được chỉ ra bởi đường dẫn bên dưới

application/config/routes.php

Bạn sẽ có thể thấy nội dung sau

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

ĐÂY,

  • $route['default_controller'] = 'chào mừng'; xác định bộ điều khiển mặc định đáp ứng các yêu cầu URI
  • $route['404_override'] = ”; tuyến đường này cho phép bạn xác định tuyến tùy chỉnh cho lỗi 404. Lỗi 404 xảy ra khi không tìm thấy trang. CodeIgniter có trình xử lý lỗi mặc định nhưng bạn có thể tự xác định lỗi của mình nếu muốn.
  • $route['translate_uri_dashes'] = FALSE; tùy chọn này cho phép bạn dịch dấu gạch ngang sang dấu gạch dưới. Chúng ta sẽ nói về tùy chọn này khi xem cách hoạt động của các tuyến trong CodeIgniter.

Bây giờ chúng ta hãy xem phương thức điều khiển chịu trách nhiệm hiển thị trang chủ mà chúng ta đã thấy khi mở URL http://localhost:3000/ trong trình duyệt web.

Mở tập tin sau

application/controllers/Welcome.php

Bạn sẽ có thể thấy đoạn mã sau

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

class Welcome extends CI_Controller {

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

ĐÂY,

  • Đã xác định ('BASEPATH') OR exit('Không cho phép truy cập tập lệnh trực tiếp'); bảo vệ chống truy cập trực tiếp vào lớp trình điều khiển mà không cần thông qua tệp index.php. Hãy nhớ rằng, trong mô hình MVC, tất cả các yêu cầu đều có một điểm vào duy nhất và đối với CodeIgniter, đó là tệp index.php. Mã này chặn tất cả các yêu cầu không đi qua index.php
  • class Welcome mở rộng CI_Controller {…} định nghĩa một lớp Welcome mở rộng lớp cha CI_Controller
  • public function index() xác định một public function được gọi theo mặc định khi bạn mở trang chủ
  • $this->load->view('welcome_message'); dòng này tải chế độ xem Welcome_message. Tệp Welcome_message nằm trong thư mục application/views/welcome_message.php

Cho đến nay, chúng ta chỉ khám phá những gì xuất hiện trong CodeIgniter, bây giờ hãy thử thực hiện một số thay đổi. Chúng ta sẽ tạo trang chủ và thay thế trang mặc định

Tạo một tệp mới trong application/views/home.php

Thêm mã sau vào 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>

ĐÂY,

Đoạn mã HTML ở trên tải khung và phông chữ Burma SSS từ mạng CDN tạo ra một tài liệu HTML rất cơ bản. Nó áp dụng quy tắc CSS rất đơn giản từ khung CSS Miến Điện.

Mở URL sau trong trình duyệt của bạn: http://localhost:3000/

Bạn sẽ có thể thấy những điều sau đây

Định tuyến CodeIgniter

Tuyệt vời, chúng ta vừa sửa đổi thành công trang chủ. Tiếp tục, hãy xác định lộ trình của chúng ta. Giả sử ứng dụng của chúng tôi cũng cần có khả năng hiển thị trang giới thiệu về chúng tôi.

Tạo lộ trình

Mở tệp tuyến đường application/config.routes.php

Thêm tuyến đường sau

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

ĐÂY,

  • Khi khách truy cập truy cập URL /about-us, chúng tôi đang hướng dẫn CodeIgniter tìm kiếm bộ điều khiển Chào mừng và thực thi phương thức about_us.

Tạo bộ điều khiển

Bây giờ chúng ta hãy xác định phương thức điều khiển về chúng ta

Mở ứng dụng/bộ điều khiển/Welcome.php

Thêm phương pháp sau

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

ĐÂY,

  • Đoạn mã trên xác định hàm about_us và tải chế độ xem about_us.

Tạo chế độ xem

Bây giờ hãy tạo chế độ xem mà chúng ta vừa tham chiếu ở phần trên

Tạo một tệp mới about_us.php trong application/views/about_us.php

Thêm mã sau đây

<!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>

Chúng ta đã sẵn sàng, hãy mở URL sau trong trình duyệt web của bạn: http://localhost:3000/index.php/about-us

Bạn sẽ thấy trang sau

Tạo Chế độ xem trong CodeIgniter

Nếu bạn có thể nhìn thấy trang trên thì xin chúc mừng, bạn đã tạo thành công một ứng dụng đơn giản trong CodeIgniter.

Tổng kết

Trong hướng dẫn này, chúng tôi đã đề cập đến ba (3) thành phần chính tạo nên ứng dụng CodeIgniter. Chúng tôi đã xem xét các tuyến đường và cách xác định chúng, bộ điều khiển và cách tạo các phương thức đáp ứng yêu cầu tuyến đường, đồng thời tạo các chế độ xem đơn giản được trả về cho người dùng khi họ yêu cầu tài nguyên.

Bạn có thể thích: