Đồ án xây dựng website học lập trình

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM NGUYỄN TRUNG HIẾU - 19521508 NGUYỄN TIẾN DŨNG - 19521398 BÁO CÁO ĐỒ ÁN XÂY DỰNG WEBSITE HỌC LẬP TRÌNH Building a website to learn programming GIẢNG VIÊN HƯỚNG DẪN THS HUỲNH TUẤN ANH TP HỒ CHÍ MINH, 2022 ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM NGUYỄN TRUNG HIẾU - 19521508 NGUYỄN TIẾN DŨNG - 19521398 BÁO CÁO ĐỒ ÁN XÂY DỰNG WEBSITE HỌC LẬP TRÌNH Building a website to learn programming GIẢNG VIÊN HƯỚNG DẪN THS HUỲNH TUẤN ANH TP HỒ CHÍ MINH, 2022 LỜI CẢM ƠN Sau trình học tập rèn luyện khoa Công nghệ Phần mềm trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM, chúng em trang bị kiến thức kỹ để hồn thành đồ án môn học Đồ án môn học mang lại cho sinh viên nhìn việc áp dụng kiến thức có để giải vấn đề thực tế Môn học thử thách hội để sinh viên rèn luyện hoàn thiện thân qua kinh nghiệm, kỹ làm đồ án Chúng em xin gửi lời cảm ơn đến thầy HUỲNH TUẤN ANH tận tình quan tâm, giúp đỡ hướng dẫn nhóm suốt q trình làm đồ án Qua lời góp ý, bảo thầy mà nhóm hồn thành đồ án tốt Nhóm xin cảm ơn tất thầy cô, anh chị, bạn bè giúp đỡ, hỗ trợ suốt q trình nhóm hồn thành đồ án Trong q trình học tập hồn thiện đồ án cịn gặp nhiều sai sót, chúng em mong nhận góp ý q thầy bạn để hồn thiện Chúng em xin chân thành cảm ơn! TP HCM, ngày 25 tháng 12 năm 2022 Sinh viên thực Sinh viên thực NGUYỄN TIẾN DŨNG NGUYỄN TRUNG HIẾU MỤC LỤC CHƯƠNG 1: GIỚI THIỆU CHUNG 1 Đề tài Lý chọn đề tài Đối tượng nghiên cứu Phạm vi nghiên cứu Phương pháp nghiên cứu CHƯƠNG 2: TÌM HIỂU CÁC CÔNG NGHỆ ỨNG DỤNG TRONG ĐỀ TÀI Tổng quan JavaScript Tổng quan ReactJs Tổng quan NodeJs Tổng quan ExpressJs Tổng quan MySQL CHƯƠNG 3: XÂY DỰNG HỆ THỐNG Mơ hình use-case 10 10 1.1 Sơ đồ Use-case 10 1.2 Danh sách Actor 10 1.3 Danh sách Use-case 11 1.4 Đặc tả Use-case 12 1.4.1 Đăng nhập 12 1.4.2 Đăng xuất 13 1.4.3 Xem thông tin cá nhân 14 1.4.4 Chỉnh sửa thông tin cá nhân 15 1.4.5 Xem thơng tin khóa học 15 1.4.6 Xem chi tiết khóa học 16 1.4.7 Tham gia khóa học 17 1.4.8 Chọn/ điều chỉnh giảng 18 1.4.9 Xem khóa học thân 19 1.4.10 Xem Blog 19 1.4.11 Xem chi tiết blog 20 Thiết kế liệu 22 2.1 Sơ đồ lớp 22 2.2 Mô tả bảng 22 2.3 Chi tiết bảng 23 Thiết kế giao diện CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 27 44 Thành đạt 44 Ưu điểm nhược điểm 44 2.1 Ưu điểm 44 2.2 Nhược điểm 44 CHƯƠNG 1: GIỚI THIỆU CHUNG Đề tài - Tên đề tài: Xây dựng hệ thống web học lập trình - Công nghệ sử dụng: - Front-end: - Back-end: Cơ sở liệu: MySQL Lý chọn đề tài Công nghệ thông tin ngành hot giới trẻ quan tâm nhiều, kéo theo nhu cầu học cơng nghệ thơng tin ngày cao Các bạn học sinh người trái ngành học cơng nghệ thơng tin nhiều, vấn đề chi phí, nguồn tài liệu học tập cung cấp cách đầy đủ toàn diện khó.Hiểu nỗi đau này, sinh viên học công nghệ thông tin, chúng em định xây dựng trang web học lập trình thơng qua video tập lí thuyết theo hình thức trắc nghiệm, thực hành theo hình thức coding để đem đến nguồn tài nguyên học tập bổ ích cho người Đối tượng nghiên cứu ● Người làm đề tài: ○ Sinh viên học tập nghiên cứu trường Đại học Công nghệ Thông tin – ĐHQG Tp Hồ Chí Minh ● Cơng nghệ, công cụ phát triển: ○ Visual Studio Code ○ Rest API ○ MySQL ● Thiết kế giao diện: ○ Phác thảo thiết kế giao diện sử dụng công cụ Figma SE122.N11.PMCL Trang ● Đối tượng phạm vi đề tài hướng đến: ○ Sinh viên, học sinh có nhu cầu học lập trình ○ Những doanh nghiệp phân phối hàng hóa ngồi nước ○ Người tiêu dùng nước (có thể) ngồi nước Phạm vi nghiên cứu ● Website nhóm xây dựng phát triển ReactJs, NodeJs môi trường web ● Tìm hiểu ReactJs, NodeJs để áp dụng vào phần mềm hỗ trợ người dùng có nhìn tổng quan sản phẩm trước lựa chọn mua hàng Phương pháp nghiên cứu ● Cách tiếp cận: Website xây dựng dựa mơ hình MVC mơi trường đa tảng ● Phương pháp nghiên cứu: ○ Phương pháp đọc tài liệu ○ Phương pháp phân tích website xây dựng cách sử dụng ReactJs,NodeJs (SERN stack) ○ Phương pháp thực nghiệm SE122.N11.PMCL Trang CHƯƠNG 2: TÌM HIỂU CÁC CƠNG NGHỆ ỨNG DỤNG TRONG ĐỀ TÀI Tổng quan JavaScript 1.1 Tổng quan JavaScript ngơn ngữ lập trình website phổ biến nay, tích hợp nhúng vào HTML giúp website trở nên sống động JavaScript đóng vai trị phần trang web, thực thi cho phép Client-side script từ phía người dùng phía máy chủ (Nodejs) tạo trang web động JavaScript ngơn ngữ lập trình thơng dịch với khả hướng đến đối tượng Là ngôn ngữ lập trình web có mối liên hệ lẫn để xây dựng website sống động, chuyên nghiệp: HTML: Hỗ trợ việc xây dựng layout, thêm nội dung dễ dàng website CSS: Hỗ trợ việc định dạng thiết kế, bố cục, style, màu sắc,… JavaScript: Tạo nên nội dung “động” website Cùng tìm hiểu rõ phần JS viết tắt JavaScript, có JS bạn hiểu nói đến JavaScript Nhiệm vụ Javascript xử lý đối tượng HTML trình duyệt Nó can thiệp với hành động thêm / xóa / sửa thuộc tính CSS thẻ HTML cách dễ dàng Hay nói cách khác, Javascript ngơn ngữ lập trình trình duyệt phía client Tuy nhiên, với xuất NodeJS giúp cho Javascript làm việc backend Bạn thử truy cập vào số website internet thấy có hiệu ứng slide, menu xổ xuống, hình ảnh chạy qua chạy lại đẹp tất chức xử lý Javascript bạn Trong năm gần đây, xuất framework NodeJS (chuyên code backend), ExpressJS (NodeJS framework), nhiều thư viện SE122.N11.PMCL Trang frontend khác Angular, jQuery, ReactJS đời, giúp tạo sốt với từ khóa Javascript Fullstack 1.2 Ưu điểm Một số ưu điểm bật ngơn ngữ lập trình JS sau: ● Chương trình dễ học ● Những lỗi Javascript dễ để phát hiện, từ giúp bạn sửa lỗi cách nhanh chóng ● Những trình duyệt web dịch thơng qua HTML mà khơng cần sử dụng đến compiler ● JS hoạt động nhiều tảng trình duyệt web khác ● Được chuyên gia đánh giá loại ngơn ngữ lập trình nhẹ nhanh nhiều so với ngơn ngữ lập trình khác ● JS cịn gắn số element events trang web ● Những website có sử dụng JS chúng giúp cho trang web có tương tác tăng thêm nhiều trải nghiệm cho người dùng ● Người dùng tận dụng JS với mục đích để kiểm tra input thay cách kiểm tra thủ công thông qua hoạt động truy xuất database ● Giao diện ứng dụng phong phú với nhiều thành phần Drag and Drop, Slider để cung cấp đến cho người dùng Rich Interface (giao diện giàu tính năng) ● Giúp thao tác với người dùng phía Client tách biệt Client với 1.3 Nhược điểm Bên cạnh ưu điểm kể JS có nhược điểm riêng tương tự ngơn ngữ lập trình khác Cụ thể: ● JS Code Snippet lớn ● JS dễ bị hacker scammer khai thác SE122.N11.PMCL Trang ● JS khơng có khả đa luồng đa dạng xử lý ● Có thể dùng để thực thi mã độc máy tính người sử dụng ● Những thiết bị khác thực JS khác nhau, từ dẫn đến khơng đồng ● Vì tính bảo mật an toàn nên Client-Side Javascript không cho phép đọc ghi file ● JS không hỗ trợ bạn sử dụng tình trạng thiết bị kết nối mạng Tổng quan ReactJs 2.1 Tổng quan ReactJS thư viện JavaScript mã nguồn mở phát triển Facebook, mắt vào năm 2013 với mục đích để xây dựng giao diện người dùng Nó sử dụng rộng rãi để xây dựng trang web SPA (Single Page Application) ứng dụng tảng di động Nó dễ sử dụng cho phép người dùng tạo component UI tái sử dụng ReactJS có tính bật bao gồm: ● JSX: viết tắt JavaScript extension, React extension , giúp cho việc thay đổi DOM dễ dàng HTML-style code đơn giản Nó tính tốt dễ sử dụng ● Components: Một trang web xây dựng ReactJS kết hợp nhiều component lại với khơng phải chung Template bình thường Các component hàm JavaScript bình thường, giúp tạo code dễ dàng cách tách logic thành đoạn code độc lập tái sử dụng Chúng ta sử dụng component dạng function class, ngồi component cịn có state props ● Virtual DOM: ReactJS tạo thứ gọi Virtual DOM (DOM ảo) Đúng tên gọi, copy DOM thật trang web ReactJS dùng SE122.N11.PMCL Trang ...ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM NGUYỄN TRUNG HIẾU - 19521508 NGUYỄN TIẾN DŨNG - 19521398 BÁO CÁO ĐỒ ÁN XÂY DỰNG WEBSITE HỌC LẬP TRÌNH... khóa học học Xem chi tiết khóa học Xem thơng tin chi tiết khóa học chọn Tham gia khóa học Chọn/ điều chỉnh giảng Tham gia khóa học bắt đầu học Điều hướng giảng có khóa học Xem khóa học Xem khóa học. .. ExpressJs sử dụng thiết kế xây dựng ứng dụng web cách đơn giản nhanh chóng Để hiểu sử dụng ExpressJs, lập trình viên cần biết JavaScript, việc xây dựng website dễ dàng lập trình viên biết JavaScript