Chương 1: CƠ SỞ LÝ THUYẾT 1. Visual Studio Code Visual Studio Code chính là ứng dụng cho phép biên tập, soạn thảo các đoạn code để hỗ trợ trong quá trình thực hiện xây dựng, thiết kế website một cách nhanh chóng. Visual Studio Code hỗ trợ đa dạng các chức năng Debug, đi kèm với Git, có Syntax Highlighting. Đặc biệt là tự hoàn thành mã thông minh, Snippets, và khả năng cải tiến mã nguồn.
Nhờ tính năng tùy chỉnh, Visual Studio Code cũng cho phép các lập trình viên thay đổi Theme, phím tắt, và đa dạng các tùy chọn khác. Mặc dù trình soạn thảo Code này tương đối nhẹ, nhưng lại bao gồm các tính năng mạnh mẽ. Hoàn thành với các công cụ tích hợp để kiểm tra, gỡ rối và phân tích mã và tích hợp với nhiều VCS khác nhau, Visual Studio Code là một công cụ thiết yếu cho sự phát triển web hiệu quả và mạnh mẽ Hình 1. Postman Postman là một công cụ phát triển ứng dụng API mạnh mẽ và phổ biến.
Nó cung cấp một giao diện đồ họa thân thiện và dễ sử dụng để tạo, kiểm thử và tương tác với các API. Với Postman, bạn có thể tạo các yêu cầu HTTP (GET, POST, PUT, DELETE, v.) và gửi chúng đến các endpoint API. Bạn có thể chỉ định các thông số, tham số và thân yêu cầu để tương tác với API một cách linh hoạt. Ngoài ra, Postman cũng hỗ trợ các phương thức xác thực như OAuth, JWT và Basic Auth, giúp bạn kiểm tra tính bảo mật và quyền truy cập của API.
Postman cung cấp một bộ công cụ mạnh mẽ để kiểm tra và gỡ lỗi API. Bạn có thể xem các câu trả lời từ API, kiểm tra mã trạng thái, xem thông tin header và body của SVTH: Nguyễn Lê Minh Người hướng dẫn: ThS. Nguyễn Văn Phát 3 Xây dựng website học trực tuyến Slearning yêu cầu và kiểm tra dữ liệu trả về. Điều này giúp bạn xác nhận tính đúng đắn và chính xác của API và khắc phục lỗi nhanh chóng.
Ngoài ra, Postman cũng hỗ trợ việc tạo và quản lý bộ kiểm tra (test suite) tự động. Bạn có thể viết các kịch bản kiểm tra để kiểm tra tự động các yêu cầu và đảm bảo tính ổn định và chất lượng của API. Các bộ kiểm tra này có thể được chạy một cách tự động và cung cấp các kết quả chi tiết về việc kiểm tra. Intellij IDEA Phần mềm IntelliJ IDEA, sản phẩm nổi tiếng của JetBrains đã nhận được rất nhiều giải thưởng.
Phần mềm được thiết kế để cải tiến năng suất cho các nhà phát triển. IntelliJ IDEA cung cấp trình soạn thảo thông minh, trình phân tích mã và tập hợp mạnh mẽ của refactorings hỗ trợ một loạt các ngôn ngữ lập trình, các khuôn khổ và công nghệ, và đã sẵn sàng để sử dụng.3: Logo Intellij IDEA SVTH: Nguyễn Lê Minh Người hướng dẫn: ThS. Nguyễn Văn Phát 4 Xây dựng website học trực tuyến Slearning 1. ReactJS React là một thư viện JavaScript front-end mã nguồn mở và miễn phí để xây dựng giao diện người dùng dựa trên các thành phần UI riêng lẻ.
Nó được phát triển và duy trì bởi Meta và cộng đồng các nhà phát triển và công ty cá nhân. Một vài khái niệm cơ bản trong reactJS: - JSX: JSX (nói ngắn gọn là JavaScript extension) là một React extension giúp chúng ta dễ dàng thay đổi cây DOM bằng các HTML-style code đơn giản. Và kể từ lúc ReactJS browser hỗ trợ toàn bộ những trình duyệt Web hiện đại, bạn có thể tự tin sử dụng JSX trên bất kỳ trình duyệt nào mà bạn đang làm việc. - Virtual DOM: Virtual DOM (bản chất của nó theo đúng tên gọi) là bản copy của DOM thật trên trang đó, và ReactJS sử dụng bản copy đó để tìm kiếm đúng phần mà DOM thật cần cập nhật khi bất kỳ một sự kiện nào đó khiến thành phần trong nó thay đổi (chẳng hạn như user nhấn vào một nút bất kỳ).
Các tính năng nổi bật trong ReactJS: - Phù hợp với nhiều loại website - Tái sử dụng component - Có thể sử dụng cho mobile application - Thân thiện với SEO - Debug dễ dàng Hình 1.4: Logo ReactJS SVTH: Nguyễn Lê Minh Người hướng dẫn: ThS. Nguyễn Văn Phát 5 Xây dựng website học trực tuyến Slearning 1. Java Spring Boot Spring Boot là một dự án phát triển bởi JAV (ngôn ngữ java) trong hệ sinh thái Spring framework. Nó giúp cho các lập trình viên chúng ta đơn giản hóa quá trình lập trình một ứng dụng với Spring, chỉ tập trung vào việc phát triển business cho ứng dụng.
Ở thời điểm hiện tại Spring Boot có lẽ đang là framework nổi tiếng và được sử dụng nhiều bậc nhất trong phát triển các ứng dụng sử dụng ngôn ngữ Java. Được xây dựng trên nền tảng Spring framework, nó có tất cả các tính năng của Spring cộng thêm những tiện ích mà nó mang lại như giảm thiểu các bước cấu hình phức tạp, nhúng server container (Tomcat, Jetty hoặc Undertow) tự động vào ứng dụng giúp chúng ta có thể khởi chạy một ứng dụng ngay lập tức, quản lý dependence thông minh,… Tất cả điều này đã tạo nên một sức lôi cuốn vô cùng lớn đối với cộng đồng developer trên khắp thế giới, các công ty cũng đang dần chuyển sang dùng Spring Boot cho các dự án tiếp theo. Lựa chọn học Spring Boot ở thời điểm hiện tại là một quyết định đúng đắn vì thị trường việc làm của nó đang rất nhiều. Không chỉ vậy, hiện tại có nhiều công ty cũng đang dần chuyển từ Spring qua Spring Boot cho các dự án cũ và các dự án mới sẽ dùng hẳn Spring Boot.5: Logo SpringBoot SVTH: Nguyễn Lê Minh Người hướng dẫn: ThS.
Nguyễn Văn Phát 6 Xây dựng website học trực tuyến Slearning Chương 2: PHÂN TÍCH THIẾT KẾ HƯỚNG ĐỐI TƯỢNG 2. Xác định các tác nhân - Người học - Người dạy - Quản trị viên 2. Liệt kê người dùng và yêu cầu 2. Người học − Đăng nhập − Đăng ký − Đăng ký tài khoản người dạy − Cập nhật tài khoản cá nhân − Mua khóa học − Xem khóa học đang học − Học tập − Làm bài kiểm tra cuối chương − Làm bài tập coding − Xem lịch sử thanh toán − Tìm kiếm − Xem danh sách khóa học − Xem bài giảng - Cập nhật nhắc lịch học - Đánh giá khóa học - Xem chi tiết khóa học - Thanh toán khóa học 2.
Người dạy − Đăng nhập − Xem danh sách khóa học của bản thân − Tạo khóa học − Tạo các chương khóa học − Tạo bài giảng SVTH: Nguyễn Lê Minh Người hướng dẫn: ThS. Nguyễn Văn Phát 7 Xây dựng website học trực tuyến Slearning − Tạo câu hỏi ôn tập mỗi chương − Tạo bài tập coding − Đề xuất xuất bản khóa học − Cập nhật khóa học − Yêu cầu thanh toán từ hệ thống − Xuất excel thanh toán trong tháng − Xem danh sách thanh toán từ hệ thống − Xem chi tiết thanh toán − Thống kê 2. Quản trị viên - Quản lý người dùng - Duyệt đề xuất đăng ký người dạy - Duyệt xuất bản khóa học - Quản lý khóa học - Quản lý danh mục - Quản lý danh mục con - Quản lý chủ đề - Xem danh sách yêu cầu thanh toán - Thanh toán cho người dạy 2. Yêu cầu chất lượng − Giao diện phù hợp với đối tượng sử dụng, đơn giản, hợp lý − Ngôn ngữ Tiếng Việt − Đảm bảo tính bảo mật cao, an toàn người dùng − Tốc độ xử lý và truy cập nhanh − Đủ các chức năng nghiệp vụ cơ bản của một website học trực tuyến.
SVTH: Nguyễn Lê Minh Người hướng dẫn: ThS. Nguyễn Văn Phát 8 Xây dựng website học trực tuyến Slearning 2. Phân tích thiết kế hệ thống 2.1: Sơ đồ Use-case SVTH: Nguyễn Lê Minh Người hướng dẫn: ThS. Nguyễn Văn Phát 9 Xây dựng website học trực tuyến Slearning 2.
Kịch bản cho từng Use-case 2. Kịch bản cho Usecase đăng ký tài khoản Bảng 2.1: Kịch bản cho Usecase đăng ký tài khoản Tên usecase Đăng ký tài khoản người dùng Mô tả Khách đăng ký tài khoản người dùng Các tác nhân Người dùng trên hệ thống Đầu vào Tên đầy đủ, email, mật khẩu Đầu ra Tài khoản đã đăng ký thành công Các bước thực 1. Nhập tên đầy đủ hiện 2. Nhập mật khẩu 4.
Nhấn đăng ký Trường hợp thay thế Trường hợp ngoại lệ 2. Kịch bản cho Usecase đăng nhập Bảng 2.2: Kịch bản cho Usecase đăng nhập Tên usecase Đăng nhập Mô tả Người dùng muốn đăng nhập Các tác nhân Người dùng trên hệ thống Đầu vào Tên đầy đủ, email, mật khẩu Đầu ra Tài khoản đã đăng nhập thành công Các bước thực 1. Nhấn “Đăng nhập” trên Header hiện 2. Nhập tên đầy đủ hoặc email 3.
Nhập mật khẩu 4. Nhấn đăng nhập SVTH: Nguyễn Lê Minh Người hướng dẫn: ThS. Nguyễn Văn Phát 10 Xây dựng website học trực tuyến Slearning Trường hợp thay thế Trường hợp B4. Người dùng nhập tên tìa khoản hoặc email không hợp lệ -> ngoại lệ Hệ thống thông báo “Tên người dùng hoặc email không hợp lệ”.
Kịch bản cho Usecase tìm kiếm Bảng 2.3: Usecase tìm kiếm Tên usecase Tìm kiếm Mô tả Người dùng tìm kiếm khóa học Các tác nhân Người dùng, người dạy, admin Đầu vào Từ khóa Đầu ra Kết quả Các bước thực 1. Nhập từ khóa vào ô tìm kiếm hiện 2. Nhấn nút “Tìm kiếm” hoặc nhấn phím Enter Trường hợp thay thế Trường hợp ngoại lệ 2. Kịch bản cho Usecase thanh toán khóa học Bảng 2.4: Usecase thanh toán khóa học Tên usecase Mua khóa học Mô tả Người học mua khóa học Các tác nhân Người học Đầu vào Khóa học cần mua Đầu ra Mua khóa học thành công Các bước thực 1.
Xem chi tiết khóa học hiện 2. Nhấn “Mua khóa học” 3. Kiểm tra thông tin thanh toán 4. Nhấn “Thanh toán” 5.
Nhập thông tin thanh toán SVTH: Nguyễn Lê Minh Người hướng dẫn: ThS. Nguyễn Văn Phát 11 Xây dựng website học trực tuyến Slearning 6. Thanh toán thành công hoặc thất bại Trường hợp thay thế Trường hợp ngoại lệ 2. Kịch bản cho Usecase khóa học của tôi Bảng 2.5: Usecase khóa học của tôi Tên usecase Xem khóa học đã mua Mô tả Người học xem các khóa học đã mua Các tác nhân Người học Đầu vào Đã đăng nhập Đầu ra Các khóa học đã mua Các bước thực 1.
Đăng nhập vào tài khoản hiện 2. Trên trang chủ, nhấn vào ảnh đại diện bên góc phải trên cùng 3. Chọn “khóa học của tôi” Trường hợp 1. Đăng nhập vào tài khoản thay thế 2.
Trên trang chủ, nhấn vào ảnh đại diện bên góc phải trên cùng 3. Chọn “khóa học của tôi” Trường hợp ngoại lệ 2. Kịch bản cho Usecase xem bài giảng Bảng 2.