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

Về phía người dùng, khách hà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 cho p

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

SKL 0 0 7 0 5 8

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

PHỤ KIỆN

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

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

SVTH : LÊ THIỆN DUY MSSV : 16110034

Khóa : 2016 - 2020 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

Khóa : 2016 - 2020 Ngành : CÔNG NGHỆ THÔNG TIN GVHD: LÊ THỊ MINH CHÂU

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

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 MSSV: 16110095

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

Lớp: 16110CLST3 MSSV: 16110034 Lớp: 16110CLST3 Giảng viên hướng dẫn: Lê Thị Minh Châu ĐT: 0902200557

Ngày nhận đề tài: 25/02/2020 Ngà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: 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 hướng dẫn: Lê Thị Minh Châu

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?

5 Đánh giá loại:

6 Điểm:……….(Bằng chữ: ……… )

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?

5 Đánh giá loại:

6 Điểm:……….(Bằng chữ: ……… )

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

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

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ành Cô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ức quý 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ẫn chư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ót không tránh khỏi Nhóm thực hiện mong nhận được sự thông cảm và tận tình chỉ 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ời cả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ệ, con

ngườ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ĩnh

vự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

trong khoả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ách hà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ạng Internet 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ến thứ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óm thự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ếp cậ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ép ngườ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ách hà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ện lợ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.1 Wampp là gì? 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.2 Các khó khăn gặp phải 74

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 48

Hình 4.17 Giao diện danh sách gợi ý ở trang chi tiết sản phẩm 49

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ác lĩ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ông nhữ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ộc kiế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áy tí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 cho cô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 laptop hoặ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ựng mộ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ản phẩ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ính nă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ững thô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ẩm muố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ì page applications phải load lại toàn bộ trang web mỗi khi chuyển trang nhằm nâng cao trải nghiệm người dùng

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

2.1.1 Laravel là gì?

Là một framework PHP có mã nguồn mở miễn phí, giúp xây dựng các ứng dụng theo mô hình MVC (Model - View – Controller) một cách nhanh chóng, được tạo ra bởi một lập trình viên kỳ cựu từng làm NET đó là Taylor Otwell Được phát hành lần đầu vào ngày 9 tháng 6 năm 2011 [1]

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

Trước đây Laravel có tên là Bootplant sau đó thì đổi thành là Laravel, nguồn gốc tên bắt nguồn từ tên một tòa lâu đài ở Narnia, một vùng đất không có thật, mà nó ở trong một thế giới được tưởng tượng ra bởi nhà văn Clive Staples Lewis, và viết thành cuốn tiểu thuyết “Biên niên sử Narnia” [4] rất nổi tiếng được dựng thành phim Tòa lâu đài có tên là Paravel đọc lái đi sẽ thành Laravel, mục đích của Taylor Otwell

là mong muốn đứa con tinh thần Laravel phát triển một cách mạnh mẽ và vững trải

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ững framework 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 PHP như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ững vấn

đề, tình huống mà bạn thắc mắc hay là không biết trong Laravel Không những thế 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ủa framework này -Taylor Otwell cũng đã biên soạn ra tài liệu để cho các lập trình viê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ện là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ển thị và mã logic nghiệp, cái mà trước đó chỉ có thể biết đến ở NET hoặc Java Blade template 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 ra cá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ính nă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ày cà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ột sản phẩm có tên là PHP/FI PHP/FI do Rasmus Lerdorf tạo ra năm 1994, ban đầu được xem 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 truy cậ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 ra một bộ thực thi bằng C lớn hơn để có thể truy vấn tới Database và

đị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ác lỗ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 Apache Module trên Unix side MySQL Server, khi được khởi động, thực thi các truy vấn phứ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ến nhấ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ủ cạnh tranh của PHP, 2 ngôn ngữ này đều được dùng cho việc tạo website, linh động

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ến nhấ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 động 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

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ựng giao diện người dùng theo hướng ứng dụng đơn trang (SPA - Single-Page Applications) 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ướng khai 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ột phầ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ùng tươ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ếng mạ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)

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 server thà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ệu cho 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 tin ngườ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 ra WordPress 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ợp Apache để 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 WAMP và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

 Ổn định, không gặp các trường hợp lỗi như Xampp

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

 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ến hà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ới sả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ản phẩ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ài khoả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”

Pre-condition(s) - Người dùng phải xem sản phẩm và đã thêm sản phẩm đó vào

giỏ hàng

- 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ách sả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

3 Danh sách sản phẩm Alternative 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.3 Use Case tiếp tục bước 3

2c Thêm vào danh sách so sánh ở UC-1.2.6 Use 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 xem Alternative Flow 1a Người dùng dùng đường link sản phẩm nhập trên thanh URL

Use case tiếp tục bước 2

Exception Flow

Business Rules

Non-Functional

Requirement

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

Use case ID UC-1.2.2

Use case name Tìm kiếm sản phẩm

Description Khách hàng muốn xem sản phẩm mà họ muốn tìm kiếm

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

Trigger

Pre-condition(s)

Post-condition(s) Người dùng thấy được các sản phẩm mà họ muốn tìm kiếm

Basic Flow 1 Tìm kiếm theo tên UC-1.2.2.1

2 Danh sách các sản phẩm Alternative Flow 1 Tìm kiếm theo thuộc tính UC-1.2.2.2

Use case tiếp tục bước 2

Exception Flow

Business Rules

Non-Functional

Requirement

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

Use case ID UC-1.2.2.1