Làm cách nào để sử dụng Bootstrap trong CodeIgniter 4?

Nếu bạn là người mới bắt đầu sử dụng CodeIgniter 4, tôi khuyên bạn nên tìm hiểu "Hướng dẫn đầy đủ về CodeIgniter 4 cho người mới bắt đầu" trước tiên

Nếu bạn cảm thấy quen thuộc với Codeigniter 4, thì bạn đang ở đúng nơi

Trong hướng dẫn này, bạn cũng sẽ học cách sử dụng truy vấn nối từ 2 bảng bằng trình tạo truy vấn CodeIgniter 4

Từng bước một

Hãy bắt đầu

Bước 1. Sự chuẩn bị

Để tạo CRUD với CodeIgniter và Bootstrap Modal, đây là thứ bạn cần chuẩn bị

1. Đánh lửa mã 4

2. JQuery

3. Bootstrap

Trong hướng dẫn này tôi sử dụng CodeIgniter v4. x, JQuery v3. 4. x, Bootstrap v4. 4. x

Bước 2. Tạo cơ sở dữ liệu và bảng

Tạo cơ sở dữ liệu mới có tên "pos_db"

Nếu bạn tạo một cơ sở dữ liệu có cùng tên thì càng tốt

Để tạo cơ sở dữ liệu "pos_db" trong MySQL, có thể thực hiện bằng cách thực hiện truy vấn sau

CREATE DATABASE pos_db;

Lệnh SQL trên, sẽ tạo một cơ sở dữ liệu với tên "pos_db" trong MySQL

Tiếp theo, tạo một bảng mới trong cơ sở dữ liệu "pos_db"

Trong hướng dẫn này, cần có 2 bảng, cụ thể là. "danh mục" và "sản phẩm"

Để tạo bảng "danh mục", bạn có thể thực hiện việc này bằng cách thực hiện truy vấn sau

CREATE TABLE category(
category_id INT PRIMARY KEY AUTO_INCREMENT,
category_name VARCHAR(50)
)ENGINE=INNODB; 

Lệnh SQL ở trên, sẽ tạo một bảng có tên là "danh mục" với các trường. category_id và category_name

Hơn nữa, để tạo bảng "sản phẩm", có thể thực hiện bằng cách thực hiện truy vấn sau

CREATE TABLE product(
product_id INT PRIMARY KEY AUTO_INCREMENT,
product_name VARCHAR(100),
product_price INT,
product_category_id INT
)ENGINE=INNODB;

Lệnh SQL ở trên, sẽ tạo một bảng có tên là "sản phẩm" với các trường. product_id, product_name, product_price và product_category_id

Bước 3. Chèn dữ liệu vào bảng Category dan Product

Cái này quan trọng

Chèn một số dữ liệu vào bảng "danh mục" và bảng "sản phẩm" dưới dạng dữ liệu mẫu

Chèn một số dữ liệu vào bảng "danh mục" bằng cách thực hiện truy vấn sau

INSERT INTO category(category_name) 
VALUES ('Books'),('Electronics'),('Fashions');

Truy vấn trên sẽ chèn 3 bản ghi dữ liệu vào bảng "danh mục"

Tiếp theo, chèn một số dữ liệu vào bảng "sản phẩm" bằng cách thực hiện truy vấn sau

INSERT INTO product(product_name,product_price,product_category_id) 
VALUES ('The 4 Hour Workweek','76000','1'),('CodeIgniter Cheat Sheet','50000','1');

Truy vấn trên sẽ chèn 2 bản ghi dữ liệu vào bảng "sản phẩm"

Bước 4. Cài đặt CodeIgniter 4

Để cài đặt Codeigniter 4, bạn có thể thực hiện theo 2 cách, cụ thể là. cài đặt thủ công và cài đặt qua composer

Trong hướng dẫn này, tôi sẽ sử dụng cài đặt thủ công

Cài đặt thủ công, hoàn toàn giống như cài đặt CodeIgniter 3

Tải xuống tệp CodeIgniter 4 tại liên kết sau, sau đó giải nén nó trên máy chủ web của bạn

https. // người viết mã. com

Nếu bạn đang sử dụng WAMPSERVER, hãy giải nén nó trong thư mục

C:/wamp64/www

Nếu bạn đang sử dụng XAMPP, hãy giải nén nó trong thư mục

C:/xampp/htdocs

Trong hướng dẫn này, tôi đang sử dụng XAMPP

Sau đó đổi tên thành "pos" như hình bên dưới

Sau đó, mở thư mục "pos" của dự án bằng trình chỉnh sửa mã.                      

Trong hướng dẫn này, tôi sử dụng "Visual Studio Code", bạn có thể sử dụng Sublime Text, PHP Storm hoặc bất kỳ trình soạn thảo mã nào khác

Nếu bạn cũng sử dụng Visual Studio Code, bạn sẽ thích hướng dẫn này

Để đảm bảo cài đặt CodeIgniter 4 thành công, gõ lệnh sau vào Terminal/Command Prompt

php spark serve

Giống như hình ảnh sau đây

Nếu bạn đang sử dụng Visual Studio Code, bạn có thể nhập trực tiếp các lệnh trên vào thiết bị đầu cuối trong Visual Studio Code

Sau đó mở trình duyệt của bạn và truy cập url sau

Nếu cài đặt thành công sẽ như hình sau

Tiếp theo giải nén file “Bootstrap” đã chuẩn bị trước vào thư mục “pos/public” như hình bên dưới

Sau đó, mở thư mục "public/js", sau đó tạo một tệp có tên "jquery. tối thiểu. js", sau đó mở tệp bằng trình chỉnh sửa mã

Sau đó truy cập URL sau

https. //mã số. jquery. com/jquery-3. 4. 1. tối thiểu. js

Sau đó, chọn tất cả các mã (Ctrl + A) và sao chép (Ctrl + C) rồi dán (Ctrl + V) vào tệp "jquery. tối thiểu. js" và lưu (Ctrl + S)

Bước #5. Kết nối với cơ sở dữ liệu

Mở "Cơ sở dữ liệu. php" nằm trong thư mục "app/Config", sau đó tìm đoạn mã sau

    public $default = [
        'DSN'      => '',
        'hostname' => 'localhost',
        'username' => '',
        'password' => '',
        'database' => '',
        'DBDriver' => 'MySQLi',
        'DBPrefix' => '',
        'pConnect' => false,
        'DBDebug'  => (ENVIRONMENT !== 'production'),
        'cacheOn'  => false,
        'cacheDir' => '',
        'charset'  => 'utf8',
        'DBCollat' => 'utf8_general_ci',
        'swapPre'  => '',
        'encrypt'  => false,
        'compress' => false,
        'strictOn' => false,
        'failover' => [],
        'port'     => 3306,
    ];

Sau đó thay đổi nó thành như sau

CREATE TABLE category(
category_id INT PRIMARY KEY AUTO_INCREMENT,
category_name VARCHAR(50)
)ENGINE=INNODB; 

Hơn nữa, đây là điều quan trọng

Để bạn có giao diện xử lý lỗi tốt, hãy tìm tệp env trong thư mục gốc của dự án, sau đó đổi tên thành. env và mở nó

Sau đó tìm đoạn mã sau

CREATE TABLE category(
category_id INT PRIMARY KEY AUTO_INCREMENT,
category_name VARCHAR(50)
)ENGINE=INNODB; 

Sau đó thay đổi nó thành như sau

CREATE TABLE category(
category_id INT PRIMARY KEY AUTO_INCREMENT,
category_name VARCHAR(50)
)ENGINE=INNODB; 

Điều đó có nghĩa là bạn đang ở chế độ phát triển, chế độ này sẽ giúp bạn dễ dàng theo dõi các lỗi khi bạn xây dựng dự án của mình

Sau khi dự án của bạn kết thúc, đừng quên đưa dự án trở lại chế độ sản xuất

Bước #6. Tạo một tệp mô hình

Tạo một tệp mô hình có tên "Product_model. php" trong thư mục "app/Models", sau đó nhập đoạn mã sau

CREATE TABLE category(
category_id INT PRIMARY KEY AUTO_INCREMENT,
category_name VARCHAR(50)
)ENGINE=INNODB; 

Bước #7. Tạo một tập tin điều khiển

Tạo một tệp điều khiển có tên "Sản phẩm. php" trong thư mục "app/Controllers", sau đó nhập đoạn mã sau

CREATE TABLE category(
category_id INT PRIMARY KEY AUTO_INCREMENT,
category_name VARCHAR(50)
)ENGINE=INNODB; 

Bước #8. Tạo tệp Xem

Tạo một tệp xem có tên "product_view. php" trong thư mục "app/Views", sau đó nhập đoạn mã sau

CREATE TABLE category(
category_id INT PRIMARY KEY AUTO_INCREMENT,
category_name VARCHAR(50)
)ENGINE=INNODB; 

Bước #9. thử nghiệm

Để đảm bảo rằng ứng dụng CRUD được xây dựng chạy tốt, hãy kiểm tra nó bằng cách truy cập URL sau

CREATE TABLE category(
category_id INT PRIMARY KEY AUTO_INCREMENT,
category_name VARCHAR(50)
)ENGINE=INNODB; 

Nếu suôn sẻ thì nó sẽ như hình sau

1. Thêm sản phẩm mới

Nhấn nút "Thêm mới" để thêm mới sản phẩm, sau đó sẽ hiện ra form như sau

Nhập tên sản phẩm, giá và chọn danh mục, sau đó nhấp vào nút "Lưu"

Nếu chèn thành công sẽ như hình sau

2. Cập nhật sản phẩm

Click vào nút "Sửa" để cập nhật sản phẩm, sau đó sẽ hiện ra form như sau

Chỉnh sửa dữ liệu theo ý muốn, sau đó nhấn nút "Cập nhật" để cập nhật dữ liệu

3. Xóa sản phẩm

Nhấn vào nút "Xóa" trên danh sách sản phẩm để xóa sản phẩm, sau đó sẽ xuất hiện thông báo xác nhận như sau

Sau đó nhấn nút "Yes" để xóa dữ liệu

Phần kết luận

Thảo luận lần này là cách tạo một ứng dụng Tạo-Đọc-Cập nhật-Xóa (CRUD) đơn giản bằng CodeIgniter 4 và Bootstrap Modal

Không chỉ vậy, bạn cũng đã học cách sử dụng truy vấn nối bằng trình tạo truy vấn trong CodeIgniter 4

Đây là nền tảng tuyệt vời để bạn xây dựng các ứng dụng phức tạp hơn với CodeIgniter 4 và Bootstrap

Làm cách nào để sử dụng mẫu Bootstrap trong CodeIgniter 4?

Làm cách nào để triển khai bootstrap trong CodeIgniter?