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................................................................................................................. 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 hiện : ĐÀO NGUYÊN TRUNG

LÝ QUANG SANG Giảng viên hướng dẫn : CẤN ĐỨC ĐIỆP

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

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êusao 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ảnvớ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 để hoà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ântí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ể hoà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 toán

- 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.2 Mô tả chức năng

 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

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ệ 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

Phần 4 Kết quả

4.1 Kết quả đạt được

- Xây dựng thành công một bản sao của web bán hàng đơn giản trên web

- Đặt được những yêu cầu cơ bản đã nêu ở phần 2.1

4.2 Các nội dung hạn chế.

- Giao diện còn đơn giản, thiếu nhiều nếu so với bản gốc

- Web còn chạy trên localhost, chưa được chạy trên một tên miền

- Web còn thiếu nhiều tính năng nếu so với bản gốc

- Người dùng không được chọn gia nhập cộng đồng họ muốn

- Người dùng khi đăng ký cũng chưa tạo được ả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 còn hạn chế

- Sớm đưa được website lên server và có tên miền

4.4 Kết luận

Thông qua việc tìm hiểu đề tài này giúp em có cái nhìn toàn diện hơn vềviệc xây dựng một web app hoàn chỉnh Vì thời gian có hạn nên nhóm không thểhoàn thiện toàn bộ chức năng, bài viết cũng còn nhiều sai sót, chúng em mongnhận được sự góp ý của thầy cô

Em xin chân thành cảm ơn!

20

TÀI LIỆU THAM KHẢO