Đồ án tốt nghiệp website bán giày online 2

Chúng em sẽ tìm hiểu các yếu tố quan trọng như trải nghiệm giao diện người dùng, chức năng lọc sản phâm, chức năng quản lý đơn hảng, chức năng tìm kiếm, phản hồi từ khách hàng và yếu tố

TRUONG CAO DANG NGHE BACH KHOA HA NOI CHUONG TRINH HOC VIEN CONG NGHE BKACAD

DO AN TOT NGHIEP Website Ban Giay Online

LOI CAM ON

Em xin gửi lời cảm ơn chân thành đến tất cả những người cùng nhóm đã đồng hành và hỗ trợ em trong quá trình thực hiện dé an nay Đầu tiên, em muốn tri ân giảng viên hướng dẫn đã dành thời gian để hướng dẫn em trong suốt quá trình nghiên cứu Tiếp theo, em muốn bảy tó lòng biết ơn đến bạn bè và những người thân yêu đã luôn động viên và đồng hành cùng tôi Cuối cùng, em cũng xin gửi lời cảm ơn đến các nguồn tài liệu và các cá nhân đã chia sẻ kiến thức giúp em hoàn thành đồ án này Sự giúp đỡ của các bạn thật sự quan trọng và có ý nghĩa đối với

em

Do thời gian làm đồ án có hạn, với vôn kiên thức hạn hẹp và khả năng có hạn, bản trinh bày của em còn có nhiều thiêu sót Vậy nên em rât mong nhận được những ý

kiến đóng góp, phê bình từ các thầy cô

Em xin chan thanh cam on!

TOM TAT NOI DUNG DO AN

Trọng tâm của đồ án của em là phát triển một website thương mại điện tử chuyên về giày, với mục tiêu khắc phục các khó khăn hiện tại gặp phải khi mua hàng online Hiện nay, dẫu có nhiều nền tảng bán giảy online, họ đều gặp hạn chế như giao diện không thân thiện, trải nghiệm người dùng không như mong muốn

Lựa chọn cách thức tiếp cận của em đó là: tạo ra một website thân thiện, dễ sử dụng

và mang tới cho người dùng cảm giác thuận tiện khi mua giay online Em lựa chọn hướng đi này, bởi em hoàn toàn tin tưởng rằng trải nghiệm người dùng chính là chìa khóa quyết định đề giữ chân khách hàng

Em đưa ra giải pháp bao gồm: xây dựng giao diện đơn giản dé sử dụng, nâng cao tính năng tìm kiếm, cung cấp thông tin rõ ràng về từng đôi giày và đánh giá từ phía khách hàng

Đồ án này mang lại đóng góp băng cách cung cấp cho thị trường một website thương mại điện tử bán giày nhắm tới việc tối ưu hóa trải nghiệm người dùng Cuỗi cùng, em đạt được một nền tảng mua sắm giảy online dễ tiếp cận, giúp người dùng khám phá

và mua giay một cách tiện lợi và nhanh chóng

1.3 Định hướng giải pháp cc ccc et cece cence cteeeentnteeeeenies 8

CHUONG 2: KHAO SAT VA PHAN TICH YEU CAU ccccccccccccscceeceseeeeseees 9

2.2 Tổng quan chức năng - + se S1 19119112112112112121111 2121211012011 11 ru 10 2.2.1 Biểu đồ usecase tông quát s S1 1111211 211211211121212112 1 nu 11 2.2.2 Biểu đồ usecase phân rã - 5s ST TH H11 1121112 1 1 reg 13 2.2.3 Quy trình nghiệp vụ - L0 2022111211221 12212 2211011 101221111 211 xe 19

2.4 Yêu cầu phi chức năng 5 ST 1111211111111 11211 1121 101112 11g 28

4.1 Thiết kế kiến trúc - 2: + 2S 2E122122122127112212112212111212111121212121 1E rce 31

4.1.1 Lựa chọn kiến trúc phần mềm 2-22 21 E2 121212111 c2 tre 31

4.1.2 Thiết kế tổng quan 5 S11 118111211211 11211111 121121211 e 32 4.1.3 Thiết Kế Chỉ Tiết À 225 S2 T1 21221127112112211111221121112212221122 x6 32 4.2 Thiết kế chỉ tiẾt 52 s21 22121122157121211211211221211121121111211021212 re 33

4.2.1 Thiết kế giao diện 2 2222 E1 11 1211121711111 te 33 4.2.2 Thiết kế cơ sở dữ liệu S5 S221 2111112121121121721 2E re 37

4.3 Xây dựng ứng dụng c1 2 122211211121 111112121211 1110112112111 1111 ke 45 4.3.1 Thư viện và công cụ sử dụng - 0Q 2.002 221122221122211 1222 k2 45

4.3.2 Kết quả đạt được - 55 S212 212121122 1211221 2g re 47 4.4 Kiểm thử - 552 S221 212211 11211111211211221111121222121222121122211 2e 48

CHƯƠNG 6: KÉT LUẬN VÀ HƯỚNG PHÁT TRIỂN -2 5sccsczxczxez 50 6.1 Kết luận - +22 211221211271111221111121121111111211212211112222122011 re 50 6.2 Hướng phát triển -s- 2S 2 1211212111112112111112121111 21211211211 cerag 50

Mục lục bảng biểu

Table 1: Bảng đặc tả usecase Đăng Ký - Q0 1 121121 1121122111211 22g tre 20 Table 2: Bảng dữ liệu đầu vào của usecase đăng ký - nu 21 Table 3:Bang đặc tả usecase Đăng Nhập L0 2201211222122 1112222 rreg 21 Table 4: Bảng dữ liệu đầu vào của usecase đăng nhập 5n sen 23 Table 5: Usecase đăng xuất của khách hảng 2-5 S2 E121 1271152212112 e2 23 Table 6: Usecase đổi mật khâu của khách hàng 2 c1 201221122112 He 24 Table 7: Bảng đặc tả usecase mua hàng - 22 220122111211 2211121 121118122111 xe 25 Table 8 Bảng đặc tả usecase quản lý đơn hàng của Admin - 5252222522 27

Table 10: Bang thương hiệu - 2 2 201221 12111211121 111111 15521111211 2111111211111 kg 40 Table 11: Bảng sản phẩm 52 9T E121111111E71 11211 121101212121 12121211 xu 40

Table 12: Bang chi tiét sản phẩm 5 212 E1 E8211112112111112111111111 121mg 41

IÙ E0 nan “(ari.iẢỶẢỔẢẢỶÝỶÝÝỶÝ 41 Table 14: Bang đơn hàng - (0 2222211211211 12 111711011101 11111111 11111211 11111 1g xe 42 Table 15: Bang chi tiết đơn hàng 5 S12 2119211 12111121171111111 1 1101201 c2 43 Table 16: Bảng bình luận 5 222222221221 1121 151112111 2118111811111 1111 111111111 xe 43 Table 17: Bảng đánh g1á 2 L2 220 122112211211 1211111111111 10111011111 211 111811 xa 44

Table 19: Bảng thư viện và công cụ str dung ccc cccccececeenecneecnseetteeeeenseeens 45 Table 20: Bang thong tin sản phẩm 2-2-2191 SE1 221211127111 1111121211 011 cx2 47 Table 21: Bảng kiểm thử - 2 1S E1 1911111211112112111211 2111211112112 21 re 48

Muc luc hinh anh

Figure 1: Usercase tổng quát của Admin - 2 + 1 1221221121211 511 111211 yg 11 Figure 2: Usecase tổng quát của EditOr ss- + s 121111111 1111111211121 ra 12 Figure 3: Usecase tong quat của khách hàng 52-5 S11 1118151111111 1e 12 Figure 4: Usecase chức năng đăng ký va đăng nhập 0 22 sscsey 13

Figure 6: Xem chi tiét san pham va dat hàng 52-5 SE E1 1221121211112 c6 14 Figure 7: Stra thong tin ca han eee eecceeeeeeecneee caste cneeneeeeeeeeesneeteeenneens 15 Figure 8: Quan lý đơn hàng ccc cceesseeseceseenecensestsessesssessssteeenseeeenseees 15 Figure 9: Quan ly danh mun cece cececcceesessseeseceseeneceneccnseeeessesesseeentieeeetssees 16 Figure 10: Quản lý sản phẩm -2- 5 1S E1 2121121111111 112112122121 11 ng re 17 Figure 11: Quan lý đơn hàng 2 2 22 122122211211 121 121112111111 111 1111281111811 kg 18 Figure 12: Quan ly m@ 21am Ø1Â L2 22012111 2211211 1211121111 10211 1111115011 18g ky 19 Fleure 13: Quy trình nghiệp vụ - - c1 c2 22121211211 121 111111111211 121 101118121111 re 19

Figure 14: Hinh 0y 8/0 - 35

DANH MỤC THUẬT NGỮ VÀ TỪ VIẾT TAT

danh dau siéu van ban

cách trình bày các tài liệu viết bằng ngôn ngữ HTML

Javascript Là một ngôn ngữ lập trình thông dịch

được phát triển từ các ý niệm neuyên mẫu

lập trình kịch bản Laravel Là một framework của ngôn ngữ lập trình

PHP

đơn giản hóa thao tác HTML DOM, cũng như xử lý sự kiện, hoạt ảnh CSS, và AJax

mở phổ biến nhất thê giới

1.2 Mục tiêu và phạm vi đề tài

Mục tiêu của đề tài là tìm hiểu cách thiết kế một Website nhằm tối ưu hóa lợi ích mà

nó mang lại cho cửa hàng giày thể thao Phạm vi của đề tài sẽ tập trung vào việc xác định các yêu tố cần thiết cho một Website hiệu quả và thảo luận cách tận dụng những yếu tố đó để tăng cường hiệu quả kinh doanh

1.3 Định hướng giải pháp

Dé giai quyet van dé nay, chung ta cân tìm hiểu những nguyên tắc cơ ban của thiết kê web Điều này bao gôm việc hiểu người dùng mục tiêu của chúng ta, tạo ra một trải nghiệm người dùng tôt, và đảm bảo rắng Website của chúng ta dé dang tim kiém va điều hướng

1.4 Bồ cục đồ án

Đồ án tốt nghiệp này sẽ xuất phát từ 4 chương tiếp theo Trong Chương 2, chúng em

sẽ mô tả sự cần thiết của dự án và các chức năng chính trong trang web Chương 3 sẽ tiếp tục đề cập đến các công nghệ mà chúng em đã áp dụng để hình thành một trang web hoàn chỉnh Tiếp theo, Chương 4 sẽ phân tích những điểm quan trọng của trang web, ví dụ như Erd, Database và các phương pháp kiểm thử chúng em đã sử dụng Và cuối cùng, trone Chương 5, chúng em sẽ thảo luận về những nhận xét và bài học cũng như trải nghiệm mà chúng em đã đạt được qua quá trình thực hiện đỗ án này

CHUONG 2: KHAO SAT VA PHAN TICH YEU CAU

2.1 Khao sat hién trang

Nhóm em sẽ tiến hành nghiên cứu chỉ tiết về tình hình hiện tại và yêu cầu cho phần mềm của đề tài đồ án từ ba nguồn thông tin chính: người dùng, các hệ thống hiện có,

và cac website ban giay khac

Nhìn từ góc độ của người dùng, nhóm em sẽ thực hiện khảo sat nhằm hiểu được nhu cầu, kỳ vọng và yêu cầu của họ khi mua giày trực tuyến Chúng em sẽ tìm hiểu các yếu

tố quan trọng như trải nghiệm giao diện người dùng, chức năng lọc sản phâm, chức năng quản lý đơn hảng, chức năng tìm kiếm, phản hồi từ khách hàng và yếu tố khác để xác định những điều cần phải thỏa mãn

Tiếp sau đó, chúng em sẽ nghiên cứu và phân tích các hệ thống hiện có trên thị trường Nhóm em sẽ xem xét các sản phẩm tương ứng và đánh giá sức mạnh và điểm yếu của chúng Điều này giúp chúng em hình dung rõ ràng về những gì đã thực hiện được và những thách thức mà chúng em cần đối mặt

Cuối cùng, nhóm em sẽ tham khảo các trang web bán giày tương tự để thu thập thông tin về cách họ cung cấp dịch vụ, giao điện người dùng, hệ thống lọc, hệ thống quản lý sản phâm, danh mục, đơn hàng, mã giảm giá, đánh giá sản phẩm, hệ thông tìm kiếm, chức năng mua sắm và yếu tố khác Chúng em sẽ phân tích, so sánh và đánh giá ưu điểm và khuyết điểm của các trang web này

Từ quá trình khảo sát, phân tích và đánh giá một cách chỉ tiết, nhóm em đã có cái nhìn tong quan về tình hình hiện tại và các yêu cầu của phần mém trong dé tài đồ án Điều này sẽ cung cấp cho nhóm em thông tin cần thiết để xây dựng một trang web bán giày phục vụ tốt nhu câu và có thé tin cay của người dùng

2.2 Tổng quan chức năng

Các chức năng mà nhóm em sẽ làm trong website:

* Quan tri vién (Admin):

Quan ly don hang Quan ly ma giam gia Quan ly danh muc Thống kê Trả lời đánh gia Mọi chức năng khác của người dùng

® Quan tri vién (Editor):

Quan ly san pham

Quan ly don hang Quan ly danh muc Thống kê Trả lời đánh gia Mọi chức năng khác của người dùng

e Khach hang (User):

oO

oO

oO

Dang ky Dang nhap

Dang xuat Chỉnh sửa thông tin cá nhân Tìm kiêm sản phâm

10

o Loc san pham

o Xem théng tin chi tiét sản phâm

o Dat hang

o Thanh toán khi nhận hàng, thanh toán VNPAY

o Quan ly don hang 2.2.1 Biéu dé usecase téng quat

Quan tri vién (Admin):

Quản lý danh mục

Quản lý sản

phẩm

Thêm mã giảm giá

Quản lý đơn

hà

ADMIN Duyệt đơn hàng

Xóa sản phẩm Thêm , Sửa

Xem thống kê

doanh thu

Tra lời đánh giá

Figure 1: Userease lông quát của Admin

11

Quan tri vién (Editor):

Nhập mã giảm

Đăng Nhập gia

Đăng Xuất

Xem đơn hàng -“ sản User

Hủy đơn hàng

Thêm vào giỏ Đánh giá sản

Eigure 3: Usecase tổng quát của khách hàng

2.2.2 Biéu dé usecase phan ra

@ Use case chức năng đăng ký và đăng nhập khách hàng

Đăng Xuất Thông báo lỗi

Figure 4; Usecase chtee nang đăng ký và đăng nhập

® Use case chức năng tìm kiêm và lọc sản phẩm của khách hàng

13

Chức năng đề tìm kiếm và lọc sản phâm giúp người dùng tìm sản phâm dễ đàng hơn

Eigure 6: Xem chỉ tiết sản phẩm và đặt hàng

® Use case chức năng sửa thông tin cá nhân khách hàng Biéu do usecase mô tả chức năng sửa thông tin cá nhân khách hàng

15

Figure 7: Stea thong tin ca nhan

@ Use case chức năng quản lý đơn hàng của khách hàng Biểu đồ usecase mô tả chức năng quản lý đơn hàng khách hàng

Figure 8: Quan ly don hàng

e@ Use case chức năng quản lý danh mục của admin

16

Biéu do usecase mô tả chức năng quản lý danh mục của admin

Đăng nhập

<<includé5>

(thêm thê loại cha nêu có)

® Use case chức năng quản lý sản phầm của admin Biéu do usecase mô tả chức năng quản lý sản phâm của admin

18

Giá tăng dần

Sản phẩm đang hoặc giảm dần

Figure 10: Quan ly san pham

® Use case chức năng quản lý đơn hàng của admin

19

Editor

Sap xép don đặt hàng mới ho

hàng hoặc cũ hơn

Í Câp nhật trang thái đơn hàng Chon trang thai cap nhat

Figure 11: Quan ly don hang

20

® Use case chức năng quản lý mã giảm giá của admin

<<extend>> / Thêm mã giảm \ “<include>> Nhập thông tin mã

Figure 12: Quan ly md giảm giá

2.2.3 Quy trinh nghiép vu

Đây là biểu đồ hoạt động mô tả nghiệp vụ mua hàng của khách hàng

Đăng Nhập thông tin Trang Chủ | Thêm vảo giỏ hàng cơ Chỉnh sửa giỏ hãng | Thanh toan |

21

Quy trình từng bước:

Bước 1: Đăng nhập

Bước 2: Khách hàng chọn sản phâm và xem chỉ tiết sản phâm

Bước 3: Thêm vào giỏ hang và chỉnh sửa g16 hang

Bước 4: Chỉnh sửa thông tin để lưu vào đơn hang và chọn phương thức thanh toán

Bước 5: Thanh toán

2.3 Đặc tá chức năng

Đặc tả usecase đăng ký của người dùng

Table 1: Bảng đặc tả usecase Đăng Kỷ

UC000 Tên Use case Đăng ký

Mô tả Người dùng sử dụng tài khoản đã được tạo để thực hiện chức năng

1 Người dùng | Truy cập vào trang web

2_ | Hệ thống Hiến thị giao diện đăng ký

Nhập email , mật khâu , nhập lại mật khâu,

6a | Hệ thống thông báo lỗi: Lỗi đăng ký Tên và email không

được trùng, mật khâu không được ít hơn 8 kí tự

Điều kiện sau Nếu đăng ký thành công, người dùng sẽ được chuyền đến trang

chủ „admin thì chuyên đến trang quản trị

Dữ liệu đầu vào của đăng ký sôm các trường đữ liệu sau:

Table 2: Bảng đữ liệu đầu vào của usecase đăng lj

Tên người An Sa XS độ , ,

6 Nhập lại mật | láng mật khẩu vừa | Có 12345678

Table 3: Đảng đặc tả usecase Đăng Nhập

Mã Use case UC001

Tên Use case Đăng nhập

Khách hàng sử dụng tài khoản đã được tạo đê thực hiện chức năng

quyết Khách hàng đã tạo tài khoản rồi

1 Khách hàng | Truy cập vao trang web

Luồng sự kiện 2 Hệ thông hién thi giao dién đăng nhập

chinh 3 Khách hàng | nhập email và mật khâu

4 |Kháchhàng | yêu cầu đăng nhập

„ kiểm tra email và mật khẩu có hợp lệ do

người dùng nhập trong hệ thông hay không

1 „ thông báo lỗi: Cân nhập các trường bắt buộc

kiện thay thê 3a Hệ thống „ „

nhập nều người dùng nhập thiêu _ | thông báo lỗi: Lỗi Đăng Nhập Kiểm tra lại

Dieu kién sau Nếu đăng nhập thành công, khách hàng sẽ được chuyền đến trang chủ

„admm thì chuyền đến trang quản trị

Dữ liệu đầu vào của đăng nhập gom các trường đữ liệu sau:

Table 4: Bảng đữ liệu đầu vào của usecase đăng nhập

người dung ail.com

ung Đặc tả usecase dăng xuất của khách hành

Table 5: Lsecase đăng xuất của khách hàng

Mã Use case UC002 Tên Use case Đăng xuất

kiện chính 1 |Kháchhàng | Chọn chức năng đăng xuất

Thông báo đăng xuât thành công Xóa token

sau

Đặc tả usecase đôi mật khâu của Người dùng

Table 6: Usecase đối mật khẩu của khách hàng

Ma Use case UC003 Tén Use case Đôi mật khẩu

Mô tả Sau khi đăng nhập thành công, Người dùng có thế đổi mật khấu mới Tác nhân Người dùng

Sự kiện

Người dùng chọn chức năng chỉnh sửa kích hoạt

Điêu kiện

tiên quyết Khách hàng đăng nhập thành công

5 Hệ thông

trường chưa , Kiểm tra mật khâu cũ có giống với mật khâu

trong hệ thông không

7 | Hệthống | Kiểm tra mật khẩu mới có hợp lệ không

8 | Héthéng | Kiểm tra mật khâu mới có giống với mật khâu

26

xác thực không

9 Hệ thông Thông báo: đôi mật khâu thành công

Chuyên sang mản hình đăng nhập

thông báo: Người dùng nhập thiếu trường

6a | Hệ thông thông báo: Người dùng nhập sai mật khâu cũ 7a | Hệ thông thông báo: Mật khâu mới không hợp lệ 8a | Hệ thống

thông báo: Mật khâu mới không giỗng mật

Điều kiện sau Sau khi đôi mật khâu thành công,

Đặc tả usecase mua hàng của khách hàng

Table 7: Bang dac ta usecase mua hang

M6 ta Khach hang chon san pham réi dat hang

Tac nhan Khach hang

Khách hàng nhân đặt hàng kích hoạt