Báo cáo đồ án 2 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 26 43 Thành đạt 43 Ưu điểm nhược điểm 43 2.1 Ưu điểm 43 2.2 Nhược điểm 43 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 frontend khác Angular, jQuery, ReactJS đời, giúp tạo sốt với từ khóa Javascript Fullstack SE122.N11.PMCL Trang 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 ● 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 SE122.N11.PMCL Trang ● 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 tồ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, 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 DOM ảo để tìm DOM thật cần cập nhật có kiện làm thành phần bên thay đổi ● Javascript Expressions: Biểu thức JS sử dụng file jsx js cách sử dụng cặp dấu ngoặc nhọn “{}” 2.2 Ưu điểm SE122.N11.PMCL Trang STT Loại Tên Chức Điều kiện Ghi Get started Button Button đến Click Button Courses Name of H2 Courses Chuyển Lessons Hiển thị Name of Courses Link Hiển thị thông Click Link tin lesson 3.3.2 Biến cố xử lý Tên biến cố Xử lý kiện Click on Button_Introduce Chuyển đến Courses Click on Link_Lessons Hiển thị thông tin lesson STT 3.4 Home 3.4.1 SE122.N11.PMCL Thành phần giao diện Trang 30 SE122.N11.PMCL Trang 31 STT Loại Tên Chức Điều kiện Ghi Slide Name Image of H2 Courses Lessons Hiển thị slide Hiển thị Name of Courses Link Hiển thị thông Click Link tin lessons 3.4.2 STT 3.5 Biến cố xử lý Tên biến cố Xử lý kiện Click on Link_Lessons Hiển thị thông tin lessons My Courses 3.5.1 SE122.N11.PMCL Thành phần giao diện Trang 32 STT Tên Loại Chức Điều kiện Ghi Name of H2 Hiển thị Name of Courses Courses dùng người tham gia Lessons Link Hiển thị thông Click Link tin lessons SE122.N11.PMCL Trang 33 3.5.2 STT 3.6 Biến cố xử lý Tên biến cố Xử lý kiện Click on Link_Lessons Hiển thị thông tin lessons Courses 3.6.1 SE122.N11.PMCL Thành phần giao diện Trang 34 SE122.N11.PMCL Trang 35 STT Loại Tên Chức Điều kiện Ghi Name of H1 lessons lessons Lessons Div information Contents Hiển thị Name of Hiển thị thông tin Lessons of Div Hiển thị danh sách courses part lessons Name of part Div Hiển thị list item Click div part Item of part a Chuyển đến Click item lesson 3.6.2 STT Biến cố xử lý Tên biến cố Xử lý kiện Click on Div_ Name of part Hiển thị list item part Click on A_ Item of part 3.7 Chuyển đến lesson My Account 3.7.1 SE122.N11.PMCL Thành phần giao diện Trang 36 STT Tên Loại Chức Điều kiện Ghi Username Input Hiển thị Username Date of birth Input Hiển thị ngày tháng năm sinh Email Input Hiển thị Email Password Input Hiển thị Ẩn Password Phone number Input Hiển thị số điện thoại Address SE122.N11.PMCL Input Hiển thị địa Trang 37 Save button Button Cập nhật thông Click Button tin cá nhân 3.7.2 STT 3.8 Biến cố xử lý Tên biến cố Xử lý kiện Click on Button_ Save Cập nhật thông tin cá nhân Blog 3.8.1 SE122.N11.PMCL Thành phần giao diện Trang 38 SE122.N11.PMCL Trang 39 STT Loại Tên Chức Điều kiện Ghi User avatar Image Hiển thị avatar tác giả Username p Hiển thị tên tác giả Title of blog H2 Hiển thị tiêu đề blog Content of blog p Hiển thị nội Ẩn dung blog 3.8.2 STT 3.9 Biến cố xử lý Biến cố Xử lý kiện Detail Blog 3.9.1 SE122.N11.PMCL Thành phần giao diện Trang 40 SE122.N11.PMCL Trang 41 STT Loại Tên Chức Điều kiện Ghi User avatar Image Hiển thị avatar tác giả Username p Hiển thị tên tác giả Title of blog H2 Hiển thị tiêu đề blog Content of blog p Hiển thị nội dung blog Another blog Link Hiển thị blog Click Link khác 3.9.2 STT Interface components Name of incident Event handling Click on Link_ Another Hiển thị block khác blog SE122.N11.PMCL Trang 42 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Thành đạt ● Thơng qua đồ án, nhóm tìm hiểu công nghệ ReactJs, NodeJs, phẩm mềm hỗ trợ Figma nhằm phục vụ cho công việc sau thành viên ● Tìm hiểu học cách để xây dựng website ● Ngoài ra, nhóm cịn củng cố vững kiến thức học sơ đồ use-case, sơ đồ lớp,… ● Nâng cao kỹ lập trình, làm việc nhóm giải vấn đề Ưu điểm nhược điểm 2.1 Ưu điểm ● Giao diện đơn giản, bố cục hợp lý, dễ tiếp cận thao tác cho người dùng ● Nhóm hồn thành mục tiêu đề 2.2 Nhược điểm ● Chưa tối ưu hóa code ● Chưa có chức đặc biệt hóa ● Chưa deploy lên server ● Tốc độ xử lý API chậm 2.3 Hướng phát triển ● Xây dựng phát triển chức thiếu, chưa hồn thiện ● Nâng cao tính bảo mật sản phẩm ● Bổ sung chức nhằm hỗ trợ trải nghiệm người dùng tốt như: ○ Hỗ trợ tìm kiếm sản phẩm thơng minh ○ Hỗ trợ tốn qua nhiều hình thức SE122.N11.PMCL Trang 43 TÀI LIỆU THAM KHẢO [1] Đỗ Khánh Toàn, Giới thiệu ReactJs – Phần I, https://viblo.asia/p/gioi-thieu-vereactjs-phan-i-cac-khai-niem-co-ban-V3m5WzjblO7 [2] Từ Quốc Hưng, ReactJS gì? Những điều bạn chưa biết ReactJS, https://200lab.io/blog/reactjs-la-gi/ [3] lienhoang, Sử dụng React Router cho Single Page Application, https://viblo.asia/p/su-dung-react-router-cho-mot-single-page-applicationaWj53LMpK6m [4] Phạm Xuân Nam, ReactJs component lifecycle methods, https://viblo.asia/p/reactjs-component-lifecycle-methods-3Q75wdQ2KWb [5] Nguyen Minh Dinh, Node.js Tutorial: Phần 1, https://viblo.asia/p/nodejs-tutorialphan-1-gioi-thieu-va-cai-dat-ung-dung-dau-tien-gVQvlwdykZJ [6] Đơng Tùng, ExpressJS gì? Tại nên sử dụng ExpressJS?, https://wiki.tino.org/expressjs-la-gi/ [7] Mona Media, MySQL gì? Tìm hiểu thơng tin cần biết MySQL, https://mona.media/mysql-la-gi/ SE122.N11.PMCL Trang 44 ...ĐẠ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 - 19 521 508 NGUYỄN TIẾN DŨNG - 19 521 398 BÁO CÁO ĐỒ ÁN XÂY DỰNG WEBSITE HỌC LẬP TRÌNH... 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 26 43 Thành đạt 43 Ưu điểm nhược điểm 43 2. 1 Ưu điểm 43 2. 2 Nhược điểm... 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 trước Ưu điểm 4.2