(Đồ án tốt nghiệp) xây dựng website bán laptop và phụ kiện

Về phía người dùng, kháchhàng càng thuận tiện hơn khi không cần đi đâu mà vẫn có thể xem thỏa thích các sản phẩm mà mình muốn mua và mua sản phẩm một cách nhanh chóng.. Ứng dùng còn c

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ

THUẬT THÀNH PHỐ HỒ CHÍ MINH

ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN

XÂY DỰNG WEBSITE BÁN LAPTOP VÀ PHỤ KIỆN

GVHD: LÊ THỊ MINH CHÂU SVTH: LÊ BÁ HUỲNH SVTH: LÊ THIỆN DUY

SKL007058

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH

KHOA ĐÀO TẠO CHẤT LƯỢNG CAO

ĐỒ ÁN TỐT NGHIỆP

ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN LAPTOP VÀ

PHỤ KIỆN

SVTH : LÊ BÁ HUỲNH MSSV : 16110095

SVTH : LÊ THIỆN DUY MSSV : 16110034

Ngành : CÔNG NGHỆ THÔNG TIN GVHD: LÊ THỊ MINH CHÂU

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH

KHOA ĐÀO TẠO CHẤT LƯỢNG CAO

ĐỒ ÁN TỐT NGHIỆP

ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN LAPTOP VÀ

PHỤ KIỆN

SVTH : LÊ BÁ HUỲNH MSSV : 16110095

SVTH : LÊ THIỆN DUY MSSV : 16110034

CỘNG HÒA XÃ HỘI CHỦNGHĨA VIỆT NAM Độc lập – Tự

do – Hạnh phúc ***

Tp Hồ Chí Minh, ngày - tháng - năm 2020

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP

Họ và tên sinh viên: Lê Bá Huỳnh

Ngành: Công nghệ thông tin

Họ và tên sinh viên: Lê Thiện Duy

Ngành: Công nghệ thông tin

Giảng viên hướng dẫn: Lê Thị Minh Châu

Ngày nhận đề tài: 25/02/2020

MSSV: 16110095Lớp: 16110CLST3MSSV: 16110034Lớp: 16110CLST3ĐT: 0902200557Ngày nộp đề tài: 01/07/2020

1 Tên đề tài: Xây dựng website bán laptop và phụ kiện

2 Các số liệu, tài liệu ban đầu: Kiến thức về Laravel từ TLCN

3 Nội dung thực hiện đề tài:

- Tìm hiểu Laravel Framework và VueJS

- Xây dựng website bán laptop và phụ kiện

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT

NAM

Độc lập – Tự do – Hạnh Phúc

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Họ và tên Sinh viên: Lê Bá Huỳnh MSSV: 16110095

Họ và tên Sinh viên: Lê Thiện Duy MSSV: 16110034Ngành: Công nghệ thông tin

Tên đề tài: Xây dựng website bán laptop và phụ kiện

Họ và tên Giáo viên hướng dẫn: Lê Thị Minh Châu

Tp Hồ Chí Minh, ngày tháng năm 2020

Giáo viên hướng dẫn

(Ký & ghi rõ họ tên)

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT

NAM

Độc lập – Tự do – Hạnh Phúc

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ và tên Sinh viên: Lê Bá Huỳnh MSSV: 16110095

Họ và tên Sinh viên: Lê Thiện Duy MSSV: 16110034

Ngành: Công nghệ thông tin

Tên đề tài: Xây dựng website bán laptop và phụ kiện

Họ và tên Giáo viên phản biện:

NHẬN XÉT

1 Về nội dung đề tài & khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

4 Đề nghị cho bảo vệ hay không?

LỜI CẢM ƠN

Nhóm thực hiện xin chân thành cảm ơn khoa Đào tạo Chất lượng cao, NgànhCông nghệ thông tin, chuyên ngành Công nghệ phầm mềm, trường Đại học SưPhạm Kỹ Thuật Tp.HCM đã tạo điều kiện thuận lợi cho nhóm em thực hiện đềtài này

Nhóm thực hiện cũng xin được gửi lời cảm ơn chân thành nhất đến cô Lê Thị Minh Châu, người đã tận tình chỉ bảo, định hướng đi và hướng dẫn nhóm thực hiện thực hiện đề tài này.

Bên cạnh đó, nhóm thực hiện xin gửi lời cảm ơn đến các thầy cô, những người

đã giảng dạy, tạo điều kiện cho nhóm thực hiện tích lũy được những kiến thứcquý báu trong những năm học qua

Dù đã cố gắng để thực hiện đề tài Website bán laptop và phụ kiện, nhưng vẫnchưa hoàn thành đề tài một cách trọn vẹn và chắc chắn sẽ có những thiếu sótkhông tránh khỏi Nhóm thực hiện mong nhận được sự thông cảm và tận tìnhchỉ bảo, góp ý từ các thầy cô Một lần nửa, nhóm thực hiện xin được gửi lờicảm ơn chân thành!

Nhóm sinh viên thực hiện

Lê Bá Huỳnh, Lê Thiện Duy

TÓM TẮT

Với sự phát triển ngày càng nhanh và mạnh của mạng Internet và công nghệ, conngười dần càng hướng tới sự tiện lợi mà điều này đáp ứng được Một trong số đó là lĩnhvực kinh doanh, thay vì chỉ kinh doanh theo kiểu truyền thông như trước là phải có địađiểm mới có thể kinh doanh được, thì bây giờ có thể kinh doanh online vừa tiết kiệm trongkhoản địa điểm, nhân viên vừa đỡ tốn kinh phí duy trì hơn Về phía người dùng, kháchhàng càng thuận tiện hơn khi không cần đi đâu mà vẫn có thể xem thỏa thích các sản phẩm

mà mình muốn mua và mua sản phẩm một cách nhanh chóng Không những thế mạngInternet còn đóng góp rất lớn về phần giáo dục và giải trí, được coi như một kho tàng kiếnthức của nhân loại Nó hỗ trợ rất nhiều trong việc học tập và công việc hiện nay, việc traođổi kiến thức cũng trở nên dễ dàng và nhẹ nhàng hơn bao giờ hết Chính vì điều này nhómthực hiện đã xây dựng một ứng dụng web thương mại về laptop (một công cụ giúp ta tiếpcận với mạng Internet, đồng thời cũng rất dễ mang theo) và phụ kiện Ứng dụng cho phépngười dùng xem, tìm kiếm và mua laptop, các phụ kiện đi kèm một cách dễ dàng thay vìphải ra tới cửa hàng Ứng dùng còn có thể đề xuất những sản phẩm tương tự cho kháchhàng, lọc thông tin sản phẩm một cách tối ưu Nói tóm lại ứng dụng web là giải pháp tiệnlợi cho cả hai bên là người bán và khách hàng

MỤC LỤC

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP i

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ii

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN iii

LỜI CẢM ƠN iv

TÓM TẮT v

MỤC LỤC vi

DANH MỤC CÁC TỪ VIẾT TẮT ix

DANH MỤC CÁC BẢNG x

DANH MỤC CÁC HÌNH xi

Chương 1 TỔNG QUAN 1

1.1 Giới thiệu 1

1.2 Mục tiêu đề ra 1

1.3 Phạm vi đề tài 1

Chương 2 CƠ SỞ LÝ THUYẾT VÀ KHẢO SÁT THỰC TRẠNG 2

2.1 Laravel 2

2.1.1 Laravel là gì? 2

2.1.2.Tại sao nên dùng Laravel? 3

2.2 PHP 3

2.2.1 PHP là gì? 3

2.2.2.Tại sao nên dùng PHP 4

2.3 VueJS 5

2.3.1 Vue.js là gì? 5

2.3.2.Tại sao nên dùng Vue.js? 7

2.4 Postgres 7

2.4.1 PostgreSQL là gì? 7

2.4.2.Đặc điểm của PostgreSQL 7

2.5 Wampp 8

2.5.2.Ưu điểm khi sử dụng WAMP 8

2.6 Khảo sát thực tế 9

2.6.1 Trang web phongvu.vn 9

2.6.2 Trang web gearvn.com 10

2.6.3 Trang web fptshop.com.vn 11

Chương 3 XÁC ĐỊNH YÊU CẦU 12

3.1 Yêu cầu chức năng 12

3.1.1 Quan điểm 12

3.1.2.Chức năng ứng dụng 12

3.2 Yêu cầu hệ thống 13

3.3 Use case Diagram 13

3.4 Đặc tả Use Case 22

Chương 4 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 37

4.1 Database 37

4.2 Class diagram 38

4.3 Sequence diagram 39

4.4 Giao diện người dùng 43

4.4.1 Trang bán hàng 43

4.4.2 Trang quản lý 56

Chương 5 GIỚI THIỆU VỀ HỆ THỐNG GỢI Ý SẢN PHẨM 61

5.1 Giới thiệu về hệ thống 61

5.2 Xây dựng hệ thống 61

5.2.1.Các thuật toán áp dụng 61

5.2.2.Tiến hành xây dựng hệ thống 63

Chương 6 HOÀN THIỆN VÀ KIỂM THỬ 66

Chương 7 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 73

7.1 Mức độ hoàn thành 73

7.4 Hướng phát triển 75

TÀI LIỆU THAM KHẢO 76

DANH MỤC CÁC TỪ VIẾT TẮT

MSSV: Mã số sinh viên

TLCN: Tiểu luận chuyên ngành

API: Application Programming Interface

DANH MỤC CÁC BẢNG

Bảng 3.1 Đặc tả use case mua sản phẩm 22

Bảng 3.2 Đặc tả use case xem danh sách sản phẩm 23

Bảng 3.3 Đặc tả use case xem thông tin sản phẩm 24

Bảng 3.4 Đặc tả use case tìm kiếm sản phẩm 25

Bảng 3.5 Đặc tả use case tìm kiếm theo tên 25

Bảng 3.6 Đặc tả use case tìm kiếm theo thuộc tính 26

Bảng 3.7 Đặc tả use case thêm vào giỏ hàng 27

Bảng 3.8 Đặc tả use case duyệt các mục 28

Bảng 3.9 Đặc tả use case thêm vào danh sách so sánh 29

Bảng 3.10 Đặc tả use case xem danh sách sản phẩm tương tự 29

Bảng 3.11 Đặc tả use case kiểm tra đơn hàng 30

Bảng 3.12 Đặc tả use case quản lý giỏ hàng 31

Bảng 3.13 Đặc tả use case thêm số lượng sản phẩm 32

Bảng 3.14 Đặc tả use case giảm số lượng sản phẩm 32

Bảng 3.15 Đặc tả use case xác thực người dùng 33

Bảng 3.16 Đặc tả use case đăng nhập 34

Bảng 3.17 Đặc tả use case đăng xuất 35

Bảng 3.18 Đặc tả use case đăng ký tài khoản 35

DANH MỤC CÁC HÌNH

Hình 2.1 Lịch sử các phiên bản phát hành Laravel [1] 2

Hình 2.2 Top 10 ngôn ngữ lập trình phổ biến 2004 - 2020 4

Hình 2.3 So sánh tổng quan giữa ASP và PHP 5

Hình 2.4 Vòng đời của Vuejs 6

Hình 2.5 Trang web phongvu.vn 9

Hình 2.6: Trang web gearvn.com 10

Hình 2.7: Trang web fptshop.com.vn 11

Hình 3.1 Top level use case eCommerceWeb 13

Hình 3.2 Use case xem danh sách sản phẩm 14

Hình 3.3 Use case checkout 15

Hình 3.4 Use case xác thực người dùng 15

Hình 3.5 Use case quản lý tài khoản 16

Hình 3.6 Top level use case ManagementWeb 17

Hình 3.7 Use case quản lý nhóm 18

Hình 3.8 Use case quản lý nhân viên 19

Hình 3.9 Use case quản lý khách hàng 20

Hình 3.10 Use case quản lý sản phẩm 21

Hình 3.11 Use case quản lý thông báo 22

Hình 4.1 Mô hình mối quan hệ thực thể 37

Hình 4.2: Class diagram 38

Hình 4.3 Sequence diagram mua sản phẩm 39

Hình 4.4 Sequence diagram tìm kiếm sản phẩm 40

Hình 4.5 Sequence diagram duyệt các mục 40

Hình 4.6 Sequence diagram thêm vào giỏ hàng 41

Hình 4.7 Sequence diagram checkout trước khi mua sản phẩm 42

Hình 4.8 Giao diện trang chủ 1 43

Hình 4.9 Giao diện trang chủ 2 44

Hình 4.10 Giao diện trang chủ 3 44

Hình 4.11 Giao diện đăng nhập của khách hàng 45

Hình 4.12 Giao diện đăng ký của khách hàng 45

Hình 4.13 Giao diện trang danh sách sản phẩm dạng lưới 46

Hình 4.14 Giao diện trang danh sách sản phẩm dạng từng dòng 47

Hình 4.15 Giao diện trang danh sách sản phẩm khi lọc 47

Hình 4.16 Giao diện trang thông tin chi tiết sản phẩm

Hình 4.19 Giao diện giỏ hàng 50

Hình 4.20 Giao diện chọn địa chỉ giao hàng khi đặt hàng 51

Hình 4.21 Giao diện thêm địa chỉ khi tiến hành đặt hàng 51

Hình 4.22 Giao diện chọn phương thức thanh toán và đặt hàng 52

Hình 4.23 Giao diện trang so sánh sản phẩm 52

Hình 4.24 Giao diện danh sách sản phẩm để so sánh 53

Hình 4.25 Giao diện trang quản lý tài khoản - thông tin tài khoản 54

Hình 4.26 Giao diện trang quản lý tài khoản - danh sách đơn hàng 54

Hình 4.27 Giao diện trang quản lý tài khoản - địa chỉ giao hàng 55

Hình 4.28 Giao diện trang quản lý tài khoản - nhận xét sản phẩm đã mua 55

Hình 4.29 Giao diện trang quản lý khách hàng 56

Hình 4.30 Giao diện thêm sửa khách hàng 56

Hình 4.31 Giao diện tùy chọn số dòng trong danh sách 57

Hình 4.32 Giao diện sau khi chọn hiển thị 30 dòng 57

Hình 4.33 Giao diện thông tin chi tiết của khách hàng 58

Hình 4.34 Giao diện thêm, sửa thông tin khách hàng 58

Hình 4.35 Giao diện lịch sử giao dịch của khách hàng 58

Hình 4.36 Giao diện trang quản lý nhân viên 59

Hình 4.37 Giao diện thêm, sửa thông tin nhân viên 59

Hình 4.38 Giao diện trang quản lý thông báo 60

Hình 4.39 Giao diện tạo thông báo 60

Hình 5.1 Ví dụ về tìm đường đi ngắn nhất [8] 62

Hình 5.2 Minh họa giao và hợp của 2 tập hợp [9] 63

Hình 5.3 Thuật toán Hamming Distance 63

Hình 5.4 Thuật toán Euclidean Distance 64

Hình 5.5 Thuật toán Jacard Index 64

Hình 5.6 Xử lý 3 thuật toán với trọng số 64

Hình 5.7 Sản phẩm được chọn 65

Hình 5.8 Danh sách sản phẩm theo độ ưu tiên giảm dần 1 65

Hình 5.9 Danh sách sản phẩm theo độ ưu tiên giảm dần 2 65

Chương 1 TỔNG QUAN

1.1 Giới thiệu

Hiện nay xã hội ngày một phát triển một cách nhanh chống kèm theo đó là cáclĩnh vực như công nghệ, truyền thông, giải trí,… cũng phát triển rất mạnh Khôngnhững thế cả về việc giáo dục cũng đang phát triển theo, không còn quá ràng buộckiến thức chỉ ở sách vở, ngay cả việc giảng dạy cũng thế Tất cả mọi thứ đều đượcđưa lên Internet và để tiếp cận một cách dễ dàng thì phải cần một chiếc laptop, nó làmột thiết bị kết nối Internet thông qua mạng Wifi, không quá nặng và to như máytính bàn, dễ dàng cho việc mang theo đến bất kì đâu Một thiết bị rất hữu dụng chocông việc, học tập và giải trí Và để sở hữu một chiếc laptop mà không cần phải điđâu, thì bạn chỉ cần tham khảo và đặt mua trên website thương mại về bán laptophoặc đồ công nghệ Và đây cũng là một phần đề tài mà nhóm thực hiện: Xây dựngmột website bán laptop và phụ kiện

Website sẽ đáp ứng các nhu cầu chính như tìm kiếm, xem, so sánh và tiến hànhđặt mua sản phẩm mà bạn muốn Website sẽ chuyên về bán laptop và những phụkiện kèm theo như là bàn phím, chuột, tai nghe,…Website còn cũng cấp những sảnphẩm gợi ý tương tự như sản phẩm mà bạn đã chọn xem Ngoài ra sẽ còn nhiều tínhnăng khác khi bạn đăng nhập tài khoản

1.2 Mục tiêu đề ra

Xây dựng một website bán laptop và phụ kiện, cung cấp cho người dùng nhữngthông tin về laptop và phụ kiện một cách chi tiết, đưa ra lựa chọn về sản phẩmmuốn mua một cách nhanh chóng

Ngoài ra website còn hướng đến trải nghiệm người dùng, giao diện đơn giản và

dễ dàng sử dụng

1.3 Phạm vi đề tài

Xây dựng website theo hướng thương mại điện tử, cung cấp các chức năng cơbản như xem danh sách sản phẩm, chi tiết từng sản phẩm, tìm kiếm sản phẩm, giỏhàng và đặt hàng

Thiết kế website theo hướng đơn trang(Single Page Application) thay vìMultiple-page applications phải load lại toàn bộ trang web mỗi khi chuyển trangnhằm nâng cao trải nghiệm người dùng

Chương 2 CƠ SỞ LÝ THUYẾT VÀ KHẢO SÁT THỰC TRẠNG 2.1 Laravel

như tòa lâu đài Và rồi đến tận bây giờ thì Laravel vẫn luôn là một trong nhữngframework tốt nhất của PHP

2.1.2 Tại sao nên dùng Laravel?

Laravel có thể xây dựng hệ thống các ứng dụng web phức tạp với hiệu năng cao.Cho dù laravel rất đơn giản và dễ dàng cho người mới tiếp cận với framework PHPnhưng vẫn đảm bảo hệ thống có kiến trúc thống nhất và khoa học [2]

Cộng đồng Laravel rất lớn trên Laracast, bạn có thể tìm câu trả lời cho nhữngvấn đề, tình huống mà bạn thắc mắc hay là không biết trong Laravel Không nhữngthế các tài nguyên liên quan đến Laravel cũng rất đa dạng, dễ sử dụng Tác giả củaframework này -Taylor Otwell cũng đã biên soạn ra tài liệu để cho các lập trìnhviên khám phá và trải nghiệm [2]

Có tích hợp công cụ dòng lệnh là Artisan, hỗ trợ rất nhiều trong việc phát triểnứng dụng: tối ưu hóa ứng dụng, migrate dữ liệu, tạo các template, controller, …Trong Laravel có một bộ máy template rất hay, đó là blade template, giúp thực hiệnlàm việc tương tác giữa PHP và HTML đơn giản hơn, tách biệt hơn giữa mã hiểnthị và mã logic nghiệp, cái mà trước đó chỉ có thể biết đến ở NET hoặc Java Bladetemplate còn có thể kế thừa một template khác và có thể còn script js, jquery…Laravel sử dụng gói thư viện Webpack kết hợp với npm, yarn nhằm giúp bạn tựđộng hóa thay vì build thủ công các ứng dụng và triển khai sản phẩm Từ đó cóthể thấy được Laravel hỗ trợ việc các đặt các gói thư viện và sử dụng nhằm tạo racác tính năng tuyệt vời [2]

Laravel luôn thay đổi, cập nhật trong các phiên bản, luôn tìm kiếm những tínhnăng hay, những gói thư viện tốt và hữu ích để tích hợp vào

2.2 PHP

2.2.1 PHP là gì?

PHP khởi đầu như là một dự án mã nguồn mở nhỏ, nhưng theo đà phát triển, ngàycàng nhiều người thấy rằng nó càng ngày càng hữu ích PHP được phát triển từ mộtsản phẩm có tên là PHP/FI PHP/FI do Rasmus Lerdorf tạo ra năm 1994, ban đầu đượcxem như là một tập con đơn giản của các mã kịch bản Perl để theo dõi tình hình truycập đến bản sơ yếu lý lịch của ông trên mạng Ông đã đặt tên cho bộ mã kịch bản này

là "Personal Home Page Tools" Khi cần đến các chức năng rộng hơn, Rasmus đã viết

định công bố mã nguồn của PHP/FI cho mọi người xem, sử dụng cũng như sửa cáclỗi có trong nó, đồng thời cải tiến mã nguồn [6].

PHP viết hồi qui của "PHP: Hypertext Preprocessor"

PHP là ngôn ngữ lập trình kịch bản viết cho máy chủ mà được nhúng trong HTML

Nó được sử dụng để quản lý nội dụng động, Database, Session tracking, … Nóđược tích hợp với một số Database thông dụng như MySQL, PostgreSQL,Oracle, Sybase, Informix, và Microsoft SQL Server

PHP thực thi rất tuyệt vời, đặc biệt khi được biên dịch như là một ApacheModule trên Unix side MySQL Server, khi được khởi động, thực thi các truy vấnphức tạp với các tập hợp kết quả khổng lồ trong thời gian Record-setting

PHP hỗ trợ một số lượng rộng rãi các giao thức lớn như POP3, IMAP, vàLDAP PHP4 bổ sung sự hỗ trợ cho Java và các cấu trúc đối tượng phân phối(COM và CORBA)

Hình 2.2 Top 10 ngôn ngữ lập trình phổ biến 2004 - 2020 2.2.2 Tại sao nên dùng PHP

Hiện nay, có hàng ngàn ngôn ngữ lập trình có sẵn nhưng chỉ có vài ngôn ngữphổ biến và được nhiều người tin dùng 1 trong các ngôn ngữ lập trình phổ biếnnhất đó là PHP Đây là 1 ngôn ngữ được thiết kế để phục vụ cho việc phát triển web

và được cài đặt trên 20 triệu website, 1 triệu máy chủ web [6]

Ngôn ngữ ASP cũng là 1 ngôn ngữ lập trình được xem là 1 trong những đối thủ

hơn so với web tĩnh dùng ngôn ngữ HTML, cho phép người dùng tương tác và traođổi thông tin.

Hiện nay, có hàng ngàn ngôn ngữ lập trình có sẵn nhưng chỉ có vài ngôn ngữphổ biến và được nhiều người tin dùng 1 trong các ngôn ngữ lập trình phổ biếnnhất đó là PHP Đây là 1 ngôn ngữ được thiết kế để phục vụ cho việc phát triển web

và được cài đặt trên 20 triệu website, 1 triệu máy chủ web

Hình 2.3 So sánh tổng quan giữa ASP và PHP

Ngôn ngữ ASP cũng là 1 ngôn ngữ lập trình được xem là 1 trong những đối thủcạnh tranh của PHP, 2 ngôn ngữ này đều được dùng cho việc tạo website, linh độnghơn so với web tĩnh dùng ngôn ngữ HTML, cho phép người dùng tương tác và traođổi thông tin

2.3 VueJS

2.3.1 Vue.js là gì?

Là một framework linh động và còn là javascript framework dùng để xây dựnggiao diện người dùng theo hướng ứng dụng đơn trang (SPA - Single-PageApplications) Giao diện website phân chia thành các component và có thể tái sửdụng, một component hay còn gọi là một đối tượng Vue

Hình 2.4 Vòng đời của Vuejs

2.3.2 Tại sao nên dùng Vue.js?

Vue cung cấp hệ thống cho phép chúng ta render dữ liệu lên DOM theo hướngkhai báo thay vì theo hướng mệnh lệnh

Có các directive (chỉ thị) hỗ trợ cho transition (hiệu ứng chuyển đổi) khi mà mộtphần tử web nào đó được tạo ra, cập nhật hoặc bị xóa đi khỏi DOM Ví dụ: v-bind,v-if, v-for, …

Đi kèm với các event listener (phần tử lắng nghe sự kiện) và gọi các method(phương thức) trên đối tượng Vue là directive v-on, điều này giúp người dùngtương tác với ứng dụng một cách dễ dàng

Một component có thể được tái sử dụng ở các teample khác nhau

Vue đơn giản và dễ dàng tiếp cận, được tích hợp trong Laravel Framework

2.4 Postgres

2.4.1 PostgreSQL là gì?

PostgreSQL là một hệ thống cơ sở dữ liệu quan hệ đối tượng mã nguồn mởmạnh mẽ với hơn 30 năm phát triển tích cực đã mang lại cho nó một danh tiếngmạnh mẽ về độ tin cậy, tính mạnh mẽ và hiệu suất

2.4.2 Đặc điểm của PostgreSQL

 Là mã nguồn mở [6]

 Tuân thủ các chuẩn của SQL, chuẩn ACID

 Hoạt động được trên nhiều hệ điều hành như: Linux, UNIX, Mac OS X, Solaris

và Windows

 Hỗ trợ các ngôn ngữ như C/C++, Java, Net, Perl, Python, Ruby thông qua interface JDBC, ODBC, PERL/DBI

 Là CSDL quan hệ hướng đối tượng

 Kiểu dữ liệu UUID, liệt kê (emumerated), nhị phân (binary), địa chỉ mạng(network address), tìm kiếm văn bản (Text Search), XML, mảng (Arrays), hình học(Geometric)…

 Hỗ trợ MVCC, đánh chỉ mục (index), quản lý dung lượng bảng (tablespaces)

2.5 Wampp

2.5.1 Wampp là gì?

WAMP là từ viết tắt của Windows, Apache, MySQL, và PHP [7] Nó là một bộphần mềm để cài đặt Apache, MySQL, PHP… Trên hệ điều hành Windows Dĩ nhiên,

có thể cài riêng rẻ từng phần mềm, nhưng thường mọi người sẽ cài cả bộ để sử dụng

WAMP được phát triển từ LAMP (chữ L là viết tắt của Linux) Sự khác biệtchính giữa 2 cái là WAMP thì dùng cho Windows, còn LAMP là dùng cho hệ điềuhành nền Linux Chúng có công dụng tương đương nhau

Các ký tự của WAMP là gì:

 “W” đại diện cho Windows, nếu dùng hệ Linux thì sẽ gọi là LAMP và dùng Mac thì gọi là MAMP

 “A” đại diện cho Apache Apache là phần mềm server dùng để biến serverthành một web server, quản lý các trang web Khi bạn yêu cầu một trang web, Apache sẽ xử

lý yêu cầu đó và hiển thị site đó thông qua HTTP

 “M” đại diện cho MySQL Công việc của MySQL là quản lý cơ sở dữ liệucho server của bạn Nó chứa các thông tin liên quan đến nội dung của site, như là thông tinngười dùng, bài viết, vâng vâng

 “P” đại diện cho PHP Nó là ngôn ngữ lập trình được dùng để tạo raWordPress Nó liên kết toàn bộ các thành phần của hệ thống WAMP này PHP kết hợpApache để liên lạc được với MySQL

2.5.2 Ưu điểm khi sử dụng WAMP

WAMP hoạt động giống một máy chủ ảo, chạy ngay trên máy của bạn WAMPvào lúc này đóng vai trò là một căn nhà an toàn cho website của bạn, bạn chưa phảiđưa nó online, nhưng vẫn xem được cách nó hiển thị online trên trình duyệt là nhưthế nào

Các ưu điểm khi cài đặt WAMP là:

 Tạo backup dễ dàng hơn, nhanh hơn

 Không phụ thuộc vào kết nối internet, máy tính không cần nối mạng bạn vẫn

có thể phát triển WordPress tại localhost

 Tăng tốc quá trình xử lý, thao tác Lập trình viên và chuyên gia thiết kế của bạn sẽ thích điều này

 Có thể chuyển verison của từng service một cách linh hoạt

2.6 Khảo sát thực tế

2.6.1 Trang web phongvu.vn

Hình 2.5 Trang web phongvu.vn

Ưu điểm:

 Giao diện dễ nhìn và dễ sử dụng

 Các banner, sản phẩm được bố trí một cách một hợp lí

 Có đầy đủ các chức năng cần thiết cho một website thương mại

 Có đầy đủ thông tin về sản phẩm rao bán

 Người sử dụng dễ dàng tìm kiếm sản phẩm mà họ cần tìm

2.6.2 Trang web gearvn.com

Hình 2.6: Trang web gearvn.com

Ưu điểm:

 Có đầy đủ các chức năng cần thiết cho một website thương mại

 Có hệ thống nhắn tin trực tuyến nhằm hỗ trợ tư vấn cho khách hàng

Nhược điểm:

 Bố trí danh sách sản phẩm chưa đều

 Website thiết kế theo kiểu truyền thống nên phải load lại trang mỗi khi chuyển trang

 Sử dụng nhiều chữ quá to để trình bày về sản phẩm trong khi chữ trong filter lại nhỏ hơn rất nhiều

 Bố trí căn lề 2 bên không đồng đều

 Không có hệ thống gợi ý sản phẩm

2.6.3 Trang web fptshop.com.vn

Hình 2.7: Trang web fptshop.com.vn

Ưu điểm:

 Giao diện đơn giản nhưng ưa nhìn và dễ sử dụng

 Bố trí trang web về sản phẩm, căn lề, banner hợp lí

 Thông tin về sản phẩm hiển thị đầy đủ

 Hiển thị chi tiết sản phẩm có cả ảnh 360 độ và video

 Có đầy đủ các chức năng cần thiết cho một website thương mại

Chương 3 XÁC ĐỊNH YÊU CẦU

3.1 Yêu cầu chức năng

3.1.1 Quan điểm

 Dễ dàng sử dụng các chức năng của ứng dụng

 Đáp ứng đủ các chức năng cần thiết cho ứng dụng

3.1.2 Chức năng ứng dụng

 Đăng nhập/ Đăng ký: Người dùng phải có tài khoản của hệ thống để tiến hành

đăng nhập và mua sản phẩm, quản lí thông tin tài khoản của mình

 Xem danh sách sản phẩm: Hiện thị các danh sách các sản phẩm có trong

database theo từng loại sản phẩm, lọc sản phẩm, và tìm kiếm sản phẩm

 Xem chi tiết từng sản phẩm: Hiển thị và mô tả đầy đủ thông tin từng sản phẩm

về hình ảnh, cấu hình, mô tả, nội dung chi tiết, và gợi hiển thị các sản phẩm tương tự sảnphẩm đã chọn

 Tìm kiếm sản phẩm: Tìm kiếm sản phẩm theo tên có gợi ý và tìm kiếm sản phẩm theo key word tên sản phẩm

 Giỏ hàng: Xem thông tin sản phẩm được thêm vào, rồi tiến hành chọn địa chỉ giao hàng và thanh toán

 Lọc sản phẩm: Lọc sản phẩm phân nhóm theo thuộc tính của sản phẩm, có thể chọn nhiều thuộc tính để tiến hành lọc sản phẩm

 So sánh sản phẩm: Đưa 2 sản phẩm cùng loại vào để so sánh dựa vào các thuộc tính sản phẩm đó

 Gợi ý sản phẩm: Dựa vào loại, giá và thuộc tính của sản phẩm đã chọn, rồi tiếnhành phân tích và đưa ra danh sách các sản phẩm được sắp xếp theo mức độ gần giống vớisản phẩm đã chọn nhất

 Đánh giá sản phẩm: Đánh giá, bình luận về sản phẩm đã mua thông qua tài khoản đã đăng nhập của hệ thống

 Quản lý thông tin phía người dùng: Người dùng có thể quản lí thông tin tài cánhân, quản lý các đơn hàng, xem thông báo, chỉnh sửa địa chỉ giao hàng, nhận xét những sảnphẩm đã mua

 Quản lý thông tin phía admin: Xem trang dashboad, quản lý nhân viên, quản lý tàikhoản người dùng, quản lý sản phẩm, thông báo người dùng, cấu hình (banner,

…)

3.2 Yêu cầu hệ thống

 Dữ liệu trong database phải được quản lí chặt chẽ

 Các thông tin đưa lên build dưới dạng API

 Thông tin người dùng phải được bảo mật

3.3 Use case Diagram

Hình 3.1 Top level use case eCommerceWeb

Hình 3.2 Use case xem danh sách sản phẩm

Hình 3.3 Use case checkout

Hình 3.4 Use case xác thực người dùng

Hình 3.5 Use case quản lý tài khoản

Hình 3.6 Top level use case ManagementWeb

Hình 3.7 Use case quản lý nhóm

Hình 3.8 Use case quản lý nhân viên

Hình 3.9 Use case quản lý khách hàng

Hình 3.10 Use case quản lý sản phẩm

Hình 3.11 Use case quản lý thông báo

3.4 Đặc tả Use Case

Bảng 3.1 Đặc tả use case mua sản phẩm

Use case ID UC-1.1

Use case name Mua sản phẩm

Description Khách hàng muốn mua sản phẩm

Actor(s) Người dùng

Trigger Nhấp vào nút “Đặt hàng”

22

- Người dùng phải checkout các thông tin đơn hàng, nơi giao,phương thức thanh toán.

Post-condition(s) - Người dùng đặt hàng thành công, xóa các sản phẩm trong giỏ

hàng

- Hệ thống ghi nhận đơn hàng

Basic Flow 1 Khách hàng đã truy cập vào trang web e-commerece bán

laptop và linh kiện

2 Hệ thống chuyển hướng đến trang home và trả ra danh sáchsản phẩm

Bảng 3.2 Đặc tả use case xem danh sách sản phẩm

Use case ID UC-1.2

Use case name Xem danh sách sản phẩm

Description Khách hàng xem danh sách các sản phẩm

Actor(s) Người dùng, Vãng lai

Trigger

Pre-condition(s) Hệ thống phải có các sản phẩm

Post-condition(s) Người dùng thấy được thông tin các sản phẩm

Basic Flow 1 Khách hàng đã truy cập vào trang web e-commerece bán

laptop và linh kiện

2 Duyệt các mục ở UC-1.2.4

3 Danh sách sản phẩmAlternative Flow 2a Tìm kiếm sản phẩm ở UC-1.2.2

Use Case tiếp tục bước 3

2b Thêm vào giỏ hàng ở UC-1.2.3Use Case tiếp tục bước 3

2c Thêm vào danh sách so sánh ở UC-1.2.6Use Case tiếp tục bước 3

Exception Flow

Business Rules Có thể xem danh sách sản phẩm theo nhiều tiêu chí (danh mục,

loại sản phẩm, theo tên, …)Non-Functional

Requirement

Bảng 3.3 Đặc tả use case xem thông tin sản phẩm

Use case ID UC-1.2.1

Use case name Xem thông tin sản phẩm

Description Khách hàng muốn xem thông tin chi tiết sản phẩm

Actor(s) Người dùng, Vãng lai

Trigger Khách hàng muốn xem thông tin sản phẩm cụ thể

Pre-condition(s) Có danh sách sản phẩm ở UC-1.2

Post-condition(s) Người dùng thấy được thông tin sản phẩm cần xem

Basic Flow 1 Chọn sản phẩm muốn xem thông tin chi tiết

2 Hệ thống trả về thông tin chi tiết của sản phẩm muốn xemAlternative Flow 1a Người dùng dùng đường link sản phẩm nhập trên thanh URL