Bài tập lớn môn phát triển ứng dụng web (Có code)

Nhóm 12:
TRẦN TRỌNG TRƯỜNG (1421050221) (C)
NGUYỄN THẾ QUANG (1421050157)
ĐỖ ĐÌNH NHƯỢNG (1421050149)

WEBSITE BÁN THIẾT BỊ CHƠI GAME CHO PC, L
BÀI TẬP LỚN
MÔN: PHÁT TRIỂN ỨNG DỤNG WEB + BTL 4080106
Giáo viên hướng dẫn:
Ths. Hoàng Anh Đức

Hà Nội, 2018


Bài tập lớn môn phát triển ứng dụng web + BTL

2

2

Lớp Tin trắc địa k59


Bài tập lớn môn phát triển ứng dụng web + BTL
MỤC LỤC

3

3

Lớp Tin trắc địa k59

Bài tập lớn Môn Phát Triển Ứng Dụng Web + BTL

DANH MỤC CÁC HÌNH VẼ

DANH MỤC CÁC BẢNG BIỂU

4

4

Lớp: Tin Trắc Địa k59


Bài tập lớn Môn Phát Triển Ứng Dụng Web + BTL

MỞ ĐẦU
Ngày nay với sự phát triển không ngừng của các ngành khoa học kỹ
thuật CNTT cũng không nằm ngoài vòng xoáy phát triển đó. Cùng với sự phát
triển mạnh mẽ của các ngành khoa học kỹ thuật khác. CNTT đã có những ứng
dụng to lớn trong hầu hết các lĩnh vực của đời sống. Đây là môt ngành khoa
học mũi nhọn ảnh hưởng trực tiếp đến đời sống xã hội.
Trong bất cứ lĩnh vực nào, thương mại điện tử cũng có lợi thế. Nó không
chỉ làm giảm thời gian mà còn làm giảm chi phí cho mọi vấn đề giao dịch của
con người. Việc kinh doanh qua mạng không chỉ đáp ứng nhu cầu của con
người mà còn giúp cho người sử dụng so sánh giá ở nhiều nơi để mua những
mặt hàng tốt, giá hợp lý. Với những kiến thức đã học và thời gian thực tế,
chúng em xin lựa chọn đề tài: “Xây dựng trang web bán thiết bị chơi game
cho PC” trong khuôn khổ bài tập lớn môn phát triển ứng dụng web.

Đây là ứng dụng thực tế khá hay, tuy không phải là mới nhưng do kinh
nghiệm của chúng em chưa nhiều và còn nhiều hạn chế cũng như sai sót
mong thầy và các bạn đóng góp ý kiến để đề tài được hoàn thiện hơn.


Bài tập lớn Môn Phát Triển Ứng Dụng Web + BTL

CHƯƠNG 1 TỔNG QUAN
1.1 Mục tiêu hệ thống
1.1.1 Đối với khách hàng
 Cung cấp cho khách hàng chức năng đưa ra những ý kiến về các sản phẩm
thông qua yahoo, email và đường dây nóng. Đây có thể coi là những công cụ
tư vấn khách quan nhất giúp người mua có thể chọn cho mình sản phẩm ưng
ý nhất.
 Cùng với chức năng đặt mua và hình thức thanh toán nhanh nhất, website sẽ
tiết kiệm rất nhiều thời gian cho việc chọn và mua. Việc mua và bán sẽ thuận
tiện hơn chỉ với một click chuột.
 Website cung cấp nguồn thông tin về sản phẩm rõ nguồn gốc, xuất sứ. Đảm
bảo chất lượng tất cả các mặt hàng.
 Chức năng tìm kiếm sản phẩm cũng giúp khách hàng có lựa chọn thuận tiện,
nhanh chóng để mua được sản phẩm mình cần nhanh nhất.
1.1.2 Đối với người quản trị
 Có thể dễ dàng cập nhật những sản phẩm hot, bán chạy nhất theo xu

hướng khách hàng.
 Dễ dàng quản lý sản phẩm, danh mục sản phẩm
 Dễ dàng tìm kiếm được thông tin khách hàng, thông tin sản phẩm.
 Cập nhật được trạng thái đơn hàng.
 Tạo báo cáo thống kê, đưa ra danh sách các mặt hàng bán chạy.
 Phải có cơ chế đăng nhập để xác định người có quyền hạn mới có thể

đăng nhập vào hệ thống quản trị của website.


Bài tập lớn Môn Phát Triển Ứng Dụng Web + BTL
 Quản lý, cập nhật trạng thái được danh sách tài khoản khách hàng.
 Có thể phân quyền người dùng

1.2 Phạm vi hệ thống
STT

Đối tượng

Vai trò, quyền hạn

1

Thành viên

2

Admin

3

Khách vãng lai

Thực hiện xem hàng, mua hàng, xem danh sách
yêu thích, lịch sử giao dịch
Có mọi quyền hạn.

Xem sản phẩm, đăng ký

Bảng 1.1: Bảng phạm vi hệ thống


Bài tập lớn Môn Phát Triển Ứng Dụng Web + BTL

CHƯƠNG 2: CẤU TRÚC WEBSITE
Website được chia làm 2 phần một phía Trang người dùng ( frontend ), phía
người quản trị (backend)
2.1 Phía người quản trị ( backend )
Gồm các thứ mục:
•
•
•
•

Connect: chứa file kết nối csdl
Category : chưa các file php của chức năng quản lý danh mục
Product: chưa các file php của chức năng quản lý quản lý sản phẩm
Order: chưa các file php của chức năng quản lý quản lý quản lý đơn

•
•
•
•

hàng
Public: Chứa các file css, boostrap, js, image
Upload: chứa các ảnh sản phẩm được upload

Index.php, footer,php, header.php hiển thị giao diện phần backend
Login.php, logout.php chức năng đăng nhập, đăng xuất phía backend

2.2 Phía người dùng (frontend)
•
•
•
•
•

Connect: chứa file kết nối csdl
Public: Chứa các file css, boostrap, js, image
Index.php, footer,php, header.php hiển thị giao diện phần fronend
Login.php, logout.php chức năng đăng nhập, đăng xuất phía fronend
Sigup.php chức năng đăng ký


Bài tập lớn Môn Phát Triển Ứng Dụng Web + BTL

CHƯƠNG 3: ĐẶC TẢ CHỨC NĂNG
3.1 Mô hình phân rã chức năng

Hình 3.1: Mô hình phân rã chức năng phía backend

Hình 3.2: Mô hình phân rã chức năng phí fronend


Bài tập lớn Môn Phát Triển Ứng Dụng Web + BTL

3.2 Các chức năng của website

3.2.1 Đối với khách vãng lai





Xem thông tin sản phẩm
Tìm kiếm sản phẩm
Thêm sản phẩm vào giỏ
Đăng ký tài khoản

3.2.2 Đối với người dùng có tài khoản







Xem thông tin sản phẩm
Thêm sản phẩm vào giỏ hàng
Xem thông tin đơn hàng
Tìm kiếm sản phẩm
Thanh toán
Đăng nhập, đăng xuất

3.2.3 Đối với admin








Đăng nhập, đăng xuất trong phẩn quản trị
Quản lý danh mục
Quản lý sản phẩm
Quản lý đơn hàng
Quản lý người dùng
Quản lý hóa đơn


Bài tập lớn Môn Phát Triển Ứng Dụng Web + BTL

CHƯƠNG 4: THIẾT KẾ DỮ LIỆU
4.1 Bảng user
STT
Tên trường
1
u_id
2
u_fullname
3
username
4
email
5
password
6
remember_token

7
role
8
Created_at
9
Update_at

Kiểu dữ liệu
int
Varchar
Varchar
Varchar
Varchar
Varchar
tinyint
timestamp
timestamp

Độ rộng
11
150
150
150
150
150
1

Ràng buộc
Primary key
Not null

Not null
Not null
Not null

Mô tả
Khóa chính
Họ tên người dựng
Tên tài khoản
Email đăng ký
Mật khẩu
Lưu đăng nhập
Phân quyền
Ngày khởi tạo
Ngày chỉnh sửa

Bảng 4.2: Bảng user
GHI CHÚ:
- Username chính là tài khoản đăng ký của người dùng
- Password phải lớn hơn hoặc bẳng 6 ký tự
- Email phụ dùng để liên hệ khi có sự cố với tài khoản
- User với Level = 1 là Admin, Level = 0 là User thông thường
4.2 Bảng product
STT

Tên Trường

Kiểu Dữ Liệu

Độ Rộng

Rằng Buộc

Mô tả

1

pro_id

int

11

Primary key

Khóa chính

2

pro_name

varchar

255

Not null

Tên sản phẩm

3

cat_id

int

11

Foreign key

Khóa ngoại liên kết đến
bảng Category

4

content

text

5

image

varchar

255

Ảnh sản phẩm

6

price

int

11

Giá

7

sale_price

int

11

Giá khuyến mại

8

status

tinyint

1

9

Hot

tinyint

0

10

created

timestamp

Ngày khởi tạo

11

updated

timestamp

Ngày chỉnh sửa

Mô tả sản phẩm

Bảng 4.3: Bảng product

Độ hot


Bài tập lớn Môn Phát Triển Ứng Dụng Web + BTL

GHI CHÚ:
- status lv = 1 là còn hàng, lv = 0 là hết hàng

- hot lv = 1 là hàng hot, lv = 0 là hàng bình thường
4.3 Bảng category
STT

Tên Trường

Kiểu Dữ Liệu

Độ Rộng

Rằng Buộc

Mô tả

1

cat_id

int

11

Primary key

Khóa chính

2

cat_name

varchar

150

Not null

Tên danh mục

3

parent_id

int

11

4

status

tinyint

1

5

created

timestamp

Ngày khởi tạo

6

updated

timestamp

Ngày chỉnh sửa

Bảng 4.4: Bảng category
GHI CHÚ:
- parent_id khóa ngoại
4.4 Bảng orders
STT

Tên Trường

Kiểu Dữ Liệu

Độ Rộng

Ràng Buộc

Mô tả

1

id

int

11

Primary key

Khóa chính

2

user_id

int

11

Foreign key

Khóa ngoại

3

Shipping_name

varchar

255

Not Null

4

Shipping_phone

int

15

Not Null

5

Shipping_adress

varchar

255

Not Null

6

Shipping_metho
d

varchar

255

Not Null

Phương thức
chuyển hàng

7

Payment_method

varchar

255

Not Null

Phương thức
thanh toán

8

total_amount

int

11

9

status

tinyint

1

10

Created_at

timestamp

Ngày khởi tạo

11

Update_at

timestamp

Ngày chỉnh sửa

Tổng tiền

Bảng 4.5: Bảng order
GHI CHÚ:
- User_id là khóa ngoại liên kết đến bảng user để lấy thông tin của khách hàng khi
đặt hang.


Bài tập lớn Môn Phát Triển Ứng Dụng Web + BTL

- Shipping_name, Shipping_phone, Shipping_adress là các thông tin để chuyển đơn

hang.
- status lv = 1 đơn hang chờ xác nhận, lv = 0 đơn hàng được xác nhận
4.5 Bảng order_detail
STT

Tên Trường

Kiểu Dữ Liệu

Độ Rộng

Rằng Buộc

Mô tả

1

order_id

int

11

Primary key

Khóa ngoại liên kết với
bảng orders

2

product_id

int

11

Foreign key

Khóa ngoại liên kết
đến bảng product

3

quantity

int

11

Not Null

Số lượng

4

price

int

11

Not Null

Đơn giá

Bảng 4.6: Bảng order_detail
GHI CHÚ:

- Bảng order_detail là để xem thông tin chi tiết đơn hàng
4.6 Sơ đồ quan hệ giữa các bảng trong Database

Hình 4.3: Sơ đồ quan hệ
CHÚ THÍCH:

- Quan hệ giữa các thực tế từ users - orders, orders – order_detail,
order_detail – product, category-product đều là quan hệ 1-n .


Bài tập lớn Môn Phát Triển Ứng Dụng Web + BTL

- Khi người dung đăng nhập vào hệ thống mà muốn đặt hàng thì thông tin của
user sẽ được chuyển vào trong bnarg orders và id của orders vừa tạo và thông
tin sản phẩm sẽ được đẩy vào bảng order_detail


Bài tập lớn Môn Phát Triển Ứng Dụng Web + BTL

CHƯƠNG 5: THIẾT KẾ GIAO DIỆN
5.1 Frontend
5.1.1 From Đăng nhập

Hình 5.4: Giao diện đăng nhập


Bài tập lớn Môn Phát Triển Ứng Dụng Web + BTL

5.1.2 Trang index

Hình 5.5: Trang index


Bài tập lớn Môn Phát Triển Ứng Dụng Web + BTL

5.1.3 Trang chi tiết sản phẩm

Hình 5.6: Trang chi tiết sản phẩm
5.1.4 Trang giỏ hàng


Bài tập lớn Môn Phát Triển Ứng Dụng Web + BTL

Hình 5.7: Trang giỏ hàng
5.1.5 Trang thanh toán

Hình 5.8: Trang thanh toán


Bài tập lớn Môn Phát Triển Ứng Dụng Web + BTL

5.1.6 Trang giới thiệu

Hình 5.9: Trang giới thiệu
5.1.7 Trang liên hệ

Hình 5.10: Trang liên hệ


Bài tập lớn Môn Phát Triển Ứng Dụng Web + BTL

5.2 Backend
5.2.1 Trang đăng nhập

Hình 5.11: Trang đăng nhập admin
5.2.2 Trang quản trị

Hình 5.12: Trang quản trị


Bài tập lớn Môn Phát Triển Ứng Dụng Web + BTL

5.2.3 Các trang quản lý

Hình 5.13: Giao diện quản lý danh mục

Hình 5.14: Giao diện quản lý sản phẩm


Bài tập lớn Môn Phát Triển Ứng Dụng Web + BTL

Hình 5.15: Giao diện quản lý người dùng

Hình 5.16: Giao diện quản lý đơn hàng


Bài tập lớn Môn Phát Triển Ứng Dụng Web + BTL

5.2.4 Các trang thêm

Hình 5.17: Thêm danh mục

Hình 5.18: Thêm sản phẩm


Bài tập lớn Môn Phát Triển Ứng Dụng Web + BTL

5.2.5 Trang chi tiết đơn hàng

Hình 5.19: Giao diện chi tiết đơn hàng


Bài tập lớn Môn Phát Triển Ứng Dụng Web + BTL

CHƯƠNG 6: KẾT LUẬN
Sau quá trình tham khảo và tìm hiểu một số web thương mại điện tử, tim
hiểu như cầu của thị trường, nhóm em đã thiết kế và tạo ra “ Website bán thiết
bị chơi game cho PC “ .
Do lượng thời gian không đủ và kiến thức còn eo hẹp nên trang web còn
thiếu nhiều chức năng, nhóm em rất mong thầy có thêm góp ý để bọn em trau
dồi thêm hiểu biết cho bản thân và hoàn thiện trang web này được đầy đủ
chính xác hơn nữa.

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