BÁO CÁO ĐỒ ÁN XÂY DỰNG WEBSITE HỌC LẬP TRÌNH MIỄN PHÍ COURSEUNI

Trong thời đại ngày nay, sự phát triển như vũ bão của công nghệ thông tin đang ảnh hưởng tới mọi mặt của đời sống xã hội. Trong đó giáo dục cũng chịu một sự tác động mạnh mẽ của công nghệ thông tin. Sự phát triển của công nghệ thông tin làm cho lượng tri thức của nhân loại tăng lên rẩt nhiều, chính vì vậy mà các phương pháp giáo dục truyền thống như “phấn trắng, bảng đen” không thể nào truyền tải được hết nội dung tri thức. Nó cũng đã mở ra nhiều phương pháp và cách dạy học mới. Vì vậy mà việc nghiên cứu đổi mới phương pháp giảng dạy bằng việc sử dụng hiệu quả của công nghệ thông tin đang là nhu cầu cấp bách trên phạm vi toàn thế giới, đặc biệt trong khi tình hình dịch Covid-19 diễn biến phức tạp như hiện nay. Trong bối cảnh đó, nếu muốn nền giáo dục nước nhà phát triển, bắt kịp và đáp ứng được trong cuộc công nghiệp hoá, hiện đại hoá của đất nước, thì nền giáo dục nước ta cần được đổi mới phương pháp dạy và học. Theo hướng vận dụng công nghệ thông tin và các thiết bị dạy học phát huy mạnh mẽ tư duy sáng tạo, kỹ năng thực hành và hứng thú học tập của học sinh, sinh viên để nâng cao chất lượng dạy học. Một trong những ngành đặc thù như Công nghệ thông tin thì việc học trực tuyến có ý nghĩa hết sức to lớn. Cũng đã có nhiều website, kênh youtube dạy lập trình trực tuyến. Tuy nhiên, các trang web này thường phải trả phí hoặc các nội dung không tập trung, khó tìm kiếm đối với người học.

Thông tin chung

Tên đề tài: Xây dựng website học lập trình miễn phí Courseuni

Sinh viên thực hiện: Đặng Đình Toàn

Lớp: Khoa học máy tính ứng dụng K61B

Hệ đào tạo: Chính quy Điện thoại: 0398064312

Email: toank61humg@gmail.com

Mục tiêu

Tạo một trang web học lập trình miễn phí dựa trên các khóa học có sẵn trên YouTube nhằm cung cấp cái nhìn tổng quát cho người học Mục tiêu chính là xây dựng các chức năng quan trọng như tìm kiếm khóa học, phân loại nội dung, và tạo không gian tương tác cho người dùng.

 Chức năng làm bài tập

Nội dung chính

Để đạt được mục tiêu của đồ án thì cần thực hiện các nội dung đó là :

 Tìm hiểu tổng quan và cơ sở lý thuyết

 Phân tích và thiết kế hệ thống

 Thiết kế và cài đặt hệ thống

Kết quả chính đạt được

Hoàn thành được những mục tiêu đặt ra

Trước tiên, em xin chân thành cảm ơn tất cả cá nhân và tổ chức đã hỗ trợ em trong quá trình học tập và nghiên cứu đề tài này Từ khi bắt đầu học tại trường, em đã nhận được sự quan tâm và giúp đỡ quý báu từ các Thầy Cô và bạn bè.

Em xin chân thành cảm ơn quý Thầy Cô bộ môn Khoa Học Máy Tính đã truyền đạt kiến thức quý báu trong suốt quá trình học tập tại trường Nhờ sự hướng dẫn tận tình của các thầy cô, đề tài nghiên cứu của em đã được hoàn thiện một cách tốt đẹp.

Xin chân thành cảm ơn cô Nguyễn Thuỳ Dương đã tận tình giúp đỡ, quan tâm và hướng dẫn em hoàn thành bài báo cáo này trong thời gian qua.

Bài báo cáo đồ án tốt nghiệp được thực hiện trong 7 tuần, trong quá trình này, em nhận thấy mình còn hạn chế và bỡ ngỡ khi tiếp cận thực tế Em rất mong nhận được ý kiến đóng góp quý báu từ quý Thầy Cô để hoàn thiện kiến thức trong lĩnh vực này, đồng thời nâng cao ý thức và kỹ năng của bản thân.

Em xin chân thành cảm ơn!

TỔNG QUAN VỀ ĐỀ TÀI

Giới thiệu đề tài

Trong thời đại công nghệ thông tin phát triển mạnh mẽ, giáo dục cũng chịu ảnh hưởng sâu sắc từ sự thay đổi này Lượng tri thức nhân loại gia tăng đáng kể, khiến các phương pháp giáo dục truyền thống như “phấn trắng, bảng đen” không còn đủ hiệu quả Công nghệ thông tin đã mở ra nhiều phương pháp giảng dạy mới, vì vậy việc nghiên cứu và đổi mới phương pháp giảng dạy bằng cách sử dụng hiệu quả công nghệ thông tin trở thành nhu cầu cấp bách toàn cầu, đặc biệt trong bối cảnh dịch Covid-19 diễn biến phức tạp.

Để nền giáo dục Việt Nam phát triển và đáp ứng yêu cầu của cuộc công nghiệp hóa, hiện đại hóa, cần đổi mới phương pháp dạy và học Việc áp dụng công nghệ thông tin và thiết bị dạy học sẽ thúc đẩy tư duy sáng tạo, kỹ năng thực hành và hứng thú học tập của học sinh, sinh viên, từ đó nâng cao chất lượng giáo dục.

Trong ngành Công nghệ thông tin, học trực tuyến đóng vai trò quan trọng Nhiều website và kênh YouTube cung cấp khóa học lập trình trực tuyến, nhưng thường yêu cầu phí hoặc có nội dung không tập trung, gây khó khăn cho người học trong việc tìm kiếm thông tin.

Tính cấp thiết

Sau nhiều lần gặp khó khăn trong việc tìm kiếm một trang web học lập trình phù hợp, tôi nhận thấy rằng một trang web giải quyết vấn đề này sẽ là bước đệm quan trọng cho những người đam mê lập trình cũng như những người dạy lập trình Chính vì lý do đó, tôi đã quyết định chọn đề tài “Xây dựng website học lập trình miễn phí Courseuni” làm đồ án tốt nghiệp của mình.

Mục tiêu đề tài

Xây dựng một trang web học lập trình miễn phí dựa trên các khoá học có sẵn trên YouTube, giúp người học có cái nhìn tổng quát về lập trình Mục tiêu chính là phát triển các chức năng cốt lõi cần thiết cho việc học tập hiệu quả.

 Chức năng đăng ký tài khoản giúp người dùng có thể đăng ký tài khoản để có thể tham gia vào các khoá học đang có trên trang web.

 Chức năng đăng nhập để người dùng có thể vào xem các nội dung bên trong của website.

 Chức năng tìm kiếm linh hoạt giúp người dùng có thể nhanh chóng tìm kiếm ra thông tin khoá học theo tên khoá học, tên bài học, tác giả.

 Chức năng bình luận để người dùng có thể bình luận, trao đổi về các bài học trong trang web.

 Chức năng quản lý danh mục để người quản trị có thể thực hiện thêm, sửa, xoá danh mục khoá học.

 Chức năng quản lý khoá học để người quản trị có thể thực hiện thêm, sửa, xoá khoá học.

 Chức năng quản lý bài học để người quản trị có thể thực hiện thêm, sửa, xoá bài học.

 Chức năng quản lý bài tập để người quản trị có thể thực hiện thêm, sửa, xoá bài tập.

Chức năng quản lý tài khoản cho phép người dùng thay đổi thông tin cá nhân như họ tên, ảnh đại diện và mật khẩu Ngoài ra, người quản trị có quyền cấm người dùng bình luận và bổ nhiệm người dùng lên làm quản trị viên.

Nội dung đề tài

 Nghiên cứu ngôn ngữ lập trình, thiết kế cơ sở dữ liệu, quy trình phát triển một website

 Học thêm và áp dụng công nghệ mới, cách sử dụng biểu đồ để hoàn thành đề tài

Phạm vi đề tài

 Phạm vi thời gian: trong thời gian làm đồ án tốt nghiệp

 Phạm vi không gian: môi trường internet

 Phạm vi nội dung: các khoá học miễn phí trên youtube ở các kênh như:

PHÂN TÍCH THIẾT KẾ HỆ THỐNG

Kết quả thu thập yêu cầu

2.1.1 Yêu cầu phi chức năng

 Trang web hoạt động liên tục

 Không cần thiết bị cấu hình cao

 Tương thích với các trình duyệt thông dụng

 Giao diện hài hoà, đơn giản, dễ sử dụng

 Trang web dễ dàng cho người quản trị quản lý các tài khoản, khoá học, bài học, bài tập.

 Trang web dễ dàng cho học viên sử dụng để tìm kiếm khoá học, học tập.

Phân tích yêu cầu

Bảng 2.1 Phân tích các chức năng chính của website

Tên chức năng Người dùng Mô tả Yêu cầu

1 Đăng ký Mọi người Đăng ký tài khoản sử dụng website

Cung cấp các thông tin

2 Đăng nhập Mọi người Đăng nhập để sử dụng website

Cung cấp tài khoản mật khẩu đã đăng ký

3 Bình luận Mọi người Bình luận, trả lời bình luận, sửa, xoá Đăng nhập vào website bình luận

Thêm, sửa, xoá danh mục Đăng nhập với tài khoản quản trị

Thêm, sửa, xoá khoá học Đăng nhập với tài khoản quản trị

Thêm, sửa, xoá bài học Đăng nhập với tài khoản quản trị

Thêm, sửa, xoá bài tập Đăng nhập với tài khoản quản trị

Biểu đồ use case tổng quát

Biểu đồ Usecase thể hiện sự tương tác giữa các use case và tác nhân, trong đó use case đại diện cho các chức năng của hệ thống, còn tác nhân có thể là con người hoặc hệ thống khác cung cấp hoặc nhận thông tin từ hệ thống Biểu đồ này tập trung vào trạng thái tĩnh của các use case và đóng vai trò quan trọng trong việc tổ chức và mô hình hóa hệ thống Do use case phản ánh yêu cầu của hệ thống từ góc nhìn người dùng, chúng là những chức năng cần thiết mà hệ thống phải có Ngoài ra, biểu đồ cũng chỉ rõ tác nhân nào khởi động use case và thời điểm tác nhân nhận thông tin từ hệ thống.

Hình 2.1 Use case tổng quát

Hình 2.2 Use case đăng ký

Use case này cho phép học viên có thể tạo tài khoản đăng nhập vào website

Khi khách hàng nhấn nút đăng ký, hệ thống sẽ hiển thị màn hình yêu cầu nhập thông tin cần thiết, bao gồm họ tên, email, mật khẩu, địa chỉ và số điện thoại.

Học viên điền thông tin và nhấn nút đăng ký, hệ thống sẽ kiểm tra email, thêm vào danh sách người dùng và hiển thị thông báo đăng ký thành công Use case kết thúc.

Tại luồng cơ bản 2, nếu thông tin người dùng không hợp lệ hoặc email đã tồn tại, hệ thống sẽ hiển thị thông báo lỗi và yêu cầu người dùng nhập lại Người dùng có thể đăng ký thành công hoặc thoát, đánh dấu sự kết thúc của use case.

Hình 2.3 Use case đăng nhập

Use case này cho phép thành viên (admin, học viên) đăng nhập vào hệ thống.

 Use case này bắt đầu khi người dùng chọn chức năng đăng nhập Hệ thống sẽ hiển thị màn hình yêu cầu nhập email và mật khẩu.

Người dùng nhập địa chỉ email và mật khẩu, sau đó nhấn nút đăng nhập Hệ thống sẽ tiến hành kiểm tra thông tin đăng nhập và nếu đúng, người dùng sẽ được chuyển đến trang chủ của website.

Trong luồng cơ bản 2, nếu người dùng nhập sai email và mật khẩu, hệ thống sẽ hiển thị thông báo lỗi và yêu cầu người dùng nhập lại thông tin Người dùng có thể tiếp tục nhập lại hoặc chọn thoát, kết thúc use case.

Hình 2.4 Use case tìm kiếm

Use case này cho học viên tìm kiếm nhanh chóng khoá học mình mong muốn theo tên khoá học, tên tác giả.

Khi học viên nhấp chuột vào ô tìm kiếm và nhập tên khóa học hoặc bài học, hệ thống sẽ hiển thị danh sách các khóa học từ bộ sưu tập courses tương ứng với từ khóa tìm kiếm khi học viên nhấn nút tìm kiếm.

 Luồng rẽ nhánh: Khi học viên nhấn nút thoát hoặc trang chủ thì Use case kết thúc.

Hình 2.5 Use case bình luận

Use case này cho phép thành viên bình luận, sửa bình luận, xoá bình luận trên mỗi bài học

Sau khi người dùng chọn bài học để xem, họ có thể sử dụng chức năng bình luận dưới video để chia sẻ ý kiến về nội dung bài học Khi người dùng nhập bình luận và nhấn nút gửi, hệ thống sẽ kiểm tra và thêm bình luận vào bộ sưu tập comments.

When a user clicks the edit comment button, a comment editing form appears, allowing them to modify the content of their comment The system then verifies the changes and updates the comments collection accordingly, concluding the use case.

 Xoá bình luận: Người dùng nhấn nút xoá bình luận trên dòng nội dung bình luận Trạng thái trong collections comments sẽ được cập nhật. Use case kết thúc

Hình 2.6 Use case quản lý danh mục

Use case này cho phép admin có thể thêm, sửa, xoá danh mục khoá học của hệ thống

Khi admin truy cập vào mục quản lý danh mục, hệ thống sẽ hiển thị danh sách các danh mục khóa học trong bộ sưu tập categories trên màn hình.

Khi người dùng nhấn nút thêm khoá học, form thêm khoá học sẽ hiển thị để nhập thông tin danh mục, bao gồm tên và mô tả danh mục Sau khi điền đầy đủ thông tin và nhấn nút thêm, hệ thống sẽ cập nhật và thêm danh mục mới vào collection categories.

When users click the edit category button, a form appears allowing them to update category information The system will then verify the entered details and update the categories collection accordingly.

 Xoá danh mục: Người dùng nhấn nút xoá trên dòng thông tin danh mục Trạng thái trong collection categories sẽ được cập nhật Use case kết thúc.

Tại luồng cơ bản 2, nếu thông tin người dùng nhập vào không hợp lệ, hệ thống sẽ hiển thị thông báo lỗi và yêu cầu người dùng nhập lại Người dùng có thể tiếp tục nhập lại thông tin hoặc chọn thoát, kết thúc use case.

 Tiền điều kiện: Tài khoản đăng nhập phải mang quyền quản trị viên

Hình 2.7 Use case quản lý khoá học

Use case này cho phép admin có thể thêm, sửa, xoá khoá học của hệ thống

Khi admin nhấn vào danh sách khoá học trong mục khoá học, hệ thống sẽ hiển thị danh sách các khoá học trong bộ sưu tập courses lên màn hình.

Khi người dùng nhấn nút "Thêm khoá học", form nhập thông tin khoá học sẽ xuất hiện Người dùng cần điền các thông tin như tên khoá học và mô tả khoá học, sau đó nhấn nút "Thêm" Hệ thống sẽ tự động thêm khoá học vào bộ sưu tập courses, kết thúc quy trình sử dụng.

Đặc tả chi tiết use case

Hình 2.10 Biểu đồ tuần tự đăng ký

Hình 2.11 Biểu đồ tuần tự đăng nhập

Hình 2.12 Biểu đồ tuần tự tìm kiếm

Hình 2.13 Biểu đồ tuần tự thêm bình luận

Hình 2.14 Biểu đồ tuần tự sửa bình luận

Hình 2.15 Biểu đồ tuần tự xoá bình luận

Hình 2.16 Biểu đồ tuần tự thêm danh mục

Hình 2.17 Biểu đồ tuần tự sửa danh mục

Hình 2.18 Biểu đồ tuần tự xoá danh mục

Hình 2.19 Biểu đồ tuần tự thêm khoá học

Hình 2.20 Biểu đồ tuần tự sửa khoá học

Hình 2.21 Biểu đồ tuần tự xoá khoá học

Hình 2.22 Biểu đồ tuần tự thêm bài học

Hình 2.23 Biểu đồ tuần tự sửa bài học

Hình 2.24 Biểu đồ tuần tự xoá bài học

Hình 2.25 Biểu đồ tuần tự thêm bài tập

Hình 2.26 Biểu đồ tuần tự sửa bài tập

Hì nh 2.27 Biểu đồ tuần tự xoá bài tập

Biểu đồ tuần tự

3.1 Thiết kế cơ sở dữ liệu

3.1.1 Nguyên tắc thiết kế cơ sở dữ liệu

 Chọn đúng thuộc tính và kiểu thuộc tính

 Chọn đúng mối liên hệ

3.1.2 Thiết kế các collection dữ liệu

Người dùng trong hệ thống được lưu trữ thông tin chi tiết bao gồm mã người dùng, tên, địa chỉ email, mật khẩu, số điện thoại, ngày sinh, giới tính, và địa chỉ Ngoài ra, thông tin về ảnh đại diện, quyền quản trị viên, tình trạng cấm bình luận, khóa học đang theo học, bài học đã hoàn thành, bài tập đã hoàn thành, thời gian tạo tài khoản và thời gian cập nhật gần nhất cũng được ghi nhận.

STT Tên Mô tả Kiểu dữ liệu Ràng buộc

1 _id Mã người dùng ObjectId Unique

2 name Tên người dùng String Required

3 email Thư điện tử String Unique

4 password Mật khẩu String Required

5 phone Số điện thoại String

THIẾT KẾ HỆ THỐNG VỀ DỮ LIỆU

Thiết kế cơ sở dữ liệu

3.1.1 Nguyên tắc thiết kế cơ sở dữ liệu

 Chọn đúng thuộc tính và kiểu thuộc tính

 Chọn đúng mối liên hệ

3.1.2 Thiết kế các collection dữ liệu

Người dùng trong hệ thống được lưu trữ thông tin bao gồm mã người dùng, tên, địa chỉ email, mật khẩu, số điện thoại, ngày sinh, giới tính, địa chỉ, ảnh đại diện, quyền quản trị, trạng thái bình luận, các khóa học đang theo học, bài học đã hoàn thành, bài tập đã hoàn thành, cùng với thời gian tạo và cập nhật gần nhất.

1 _id Mã người dùng ObjectId Unique

2 name Tên người dùng String Required

3 email Thư điện tử String Unique

4 password Mật khẩu String Required

5 phone Số điện thoại String

9 avatar Ảnh đại diện String Required

10 isAdmin Quản trị viên Boolean Required

11 banned Cấm bình luận Boolean Required

12 learning Khoá học đang học Array

13 lsDone Bài học đã hoàn thành Array

14 exDone Bài tập đã hoàn thành Array

15 createdAt Thời gian tạo Date Required

16 updatedAt Cập nhật gần nhất Date Required

Các danh mục lưu trữ bao gồm thông tin quan trọng như mã danh mục, tên danh mục, mô tả danh mục, slug danh mục, thời gian tạo, thời gian cập nhật gần nhất, thời gian xoá và trạng thái đã xoá.

1 _id Mã danh mục ObjectId Unique

2 name Tên danh mục String Required

3 description Mô tả danh mục String

4 slug Slug danh mục String Unique

7 deletedAt Thời gian xoá Date

8 deleted Đã xoá Boolean Required

Khóa học là một bộ sưu tập thông tin quan trọng, bao gồm mã khóa học, tên khóa học, mô tả chi tiết, tác giả, hình ảnh đại diện, danh mục liên quan, slug khóa học, tổng số học viên tham gia, kiến thức đạt được, thời gian tạo, thời gian cập nhật gần nhất, thời gian xóa và trạng thái đã xóa.

1 _id Mã khoá học ObjectId Unique

2 name Tên khoá học String Required

3 description Mô tả khoá học String

6 category Danh mục ObjectId Required

7 slug Slug khoá học String Unique

8 totalStudent Tổng số học viên Int32 Required

9 obtain Kiến thức đạt được Array

Trong phần lưu trữ bài học, cần ghi lại các thông tin quan trọng như mã bài học, tên bài học, mã video, slug khóa học, slug bài học, thời gian tạo, thời gian cập nhật gần nhất, thời gian xóa và trạng thái đã xóa.

1 _id Mã bài học ObjectId Unique

2 name Tên bài học String Required

3 videoId Mã video String Required

4 courseSlug Slug khoá học String Required

5 slug Slug bài học String Unique

Collection comments là quá trình lưu trữ các thông tin quan trọng như mã bình luận, nội dung bình luận, tên người bình luận, các câu trả lời liên quan, slug bài học, thời gian tạo và thời gian cập nhật gần nhất.

1 _id Mã bình luận ObjectId Unique

2 content Nội dung String Required

3 commentBy Người bình luận ObjectId Required

5 lessonSlug Slug bài học String Required

Các bài tập được lưu trữ với thông tin chi tiết như mã bài tập, câu hỏi, đáp án, đáp án đúng, slug bài học, slug bài tập, thời gian tạo, thời gian cập nhật gần nhất và thời gian xóa.

1 _id Mã bài tập ObjectId Unique

2 question Câu hỏi String Required

4 correct Đáp án đúng Array

5 lessonSlug Slug bài học String Required

6 slug Slug bài tập String Unique

Xây dựng cơ sở dữ liệu

3.2.1 Lựa chọn hệ quản trị cơ sở dữ liệu

Hệ quản trị cơ sở dữ liệu (DBMS) đóng vai trò quan trọng trong các hệ thống thông tin cần quản lý và trao đổi dữ liệu Việc sử dụng DBMS một cách hiệu quả và đúng cách là yếu tố quyết định cho sự phát triển và mở rộng của hệ thống.

Hiện nay, có nhiều hệ quản trị cơ sở dữ liệu phổ biến như MySQL, MariaDB, Oracle, MongoDB, PostgreSQL và Microsoft SQL Server, đáp ứng nhu cầu quản lý dữ liệu đa dạng của người dùng.

Với website học lập trình miễn phí em chọn hệ quản trị cơ sở dữ liệu MongoDB.

3.2.2 Giới thiệu về hệ quản trị cơ sở dữ liệu MongoDB

NoSQL, hay Cơ sở dữ liệu phi quan hệ, là loại cơ sở dữ liệu không sử dụng ngôn ngữ SQL để truy vấn Hệ quản trị cơ sở dữ liệu NoSQL áp dụng nhiều kỹ thuật lưu trữ khác nhau, bao gồm cặp khóa – giá trị trên RAM, cặp khóa – giá trị trên ổ cứng, và tài liệu/tập tin Khác với SQL, NoSQL không có các tiêu chuẩn chung thống nhất Hiện nay, cơ sở dữ liệu NoSQL ngày càng được ưa chuộng trong các ứng dụng dữ liệu lớn và nền web thời gian thực.

MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở thuộc loại NoSQL, được sử dụng rộng rãi với hàng triệu người dùng Nó là một cơ sở dữ liệu hướng tài liệu, trong đó dữ liệu được lưu trữ dưới dạng các document kiểu JSON MongoDB được phát triển bởi MongoDB Inc và được cấp phép theo Giấy phép Công cộng phía Máy chủ (SSPL).

Trong cơ sở dữ liệu quan hệ, chúng ta sử dụng khái niệm bảng để lưu trữ dữ liệu, như trong MySQL hay SQL Server Ngược lại, MongoDB áp dụng khái niệm collection thay vì bảng để tổ chức dữ liệu.

 So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ ứng với row , MongoDB sẽ dùng các document thay cho row trong RDBMS.

MongoDB có cấu trúc collection linh hoạt, cho phép lưu trữ dữ liệu mà không cần tuân theo một cấu trúc cố định Điều này mang lại nhiều ưu điểm cho người dùng khi sử dụng MongoDB.

Lưu trữ dữ liệu dưới dạng JSON mang lại tính linh hoạt cao, với mỗi collection có kích cỡ và các document khác nhau, giúp tối ưu hóa việc quản lý và tổ chức dữ liệu hiệu quả.

Khác với RDBMS, dữ liệu trong hệ thống này không có ràng buộc và không yêu cầu tuân theo khuôn khổ nhất định, do đó các thao tác được thực hiện với tốc độ rất nhanh.

Khi có sự hỗ trợ từ tư vấn dữ liệu, hiệu suất được cải thiện đáng kể nhờ việc các bản ghi được lưu trữ trong bộ nhớ RAM, giúp tăng tốc độ truy vấn trong các lần tiếp theo mà không cần phải truy cập từ ổ cứng.

 Rất dễ mở rộng, MongoDB dễ dàng mở rộng hệ thống bằng cách thêm node vào cluster – cụm các node chứa dữ liệu giao tiếp với nhau.

3.2.3 Xây dựng cơ sở dữ liệu với MongoDB

Dựa trên các phân tích trước đó về việc thiết kế bảng và lựa chọn hệ quản trị cơ sở dữ liệu, chúng ta sẽ tiến hành xây dựng cơ sở dữ liệu bằng MongoDB.

Cơ sở dữ liệu cần tạo trên MongoDB sẽ có tên là courseuni

Hình 3.1 Danh sách các collection dữ liệu

3.2.4 Biểu đồ mối quan hệ giữa các collection trong cơ sở dữ liệu

Hình 3.8 Biểu đồ mối quan hệ giữa các collection trong cơ sở dữ liệu

THIẾT KẾ VÀ XÂY DỰNG WEBSITE

Các công cụ lập trình

Visual Studio Code (VS Code) là một trong những trình soạn thảo mã nguồn phổ biến nhất cho lập trình viên nhờ vào tốc độ nhanh, tính năng nhẹ nhàng, khả năng hỗ trợ đa nền tảng và mã nguồn mở Những ưu điểm này đã giúp VS Code trở thành lựa chọn ưa thích của nhiều người trong cộng đồng lập trình.

 Visual Studio Code là gì?

Visual Studio Code là một trình biên tập mã nguồn miễn phí, tương thích với Windows, Linux và macOS, được phát triển bởi Microsoft Nó được coi là sự kết hợp lý tưởng giữa môi trường phát triển tích hợp (IDE) và trình biên tập mã.

Visual Studio Code cung cấp tính năng debug mạnh mẽ, tích hợp Git, hỗ trợ highlight cú pháp, tự động hoàn thành mã thông minh, và cải tiến mã nguồn Ngoài ra, người dùng có thể tùy chỉnh theme, phím tắt và các tùy chọn khác để nâng cao trải nghiệm lập trình.

 Một số tính năng của Visual Studio Code

 Hỗ trợ nhiều ngôn ngữ lập trình

Visual Studio Code hỗ trợ đa dạng ngôn ngữ lập trình như C/C++, C#, F#, Visual Basic, HTML, CSS, và JavaScript, giúp người dùng dễ dàng phát hiện lỗi trong mã nguồn và nhận thông báo kịp thời.

 Hỗ trợ đa nền tảng

Visual Studio Code là một trình viết code đa nền tảng, hoạt động hiệu quả trên cả Windows, Linux và Mac Systems, mang lại sự linh hoạt cho lập trình viên.

 Cung cấp kho tiện ích mở rộng

Nếu lập trình viên muốn sử dụng ngôn ngữ lập trình không được Visual Studio hỗ trợ, họ có thể tải xuống tiện ích mở rộng mà không làm giảm hiệu suất của phần mềm, vì các tiện ích này hoạt động như chương trình độc lập.

Kho lưu trữ an toàn là yếu tố quan trọng trong lập trình Visual Studio Code giúp người dùng yên tâm khi dễ dàng kết nối với Git hoặc các kho lưu trữ hiện có, đảm bảo an toàn cho dữ liệu của họ.

Visual Studio Code hỗ trợ nhiều ứng dụng web Ngoài ra, nó cũng có một trình soạn thảo và thiết kế website.

 Lưu trữ dữ liệu dạng phân cấp

Hầu hết các tệp lưu trữ đoạn mã được tổ chức trong các thư mục tương tự nhau, và Visual Studio Code cung cấp các thư mục dành cho những tệp quan trọng đặc biệt.

Một số đoạn code có thể được điều chỉnh để tiện lợi hơn cho người dùng Visual Studio Code sẽ cung cấp cho lập trình viên các tùy chọn thay thế nếu có sẵn.

 Hỗ trợ thiết bị đầu cuối

Visual Studio Code tích hợp terminal, giúp người dùng tiết kiệm thời gian và công sức bằng cách loại bỏ việc chuyển đổi giữa các màn hình hoặc quay về thư mục gốc trong quá trình thao tác.

Người dùng Visual Studio Code có thể mở cùng lúc nhiều tệp tin và thư mục – mặc dù chúng không hề liên quan với nhau.

Visual Studio Code nổi bật với tính năng nhắc mã Intellisense, cho phép phát hiện và bổ sung các đoạn mã không đầy đủ Nếu lập trình viên quên khai báo biến, Intellisense sẽ tự động hỗ trợ họ bằng cách thêm các cú pháp còn thiếu, giúp quá trình lập trình trở nên dễ dàng và hiệu quả hơn.

Visual Studio Code hỗ trợ kéo hoặc sao chép mã trực tiếp từ GitHub.

Mã này sau đó có thể được thay đổi và lưu lại trên phần mềm.

Việc để lại nhận xét giúp người dùng dễ dàng nhớ công việc cần hoàn thành.

 Ưu điểm của Visual Studio Code

 Hỗ trợ đa nền tảng: Windows, Linux, Mac

 Hỗ trợ đa ngôn ngữ: C/C++, C#, F#, Visual Basic, HTML, CSS, JavaScript, JSON

HTML (Ngôn ngữ đánh dấu siêu văn bản) là công cụ chính để tạo ra các tài liệu truy cập trên internet, sử dụng các thẻ và phần tử đặc trưng Tài liệu HTML được lưu trên máy chủ web với đuôi ".htm" hoặc ".html", và trình duyệt sẽ đọc và hiển thị chúng dưới dạng trang web Mặc dù các thẻ HTML không hiển thị, nội dung văn bản và các đối tượng như hình ảnh và media vẫn được trình bày rõ ràng Các trang HTML được truyền tải qua mạng internet thông qua giao thức HTTP Bên cạnh việc nhúng hình ảnh và âm thanh, HTML cũng cho phép tích hợp các ngôn ngữ kịch bản như Javascript để tạo hiệu ứng động, đồng thời kết hợp với CSS để nâng cao tính thẩm mỹ của trang web.

CSS (Cascading Style Sheets) là ngôn ngữ quy định cách trình bày cho tài liệu HTML, XHTML, XML, SVG và UML Nó xác định cách hiển thị các thẻ HTML thông qua việc thiết lập các thuộc tính như font chữ, kích thước và màu sắc Các tiêu chuẩn kỹ thuật của CSS được duy trì bởi tổ chức W3C.

CSS có cấu trúc đơn giản và sử dụng từ tiếng Anh để đặt tên thuộc tính, cho phép viết trực tiếp vào mã HTML hoặc tham chiếu từ file CSS riêng biệt Hiện nay, CSS thường được lưu trữ trong tập tin có đuôi ".css", giúp mã HTML trở nên ngắn gọn hơn Một tập tin CSS có thể được sử dụng cho nhiều website, tiết kiệm thời gian và công sức Đặc biệt, tính kế thừa của CSS giúp giảm số lượng dòng code mà vẫn đáp ứng được yêu cầu thiết kế.

Các trình duyệt hiểu CSS theo cách riêng của mình, dẫn đến việc nội dung hiển thị không đồng nhất trên các nền tảng khác nhau Tuy nhiên, CSS cung cấp hàng trăm thuộc tính trình bày, cho phép người dùng sáng tạo và kết hợp các thuộc tính để đạt được hiệu quả tối ưu trong thiết kế.

 Bootstrap là một framework front-end miễn phí giúp phát triển các ứng dụng web nhanh và dễ dàng hơn.

 Bootstrap bao gồm các mẫu thiết kế dựa trên HTML và CSS như typography, form, button, table, navigation, modal, image carousels cũng như các plugins JavaScript tuỳ ý.

 Bootstrap cung cấp cho bạn khả năng thiết kế web responsive một cách dễ dàng.

Thiết kế chức năng

Người dùng điền thông tin vào form đăng ký và nhấn nút đăng ký Nếu thông tin nhập sai, hệ thống sẽ hiển thị cảnh báo để người dùng chỉnh sửa Khi thông tin được nhập chính xác, người dùng sẽ nhận được thông báo đăng ký thành công.

Người dùng có thể đăng nhập vào hệ thống bằng tài khoản đã đăng ký, từ đó truy cập và xem các khóa học cùng bài học có sẵn trên trang web.

Người dùng nhập từ khoá tìm kiếm vào form tìm kiếm Các khoá học thoả mãn từ khoá tìm kiếm sẽ được hiển thị.

Học viên có thể tương tác và chia sẻ thông tin về bài học với các bạn học khác thông qua phần bình luận dưới mỗi bài học.

Sau khi hoàn thành bài học, học viên sẽ có các bài tập để thực hành Đối với bài tập thực hành, học viên sẽ áp dụng kiến thức đã học để giải quyết đề bài Còn với bài tập trắc nghiệm, học viên có thể kiểm tra đáp án của mình để biết đúng hay sai.

Thiết kế giao diện

Nguyên tắc thiết kế giao diện

 Sử dụng từ ngữ mang tính đại chúng

Tất cả từ ngữ trên một trang web chuyên nghiệp cần phải dễ hiểu và chính xác về ngữ pháp, tránh sử dụng ẩn dụ và cần mang tính chất đại chúng Hơn nữa, nên hạn chế việc dùng từ ngữ mang tính chất vùng miền.

Sử dụng từ ngữ đại chúng hợp lý giúp thu hút người truy cập, giữ chân họ lâu hơn trên trang web, từ đó tăng doanh thu và lượng khách hàng.

Khách hàng khi truy cập website chưa biết về thương hiệu và sản phẩm của bạn, vì vậy nội dung cần phải súc tích, dễ hiểu và dễ truyền tải để thu hút sự chú ý của họ.

 Phân bổ bố cục nội dung hợp lý

Người truy cập có thể truy cập trang web từ nhiều thiết bị khác nhau như điện thoại, laptop, máy tính bàn và smart TV Do đó, việc tối ưu hóa kỹ thuật phân bổ nội dung trên các thiết bị là rất quan trọng Trình bày quá nhiều nội dung trên một trang có thể gây rối và không hợp lý, trong khi việc để trống quá nhiều phần cũng gây khó chịu cho người truy cập Những yếu tố này có thể làm giảm mức độ tương tác của khách hàng.

Nên tìm hiểu các ý kiến chuyên gia từ các đơn vị thiết kế giao diện website chuyên nghiệp để biết thêm và nhờ họ tư vấn giúp đỡ.

 Tránh lạm dụng hiệu ứng hình ảnh

Ngày nay, nhiều website thường sử dụng hiệu ứng hình ảnh động, JavaScript hoặc Flash để tạo sự thu hút Tuy nhiên, cần phải tiết chế và tránh làm cho trang web trở nên rối mắt như một trang PowerPoint vụng về, gây mất tập trung cho người dùng.

Tùy thuộc vào đối tượng mà website phục vụ, việc lựa chọn hình ảnh và hiệu ứng phù hợp là rất quan trọng Hãy làm nổi bật những nội dung cần thiết để thu hút sự chú ý của khách hàng vào thông điệp và sản phẩm mà doanh nghiệp muốn truyền tải.

 Luôn luôn theo dõi quá trình web vận hành

Luôn theo dõi và khắc phục kịp thời các lỗ hổng trên trang web khi phát hiện Đảm bảo theo dõi các thông số của trang để đánh giá hiệu quả hoạt động của website.

 Tương thích mọi loại thiết bị

Nhiều trang web hiện nay được thiết kế kém, chỉ hoạt động tốt trên laptop nhưng lại gặp vấn đề giao diện khi truy cập trên điện thoại di động, hoặc không tương thích với các trình duyệt web khác nhau.

Yếu tố độ phân giải màn hình của các trình duyệt có ảnh hưởng lớn đến website của bạn, có thể gây hỏng bố cục Vì vậy, lập trình viên cần chú ý đến vấn đề này, để thiết kế website chuẩn, đảm bảo tương thích với nhiều độ phân giải màn hình khác nhau.

Một trang web chuyên nghiệp cần phải chuẩn SEO để dẫn đầu trên các công cụ tìm kiếm như Google và Yahoo Để xác định thứ hạng trên kết quả tìm kiếm, các bộ máy này sẽ xem xét nội dung của trang web và đối tượng khách hàng mà nó phục vụ Do đó, trang web phải đáp ứng các tiêu chí đánh giá của công cụ tìm kiếm, bao gồm việc lặp lại các từ khóa tìm kiếm trong các bài đăng và đảm bảo nội dung hình ảnh rõ ràng và thống nhất.

 Tối ưu thời gian tải trang

Để tối ưu hóa trải nghiệm người dùng, thiết kế giao diện website cần chú trọng vào thời gian tải trang Tránh việc chèn quá nhiều GIF, video hay audio, và hãy lựa chọn hình ảnh, âm thanh, video một cách cẩn thận Việc này sẽ giúp website của bạn tải nhanh hơn, giữ chân người dùng lâu hơn.

Có thể cài đặt các công cụ hỗ trợ để điều chỉnh dung lượng file media, giúp tối ưu hóa không gian lưu trữ trên website.

Trang chủ của website gồm những thông tin chung về tổng số học viên, tổng số khoá học, các khoá học nổi bật

Hình 4.5 Giao diện trang chủ

Trang đăng ký tài khoản giúp người dùng tạo tài khoản để đăng nhập vào website

Hình 4.6 Giao diện đăng ký

Trang đăng nhập cho phép người dùng truy cập vào các nội dung bên trong website, bao gồm việc xem bài học, bình luận về bài học và thực hiện các bài tập.

Hình 4.7 Giao diện đăng nhập

4.3.4 Giao diện trang khoá học

Trang khoá học hiển thị danh mục khoá học và các khoá học hiện có.

Hình 4.8 Giao diện trang khoá học

4.3.5 Giao diện trang quản trị

Trang quản trị cung cấp cho quản trị viên khả năng vận hành hệ thống hiệu quả, cho phép truy cập vào các chức năng quan trọng như quản lý tài khoản, danh mục, khoá học, bài học và bài tập.

Hình 4.9 Giao diện trang quản trị

Thiết kế kiểm soát

Để đảm bảo tính chính xác trong mọi hoạt động của hệ thống, cần nghiên cứu và thực hiện các biện pháp kiểm soát cần thiết nhằm đối phó với những nguy cơ tiềm ẩn.

 Mất mát và sai lệch thông tin.

 Những lỗi sai xảy ra trong quá trình xuất, nhập thông tin.

 Các khía cạnh cơ bản trong thiết kế kiểm soát bao gồm:

Để đảm bảo độ chính xác, cần kiểm tra từng thao tác đang thực hiện để xác nhận rằng chúng được tiến hành đúng cách, đồng thời xác minh tính chính xác của các thông tin đang được lưu trữ và xử lý trong cơ sở dữ liệu.

 Độ an toàn: đảm bảo rằng không thể mất mát thông tin trong mọi tình huống do vô tình hay cố ý hoặc do những rủi ro ngẫu nhiên.

 Độ riêng tư: kiểm tra việc bảo vệ các quyền của cá nhân, của tập thể.

4.4.2 Nghiên cứu kiểm tra thông tin nhập, xuất

Mọi thông tin xuất nhập cần được kiểm tra để đảm bảo tính xác thực Thông thường, việc kiểm tra diễn ra tại các điểm thu nhận thông tin, trung tâm xử lý, và nơi phân phát thông tin Mục đích của việc này là phát hiện và khắc phục các lỗi đã phát hiện.

- Kiểm tra thủ công: có thể dùng phương án kiểm tra đầy đủ hoặc ngẫu nhiên.

Kiểm tra bằng máy có hai phương thức chính: phương thức trực tiếp, trong đó sử dụng các ràng buộc toàn vẹn để đảm bảo tính chính xác, và phương thức gián tiếp, thông qua việc tham khảo các thông tin đã được kiểm tra trước đó.

Khi thực hiện kiểm tra, thường tiến hành kiểm tra trực tiếp trước, sau đó là kiểm tra gián tiếp Trong kiểm tra trực tiếp, cần chú ý đến sự hiện diện của giá trị, khuôn dạng, kiểu giá trị và miền giá trị Ngược lại, kiểm tra gián tiếp tập trung vào các ràng buộc và mối liên hệ logic giữa các thông tin trong hệ thống.

4.4.3 Một số dữ liệu đã được kiểm soát khi nhập

Khi người dùng đăng ký, nếu nhập email đã tồn tại trong CSDL hoặc mật khẩu quá ngắn, hệ thống sẽ hiển thị thông báo lỗi Ngược lại, nếu người dùng nhập địa chỉ email mới và mật khẩu từ 6 ký tự trở lên, quá trình đăng ký sẽ được hoàn tất thành công.

Hình 4.10 Kiểm soát dữ liệu đăng ký Ở phần thay đổi mật khẩu, người dùng bắt buộc phải nhập đẩy đủ và chính xác các trường

Hình 4.11 Kiểm soát dữ liệu đổi mật khẩu

Trong phần thêm khoá học, người dùng bắt buộc nhập vào tên khoá học và tải lên hình ảnh khoá học

Hình 4.12 Kiểm soát dữ liệu thêm khoá học

Chạy chương trình và kiểm thử

 Kiểm thử tính tương thích

 Kiểm thử cơ sở dữ liệu

4.5.2 Đánh giá kết quả chạy kiểm thử

 Kiểm thử chức năng: website đáp ứng hầu hết các chức năng đề xuất

 Kiểm thử tính tương thích: website với hai đối tượng chính là học viên và quản trị viên

Học viên có thể truy cập hầu hết các chức năng trên nhiều thiết bị như máy tính, máy tính bảng và điện thoại, miễn là có kết nối internet.

Đối với quản trị viên, các chức năng chủ yếu được cung cấp trên máy tính và máy tính bảng có kết nối internet, trong khi trang web quản trị không được thiết kế để tương thích với điện thoại di động.

 Kiểm thử cơ sở dữ liệu: tối ưu cơ sở dữ liệu

 Kiểm thử hiệu năng trên localhost:

 Tốc độ xử lý nhanh, website hoạt động ổn định

 Tiêu tốn ít tài nguyên máy khách

Định dạng
Số trang	73
Dung lượng	3,07 MB