Website hỗ trợ học tập

đề 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,..

ĐẠI HỌC BÁCH KHOA HÀ NỘI

ĐỒ ÁN TỐT NGHIỆP Xây dựng website hỗ trợ học tập

Nguyễn Thanh Nhật Huy

huy.ntn182584@sis.hust.edu.vn

Ngành Kỹ thuật Điện tử-Viễn thông

Giảng viên hướng dẫn: TS.Trần Thị Ngọc Lan

Chữ kí GVHD

HÀ NỘI, 07/2024

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

TRƯỜNG ĐIỆN – ĐIỆN TỬ

ĐÁNH GIÁ ĐỒ ÁN TỐT NGHIỆP

(DÀNH CHO CÁN BỘ HƯỚNG DẪN)

Tên đề tài: Xây dựng website hỗ trợ học tập

Họ tên SV: Nguyễn Thanh Nhật Huy MSSV: 20182584 Cán bộ hướng dẫn: TS Trần Thị Ngọc Lan

1

Thái độ làm việc (2,5 điểm)

Nghiêm túc, tích cực và chủ động trong quá trình làm ĐATN Hoàn thành đầy đủ và đúng tiến độ các nội dung được GVHD giao

2

Kỹ năng viết quyển ĐATN (2

điểm)

Trình bày đúng mẫu quy định, bố cục các chương logic và hợp lý: Bảng biểu, hình ảnh rõ ràng, có tiêu đề, được đánh số thứ tự và được giải thích hay đề cập đến trong đồ án, có căn lề, dấu cách sau dấu chấm, dấu phẩy, có mở đầu chương và kết luận chương, có liệt kê tài liệu tham khảo và có trích dẫn, v.v

Kỹ năng diễn đạt, phân tích, giải thích, lập luận: Cấu trúc câu rõ ràng, văn phong khoa học, lập luận logic và có cơ sở, thuật ngữ chuyên ngành phù hợp, v.v

3

Nội dung và kết quả đạt

được (5 điểm)

Nêu rõ tính cấp thiết, ý nghĩa khoa học và thực tiễn của đề tài, các vấn đề và các giả thuyết, phạm vi ứng dụng của đề tài Thực hiện đầy đủ quy trình nghiên cứu: Đặt vấn đề, mục tiêu đề ra, phương pháp nghiên cứu/ giải quyết vấn đề, kết quả đạt được, đánh giá và kết luận

Nội dung và kết quả được trình bày một cách logic và hợp lý, được phân tích và đánh giá thỏa đáng Biện luận phân tích kết quả mô phỏng/ phần mềm/ thực nghiệm, so sánh kết quả đạt được với kết quả trước đó có liên quan

Chỉ rõ phù hợp giữa kết quả đạt được và mục tiêu ban đầu đề ra đồng thời cung cấp lập luận để đề xuất hướng giải quyết có thể thực hiện trong tương lai Hàm lượng khoa học/ độ phức tạp cao, có tính

mới/tính sáng tạo trong nội dung và kết quả đồ án

4

Điểm thành tích (1 điểm)

Có bài báo KH được đăng hoặc chấp nhận đăng/ đạt giải SV NCKH giải 3 cấp Trường trở lên/ Các giải thưởng khoa học trong nước, quốc tế từ giải

3 trở lên/ Có đăng ký bằng phát minh sáng chế (1 điểm)

Được báo cáo tại hội đồng cấp Trường trong hội nghị SV NCKH nhưng không đạt giải từ giải 3 trở lên/ Đạt giải khuyến khích trong cuộc thi khoa học trong nước, quốc tế/ Kết quả đồ án là sản phẩm ứng dụng có tính hoàn thiện cao, yêu cầu khối lượng thực hiện lớn

(0,5 điểm)

Điểm tổng các tiêu chí: Điểm hướng dẫn:

Cán bộ hướng dẫn

(Ký và ghi rõ họ tên)

ĐẠI HỌC BÁCH KHOA HÀ NỘITRƯỜNG ĐIỆN – ĐIỆN TỬ ĐÁNH GIÁ ĐỒ ÁN TỐT NGHIỆP

(DÀNH CHO CÁN BỘ PHẢN BIỆN)

Tên đề tài: Xây dựng website hỗ trợ học tập

Họ tên SV: Nguyễn Thanh Nhật Huy MSSV: 20182584

Cán bộ phản biện : ………

STT

Tiêu chí

(Điểm tối đa)

tiêu chí

1

Trình bày quyển ĐATN

(4 điểm)

Đồ án trình bày đúng mẫu quy định, bố cục các chương logic và hợp lý: Bảng biểu, hình ảnh rõ ràng, có tiêu đề, được đánh số thứ tự và được giải thích hay đề cập đến trong đồ án, có căn lề, dấu cách sau dấu chấm, dấu phẩy, có mở đầu chương và kết luận chương, có liệt kê tài liệu tham khảo và có trích dẫn, v.v

Kỹ năng diễn đạt, phân tích, giải thích, lập luận: cấu trúc câu rõ ràng, văn phong khoa học, lập luận logic và có cơ sở, thuật ngữ chuyên ngành phù hợp, v.v

2

Nội dung và kết

quả đạt được

(5,5 điểm)

Nêu rõ tính cấp thiết, ý nghĩa khoa học và thực tiễn của đề tài, các vấn đề và các giả thuyết, phạm vi ứng dụng của đề tài Thực hiện đầy đủ quy trình nghiên cứu: Đặt vấn đề, mục tiêu đề ra, phương pháp nghiên cứu/ giải quyết vấn đề, kết quả đạt được, đánh giá và kết luận Nội dung và kết quả được trình bày một cách logic và hợp lý, được phân tích và đánh giá thỏa đáng Biện luận phân tích kết quả mô

phỏng/ phần mềm/ thực nghiệm, so sánh kết quả đạt được với kết quả trước đó có liên quan

Chỉ rõ phù hợp giữa kết quả đạt được và mục tiêu ban đầu đề ra đồng thời cung cấp lập luận để đề xuất hướng giải quyết có thể thực hiện trong tương lai Hàm lượng khoa học/ độ phức tạp cao, có tính mới/ tính sáng tạo trong nội dung và kết quả đồ án

3

Điểm thành tích

(1 điểm)

Có bài báo KH được đăng hoặc chấp nhận đăng/ đạt giải SV NCKH giải 3 cấp Trường trở lên/ Các giải thưởng khoa học trong nước, quốc tế

từ giải 3 trở lên/ Có đăng ký bằng phát minh sáng chế (1 điểm)

Được báo cáo tại hội đồng cấp Trường trong hội nghị SV NCKH nhưng không đạt giải từ giải 3 trở lên/ Đạt giải khuyến khích trong cuộc thi khoa học trong nước, quốc tế/ Kết quả đồ án là sản phẩm ứng dụng có tính hoàn thiện cao, yêu cầu khối lượng thực hiện lớn

(0,5 điểm)

Điểm tổng các tiêu chí: Điểm phản biện:

Cán bộ phản biện

(Ký và ghi rõ họ tên)

LỜI NÓI ĐẦU

Đồ án tốt nghiệp với đề tài "Xây dựng website hỗ trợ học tập" chính là bước đi cuối cùng của em trên con đường học tập và tích lũy kiến thức tại Đại học Bách Khoa Hà Nội

Trong thời đại công nghệ thông tin phát triển như hiện nay, nhu cầu học tập và tìm kiếm tài liệu trực tuyến ngày càng tăng cao Việc sử dụng Internet và các công cụ kỹ thuật số không chỉ giúp tiếp cận nguồn tài liệu phong phú mà còn tạo điều kiện thuận lợi cho việc trao đổi, chia sẻ kiến thức giữa các sinh viên và giảng viên Nhận thấy tầm quan trọng của vấn đề này, em đã lựa chọn đề tài "Xây dựng website hỗ trợ học tập" cho đồ án tốt nghiệp của mình

Mục tiêu của đề tài là phát triển một nền tảng trực tuyến giúp sinh viên dễ dàng truy cập vào tài liệu học tập, mua khóa học, và giao lưu, trao đổi kiến thức với nhau Website sẽ cung cấp các tính năng như tìm kiếm tài liệu, xem chi tiết khóa học, đánh giá và nhận xét tài liệu, đồng thời đảm bảo tính bảo mật và quyền riêng tư của người dùng thông qua các cơ chế quản lý quyền truy cập và xác thực

Để hoàn thành đồ án này, em đã nhận được sự hỗ trợ và hướng dẫn tận tình từ các thầy cô, bạn bè và gia đình

Trước hết em xin gửi lời cảm ơn chân thành đến giảng viên hướng dẫn của em là TS Trần Thị Ngọc Lan là cô giáo chủ nhiệm lớp Điện tử 07-K63 mà em theo học cũng là người luôn đồng hành, đưa ra lời khuyên giúp em có thể hoàn thiện đồ án một cách tốt nhất Em cũng xin chân thành cảm ơn các thầy, cô Trường Đại học Bách khoa Hà Nội đã truyền đạt những bài học những kiến thức bổ ích trong suốt những năm học qua

Cuối cùng, em muốn bày tỏ lòng biết ơn sâu sắc tới gia đình và bạn bè, những người đã luôn ủng hộ và tin tưởng em trong suốt thời gian qua Trong quá trình thực hiện đồ án, do hạn chế về thời gian và kinh nghiệm, em không thể tránh khỏi những thiếu sót Em rất mong nhận được những góp ý từ các thầy cô và bạn bè để giúp em hoàn thiện đồ án này một cách tốt nhất

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

LỜI CAM ĐOAN

Em là Nguyễn Thanh Nhật Huy, mã số sinh viên 20182584, sinh viên lớp Điện tử 07, khóa 63 Trong kì 2023.2 này em đã được giảng viên TS Trần Thị Ngọc Lan

hướng dẫn làm đồ án tốt nghiệp với đề tài “Xây dựng website hỗ trợ học tập” Em xin cam đoan rằng đồ án tốt nghiệp với đề tài "Xây dựng website hỗ trợ học tập" là kết quả

của quá trình nghiên cứu, học tập và làm việc nghiêm túc của bản thân em dưới sự hướng dẫn của các giảng viên hướng dẫn Các thông số, các dữ liệu, … được trình bày ở đồ án đều hoàn toàn trung thực, phản ánh đúng với những gì mà em đã làm được Mọi thông tin trích dẫn đều đã tuân thủ các quy định về sở hữu trí tuệ; các tài liệu tham khảo đều được liệt kê rõ ràng ở phần Tài liệu tham khảo

Em xin hoàn toàn chịu trách nhiệm với những nội dung được viết trong báo cáo đồ án tốt nghiệp này

Hà Nội, ngày 07, tháng 07, năm 2024

Người cam đoan

Nguyễn Thanh Nhât Huy

MỤC LỤC

XÂY DỰNG WEBSITE HỖ TRỢ HỌC TẬP I DANH MỤC HÌNH ẢNH I DANH MỤC BẢNG BIỂU III DANH MỤC KÝ HIỆU VÀ CHỮ VIẾT TẮT IV

CHƯƠNG 1 GIỚI THIỆU ĐỀ TÀI 1

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

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

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

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

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

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

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

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

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

2.3ĐẶC TẢ CHỨC NĂNG 10

Đặc tả use case tìm kiếm tài liệu 10

Đặc tả use case mua khóa học 11

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

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

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

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

4.2THIẾT KẾ CHI TIẾT 25

Thiết kế giao diện 25

4.2.1.1 Giao diện đăng nhập 25

4.2.1.2 Giao diện đăng kí 25

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

4.2.1.4 Giao diện tài liệu 27

4.2.1.5 Giao diện khóa học 28

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

4.3.3.4 Màn hình trang khuyễn mãi 40

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

4.4KIỂM THỬ 41

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

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

4.5KẾT LUẬN 43

CHƯƠNG 5 CÁC GIẢI PHÁP VÀ ĐÓNG GÓP 44

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

DANH MỤC HÌNH ẢNH

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

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

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

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

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

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

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

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

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

Hình 3.1: Hệ quản trị dữ liệu MySQL 13

Hình 3.2: Thư viện Bootstrap 14

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

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

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

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

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

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

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

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

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

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

DANH MỤC BẢNG BIỂU

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

Bảng 2.2: Danh sách đặc tả chức năng 10

Bảng 2.3: Đặc tả use case tìm kiếm tài liệu 11

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

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

Bảng 4.2: Thiết kế chi tiết lớp CourseService 31

Bảng 4.3: Dữ liệu Course 32

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

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

Bảng 4.6: Bảng dữ liệu order 34

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

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

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

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

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

DANH MỤC KÝ HIỆU VÀ CHỮ VIẾT TẮT

API Application Programming Interface (Giao diện lập trình ứng dụng)

HTML Hypertext Markup Language

(Create - Read -Update - Delete) JSON JavaScript Object Notation

(kiểu định dạng dữ liệu) URL Uniform Resource Locator

(trình định vị tài nguyên thống nhất)

(nền tảng điện toán đám mây)

TÓM TẮT NỘI DUNG ĐỒ ÁN

Vấn đề học tập tại Đại học Bách Khoa Hà Nội là vấn đề mà bất cứ một sinh viên nào cũng gặp phải, đặc biệt là sinh viên năm nhất.“Website hỗ trợ sinh viên” nhằm giải quyết các vấn đề thường gặp cho sinh viên Đại học Bách Khoa Hà Nội trong việc học tập Nó cung cấp cho sinh viên của trường những chức năng như tìm kiếm tài liệu, đề thi; tham gia các khóa học do website cung cấp; chia sẻ tài liệu đã học và những kinh nghiệm của bản thân;…

Hệ thống cơ bản đã đáp ứng được phần nào nhu cầu học tập của sinh viên Website giúp những sinh viên khó khăn trong việc theo kịp tiến độ học tập trên lớp có thể nắm bắt được những kiến thức cần thiết thông qua những khóa học, tài liệu; giúp sinh viên tiết kiệm thời gian và chi phí trong việc tìm kiếm tài liệu ôn tập và cũng là nơi để sinh viên có thể chia sẻ những kiến thức và kinh nghiệm trong quá trình học tập

Em hy vọng website này sẽ được sử dụng rộng rãi và giúp ích cho nhiều sinh viên, vì nókhông chỉ giải quyết được các vấn đề đã đặt ra mà còn mở ra nhiều hướng phát triển tiềm năng, góp phần nâng cao chất lượng học tập tại các trường đại học Bên cạnh đó, thông qua đề tài này, em đã vận dụng được các kiến thức, kỹ năng đã được học, đồng thời rèn luyện và tìm hiểu thêm nhiều kỹ năng khác trong việc xây dựng và phát triển website, kỹ năng quản lý thời gian và lên kế hoạch cũng như khả năng giải quyết các vấn đề phát sinh trong quá trình phát triển hệ thống

CHƯƠNG 1 GIỚI THIỆU ĐỀ TÀI

Trong chương 1 này en sẽ trình bày các thông tin giới thiệu về bài toán xây dựng website hỗ trợ học tập Nội dung chương bao gồm việc trình bày vấn đề thực tế mà bài toán đề cập đến và giải thích tại sao đề tài này được chọn để thực hiện Sau đó, đề ra mục tiêu cụ thể và phạm vi của đề tài, xác định rõ ràng những gì mà đề tài muốn đạt được và phạm vi nghiên cứu của nó Tiếp đến, em sẽ trình bày các định hướng giải pháp được đề xuất để giải quyết vấn đề đã được đề cập trước đó

1.1 Đặ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

1.2 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

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

1.3 Đị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à 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

Back-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

1.4 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ì

1.5 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

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

Trong Chương 1, em đã giới thiệu tổng quan về đồ án, nêu rõ các vấn đề cần giải quyết và định hướng giải pháp Dựa trên những cơ sở này, chương 2 sẽ trình bày về quá trình khảo sát và trải nghiệm thực tế qua việc tìm hiểu và sử dụng các website quản lý tài liệu hiện nay Em sẽ phân tích hiện trạng để xây dựng tổng quan các chức năng của hệ thống Tiếp đó, em sẽ trình bày biểu đồ use case tổng quát, các use case phân rã chức năng, và thực hiện đặc tả các biểu đồ use case phân rã chức năng

2.1 Khả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

Đâ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

2.2 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

2.3 Đặc tả chức năng

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

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

Mục đích sử dụng

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

Luồng hoạt động chính

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õ

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

Mục đích sử dụng

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

Luồng hoạt động chính

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

Hành động

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

2.4 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

2.5 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

CHƯƠNG 3 CÔNG NGHỆ SỬ DỤNG

Trong chương 2, em đã trình bày phân tích khảo sát thực tế, thực hiện xác định use case tổng quan, đặc tả các use case và nêu quy trình nghiệp vụ của hệ thống Tiếp theo ở chương 3, em sẽ trình bày nội dung chi tiết các công nghệ, nền tảng được sử dụng để giải quyết các vấn đề bài toán và những lý do lựa chọn công nghệ đó Trong phần trước, em đã giới thiệu tổng quan về mô hình client-server mà hệ thống của em sử dụng Bây giờ, em sẽ tiến vào các chi tiết hơn về các công nghệ được áp dụng trong cả phía backend và frontend

3.1 Hệ quản trị cơ sở dữ liệu MySQL

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

Hình 3.1: Hệ quản trị dữ liệu MySQL

3.2 Front end

Thư viện Bootstrap

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

Hình 3.2: Thư viện Bootstrap

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:

• Dễ dàng thao tác • Tùy chỉnh dễ dàng

• Chất lượng sản phẩm đầu ra hoàn hảo • Độ tương thích cao

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

3.2.2.1 HTML

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

3.2.2.2 CSS

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ữ

3.2.2.3 Javascript

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

Hình 3.3: Html/Css/JavaScript

3.3 Back 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

Hình 3.4: Spring Framework

Spring Boot

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 Data JPA

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)

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

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

Hình 3.5: Spring Security

Json Web Token (JWT)

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