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
________số 8Nế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;0
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;1
Sau đó thay đổi nó thành như sau
CREATE TABLE category[ category_id INT PRIMARY KEY AUTO_INCREMENT, category_name VARCHAR[50] ]ENGINE=INNODB;2
Đ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;3
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;4
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;5
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;6
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