Spring là một Framework phát triển các ứng dụng Java được sử dụng bởi hàng triệu lập trình viên. Nó giúp tạo các ứng dụng có hiệu năng cao, dễ kiểm thử, sử dụng lại code… 2 Spring nhẹ và trong suốt (nhẹ: kích thước nhỏ, version cơ bản chỉ khoảng 2MB; trong suốt: hoạt động một cách trong suốt với lập trình viên).Spring là một mã nguồn mở, được phát triển, chia sẻ và có cộng đồng người dùng rất lớn. Spring Framework được xây dựng dựa trên 2 nguyên tắc design chính là: Dependency Injection và Aspect Oriented Programming.Những tính năng core (cốt lõi) của Spring có thể được sử dụng để phát triển Java Desktop, ứng dụng mobile, Java Web. Mục tiêu chính của Spring là giúp phát triển các ứng dụng J2EE một cách dễ dàng hơn dựa trên mô hình sử dụng POJO (Plain Old Java Object)
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN WEBSITE HỌC TIẾNG ANH KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN ThS NGUYỄN HỮU TRUNG LỜI CẢM ƠN Lời nhóm xin phép gửi lời cảm ơn chân thành sâu sắc đến với Khoa Công Nghệ Thông Tin – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh tạo điều kiện cho nhóm chúng em học tập, phát triển tảng kiến thức sâu sắc thực đề tài Bên cạnh nhóm chúng em xin gửi đến thầy Nguyễn Hữu Trung lời cảm ơn sâu sắc biết ơn thầy giúp đỡ nhận lời hướng dẫn nhóm chúng em thực luận văn tốt nghiệp Trải qua trình dài học tập thực đề tài thời gian qua Thầy tận tâm bảo nhiệt tình nhóm chúng em suốt trình từ lúc bắt đầu kết thúc đề tài Với kinh nghiệm chuyên môn với kinh nghiệm thực tế thầy cô Tập thể thầy cô Khoa Công Nghệ Thông Tin đặc biệt thầy Nguyễn Hữu Trung giúp cho chúng em tiếp thu thêm nhiều kiến thức kinh nghiệm khổng lồ chuyên ngành thực dự án nhằm giúp nhiều cho công việc học vấn tương lai Đặc biệt điều giúp thúc chúng em hoàn thành đề tài Chúng em thật cảm ơn khắc ghi kiến thức Đây hành trang vô lớn chúng em trước bước sống Tuy nhiên, kiến thức lúc vô tận với khả chun mơn cịn nhiều hạn chế chúng em ln cố gắng để hồn thành cách tốt Vì việc xảy thiếu sót chúng em điều khó tránh khỏi q trình học hỏi thực luận văn Chúng em hi vọng nhận thơng cảm nhận góp ý tận tình q báu q thầy (cơ) Thơng qua chúng em có thể rút học kinh nghiệm, song với hồn thiện nâng cấp lại sản phẩm tốt Sau tất cả, lần chúng em xin gửi lời cảm ơn sâu sắc đến với thầy Nguyễn Hữu Trung tập thể quý thầy, cô Khoa Công Nghệ Thông Tin – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh tất điều thầy cô gửi gắm dạy chúng em Nhóm xin kính chúc thầy ln có sức khỏe thật tốt thành công sống Trường ĐH Sư Phạm Kỹ Thuật TP.HCM Khoa: Công nghệ thông tin ĐỀ CƯƠNG LUẬN VĂN Chuyên ngành: Công nghệ phần mềm Tên đề tài: Website học tiếng Anh Giáo viên hướng dẫn: Th.S Nguyễn Hữu Trung Nhiệm vụ luận văn: Lý thuyết: ● Spring Boot, ReactJS, MySQL, Spring Security, Three-Tier Architecture Thực hành: ● Sử dụng Spring Boot để cung cấp API cho Mobile Web Admin ● Xây dựng sản phẩm đề tài theo kiến trúc (Three-Tier Architecture) ● Sử dụng Spring Security để đảm bảo độ bảo mật xác thực người dùng cho hệ thống ● Sử dụng ReactJS làm tảng để xây dựng giao diện cho sản phẩm đề tài ● Sử dụng MySQL để lưu trữ database ● Xây dựng chức sau cho sản phẩm: o Trang giáo viên: ▪ Đăng nhập, đăng ký, đăng xuất tài khoản ▪ Quản lý tài khoản thân ▪ Học hỏi thảo luận qua blog ▪ Tham gia khóa học, làm tập ▪ Luyện tập qua đề danh sách từ ghi nhớ o Trang học viên: ▪ Đăng nhập, đăng ký, đăng xuất tài khoản ▪ Quản lý tài khoản người dùng ▪ Quản lý khóa học ▪ Quản lý học o Trang Administrator: ▪ Quản lý sở liệu ▪ Cung cấp lịch sử mua hàng người dùng ▪ Cung cấp tính phản hồi ý kiến đánh giá cho người dùng ▪ Thống kê lượng mua hàng truy cập sản phẩm Đề cương viết luận văn: MỤC LỤC PHẦN MỞ ĐẦU Tính cấp thiết đề tài Mục tiêu đề tài Phương pháp thực PHẦN NỘI DUNG Cơ sở lý thuyết Khảo sát, phân tích, thiết kế Mơ hình hóa u cầu Thiết kế phần mềm Thiết kế giao diện xử lý Cài đặt kiểm thử ứng dụng PHẦN KẾT LUẬN Những kết đạt Ưu điểm nhược điểm Thuận lợi Khó khăn Hướng phát triển DANH SÁCH TÀI LIỆU THAM KHẢO KẾ HOẠCH THỰC HIỆN STT Thời gian Công việc Tổng hợp chức website Xây dựng mơ hình dự án thông qua lược đồ Xây dựng database phù hợp với chức Thiết kế UI cho website Xây dựng UI cho học sinh Xây dựng API phục vụ chức cho học sinh như: Mua khóa học, tham gia học, luyện đề, viết blog… Xây dựng UI cho giáo viên Xây dựng API phục vụ chức cho giáo viên như: Quản lý khóa học, quản lý học… Xây dựng UI cho admin Xây dựng API phục vụ chức như: quản lý người dùng, quản lý giao dịch… Tiến hành kết hợp Back-end Front-end Tiến hành tìm lỗi sửa lỗi Tiến hành viết báo cáo 10 Hoàn thành báo cáo hoàn chỉnh hệ thống Người viết đề cương Ý kiến giáo viên hướng dẫn MỤC LỤC LỜI CẢM ƠN ĐỀ CƯƠNG LUẬN VĂN .2 DANH SÁCH HÌNH .9 DANH SÁCH BẢNG 12 PHẦN MỞ ĐẦU 14 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 14 MỤC TIÊU ĐỀ TÀI 14 PHƯƠNG PHÁP THỰC HIỆN 14 PHẦN NỘI DUNG 15 CHƯƠNG 1.CƠ SỞ LÝ THUYẾT 15 1.1 Spring Framework 15 1.2 ReactJS 16 1.3 MySQL 17 CHƯƠNG KHẢO SÁT, PHÂN TÍCH, THIẾT KẾ 18 2.1 Phân tích trạng 18 2.2 Khảo sát số phần mềm 19 2.3 Phân tích yêu cầu dự án 23 2.4 Danh sách yêu cầu chức nghiệp vụ 23 2.5 Danh sách yêu cầu chức hệ thống 25 2.6 Danh sách yêu cầu phi chức 25 CHƯƠNG MÔ HÌNH HĨA U CẦU .27 3.1 Lược đồ Usecase .27 CHƯƠNG THIẾT KẾ PHẦN MỀM 64 4.1 Lược đồ .64 4.2 Lược đồ ERD 76 CHƯƠNG THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 77 5.1 Trang chủ 77 5.2 Đăng nhập .78 5.3 Đăng ký 80 5.4 Chi tiết khóa học .82 5.5 Trang khóa học user mua 84 5.6 Trang học chi tiết 85 5.7 Thay đổi thông tin user 87 5.8 Thay đổi ảnh đại diện user 89 5.9 Thay đổi mật 90 5.10 Khóa tài khoản 92 5.11 Lịch sử mua hàng 93 5.12 Quên mật 95 5.13 Danh sách khóa học 96 5.14 Chỉnh sửa thông tin cá nhân 97 5.15 Đổi mật .98 5.16 Danh sách giảng viên 99 5.17 Trang chủ ứng dụng quản lý giáo viên 100 5.18 Quản lý giảng theo khóa học 102 5.19 Thêm giảng 105 5.20 Thêm tập theo giảng .106 5.21 Chỉnh sửa giảng 107 5.22 Chỉnh sửa tập theo giảng 108 5.23 Báo cáo thống kê 109 5.24 Quản lý khóa học 111 5.25 Thêm khóa học 112 5.26 Chỉnh sửa khóa học 114 5.27 Quản lý giảng viên 116 5.28 Danh sách blog 117 5.29 Chi tiết Blog 118 5.30 Tạo Blog .120 5.31 Tạo Flashcard 121 5.32 Danh sách từ vựng theo flashcard 122 5.33 Luyện tập flashcard 124 5.34 Danh sách lịch sử làm thi 126 5.35 Chi tiết làm thi 127 5.36 Danh sách đề thi 129 5.37 Chọn chi tiết phần thi 130 5.38 Làm thi 131 CHƯƠNG CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 132 6.1 Cài đặt 132 6.2 Kiểm thử ứng dụng .136 PHẦN KẾT LUẬN .140 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC 140 1.1 Về kiến thức 140 1.2 Về đề tài 140 1.3 Về kinh nghiệm 140 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM 141 2.1 Ưu điểm 141 2.2 Nhược điểm 141 THUẬN LỢI 141 KHÓ KHĂN 141 HƯỚNG PHÁT TRIỂN 141 TÀI LIỆU THAM KHẢO 143 DANH SÁCH HÌNH Hình 1.1 Logo Spring Framework [1] 15 Hình 1.2 Logo ReactJS 16 Hình 1.3 Logo MySQL 17 Hình 2.1 Trang đăng nhập 19 Hình 2.2 Trang chủ 20 Hình 2.3 Trang học 21 Hình 2.4 Trang luyện tập 22 Hình 2.5 Trang quản lý tài khoản 22 Hình 3.1 Lược đồ Usecase 27 Hình 3.2 Usecase Quản lý tài khoản 28 Hình 3.3 Usecase Quản lý khóa học 29 Hình 3.4 Usecase quản lý Bài học 30 Hình 3.5 Usecase quản lý người dùng 30 Hình 3.6 Usecase Quản lý tốn 31 Hình 3.7 Usecase Quản lý tốn 32 Hình 4.1 Lược đồ đăng ký 64 Hình 4.2 Lược đồ đăng nhập 65 Hình 4.3 Lược đồ chỉnh sửa thơng tin cá nhân 66 Hình 4.4 Lược đồ quên mật 67 Hình 4.5 Lược đồ tạo khóa học 68 Hình 4.6 Lược đồ tạo học 69 Hình 4.7 Lược đồ tạo tập 70 Hình 4.8 Lược đồ tạo đề 71 Hình 4.9 Lược đồ luyện đề 72 Hình 4.10 Lược đồ tạo blog 73 Hình 4.11 Lược đồ tạo blog 74 Hình 4.12 Lược đồ mua khóa học 75 Hình 4.13 Lược đồ ERD 76 Hình 5.1 Màn hình trang chủ 77 Hình 5.2 Màn hình trang đăng nhập 78 Hình 5.3 Màn hình trang đăng ký 80 5.37 Chọn chi tiết phần thi Hình 5.37 Màn hình chi tiết chọn luyện thi Bảng 5.37 Mô tả hình chi tiết chi tiết chọn luyện thi STT Tên Loại Ghi Nút xem thông tin Button Khi nhấn vào chuyển tới phần thông tin Nút xem đáp án Button Khi nhấn vào chuyển tới trang đáp án Thông tin đề Text Gợi ý làm Text Chọn phần làm Chọn thời gian làm Select Khi nhấn vào chọn thời gian làm Nút luyện thi Button Khi ấn vào chuyển tới trang luyện thi Input Checkbox 132 Khi tích vào làm phần tích 5.38 Làm thi Hình 5.38 Màn hình làm luyện thi Bảng 5.38 Mơ tả hình làm luyện thi STT Tên Loại Ghi Nút thoát làm Button Khi nhấn chuyển tới trang danh sách đề Chuyển phần làm Button Khi nhấn vào chuyển tới phần làm Thơng tin đề Text Câu hỏi Text Chọn đáp án Input Radio Khi tích vào chọn đáp án Nút Button Khi nhấn vào chuyển qua phần Thời gian làm Text Nút nộp Button Khi nhấn vào nộp thi Câu hỏi List item Khi nhấn chuyển tới câu hỏi 133 CHƯƠNG CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 6.1 Cài đặt 6.1.1 Back-end Yêu cầu phần mềm ● Phần mềm Intellij IDEA 2022.0.1 trở lên ● Java 17.0.4 Các bước cài đặt API ● Tải giải nén thư mục chứa Project Backend ● Mở Project Intellij IDEA Hình 66 Cài đặt backend ● Tiến hành chạy Hình 6.1 Cài đặt API 6.1.2 Front-end ● Cài đặt Visual Studio Code từ trang chủ thức (version 1.74): 134 Hình 6.2 Màn hình trang tải Visual Studio Code https://code.visualstudio.com/docs/setup/setup-overview ❖ Cài đặt biến môi trường để chạy Visual Studio Code: ⮚ Tải Node js Hình 6.3 Tải Node.js ● Cài đặt trình biên dịch Visual Studio Code: 135 Hình 6.4 Cài trình biên dịch Visual Studio Code ● Cài đặt extension cho Visual Studio Code: Hình 6.5 Cài extension cho Reactjs ● Tải source code đính kèm file báo cáo: cửa sổ terminal VS Code ta chạy câu lệnh flutter pub get: 136 Hình 6.6 Mở source code ● Tiến hành vô project chạy lệnh yarn add install-peers để tải package sử dụng dự án: Hình 6.7 Tải package sử dụng dự án ● Chạy lệnh yarn dev host để khởi động dự án: 137 Hình 6.8 Khởi động dự án admin Hình 6.9 Khởi động dự án teacher Hình 6.10 Khởi động dự án user 6.2 Kiểm thử ứng dụng 6.2.1 Các chức quản lý tài khoản Bảng 6.1 Kiểm thử chức quản lý tài khoản STT Testcase Kết mong đợi Kết Chức đăng nhập Đăng nhập thành công, phân quyền Pass Chức đăng ký Đăng ký thành công, có gửi mail xác Pass 138 thực email Sau người dùng nhấn vào đường dẫn Xác thực email email xác thực có thể đăng Pass nhập vào ứng dụng Đổi mật Đổi mật thành công người dùng cung cấp mật cũ Pass Gửi email đổi mật tài khoản Quên mật email đăng ký Pass Có thể đăng nhập mật Đổi thông tin cá nhân Tạo tài khoản trang admin Thông tin cá nhân người dùng thay đổi thành công Tạo tài khoản phân quyền Pass Pass 6.2.2 Các chức quản lý khóa học, học Bảng 6.2 Kiểm thử chức khóa học, học STT Testcase Kết mong đợi Khóa học tạo cập nhật bên Tạo khóa học Chỉnh sửa khóa học Tạo học Thêm nội dung vào Bài học cập nhật thêm nội dung phần người dùng Thơng tin khóa học cập nhật Bài học tạo cập nhật bên phần người dùng 139 Kết Pass Pass Pass Pass học Tạo lịch học cho khóa Lịch học lưu gửi lịch học cho học học viên Thay đổi lịch học Tạo kiểm tra Thêm học sinh vào khóa học Lịch học thay đổi cập nhật lịch học cho học viên Pass Pass Bài kiểm tra thêm vào khóa học Pass Danh sách học sinh cập nhật Pass 6.2.3 Các chức quản lý blog, bình luận Bảng 6.3 Kiểm thử chức quản lý blog, bình luận STT Kết mong đợi Testcase Blog tạo cập nhật trang Kết Tạo blog Chỉnh sửa blog Nội dung blog cập nhật Pass Tạo bình luận Bình luận tạo hiển thị Pass Chỉnh sửa bình luận Nội dung bình luận cập nhật Pass u thích blog Hiển thị like Pass blog Pass 6.2.4 Các chức quản lý danh sách từ Bảng 6.4 Kiểm thử chức quản lý danh sách từ STT Kết mong đợi Testcase Tạo danh sách từ Danh sách từ tạo hiển thị giao diện 140 Kết Pass Chỉnh sửa thông tin Thông tin danh sách từ cập danh sách từ Thêm từ vào danh sách nhật Pass Từ thêm vào danh sách Pass Chỉnh sửa thông tin từ Thông tin từ cập nhật Pass Xóa từ khỏi danh sách Từ xóa khỏi danh sách Pass 6.2.5 Các chức quản lý đề luyện tập Bảng 6.5 Kiểm thử chức quản lý đề luyện tập STT Kết mong đợi Testcase Tạo đề luyện tập Chỉnh sửa đề luyện tập Làm Đề luyện tập tạo cập nhật trang danh sách đề Thông tin nội dung đề cập nhật Kết trình làm lưu lại hiển thị giao diện Kết Pass Pass Pass 6.2.6 Các chức quản lý hóa đơn, đánh giá Bảng 6.6 Kiểm thử chức quản lý danh mục, sản phẩm STT Testcase Mua khóa học Chỉnh sửa đơn hàng Thêm đánh giá Kết mong đợi Học sinh có thể tham gia khóa học, hóa đơn mua khóa học lưu Thông tin đơn hàng cập nhật Đánh giá thêm phần chi tiết khóa học 141 Kết Pass Pass Pass Chỉnh sửa đánh giá Xóa đánh giá Chỉnh sửa nội dung đánh giá Đánh giá xóa khơng cịn hiển thị phần đánh giá 142 Pass Pass PHẦN KẾT LUẬN NHỮNG KẾT QUẢ ĐẠT ĐƯỢC 1.1 Về kiến thức Về kiến thức, thành viên nhóm học hỏi trau dồi thêm nhiều cho thân Về chun mơn: ● Hiểu rõ cách viết APIs phát triển server backend Spring Framework hệ quản trị sở liệu MySQL ● Phát triển phần mềm ngôn ngữ Reactjs để viết ứng dụng tương thích với platform khác trang web ● Học thêm cách xây dựng dự án thực tiễn ● Học cách xây dựng project Spring Framework ReactJS ● Rèn luyện nâng cao kỹ debug giải lỗi ● Học tiếp thu nhiều kiến thức Về kỹ năng: ● Rèn luyện kỹ làm việc nhóm, giải vấn đề chung ● Nâng cao tư phản biện, kỹ giao tiếp thành viên nhóm ● Cải thiện khả tự học, tự nghiên cứu để giải khó khăn ● Rèn luyện kỹ quản lý thời gian để thực tiến độ mà không bị ảnh hưởng nhiều yếu tố khác ● Học thêm kỹ quản lý dự án 1.2 Về đề tài Sau thực đề tài nhóm có được: ● Website dành cho học viên có thể tham gia học ● Website dành cho giáo viên có thể tạo dạy học ● Website dành cho admin để quản lý liệu ● Các tài liệu báo cáo, sơ đồ, lược đồ miêu tả 1.3 Về kinh nghiệm Về mặt kinh nghiệm: ● Kinh nghiệm lập trình website Spring Framework ReactJS ● Kinh nghiệm phát triển, triển khai API Database kiểm thử phần mềm 143 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM 2.1 Ưu điểm ● Project xây dựng cách có hệ thống có thể dễ dàng mở rộng ● Giao diện thân thiện với người dùng, người dùng có thể dễ dàng sử dụng ● Hệ thống đáp ứng tính hệ thống học tập hoạt động ổn định 2.2 Nhược điểm ● Hiện tại, đáp ứng tính bản, chưa có thêm tính để tăng trải nghiệm người dùng ● Một số tính mức sử dụng chưa tối ưu cách tốt THUẬN LỢI ● Dễ dàng tiếp cận phát triển phần mềm có kinh nghiệm lập trình với Spring Boot ReactJS Core MySQL ● Nhờ có hướng dẫn nhiệt tình thầy Nguyễn Hữu Trung thầy cô Khoa Công Nghệ Thông Tin trường Đại học Sư Phạm Kỹ Thuật giúp đỡ nhóm thời gian thực đề tài KHÓ KHĂN ● Kinh nghiệm nhóm Spring Framework ReactJS cịn ít, nên gặp nhiều vấn đề, giải số vấn đề hạn chế nhiều thời gian ● Việc kết hợp BackEnd FrontEnd gặp vài khó khăn thảo luận đưa yêu cầu chức từ trước ● Hiểu biết kinh nghiệm đề tài cịn nên nhóm có vài khó khăn xác định luồng làm việc tính việc thực theo logic code HƯỚNG PHÁT TRIỂN Trong trình thực đề tài, mặt thời gian kiến thức khiến cho nhóm có nhiều trở ngại việc thức hóa nhiều tình cho hệ thống, nhóm đề hướng phát triển cho hệ thống sau: ● Cải thiện mặt UI/UX để tăng thêm trải nghiệm người dùng 144 ● Nâng cấp bổ sung tính để tăng hiệu suất trải nghiệm người dùng ● Cải thiện hiệu suất, sửa lỗi ứng dụng công nghệ vào đề tài 145 TÀI LIỆU THAM KHẢO [1] Spring framework gì? https://laptrinhjavaweb.com/spring-framework-la-gi-56 [2] Giới thiệu Spring Framework, Techmaster Team, 4/7/2011 https://techmaster.vn/posts/36080/spring-la-gi-gioi-thieu-spring-framwork-trong-javaspring-phan-1 [3] React JS, ubidreams https://ubidreams.fr/en/expertises/development/react-js [4] React gì, FPT Aptech https://aptech.fpt.edu.vn/reactjs-la-gi.html [5] MySQL nên sử dụng https://bizflycloud.vn/tin-tuc/mysql-la-gi-tai-sao-nen-su-dung-mysql20200917180705499.htm [6] MySQL hướng dẫn toàn tập https://wiki.matbao.net/mysql-la-gi-huong-dan-toan-tap-ve-mysql/ [7] Báo Cáo Mẫu, Nguyễn Trường An – Giang Thiệu Quân https://docs.google.com/document/d/1oc1vsIUwo7cDvZgSDYI2h0B3T511E6iI/edit?u sp=sharing&ouid=106910716433953849962&rtpof=true&sd=true [8] MySQL, Oracle, 11/12/2021, https://www.mysql.com [9] ReactJS, Meta Platforms, Inc, 21/9/2022, https://reactjs.org [10] ReactJS Document, React, 20/8/2022, https://reactjs.org/docs/getting-started.html/ 146