Khóa luận tốt nghiệp xây dựng trang web thương mại điện tử xem tin tức

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG TRANG WEB THƯƠNG MẠI ĐIỆN TỬ XEM TIN TỨC GVHD: TS.NGUYỄN THIÊN BẢO SVTH : TRẦN NGUYÊN QUANG SKL010230 Tp Hồ Chí Minh, tháng 5/2023 CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** -Tp Hồ Chí Minh, ngày 29 tháng 05 năm 2023 NHIỆM VỤ THỰC HIỆN ĐỒ ÁN TỐT NGHIỆP Họ tên sinh viên: Trần Nguyên Quang MSSV: 15110108 Ngành: Công nghệ thông tin Lớp: 15110CL2 Giảng viên hướng dẫn: TS Nguyễn Thiên Bảo Ngày nhận đề tài: 24/2/2023 Ngày nộp đề tài: 29/05/2023 Tên đề tài: Xây dựng trang web thương mại điện tử xem tin tức Nội dung thực đề tài: Tìm hiểu phát triển ứng dụng website xem tin tức trực tuyến công nghệ NestJS NextJS Sản phẩm: Website xem tin tức trực tuyến TRƯỞNG NGÀNH GIẢNG VIÊN HƯỚNG DẪN CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *********** PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên: Trần Nguyên Quang MSSV: 15110108 Ngành: Công nghệ thông tin Tên đề tài: Xây dựng trang web thương mại điện tử xem tin tức Họ tên Giáo viên hướng dẫn: TS Nguyễn Thiên Bảo NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: + Tìm hiểu hai cơng nghệ NestJS NextJS + Xây dựng website xem tin tức với bao gồm: Xem tin tức, tạo viết,hỗ trợ tìm kiếm viết theo tên,… số chức phụ như: đăng nhập, đăng xuất,… + Xây dựng trang quản lý với chức quản lý người dùng quản lý viết quản lý tagname + Phân tích thiết kế xây dựng hệ thống back-end database giúp lưu trữ, giao tiếp, truyền tải, xử lý liệu tầng back-end front-end + Thực deloy source Back-end, Front-end Database lên server kết nối sở liệu + Viết unitest testcase thực automation dựa thư viện Cypress + Viết tài liệu chuẩn bị tài liệu cần thiết để thuyết trình Ưu điểm: + Dự án viết dựa Nextjs 13 Nestjs 9.0 coi công nghệ dẫn đầu ngôn ngữ Javascript + Source code Back-end tạo dựng theo mô hình Design Partern Frontend tổ chức cấu trúc file forlder theo cấu trúc vịt (Duck) boilerplate + Lấy cảm hứng từ hai thuật ngữ công nghệ là: Process Web App Mobile First, project khóa luận tích hợp số phiên giành riêng cho mobile để mục đích nâng cao trải nghiệm người dùng website xem tin tức + Tích hợp Automation Test với cơng nghệ Cypress vào dự án Khuyết điểm: + Tài liệu chưa mô tả tường tận + Giao diện chưa chỉnh chu, tỉ mỉ rập khuôn với trang web xem tin tức internet, chưa có bước đột phá UI/UX Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Bằng chữ: Tp Hồ Chí Minh, ngày tháng Giáo viên hướng dẫn năm 20 CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *********** PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên: Trần Nguyên Quang MSSV: 15110108 Ngành: Công nghệ thông tin Tên đề tài: Xây dựng trang web thương mại điện tử xem tin tức Họ tên Giáo viên phản biện: NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Bằng chữ: Tp Hồ Chí Minh, ngày tháng năm 20 Giáo viên phản biện i LỜI CẢM ƠN Chúng em xin chân thành cảm ơn Khoa Đào Tạo Chất Lượng Cao, trường đại học Sư phạm Kỹ Thuật Thành phố Hồ Chí Minh tạo điều kiện thuận lợi cho chúng em học tập thực đồ án tốt nghiệp Chúng em xin chân thành cảm ơn quý thầy cô Khoa cơng nghệ thơng tận tình giảng dạy, trang bị cho em kiến thức quý báu thời gian vừa qua Chúng em xin bày tỏ lòng biết ơn sâu sắc tới thầy Nguyễn Thiên Bảo tận tình hướng dẫn bảo chúng em trình thực đề tài Bước đầu tìm hiểu cơng nghệ nhóm em cịn gặp nhiều khó khăn, khơng tránh khỏi thiết sót điều chắn, nhóm em mong nhận ý kiến đóng góp q báu thầy, bạn đọc để giúp tiểu luận hoàn thiện Đồng thời trình độ lý luận kinh nghiệm thực tiễn hạn chế nên báo cáo khơng thể tránh khỏi thiết sót, em mong nhận ý kiến đóng góp từ thầy, cô để em học thêm nhiều kinh nghiệm hoàn thành tốt cho luận văn tốt nghiệp tới Một lần nhóm em xin gửi lời cảm ơn chân thành đến thầy Nguyễn Thiên Bảo hướng dẫn tận tình cho nhóm để hồn thành đồ án Nhóm em xin chân thành cảm ơn! Nhóm sinh viên thực Trần Nguyên Quang i TÓM TẮT Đồ án website đọc báo, xem tin tức online Việt Nam giới.Website vận hành website đọc báo online, cung cấp cho người dùng giao diện dễ thao tác thiết kế theo nguyên lý responsive Do website hoạt động tảng web, mobile, tablet Hệ quản trị website cung cấp giao diện chuẩn trang quản lý giúp admin dễ dàng quản lý thông tin xử lý đăng người dùng cách tốt nhất,… Website có chức sau: Về phía người dùng: - Xem danh mục viết Tìm kiếm viết Xem chi tiết viết Thêm viết Quản lý profile cá nhân Đăng nhập, đăng xuất tài khoản , google facebook Về phía quản trị viên: - Quản lý thơng tin người dùng Quản lý viết Quản lý viết người dùng chưa phê duyệt Quản lý danh mục viết Quản lý thông tin chung website Xem số liệu thống kê Website sử dụng công nghệ: - Front-end: NextJS, Bootstrap - Back-end: Nestjs - Database: MySQL ii SUMMARY The project is a website to read newspapers and watch online news in Vietnam and the world The website operates as an online newspaper website, providing users with an easy-to-operate interface and is designed according to the principle of responsiveness Therefore, the website can work on web, mobile, and tablet platforms The management system of the website provides a standard interface of a management page help admin easily manage information as well as handle user's posts in the best way,… The website has the following functions: On the client side: - View the list of posts Search posts View posts details Add new posts Manage personal profiles Log in, log out with your account, google or facebook On the administrator side: - Manage user information Manage articles Manage unapproved user posts Manage article categories Manage general information of the website View the stats Website uses technologies: - Front-end: NextJS, Bootstrap Back-end: Nestjs Database: MySQL iii MỤC LỤC LỜI CẢM ƠN i TÓM TẮT ii MỤC LỤC .iv DANH MỤC CÁC TỪ VIẾT TẮT vii DANH MỤC CÁC BẢNG BIỂU .viii DANH MỤC CÁC HÌNH ẢNH Chương 1: TỔNG QUAN 1.1 Lý chọn đề tài 1.2 Mục đích, nhiệm vụ đề tài .3 1.2.1 Mục đích 1.2.2 Nhiệm vụ 1.2.3 Phương pháp nghiên cứu .4 1.2.4 Kết đạt Chương 2: CƠ SỞ LÝ THUYẾT 2.1 Giới thiệu ReactJS 2.1.1 ReactJS gì? 2.1.2 Các tính ReactJS 2.1.3 Tại nên sử dụng ReactJS? .7 2.2 Giới thiệu NextJS 2.2.1 NextJS gì? 2.2.2 Tại sử dụng NextJS? 2.3 Giới thiệu NodeJS 2.3.1 NodeJS gì? 2.3.2 Những ứng dụng viết NodeJS 2.3.3 Lý chọn NodeJS? .10 iv 2.4 Giới thiệu Framework NestJs: 10 2.4.1 NestJS gì? 10 2.4.2 Cấu trúc NestJS 11 2.4.3 Router NestJS 12 2.4.4 Middleware NestJS 12 2.5 Giới thiệu MySQL 13 2.5.1 Giới thiệu sở liệu SQL 13 2.5.2 Giới thiệu MySQL 14 Chương 3: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 16 3.1 Khảo sát trạng 16 3.2 Xác định yêu cầu 21 3.2.1 Lược đồ Use case 21 3.2.2 Mô tả chức năng, kịch 22 Chương 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 38 4.1 Phân tích hệ thống 38 4.1.1 Chức phía Frontend 38 4.1.2 Chức phía Backend 42 4.2 Thiết kế hệ thống 45 4.2.1 Lược đồ lớp 45 4.2.2 Lược đồ 46 4.3 Thiết kế sở liệu 69 4.3.1 Sơ đồ ERD 69 4.3.2 Lược đồ sở liệu 70 4.3.3 Mô tả liệu 71 4.4 Thiết kế giao diện 73 4.4.1 Trang quản trị 73 4.4.2 Trang người dùng 79 v