1. Trang chủ
  2. » Luận Văn - Báo Cáo

Website hỗ trợ học tập

61 0 0
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Xây dựng website hỗ trợ học tập
Tác giả Nguyễn Thanh Nhật Huy
Người hướng dẫn TS. Trần Thị Ngọc Lan
Trường học Đại học Bách Khoa Hà Nội
Chuyên ngành Kỹ thuật Điện tử-Viễn thông
Thể loại Đồ án tốt nghiệp
Năm xuất bản 2024
Thành phố Hà Nội
Định dạng
Số trang 61
Dung lượng 3,31 MB

Cấu trúc

  • CHƯƠNG 1. GIỚI THIỆU ĐỀ TÀI (14)
    • 1.1 Đ ẶT VẤN ĐỀ (14)
    • 1.2 M ỤC TIÊU CỦA ĐỀ TÀI (14)
    • 1.3 Đ ỊNH HƯỚNG GIẢI PHÁP (15)
    • 1.4 B Ố CỤC ĐỒ ÁN (16)
    • 1.5 K ẾT LUẬN (16)
  • CHƯƠNG 2. KHẢO SÁT VÀ PHÂN TÍCH YÊU CẦU (17)
    • 2.1 K HẢO SÁT HIỆN TRẠNG (17)
    • 2.2 T ỔNG QUAN CHỨC NĂNG (18)
    • 2.3 Đ ẶC TẢ CHỨC NĂNG (23)
    • 2.4 Y ÊU CẦU PHI CHỨC NĂNG (25)
    • 2.5 K ẾT LUẬN (25)
  • CHƯƠNG 3. CÔNG NGHỆ SỬ DỤNG (26)
    • 3.1 H Ệ QUẢN TRỊ CƠ SỞ DỮ LIỆU M Y SQL (26)
    • 3.2 F RONT END (26)
      • 3.2.2.1. HTML (27)
      • 3.2.2.2. CSS (27)
      • 3.2.2.3. Javascript (28)
    • 3.3 B ACK END (28)
    • 3.4 K ẾT LUẬN (31)
  • CHƯƠNG 4. THỰC NGHIỆM VÀ ĐÁNH GIÁ (32)
    • 4.1 T HIẾT KẾ CẤU TRÚC (32)
      • 4.1.3.1. Tầng presentation (35)
      • 4.1.3.2. Tầng Logic (35)
      • 4.1.3.3. Tầng Data (36)
    • 4.2 T HIẾT KẾ CHI TIẾT (38)
      • 4.2.1.1. Giao diện đăng nhập (38)
      • 4.2.1.2. Giao diện đăng kí (38)
      • 4.2.1.3. Màn hình giao diện trang chủ (39)
      • 4.2.1.4. Giao diện tài liệu (40)
      • 4.2.1.5. Giao diện khóa học (41)
      • 4.2.1.6. Giao diện giỏ hàng thanh toán (42)
      • 4.2.2.1. Lớp CoureController (42)
      • 4.2.2.2. Lớp CourseService (43)
      • 4.2.3.1. Bảng dữ liệu Course (45)
      • 4.2.3.2. Bảng dũ liệu account (46)
      • 4.2.3.3. Bảng dữ liệu Teacher (46)
      • 4.2.3.4. Bảng dữ liệu order (47)
    • 4.3 X ÂY DỰNG ỨNG DỤNG (47)
      • 4.3.3.1. Màn hình tài liệu (48)
      • 4.3.3.2. Màn hình Khóa học (49)
      • 4.3.3.3. Màn hình tin tức(blog) (52)
      • 4.3.3.4. Màn hình trang khuyễn mãi (53)
      • 4.3.3.5. Màn hình thi trực tuyến ( môn Tiếng Anh) (53)
    • 4.4 K IỂM THỬ (54)
    • 4.5 K ẾT LUẬN (56)
  • CHƯƠNG 5. CÁC GIẢI PHÁP VÀ ĐÓNG GÓP (57)
    • 5.1 G IẢI QUYẾT VẤN ĐỀ TÌM KIẾM TÀI LIỆU (57)
    • 5.2 G IẢI QUYẾT VẤN ĐỀ MUA BÁN KHÓA HỌC (58)
    • 5.3 K ẾT LUẬN (59)
    • 2. H ƯỚNG PHÁT TRIỂN (60)
  • TÀI LIỆU THAM KHẢO (61)

Nội dung

đề tài "Xây dựng website hỗ trợ học tập" đã đạt được một số các kết quả cụ thể, giải quyết được được những vấn đề đã nêu ra ở bước phân tích. Websiteđược xây dựng với các chức năng cơ bản nhất của một website hỗ trợ học tập như: Đăng ký đăng nhập, Tìm kiếm tài liệu, Xem chi tiết tài liệu, quản lý blog, mua bán khóa học,..

GIỚI THIỆU ĐỀ TÀI

Đ ẶT VẤN ĐỀ

Ở bất kỳ thời điểm nào thì vấn đề học tập tại Đại học Bách Khoa Hà Nội vẫn luôn là vấn đề được quan tâm và đặt lên hàng đầu Với chương trình học và thi khá nặng thì việc sinh viên đặc biệt là những sinh viên năm nhất gặp khó khăn trong quá trình học tập là thường xuyên xảy ra.Trong thời kì bùng nổ công nghệ thông tin và Internet như hiện nay công nghệ góp phần quan trọng dẫn đến sự thành công trên tất cả các lĩnh vực và học tập cũng không phải ngoại lệ Nhu cầu học tập trực tuyến và tìm kiếm tài liệu trên mạng của sinh viên ngày càng tăng Tuy nhiên việc tìm kiếm một địa chỉ học tập hiệu quả và nguồn tài liệu phù hợp vẫn là một thách thức với nhiều sinh viên

Theo như khảo sát thì 10 sinh viên sẽ có đến 7 sinh viện tìm kiếm tài liệu trên mạng thay vì những cách truyền thống như xin các khóa trước hay mua tại các cửa hàng quanh trường Hiện nay có rất nhiều những trang facebook và trang web học tập, tìm kiếm tài liệu nổi tiếng để sinh viên tham khảo Nhưng các trang web này thường sẽ có nhiều hạn chế như đề thi đã cũ, tài liệu chung chung không giành riêng cho một trường đại hoc cụ thể nào dẫn đến sinh viên của Đại học Bách Khoa Hà Nội sẽ mất nhiều thời gian để tìm kiếm, chắt lọc và cũng rất khó để tiếp cận Hơn thế nữa, việc tương tác giữa các sinh viên trong trường với nhau là rất quan trọng, những chia sẻ cũng như kinh nghiệm giữa các sinh viên cùng khóa hay của những sinh viên khóa trên là rất cần thiết để nâng cao hiệu quả học tập

Giải quyết được các vấn đề đặt ra trên sẽ giúp tạo ra môi trường học tập trở nên thuận tiện và hiệu quả hơn, tiết kiệm được thời gian cũng như tiền bạc của mỗi sinh viên Đại học Bách Khoa Hà Nội.

M ỤC TIÊU CỦA ĐỀ TÀI

Như em đã đề cập ở trên,vì môi trường học tập trên giảng đường đại học rất khác so với khi còn học cấp 3, việc nghe giảng và tìm kiếm tài liệu sẽ khó khăn và mất thời gian

Nắm bắt được vấn đề trên,nên em đã cân nhắc và chọn thực hiện một trang web hỗ trợ cho những sinh viên Bách Khoa có nhu cầu tìm kiếm một nơi để học tập Mục tiêu của đồ án là xây dựng một website hỗ trợ học tập dành riêng cho sinh viên của Đại học Bách Khoa Hà Nội, cung cấp những khóa học và tài liệu bao gồm đầy đủ các môn

2 từ đại cương đến chuyên ngành, từ ngoại ngữ cho đến những khóa học lập trình; tạo cầu nối giữa các sinh viên với nhau

Người truy cập vào trang web có thể sử dụng các chức năng tiêu biểu của website như mua khóa học cho những môn mà mình muốn ôn tập với giá rẻ, tìm kiếm những tài liệu, đề thi của những kì trước một cách nhanh chóng và thuận tiện cũng như góp ý, tương tác, bình luận, chia sẻ kinh nghiệm về khóa học cũng như môn học mà mình đang hoặc đã học

Ngoài mục tiêu chính là giải quyết các vấn đề đã nêu, việc thực hiện đề tài này còn mang lại cho em những kinh nghiệm quý báu và đạt được một số mục tiêu cá nhân quan trọng Đầu tiên, em học được cách triển khai một dự án, từ quy trình xây dựng ứng dụng web cho đến việc áp dụng các giai đoạn khảo sát, phân tích, thiết kế, cài đặt và kiểm thử trong thực tế Đặc biệt, em đã có thêm kinh nghiệm trong việc phân tích yêu cầu của người dùng Thứ hai, em đã phát triển tất cả các thành phần của một ứng dụng web Cuối cùng, em đã biết cách xây dựng được các module cơ bản và đặc trưng nhất của một hệ thống.

Đ ỊNH HƯỚNG GIẢI PHÁP

Với những mục tiêu mà em đã đặt ra ở trên, em sẽ đưa ra những định hướng và giải pháp của mình.Hiện nay, có hai xu hướng phát triển ứng dụng chủ yếu là phát triển trên nền tảng web và ứng dụng di động Em sẽ chọn xây dựng một trang web kế thừa lại những tính năng tiêu biểu của những web học tập khác trên internet và phát triển thêm những tính năng mới để phục vụ riêng cho sinh viên Đại học Bách Khoa Hà Nội

Em xây dựng hệ thống theo mô hình client-server, bao gồm hai phân hệ Dưới đây, em sẽ trình bày khái quát chức năng của từng phân hệ Đầu tiên là website công khai, đối tượng sử dụng chính là sinh viên(user) Website này sẽ bao gồm các chức năng cơ bản như: tìm kiếm và mua khóa học, xem tài liệu học tập, tham gia các khóa học trực tuyến, và đánh giá khóa học

Phân hệ thứ hai là website quản trị dành cho quản trị viên(admin) Website này sẽ giúp quản trị viên quản lý các thông tin chung của toàn bộ website công khai Các chức năng bao gồm: thêm mới và quản lý khóa học, quản lý người dùng, và xử lý các phản hồi báo cáo từ người học

Em cũng đặc biệt quan tâm đến việc bảo mật người dùng Hệ thống sẽ triển khai các biện pháp như quản lý quyền truy cập và xác thực người dùng, đảm bảo rằng chỉ những người được ủy quyền mới có thể truy cập và xem tài liệu hay thông tin người dùng Điều này không chỉ bảo vệ thông tin quan trọng mà còn đảm bảo quyền riêng tư cho người dùng

Về phần công nghệ thì em sử dụng Spring Framework với ngôn ngữ Java là Back- end Còn Front-End thì em dung các ngôn ngữ cơ bản như Html, Css, Js kết hợp với các

3 thư viện hỗ trợ như Boostrap, W2School Cuối cùng là về quản trị cơ sở dữ liệu thì em sử dụng MySQL Chi tiết em sẽ trình bày rõ ràng trong những chương tiếp theo.

B Ố CỤC ĐỒ ÁN

Phần còn lại của báo cáo đồ án tốt nghiệp này được tổ chức như sau

Chương 2 Khảo sát và phân tích yêu cầu: Chương này trình bày về một số các khảo sát phía người dùng và hiện trạng của một số các nền tảng tương tự Đưa ra các chức năng cần phát triển, các đối tượng sử dụng ứng dụng Từ đó em sẽ đưa ra các ca sử dụng (use case) phù hợp và đặc tả các use case này

Chương 3 Công nghệ sử dụng: Trình bày về các công nghệ, cơ sở lý thuyết của các công nghệ, ưu nhược điểm của nó và cách áp dụng nó vào đồ án này như thế nào Thông qua đây trình bày rõ hơn về cấu trúc hệ thống website tìm trọ

Chương 4 Thực nghiệm và đánh giá: Trong chương này, em sẽ trình bày về quá trình phát triển, kiểm thử và triển khai hệ thống Trong phần phát triển sẽ nêu rõ thiết kế kiến trúc, thiết kế chi tiết (thiết kế gói, giao diện, lớp, cơ sở dữ liệu) của hệ thống Trong phần kiểm thử sẽ nêu rõ các kỹ thuật và kịch bản kiểm thử áp dụng đối với hệ thống Sau cùng là báo cáo về triển khai ứng dụng trong môi trường thực tế

Chương 5 Giải pháp đóng góp: Trong Chương 5 em xin đưa ra các đóng góp nổi bật của em trong hệ thống phần mềm, làm rõ được các phương pháp đã đưa ra để xử lý từng mục tiêu cụ thể và đem lại hiểu quả như thế nào, đã xây dựng những chức năng gì, đem đến cho người dùng những trải nghiệm và tiện ích gì

K ẾT LUẬN

Tóm lại, ở chương 1, em đã trình bày các thông tin về đề tài và những vấn đề và mục tiêu mà đề tài cần đạt được Em cũng đã trình bày tóm tắt bố cục của báo cáo đồ án tốt nghiệp

KHẢO SÁT VÀ PHÂN TÍCH YÊU CẦU

K HẢO SÁT HIỆN TRẠNG

Hiện nay, với sự phát triển của công nghệ, nhu cầu học tập và tìm kiếm tài liệu trên mạng ngày càng tăng, đặc biệt từ đợi dịch Covid 19 thì phương pháp học online lại càng trở nên phổ biến Để đáp ứng nhu cầu này, nhiều website hỗ trợ học tập đã ra đời, cung cấp các dịch vụ như mua khóa học, truy cập tài liệu, và tham gia các diễn đàn trao đổi kiến thức Để làm rõ nhu cầu của sinh viên Đại học Bách Khoa Hà Nội, em đã tiến hành khảo sát trên facebook cũng như trực tiếp đánh giá của sinh viên Bách Khoa về những web học tập nổi tiếng như hocmai.vn, tailieuhust.com,…Tuy nhiên, các website này đều có những ưu và nhược điểm riêng Ưu điểm Nhược điểm Đây là những website uy tín được nhiều thế hệ học sinh, sinh viên tin dùng Nó đa dạng về mặt tài liệu và khóa học cho phép sinh viên tiếp cận dễ dàng

Tuy nhiên những trang web này đều có nhược điểm mà hầu hết sinh viên đều đồng ý đó là không đa dạng khóa học về những môn cơ sở ngành hay chuyên ngành, tài liệu đôi khi còn cũ, không update và thiếu chức năng tương tác giữa các sinh viên với nhau

Bảng 2.1: Ưu nhược điểm của các web học tập

T ỔNG QUAN CHỨC NĂNG

Biểu đồ Use-case tổng quát

Hình 2.1: Sơ đồ use case tổng quát

Hệ thống có ba tác nhân chính là:

• Khách (Guest): là người dùng chưa đăng nhập vào hệ thống.Khách được coi là tác nhân vô định danh có thể họ chưa đăng nhập hoặc họ chưa có tài khoản Khi đó, họ phải đăng ký tài khoản hoặc đăng nhập vào hệ thống để có thể sử dụng những chức năng chính của hệ thống

• Người dùng (User): là người dùng đã đăng nhập, kế thừa các chức năng và quyền của Khách

• Quản trị viên (Admin): là người quản trị của hệ thống, có vai trò quản lý các thông tin của toàn bộ website như người dung, khóa học, bài đăng

Một số use case chính:

• Tìm kiếm tài liệu : khách có thể tìm kiếm khóa học theo bảng chữ cái

• Tìm kiếm và đăng kí khóa học : người dùng cần đăng nhập để tìm kiếm và đăng kí những khóa học mà mình muốn

• Làm bài tập trực tuyến: Người dùng có thể làm bài tập online và check kết quả ngay lập tức trên hệ thống

Biểu đồ use case phân rã "Tìm kiếm tài liệu"

Hình 2.2: Biểu đồ use case phân rã" Tìm kiếm tài liệu"

Biểu đồ use case phân rã "Quản lí thông tin cá nhân"

Hình 2.3: Biểu đồ phân rã “Quản lí thông tin cá nhân’’

Biểu đồ use case phân rã "Đăng kí khóa học"

Hình 2.4: Biểu đồ use case phân rã "Đăng kí khóa học"

Biểu đồ use case phân rã "Làm bài tập online"

Hình 2.5: Biểu đồ use case phân rã "Làm bài tập online"

Biểu đồ use case phân rã "Quản lí khóa học"

Hình 2.6: Biểu đồ use case phân rã "Làm bài tập online"

Biểu đồ use case phân rã "Quản lí blog"

Hình 2.7: Biểu đồ use case phân rã "Làm bài tập online"

Biểu đồ use case phân rã "Quản lí tài liệu"

Hình 2.8: Biểu đồ use case phân rã "Quản lí tài liệu"

Quy trình đăng kí khóa học

Trong phần này, em sẽ mô tả quy trình đăng kí một khóa học trên website Đầu tiên, người dùng là các sinh viên có nhu cầu đăng kí khóa học, cần chọn những khóa học mà mình muốn đăng kí, sau đó thêm vào giỏ hàng rồi nhấn thanh toán.Hệ thống sẽ gửi mã QR ngân hàng của chủ website để người dùng có thể thanh toán Khi đó, quản trị viên tức là chủ website sẽ check thông tin chuyển khoản và phê duyệt cho người dùng đó được phép truy cập để học những khóa học mà người đó đã đăng kí trên hệ thống

Hình 2.9: Quy trình đăng kí khóa học

Đ ẶC TẢ CHỨC NĂNG

Danh sách chức năng đặc tả

Thứ tự Tên use case

Bảng 2.2: Danh sách đặc tả chức năng Đặc tả use case tìm kiếm tài liệu

Tên use case Tìm kiếm tài liệu

Tiền điều kiện Không có

Tìm kiếm tài liệu cần dùng

Thứ tự Thực hiện bởi Hành động

1 Khách Chọn vào mục tài liệu trên thanh công cụ

2 Hệ thống Hiển thị ra trang tài liệu

3 Khách Gõ tên tài liệu muốn tìm

4 Hệ thống Trả về kết quả tài liệu phù hợp

Luồng sự kiện thay thế

4a Khách Không hiển thị gì nếu tài liệu cần tìm không khớp với tên tài liệu đã gõ

Hậu điều kiện Trả về màn hình trang tài liệu

Bảng 2.3: Đặc tả use case tìm kiếm tài liệu Đặc tả use case mua khóa học

Tên use case Mua khóa học

Tiền điều kiện Người dùng đã đăng nhập

Mua khóa học cần để học tập

Thứ tự Thực hiện bởi

1 Người dùng Chọn vào mục khóa học trên thanh công cụ

2 Hệ thống Trả về kết quả khóa học phù hợp

3 Người dùng Thêm khóa học muốn mua vào giỏ hàng

4 Hệ thống Xác nhận lại xem bạn có chắc chắn muốn mua khóa học không

5 Người dùng Chọn để thanh toán khóa học

6 Hệ thống Hiển thị mã QR để thanh toán

7 Người dùng Thanh toán khóa học

8 Hệ thống Xác nhận thanh toán

Luồng sự kiện thay thế

8a Quản trị viên Không hiển thị gì nếu thanh toán lỗi

Hậu điều kiện Trả về màn hình trang chủ

Bảng 2.4: Đặc tả use case mua bán khóa học

Y ÊU CẦU PHI CHỨC NĂNG

Yêu cầu về giao diện

Giao diện với tông màu sáng là chủ đạo, đa số là bằng Tiếng Việt Các thành phần trên giao diện được sắp xếp một cách logic và rõ ràng, giúp người dùng dễ dàng tìm thấy và truy cập vào các chức năng và tính năng mà hệ thống cung cấp

Yêu cầu về bảo mật

Hệ thống cần phải đảm bảo tính bảo mật tuyệt đối cho người dùng Ví dụ như mật khẩu của người dùng phải được mã hoá Các request được gửi lên server phải được đính kèm jwt token

Yêu cầu về hiệu năng

Hệ thống được tối ưu để có hiệu năng cao, giúp web chạy ổn định 24/7, đảm bảo trải nghiệm tốt nhất cho người dùng.

K ẾT LUẬN

Tóm lại ở chương 2, em đã trình bày kĩ về những khảo sát và phân tích hiện trạng hiện nay Sau đó em đã trình bày sơ đồ use case tổng quát, use case phân rã chức năng và đặc tả các biểu đồ đó để có cái nhìn rõ ràng nhất về mối quan hệ giữa các chức năng của hệ thống Trong chương tiếp theo mọi người sẽ được hiểu rõ ràng hơn về những công nghệ, những phần mềm mà em dùng để thiết kế, tạo nên website này

CÔNG NGHỆ SỬ DỤNG

H Ệ QUẢN TRỊ CƠ SỞ DỮ LIỆU M Y SQL

MySQL [1] là một hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) mã nguồn mở được phát triển bởi Oracle Corporation Nó được sử dụng rộng rãi trên toàn thế giới cho các ứng dụng web và doanh nghiệp

MySQL sử dụng ngôn ngữ truy vấn SQL để tạo, sửa đổi và truy xuất dữ liệu trong cơ sở dữ liệu quan hệ Nó hỗ trợ nhiều tính năng như đa người dùng, đa nền tảng và đa luồng, cung cấp khả năng xử lý nhiều truy vấn đồng thời và có thể được tích hợp với nhiều ngôn ngữ lập trình khác nhau

Trong phạm vi đồ án tốt nghiệp sự dụng MySQL là một lựa chọn hợp lý nhất với ưu điểm với thời gian xử lý nhanh chóng nhờ vào việc đưa ra một số tiêu chuẩn, đa tính năng, độ bảo mật cao, dễ dàng sử dụng

Ngoài ra, em đã sử dụng công cụ MySQL Workbench 8.0 CE, đây là một công cụ quản lý cơ sở dữ liệu MySQL miễn phí, cung cấp một giao diện đồ họa để quản lý các cơ sở dữ liệu và bảng

F RONT END

Bootstrap [2] là một framework bao gồm các HTML, CSS và JavaScript template dùng để phát triển website chuẩn responsive Bootstrap là sản phẩm của Mark Otto và Jacob Thornton tại Twitter Nó được xuất bản như là một mã nguồn mở vào ngày 19/8/2011 trên GitHub Tên gọi ban đầu là Twitter Blueprint

Nó có 3 file chính giúp quản lý các chức năng của Website và giao diện người dùng đó là : Bootstrap.CSS, Bootstrap.JS và Glyphicons

Em lựa chọn Bootstrap vì giữa muôn vàn ứng dụng thiết kế website hiện nay, Bootstrap vẫn có khả năng cạnh tranh cao là nhờ những đặc điểm nổi bật sau:

• Chất lượng sản phẩm đầu ra hoàn hảo

Ngôn ngữ lập trình HTML/CSS/JavaScript [3]

HTML - HyperText Markup Language, là loại ngôn ngữ đánh dấu siêu văn bản, thường được sử dụng trong các tài liệu web.Nhưng xét về bản chất, HTML lại không được xem như một ngôn ngữ lập trình, mà nó giống như một ngôn ngữ xác định đâu là ý nghĩa, mục đích và cấu trúc của một tài liệu HTML có nhiệm vụ xây dựng cấu trúc siêu văn bản trên một website, hay khai báo các tập tin kỹ thuật số như hình ảnh, video, nhạc Đồng thời thực hiện dễ dang các công việc sau:

• Thêm tiêu đề, định dạng văn bản, ngắt dòng điều khiển

• Tạo danh sách, nhấn mạnh văn bản, tạo ký tự đặc biệt, chèn hình ảnh và tạo liên kết

• Góp phần xây dựng bảng, điều khiển một số kiểu mẫu

CSS - Cascading Style Sheets, là ngôn ngữ định dạng được sử dụng để mô tả cách trình bày trong các trang web, bao gồm màu sắc, cách bố trí và phông chữ, giúp nội dung thể hiện được phong cách riêng cho tổng thể website CSS sẽ giúp bạn xây dựng nên “bộ mặt” hoàn hảo cho một website, đồng thời cũng mang đến cho nó phần giao diện “ưa nhìn” và trông lôi cuốn hơn trong quá trình giao tiếp Ngoài ra, CSS còn giúp webmaster xác định được phong cách và định nghĩa nội dung web Thông qua đó, nhà lập trình có thể thực hiện nhanh chóng hơn các công việc sau:

 Tạo style và định dạng cho những nội dung được thể hiện dưới dạng văn bản của HTML

 Tiết kiệm thời gian và công sức của lập trình viên nhờ khả năng điều khiển định dạng

 Phân biệt cách hiển trị của trang web và nội dung của trang qua việc căn chỉnh bố cục, màu sắc cũng như font chữ

JavaScript hay còn được viết tắt là JS, đây là một trong những ngôn ngữ lập trình phổ biến được nhiều lập trình viên sử dụng, do Brendan Eich ra mắt vào năm

1995 Nhờ các tính năng nổi bật của mình mà hầu hết các Slideshow, Pop-up quảng cáo, cùng tính năng Autocomplete của Google đều có sự góp sức của JavaScript

JavaScript được sử dụng nhằm mục đích biến những website tĩnh nhàm chán sang trang thái động cuốn hút, đồng thời có khả năng tạo sự tương tác, cải thiện hiệu suất máy chủ và nâng cao trải nghiệm người dùng Nhưng để thực hiện tốt những hoạt động trên, JavaScript phải cần đến sự hỗ trợ của HTML và CSS

JavaScript còn được biết đến là một ngôn ngữ lập trình cho phép các nhà phát triển web thiết kế ra các trang web có khả năng tương tác Nhờ có sự hỗ trợ của JavaScript, mà các công việc trở nên đơn giản và dễ dàng hơn khi thực hiện như:

 Bắt đầu chỉnh sửa với thư viện ảnh, nhằm mục đích tạo nên một bố cục chuyển động

 Hỗ trợ xây dựng các trò chơi, hoạt hình 2D hoặc 3D, ứng dụng cơ sở dữ liệu toàn diện để hoàn thiện website

 Tăng cường các hành vi người dùng và kiểm soát mặc định trình duyệt.

B ACK END

Spring [4] là một framework Java được phát triển để xây dựng các ứng dụng Java Enterprise, cung cấp các giải pháp để giảm thiểu sự phức tạp trong quá trình phát triển và quản lý ứng dụng Java Spring được xây dựng trên nền tảng các nguyên tắc của

Inversion of Control (IoC) và Dependency Injection (DI), giúp cho việc phát triển ứng dụng dễ dàng hơn, tiết kiệm thời gian và có thể đạt được hiệu quả cao hơn

Trong phạm vi của đồ án tốt nghiệp, em đã sử dụng 3 moldules nổi bật nhất được cung cấp bởi Spring Framewok đó là Spring Boot để xây dựng và phát triển APIs, Spring Security để đảm bảo về phân quyền và xác thực, và Spring Data Jpa dùng cho việc kết nối đến các cơ sở dữ liệu và thực hiện truy vấn dữ liệu

Spring Boot là một trong số những module của Spring framework, được phát triển để giúp cho việc xây dựng ứng dụng Spring trở nên đơn giản hơn, nhanh hơn và hiệu quả hơn Spring Boot giúp cho người lập trình có thể tập trung vào việc phát triển các chức năng của ứng dụng mà không phải quan tâm đến cấu hình và thiết lập môi trường Spring Boot ra đời với mục đích loại bỏ những cấu hình phức tạp của Spring, nó không yêu cầu cấu hình XML và nâng cao năng suất cho các nhà phát triển Với sự góp mặt của Spring Boot, hệ sinh thái Spring đã trở nên mạnh mẽ, phổ biến và hiệu quả hơn bao giờ hết

Những ưu điểm mà Spring Boot có thể mang đến như đơn giản hóa cấu hình, xây dựng ứng dụng độc lấp, dễ dãng deploy vì các ứng dụng server (tomcat) được nhúng trực tiếp và ứng dụng để tránh những khó khăn khi triển khai lên môi trường production, các cấu hình tự động hóa, có rất nhiều plugin, số liệu, cấu hình ứng dụng từ bên ngoài Với những ưu điểm trên em đã lựa chọn xây dựng Backend của hệ thống dựa trên Spring Boot

Spring Boot JPA [5] là một bản ghi chi tiết của Java để quản lý dữ liệu quan hệ trong các ứng dụng Java Nó cho phép chúng ta truy cập và lưu trữ dữ liệu giữa các object/class Java và database quan hệ JPA tuân theo Object-Relation

Mapping (ORM) Nó là một tập hợp các interface Nó cũng cung cấp một

API EntityManager runtime để xử lý các câu query và giao dịch trên các object dựa trên database Nó sử dụng ngôn ngữ truy vấn hướng đối tượng độc lập nền tảng JPQL (Java Persistent Query Language)

JPA bao gồm ba lĩnh vực:

 Bản thân API, được định nghĩa trong persistence package

Em chọn Spring Data JPA vì JPA đơn giản hơn, gọn gàng hơn và ít tốn công sức hơn là JDBC, SQL hay ánh xạ viết tay JPA thích hợp cho các ứng dụng phức tạp không tuân theo hiệu suất Ưu điểm chính của JPA so với JDBC là: trong JPA, dữ liệu được biểu thị bằng các object và class trong khi trong JDBC dữ liệu được biểu diễn bằng các bảng và bản ghi Nó sử dụng POJO để biểu diễn dữ liệu liên tục giúp đơn giản hóa việc lập trình database

Spring Security[6] được phát triển bởi SpringSource (hiện thuộc Pivotal) và được xem là một trong những framework bảo mật phổ biến nhất cho ứng dụng Java

Spring Security cung cấp các tính năng xác thực (authentication) và phân quyền

(authorization) cho các ứng dụng, cũng như hỗ trợ các tiêu chuẩn và giao thức bảo mật như HTTPS, OAuth2, JWT, LDAP, SAML, OpenID Connect

Spring Security hoạt động theo mô hình client-server Khi một client gửi một request đến server, server sẽ xác thực người dùng và phân quyền để đảm bảo rằng người dùng chỉ có thể truy cập vào những tài nguyên mà họ được phép truy cập

Cơ chế hoạt động của Spring Security dựa trên cơ chế lọc (filter) và sự kiện (event) để can thiệp vào quá trình xử lý yêu cầu (request) và phản hồi (response) của ứng dụng web, tức là khi một yêu cầu được gửi đến ứng dụng web, nó sẽ được chuyển qua một chuỗi các bộ lọc (filter chain) do Spring Security quản lý Mỗi bộ lọc có một nhiệm vụ cụ thể, như kiểm tra xác thực, kiểm tra phân quyền, điều hướng đến trang đăng nhập hoặc đăng xuất, xử lý các lỗi bảo mật

JSON Web Token (JWT)[7] là một kiểu định dạng dữ liệu được sử dụng để thực hiện xác thực và giao tiếp giữa các hệ thống từ xa JWT là một chuỗi được mã hóa được gửi giữa hai bên (ví dụ, một trình duyệt và một máy chủ web), trong đó có một số thông tin như tên người dùng, quyền hạn và thời hạn sử dụng Bằng cách sử dụng

JWT, một hệ thống có thể gửi yêu cầu xác thực đến một hệ thống khác, và nhận được một JWT trả về mà chứa thông tin về người dùng Hệ thống có thể xác nhận tính hợp lệ của JWT bằng cách giải mã chuỗi và xác minh tính đúng đắn của chữ ký bí mật Thành phần của token:

• Header: phần này chứa thông tin về loại token và thuật toán mã hóa được sử dụng để tạo token Header được mã hóa bằng Base64 URL-safe

• Payload: phần này chứa các thông tin cần thiết để xác thực người dùng hoặc đối tượng được ủy quyền Payload bao gồm các cặp key-value được định nghĩa bởi người tạo token, chẳng hạn như tên người dùng, thời gian hết hạn của token và các thông tin khác Payload được mã hóa bằng Base64 URL-safe

• Signature: phần này chứa chữ ký dựa trên nội dung của header và payload, và sử dụng thuật toán mã hóa được định nghĩa trong header Chữ ký được sử dụng để đảm bảo tính toàn vẹn và xác thực của token Chữ ký được tạo bằng cách mã hóa đầu vào được tạo ra bằng cách kết hợp header, payload và một chuỗi bí mật (secret) Chữ ký được mã hóa bằng thuật toán được định nghĩa trong header.

K ẾT LUẬN

Tóm lại trong chương 3 này, em đã trình bày chi tiết về những công nghệ, những phần mềm, những thư viện hỗ trợ mà em đã sử dụng để thực hiện đồ án này Những lí thuyết trên phần nào sẽ giúp mọi người hình dung rõ hơn về những phần mềm mà em đã sử dụng để xây dựng website này,

THỰC NGHIỆM VÀ ĐÁNH GIÁ

T HIẾT KẾ CẤU TRÚC

Lựa chọn cấu trúc phần mềm Đồ án tốt nghiệp của em được xây dựng theo mô hình kiến trúc Client-Server Mô hình Client-Server là một kiến trúc phân tán với hai phần chính là Client và Server Chức năng của Client là tương tác trực tiếp với người dùng, hiển thị giao diện và thu thập thông tin từ người dùng Trong khi đó,Server có trách nhiệm xử lý các yêu cầu từ Client, thực hiện logic và quản lý cơ sở dữ liệu

Mô hình này có ưu điểm là phía client và server có thể phát triển một cách độc lập, chỉ giao tiếp với nhau thông qua APIs nên việc triển khai client trên nhiều thiết bị (Web, mobile) sẽ không làm ảnh hưởng đến server, tài nguyên cung cấp cho client và server cũng sẽ là độc lập, tránh trường hợp một trong hai bên phải thực hiện quá nhiều tiến trình, giúp cho hệ thống có thể nâng cấp một cách dễ dàng khi số lượng truy cập quá lớn

Hình 4.1: Mô hình kiến trúc Client-Server

Theo kiến trúc Client-Server, em đã xây dựng website với hai thành phần chính: ứng dụng Web (Client) sử dụng ngôn ngữ HTML/Css/JavaScript, famework Bootstrap

Phía server em sử dụng kiến trúc 3 tầng Kiến trúc 3 tầng là một mô hình kiến trúc phần mềm được sử dụng để phát triển các ứng dụng dựa trên mô hình Client- Server Trong kiến trúc này, một ứng dụng được phân thành ba phần chính: Presen- tation layer, Business logic layer, Data access layer và máy chủ (Server) sử dụng framework Java Spring Boot

Hệ thống đã áp dụng kiến trúc 3 tầng như sau:

• Presentation layer (Controller): Tầng này cung cấp các APIs để kết nối với client và cho phép các hệ thống bên ngoài có thể kết nối tới đến hệ thống Sau khi nhận được yêu câu từ client, Các Api Controller sẽ gọi đến các service tương ứng để thực hiện chức năng

• Business logic layer (Service): Tầng này đáp ứng các yêu cầu về nghiệp vụ, xử lý dữ liệu, kiểm tra các dữ liệu gửi đến và cũng như thực hiện logic tương ứng Tầng Service là nơi tính toán, đánh giá tính hợp lệ của thông tin, tương tác với tầng Data và giao tiếp với các server khác nếu cần thiết

• Data Access Layer (Repository): Tầng này sử dụng các repository để giao tiếp với cơ sở dữ liệu Các repositories tương tác trực tiếp với cơ sở dữ liệu, chúng sẽ đọc ghi dữ liệu từ cơ sở dữ liệu và gửi về cho các service

Sau khi hoàn thành quá trình xác định mô hình kiến trúc phần mềm, em đã tiếp tục xây dựng thiết kế tổng quan bằng cách sử dụng biểu đồ phụ thuộc gói, một công cụ hữu ích để mô tả mối quan hệ và sự phụ thuộc giữa các thành phần trong

21 hệ thống Em sẽ mô tả biểu đồ phụ thuộc gói bằng hình dưới đây

Hình 4.3: Biểu đồ phụ thuộc gói

Hệ thống bao gồm các gói được tổ chức theo kiến trúc 3 tầng, với những chức năng riêng biệt Mục đích nhiệm vụ tổng quan từng gói như sau:

• Presentation: Gói để thực hiện giao tiếp với client, trao đổi dữ liệu thông qua các APIs Trong gói này sẽ bao gồm gói Controller chứa tất cả APIs sẽ được cung cấp cho phía client

• Business logic: Là nơi xử lý tất cả yêu cầu về nghiệp vụ Bao gồm các gói Ser- vice là nơi khai báo ra tất cả yêu cầu nghiệp vụ của người dùng ServiceImpl Chứa tất cả logic để xử lý cho từng nghiệp vụ cụ thể DTO chứa các đối tượng là request và response phục vụ cho mục đích trao đổi dữ liệu giữa client và server

• Tầng Data access: Bao gồm thông tin về cơ sở dữ liệu, kết nối và trao đổi dữ liệu với một hệ quản trị cơ sở dữ liệu Entity là nơi định nghĩa ra các table trong RDBMS Repository là nơi định nghĩa các phương thức đọc và ghi dữ liệu trong hệ quản trị cơ sở dữ liệu

• Config bao gồm tất cả cấu hình cần thiết cho hệ thống

• Utils là nơi chứa những chức năng, biến, hằng số có thể được sử dụng và tái sử dụng

Thiết kế chi tiết gói

Tầng presentation chứa gói Controller, gói này sẽ chứa các lớp AccountController, AuthController, CourseController, có nhiệm vụ cung cấp APIs để giao tiếp với client Mỗi lớp sẽ có các APIs liên quan đến một đối tượng nhất định, ví dụ Post- Controller chứa các APIs liên quan đến khóa học như API thêm khóa học, API tìm kiếm khóa học, API xóa khóa học,

Tầng Business logic bao gồm các gói Service và DTO

Gói Service bao gồm các interface như IAccountService, ITeacherService, là nơi khai báo tất cả các yêu cầu nghiệp vụ cần xử lý Trong gói Service chứa gói impl, gói này bao gồm các class được implement từ các interface của gói Service Các classs trong impl có nhiệm vụ xử lý, thực thi các nghiệp vụ đã được khai báo trong các interface

Việc thiết kế các interface như trên giúp đảm bảo nguyên tắc Dependency Inver- sion, tầng Presentation không phụ thuộc trực tiếp vào các class triển khai nghiệp vụ trong gói Service mà phụ thuộc vào các interface

Tiếp đến gói DTO chứa các class có vai trò là các request và response phục vụ cho mục đích trao đổi dữ liệu giữa client và server

Tầng Data access bao gồm gói Repository và Entity.Gói Entity chứa các lớp là các thực thể ánh xạ với các bảng trong cở sở dữ liệu Gói Repository chứa các interface được định nghĩa để tương tác với cơ sở dữ liệu Repository được sử dụng để thực hiện các thao tác CRUD với Entity và cung cấp các phương thức để truy xuất, lọc và sắp xếp dữ liệu

> Tất cả các ràng buộc và mối quan hệ trong biểu đồ giúp hệ thống đạt được các chức năng đề ra và đảm bảo tính chất tái sử dụng và bảo trì cao Các phụ thuộc không bị chồng chéo giữa các tầng dịch vụ, điều này làm cho việc bảo trì và nâng cấp hệ thống dễ dàng hơn trong quá trình phát triển và mở rộng hệ thống trong tương lai Biểu đồ góp phần tạo nên một hệ thống mạch lạc và dễ dàng quản lý, giúp ứng dụng hoạt động hiệu quả và cung cấp trải nghiệm tốt cho người dùng

T HIẾT KẾ CHI TIẾT

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

Hình 4.8: Giao diện đăng kí

4.2.1.3 Màn hình giao diện trang chủ

Hình 4.9: Giao diện trang chủ

Hình 4.10: Giao diện tài liệu

Hình 4.11: Giao diện khóa học

4.2.1.6 Giao diện giỏ hàng thanh toán

Hình 4.12: Giao diện giỏ hàng thanh toán

Thiết kế các lớp Ở hệ thống mà em đang thiết kế, có rất nhiều lớp nên tiếp sau đây em sẽ trình bày một vài thiết kế tiêu biểu

Tên phương thức Đầu vào Đầu ra Chức năng get all ResponseEntity

Gọi ra tất cả các khóa học search request ResponseEntity

Tìm kiếm khóa học phía người dùng getById courseId ResponseEntity

Lấy thông tin khóa học theo Id create request ResponseEntity

Tạo khóa học mới update request ResponseEntity

Cập nhật khóa học delete courseId ResponseEntity

Bảng 4.1:Thiết kế chi tiết lớp CoureController

Tên phương thức Đầu vào Đầu ra Chức năng get all List Gọi ra tất cả các khóa học search request SearchCourseRequest Tìm kiếm khóa học phía người dùng getById courseId CourseDto Lấy thông tin khóa học theo Id create request CourseCreateDTO Tạo khóa học mới update request CourseUpdateDTO Cập nhật khóa học delete courseId BaseResponse Xóa khóa học

Bảng 4.2: Thiết kế chi tiết lớp CourseService Thiết kế cơ sở dữ liệu

Hình 4.15: Cơ sở dữ liệu

Tên Kiểu dữ liệu Mô tả Bắt buộc Ràng buộc id int Id khóa học Có Khóa chính name Varchar(50) Tên khóa học Có

Course_type Varchar(255) Loại khóa học Có

Course_Description Varchar(500) Mô tả khóa học Không image Varchar(50) Hình ảnh khóa học Có

Lesion_number int Số bài học Có price int Giá khóa học Có

Status Varchar(255) Trạng thái khóa học Không created_date Datetime Ngày tạo Không created_by Varchar(255) Người tạo Có updated_at Datetime Ngày cập nhật Không updated_by Varchar(255) Người cập nhật Không

Tên Kiểu dữ liệu Mô tả Bắt buộc Ràng buộc id int Id account Có Khóa chính

Full_name Varchar(50) Tên đầy đủ người dùng

Email Varchar(100) Email người dùng Có username Varchar(50) Tên đăng nhập Có password Varchar(100) Mật khẩu đã mã hóa Có phone Varchar(50) Số điện thoại người dùng

Không role Varchar(255) Vai trò account Không address Varchar(200) Địa chỉ người dùng Có

Status Varchar(255) Trạng thái account Không created_date Datetime Ngày tạo Không created_by Varchar(255) Người tạo Có updated_at Datetime Ngày cập nhật Không updated_by Varchar(255) Người cập nhật Không

Bảng 4.4: Bảng dữ liệu account

Tên Kiểu dữ liệu Mô tả Bắt buộc Ràng buộc id int Id giáo viên Có Khóa chính name Varchar(50) Tên giáo viên Có

Email Varchar(100) Email giáo viên Có password Varchar(100) Mật khẩu đã mã hóa Có phone Varchar(50) Số điện thoại giáo viên Không created_date Datetime Ngày tạo Không created_by Varchar(255) Người tạo Có updated_at Datetime Ngày cập nhật Không updated_by Varchar(255) Người cập nhật Không

Bảng 4.5: Bảng dữ liệu teacher

Tên Kiểu dữ liệu Mô tả Bắt buộc Ràng buộc id int Id đơn hàng Có Khóa chính

Order_status Varchar(50) Trạng thái đơn hàng Có created_date Datetime Ngày tạo Không created_by Varchar(255) Người tạo Có updated_at Datetime Ngày cập nhật Không updated_by Varchar(255) Người cập nhật Không

X ÂY DỰNG ỨNG DỤNG

Thư viện và công cụ sử dụng

Mục đích Công cụ Địa chỉ URL

IDE lập trình(backEnd) IntelliJ IDEA 2021.1.3 https://www.jetbrains.com IDE lập trình(FrontEnd) Visual Studio Code https://code.visualstudio.com/ Quản lý cơ sở dữ liệu MySQL Workbench 8.0 https://dev.mysql.com Test API Postman, Swagger https://www.postman.com

Vẽ biểu đồ UML Astah UML http://astah.net

Thiết kế cơ sở dữ liệu Draw IO https://www.draw.io

Lập trình front-end Html/Css/JavaScript,

Lập trình back-end Spring https://spring.io/

Version control Github https://github.com/

Thiết kế giao diện Balsamiq https://balsamiq.com/

Bảng 4.7: Thư viện và công cụ sử dụng

Với sự khảo sát, tìm tòi, nghiên cứu trong suốt 1 kỳ học, em đã đạt được một số kết quả tích cực nhất định Em đã xây dựng được một hệ thống phù hợp cho riêng sinh viên Đại học Bách Khoa, giúp sinh viên có 1 nơi học tập tin cậy và tiết kiệm thời gian tiền bạc.Hệ thống đã được tích hợp các công nghệ mới; giao diện dễ nhìn, phù hợp với sinh viên Ngoài ra hệ thống còn có tiềm năng lớn để phát triển thêm nhiều chức năng trong tương lai

Minh họa các chức năng chính

Hình 4.16: Màn hình tài liệu Đây là màn hình trang "Tài Liệu" của website mà em đang làm Các chi tiết của màn hình này bao gồm:

- Logo của website và các nút điều hướng như "Trang Chủ", "Khóa Học",

"Blog", "Tài Liệu", "Khuyến Mãi"

- Thông tin liên hệ với số điện thoại và email

- Thanh tìm kiếm cho phép người dùng nhập tên tài liệu để tìm kiếm

- Danh sách tài liệu: các ô tài liệu được hiển thị dưới dạng thẻ màu sắc khác nhau, mỗi thẻ đại diện cho một tài liệu cụ thể Mỗi thẻ bao gồm tiêu đề tài liệu và tên giáo viên biên soạn tài liệu

Tóm lại, màn hình này giúp người dùng dễ dàng tìm kiếm và truy cập các tài liệu học tập cần thiết Tiếp đó nếu muốn tìm kiếm 1 tài liệu cụ thể ví dụ như Giải tích , chúng ta sẽ gõ tên môn học cần tìm kiếm và màn hình sẽ hiển thị như sau:

Hình 4.17: Màn hình tìm kiếm tài liệu

Ta có thể dễ dàng thấy được khi gõ dòng chữ “giải tích” màn hình sẽ hiển thị ra 3 kết quả bao gồm 3 môn giải tích, rất nhanh chóng và dễ dàng đối với người dùng

4.3.3.2 Màn hình Khóa học Đây chính là chức năng chính của wensite mà em đang thiết kế Khi chọn vào “Khóa học” trên thanh công cụ, web sẽ đưa ra cho bạn các lựa chọn môn học như toán, lập trình, tiếng anh,…Ví dụ ta chọn lập trình thì sẽ có màn hình hiển thị như sau:

Hình 4.18: Màn hình Khóa học

Ta sẽ thấy các khóa học lập trình được hiển thị trên đây và tiếp theo muốn đăng kí khóa học nào ta sẽ nhấn vào nút da cam “add to cart” và tiếp đến ta sẽ vào biểu tượng giỏ hang ở góc phải màn hình để tiến hành chi tiết việc mua khóa học

Hình 4.19: Màn hình giỏ hàng Ở đây ta sẽ nhấn vào thanh “chờ thanh toán để mua khóa học

Hình 4.20: Màn hình giỏ hàng

Sau khi nhấn mua hệ thống sẽ hiển thị ra 1 trang thanh toán là mã QR để người dùng chuyển khoản

Hình 4.21: Màn hình QR thanh toán

Và sau khi xác nhận chuyển khoản, quản trị viên sẽ phê duyệt và bạn có thể học khóa học đó bằng cách kiểm tra trên phần “My course” như hình sau:

Hình 4.22: Màn hình đi tới video khóa học

Khi màn hình hiện thị các khóa học như sau thì bạn đã hoàn thành đăng kí khóa học

Hình 4.23: Màn hình video khóa học

Ngoài ra chúng ta có thể bình luận về khóa học, tương tác với nhau thông qua chức năng bình luận dưới mỗi khóa học

Hình 4.24: Màn hình bình luận khóa học

4.3.3.3 Màn hình tin tức(blog)

Ta cũng có thể học hỏi kinh nghiệm từ người đi trước, tìm kiếm cơ hội việc làm, tham gia các hoạt động ngoại khóa, cập nhập nhưng tin tức mới nhất thông qua trang Blog

Hình 4.25: Màn hình tin tức

4.3.3.4 Màn hình trang khuyễn mãi Đối với sinh viên, đa số đều học xa nhà và điều kiện kinh tế không được dư giả thì việc khuyến mãi những khóa học là cần thiết và đây là giao diện của phần khuyễn mãi

Hình 4.26: Màn hình khuyến mại

4.3.3.5 Màn hình thi trực tuyến ( môn Tiếng Anh)

Có rất nhiều giao diện các môn thi khác nhau nên ở đây em xin phép trình bày 1 môn tiêu biểu đó là môn Tiếng Anh

Hình 4.27: Giao diện thi Tiếng Anh trực tuyến

Hình 4.28: Giao diện đề thi số 1 môn Tiếng Anh

K IỂM THỬ

Kiểm thử chức năng đăng kí tài khoản

Thông tin của form đăng ký tài khoản gồm các trường thông tin được mô tả như bảng sau:

1 Họ và tên Bắt buộc nhập, tối đa 50 kí tự

2 Email Không bắt buộc, nếu nhập thì phải đúng định dạng email

3 Tên đăng nhập Bắt buộc nhập, tối đa 50 kí tự và không trùng với tài khoản đã có

4 Mật khẩu Bắt buộc nhập

5 Nhập lại mật khẩu Bắt buộc nhập, phải trùng với mật khẩu

Bảng 4.8: Thông tin đăng kí

Tiếp theo các trường hợp kiểm thử và kết quả kiểm thử sẽ được biểu diễn dưới bảng sau :

STT Chức năng Dữ liệu đầu vào Kết quả mong đợi Kết quả

1 Kiểm tra trường thông tin bắt buộc

Bỏ trống các trường bắt buộc

Thông báo: không được bỏ trống Đạt

2 Nhập email định dạng sai Nhập email: xyz@ Thông báo: không hợp lệ

3 Nhập tài khoản đã tồn tại

Thông báo:tài khoản đã tồn tại Đạt

4 Nhập xác thực mật khẩu không trùng với mật khẩu

Xác thực mật khẩu không đúng Đạt

5 Nhập đầy đủ và đúng định dạng các trường thông tin bắt buộc

Nhập đầy đủ và đúng định dạng các trường thông tin bắt buộc Đăng ký thành công Đạt

Bảng 4.9: Các trường hợp kiểm thử và kết quả thu được

Kiểm thử chức năng đăng khóa học

Thông tin của form đăng ký khóa học gồm trường thông tin được mô tả như bảng sau:

1 Tên khóa học Bắt buộc chọn

2 Mã thanh toán Bắt buộc chọn thanh toán

Bảng 4.10: Thông tin form đăng ký khóa học

Tiếp theo các trường hợp kiểm thử và kết quả kiểm thử sẽ được biểu diễn dưới bảng sau :

STT Chức năng Dữ liệu đầu vào Kết quả mong đợi Kết quả

1 Tìm kiếm khóa học cần đăng kí

Tên khóa học Thông tin khóa học cần đăng kí Đạt

2 Thêm khóa học vào giỏ hàng

Khóa học Giỏ hàng hiện số khóa học đã thêm Đạt

Không có Hiện ra phần mã thanh toán Đạt

4 Xác nhận thanh toán khóa học

Không có Hiện ra phần yêu cầu phê duyệt Đạt

Không có Hiện ra phần video khóa học Đạt

Bảng 4.11: Các trường hợp kiểm thử và kết quả thu được

K ẾT LUẬN

Trong chương này em đã trình bày chi tiết về quá trình phát triển ứng dụng, lựa chọn công nghệ, lựa chọn kiến trúc phần mềm, thiết kế cơ sở dữ liệu, thiết kế gói, lớp; giúp mọi người có thể hình dung rõ hơn về quy trình thiết kế một ứng dụng website là như thế nào Bên cạnh đó, trong chương này em cũng đã trình bày chi tiết về kế hoạch kiểm thử ứng dụng; giúp ta có thể hình dung được ứng dụng sẽ hoạt động ra sao; sinh viên có thể dùng ứng dụng như thế nào cho phù hợp Trong chương tiếp theo, em sẽ trình bày về những giải pháp và đóng gói nổi bật của đồ án tốt nghiệp

CÁC GIẢI PHÁP VÀ ĐÓNG GÓP

G IẢI QUYẾT VẤN ĐỀ TÌM KIẾM TÀI LIỆU

Theo như em đã trình bày ở chương 1, trong thời kì bùng nổ của công nghệ thông tin, việc tìm kiếm tài liệu qua mạng là cực kì phổ biến Thay vì những phương pháp truyền thống như tìm kiếm qua các anh chị khóa trên, mượn trên thư viện, mua ngoài hiệu sách,… thì chỉ với một vài thao tác đơn giản với chiếc máy tính có internet, ta hoàn toàn có thể tìm kiếm được những tài liệu mình cần

Tuy nhiên từ đó lại có một vấn đề khác phát sinh đó là những tài liệu đó có chuẩn với chương trình học của sinh viên Bách Khoa hay không, có update những tài liệu mới nhất không, có mất phí không, …Ngoài ra do tìm kiếm trên nền tảng Internet cụ thể là Google hay Cốc cốc thì sẽ dẫn đến có một lượng dữ liệu khổng lồ Sinh viên sẽ mất rất nhiều thời gian để chọn lựa và chắt lọc những trang web hay những tài liệu phù hợp với sinh viên Bách Khoa

Tóm lại, việc tìm kiếm và chọn lọc tài liệu là một vấn đề quan trọng đối với nhiều sinh viên Bách Khoa Vấn đề này đòi hỏi sự tìm hiểu kỹ lưỡng và chắt lọc phù hợp với chính sinh viên đó

Từ những vấn đề đặt ra trên, em đã định hướng giải pháp là xây dựng một hệ thống mà ở đó sinh viên Bách Khoa Hà Nội có thể dễ dàng tìm kiếm được những tài liệu liên quan đến những môn học của Đại học Bách Khoa Đầu tiên em cần khảo sát chọn lọc những tài liệu phù hợp với đặc thù những môn học của sinh viên Bách Khóa tiếp đến thiết kế một trang riêng về tài liệu trong website này Sau đó thiết kế và liệt kê những tài liệu về những môn học của trường Bách Khoa Để tiết kiệm thời gian và công sức cho việc tìm kiếm tài liệu, người dùng hoàn toàn có thể tìm kiếm nâng cao bằng cách tìm tài liệu theo tên của tài liệu đó

Kết quả đạt được Đầu tiên, em đã thiết kế một trang riêng cho phần Tài liệu Sau khi vào trang Tài liệu ta có thể tìm kiếm tài liệu mà mình mong muốn trên thanh công cụ “Tìm kiếm tài liệu” Ví dụ, em cần tài liệu Giải tích để ôn thi ta có thể gõ “Giải tích” Và ta sẽ chọn tài liệu mà ta cần, ví dụ như Giải tích 1, hệ thống sẽ chuyển bạn đến 1 trang drive, nơi bạn có thể xem và download tài liệu mình cần

Hình 5.1: Màn hình tài liệu giải tích

Ngoài ra, ta hoàn toàn có thể bình luận và đánh giá và góp ý cho phần tài liệu

Hình 5.2: Màn hình bình luận tài liệu

Em đã giúp sinh viên Bách Khoa không cần phải đi sàng lọc, tìm tòi những tài liệu trôi nổi trên mạng, không sát với chương trình Các bạn có thể tìm kiếm trên hệ thống website một cách nhanh chóng và thuận tiện

Trong quá trình giải quyết vấn đề này em đã gặp không ít những khó khăn đặc biệt là đi tìm nguồn tài liệu uy tín, sát với kiến thức giảng dạy và chương trình thi tại Đại học Bách Khoa Hà Nội Kiến thức càng ngày càng nhiều, đề thi càng ngày càng đổi mới, vậy nên nhu cầu tìm kiếm tài liệu chất lượng của sinh viên ngày càng cao Để đáp ứng được nhu cầu đó cũng không hề dễ dàng.

G IẢI QUYẾT VẤN ĐỀ MUA BÁN KHÓA HỌC

Theo như em viết ở chương 1, ngày nay nhu cầu học trực tuyến rất cao đặc biệt là sinh viên Đại học Bách Khoa Hà Nội Lí do là trên trường nhiều thầy cô dạy khá nhanh; những kiến thức trên giảng đường đại học rất khác so với những kiến thức cấp 3; khối lượng kiến thức cũng cực kì khổng lồ dẫn đến việc nhiều sinh viên đặc biệt là sinh viên năm nhất không thể theo kịp

Tiếp theo đó là,nhiều trang web học tập hiện nay rất nhiều nhưng có trang web chất lượng, có trang web không chất lượng, học phí cũng là 1 vấn đề với nhiều sinh

46 viên, ngoài ra những web đó đều chung chung không giành riêng cho 1 trường cụ thể nào nên rất khó cho sinh viên Đại hoc Bách Khoa mua khóa học trên đó, chương trình sẽ không sát với chương trình của Bách Khoa

Từ những vấn đề trên, em đã tìm hiểu và xây dựng 1 trang web giành riêng cho sinh viên đại học Bách Khoa Hà Nội mà ở đó ta có thể mua bán những khóa học như Giải tích, Đại số, những môn cơ sở ngành, chuyên ngành

Vì có rất nhiều khóa học nên em sẽ ví dụ 1 một khóa học Lập trình Đầu tiên ta sẽ tìm kiếm khóa học cần đăng kí và thêm nó vào giỏ hàng Tiếp đến ra sẽ thanh toán khóa học đó để hệ thống trả về cho ta phần video khóa học

Kết quả thử nghiệm cho thấy hệ thống đã hoạt động hiệu quả trong việc mua và thanh toán khóa học.Những điều này sẽ giúp rất nhiều sinh viên đại học Bách Khoa có thể học trực tuyến thông qua việc mua khóa học sát với chương trình trên giảng đường và với giá phù hợp; nhằm nắm vững kiến thức trên giảng đường, hạn chế việc thi lại môn

Vì thời gian và kiến thức có hạn nên em mới thử nghiệm trên localhoot chứ chưa thể có server riêng cho hệ thống.

K ẾT LUẬN

Ở chương này em đã tập trung vào những vấn đề, bài toán đặt ra cần giải quyết và đã trình bày hướng giải quyết phù hợp và trong khả năng của em Tuy còn gặp nhiều khó khăn nhưng em cũng đã giải quyết được phần nào vấn đề mà mình đặt ra giúp sinh viên Đại học Bách Khoa Hà Nội có 1 môi trường học tập qua mạng phù hợp và thuận tiện nhất

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

1.Kết luận Đồ án tốt nghiệp với đề tài "Xây dựng website hỗ trợ học tập" đã đạt được một số các kết quả cụ thể, giải quyết được được những vấn đề đã nêu ra ở bước phân tích Website được xây dựng với các chức năng cơ bản nhất của một website hỗ trợ học tập như: Đăng ký đăng nhập, Tìm kiếm tài liệu, Xem chi tiết tài liệu, quản lý blog, mua bán khóa học, ; các chức năng về quản lý các trường thông tin, phê duyệt khóa học cho quản trị viên Bên cạnh đó, em đã phát triển thêm một số tính năng mới so với các website hỗ trợ học tập hiện có như làm bài tập trực tuyến, tương tác với nhau thông qua bình luận Mặc dù còn chưa được đầy đủ và hoàn chỉnh, nhưng website cũng đã xây dựng được bộ khung cơ bản để việc phát triển và hoàn thiện trở nên dễ dàng Đồng thời, trong quá trình làm báo cáo đồ án em đã tìm hiểu thêm được nhiều kiến thức, rèn luyên, trau dồi được thêm nhiều các kỹ năng như:

• Áp dụng quy trình phát triển sản phẩm theo từng giai đoạn từ phân tích các yêu cầu, thiết kế hệ thống, thực thi đến kiểm thử và triển khai

• Kỹ năng lập kế hoạch, giải quyết vấn đề Xác định được các yếu tố đặc trưng, thứ tự ưu tiên thực hiện

• Kỹ năng tìm kiếm, tra cứu tài liệu

• Kỹ năng soạn thảo latex.

H ƯỚNG PHÁT TRIỂN

Trong phạm vi đồ án, tuy đã có những kết quả cụ thể để giải quyết những yêu cầu đặt ra nhưng do giới hạn thời gian và hạn chế của bản thân nên đồ án vẫn có nhiều chỗ chưa được hoàn thiện Qua đây em xin đề xuất các phương án để phát triển đồ án để được hoàn thiện hơn về chức năng và tối ưu hơn về hiệu năng như

• Bổ sung, tích hợp chức năng làm bài tập trực tuyến vào phần mua bán khóa học để thêm phần chuyên nghiệp

• Hoàn thiện thêm chức năng bình luận và đánh giá cho người dùng sao cho bắt mắt và chuyên nghiệp nhất

Mở rộng website thành một mạng xã hội, giúp sinh viên Bách Khoa tương tác với nhau 1 cách tốt nhất

• Triển khai hệ thống trên AWS thay vì Localhoot

• Phát triển thêm ứng dụng trên CHPlay hoặc AppStore

Ngày đăng: 21/07/2024, 10:46

HÌNH ẢNH LIÊN QUAN

Hình 2.1: Sơ đồ use case tổng quát - Website hỗ trợ học tập
Hình 2.1 Sơ đồ use case tổng quát (Trang 18)
Hình 2.5: Biểu đồ use case phân rã "Làm bài tập online" - Website hỗ trợ học tập
Hình 2.5 Biểu đồ use case phân rã "Làm bài tập online" (Trang 20)
Hình 2.9: Quy trình đăng kí khóa học - Website hỗ trợ học tập
Hình 2.9 Quy trình đăng kí khóa học (Trang 23)
Bảng 2.3: Đặc tả use case tìm kiếm tài liệu   Đặc tả use case mua khóa học - Website hỗ trợ học tập
Bảng 2.3 Đặc tả use case tìm kiếm tài liệu Đặc tả use case mua khóa học (Trang 24)
Bảng 2.4: Đặc tả use case mua bán khóa học - Website hỗ trợ học tập
Bảng 2.4 Đặc tả use case mua bán khóa học (Trang 24)
Hình 3.2: Thư viện Bootstrap - Website hỗ trợ học tập
Hình 3.2 Thư viện Bootstrap (Trang 27)
Hình 3.3: Html/Css/JavaScript  3.3 Back end - Website hỗ trợ học tập
Hình 3.3 Html/Css/JavaScript 3.3 Back end (Trang 28)
Hình 3.5: Spring Security - Website hỗ trợ học tập
Hình 3.5 Spring Security (Trang 30)
Hình 4.1: Mô hình kiến trúc Client-Server - Website hỗ trợ học tập
Hình 4.1 Mô hình kiến trúc Client-Server (Trang 32)
Hình 4.2: Kiến trúc 3 tầng - Website hỗ trợ học tập
Hình 4.2 Kiến trúc 3 tầng (Trang 33)
Hình 4.3: Biểu đồ phụ thuộc gói - Website hỗ trợ học tập
Hình 4.3 Biểu đồ phụ thuộc gói (Trang 34)
Hình 4.5: Tầng Logic - Website hỗ trợ học tập
Hình 4.5 Tầng Logic (Trang 36)
Hình 4.6: Tầng Data - Website hỗ trợ học tập
Hình 4.6 Tầng Data (Trang 37)
Hình 4.10: Giao diện tài liệu - Website hỗ trợ học tập
Hình 4.10 Giao diện tài liệu (Trang 40)
Hình 4.11: Giao diện khóa học - Website hỗ trợ học tập
Hình 4.11 Giao diện khóa học (Trang 41)
Hình 4.12: Giao diện giỏ hàng thanh toán - Website hỗ trợ học tập
Hình 4.12 Giao diện giỏ hàng thanh toán (Trang 42)
Hình 4.13: Lớp CoureController - Website hỗ trợ học tập
Hình 4.13 Lớp CoureController (Trang 42)
Bảng 4.1:Thiết kế chi tiết lớp CoureController - Website hỗ trợ học tập
Bảng 4.1 Thiết kế chi tiết lớp CoureController (Trang 43)
Hình 4.15: Cơ sở dữ liệu - Website hỗ trợ học tập
Hình 4.15 Cơ sở dữ liệu (Trang 44)
4.2.3.1. Bảng dữ liệu Course - Website hỗ trợ học tập
4.2.3.1. Bảng dữ liệu Course (Trang 45)
Hình 4.16: Màn hình tài liệu - Website hỗ trợ học tập
Hình 4.16 Màn hình tài liệu (Trang 48)
Hình 4.18: Màn hình Khóa học - Website hỗ trợ học tập
Hình 4.18 Màn hình Khóa học (Trang 49)
Hình 4.23: Màn hình video khóa học - Website hỗ trợ học tập
Hình 4.23 Màn hình video khóa học (Trang 51)
Hình 4.25: Màn hình tin tức - Website hỗ trợ học tập
Hình 4.25 Màn hình tin tức (Trang 52)
Hình 4.27: Giao diện thi Tiếng Anh trực tuyến - Website hỗ trợ học tập
Hình 4.27 Giao diện thi Tiếng Anh trực tuyến (Trang 53)
Hình 4.28: Giao diện đề thi số 1 môn Tiếng Anh - Website hỗ trợ học tập
Hình 4.28 Giao diện đề thi số 1 môn Tiếng Anh (Trang 54)
Bảng 4.9: Các trường hợp kiểm thử và kết quả thu được - Website hỗ trợ học tập
Bảng 4.9 Các trường hợp kiểm thử và kết quả thu được (Trang 55)
Bảng 4.11: Các trường hợp kiểm thử và kết quả thu được - Website hỗ trợ học tập
Bảng 4.11 Các trường hợp kiểm thử và kết quả thu được (Trang 56)
Hình 5.1: Màn hình tài liệu giải tích - Website hỗ trợ học tập
Hình 5.1 Màn hình tài liệu giải tích (Trang 58)
w