TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI

KHOA CÔNG NGHỆ THÔNG TIN

~~~*********~~~

BÁO CÁO BÀI TẬP LỚN

MÔN: Phân tích thiết kế hướng đối tượng
Đề tài: Website bán quần áo, phụ kiện online

Giáo viên hướng dẫn: Đào Thị Lệ Thủy

Sinh viên thực hiện:
Đỗ Thị Thảo(181203068)
Nguyễn Thanh Bình(181203069)
Bùi Hữu Đức Hoàng(181210675)
Lớp: Công nghệ thông tin 3 K59

Hà Nội, ngày 23 tháng 10 năm 2021

 Lời mở đầu
Công nghệ ngày một trở nên phát triển và trở thành một phần thiết yếu của cuộc
sống. Với việc phát triển của công nghệ, con người đã tiết kiệm được nhiều nguyên
liệu và nhiên liệu, thời gian và công sức hơn trong việc sản xuất, vận chuyển, lưu thông
và quản lý hàng hóa. Chuyên môn hóa và tự động trong từng khâu làm tăng hiệu năng
trong sản xuất. Việc quản lý cũng ngày một tiện dụng hơn với sự hỗ trợ của công
nghệ : Máy tính, điện thoại thông minh hỗ trợ GSM, CDMA,…
Dựa trên nhu cầu ngày càng cao của các cửa hàng và khách hàng, chúng em thực
hiện xây dựng trang web “Bán quần áo, phụ kiện online” nhằm hỗ trợ quá trình quản
lý sản phẩm được dễ dàng hơn, việc mua bán được diễn ra thuận lợi hơn.
Trong quá trình làm việc, do những hiểu biết còn hạn chế nên không thể tránh
khỏi những khuyết điểm. Rất mong cô và các bạn góp ý để đề tài chúng em được hoàn
thiện hơn nữa.

2
 Chương I: Tìm hiểu về PHP và MySQL
1. PHP
a. Một vài nét về PHP
 PHP là viết tắt của từ Hypertext Preprocessor. Ngôn ngữ này được phát triển từ
năm 1994 và cho đến nay đã được nhiều người sử dụng để phát triển các ứng
dụng phần mềm thông qua lập trình web. Đặc điểm của ngôn ngữ lập trình này
là sử dụng mã nguồn mở, dễ dàng nhúng vào HTML và tích hợp với web.
 Ưu điểm của ngôn ngữ lập trình PHP là cú pháp đơn giản, tốc độ xử lý nhanh,
tính cộng đồng cao. Chính vì vậy mà lập trình PHP được sử dụng chủ yếu để
thiết kế web. Để tạo ra các ứng dụng web bằng ngôn ngữ PHP, người lập trình
phải sử dụng các dòng lệnh cơ bản.
 Bạn có thể sử dụng ngôn ngữ lập trình PHP để tạo ra các blog cá nhân hoặc
những website lớn. Bởi, ngôn ngữ này có nhiều Framework được xây dựng từ
các mã nguồn mở như Wordpress, OpenCart.
 Link tham khảo: https://www.php.net/

Hình 1: Hình ảnh minh họa PHP

b. Ưu điểm của PHP

 Mã nguồn mở
 Nền tảng độc lập
 Sử dụng quy trình và hướng đến đối tượng
 Dễ học
 Tương thích máy chủ
 Tích hợp dữ liệu dễ dàng

c. Những ứng dụng thực tế

3
  Tạo ứng dụng Facebook như Family Treen và eBuddy, hoặc cũng có thể được
sử dụng để tạo ra các trang mạng xã hội.
 Phát triển plugin WordPress
 Tạo tệp PDF
 Các trang web thương mại điện tử

2. MySQL
a. Đôi nét về MySQL
 MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (gọi tắt là
RDBMS) hoạt động theo mô hình client-server. Với RDBMS là viết tắt
của Relational Database Management System.
  MySQL được tích hợp apache, PHP. 
 MySQL quản lý dữ liệu thông qua các cơ sở dữ liệu. Mỗi cơ sở dữ liệu có thể
có nhiều bảng quan hệ chứa dữ liệu. MySQL cũng có cùng một cách truy xuất
và mã lệnh tương tự với ngôn ngữ SQL.
 MySQL được phát hành từ thập niên 90s.
 Link tham khảo: https://www.mysql.com/

Hình 2: Hình ảnh minh họa MySQL

b. Ưu điểm

 Dễ sử dụng: MySQL là cơ sở dữ liệu tốc độ cao, ổn định, dễ sử dụng và hoạt

động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất
mạnh.
 Độ bảo mật cao:  MySQL rất thích hợp cho các ứng dụng có truy cập CSDL
trên Internet khi sở hữu nhiều nhiều tính năng bảo mật thậm chí là ở cấp cao.
 Đa tính năng: MySQL hỗ trợ rất nhiều chức năng SQL được mong chờ từ một
hệ quản trị cơ sở dữ liệu quan hệ cả trực tiếp lẫn gián tiếp.
4
  Khả năng mở rộng và mạnh mẽ: MySQL có thể xử lý rất nhiều dữ liệu và hơn
thế nữa nó có thể được mở rộng nếu cần thiết.
 Nhanh chóng: Việc đưa ra một số tiêu chuẩn cho phép MySQL để làm việc rất
hiệu quả và tiết kiệm chi phí, do đó nó làm tăng tốc độ thực thi.

3. HTML&CSS
 HTML, HyperText Markup Language, cung cấp cấu trúc nội dung và ý nghĩa
bằng cách xác định nội dung đó, ví dụ như tiêu đề, đoạn văn hoặc hình ảnh. 
 CSS, hay Cascading Style Sheets, là ngôn ngữ trình bày được dùng để tạo kiểu
cho sự xuất hiện của nội dung sử dụng, ví dụ như phông chữ hoặc màu sắc.
 Hai ngôn ngữ HTML và CSS độc lập với nhau và vẫn giữ nguyên như vậy. CSS
không nên được viết bên trong một tài liệu HTML và ngược lại. Theo quy định,
HTML sẽ luôn đại diện cho nội dung và CSS sẽ luôn thể hiện sự xuất hiện của nội
dung đó.
 Link tham khảo HTML: https://www.w3schools.com/html/
 Link tham khảo CSS: https://www.w3schools.com/css/

Hình 3: Hình ảnh minh họa HTML + CSS

4. Công nghệ khác
a. Bootstrap 4

 Bootstrap là một framework front-end miễn phí giúp phát triển các ứng dụng
web nhanh và dễ dàng hơn.
 Bootstrap bao gồm các mẫu thiết kế dựa trên HTML và CSS như typography,
form, button, table, navigation, modal, image carousels cũng như các plugins
JavaScript tuỳ ý.
 Bootstrap cung cấp cho bạn khả năng thiết kế web responsive một cách dễ dàng.
5
  Link tham khảo: https://getbootstrap.com/docs/4.0/getting-started/introduction/

Hình 4: Hình ảnh minh họa Bootstrap4

b. Javascript
 JavaScript thường được nhúng trực tiếp vào một trang web hoặc được tham
chiếu qua file .js riêng.
 Nó là ngôn ngữ lập trình từ phía client, tức là script được tải về máy của người
dùng đang truy cập và được xử lý tại đó, thay vì xử lý trên máy chủ rồi mới đưa
kết quả tới khách hàng.
 Link tham khảo: https://www.w3schools.com/js/

Hình 5: Hình ảnh minh họa Javascript

6
c. Jquery
 Là thư viện mã nguồn mở viết bằng ngôn ngữ javascript, giúp đơn giản cách viết
javascript và tăng tốc độ xử lý các xự kiện trên trang web. Phát hành vào tháng 1
năm 2006 tại BarCamp NYC bởi John Resig. Được sử dụng bởi hơn 52% trong
10.000 truy cập nhiều nhất các trang web.
 Jquery không những có thể thay đổi giao diện(CSS) mà còn có thể thay đổi nội
dung trang bên trong trang web.
 Link tham khảo: https://jquery.com/

Hình 6: Hình ảnh minh họa Jquery

d. Laravel Framework
 Laravel là một framework rõ ràng và ưu việt cho việt phát triển web PHP.
Giải thoát bạn khỏi mã spaghetti, nó giúp bạn tạo ra những ứng dụng tuyệt
vời, sử dụng syntax đơn giản. Phát triển là thích thú những trải nghiệm sáng
tạo chứ không phải là sự khó chịu.
 Laravel là một framework PHP 5.3 được miêu tả như ‘một framework cho
web artisan’. Theo tác giả Taylor Otwell, Laravel mang lại niềm vui cho
việc lập trình bởi nó đơn giản, súc tích và đặc biệt là trình bày hợp lý.
 Laravel có 3 đặc tính nổi trội
o Đơn giản: các chức năng của Laravel rất dễ hiểu và thực hiện.
o Ngắn gọn: hầu hết các chức năng của Laravel hoạt động liên tục với cấu
hình rất nhỏ, dựa vào các quy tắc chuẩn để giảm bớt code-bloat
o Trình bày hợp lý: hướng dẫn sử dụng Laravel rất đầy đủ và luôn cập
nhật. Nhà lập trình, người tạo ra framework luôn cập nhật tài liệu trước

7
 khi cho ra một phiên bản mới, đảm bảo những người học lập trình luôn
luôn có những tài liệu mới nhất.
 Link tham khảo: https://laravel.com/

Hình 7: Hình ảnh minh họa Laravel

8
 Chương II: Tìm hiểu và thiết kế website thương mại điện tử
“Bán quần áo và phụ kiện”
I) Mục đích
 Khi đi xây dựng một website đầu tiên chúng ta phải hình dung ra xem chúng ta cần
phải thiết kế cái gì cho website của mình. Không có chủ định và mục tiêu rõ ràng
thì cả website đó trở nên sai lầm, lan man và cuối cùng đi tới một hướng khó có thể
trở lại. Thiết kế cân thận và định hướng rõ là chìa khóa hướng tới thành công của
việc xây dựng một website.
 Vận dụng tổng hợp những kiến thức đã học để tiến hành thiết kế website bán hàng
online nhằm giải quyết những khó khăn hiện tại của cửa hàng. Tìm hiểu thực trạng
thương mại điện tử tại Việt Nam để triển khai hệ thống thương mại điện tử tại cửa
hàng cho phù hợp. Khai phá lợi ích của Internet đế hướng đến một môi trường kinh
doanh toàn cầu.
 Giảm chi phí bán hàng tiếp thị và giao dịch. Bằng phương tiện Internet/Web, một
nhân viên bán hàng có thể giao dịch được với rất nhiều khách hàng. Internet/Web
giúp người tiêu thụ và các cửa hàng kinh doanh giảm đáng kê thời gian và chi phí
giao dịch (giao dịch được hiểu là từ quá trình quảng cáo, tiếp xúc ban đầu, giao
dịch đặt hàng, giao dịch thanh toán). Thời gian giao dịch qua Internet chỉ bàng 7%
thời gian giao dịch qua Fax, và bằng khoảng 0.5 phần nghìn thời gian giao dịch qua
bưu điện chuyển phát nhanh, chi phí thanh toán điện tử qua Internet chi bàng từ
10% đến 20% chi phí thanh toán theo lối thông thường. Những trở ngại của việc
tiếp cận phương tiện Intemet/Web trong hầu hết các trường hợp sẽ mang lại nhiều
thuận lợi và lợi ích trong kinh doanh. Thế nhưng, tại sao nhiều cửa hàng vẫn không
tận dụng các tiến bộ kỹ thuật tuyệt vời của Internet. Đó chính là một số rào cản
hay nói cách khác đó chính là những khó khăn khi các cửa hàng tiếp cận đến
loại hình bán hàng trực tuyến này.
II) Phạm vi
 Bài toán nhóm em thiết kế có phạm vi trong một cửa hàng nhỏ, các sản phẩm kinh
doanh bao gồm quần áo nam nữ và phụ kiện như túi xách, đồng hồ.
III) Phân tích và thiết kế chức năng
1. Website dành cho những đối tượng nào?
Website được thiết kế phục vụ 2 đối tượng là Admin(Quản trị viên) và User(Khách
hàng).
 Admin:
o Đăng nhập vào hệ thống quản trị
o Xem, cập nhật, sửa, xóa thông tin sản phẩm, danh mục, slide, …
o Quản lý đơn hàng.
o Quản lý và cập nhật tin tức.
o Quản lý và phản hồi feedback của khách hàng.
 Khách hàng:
9
 o Guest (Khách hàng vãng lai):
 Xem thông tin sản phẩm, tin tức.
 Đăng kí thành viên.
o User (Khách hàng đã đăng kí thành viên):
 Đã có tài khoản.
 Có quyền đănh nhập, đăng xuất.
 Thêm sản phẩm vào giỏ hàng và đặt mua sản phẩm online.
2. Các module thiết kế
Các Module hệ thống yêu cầu thân thiện, dễ sử dụng, bảo trì và nâng cấp.
 Module sản phẩm: Hiển thị các sản phẩm hiện có
 Module chi tiết sản phẩm: Hiển thị số lượng sản phẩm theo màu sắc và kích cỡ.
 Module chi tiết ảnh sản phẩm: Hiển thì các ảnh theo các góc khác nhai cảu sản
phẩm.
 Module giỏ hàng: Nơi lưu trữ các sản phẩm khách hàng đã thêm vào giỏ hàng.
 Module đăng kí, đăng nhập thành viên: Mỗi User sẽ có thê đăng kí 1 tài khoản
cá nhân để mua hàng và thanh toán, hưởng các ưu đãi từ của hàng.
 Module tìm kiếm sản phẩm: Lọc sản phẩm theo các tùy chọn của khách hàng.
 Module quản lý các đơn hàng, chi tiết đơn hàng: Lưu lại các thông tin về giá và
số lượng sản phẩm mà khách hàng đã mua.

10
3. Phân tích và thiết kế dữ liệu
3.1. Mô hình Usecase

Hình 8: Mô hình UseCase

11
 Tên Use case Mô tả ngắn gọn Use
ID Chức năng Ghi chú
case

UC_001 Xem danh Khi người dùng truy Hiển thị danh sách UC_001
sách sản cập vào website thì hệ sản phẩm theo
phẩm từng danh mục
thống sẽ tự động hiển
thị một số sản phẩm
nổi bật. Khi người
dùng chọn vào một
danh mục sản phẩm cụ
thể nào thì tất cả sản
phẩm của danh mục
đó sẽ hiển thị lên giao
diện.

UC_002 Xem thông Sau khi tìm thấy sản Xem chi tiết thông UC_002
tin sản phẩm phẩm cần, người dùng tin của sản phẩm
có thể chọn vào sản
phẩm để xem thông
tin chi tiết của sản
phẩm đó.

UC_003 Tìm kiếm Khi khách hàng cần Tìm kiếm sản UC_003
tìm một sản phẩm nào phẩm theo yêu cầu
đó thì có thể nhập khách hàng
thông tin sản phẩm
vào ô tìm kiếm để
thực hiện chức năng
tìm kiếm. Nếu sản
phẩm đó có tồn tại
trong dữ liệu thì sẽ
hiện thông tin sản
phẩm được tìm thấy.
UC_004 Đăng ký Khi khách hàng viếng Đăng ký tài khoản UC_004
thăm muốn mua hàng để nhận ưu đãi và

12
 thì có thể thực hiện theo dõi đơn hàng
chức năng đăng ký để đã mua.
trở thành thành viên
của website và thực
hiện các chức năng
mua hàng.

UC_005 Đăng nhập Khách hàng nhập tên Đăng nhập vào hệ UC_005
tài khoản và mật khẩu thống để theo dõi
đơn hàng đã mua
để đăng nhập vào hệ và nhận ưu đãi
thống.

UC_006 Quản lý giỏ Khách hàng có thể Cho phép khách UC_006
hàng xem lại các sản phẩm hàng xem thông
mà mình từng đặt mua tin các sản phẩm
trên website. mà mình đặt mua

UC_008 Quản lý đơn Để thực hiện chức Cho phép nhân UC_008
hàng năng quản lý thì yêu viên quản lý đơn
cầu nhân viên phải hàng, thống kê lợi
đăng nhập hệ thống. nhuận đã đạt
Nhân viên chọn mục được.
mình cần thực hiện
quản lý như thống kê
mọi đơn hàng, thống
kê lợi nhận

UC_009 Quản lý sản Để thực hiện chức Cho phép nhân UC_009
phẩm năng quản lý thì yêu viên quản lý việc
cầu nhân viên phải thêm, sửa, xoá.
đăng nhập hệ thống.
UC_010 Quản lý Cho phép nhân UC_010
Nhân viên có thể
khách hàng viên xem chi tiết
thêm, xoá, sửa sản
khách hàng, sửa
phẩm và xem chi tiết
trạng thái tài
khách hàng, sửa trạng
khoản khách hàng.
thái tài khoản khách
hàng.

13
3.2. Các ca sử dụng 
Mô hình ca sử dụng  Mô tả ca sử dụng 

 
 

14
  
 
 

15
16
 3.2. Quy trình xử lí đơn hàng
 

17
3.2. Mô hình phân rã chức năng

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

18
3.3. Biểu đồ luồng dữ liệu

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

WireFrame
a. Giao diện người dùng

Hình 10: Biểu đồ luồng dữ liệu

19
4. Xây dựng biểu đồ tuần tự
Mục đích: biểu diễn tương tác giữa những người dùng và những đối tượng
bên trong hệ thống. Biểu đồ này cho biết các thông điệp được truyền tuần tự
như thế nào theo thời gian. Thứ tự các sự kiện trong biểu đồ tuần tự hoàn toàn
tương tự như trong scenario mô tả use case tương ứng.
Biểu diễn: Biểu đồ tuần tự được biểu diễn bởi các đối tượng và message
truyền đi giữa các đối tượng đó.
Trong hệ thống quản lý bán hàng, chúng ta lựa chọn biểu đồ tương tác dạng tuần
tự để biểu diễn các tương tác giữa các đối tượng. Để xác định rõ các thành phần cần bổ sung trong
biểu đồ lớp, trong mỗi biểu đồ tuần tự của hệ thống quản lý bán hàng sẽ thực hiện:
- Xác định rõ kiểu của đối tượng tham gia trong tương tác (ví dụ giao diện, điều khiển hay thực thể).
- Mỗi biểu đồ tuần tự có thể có ít nhất một lớp giao diện (Form) tương ứng
với chức năng (use case) mà biểu đồ đó mô tả
- Mỗi biểu đồ tuần tự có thể liên quan đến một hoặc nhiều đối tượng thực thể.
Các đối tượng thực thể chính là các đối tượng của các lớp đã được xây dựng
trong biểu đồ thiết kế chi tiết. Dưới đây là một số biểu đồ tuần tự cho các chức năng của hệ thống
quản lý bán hàng:

 Biểu đồ tuần tự cho chức năng đăng nhập

20
 Biểu đồ tuần tự cho chức năng tìm hàng

 Biểu đồ tuần tự cho chức năng thêm hàng

21
 Biểu đồ tuần tự cho chức năng cho chức năng quản lý bán hàng

 Biểu đồ tuần tự cho chức năng cho chức năng quản lý khách hàng

22
 Biểu đồ tuần tự cho chức năng cho chức năng thông kế bán hàng

23
5. Wireframe
5.1. Giao diện người dùng

24
Hình 11: Wireframe trang chủ

25
Hình 12: Wireframe trang sản phẩm

26
Hình 13: Wireframe trang giỏ hàng

27
Hình 14: Wireframe trang chi tiết sản phẩm

28
4.2 . Giao diện admin

Hình 15: Wireframe trang thêm sản phẩm

29
Hình 16: Wireframe trang thêm sản phẩm

30
 Hình 17: Wireframe trang danh sách sản phẩm
4.3. Hệ thống cho quản trị viên
- Chức năng đăng nhập
- Quản lý các danh mục
- Quản lý danh mục sản phẩm: Thêm, sửa, xóa (sản phẩm)
- Quản lý tài khoản người dùng: thêm, sửa, xóa (người dùng)
- Quản lý hóa đơn: cập nhật trạng thái giao hàng
4.4. Hệ thống cho khách hàng
- Giao diện trang chủ mua sắm
- Chức năng đăng kí, đăng nhập thành viên
- Chức năng xem chi tiết sản phẩm
- Chức năng thêm sản phẩm vào giỏ hàng
- Chức năng mua hàng và thanh toán
- Chức năng gửi phản hồi
- Chức năng xuất hóa đơn
6. Phân tích và thiết kế dữ liệu
a. Sơ đồ thực thể liên kết

31
 Hình 18: Sơ đồ thực thể liên kết

b. Các bảng trong CSDL

Hình 19: Bảng Users

Hình 20: Bảng Admins

32
 Hình 21: Bảng Bills

Hình 22: Bảng BillDetails

Hình 23: Bảng Categories

Hình 24: Bảng Colors

33
Hình 25: Bảng ImageDetails

Hình 26: Bảng Products

Hình 27: Bảng ProductDetails

Hình 28: Bảng Sizes

34
Hình 29: Bảng Slides

35
 Chương III: Xây dựng và cài đặt chương trình
1. Cài đặt CSDL
Công nghệ sử dụng:
- MySQL server
- Laravel migrate
- JetBrains DataGrip

2. Xây dựng trang người dùng

Hình 30: Slides trang chủ

36
Hình 31: Overview sản phẩm trang chủ

Hình 32: Phân trang sản phẩm trang chủ

37
Hình 33: Sản phẩm theo Category

Hình 34: Trang chi tiết sản phẩm

38
Hình 35: Trang giỏ hàng

Hình 36: Trang Blog

39
 Hình 37: Trang About

Hình 38: Trang contact

40
3. Xây dựng trang quản trị

Hình 39: Trang chủ dashboard

Hình 40: Trang danh sách người dùng

41
Hình 41: Trang thêm người dùng

Hình 42: Trang chỉnh sửa người dùng

42
Hình 42: Trang danh sách sản phẩm

Hình 43: Trang thêm sản phẩm

43
Hình 44: Trang danh sách category

Hình 45: Trang thêm category

44
Hình 46: Trang danh sách Size

Hình 47: Trang danh sách màu

45
Hình 48: Trang danh sách Product Detail

Hình 49: Trang thêm Product Detail

46
Hình 50: Trang danh sách slider

47
 Bảng phân công công việc

Họ và tên Công việc

Đỗ Thị Thảo
Nguyễn Thanh Bình
Bùi Hữu Đức Hoàng
- Tìm hiểu laravel Framework, MySQL
- Thiết kế Frontend người dùng, giao
diện admin.
- Code phần quản trị phía Backend
- Viết báo cáo
- Tìm hiểu laravel Framework, MySQL
- Thiết kế Frontend người dùng
- Thiết kế database
- Code phần người dùng phía Backend
- Tìm hiểu laravel Framework, MySQL
- Thiết kế Frontend người dùng
- Vẽ UseCase, Wireframe
- Code phần quản trị phía Backend

48
Phụ lục
Lời mở đầu......................................................................................................................................... 1
Chương I: Tìm hiểu về PHP và MySQL..........................................................................................2
1. PHP........................................................................................................................................... 2
2. MySQL..................................................................................................................................... 3
3. HTML&CSS............................................................................................................................. 4
4. Công nghệ khác........................................................................................................................ 4
Chương II: Tìm hiểu và thiết kế website thương mại điện tử “Bán quần áo và phụ kiện”..........8
I) Mục đích................................................................................................................................... 8
II) Phạm vi.................................................................................................................................. 8
III) Phân tích và thiết kế chức năng...........................................................................................8
1. Website dành cho những đối tượng nào?................................................................................8
2. Các module thiết kế................................................................................................................9
3. Phân tích và thiết kế dữ liệu..................................................................................................10
4. Wireframe............................................................................................................................. 15
5. Phân tích và thiết kế dữ liệu..................................................................................................21
Chương III: Xây dựng và cài đặt chương trình............................................................................26
1. Cài đặt CSDL......................................................................................................................... 26
2. Xây dựng trang người dùng..................................................................................................26
3. Xây dựng trang quản trị........................................................................................................31
Bảng phân công công việc................................................................................................................ 38

49