TRƯỜNG ĐẠI HỌC ĐIỆN LỰC KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN LẬP TRÌNH WEB NÂNG CAO ĐỀ TÀI XÂY DỰNG WEB BÁN LAPTOP Sinh viên thực hiện................................................................................................................. Giảng viên hướng.
TRƯỜNG ĐẠI HỌC ĐIỆN LỰC KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN LẬP TRÌNH WEB NÂNG CAO ĐỀ TÀI: XÂY DỰNG WEB BÁN LAPTOP Sinh viên thực : ĐÀO NGUYÊN TRUNG LÝ QUANG SANG Giảng viên hướng dẫn : CẤN ĐỨC ĐIỆP Ngành : CÔNG NGHỆ THÔNG TIN Chuyên ngành : CÔNG NGHỆ PHẦN MỀM Lớp : D15CNPM6 Khóa : 2020-2024 Hà Nội, tháng 12 năm 2022 MỤC LỤC Phần Mục tiêu đề tài Phần Phân tích tốn 2.1 Bài toán đặt 2.2 Sơ đồ chức 2.2.1 Tổng quát chức hệ thống: 2.2.2 Mô tả chức 2.3 Phân tích chức nghiệp vụ 2.3.1 Đăng ký người dùng: 2.3.2 Đăng nhập người dùng : 2.3.3 Đăng xuất người dùng 2.3.3 Tạo cộng đồng .7 2.3.4 Chỉnh sửa cộng đồng 2.3.5 Xem cộng đồng 2.3.6 Tạo đăng .10 2.3.7 Tạo bình luận 11 2.3.8 Upvote/downvote đăng 12 2.3.9 Upvote/downvote bình luận .13 2.4: Hiển thị 13 2.4 Thiết kế CSDL 14 2.4.1 Bảng người dùng(users): 14 2.4.2 Bảng đăng(posts): 15 2.4.3 Bảng Bình luận(comments): .15 2.4.4 Bảng cộng đồng (subs): .15 2.4.5 Bảng votes: 15 2.4.6 Kết nối bảng: .16 Phần Giải pháp cài đặt .16 3.1 Giải pháp công nghệ lựa chọn 16 3.2 Cài đặt 17 Phần Kết 19 4.1 Kết đạt 19 4.2 Các nội dung hạn chế .19 4.3 Hướng phát triển 20 4.4 Kết luận 20 TÀI LIỆU THAM KHẢO 21 MỤC LỤC HÌNH ẢNH Hình 3.1 Sơ đồ chức Hình 2.1 Đăng ký hệ thống Hình 2.2 Đăng nhập hệ thống Hình 2.3 Đăng xuất người dùng Hình 2.4 Tạo cộng đồng Hình 2.5 Chỉnh sửa cộng đồng Hình 2.6 Xem cộng đồng 10 Hình 2.7 Tạo đăng .11 Hình 2.8 Tạo bình luận 12 Hình 2.9 Upvote/downvote đăng 13 Hình 2.9 Upvote/downvote bình luận .14 Hình 2.10 Quan hệ bảng .16 Hình 3.1 Giao diện đăng nhập 17 Hình 3.2 Giao diện đăng ký .18 Hình 3.3 Giao diện 18 Hình 3.4 Giao diện tạo cộng đồng .19 Hình 3.5 Giao diện chi tiết đăng 19 MỤC LỤC BẢNG Bảng 2.1 Chi tiết bảng Người dùng 14 Bảng 2.2 Chi tiết bảng đăng 15 Bảng 2.3 Chi tiết bảng bình luận .15 Bảng 2.4 Chi tiết bảng cộng đồng .15 Bảng 2.5 Chi tiết bảng cộng đồng .16 PHIẾU CHẤM ĐIỂM Sinh viên thực hiện: Họ tên Chữ ký Ghi Chữ ký Ghi Đào Nguyên Trung MSV:19810310448 Lý Quang Sang MSV:19810310001 Giảng viên chấm: Họ tên Giảng viên chấm : Giảng viên chấm : Phần Mục tiêu đề tài Nhóm chúng em chọn đề tài “Xây dựng web bán laptop ” với mục tiêu chép lại giao diện tính đặc trưng trang web mức với hệ thống đăng ký, đăng nhập, bán hàng toán Mặc dù cố gắng để hồn thành cơng việc, thời gian có hạn thiếu kinh nghiệm kỹ chưa thành thạo nên việc phân tích, thiết kế lập trình cịn nhiều thiếu sót, em mong thầy góp ý, bổ sung để em hồn thiện báo cáo Em xin chân thành cảm ơn! Phần Phân tích tốn 2.1 Bài tốn đặt - Cần xây dựng mạng xã hội nhỏ - Là người dùng , tơi có thể: - Đăng nhập Đăng xuất Đăng ký Tạo cộng đồng (thêm, sửa ảnh bìa) Tạo đăng Upvote downvote đăng Bình luận vào viết Upvote downvote bình luận 2.2 Sơ đồ chức 2.2.1 Tổng quát chức hệ thống: Hình 3.1 Sơ đồ chức 2.2.2 Mô tả chức Truy cập hệ thống: Người dùng đăng ký, đăng nhập, thoát khỏi hệ thống Tương tác cộng đồng : Người dùng tạo cộng đồng, tạo đăng cộng đồng, chỉnh sửa cộng đồng chủ cộng đồng Tương tác người dùng: Người dùng upvote dowvote đăng, bình luận 2.3 Phân tích chức nghiệp vụ 2.3.1 Đăng ký người dùng: Đặc tả chức : Bước 1: Người dùng truy cập vào hệ thống, chọn chức đăng ký Bước 2: Hệ thống gửi yêu câu nhập thông tin theo mẫu Bước 3: Người dùng nhập thông tin Bước 4: Hệ kiểm tra liệu 4.1: Nếu liệu khơng hợp lệ báo lỗi cho người dùng yêu cầu nhập lại cho phép người dùng 4.2: Nếu liệu hợp lệ lưu vào sở liệu đưa người dùng trang chủ Hình 2.1 Đăng ký hệ thống Hình 2.3 Đăng xuất người dùng 2.3.3 Tạo cộng đồng Bước 1: Người dùng đăng nhập Bước 2: Chọn tạo cộng đồng 2.1: Nếu liệu không hợp lệ, hệ thống báo lỗi 2.2: Nếu liệu hợp lệ, hệ thống tạo cộng đồng chuyển hướng người dùng trang cộng đồng Hình 2.4 Tạo cộng đồng 2.3.4 Chỉnh sửa cộng đồng Bước 1: Người dùng đăng nhập Bước 2: Chọn chỉnh sửa cộng đồng 2.1: Nếu liệu không hợp lệ, hệ thống báo lỗi 2.2: Nếu liệu hợp lệ, hệ thống tạo cộng đồng xác nhận thành cơng Hình 2.5 Chỉnh sửa cộng đồng 2.3.5 Xem cộng đồng Bước 1: Người dùng đăng nhập Bước 2: Hiển thị toàn đăng cộng đồng với infinite scroll Bước 3: Chọn xem chi tiết đăng 2.1: Đưa người dùng trang chi tiết 2.2: Hiển thị chi tiết đăng Hình 2.6 Xem cộng đồng 2.3.6 Tạo đăng Bước 1: Người dùng đăng nhập Bước 2: Chọn tạo đăng cộng đồng 2.1: Nếu liệu không hợp lệ, hệ thống báo lỗi 2.2: Nếu liệu hợp lệ, hệ thống tạo cộng đồng chuyển hướng người dùng trang đăng 10 Hình 2.7 Tạo đăng 2.3.7 Tạo bình luận Bước 1: Người dùng đăng nhập Bước 2: Người dùng bình luận 2.1: Nếu liệu không hợp lệ, hệ thống báo lỗi 2.2: Nếu liệu hợp lệ, hệ thống tạo cộng đồng hiển thị bình luận 11 Hình 2.8 Tạo bình luận 2.3.8 Upvote/downvote đăng Bước 1: Người dùng đăng nhập Bước 2: Người dùng chọn upvote downvote 2.1: Tìm kiếm đăng cần tính điểm 2.2: Thay đổi điểm dựa theo lựa chọn người dùng 2.3: Cập nhật vào CSDL 2.4: Hiển thị 12 Hình 2.9 Upvote/downvote đăng 2.3.9 Upvote/downvote bình luận Bước 1: Người dùng đăng nhập Bước 2: Người dùng chọn upvote downvote 2.1: Tìm kiếm bình luận cần tính điểm 2.2: Thay đổi điểm dựa theo lựa chọn người dùng 2.3: Cập nhật vào CSDL 2.4: Hiển thị 13 Hình 2.9 Upvote/downvote bình luận 2.4 Thiết kế CSDL Cơ sở liệu tạo thông qua TypeORM lưu vào PostgreSQL server 2.4.1 Bảng người dùng(users): STT Tên Kiểu id int username varchar(20) email varchar(100) password varchar(255) imageUrl varchar(255) createdAt datetime updatedAt datetime Bảng 2.1 Chi tiết bảng Người dùng 14 2.4.2 Bảng đăng(posts): STT Tên Kiểu id int username varchar(20) email varchar(100) password varchar(255) imageUrl varchar(255) createdAt datetime updatedAt datetime Bảng 2.2 Chi tiết bảng đăng 2.4.3 Bảng Bình luận(comments): STT Tên Kiểu id int username varchar(20) email varchar(100) password varchar(255) imageUrl varchar(255) createdAt datetime updatedAt datetime Bảng 2.3 Chi tiết bảng bình luận 2.4.4 Bảng cộng đồng (subs): STT Tên Kiểu id int username varchar(20) email varchar(100) password varchar(255) imageUrl varchar(255) createdAt datetime updatedAt datetime Bảng 2.4 Chi tiết bảng cộng đồng 2.4.5 Bảng votes: STT Tên id username email password Kiểu int varchar(20) varchar(100) varchar(255) 15 imageUrl varchar(255) createdAt datetime updatedAt datetime Bảng 2.5 Chi tiết bảng cộng đồng 2.4.6 Kết nối bảng: Hình 2.10 Quan hệ bảng Phần Giải pháp cài đặt 3.1 Giải pháp cơng nghệ lựa chọn - Ngơn ngữ chính: Typescript(Javascript) - Hệ quản trị sở liệu: PostgreSQL - Công cụ hỗ trợ: pgAdmin 4, Visual Studio Code 2020, git, github - Máy chủ(local): expres server - Môi trường: nodejs 16 - Dev dependencies: @types/bcrypt, @types/cookie, @types/cookie-parser, @types/cors,@types/express,@types/jsonwebtoken,@types/morgan, @types/multe,@types/node, concurrently, morgan, nodemon, ts-node, typescript - Dependencies: bcrypt, class-transformer, class-validator, cookie, ookie-parser, cors, dotenv, express, jsonwebtoken, multer, pg, reflect-metadata, typeorm, typeorm-seeding - Framework: ReactJS, ExpressJS 3.2 Cài đặt - Giao diện thiết kế dựa giao diện reddit - Server frontend chạy qua môi trường nodejs - Cơ sở liệu chạy localhost 3.3 Giao diện Web App 17 Hình 3.1 Giao diện đăng nhập Hình 3.2 Giao diện đăng ký 18 Hình 3.3 Giao diện Hình 3.4 Giao diện tạo tốn 19 Phần Kết 4.1 Kết đạt - Xây dựng thành công web bán hàng đơn giản web - Đặt yêu cầu nêu phần 2.1 4.2 Các nội dung hạn chế - Giao diện đơn giản, thiếu nhiều so với gốc - Web chạy localhost, chưa chạy tên miền - Web cịn thiếu nhiều tính so với gốc - Người dùng không chọn gia nhập cộng đồng họ muốn - Người dùng đăng ký chưa tạo ảnh riêng cho tài khoản 4.3 Hướng phát triển - Tiếp tục phát triển ,cải thiện nội dung hạn chế - Sớm đưa website lên server có tên miền 4.4 Kết luận Thơng qua việc tìm hiểu đề tài giúp em có nhìn tồn diện việc xây dựng web app hồn chỉnh Vì thời gian có hạn nên nhóm khơng thể hồn thiện tồn chức năng, viết cịn nhiều sai sót, chúng em mong nhận góp ý thầy Em xin chân thành cảm ơn! 20 TÀI LIỆU THAM KHẢO [1] https://google.com [2] https://nodejs.org [3] https://reactjs.org [4] https://www.reddit.com/ [5] https://www.typescriptlang.org/ [6] https://typeorm.io/ [7] https://tailwindcss.com/ [8] https://jwt.io/ 21 ... kinh nghiệm kỹ chưa thành thạo nên việc phân tích, thiết kế lập trình cịn nhiều thiếu sót, em mong thầy góp ý, bổ sung để em hồn thiện báo cáo Em xin chân thành cảm ơn! Phần Phân tích toán 2.1 Bài... diện Web App 17 Hình 3.1 Giao diện đăng nhập Hình 3.2 Giao diện đăng ký 18 Hình 3.3 Giao diện Hình 3.4 Giao diện tạo toán 19 Phần Kết 4.1 Kết đạt - Xây dựng thành công web bán hàng đơn giản web. .. chấm : Phần Mục tiêu đề tài Nhóm chúng em chọn đề tài “Xây dựng web bán laptop ” với mục tiêu chép lại giao diện tính đặc trưng trang web mức với hệ thống đăng ký, đăng nhập, bán hàng toán Mặc dù