Tiểu luận lập trình web xây dựng website th i trang qu n áo phụ kiện

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT
VIỆN KỸ THUẬT – CÔNG NGHỆ
***

TIỂU LUẬN MƠN HỌC
LẬP TRÌNH WEBSITE
ĐỀ TÀI: XÂY DỰNG WEBSITE THỜI TRANG QUẦN ÁO
PHỤ KIỆN

GVHD: NGUYỄN HỮU VĨNH
LỚP: D17HT02
SINH VIÊN THỰC HIỆN
Nguyễn Tuân

1724801040113

Trần Văn Thái

1724801040081

BNH DƯƠNG – 12/2021

0

0


Bo co tiểu luận Lập trình web

NHẬN XÉT VÀ CHẤM ĐIỂM CỦA GIẢNG VIÊN HƯỚNG DẪN

1.Về thi độ, ý thức của sinh viên
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
2.Về đạo đức, tác phong:
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
3.Về kiến thức
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................

1

0

0


Bo co tiểu luận Lập trình web

LỜI CẢM ƠN
Nhóm chúng em xin chân thành cảm ơn thầy Nguyễn Hữu Vĩnh - Giảng
viên hướng dẫn mơn Lập trình web đã dành thời gian quý báu để hướng dẫn
chúng em trong môn học này. Cám ơn thầy đã tạo điều kiện và cung cấp
những kiến thức quan trọng để học tập và thực hiện đề tài này một cách tốt

nhất.
Thông qua quá trình thực hiện đồ án, chúng em đã phần nào củng cố, tích
lũy được những kiến thức về Lập trình web . Mặc dù đã cố gắng hết sức trong
tất cả quá trình từ học tập cho đến thực hiện đề tài này nhưng chúng em cũng
không thể tránh khỏi những sai sót nhất định. Chúng em rất mong nhận được
sự thơng cảm, bỏ qua và góp ý tận tình từ thầy và các bạn.
Chúng em xin chân thành cảm ơn!
Nhóm sinh viên thực hiện

2

0

0


Bo co tiểu luận Lập trình web

MỤC LỤC
LỜI CẢM ƠN....................................................................................................... 2
DANH MỤC HÌNH ẢNH.................................................................................... 5
CHƯƠNG 1: KHẢO SÁT YÊU CẦU BÀI TỐN ........................................... 6
I. Mơ tả bài tốn : ................................................................................................ 6
1. Giới thiệu bài tốn : ......................................................................................... 6
2. Mục đích xây dựng website : ........................................................................... 6
II. Phân tích bài tốn : ........................................................................................ 7
1. Sơ đồ Diagram : .............................................................................................. 7
2. Xác định Usecase: ........................................................................................... 9
3. Mô tả Usecase : .............................................................................................. 10
CHƯƠNG 2: THIẾT KẾ CƠ SỞ DỮ LIỆU ................................................... 16

Các bảng trong CSDL :............................................................................... 16
1. Bảng Category : ........................................................................................... 16
2. Bảng Menu : ................................................................................................ 16
3. Bảng Role : ................................................................................................. 17
4. Bảng User : .................................................................................................. 17
5. Bảng Size : ................................................................................................... 18
6. Bảng SizeShoe : ........................................................................................... 18
7. Bảng Ordersdetail : ...................................................................................... 19
8. Bảng Product : ............................................................................................. 19
9. Bảng Order : ................................................................................................ 20
CHƯƠNG 3: GIAO DIỆN WEBSITE.............................................................21
I. Hiện thực và Demo bài toán ứng dụng : ..................................................... 21
1. Trang chủ : ..................................................................................................... 21
2. Trang đăng nhập, đăng ký : ......................................................................... 23
3. Trang chi tiết sản phẩm : ............................................................................. 24
5. Giỏ hàng : .................................................................................................... 28
3

0

0


Bo co tiểu luận Lập trình web

6. Trang thanh tốn : ........................................................................................ 29
7. Trang đặt hàng thành công : ........................................................................ 30
8. Trang dành cho người quản trị : .................................................................. 31
CHƯƠNG 4: KẾT LUẬN ................................................................................. 35
I. Kết quả đạt được : .......................................................................................... 35

II. Những hạn chế : .......................................................................................... 35
III. Hướng phát triển : ....................................................................................... 35
TÀI LIỆU THAM KHẢO ................................................................................. 36

4

0

0


Bo co tiểu luận Lập trình web

DANH MỤC HÌNH ẢNH
Hình 1.Phân rã chức năng..................................................................................................... 7
Hình 2.Usecase Người dùng ................................................................................................. 8
Hình 3.Usecase Admin ......................................................................................................... 8
Hình 4.Lược đồ cơ s dữ liệu ............................................................................................... 9
Hình 5.Trang chủ website ................................................................................................... 21
Hình 6.Giao diện sản phẩm mới nhất ................................................................................. 22
Hình 7.Footer thơng tin liên hệ và thương hiệu ................................................................. 22
Hình 8. Form thơng tin đăng nhập ...................................................................................... 23
Hình 9.Form thơng tin đăng ký .......................................................................................... 23
Hình 10.Form người dùng tự chỉnh sửa thơng tin .............................................................. 24
Hình 11. Thông tin chi tiết sản phẩm về áo ........................................................................ 24
Hình 12. Thơng tin chi tiết về sản phẩm Phụ kiện ............................................................. 25
Hình 13.Thơng tin chi tiết sản phẩm về Giày ..................................................................... 25
Hình 14.Các sản phẩm gợi ý sản phẩm cùng loại .............................................................. 26
Hình 15. Tìm kiếm sản phẩm ............................................................................................. 27
Hình 16. Hiển thị sản phẩm được tìm kiếm ....................................................................... 27

Hình 17. Các thơng tin về chức năng của Giỏ hàng ........................................................... 28
Hình 18. Chi tiết thơng tin đặt hàng ................................................................................... 29
Hình 19.Thơng báo xác nhận đơn hàng .............................................................................. 30
Hình 20.Form đăng nhập Admin ........................................................................................ 31
Hình 21.Trang quản lý trong Admin .................................................................................. 31
Hình 22. Các chức năng Thêm,Xóa,Sửa sản phẩm ............................................................ 32
Hình 23.Form thêm mới thơng tin sản phẩm ..................................................................... 32
Hình 24.Xem thơng tin của đơn hàng................................................................................. 33
Hình 25. Thêm , sửa thông tin đăng nhập .......................................................................... 33

5

0

0


Bo co tiểu luận Lập trình web

CHƯƠNG 1: KHẢO SÁT U CẦU BÀI TỐN
I. Mơ tả bài tốn :

1. Giới thiệu bài tốn :
Vì số lượng sản phẩm của cửa hàng ngày một đa dạng và giá cả thay đổi
liên tục và tính phổ biến khơng cao chưa đáp ứng được nhu cầu người dùng.
Mặt khác cửa hàng còn gặp nhiều khó khăn như chưa quản lý được người
dùng, thơng tin nhà sản xuất, cập nhật giá sản phẩm, quản lý sản phẩm…
Nắm bắt tình hình trên nhóm tiến hành thiết k ế trang web mua bán hàng
online để mong sao giúp cho các cửa hàng phá triển hơn, giúp quản lý cửa
hàng 1 cách dễ dàng hơn mà vẫn đạt hiệu quả như mong đợi.

2. Mục đích xây dựng website :
Mỗi loại trang web khác nhau có mục đích khác nhau tùy thuộc vào đối
tượng mục tiêu mà web hướng đến.
Mục đích của website: Nơi diễn ra hoạt động mua bán, cung ứng và trưng
bài giới thiệu hàng hóa, vì vậy website cần phải tối ưu hóa để đạt được tỷ lệ
mua hàng cao và cần phải tích hợp các tính năng : Giỏ hàng, đặt mua, thanh
tốn, vận chuyển….
- Mục đích chính :
 Bán sản phẩm .
 Xây dựng và quảng bá thương hiệu: Giúp kiếm khách hàng mới và khiến
khách hàng hiện tại trung thành hơn.
 Góp phần tăng doanh thu.
 Tạo lưu lượng truy cập trang web: Đây là điều quan trọng với trang web
vì khơng có lưu lượng truy cập , trang web của bạn gần như khơng ai biết
đến. Nó là cơ hội để chuyển đổi khách hàng tiềm năng.

6

0

0


Bo co tiểu luận Lập trình web

II. Phân tích bài toán :
1. Sơ đồ Diagram :
- Sơ đồ phân rã chức năng (Business Diagram)

Hình 1.Phân rã chức năng

7

0

0


Bo co tiểu luận Lập trình web

- Usecase Người dùng

Hình 2.Usecase Người dùng

- UseCase Admin

Hình 3.Usecase Admin

8

0

0


Bo co tiểu luận Lập trình web

- Database Scheme (Lược đồ CSDL)

Hình 4.Lưc đ cơ s d liu

2. Xác định Usecase:
- Người dùng
+ Đăng ký
+ Đăng nhập
+ Tìm kiếm sản phẩm
+ Đặt hàng
+ Thanh tốn
+ Xem thơng tin sản phẩm.

9

0

0


Bo co tiểu luận Lập trình web

- Admin
+ Đăng nhập
+ Quản lý tài khoản người dùng
+ Quản lý sản phẩm
+ Quản lý đơn hàng đã đặt.
3. Mô tả Usecase :
 Usecase đăng nhập :
Tên UC: Đăng nhập
Tác nhân
Khách hàng, Admin
Mô tả: Use Case này cho phép các tác nhân có thể đăng nhập vào hệ

thống.
Dòng sự kiện
- Tại trang chủ chọn chức năng đăng nhập.
- Form đăng nhập hiển thị.
- Nhập thơng tin cần đăng nhập sau đó nhấp
đăng nhập nếu nhập sai sẽ yêu cầu nhập lại.
- Hệ thống kiểm tra tín hợp lệ thơng tin vừa
nhập.
- Nếu đăng nhập thành công, hệ thống sẽ trả
về trang chủ.
- Use case kết thúc.
 Usecase đăng ký:
Tên UC: Đăng ký
Tác nhân
Khách hàng
Mơ tả: UseCase này cho phép khách hàng có thể đăng ký thành thành
viên của shop.
Dòng sự kiện
- Tại trang chủ khách hàng chọn chức năng
đăng nhập.
- Form đăng nhập hiển thị chọn vào đăng ký.
- Nhập thông tin cần đăng ký như họ tên, địa
chỉ, sdt, ngày sinh, tên đăng nhập, mật
khẩu… sau đó nhấp đăng ký.
- Hệ thống kiểm tra tín hợp lệ thơng tin vừa
nhập.
10

0

0


Bo co tiểu luận Lập trình web

- Nếu đăng ký thành công, hệ thống sẽ quay
tr về trang chủ.
- Use case kết thúc
 Usecase xem tin tức:
Tên UC: Xem tin tức
Tác nhân
Khách hàng
Mô tả: UseCase này cho phép khách hàng có thể xem tin tức.
Dịng sự kiện
- Tại trang chủ khách hàng chọn chức năng
“Bài viết”.
- Sau đó hệ thống sẽ hiển thị các thông tin
tin tức mà web đã cập nhật cụ thể như là
sản phẩm hot nhất tuần, sản phẩm được
nhiều khách hàng tin tưng, xu hướng của
mới nhất của năm nay,…
- Use case kết thúc.
 Usecase tìm kiếm sản phẩm:
Tên UC: Tìm kiếm sản phẩm
Tác nhân
Khách hàng
Mơ tả: Use Case này cho phép khách hàng có thể xem thông tin chi tiết
sản phẩm bao gồm: ngày đăng, giá, mô tả sản phẩm, tên sản phẩm
Use Case này cho phép khách hàng có thể xem thơng tin chi tiết sản
phẩm bao gồm: ngày đăng, giá, mô tả sản phẩm, tên sản phẩm

Dòng sự kiện
- Tại giao diện trang chủ, trên thanh cơng
cụ tìm kiếm u cầu khách hàng nhập sản
phẩm cần tìm
- Khách hàng nhập thơng tin cần tìm, sau
đó chọn tìm kiếm
- Hệ thống sẽ kiểm tra và tìm kiếm thơng
tin vừa nhập, nếu đúng sẽ hiện thị thơng
tin sản phẩm vừa tìm
- Kết thúc usecase

11

0

0


Bo co tiểu luận Lập trình web

 Usecase xem thơng tin sản phẩm:
Tên UC: Xem thông tin sản phẩm
Tác nhân
Khách hàng
Mơ tả: Use Case này cho phép khách hàng có thể xem thơng tin chi tiết
sản phẩm.
Dịng sự kiện
- Tại trang chủ chọn một sản phẩm bất kỳ.
- Hệ thống sẽ chuyển sang trang thông tin
chi tiết của sản phẩm bao gồm: size, mã, số

lượng, giá, mô tả sản phẩm, tên sản phẩm
- Use case kết thúc

 Usecase liên hệ:
Tên UC: Liên hệ
Tác nhân
Khách hàng
Mô tả: Use Case này cho phép khách hàng có thể liên hệ với người quản
lý shop
Dòng sự kiện

- Tại trang chủ khách hàng chọn Liên hệ.
- Hệ thống sẽ hiển thị thông tin bao gồm
gmail, sđt, địa chỉ của người quản lý shop
- Use case kết thúc

 Usecase đặt hàng:
Tên UC: Đặt hàng
Tác nhân
Khách hàng
Mô tả: Use Case này cho phép khách hàng có thể đặt những sản phẩm đã
lựa chọn trên website.
Dòng sự kiện

- Tại trang chủ khách hàng chọn sản phẩm
bất kì và chọn đặt hàng, sản phẩm sẽ được
thêm vào giỏ hàng.
- Use case kết thúc.
12

0

0


Bo co tiểu luận Lập trình web

 Usecase thanh tốn:
Tên UC: Thanh tốn
Tác nhân
Khách hàng
Mơ tả: UseCase này cho phép khách hàng thanh tốn khi đã đặt hàng( có
thể đăng nhập trước khi thanh tốn hoặc khơng)
Dịng sự kiện
- Tại trang chủ chọn giỏ hàng.
- Sản phẩm sẽ được thêm vào giỏ hàng
- Nếu muốn mua sản phẩm với số lượng
nhiều thì nhập số lượng.
- Nếu muốn mua nhiều sản phẩm khác nhau
chon thêm vào giỏ hệ thống sẽ tự động
chuyển sang trang sản phẩm để khách hàng
có thể thêm vào giỏ hàng.
- Khi đã xét định sản phẩm muốn mua chọn
thanh toán.
- Hệ thống sẽ hiện thị form yêu cầu điền
thơng tin khách hàng.
- Hiện form thanh tốn xác nhận hình thức
thanh tốn bằng giao hàng trực tiếp.
- Nếu đúng hệ thống báo đặt hàng thành
công.

- Kết thúc usecase.

13

0

0


Bo co tiểu luận Lập trình web

 Usecase quản lý tài khoản :
Tên UC: Quản lý tài khoản
Tác nhân
Admin
Mô tả: Use Case này cho phép admin quản lý thông tin tài khoản khách
hàng
Dòng sự kiện
- Tại trang chủ adnim chọn chức năng quản
lý tài khoản.
- Tại đây admin có thể xem danh sách các tài
khoản khách hàng, xem thông tin khách
hàng và xóa tài khoản.
- Kết thúc usecase.
 Usecase quản lý đơn hàng đã đặt:
Tên UC: Quản lý đơn hàng đã đặt
Tác nhân
Admin
Mô tả: UseCase này cho phép admin quản lý và hiện thông tin những đơn
hàng đã mua của khách hàng.

Dòng sự kiện
- Tại trang chủ admin chọn đơn hàng.
- Ở đây admin có thể xem danh sách đơn
hàng, xem chi tiết đơn hàng và xóa.
- Chọn xem đơn hàng để cập nhật trạng thái
đơn hàng “xác nhận đơn hoặc hủy đơn
hàng”.
- Kết thúc usecase.

14

0

0


Bo co tiểu luận Lập trình web

 Usecase quản lý sản phẩm :
Tên UC: Quản lý Sản phẩm
Tác nhân
Admin
Mô tả: Usecase này cho phép admin quản lý quần áo của shop
Dòng sự kiện
- Tại trang chủ admin chọn quản lý quản lý
sản phẩm.
- Ở đây admin có thể thêm, sửa, xóa sản
phẩm.
- Hệ thống kiểm tra hợp lệ thơng tin các vừa
nhập.

- Nếu thành công, hệ thống sẽ thông báo
thao tác thành công.
- Kết thúc usecase.

15

0

0


Bo co tiểu luận Lập trình web

CHƯƠNG 2: THIẾT KẾ CƠ SỞ DỮ LIỆU
 Các bảng trong CSDL :
1. Bảng Category :

2. Bảng Menu :

16

0

0


Bo co tiểu luận Lập trình web

3. Bảng Role :

4. Bảng User :

17

0

0


Bo co tiểu luận Lập trình web

5. Bảng Size :

6. Bảng SizeShoe :

18

0

0


Bo co tiểu luận Lập trình web

7. Bảng Ordersdetail :

8. Bảng Product :

19

0

0


Bo co tiểu luận Lập trình web

9. Bảng Order :

20

0

0


Bo co tiểu luận Lập trình web

CHƯƠNG 3: GIAO DIỆN WEBSITE
I. Hiện thực và Demo bài toán ứng dụng :
1. Trang chủ :
- Phần Header hiển thị Banner , thanh menu của website.
- Hiển thị nút tìm kiếm, nút đăng nhập đăng ký của người dùng.
- Hiển thị nút giỏ hàng.

Hình 5.Trang chủ website

21

0

0


Bo co tiểu luận Lập trình web

- Hiển thị danh sách các sản phẩm mới nhất.

Hình 6.Giao din sản phẩm mới nhất
- Footer hiển thị bản tin bao gồm các tin tức mới nhất về thương hiệu
- Hiển thị Logo thương hiệu và các liên kết để liên hệ với người bán.

Hình 7.Footer thơng tin liên h và thương hiu

22

0

0


Bo co tiểu luận Lập trình web

2. Trang đăng nhập, đăng ký :
- Cho phép người dùng đăng ký tài khoản mới, đăng nhập vào website để
mua hàng.
- Hiển thị thông báo nếu người dùng đăng nhập không đúng tài khoản mật
khẩu.

Hình 8. Form thơng tin đăng nhập

Hình 9.Form thơng tin đăng ký
23

0

0


Bo co tiểu luận Lập trình web

- Sau khi đăng nhập người dùng có thể chỉnh sửa các thơng tin của tài khoản.

Hình 10.Form người dùng tự chỉnh sửa thơng tin
3. Trang chi tiết sản phẩm :
 Hiển thị chi tiết của sản phẩm bao gồm: Tên sản phẩm, giá tiền, số lượng
sản phẩm, hình ảnh sản phẩm (có thể phóng to).
- Nếu sản phẩm là quần áo, cho phép người dùng chọn sản phẩm theo size
S M L XL XXL. Nếu hết hàng size sẽ bị ẩn không thể chọn.

Hình 11. Thơng tin chi tiết sản phẩm về áo
24

0

0