Bối cảnh và vấn đề nghiên cứu
Trong bối cảnh chuyển đổi số đang diễn ra mạnh mẽ trên quy mô toàn cầu, lĩnh vực giáo dục và đào tạo đứng trước những yêu cầu cấp thiết về đổi mới phương thức truyền thụ tri thức. Sự phổ cập của mạng Internet cùng các thiết bị đầu cuối thông minh đã thúc đẩy sự hình thành và phát triển của các nền tảng giáo dục trực tuyến (E-learning). Mô hình học tập qua mạng không chỉ mở ra khả năng tiếp cận tri thức linh hoạt, không giới hạn về thời gian hay không gian địa lý, mà còn hỗ trợ giải quyết các rào cản về phân bổ nguồn lực giáo dục giữa các vùng miền.
Đề tài "Thiết kế Website dạy học Online" (Mã đề tài: 46) được thực hiện bởi sinh viên Lương Ngọc Nam, dưới sự hướng dẫn của ThS. Nguyễn Đức Thiện tại Khoa Công nghệ thông tin, Trường Đại học Công nghệ Đông Á (Bắc Ninh, năm 2023) trong khuôn khổ bài tập lớn học phần Thiết kế Web. Đề tài xuất phát từ nhu cầu thực tiễn về một nền tảng hỗ trợ giảng dạy và học tập tương tác, đồng thời tạo cơ hội vận dụng kiến thức lý thuyết vào việc xây dựng một sản phẩm phần mềm hoàn chỉnh.
Mục tiêu và nhiệm vụ nghiên cứu của đề tài được xác định cụ thể như sau:
- Nghiên cứu tổng quan cơ sở lý thuyết về các công nghệ và thư viện lập trình web front-end cốt lõi gồm HTML, CSS, JavaScript, Bootstrap, jQuery và Isotope.
- Xác định yêu cầu người dùng, phân tích đối tượng sử dụng và xây dựng cấu trúc chức năng cho hệ thống website dạy học trực tuyến.
- Thiết kế giao diện người dùng (UI) đảm bảo khả năng hiển thị đáp ứng (Responsive Web Design) trên đa dạng thiết bị: máy tính cá nhân (Desktop), máy tính bảng (iPad) và điện thoại di động (Mobile).
- Lập trình hiện thực hóa giao diện, xử lý các sự kiện tương tác phía máy khách (Client-side), kiểm thực dữ liệu biểu mẫu (Form validation) và tích hợp cơ chế lọc danh mục khóa học động.
Đối tượng và phạm vi nghiên cứu:
- Đối tượng nghiên cứu: Quy trình phân tích, thiết kế và lập trình giao diện website học trực tuyến phục vụ người học, giảng viên và phụ huynh.
- Phạm vi không gian và thời gian: Đề tài được triển khai thực hiện tại Trường Đại học Công nghệ Đông Á trong năm học 2023, giới hạn phạm vi kỹ thuật ở tầng giao diện người dùng (Front-end Web Development).
Cơ sở lý thuyết và phương pháp
Khung lý thuyết và công nghệ nền tảng
Tác giả hệ thống hóa các nền tảng công nghệ xây dựng website phía máy khách, phân tích chi tiết ưu điểm và hạn chế của từng công nghệ:
| Công nghệ / Thư viện |
Bản chất kỹ thuật |
Ưu điểm chính |
Hạn chế |
| HTML (Hypertext Markup Language) |
Ngôn ngữ đánh dấu siêu văn bản, chuẩn web do W3C duy trì. |
Dễ học, cấu trúc rõ ràng, hỗ trợ đa phương tiện (ảnh, video, audio), tương thích mọi trình duyệt. |
Phù hợp cho web tĩnh; tạo tính năng động cần kết hợp JavaScript hoặc ngôn ngữ backend. |
| CSS (Cascading Style Sheets) |
Ngôn ngữ định kiểu phân tầng kiểm soát hiển thị. |
Tách biệt nội dung và giao diện, tái sử dụng quy tắc định kiểu, tăng tốc độ tải trang, dễ bảo trì. |
Dễ gặp rủi ro vỡ định dạng tổng thể khi chỉnh sửa; độ phức tạp cao với người mới. |
| JavaScript (JS) |
Ngôn ngữ lập trình thông dịch phía client-side. |
Tạo tương tác người dùng, xử lý sự kiện DOM, kiểm tra dữ liệu biểu mẫu mà không cần tải lại trang. |
Tiềm ẩn rủi ro bảo mật trên máy khách, phụ thuộc trình duyệt, có thể làm giảm tốc độ nếu không tối ưu. |
| Bootstrap |
Framework front-end mã nguồn mở từ Twitter. |
Cung cấp hệ thống lưới đáp ứng (Responsive Grid System), thư viện component CSS và plugin JS dựng sẵn. |
Giao diện dễ bị trùng lặp (trung tính), dung lượng thư viện tương đối lớn. |
| jQuery |
Thư viện JavaScript tối ưu hóa thao tác DOM. |
Cú pháp ngắn gọn, quản lý sự kiện tốt, tích hợp cơ chế AJAX, xử lý tương thích đa trình duyệt. |
Kích thước file lớn cho web đơn giản, có thể gây xung đột thư viện, giảm hiệu suất khi lạm dụng. |
| Isotope |
Thư viện JavaScript hỗ trợ sắp xếp và lọc phần tử. |
Bố cục động linh hoạt, tạo hiệu ứng lọc danh mục mượt mà, hiệu suất cao với tập dữ liệu lớn. |
Tùy biến sâu phức tạp, đòi hỏi kiến thức chuyên sâu về JavaScript/CSS, nguy cơ xung đột script. |
Phương pháp nghiên cứu và triển khai
Đề tài áp dụng các phương pháp kỹ thuật phần mềm thực nghiệm:
- Phương pháp phân tích - tổng hợp tài liệu: Thu thập, đối sánh tài liệu kỹ thuật về chuẩn HTML5, CSS3, tài liệu hướng dẫn của Bootstrap, jQuery API và Isotope.
- Phương pháp thiết kế kiến trúc giao diện: Xây dựng bố cục wireframe và giao diện đồ họa phù hợp với trải nghiệm người dùng trong lĩnh vực giáo dục trực tuyến.
- Phương pháp kiểm thử thực nghiệm: Kiểm tra khả năng tương thích hiển thị trên 3 nhóm kích thước màn hình (Desktop, iPad, Mobile) và kiểm tra logic ràng buộc dữ liệu tại các biểu mẫu Đăng nhập/Đăng ký.
Thiết kế và triển khai
Hệ thống được thiết kế hướng tới 4 nhóm đối tượng người dùng chính: học sinh/sinh viên, giảng viên, phụ huynh và người dùng tự do. Cấu trúc website bao gồm 6 phân hệ giao diện chính:
Hệ thống Website Dạy học Online
Kiến trúc chức năng hệ thống
Hệ thống được xây dựng xung quanh hai trục chức năng nghiệp vụ trọng tâm:
-
Phân hệ quản lý khóa học:
- Tạo khóa học: Giảng viên thiết lập tên khóa học, mô tả nội dung, mục tiêu học tập, danh mục chuyên môn và thời lượng học tập.
- Quản lý nội dung: Cho phép tải lên bài giảng, video clip, tài liệu học tập và bài kiểm tra; hỗ trợ cập nhật hoặc xóa tài liệu theo tiến trình giảng dạy.
- Lên lịch học: Cài đặt mốc thời gian bắt đầu/kết thúc, tần suất các buổi học và mở cổng cho người học ghi danh.
- Ghi danh và học tập: Học viên theo dõi danh sách khóa học, đăng ký tham gia, tiếp cận học liệu số và giám sát lộ trình học tập cá nhân.
-
Phân hệ tương tác giảng viên - học sinh:
- Diễn đàn thảo luận theo khóa học: Không gian trao đổi ý kiến, đặt câu hỏi học thuật giữa học viên và giảng viên theo từng chủ đề bài học.
- Kiểm tra và đánh giá tự động: Giảng viên tạo đề thi trắc nghiệm hoặc tự luận kèm giới hạn thời gian và số lần làm bài; hệ thống hỗ trợ trả kết quả và phản hồi đáp án ngay sau khi nộp bài.
- Giao tiếp đa kênh: Bao gồm tính năng gửi thông điệp cá nhân, trao đổi tài liệu học tập và khung chat trực tuyến thời gian thực giữa giảng viên và người học.
Xử lý kiểm thực dữ liệu (Form Validation Logic)
Quá trình lập trình phía máy khách được thiết lập các quy tắc kiểm tra ràng buộc dữ liệu nghiêm ngặt trước khi cho phép chuyển hướng về trang chủ:
- Biểu mẫu Đăng nhập: Kiểm tra định dạng cấu trúc Email hợp lệ (chuỗi ký tự kèm
@ và tên miền); kiểm tra độ dài mật khẩu bắt buộc phải lớn hơn 8 ký tự.
- Biểu mẫu Đăng ký: Kiểm tra định dạng Email; độ dài mật khẩu lớn hơn 8 ký tự; so khớp giá trị giữa trường "Mật khẩu" và "Xác nhận mật khẩu"; kiểm tra trạng thái kích hoạt hộp kiểm (Checkbox) đồng ý với các điều khoản sử dụng của website.
Nội dung chính theo từng chương
Chương 1. Cơ sở lí thuyết về thiết kế Web
Chương 1 tập trung khảo sát nền tảng công nghệ web front-end. Tác giả trình bày chi tiết khái niệm, nguyên lý hoạt động, ưu điểm, nhược điểm và cú pháp áp dụng thực tế của 6 công nghệ:
- HTML: Phân tích vai trò của các thẻ cấu trúc (
<head>, <body>, <h1>, <p>, <a>, <img>), nhấn mạnh tính chuẩn hóa công nghiệp theo W3C và khả năng nhúng phương tiện đa dạng.
- CSS: Làm rõ cơ chế tách biệt tầng trình bày và tầng dữ liệu, nguyên lý viết quy tắc định kiểu và áp dụng đồng loạt nhằm tối ưu hóa dung lượng mã nguồn và thời gian tải trang.
- JavaScript: Trình bày vai trò của JS trong xử lý sự kiện tương tác người dùng (click, hover, submit), thao tác xử lý dữ liệu động trên trình duyệt và các framework mở rộng (React, Angular, Vue).
- Bootstrap: Phân tích cấu trúc hệ thống lưới đáp ứng (Responsive Grid System), cách thức áp dụng các lớp CSS tiện ích (
btn, btn-primary) và các thành phần giao diện mẫu (Modal, Tooltip, Carousel).
- jQuery: Làm rõ cú pháp rút gọn trong việc truy vấn phần tử DOM (
$(selector)), xử lý sự kiện, kỹ thuật AJAX truyền nhận dữ liệu bất đồng bộ và các phương thức hiệu ứng trực quan (như .toggle()).
- Isotope: Trình bày cơ chế phân loại, lọc và sắp xếp động các thành phần danh mục khóa học với hiệu suất cao trên nền tảng web.
Chương 2. Ứng dụng xây dựng giao diện cho website
Chương 2 trình bày toàn bộ quá trình hiện thực hóa giao diện website dạy học trực tuyến dựa trên các cơ sở lý thuyết đã nêu:
- Đặc tả yêu cầu và mục đích sử dụng: Xác định rõ mục tiêu phục vụ tự học, hỗ trợ phụ huynh theo dõi tiến trình của học sinh, kết nối cộng đồng học tập và tối ưu hóa thời gian học tập trực tuyến.
- Mô tả chức năng chi tiết: Cung cấp thông số vận hành của hai khối chức năng Quản lý khóa học và Tương tác trực tuyến.
- Đặc tả giao diện và kịch bản sử dụng:
| Phân hệ giao diện |
Chức năng thành phần |
Trường thông tin hiển thị |
Kịch bản tương tác người dùng |
| Trang chủ |
- Thanh điều hướng (Navbar).
- Lời chào người dùng.
- Danh sách khóa học nổi bật.
- Danh sách giáo viên hàng đầu.
- Danh mục nổi bật (Top Category). |
- Tên khóa học, ảnh đại diện, giảng viên phụ trách, nút "Chi Tiết".
- Ảnh đại diện, họ tên, chuyên môn giảng viên.
- Tên và biểu tượng danh mục. |
Người dùng xem tổng quan thông tin, bấm "Chi Tiết" tại khóa học nổi bật, chọn danh mục để lọc bài giảng, hoặc sử dụng thanh điều hướng để chuyển trang. |
| Trang khóa học |
- Danh sách khóa học đầy đủ.
- Bộ lọc danh mục tích hợp Isotope.
- Tùy chọn xem chi tiết và thêm vào giỏ hàng. |
- Tiêu đề trang.
- Danh sách thẻ khóa học (ảnh, tên, giá, giảng viên).
- Nút phân loại danh mục. |
Người dùng truy cập trang, nhấp chọn danh mục để lọc các khóa học tương ứng, chọn xem thông tin chi tiết hoặc bấm thêm vào giỏ hàng. |
| Trang chi tiết khóa học |
- Hiển thị toàn bộ nội dung khóa học.
- Tùy chọn đăng ký/mua khóa học. |
- Tiêu đề, hình ảnh minh họa.
- Giá khóa học, mô tả chi tiết, đánh giá học viên. |
Học viên đọc thông tin tổng quan, xem đánh giá chất lượng, thực hiện thao tác thêm vào giỏ hàng hoặc tiến hành mua khóa học. |
| Trang Đăng nhập / Đăng ký |
- Thu nhận và xác thực thông tin tài khoản.
- Điều hướng người dùng. |
- Trường nhập Email, Mật khẩu, Xác nhận mật khẩu.
- Checkbox điều khoản sử dụng.
- Nút lệnh Đăng nhập / Đăng ký. |
Người dùng điền thông tin; hệ thống kích hoạt hàm kiểm tra lỗi (Email sai định dạng, mật khẩu < 8 ký tự, mật khẩu không khớp); khi hợp lệ sẽ hiển thị thông báo thành công và chuyển hướng. |
- Kết quả lập trình giao diện thực tế: Báo cáo ghi nhận toàn bộ hình ảnh giao diện thực tế của 6 trang (Trang chủ, Giới thiệu, Khóa học, Chi tiết khóa học, Đăng nhập, Đăng ký) được căn chỉnh hiển thị tương thích trên 3 nền tảng thiết bị: Máy tính cá nhân, iPad và Điện thoại di động.
Kết quả và đóng góp
Kết quả đạt được
Đề tài đã hoàn thành các nội dung kỹ thuật đề ra trong đề cương bài tập lớn:
- Xây dựng thành công hệ thống giao diện hoàn chỉnh cho website dạy học trực tuyến gồm 6 phân hệ trang chính: Trang chủ, Giới thiệu, Danh sách khóa học, Chi tiết khóa học, Đăng nhập và Đăng ký.
- Hiện thực hóa thiết kế đáp ứng (Responsive) đồng bộ trên 3 môi trường phần cứng tiêu chuẩn: Máy tính cá nhân, máy tính bảng iPad và điện thoại thông minh.
- Lập trình kiểm thực dữ liệu biểu mẫu tại máy khách (Client-side validation) bằng JavaScript/jQuery, xử lý đầy đủ các kịch bản nhập sai định dạng Email, mật khẩu không đủ độ dài ký tự hoặc xác nhận mật khẩu không trùng khớp.
- Tích hợp thành công thư viện Isotope vào trang danh sách khóa học, cho phép người dùng thao tác lọc các khóa học theo danh mục (Category) mượt mà.
Đóng góp thực tiễn
- Cung cấp một tài liệu thiết kế và triển khai giao diện web front-end có tính ứng dụng thực tế trong lĩnh vực công nghệ giáo dục (EdTech).
- Minh họa rõ nét phương pháp kết hợp các thư viện JavaScript bổ trợ (jQuery, Isotope) cùng framework CSS (Bootstrap) để xây dựng hệ thống giao diện tối ưu trải nghiệm người dùng (UX) mà không phụ thuộc vào các framework front-end phức tạp.
Hạn chế và hướng nghiên cứu tiếp
Hạn chế
- Giới hạn phạm vi kỹ thuật: Dự án mới dừng lại ở việc thiết kế và lập trình giao diện người dùng phía máy khách (Front-end), chưa tích hợp cơ sở dữ liệu (Database) và hệ thống xử lý phía máy chủ (Back-end) như PHP hay NodeJS.
- Tính năng nghiệp vụ nâng cao: Các chức năng quản lý bài giảng, tạo bài thi trắc nghiệm, chấm điểm tự động và khung chat trực tuyến thời gian thực hiện mới dừng ở mức thiết kế giao diện tĩnh và mô tả kịch bản, chưa có khả năng lưu trữ và xử lý dữ liệu động.
- Tối ưu hóa hiệu năng: Việc sử dụng đồng thời nhiều thư viện bên ngoài (Bootstrap CSS/JS, jQuery, Isotope) có thể làm tăng tổng dung lượng tải trang nếu chưa qua quy trình nén và tối ưu mã nguồn (Minification).
Hướng nghiên cứu tiếp
- Lập trình phát triển hệ thống Back-end (sử dụng PHP, NodeJS hoặc Python) và xây dựng hệ quản trị cơ sở dữ liệu quan hệ (MySQL/PostgreSQL) để lưu trữ thông tin người dùng, khóa học và điểm số.
- Ứng dụng công nghệ WebSocket để hiện thực hóa tính năng chat trực tuyến thời gian thực giữa giảng viên và học viên.
- Tích hợp cổng thanh toán trực tuyến phục vụ giao dịch mua khóa học và xây dựng module kiểm tra trắc nghiệm chấm điểm tự động.
Giá trị tham khảo
Báo cáo bài tập lớn là nguồn tài liệu hữu ích cho:
- Sinh viên ngành Công nghệ thông tin và Kỹ thuật phần mềm: Làm tài liệu tham khảo về cấu trúc bài báo cáo học phần Thiết kế Web, phương pháp lập tài liệu đặc tả giao diện và kịch bản người dùng.
- Người học lập trình Web Front-end: Tham khảo cách tổ chức bố cục HTML/CSS, kỹ thuật xây dựng giao diện Responsive đa nền tảng bằng Bootstrap, phương pháp viết hàm kiểm tra dữ liệu biểu mẫu bằng JavaScript/jQuery và cách ứng dụng thư viện Isotope để xử lý lọc danh mục.
Câu hỏi thường gặp
1. Đề tài "Thiết kế Website dạy học Online" được thực hiện bởi ai, tại đơn vị nào?
Đề tài (Mã số 46) do sinh viên Lương Ngọc Nam thực hiện dưới sự hướng dẫn chuyên môn của ThS. Nguyễn Đức Thiện tại Khoa Công nghệ thông tin, Trường Đại học Công nghệ Đông Á (Bắc Ninh) vào năm 2023.
2. Website hỗ trợ hiển thị đáp ứng (Responsive) trên những thiết bị nào?
Website được thiết kế và kiểm thử giao diện đáp ứng đầy đủ trên 3 nhóm thiết bị: Máy tính cá nhân (Desktop), máy tính bảng (iPad) và điện thoại di động (Mobile).
3. Thư viện Isotope được sử dụng vào mục đích gì trong dự án?
Thư viện Isotope được tích hợp tại Trang danh sách khóa học (Courses Page) để thực hiện tính năng phân loại, sắp xếp và lọc động các khóa học theo danh mục (Category) với hiệu ứng chuyển đổi mượt mà.
4. Quy tắc kiểm thực dữ liệu (Validation) trên trang Đăng ký gồm những điều kiện gì?
Người dùng muốn đăng ký tài khoản bắt buộc phải thỏa mãn 4 điều kiện:
- Nhập đúng định dạng địa chỉ Email.
- Mật khẩu có độ dài lớn hơn 8 ký tự.
- Mật khẩu xác nhận phải trùng khớp hoàn toàn với mật khẩu đã nhập.
- Kích hoạt tích chọn đồng ý với các điều khoản sử dụng của website.
5. Dự án đã triển khai phần xử lý máy chủ (Back-end) và cơ sở dữ liệu chưa?
Chưa. Báo cáo bài tập lớn tập trung toàn bộ vào việc nghiên cứu lý thuyết, thiết kế giao diện và lập trình tương tác phía máy khách (Front-end). Các nghiệp vụ máy chủ và cơ sở dữ liệu được tác giả xác định là hướng mở rộng trong tương lai.
Kết luận
Bài tập lớn "Thiết kế Website dạy học Online" của tác giả Lương Ngọc Nam đã hoàn thành mục tiêu xây dựng giao diện hoàn chỉnh cho một nền tảng giáo dục trực tuyến đa chức năng. Công trình thể hiện sự kết hợp hiệu quả giữa ngôn ngữ cấu trúc HTML, định kiểu CSS cùng các thư viện công nghệ như Bootstrap, jQuery và Isotope nhằm tạo nên giao diện trực quan, thân thiện và đáp ứng đa nền tảng. Mặc dù còn hạn chế do chưa kết nối hệ thống cơ sở dữ liệu phía máy chủ, đồ án đã giải quyết tốt bài toán tương tác phía máy khách và cung cấp cơ sở kỹ thuật vững chắc cho việc phát triển một hệ thống quản lý học tập (LMS) hoàn chỉnh.
