báo cáo lập trình web nâng cao ĐHĐL

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

: ĐÀ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

Chun 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 1. Mục tiêu đề tài..................................................................................1
Phần 2. Phân tích bài toán.............................................................................2
2.1 Bài toán đặt ra......................................................................................2
2.2. Sơ đồ chức năng..................................................................................2
2.2.1. Tổng quát các chức năng của hệ thống:........................................2
2.2.2. Mô tả chức năng............................................................................3
2.3 Phân tích chức năng nghiệp vụ................................................................3
2.3.1. Đăng ký người dùng:.....................................................................3
2.3.2. Đăng nhập người dùng :................................................................5
2.3.3 Đăng xuất của người dùng.............................................................6
2.3.3. Tạo cộng đồng...............................................................................7
2.3.4 Chỉnh sửa cộng đồng......................................................................8
2.3.5 Xem cộng đồng..............................................................................9
2.3.6 Tạo bài đăng.................................................................................10
2.3.7 Tạo bình luận................................................................................11
2.3.8 Upvote/downvote bài đă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 bài đă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 3 Giải pháp và 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 4. Kết quả...........................................................................................19
4.1 Kết quả đạt được................................................................................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 năng............................................................................2
Hình 2.1 Đăng ký hệ thống...........................................................................4
Hình 2.2 Đăng nhập hệ thống........................................................................6
Hình 2.3 Đăng xuất người dùng....................................................................7
Hình 2.4 Tạo cộng đồng................................................................................8
Hình 2.5 Chỉnh sửa cộng đồng......................................................................9
Hình 2.6 Xem cộng đồng............................................................................10
Hình 2.7 Tạo bài đăng.................................................................................11
Hình 2.8 Tạo bình luận................................................................................12
Hình 2.9 Upvote/downvote bài đăng...........................................................13
Hình 2.9 Upvote/downvote bình luận.........................................................14
Hình 2.10 Quan hệ giữa các 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 chính............................................................................18
Hình 3.4 Giao diện tạo cộng đồng...............................................................19
Hình 3.5 Giao diện chi tiết bài đă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 bài đă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ọ và tên

Chữ ký

Ghi chú

Chữ ký

Ghi chú

Đào Nguyên Trung
MSV:19810310448
Lý Quang Sang
MSV:19810310001
Giảng viên chấm:
Họ và tên
Giảng viên chấm 1 :

Giảng viên chấm 2 :

Phần 1. 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
sao chép lại giao diện và các tính năng đặc trưng của trang web ở mức cơ bản
với hệ thống đăng ký, đăng nhập, bán hàng và thanh toán.
Mặc dù đã rất cố gắng để hồn thành cơng việc, nhưng do thời gian có
hạn và thiếu kinh nghiệm cũng như kỹ năng cịn chưa thành thạo nên việc phân
tích, thiết kế và lập trình cịn nhiều thiếu sót, em mong thầy cơ sẽ góp ý, bổ sung
để em có thể hồn thiện báo cáo hơn nữa.
Em xin chân thành cảm ơn!

1


Phần 2. Phân tích bài tốn
2.1 Bài tốn đặt ra
- Cần xây dựng một mạng xã hội nhỏ
- Là một 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 bài đăng
Upvote hoặc downvote một bài đăng
Bình luận vào bài viết
Upvote hoặc downvote một bình luận

2.2. Sơ đồ chức năng
2.2.1. Tổng quát các chức năng của hệ thống:

Hình 3.1. Sơ đồ chức năng.

2.2.2. Mơ tả chức năng
2


 Truy cập hệ thống: Người dùng có thể đăng ký, đăng nhập, thoát khỏi hệ
thống.
 Tương tác cộng đồng : Người dùng có thể tạo cộng đồng, tạo bài đăng
trong cộng đồng, chỉnh sửa cộng đồng nếu là chủ cộng đồng
 Tương tác người dùng: Người dùng có thể upvote hoặc dowvote bài
đăng, bình luận của nhau.

2.3 Phân tích chức năng nghiệp vụ
2.3.1. Đăng ký người dùng:
Đặc tả chức năng :
Bước 1: Người dùng truy cập vào hệ thống, chọn chức năng đă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 dữ liệu
4.1: Nếu dữ liệu khơng hợp lệ thì báo lỗi cho người dùng và
yêu cầu nhập lại hoặc cho phép người dùng thoát.
4.2: Nếu dữ liệu hợp lệ thì lưu vào cơ sở dữ liệu và đưa người
dùng về trang chủ

3

Hình 2.1 Đăng ký hệ thống

4


2.3.2. Đăng nhập người dùng :
Đặc tả chức năng
Bước 1 : Người dùng truy cập vào trang:
1.1: Nếu đã được đặt token, đưa về trang chủ
1.2: Nếu chưa được đặt token, đưa về trang đăng nhập
Bước 2 : Hệ thống kiểm tra dữ liệu đăng nhập
2.1 : Nếu dữ liệu không tồn tại, hiện thông báo sai tài khoản
hoặc mật khẩu.
2.2 : Nếu dữ liệu tồn tại, gán token cho người dùng và đưa họ
về trang chủ.

5


Hình 2.2 Đăng nhập hệ thống

2.3.3 Đăng xuất của người dùng
Đặc tả chức năng :
Bước 1: Người dùng chọn nút đăng xuất
Bước 2: Hệ thống xóa token người dùng trong bảng phiên đăng nhập và.
Bước 3: Đưa người dùng về trang đăng nhập.

6

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 dữ liệu không hợp lệ, hệ thống báo lỗi
2.2: Nếu dữ liệu hợp lệ, hệ thống tạo mới cộng đồng và
chuyển hướng người dùng về trang cộng đồng

7


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 dữ liệu không hợp lệ, hệ thống báo lỗi
2.2: Nếu dữ liệu hợp lệ, hệ thống tạo mới cộng đồng và xác
nhận thành công

8


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 bộ bài đăng của các cộng đồng với infinite

scroll
Bước 3: Chọn xem chi tiết bài đăng
2.1: Đưa người dùng về trang chi tiết
2.2: Hiển thị chi tiết bài đăng

9


Hình 2.6 Xem cộng đồng

2.3.6 Tạo bài đăng
Bước 1: Người dùng đăng nhập
Bước 2: Chọn tạo bài đăng trong cộng đồng
2.1: Nếu dữ liệu không hợp lệ, hệ thống báo lỗi
2.2: Nếu dữ liệu hợp lệ, hệ thống tạo mới cộng đồng và
chuyển hướng người dùng về trang của bài đăng

10


Hình 2.7 Tạo bài đă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 dữ liệu không hợp lệ, hệ thống báo lỗi
2.2: Nếu dữ liệu hợp lệ, hệ thống tạo mới cộng đồng và hiển
thị bình luận

11

Hình 2.8 Tạo bình luận

2.3.8 Upvote/downvote bài đăng
Bước 1: Người dùng đăng nhập
Bước 2: Người dùng chọn upvote hoặc downvote
2.1: Tìm kiếm bài đă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 bài đă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 hoặc 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ở dữ liệu được tạo thông qua TypeORM và lưu vào PostgreSQL server

2.4.1. Bảng người dùng(users):
STT
1
2
3
4
5
6
7

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 bài đăng(posts):
STT
1
2
3
4
5
6
7

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 bài đăng

2.4.3. Bảng Bình luận(comments):
STT
1
2
3
4
5
6
7

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
1
2
3
4
5
6
7

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

1
2
3
4

Tên
id
username
email
password

Kiểu
int
varchar(20)
varchar(100)
varchar(255)
15


5
6
7

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ệ giữa các bảng

Phần 3 Giải pháp và 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ị cơ sở dữ 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 được thiết kế dựa trên giao diện của reddit.
- Server và frontend được chạy qua môi trường nodejs
- Cơ sở dữ liệu chạy ở localhost
3.3. Giao diện của 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 chính

Hình 3.4 Giao diện tạo thanh toán

19