📘 Công nghệ Web An Toàn – Bài Tập Lớn

📌 Giới thiệu

Đây là project môn Công nghệ Web An Toàn tại Học viện Kỹ thuật Mật mã.
Project bao gồm các bài tập thực hành sử dụng HTML, CSS và JavaScript, PHP, XAMPP nhằm xây dựng các trang web cơ bản và hiểu cách lập trình web an toàn hơn.

---

📂 Nội dung

🔹 Bài tập 1: Setup môi trường XAMPP

• Mình thực hiện trên Windows

🔹 Bài tập 2: HTML & CSS

• Ôn tập và vận dụng HTML, CSS để xây dựng giao diện web.

• Các yêu cầu chính:

  • Tạo trang ví dụ mẫu từ bài giảng.

  • Trang giới thiệu thông tin cá nhân.

  • Trang bảng điểm cá nhân.

  • Trang lý lịch cá nhân (CV).

  • Trang tin tức (sử dụng template, ảnh, CSS).

👉 Mục tiêu: Hiểu cách xây dựng website bằng HTML & CSS, nắm được cấu trúc cơ bản và cách trình bày nội dung.

---

🔹 Bài tập 3: HTML, CSS & JavaScript

• Kết hợp JavaScript để làm website động.

• Các yêu cầu chính:

  • Thực hiện các ví dụ cơ bản: biến, if/else, switch, confirm, prompt, array, setTimeout, DOM, v.v.

  • Xây dựng form nhập liệu với kiểm tra dữ liệu (LOP, HOSO).

  • Thiết kế trang đăng ký thành viên với validation.

  • Danh sách nhân sự (highlight, check/uncheck, select all).

  • Menu, Tabs, Tree view.

  • Máy tính đơn giản.

  • Hoạt cảnh (animation).

  • Sắp xếp và tìm kiếm trên bảng.

👉 Mục tiêu: Hiểu cách kết hợp HTML + CSS + JS để xây dựng các tính năng web tương tác.

---

🔹 Bài tập 4: PHP với CSDL

• Bài tập này được chia ra thành các nhiệm vụ
  • Nhiệm vụ 1: Tạo template
  • Nhiệm vụ 2: Sử dụng template
  • Nhiệm vụ 3: Lấy dữ liệu và gửi dữ liệu
  • Nhiệm vụ 4: GetForm
  • Nhiệm vụ 5: Session
  • Nhiệm vụ 6: Cookie

⚙️ Môi trường mình sử dụng để thực hành

• Phần mềm:

  • Trình soạn thảo: VS Code
    • Extension "Open PHP/HTML/JS In Browser" để mở các file PHP trên XAMPP mà không phải cất công nhập đường dẫn, các extension để lập trình với PHP (vì VS Code không hỗ trợ sẵn)
  • Web server: XAMPP
    • Trong quá trình dùng XAMPP có gặp lỗi này khi tắt XAMPP:
    • 
    • Sửa lỗi: https://stackoverflow.com/questions/38676374/why-xampp-control-panel-shows-an-error-access-denied-upon-launch#:~:text=Xampp%2Dcontrol.ini%20for,Reply
    • Nói chung là cấp full quyền cho file xampp-control.ini thay vì mặc định chỉ có read

• Trình duyệt: Chrome

👨‍💻 Tác giả

• Họ tên: Lưu Đức Thắng

• Môn học: Công nghệ Web An Toàn – Học viện Kỹ thuật Mật mã