Tìm hiểu công nghệ laravel và xây dựng website bán mỹ phẩm

Chi tiết xử lý màn hình danh sách sản phẩm khuyến mãi .... Xử lý chi tiết màn hình chi tiết sản phẩm của khách .... Chi tiết xử lý màn hình quản lý đơn hàng của admin .... Chi tiết

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

TÌM HIỂU CÔNG NGHỆ LARAVEL VÀ XÂY

DỰNG WEBSITE BÁN MỸ PHẨM

GVHD: NGUYỄN TRẦN THI VĂN SVTH: PHẠM THỊ QUÀ

MSSV: 15110293 SVTH: NGUYỄN THỊ THANH THẢO MSSV: 15110314

Tp Hồ Chí Minh, tháng 6/2019

SKL 0 0 5 7 6 9

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

IÁO VIÊN HƯỚNG DẪN ThS.

PHẠM THỊ QUÀ – 15110293

15110314 NGUYỄN THỊ THANH THẢO –

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

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

Họ và tên Sinh viên 1: Phạm Thị Quà MSSV 1: 15110293

Họ và tên Sinh viên 2: Nguyễn Thị Thanh Thảo MSSV 2: 15110314

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

Tên đề tài: Tìm hiểu về Laravel PHP Framework và xây dựng website bán mỹ phẩm

Họ và tên Giáo viên hướng dẫn: ThS Nguyễn Trần Thi Văn

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

5 Đánh giá loại:

6 Điểm:

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

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

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

Trường Đại Học Sư Phạm Kỹ Thuật Tp.HCM

Khoa Công Nghệ Thông Tin

-***

Cộng Hòa Xã Hội Chủ Nghĩa Việt Nam Độc lập – Tự do – Hạnh phúc

***

Trường Đại Học Sư Phạm Kỹ Thuật Tp.HCM

Khoa Công Nghệ Thông Tin

-***

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 2019

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

Họ và tên Sinh viên 1: Phạm Thị Quà MSSV 1: 15110293

Họ và tên Sinh viên 2: Nguyễn Thị Thanh Thảo MSSV 2: 15110314

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

Tên đề tài: Tìm hiểu về Laravel PHP Framework và xây dựng website bán mỹ phẩm

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

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

4 Đánh giá loại:

5 Điểm:

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

Giáo viên phản biện

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

LỜI CẢM ƠN

Nhóm em xin chân thành cám ơn khoa Công Nghệ Thông Tin trường Đại học Sư Phạm Kỹ Thuật Tp.HCM đã tạo điều kiện thuận lợi cho chúng em thực hiện đề tài này trong kì học vừa qua

Chúng em cũng xin được gửi lời cảm ơn chân thành đến thầy Nguyễn Trần Thi Văn, thầy đã tận tình chỉ bảo và hướng dẫn nhóm em thực hiện đề tài này Mặc dù nhóm

em vẫn chưa làm tốt những gì thầy đề ra, nhưng chúng em vô cùng cảm ơn thầy đã hướng dẫn cụ thể và rất nhiệt tình cho nhóm em

Bên cạnh đó, chúng em xin gửi lời cảm ơn đến các thầy cô giảng viên của trường Đại Học Sư Phạm Kỹ Thuật Tp.HCM nói chung cũng như các thầy cô, giảng viên khoa Công Nghệ Thông Tin nói riêng, những người đã giảng dạy, tạo điều kiện cho chúng

em tích lũy được những kiến thức quý báu trong những năm học qua để có thể hoàn thành khóa luận tốt nghiệp

Dù đã cố gắng hoàn thành đề tài khóa luận đúng yêu cầu, nhưng do thời gian hạn hẹp và khả năng còn hạn chế nên có những yêu cầu nhóm em vẫn chưa hoàn thành tốt còn nhiều thiếu sót Chúng em mong nhận được sự thông cảm và tận tình chỉ bảo của các thầy cô

TP Hồ Chí Minh, ngày … tháng … năm 2019

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

Phạm Thị Quà Nguyễn Thị Thanh Thảo

ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP

Họ tên SV thực hiện 1: Phạm Thị Quà MSSV: 15110293

Họ tên SV thực hiện 2: Nguyễn Thị Thanh Thảo MSSV: 15110314

Thời gian làm luận văn: từ: 18/03/2019 Đến: 30/06/2019

Chuyên ngành: Công nghệ phần mềm

Tên luận văn: Tìm hiểu công nghệ Laravel và xây dựng Website bán mỹ phẩm

GV hướng dẫn ThS Nguyễn Trần Thi Văn

Nhiệm vụ luận văn:

Lý thuyết:

- Tổng quan về Laravel

- CSS, HTML, Jquery, Javacript, Bootstrap

- Tìm hiểu về Socket.io

Thực hành:

- Thiết kế giao diện Website bán mỹ phẩm

- Viết code xử lý các các năng cho trang Web

Đề cương luận văn

MỤC LỤC

1 Phần MỞ ĐẦU

1.1 Tính cấp thiết của đề tài

1.2 Mục tiêu nghiên cứu

1.3 Cách tiếp cận và phương pháp nghiên cứu

1.4 Phân tích các website có liên quan

1.5 Dự kiến kết quả đạt được

1.6 Ý nghĩa khoa học và thực tiễn

2 Phần NỘI DUNG

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

1.1 Tìm hiểu về laravel

1.2 Tìm hiểu về socket.io

Khoa Công Nghệ Thông Tin

-***

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

***

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

2.1 Khảo sát hiện trạng

2.2 Xác định yêu cầu

CHƯƠNG 3: PHÂN TÍCH, MÔ HÌNH HÓA YÊU CẦU

3.1 Lập danh sách yêu cầu

3.2 Lược đồ Use Case

3.3 Đặc tả Use Case

CHƯƠNG 4: THIẾT KẾ HỆ THỐNG VÀ LUỒNG XỬ LÝ

4.1 Thiết kế dữ liệu

4.2 Thiết kế giao diện

4.2 Lược đồ Sequence

CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ

5.1 Cài đặt

5.2 Kiểm thử

3 Phần KẾT LUẬN

3.1 Kết quả đạt được

3.2 Ưu, nhược điểm

3.3 Hướng phát triển

4 Tài liệu tham khảo

KẾ HOẠCH THỰC HIỆN

(Công việc dự kiến) Sản phẩm

1 18/03 – 24/03 Tìm hiểu về PHP Laravel Framework

2 +3 25/03 – 07/04

- Tìm hiểu về HTML

- Tìm hiểu về CSS

- Tìm hiểu về Javascript

- Tìm hiểu về thư viện JQuery của Javascript

Xây dựng được giao diện cho trang web

4 + 5 08/04 – 21/04 Thiết kế cơ sở dữ liệu Load được cơ sở dữ

liệu lên trang web

10 20/05 – 26/05 Kiểm thử lại trang web và sửa lỗi Ứng dụng đã kiểm và

Hoàn thành các chức năng

13 10/06 – 16/06 Kiểm thử trang web Trang web hoàn thành

và chạy ổn định

14 17/06 – 23/06 Hoàn thành báo cáo Báo cáo đã hoàn thành

15 24/06 – 30/06 Kiểm tra lại tổng thể trang web và báo

Người viết đề cương

Ý kiến của giáo viên hướng dẫn

(ký và ghi rõ họ tên)

MỤC LỤC

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

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

LỜI CẢM ƠN iii

ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP iv

KẾ HOẠCH THỰC HIỆN v

MỤC LỤC vii

DANH MỤC BẢNG BIỂU xii

DANH MỤC HÌNH ẢNH xiv

PHẦN MỞ ĐẦU 1

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 2

2 MỤC TIÊU NGHIÊN CỨU 2

3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU 3

3.1 Đối tượng nghiên cứu 3

3.2 Phạm vi nghiên cứu 3

3.3 Phương pháp nghiên cứu 3

4 PHÂN TÍCH CÁC WEBSITE CÓ LIÊN QUAN 4

5 DỰ KIẾN KẾT QUẢ ĐẠT ĐƯỢC 4

6 Ý NGHĨA KHOA HỌC THỰC TIỄN 4

PHẦN NỘI DUNG 5

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 6

1.1 TÌM HIỂU VỀ LARAVEL 6

1.1.1 Giới thiệu về laravel 6

1.1.2 Ưu điểm của Laravel PHP Framework 6

1.1.3 Cấu trúc thư mục và luồng xử lý trong laravel 6

1.1.4 Thành phần cơ bản trong laravel 7

1.1.4.1 Route trong Laravel 7

1.1.4.2 Laravel Model 9

1.1.4.3 Laravel Controller 10

1.1.4.4 Laravel View (Master Template) 11

1.2 TÌM HIỂU VỀ SOCKET.IO 13

1.2.1 Socket.io là gì? 13

1.2.2 Cách sử dụng socket.io 13

1.2.3 Cơ chế hoạt động của socket.io 14

1.2.3.1 Khai báo sử dụng Socket.io 14

1.2.3.2 Cơ chế lắng nghe, truyền dữ liệu của socketio 15

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 17

2.1 KHẢO SÁT HIỆN TRẠNG 17

2.1.1 Hasaki ( https://hasaki.vn/) 17

2.1.2 Skinfood (https://thegioiskinfood.com/) 18

2.1.3 Epomi (https://shop.epomi.com/) 19

2.1.4 Kết luận 20

2.2 XÁC ĐỊNH YÊU CẦU 21

2.2.1 Yêu cầu chức năng 21

2.2.1.1 Yêu cầu chức năng nghiệp vụ 21

2.2.1.2 Yêu cầu chức năng hệ thống 21

2.2.2 Yêu cầu phi chức năng 22

CHƯƠNG 3: PHÂN TÍCH, MÔ HÌNH HÓA YÊU CẦU 23

3.1 LẬP DANH SÁCH YÊU CẦU 23

3.1.1 Khách (Guest) 23

3.1.2 Quản trị (Admin) 24

3.2 LƯỢC ĐỒ USE CASE 26

3.3 ĐẶC TẢ USE CASE 28

3.3.1 Đăng nhập/ đăng xuất 28

3.3.2 Đăng kí tài khoản 29

3.3.3 Xóa tài khoản 29

3.3.4 Phân quyền người dùng 30

3.3.5 Thêm sản phẩm 30

3.3.6 Xóa sản phẩm 31

3.3.7 Sửa giá sản phẩm 31

3.3.8 Duyệt đơn hàng 32

3.3.9 Hủy đơn hàng 32

3.3.10 Mua hàng 33

3.3.11 Gửi thắc mắc 33

3.3.12 Bình luận sản phẩm 34

3.3.13 Tìm kiếm sản phẩm 35

CHƯƠNG 4: THIẾT KẾ HỆ THỐNG VÀ LUỒNG XỬ LÝ 36

4.1 THIẾT KẾ DỮ LIỆU 36

4.1.1 Bảng thuộc tính 36

4.1.2 Lược đồ quan hệ 40

4.2 THIẾT KẾ GIAO DIỆN 41

4.2.1 Danh sách các màn hình và sơ đồ chuyển đổi 41

4.2.2 Giao diện khách 41

4.2.2.1 Giao diện trang chủ 41

4.2.2.2 Giao diện đăng nhập 42

4.2.2.3 Giao diện đăng ký 43

4.2.2.4 Giao diện danh sách tất cả sản phẩm 44

4.2.2.5 Giao diện danh sách sản phẩm mới 44

4.2.2.6 Giao diện danh sách các phẩm khuyến mãi 45

4.2.2.7 Giao diện danh sách sản phẩm lọc theo tiêu chí 46

4.2.2.8 Giao diện về chúng tôi 47

4.2.2.9 Giao diện trang tin tức 47

4.2.2.10 Giao diện trang liên hệ 48

4.2.2.11 Giao diện chi tiết sản phẩm 49

4.2.2.12 Giao diện Giỏ hàng 50

4.2.2.13 Giao diện Chatbox 50

4.2.2.14 Giao diện bình luận 51

4.2.3 Giao diện admin 52

4.2.3.1 Trang đăng nhập admin 52

4.2.3.2 Trang chủ admin 53

4.2.3.3 Trang danh sách đơn hàng 54

4.2.3.4 Trang chi tiết đơn hàng 54

4.2.3.5 Trang quản lý người dùng 55

4.2.3.6 Trang danh sách sản phẩm 56

4.2.3.7 Trang chi tiết sản phẩm 57

4.2.3.8 Trang thêm sản phẩm 58

4.2.3.9 Trang sửa giá sản phẩm 58

4.3 LƯỢC ĐỒ SEQUENCE 59

4.3.1 Sequence Diagram tổng quát 59

4.3.2 Sequence Diagram cho Use Case đăng nhập 60

4.3.3 Sequence Diagram cho Use Case đăng kí 60

4.3.4 Sequence Diagram cho Use Case thêm sản phẩm 60

4.3.5 Sequence Diagram cho Use Case sửa giá sản phẩm 61

4.3.6 Sequence Diagram cho Use Case duyệt đơn hàng 62

4.3.7 Sequence Diagram cho Use Case mua hàng 62

4.3.8 Sequence Diagram cho Use Case chỉnh sửa sản phẩm 63

CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 64

5.1 CÀI ĐẶT 64

5.1.1 Ngôn ngữ lập trình 64

5.1.1.1 Thiết kế giao diện 64

5.1.1.2 Ngôn ngữ xử lý 65

5.1.2 Thư viện, công cụ hỗ trợ 67

5.1.3 Hệ quản trị cơ sở dữ liệu MySQL 67

5.1.4 Sơ đồ lớp 69

5.1.5 Mô hình code 69

5.1.3.1 Mô hình MVC và cấu trúc thư mục 69

5.1.3.2 Chi tiết các thư mục 71

5.2 KIỂM THỬ 72

PHẦN KẾT LUẬN 77

1 KẾT QUẢ ĐẠT ĐƯỢC 78

2 ƯU, NHƯỢC ĐIỂM 78

2.1 Ưu điểm 78

2.2 Nhược điểm 78

3 HƯỚNG PHÁT TRIỂN 79

TÀI LIỆU THAM KHẢO 80

DANH MỤC BẢNG BIỂU

Bảng 1 Bảng yêu cầu chức năng hệ thống 21

Bảng 2 Bảng yêu cầu phi chức năng 22

Bảng 3 Danh sách nghiệp vụ của Guest 23

Bảng 4 Danh sách quy định liên quan của Guest 23

Bảng 5 Danh sách nghiệp vụ của admin 24

Bảng 6 Danh sách quy định liên quan của admin 25

Bảng 7 Mô tả Use Case đăng nhập, đăng xuất tài khoản 28

Bảng 8 Mô tả Use Case đăng kí tài khoản 29

Bảng 9 Mô tả Use Case Xóa tài khoản 30

Bảng 10 Mô tả Use Case Phân quyền người dùng 30

Bảng 11 Mô tả Use Case Thêm sản phẩm 30

Bảng 12 Mô tả Use Case Xóa sản phẩm 31

Bảng 13 Mô tả Use Case Sửa giá sản phẩm 31

Bảng 14 Mô tả Use Case Duyệt đơn hàng 32

Bảng 15 Mô tả Use Case Hủy đơn hàng 32

Bảng 16 Mô tả Use Case Mua hàng 33

Bảng 17 Mô tả Use Case Gửi thắc mắc 34

Bảng 18 Mô tả Use Case Bình luận sản phẩm 34

Bảng 19 Mô tả Use Case Tìm kiếm sản phẩm 35

Bảng 20 Bảng thuộc tính role 36

Bảng 21 Bảng thuộc tính users 36

Bảng 22 Bảng thuộc tính user_details 36

Bảng 23 Bảng thuộc tính type_products 36

Bảng 24 Bảng thuộc tính products 37

Bảng 25 Bảng thuộc tính customer 37

Bảng 26 Bảng thuộc tính color 37

Bảng 27 Bảng thuộc tính edition 37

Bảng 28 Bảng thuộc tính contact 38

Bảng 29 Bảng thuộc tính bills 38

Bảng 30 Bảng thuộc tính bill_detail 38

Bảng 32 Bảng thuộc tính messages 39

Bảng 33 Bảng thuộc tính news 39

Bảng 34 Bảng thuộc tính comments 39

Bảng 35 Bảng thuộc tính replies 39

Bảng 36 Chi tiết xử lý màn hình trang chủ 42

Bảng 37 Chi tiết xử lý màn hình đăng nhập của khách 43

Bảng 38 Chi tiết xử lý màn hình đăng kí của khách 44

Bảng 39 Chi tiết xử lý màn tất cả sản phẩm của khách 44

Bảng 40 Chi tiết xử lý màn hình danh sách sản phẩm mới của khách 45

Bảng 41 Chi tiết xử lý màn hình danh sách sản phẩm khuyến mãi 45

Bảng 42 Chi tiết xử lý màn hình sản phẩm lọc theo tiêu chí giá từ thấp đến cao 46

Bảng 43 Chi tiết xử lý màn hình Xem thông tin về chúng tôi 47

Bảng 44 Xử lý chi tiết màn hình tin tức 48

Bảng 45 Xử lý chi tiết màn hình thông tin liên hệ 49

Bảng 46 Xử lý chi tiết màn hình chi tiết sản phẩm của khách 49

Bảng 47 Chi tiết xử lý màn hình giỏ hàng của khách 50

Bảng 48 Chi tiết xử lý màn hình chatbox của khách hàng 51

Bảng 49 Chi tiết xử lý màn hình comments của khách hàng và admin 52

Bảng 50 Chi tiết xử lý màn hình đăng nhập của admin 52

Bảng 51 Chi tiết xử lý màn hình trang chủ của admin 53

Bảng 52 Chi tiết xử lý màn hình quản lý đơn hàng của admin 54

Bảng 53 Chi tiết xử lý màn hình chi tiết đơn hàng của admin 55

Bảng 54 Chi tiết xử lý màn hình quản lí tài khoản của admin 55

Bảng 55 Chi tiết xử lý màn hình danh sách sản phẩm của admin 56

Bảng 56 Chi tiết xử lý màn hình chi tiết – chỉnh sửa sản phẩm của admin 57

Bảng 57 Chi tiết xử lý màn hình thêm sản phẩm của admin 58

Bảng 58 Chi tiết xử lý màn hình sửa giá sản phẩm của admin 59

Bảng 59 Bảng kiểm thử trang web 72

DANH MỤC HÌNH ẢNH

Hình 1 Mô hình tương tác Model và Cơ sở dữ liệu 9

Hình 2 Liên kết Route, Controller và View trong Laravel 12

Hình 3 Hoạt động của Master Template trong Laravel 13

Hình 4 Cấu trúc server_client trong Socketio 14

Hình 5 Giao diện trang chủ Hasaki 17

Hình 6 Giao diện trang sản phẩm Hasaki 17

Hình 7 Giao diện trang chủ Skinfood 18

Hình 8 Giao diện trang sản phẩm Skinfood 18

Hình 9 Giao diện trang chủ Epomi 19

Hình 10 Giao diện trang sản phẩm Epomi 20

Hình 11 Mô hình sự hài lòng của khách hàng 20

Hình 12 Lược đồ Use Case tổng quát 26

Hình 13 Use Case quản lý sản phẩm 27

Hình 14 Use Case quản lý người dùng 27

Hình 15 Use Case quản lý đơn hàng 28

Hình 16 Use Case quản lý thông tin tài khoản 28

Hình 17 Lược đồ quan hệ 40

Hình 18 Danh sách các màn hình và sơ đồ chuyển đổi 41

Hình 19 Giao diện trang chủ và các chức năng sử dụng của khách 41

Hình 20 Giao diện đăng nhập của khách 43

Hình 21 Giao diện đăng ký của khách 43

Hình 22 Giao diện màn hình tất cả sản phẩm 44

Hình 23 Giao diện danh sách sản phẩm mới 45

Hình 24 Giao diện danh sách sản phẩm khuyến mãi 45

Hình 25 Giao diện sản phẩm lọc theo tiêu chí từ thấp đến cao 46

Hình 26 Giao diện xem thông tin trang về chúng tôi 47

Hình 27 Giao diện trang tin tức 48

Hình 28 Giao diện trang liên hệ 48

Hình 29 Giao diện trang chi tiết sản phẩm 49

Hình 30 Giao diện trang chi tiết sản phẩm 49

Hình 32 Giao diện chatbox của khách hàng 51

Hình 33 Giao diện gửi bình luận của khách hàng 51

Hình 34 Màn hình đăng nhập của admin 52

Hình 35 Màn hình trang chủ của admin 53

Hình 36 Màn hình quản lý đơn hàng của admin 54

Hình 37 Màn hình chi tiết đơn hàng của admin 54

Hình 38 Màn hình quản lý người dùng của admin 55

Hình 39 Màn hình danh sách sản phẩm 56

Hình 40 Màn hình chi tiết – chỉnh sửa sản phẩm 57

Hình 41 Màn hình thêm sản phẩm của admin 58

Hình 42 Màn hình sửa giá sản phẩm của admin 58

Hình 43 Sơ đồ tuần tự tổng quát 59

Hình 44 Sơ đồ tuần tự Đăng nhập 60

Hình 45 Sơ đồ tuần tự Đăng ký 60

Hình 46 Sơ đồ tuần tự Thêm sản phẩm 61

Hình 47 Sơ đồ tuần tự Sửa giá sản phẩm 61

Hình 48 Sơ đồ tuần tự Duyệt đơn hàng 62

Hình 49 Sơ đồ tuần tự Thanh toán 62

Hình 50 Sơ đồ tuần tự Chỉnh sửa sản phẩm 63

Hình 51 Sơ đồ lớp 69

PHẦN MỞ ĐẦU

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Ngày nay, nhu cầu của con người trong xã hội luôn là động cơ chính thúc đẩy sản xuất Như ta đã biết việc thiếu thông tin làm cho việc đưa sản phẩm đến tay người tiêu dùng trở nên khó khăn Bên cạnh đó việc phổ biến sử dụng Internet đã tạo ra một bước ngoặt mới trong định hướng phát triển ngành Công nghệ Thông tin của nước ta, cùng với nhu cầu sử dụng máy tính để trao đổi và cập nhật thông tin ngày càng tăng Từ thực

tế đó việc đưa thông tin đáp ứng nhu cầu của mọi người và hỗ trợ cho việc mua bán diễn

ra một cách nhanh chóng, tiết kiệm đã trở nên vô cùng cấp thiết Song song với việc bán hàng qua mạng xã hội như Facebook, Zalo, … thì bán hàng qua website cũng là một giải pháp tối ưu trong việc phân phối thông tin vào mục đích thương mại

Việc bạn chỉ cần ở nhà hoặc nơi làm việc hay bất cứ nơi đâu với một chiếc smartphone hoặc máy tính có kết nối Internet, bạn có thể mua cho mình tất cả các mặt hàng được bán ở một cửa hàng nào đó trên mạng từ một bó hoa tươi, một chiếc điện thoại, hay một chiếc máy tính, … Đặc biệt trong xã hội ngày càng phát triển, không chỉ nhu cầu ăn ngon, mặc đẹp mà nhu cầu làm đẹp của con người cũng rất quan trọng Do

đó, xây dựng “Website Mỹ phẩm” là một vấn đề thực tế, ứng dụng được và có tiềm

năng phát triển trong tương lai

Sự ra đời của ngôn ngữ lập trình cho phép chúng ta có thể thiết kế và xây dựng các ứng dụng giao dịch điện tử dưới nhiều hình thức khác nhau Với sự hỗ trợ của các loại

cơ sở dữ liệu quan hệ, ta có thể kết hợp chúng trên trình chủ như PHP, ASP, JSP, … để có thể xây dựng và triển khai ứng dụng với nhiều mục đích khác nhau PHP và MySQL cũng là một trong những sự hỗ trợ để xây dựng một trang web bán hàng tuyệt vời Với

lý do đó, được sự hướng dẫn tận tình của thầy Nguyễn Trần Thi Văn, chúng em đã chọn đề tài “Website Mỹ phẩm” sử dụng công nghệ Laravel PHP Framework và hệ

quản trị cơ sở dữ liệu MySQL làm đề tài tiểu luận chuyên ngành của mình

2 MỤC TIÊU NGHIÊN CỨU

Tìm hiểu về công nghệ Laravel PHP Framework: khái niệm, cấu trúc, thành phần

và hiểu được vì sao laravel là một trong những framework tốt nhất để phát triển

Xây dựng một website bán mỹ phẩm với giao diện thân thiện dễ dàng sử dụng nhằm giúp người dùng dễ xem thông tin và mua hàng tại webstie, tiết kiệm thời gian phải đến tận cửa hàng để mua sản phẩm trực tiếp, với một số chức năng cơ bản như sau:

- Đăng nhập, đăng kí, đăng xuất tài khoản

- Tìm kiếm sản phẩm

- Phân loại các sản phẩm theo loại, theo giá (từ cao đến thấp hoặc ngược lại)

- Đặt hàng online

- Gửi bình luận về sản phẩm

- Gửi thắc mắc cho cửa hàng

- Xem thông tin cá nhân, thay đổi thông tin tài khoản

- Xem danh sách sản phẩm, sản phẩm khuyến mãi, sản phẩm mới

- Xem tin tức, các thông tin liên hệ, chính sách kinh doanh của cửa hàng

- Chat online với cửa hàng thông qua chatbox hoặc Zalo hoặc Facebook

- Có thể chia sẻ sản phẩm qua Facebook

- Quản lý sản phẩm: thêm sản phẩm, xóa sản phẩm, sửa giá sản phẩm

- Quản lý tài khoản: phân quyền người dùng, xóa tài khoản, xem thông tin tài khoản

- Quản lý đơn hàng: xem danh sách đơn hàng, duyệt đơn hàng, hủy đơn hàng

3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU

3.1 Đối tượng nghiên cứu

Công nghệ laravel, xây dựng website bán mỹ phẩm sử dụng ngôn ngữ PHP

3.3 Phương pháp nghiên cứu

- Phương pháp tổng hợp lý thuyết: Nghiên cứu và tìm hiểu các tài liệu lý thuyết,

các trang web có liên quan đến các công nghệ đang tìm hiểu

- Phương pháp chuyên gia: Tham khảo ý kiến của Thầy hướng dẫn cùng các anh,

chị khóa trước và các bạn bè đang cùng thực hiện khóa luận có sử dụng cùng ngôn ngữ

- Phương pháp mô hình hóa: Hoàn thành website bán mỹ phẩm từ việc xác định

các yêu cầu

4 PHÂN TÍCH CÁC WEBSITE CÓ LIÊN QUAN

Hầu hết các trang web bán hàng nói chung hiện nay bán đa dạng sản phẩm từ văn phòng phẩm, quần áo, đồ nội thất, đồ nhà bếp, mỹ phẩm, đồ chơi cho bé,… đến các trang web chỉ bán một loại sản phẩm duy nhất là mỹ phẩm với giao diện đẹp thu hút người dùng, tốc độ xử lý nhanh, thao tác đơn giản ai cũng có thể sử dụng được Tuy nhiên vẫn còn tồn tại một số trang web bán hàng đặc biệt là bán mỹ phẩm còn nhiều nhược điểm:

- Màu sắc không hài hòa gây nhứt mắt cho người dùng

- Bố cục các phần của trang web chưa hợp lý

- Tốc độ xử lý chậm, cập nhật sản phẩm mới chậm

- Thông tin về sản phẩm chưa rõ rãng

- Hình ảnh sản phẩm trên trang web không rõ nét hoặc khác xa với sản phẩm thực tế

5 DỰ KIẾN KẾT QUẢ ĐẠT ĐƯỢC

Hoàn thành website bán mỹ phẩm với:

- Giao diện đẹp mắt, thao tác đơn giản, dễ dàng sử dụng

- Tốc độ xử lý nhanh và ổn định

- Xây dựng đầy đủ các chức năng của một website bán hàng dễ dàng cho việc bán hàng và quản lý các thông tin có liên quan: thông tin sản phẩm, người dùng, đơn hàng, …

6 Ý NGHĨA KHOA HỌC THỰC TIỄN

Đề tài hướng đến là tạo ra một website giúp mọi người có thể mua các sản phẩm làm đẹp cho phái nữ một cách thuận tiện dễ dàng và tiết kiệm thời gian hơn

Giúp sinh viên hiểu thêm về công nghệ, bổ sung kiến thức để phát triển hơn Rèn luyện kỹ năng phân tích và thiết kế dự án

Phát huy tính sáng tạo và khả năng làm việc nhóm

PHẦN NỘI DUNG

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 TÌM HIỂU VỀ LARAVEL

1.1.1 Giới thiệu về laravel

Laravel là một PHP framework mã nguồn mở miễn phí, được phát triển bởi Taylor Otwell vào năm 2011 và nhắm vào mục tiêu hỗ trợ phát triển các ứng dụng web theo kiến trúc model-view-controller (MVC) Những tính năng nổi bật của Laravel bao gồm cú pháp dễ hiểu – rõ ràng, một hệ thống đóng gói modular và quản lý gói phụ thuộc, nhiều cách khác nhau để truy cập vào các cơ sở dữ liệu quan hệ, nhiều tiện ích khác nhau hỗ trợ việc triển khai vào bảo trì ứng dụng

Vào khoảng tháng 3 năm 2015, các lập trình viên đã có một cuộc bình chọn PHP framework phổ biến nhất, Laravel đã giành vị trí quán quân cho PHP framework phổ biến nhất năm 2015, theo sau lần lượt Symfony2, Nette, CodeIgniter, Yii2 và một số khác Trước đó, tháng 8 2014, Laravel đã trở thành dự án PHP phổ biến nhất và được theo dõi nhiều nhất trên Github Laravel được phát hành theo giầy phép MIT, với source code được lưu trữ tại Githz

1.1.2 Ưu điểm của Laravel PHP Framework

• Tốc độ xử lý nhanh

• Mã nguồn mở

• Tổ chức tập tin và cấu trúc mã lệnh rõ ràng

• Hệ thống thư viện và công cụ phong phú

• Xác nhận biểu mẫu (Form Validation)

• Mã lệnh ít hơn, nhưng làm được nhiều việc hơn

• Mô hình MVC rõ ràng, dễ bảo trì

• Thích hợp làm việc nhóm và phân chia công việc

• Chức năng hỗ trợ bảo mật, xác thực dữ liệu, SQL Injection,

• Hệ thống giao diện phong phú, thư viện form helper giúp xây dựng biểu

mẫu nhanh chóng và bảo mật

• Hỗ trợ đường dẫn thân thiện (Friendly Url)

• Bảo mật session, cookie, …

• Cộng đồng người dùng rộng lớn

1.1.3 Cấu trúc thư mục và luồng xử lý trong laravel

• Thư mục chính:

- App: chứa mã cốt lỗi của ứng dụng, ta dùng nhiều tới thư mục này

- Boostrap: chứa các tiệp tin khởi động và cấu hình tự động chạy

- Config: chứa tất cả các tệp cấu hình của hệ thống

- Database: nơi chúng ta cấu hình các bộ dữ liệu mẫu: migrate, seed

- Public: nơi lưu trữ thư viện CSS, Javascript, các hình ảnh Chứa tệp index.php

- Resources: chứa views, các tệp ngôn ngữ

- Routes: chứa tất cả các route của hệ thống

• Luồng xử lý:

Đầu tiên người dùng yêu cầu 1 đường dẫn sang phía route, route trả về controller, controller sẽ xử lý các yêu cầu đó, nếu yêu cầu dữ liệu thì sẽ phải thông qua Model để truy xuất đến cơ sở dữ liệu, sau khi truy xuất dữ liệu model trả về cho controller, controller đưa dữ liệu về cho view, view xuất dữ liệu ra màn hình cho người dùng xem

1.1.4 Thành phần cơ bản trong laravel

1.1.4.1 Route trong Laravel

Mục đích chính của route là định tuyến đến những controller cụ thể nào đó từ phía yêu cầu của người sử dụng Đối với những Framework khác thì khi muốn thực hiện một công việc nào đó thường sẽ cần xây dựng một controller để xử lý, nhưng trong Laravel thì hoàn toàn có thể xử lý dữ liệu ngay trong phần Route Đây chính là điểm mạnh cũng như điểm khác biệt lớn của Laravel đối với các Framwork khác

• Cấu trúc Route:

- Các định tuyến trong Laravel đều được viết trong routes/web.php

- Cú pháp: Route: method (‘URI’,’function call back’)

Trong đó:

o URI là dạng link trên url

o Function call back: hàm sẽ gọi tới link URI phía trên

o Method: các dạng phương thức cơ bản post, get, put, delete, any

o Các method:

o POST Route: các thao tác lấy từ biểu mẫu (form) như thêm dữ liệu

- GET Route: dành cho các thao tác truy cập thông thường tương đương với yêu cầu cơ bản trong PHP Ví dụ chạy 1 đường dẫn trên URL

- PUT Route: dành cho các thao tác lấy từ biểu mẫu nhưng là cập nhật dữ liệu

- DELETE Route: dành cho thao tác xóa dữ liệu

- ANY Route: là sự tổng hợp các thao tác ở trên

- Trong đó POST và GET được sử dụng nhiều nhất

• Truyền tham số trên Route:

Trong đó, {ten} là giá trị do người dùng nhập trên liên kết của URL hoặc do nhà phát triển định sẵn

Đặt điều kiện cho tham số với phương thức where ():

• Định danh cho Route:

- Cách 1: Khai báo ‘as’=>’tên route’ trong tham số như sau:

- Cách 2: cách này khá ngắn gọn và dễ dùng: thêm name (‘tên route’) ở

cuối

• Muốn gọi route bằng tên đã đặt, sử dụng route (‘tên route’):

• Nhóm Route:

1.1.4.2 Laravel Model

Hình 1 Mô hình tương tác Model và Cơ sở dữ liệu

Model là một lớp dữ liệu có cấu trúc giống với bảng trong cơ sở dữ liệu, dùnđể xử lý dữ liệu vào ra trong bảng

• Tạo model

Các Model sẽ được lưu tại mục App/

Thực hiện:

- Tạo một Model: khởi động Command Prompt (cmp) và trỏ về thư mục gốc của dự án, dõ lệnh sau để tạo model:

- Tạo một Model và migrate tương ứng với nó

- Kết nối với Model tới bảng trong cơ sở dữ liệu

- Một số phương thức hay sử dụng trong Model

Tạo Controller với cmd bằng câu lệnh:

Php artisanmake: controller MyController

• Gọi Controller từ Route

- Để gọi một Controller, phải thông qua Route bằng cách khai báo như sau:

• Gửi nhận dữ liệu từ Route sang Controller

1.1.4.4 Laravel View (Master Template)

• Laravel View

Hình 2 Liên kết Route, Controller và View trong Laravel

Giả sử truyền lên trình duyệt một dường dẫn, trình duyệt sẽ gửi lên router, Router chuyển sang Controller, sau khi Controller xử lý xong, sẽ gọi tệp tin index.php, đây chính là view Tập tin này chứa các mã nguồn HTML, CSS, hoặc các dữ liệu mà nhà phát triển ứng dụng muốn hiển thị lên màn hình rồi trả về trình duyệt hiển thị cho người dùng xem

• Truyền tham số sang view

• Master template

Hình 3 Hoạt động của Master Template trong Laravel

Luồng xử lý dữ liệu tương tự như ở View ở trên Trong View có tệp master.blade.php, tệp này chứa giao diện chung của hệ thống, @section định nghĩa phần nội dung còn @yield sử dụng để hiển thị nội dung mà section đem lại Các view sẽ kế thừa blade template này bằng cách sử dụng lệnh extends Muốn sử dụng Blade Template thì tên tệp phải có chứa blade đằng trước php

1.2 TÌM HIỂU VỀ SOCKET.IO

1.2.1 Socket.io là gì?

Là một module của NodeJs Để xây dựng một ứng dụng realtime cần sử dụng

socketio Socketio sẽ giúp các bên ở những địa điểm khác nhau kết nối với nhau, truyền

dữ liệu ngay lập tức thông qua server trung gian Socketio có thể được sử dụng trong

nhiều ứng dụng như chat, game online, cập nhật kết quả của một trận đấu đang xảy ra

Socketio không phải là một ngôn ngữ, mà chỉ là 1 công cụ giúp thực hiện những ứng dụng realtime Vì thế, không thể sử dụng socketio để thay thế hoàn toàn cho một ngôn ngữ, mà phải sử dụng kết hợp với một ngôn ngữ khác Ngôn ngữ đó có thể là php, asp.net, nodejs,

khác nhau Ở đây, nếu được thì khuyến khích sử dụng nodejs để dựng server, vì như vậy có thể cài trực tiếp socketio vào cùng một server Nếu sử dụng php thì phải cài thêm những package khác, hoặc phải chuẩn bị riêng server để chạy socketio

- Phía client: Ở phía client sẽ xây dựng giao diện người dùng Ở đây có thể sử dụng

js, hoặc các thư viện của js như jquery, Nói chung là ngôn ngữ gì cũng được

Hình 4 Cấu trúc server_client trong Socketio

- Những thứ cần chuẩn bị để sử dụng socketio

• PC: Mac hoặc Win đều được

• Download phần mềm socketio

- Cài đặt socketio trên server nodejs Tạo thư mục Demo (Có thể đặt tên bất kỳ) Mở màn hình terminal (Mac)/ cmd (Win), cd đến thư mục Demo Tại màn hình cmd, gõ câu lệnh: npm init; rồi nhấn enter Khi đó hệ thống sẽ chạy và yêu cầu nhập tên dự án, nhập tên dự án bất kỳ Ở các setting khác thì enter bỏ qua, khi hệ thống hiển thị Yes or No? thì gõ Yes để cài đặt

Sau khi hoàn thành bước cài đặt ở trên, hệ thống sẽ tạo ra file package.json Đây là file dùng để cài đặt cấu hình server Tiếp theo, cần đặt những package cần thiết trên server để có thể làm web và ứng dụng realtime Để cài những package này mở màn hình cmd

> cd đến thư mục Demo > gõ dòng lệnh npm install express ejs socketio Khi cài đặt thành công, hệ thống sẽ tự tạo thư mục nodemodules

1.2.3 Cơ chế hoạt động của socket.io

1.2.3.1 Khai báo sử dụng Socket.io

Cơ chế hoạt động của một ứng dụng realtime đó là thông qua server để lắng nghe (listen) data và truyền data về các máy client Vì vậy cần cài khai báo sử dụng socketio ở cả phía server và client

Code khai báo sử dụng socketio ở server:

Code khai báo sử dụng socketio ở phía client

1.2.3.2 Cơ chế lắng nghe, truyền dữ liệu của socketio

Để lắng nghe data, ta sử dụng câu lệnh socket.on(), để phát dữ liệu thì sử dụng lệnh socket.emit()

Ví dụ, client gửi 1 đoạn chat đi, thì khi đó ở phía server cần viết code để nhận dữ liệu đoạn code đó và truyền dữ liệu chat đó đi đến các server khác Đồng thời ở ở phía client cũng cần viết code để gửi và nhận dữ liệu từ server

Code phía server

Code phía client

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 2.1 KHẢO SÁT HIỆN TRẠNG

2.1.1 Hasaki ( https://hasaki.vn/ )

Hình 5 Giao diện trang chủ Hasaki

Hình 6 Giao diện trang sản phẩm Hasaki

➢ Ưu điểm:

• Sản phẩm đa dạng, đa số các sản phẩm được bán đều của nhà phân phối

chính hãng

• Giá sản phẩm rẻ và thường có nhiều chương trình sale

• Thiết kế trang web đơn giản, dễ tìm kiếm sản phẩm

• Quy trình sử lý đơn hàng nhanh, đơn giản

• Thời gian giao hàng chủ động và nhanh chóng

• Phí ship rẻ và thời gian giao hàng nhanh

➢ Nhược điểm:

• Sản phẩm hết hàng không được loại bỏ mà vẫn thể hiện khi tìm kiếm

sản phẩm

• Không tư vấn chi tiết, chỉ giới thiệu sản phẩm theo nhu cầu

• Hiện nay, Hasaki còn bán đồ trẻ em, giày dép nên trang web hơi bị

loãng thông tin về mỹ phẩm

2.1.2 Skinfood ( https://thegioiskinfood.com/ )

Hình 7 Giao diện trang chủ Skinfood

Hình 8 Giao diện trang sản phẩm Skinfood

➢ Ưu điểm:

• Giá sản phẩm rẻ, phân khúc giá đa dạng từ bình dân đến cao cấp

• Sản phẩm Hàn Quốc đa dạng, cập nhật hot trend nhanh chóng và có

nhiều sample

• Thiết kế website dễ tìm kiếm

• Sản phẩm được mô tả chi tiết, rõ ràng

• Phí vận chuyển rẻ

➢ Nhược điểm:

• Chỉ bán sản phẩm từ các thương hiệu Hàn Quốc

• Sản phẩm nhanh hết hàng

• Thời gian phản hồi tin nhắn tương đối chậm

• Màu sắc chưa đẹp mắt

2.1.3 Epomi ( https://shop.epomi.com/ )

Hình 9 Giao diện trang chủ Epomi

Hình 10 Giao diện trang sản phẩm Epomi

➢ Ưu điểm:

• Các sản phẩm chính hãng và đa dạng

• Tư vấn nhiệt tình, nhanh chóng

• Thường xuyên có các bài viết chia sẻ kinh nghiệm làm đẹp hữu ích

• Thiết kế trang web đơn giản, dễ tiếp cận

• Quy trình mua hàng nhanh chóng, dễ thực hiện

➢ Nhược điểm:

• Thời gian giao hàng chậm và phụ thuộc vào các đơn vị vận chuyển

• Giá sản phẩm tương đối cao so với mặt bằng chung

2.1.4 Kết luận

Hình 11 Mô hình sự hài lòng của khách hàng

Qua khảo sát về những website bán mỹ phẩm, nhóm chúng em nhận thấy hầu hết các webstie đều có những tính năng giống nhau (tìm kiếm, đặt hàng, xem sản phẩm…)

Tuy nhiên một vài trang web có giao diện gây khó nhìn, sắp xếp không hợp lý gây khó khăn cho người dùng Chính ví lý do trên nhóm chúng em đã hình thành ý tưởng tạo ra một website bán mỹ phẩm với giao diện thân thiện và dễ sử dụng

2.2 XÁC ĐỊNH YÊU CẦU

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

2.2.1.1 Yêu cầu chức năng nghiệp vụ

➢ Lưu trữ:

- Thông tin người dùng, thông tin người quản trị

- Danh mục sản phẩm, thông tin sản phẩm

- Danh sách đơn hàng, chi tiết từng đơn hàng

- Nội dung tin tức, nội dung bình luận, nội dung thắc mắc

➢ Tra cứu:

- Tìm kiếm sản phẩm

- Tra cứu thông tin đơn hàng

- Tra cứu thông tin tài khoản

➢ Tính toán:

- Tính tổng giá trị của đơn hàng

- Ngày, giờ hết hạn khuyến mãi

➢ Kết xuất:

- Danh sách người dùng

- Danh sách sản phẩm

- Danh sách đơn hàng

2.2.1.2 Yêu cầu chức năng hệ thống

Bảng 1 Bảng yêu cầu chức năng hệ thống

1 Phân quyền sử

2 Sao lưu, back up,

phục hồi thông tin

Sao lưu thông tin và chỉ phục hồi khi cần thiết

2.2.2 Yêu cầu phi chức năng

Bảng 2 Bảng yêu cầu phi chức năng

1 Tốc độ xử lý quá trình đặt hàng

nhanh chóng

Hiệu quả Một lần có thể cho nhiều

người dùng đặt hàng

2 Tốc độ tìm kiếm nhanh và chính

xác

Hiệu quả Tối đa 4s phải có kết quả tìm

kiếm

3 Tiết kiệm được thời gian, thu hẹp

không gian lưu trữ, tránh thất lạc

dữ liệu

Hiệu quả Tiết kiệm thời gian so với quản

lý thủ công Dữ liệu được sao lưu trên máy, có thể dễ dàng phục hồi

4 Dễ dàng quản lý, theo dõi, kiểm

soát cửa hàng

Tiện dụng Chỉ cần thông qua chức năng

quản lý cửa hàng, có thể dễ dàng kiểm soát được số lượng sản phẩm còn lại trong kho, danh sách các đơn hàng, tình hình kinh doanh của cửa hàng

mà không cần tốn nhiều thời gian, công sức

5 Giao diện thân thiện, đơn giản Tiện dụng Khách hàng ở mọi lứa tuổi đều

có thể dễ dàng sử dụng

6 Dễ thao tác Tiện dụng Các thao tác nhập xuất chỉnh

sửa đơn giản, gần gũi với người dùng

7 Có thể thiết kế thêm theo yêu cầu

của doanh nghiệp

Tiến hóa Các cửa hàng có thể yêu cầu

thêm các tính năng quản lý, nội dung cho trang web

8 Cho phép thay đổi quy định, công

thức tính toán

Tiến hóa Người dùng có thể dễ dàng

thay đổi công thức tính toán đơn hàng, hoặc công thức tính toán áp dụng cho các chương trình khuyến mãi

CHƯƠNG 3: PHÂN TÍCH, MÔ HÌNH HÓA YÊU CẦU

3.1 LẬP DANH SÁCH YÊU CẦU

3.1.1 Khách (Guest)

Bảng 3 Danh sách nghiệp vụ của Guest

thức liên quan

Ghi chú

1 Đăng nhập, đăng xuất Tra cứu, lưu trữ QD_G_DN

2 Xem chi tiết sản phẩm Tra cứu

7 Xem danh sách sản phẩm Tra cứu

9 Bình luận về sản phẩm Lưu trữ

Bảng 4 Danh sách quy định liên quan của Guest

Mật khẩu sẽ được mã hóa bằng thuật toán hash trong quá trình đăng nhập/

đăng ký

Nhập Tên đăng nhập và Mật khẩu, sau đó chọn nút ĐĂNG NHẬP để hệ thống kiểm tra sự tồn tại của tài khoản

P

Quy định tìm kiếm sản phẩm của guest

Guest không cần đăng nhập vào hệ thống nhưng vẫn có thể tìm kiếm sản phẩm bằng cách nhập tên sản phẩm hay giá sản phẩm, sau đó nhấn ENTER Nếu sản phẩm đó tồn tại sẽ được hiện ra