Lab. Ứng dụng CSDL

Mục đích

Nội dung

1. Nghiên cứu tệp index.php (bộ điều khiển mặt trước)
2. Nghiên cứu lớp định tuyến \core\control\Router và liệt kê các REST API được backend cung cấp, đồng thời chỉ ra controller.action tương ứng với từng API.
   Ví dụ:
   1. GET /students ===> StdController.proc
   2. GET /students/{id} ===> StdController.getById
   3. ...
3. Nghiên cứu lớp controller \qldt\control\StdController, lớp model \qldt\model\Std, lớp tiện ích \core\model\PDOData rồi phát biểu chức năng của từng REST API.
   Ví dụ:
   1. GET /students ===> Trả về danh sách sinh viên ở định dạng JSON. Danh sách sinh viên được đọc từ CSDL sử dụng PDO và parameterized statement.
   2. GET /students/{id} ===> Trả về sinh viên có mã {id} ở định dạng JSON. Thông tin sinh viên được đọc từ CSDL sử dụng PDO và parameterized statement.
   3. ...
4. Tạo CSDL MySQL có tên là QLDT, chạy kịch bản được cung cấp trong tệp qldt.sql để tạo các bảng và nhập dữ liệu vào CSDL vừa tạo.
5. Thay đổi chuỗi kết nối CSDL trong lớp \core\model\PDOData cho phù hợp với cấu hình hệ thống
6. Sử dụng Postman hoặc DevTools của trình duyệt hay công cụ tương tự để truy cập đến các API đã được liệt kê ở trên.
   
   Chúc mừng, bạn đã nghiên cứu xong về backend. Nó được xây dựng theo mô hình MC và cung cấp các REST API sẵn sàng tương tác với frontend.
   Bây giờ hãy chuyển sang frontend.
   
   
7. Nghiên cứu mã HTML trong tệp frontend.htm và mã CSS trong tệp frontend.css. Sử dụng trình duyệt truy cập trang frontend.htm. Hãy cho biết frontend cung cấp những panel nào? Chức năng của từng panel?
8. Hãy thực hiện các chức năng thêm, xóa, sửa và quan sát dữ liệu được thay đổi trên các panel.
9. Mở lại (bỏ comment) stylesheet .nodisplay {display:none;} trong tệp frontend.css. Refresh lại trang frontend.htm trên trình duyệt, tiếp tục thực hiện thêm, xóa, sửa dữ liệu. Mỗi thời điểm frontend hiển thị bao nhiêu panel?
10. Nghiên cứu các hàm hideAllPanel, showListPanel, showEditPanel và phát biểu chức năng của chúng. Hãy cho biết vai trò của stylesheet .nodisplay và phân tích cách sử dụng nó để chyển đổi (switch) các panel.
11. Nghiên cứu mã thực hiện tải trang, tức mã fetch("index.php/students").then(...); cùng hàm createNewRow.
12. Nghiên cứu hàm phụ delClick. Hàm này thực hiện attach hàm xử lý sự kiện onlick vào từng link "Xóa". Hãy cho biết chức năng cũng như cách thực hiện của hệ thống mỗi khi người dùng kích vào link "Xóa" nào đó.
13. Nghiên cứu hàm phụ updateClick. Hàm này thực hiện attach hàm xử lý sự kiện onlick vào từng link "Sửa". Đồng thời, nghiên cứu hàm xử lý sự kiện trên nút "Thêm mới". So sánh sự giống và khác nhau giữa hai hàm xử lý sự kiện vừa phân tích.
14. Nghiên cứu hàm xử lý sự kiện kích nút bấm nút "Chấp nhận". Cho biết hành vi khác nhau nếu trước đó người dùng chọn "Thêm mới" hoặc "Sửa".
15. Hãy chỉnh sửa CSS, và có thể sửa đổi cả JavaScript, để hiển thị panel Thêm mới/Sửa như một dialog (optional).