Nghiên cứu xây dựng website thương mại dành cho thú cưng sử dụng framework laravel theo mô hình mvc

Lí do chọn đề tài Ngày nay kinh tế Việt Nam đang trên đà phát triển, nhiều gia đình Việt sau khi nuôi thú cưng được một thời gian và có kinh tế, họ sẽ suy nghĩ đến chuyện mở bán kinh doa

THEO MÔ HÌNH MVC

Giảng viên hướng dẫn:

Thực hiện:

Đà Nẵng, tháng 02 năm 2022

Đà Nẵng, ngày … tháng … năm …

Cán bộ hướng dẫn

Đà Nẵng, ngày … tháng … năm …

Hội đồng phản biện

Sinh viên thực hiện

Sinh viên thực hiện

MỤC LỤC LỜI CAM ĐOAN

LỜI CẢM ƠN

MỤC LỤC

DANH MỤC HÌNH VẼ vii

LỜI MỞ ĐẦU 2

1.Lí do chọn đề tài 2

2.Mục tiêu nghiên cứu 2

3.Đối tượng và phạm vi nghiên cứu 2

4.Đề tài được xây dựng bởi các ngôn ngữ lập trình như: Javascript, PHP, HTML, CSS, Framework Laravel 2

5.Phương pháp nghiên cứu 2

6.Ý nghĩa của đề tài 3

7.Bố cục của đề tài 3

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

1.1 Tổng quan về ngôn ngữ Dart 4

1.1.1 Khái niệm của HTML 4

1.1.2 Lịch sử hình thành HTML 4

1.1.3 Ưu điểm của HTML 4

1.1.4 Nhược điểm của HTML 5

1.2 Tổng quan về CSS 5

1.2.1 Khái niệm của CSS 5

1.2.2 Bố cục và cấu trúc một đoạn CSS 5

1.2.3 Ưu và nhược điểm của CSS 5

1.3 Tổng quan về ngôn ngữ Javascript 6

1.3.1 Khái niệm về Javascript 6

1.3.2 Lịch sử của Javascript 7

1.3.3 Đặc điểm của Javascript 7

1.3.4 Ưu điểm và nhược điểm của Javascript 8

1.3.5 Sự khác nhau giữa Javascript với các ngôn ngữ lập trình web khác 10 1.4 Tổng quan về PHP 11

1.4.1 Khái niệm về PHP 11

i

1.4.2 Đặc trưng của PHP 11

1.4.3 Lợi ích khi thiết kế web bằng PHP 11

1.5 Tổng quan về framework Laravel 12

1.5.1 Khái niệm về Laravel 12

1.5.2 Lịch sử phát triển của Laravel 12

1.5.3 Ưu và nhược điểm của Laravel 12

1.5.4 Những tính năng của Laravel 13

1.6 PhpAdmin 14

1.6.1 Khái niệm về PhpAdmin 14

1.6.2 Tính năng của PhpAdmin 14

CHƯƠNG II: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 15

2.1 Phân tích yêu cầu đề tài 15

2.1.1 Phát biểu bài toán 15

2.1.2 Yêu cầu bài toán 15

2.2 Đặc tả hệ thống 16

2.3 Sơ đồ usecase 16

2.3.1 Sơ đồ usecase tổng quát khách hàng 18

2.3.2 Sơ đồ usecase tổng quát admin 18

2.3.3 Sơ đồ usecase đăng nhập 19

2.3.4 Sơ đồ usecase đăng xuất 19

2.3.5 Sơ đồ usecase đăng ký 20

2.3.6 Sơ đồ usecase đánh giá, bầu chọn sản phẩm 20

2.3.7 Sơ đồ usecase thanh toán 21

2.3.8 Sơ đồ usecase thay đổi mật khẩu 21

2.3.9 Sơ đồ usecase quản lý đơn đặt hàng 22

2.3.10 Sơ đồ usecase quản lý khách hàng 23

2.3.11 Sơ đồ usecase thông tin cá nhân 24

2.3.12 Sơ đồ usecase tìm kiếm sản phẩm 24

2.3.13 Sơ đồ usecase bình luận , đánh giá , yêu thích 25

2.3.14 Sơ đồ usecase quản lý thương hiệu 25

2.3.15 Sơ đồ usecase quản lý phí giao hàng 26

2.3.16 Sơ đồ usecase quản lý kho 27

2.3.17 Sơ đồ usecase quản lý danh mục bài đăng 27

2.3.18 Sơ đồ usecase quản lý lượt xem sản phẩm 28

2.3.19 Sơ đồ usecase quản lý sản phẩm 29

2.3.20 Sơ đồ usecase phân quyền 30

ii

2.3.21 Sơ đồ usecase quản lý bình luận 30

2.3.22 Sơ đồ usecase quản lý bài đăng 31

2.3.23 Sơ đồ usecase quản lý đánh giá sản phẩm 32

2.3.24 Sơ đồ usecase quản lý mã khuyến mãi 32

2.3.25 Sơ đồ usecase thống kê doanh thu theo ngày, tháng, năm 33

2.3.26 Sơ đồ usecase quản lý Banner 34

2.3.27 Sơ đồ usecase chia sẻ sản phẩm 35

2.3.28 Sơ đồ usecase xuất hóa đơn 36

2.3.29 Sơ đồ usecase thêm sản phẩm vào giỏ hàng 36

2.4 Sơ đồ tuần tự 36

2.4.1 Sơ đồ tuần tự đăng nhập 37

2.4.2 Sơ đồ tuần tự quên mật khẩu 37

2.4.3 Sơ đồ tuần tự quản lý đơn đặt hàng 38

2.4.4 Sơ đồ tuần tự quản lý sản phẩm 38

2.4.5 Sơ đồ tuần tự đăng ký 39

2.4.6 Sơ đồ tuần tự tìm kiếm sản phẩm 39

2.4.7 Sơ đồ tuần tự bình luận sản phẩm 40

2.4.8 Sơ đồ tuần tự đánh giá sản phẩm 40

2.4.9 Sơ đồ tuần tự kho hàng 41

2.4.10 Sơ đồ tuần tự quản lý người dùng 41

2.4.11 Sơ đồ tuần tự quản lý thương hiệu 42

2.4.12 Sơ đồ tuần tự admin hủy đơn hàng 42

2.4.13 Sơ đồ tuần tự admin xác nhận đơn hàng 43

2.4.14 Sơ đồ tuần tự quản lý sản phẩm 43

2.5 Sơ đồ hoạt động 43

2.5.1 Sơ đồ hoạt động đăng nhập khách hàng / admin 44

2.5.2 Sơ đồ hoạt động đăng ký khách hàng 45

2.5.3 Sơ đồ hoạt động quên mật khẩu 45

2.5.4 Sơ đồ hoạt động thay đổi mật khẩu 46

2.5.5 Sơ đồ hoạt động thay đổi thông tin khách hàng / admin 46

2.5.6 Sơ đồ hoạt động thêm sản phẩm vào giỏ hàng 47

2.5.7 Sơ đồ hoạt động phân quyền 48

2.5.8 Sơ đồ hoạt động tìm kiếm sản phẩm 49

2.5.9 Sơ đồ hoạt động cập nhật trạng thái đơn hàng 50

2.5.10 Sơ đồ hoạt động in hóa đơn 51

2.5.11 Sơ đồ hoạt động quản lý sản phẩm 52

2.5.12 Sơ đồ hoạt động quản lý ảnh nền 53

iii

2.5.13 Sơ đồ hoạt động quản lý thương hiệu 54

2.5.14 Sơ đồ hoạt động quản lý mã khuyến mãi 54

2.5.15 Sơ đồ hoạt động quản lý phí giao hàng 56

2.5.16 Sơ đồ hoạt động quản lý đơn hàng 57

2.5.17 Sơ đồ hoạt động quản lý khách hàng 58

2.5.18 Sơ đồ hoạt động quản lý bình luận 58

2.5.19 Sơ đồ hoạt động quản lý số liệu 60

2.5.20 Sơ đồ hoạt động quản lý thống kê 60

2.6 Thiết kế cơ sở dữ liệu 61

2.6.1 Bảng khách hàng 61

2.6.2 Bảng đơn hàng 61

2.6.3 Bảng chi tiết đơn hàng 61

2.6.4 Bảng mã giảm giá 62

2.6.5 Bảng tài khoản admin 62

2.6.6 Bảng ảnh nền 63

2.6.7 Bảng thương hiệu 63

2.6.8 Bảng bình luận 63

2.6.9 Bảng sản phẩm yêu thích 64

2.6.10 Bảng phí giao hàng 64

2.6.11 Bảng thư viện ảnh 64

2.6.12 Bảng sản phẩm 65

2.6.13 Bảng quận huyện 65

2.6.14 Bảng tỉnh thành 65

2.6.15 Bảng xã phường 66

2.6.16 Bảng đánh giá 66

2.6.17 Bảng Id người dùng 66

2.6.18 Bảng thống kê 66

CHƯƠNG III: CÀI ĐẶT CHƯƠNG TRÌNH VÀ KẾT QUẢ 67

ˆ ˆ ˆ ˆ 3.2.1 Giao diện đăng nhập và đăng ký khách hàng 67

3.2.3 Giao diện đăng nhập admin 68

3.2.4 Giao diện quên mật khẩu 69

3.2.5 Giao diện xác nhận mật khẩu 69

3.2.6 Giao diện đăng xuất 69

iv

3.2.6 Giao diện trang chủ 70

3.2.7 Giao diện chi tiết sản phẩm 70

3.2.8 Giao diện sản phẩm liên quan 71

3.2.9 Giao diện thương hiệu sản phẩm 71

3.2.10 Giao diện thêm sản phẩm vào giỏ hàng 71

3.2.11 Giao diện lịch sử xem hàng 72

3.2.12 Giao diện giỏ hàng 72

3.2.13 Giao diện thanh toán 72

3.2.14 Giao diện xác nhận đơn hàng 74

3.2.15 Giao diện thông tin đơn hàng 74

3.2.16 Giao diện hóa đơn 75

3.2.17 Giao diện ảnh nền 75

3.2.18 Giao diện sản phẩm 76

3.2.19 Giao diện quản lý khách hàng 76

3.2.20 Giao diện quản lý mã khuyễn mãi 77

3.2.21 Giao diện quản lý phí giao hàng 77

3.2.22 Giao diện quản lý bình luận 77

3.2.23 Giao diện quản lý thương hiệu sản phẩm 78

3.2.34 Giao diện quản lý thống kê 78

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 80

1.Kết quả đạt được 80

2.Hạn chế của đề tài 80

3.Hướng phát triển 81

TÀI LIỆU THAM KHẢO 81

v

vi

DANH MỤC HÌNH VẼ

Hình 2.3.1 Sơ đồ usecase tổng quát khách hàng

Hình 2.3.2 Sơ đồ usecase tổng quát admin

Hình 2.3.3 Sơ đồ usecase đăng nhập

Hình 2.3.4 Sơ đồ usecase đăng xuất

Hình 2.3.5 Sơ đồ usecase đăng ký

Hình 2.3.6 Sơ đồ usecase đánh giá, bầu chọn sản phẩmHình 2.3.7 Sơ đồ usecase thanh toán

Hình 2.3.8 Sơ đồ usecase thay đổi mật khẩu

Hình 2.3.9 Sơ đồ usecase quản lý đơn đặt hàng

Hình 2.3.10 Sơ đồ usecase quản lý khách hàng

Hình 2.3.11 Sơ đồ usecase thông tin cá nhân

Hình 2.3.12 Sơ đồ usecase tìm kiếm sản phẩm

Hình 2.3.13 Sơ đồ usecase bình luận , đánh giá , yêu thíchHình 2.3.14 Sơ đồ usecase quản lý thương hiệu

Hình 2.3.15 Sơ đồ usecase quản lý phí giao hàng

Hình 2.3.16 Sơ đồ usecase quản lý kho

Hình 2.3.17 Sơ đồ usecase quản lý danh mục bài đăngHình 2.3.18 Sơ đồ usecase quản lý lượt xem sản phẩmHình 2.3.19 Sơ đồ usecase quản lý sản phẩm

Hình 2.3.20 Sơ đồ usecase phân quyền

Hình 2.3.21 Sơ đồ usecase quản lý bình luận

Hình 2.3.22 Sơ đồ usecase quản lý bài đăng

Hình 2.3.23 Sơ đồ usecase quản lý đánh giá sản phẩmHình 2.3.24 Sơ đồ usecase quản lý mã khuyến mãi

Hình 2.3.25 Sơ đồ usecase thống kê đơn đặt hàng theo thángHình 2.3.26 Sơ đồ usecase quản lý banner

Hình 2.3.27 Sơ đồ usecase chia sẻ sản phẩm

Hình 2.3.28 Sơ đồ usecase thêm sản phẩm vào giỏ hàngHình 2.4.1 Sơ đồ tuần tự đăng nhập

Hình 2.4.2 Sơ đồ tuần tự quên mật khẩu

Hình 2.4.3 Sơ đồ tuần tự quản lý đơn đặt hàng

Hình 2.4.4 Sơ đồ tuần tự quản lý sản phẩm

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

Hình 2.4.6 Sơ đồ tuần tự tìm kiếm sản phẩm

Hình 2.4.7 Sơ đồ tuần tự bình luận sản phẩm

Hình 2.4.8 Sơ đồ tuần tự đánh giá sản phẩm

Hình 2.4.9 Sơ đồ tuần tự kho hàng

Hình 2.4.10 Sơ đồ tuần quản lý người dùng

Hình 2.4.11 Sơ đồ tuần quản lý thương hiệu

Hình 2.4.12 Sơ đồ tuần tự admin hủy đơn hàng

Hình 2.4.13 Sơ đồ tuần tự admin xác nhận đơn hàngHình 2.4.14 Sơ đồ tuần tự quản lý sản phẩm

Hình 2.5.1 Sơ đồ hoạt động đăng nhập khách hàng / admin

vii

Hình 2.5.2 Sơ đồ hoạt động đăng ký

Hình 2.5.3 Sơ đồ hoạt động quên mật khẩu

Hình 2.5.4 Sơ đồ hoạt động thay đổi mật khẩu

Hình 2.5.5 Sơ đồ hoạt động thay đổi thông tin khách hàng / amdinHình 2.5.6 Sơ đồ hoạt động thêm sản phẩm vào giỏ hàng

Hình 2.5.7 Sơ đồ hoạt động phân quyền

Hình 2.5.8 Sơ đồ hoạt động tìm kiếm sản phẩm

Hình 2.5.9 Sơ đồ hoạt động cập nhật trạng thái đơn hàng

Hình 2.5.10 Sơ đồ hoạt động in hóa đơn

Hình 2.5.11 Sơ đồ hoạt động quản lý sản phẩm

Hình 2.5.12 Sơ đồ hoạt động quản lý ảnh nền

Hình 2.5.13 Sơ đồ hoạt động quản lý thương hiệu

Hình 2.5.14 Sơ đồ hoạt động quản lý mã khuyến mãi

Hình 2.5.15 Sơ đồ hoạt động quản lý phí giao hàng

Hình 2.5.16 Sơ đồ hoạt động quản lý đơn hàng

Hình 2.5.17 Sơ đồ hoạt động quản lý khách hàng

Hình 2.5.18 Sơ đồ hoạt động quản lý bình luận

Hình 2.5.19 Sơ đồ hoạt động quản lý số liệu

Hình 2.5.20 Sơ đồ hoạt động quản lý thống kê

Hình 3.2.1 Giao diện khi đăng nhập thành công đối với tk khách hàngHình 3.2.3 Giao diện khi khách hàng đăng nhập thành công

Hình 3.2.4 Giao diện khi đăng nhập thành công đối với tk adminHình 3.2.5 Giao diện khi đăng nhập vào admin

Hình 3.2.5 Giao diện lấy lại mật khẩu

Hình 3.2.6 Giao diện xác nhận mật khẩu

Hình 3.2.7 Mail xác nhận lấy lại mật khẩu

Hình 3.2.8 Giao diện khi đang đăng nhập

Hình 3.2.9 Giao diện khi khách hàng đăng xuất

Hình 3.2.10 Giao diện trang chủ

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

Hình 3.2.12 Giao diện sản phẩm liên quan

Hình 3.2.13 Giao diện thương hiệu sản phẩm

Hình 3.2.14 Giao diện khi thêm sản phẩm vào giỏ hàng

Hình 3.2.15 Giao diện lịch sử đơn hàng

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

Hình 3.2.17 Xem lại giỏ hàng

Hình 3.2.18 Địa chỉ giao hàng để tính phí ship

Hình 3.2.19 Thông tin cá nhân khách hàng

Hình 3.2.20 Giao diện xác nhận đơn hàng

Hình 3.2.21 Giao diện thông tin đơn hàng

Hình 3.2.22 Hóa đơn

Hình 3.2.23 Giao diện ảnh nền

Hình 3.2.24 Giao diện sản phẩm

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

Hình 3.2.26 Giao diện quản lý mã khuyến mãi

viii

Hình 3.2.27 Giao diện quản lý phí giao hàngHình 3.2.28 Giao diện quản lý bình luận

Hình 3.2.29 Giao diện quản lý thương hiệuHình 3.2.30 Giao diện quản lý thống kê

ix

LỜI MỞ ĐẦU

1 Lí do chọn đề tài

Ngày nay kinh tế Việt Nam đang trên đà phát triển, nhiều gia đình Việt sau khi nuôi thú cưng được một thời gian và có kinh tế, họ sẽ suy nghĩ đến chuyện mở bán kinh doanh thức ăn và các phụ kiện khác cho thú cưng[1].Mỗi khi ra đường hay ở những cửa hàng, căn hộ, công viên,…ta có thể bắt gặp những người bạn 4 chân được chủ của chúng dẫn theo như một chú mèo,chú chó, ….Ngoại hình những chú thú cưng này không những đẹp mắt mà còn

có nhiều đặc trưng riêng như màu lông, chiều cao, kích thước,… Trào lưu nuôi thú cưng không còn xa lạ mà càng ngày càng phát triển hơn kéo theo thị trường hàng hóa, dịch vụ cho chúng ngày càng phong phú hơn từ đồ ăn, phụ kiện,…Nắm bắt tình hình thực tế trên, cùng với những kiến thức học được từ nhà

trường, bản thân e, quyết định chọn đề tài “Nghiên cứu, xây dựng website thương mại dành cho thú cưng sử dụng framework Laravel theo mô hình MVC”.

Với mong muốn vận dụng được những kiến thức đã học vào thực tế, qua

đó làm quen và đúc kết kinh nghiệm để sau này có thể xây dựng được các website thương mại, đáp ứng nhu cầu xã hội

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

Mục tiêu của đồ án là tạo ra một website thương mại dành cho thú cưng.Các mục tiêu cụ thể bao gồm:

- Tạo ra một website kinh doanh trực tuyến dễ dàng sử dụng

- Ứng dụng ngôn ngữ PHP framework Laravel vào xây dựng backendcho ứng dụng

3 Đối tượng và phạm vi nghiên cứu

Đối tượng nghiên cứu gồm:

Báo cáo tập trung nghiên cứu về các vấn đề chính

- Cơ sở dữ liệu của web bán hàng

- Thiết kế xây dựng các chức năng cơ bản của shop

Giới hạn phạm vi nghiên cứu trong đề tài gồm:

- Tập trung xây dựng webstie để người bán và người mua có thể dễ dàngtiếp cận với nhau Người quản trị có thể dễ dàng đăng tải và quản lí thông tinsản phẩm mà mình muốn bán Người mua có thể dễ dàng mua được sản phẩmmình cần

4 Đề tài được xây dựng bởi các ngôn ngữ lập trình như: Javascript, PHP,

HTML, CSS, Framework Laravel

x

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

- Phương pháp lý thuyết: Nghiên cứu các tài liệu liên quan đến các nộidung nghiên cứu: Tài liệu về các ngôn ngôn ngữ lập trình, các frameworkLaravel, PHP, các nhu cầu của người bán, người mua

- Phương pháp thực nghiệm: Nghiên cứu, xây dựng tạo ra website thương mạidành cho thú cưng

6 Ý nghĩa của đề tài

- Ý nghĩa lý luận: Dùng làm tài liệu tham khảo cho các cửa hàng, doanhnghiệp khi bước đầu xây dựng Website cho riêng mình

- Ý nghĩa thực tiễn: Báo cáo nghiên cứu cho thấy được những bước phảilàm khi xây dựng Website, từ đó tạo nền tảng cho cửa hàng triển khaiwebsite, ứng dụng trong bán hàng

7 Bố cục của đề tài

Trên cơ sở các nội dung nghiên cứu, để đạt mục tiêu đề ra và đảm bảo tính

logic, ngoài phần mở đầu và phần kết luận, đồ án được tổ chức thành các chương như

sau:

Chương 1 Cơ sở lý thuyết Chương này trình bày kết quả nghiên cứu về lập

trình đa nền tảng; trình bày các cơ sở lí thuyết về ngôn ngữ lập trình: Javascript,HTML, CSS, PHP cùng framework tương ứng Laravel được sử dụng trong việcxây dựng đề tài

Chương 2: Phân tích và thiết kế hệ thống Chương này giới thiệu bài toán

và đưa ra các mô hình hệ thống; đề xuất các ý tưởng, chức năng cho phần mềm;trình bày các mô hình thực thể quan hệ, sơ đồ phân cấp chức năng Phân tích chitiết các chức năng của người sử dụng và người quản lí; thiết kế giao diện ngườidùng và thiết dữ liệu, chức năng cho hệ thống

Chương 3: Cài đặt chương trình và kết quả Trong chương này, nêu kết

quả thực hiện được của đề tài và trình bày cách cài đặt chương trình

xi

CHƯƠNG I: CƠ SỞ LÝ THUYẾT 1.1 Tổng quan về ngôn ngữ Dart

1.1.1 Khái niệm của HTML

HTML tạm dịch là ngôn ngữ đánh dấu siêu văn bản Người ta thường sử

dụng HTML trong việc phân chia các đoạn văn, heading, links, blockquotes,…Một Website thường chứa nhiều trang con và mỗi trang con này lại cómột tập tin HTML riêng Lưu ý, HTML không phải là ngôn ngữ lập trình Điềunày có nghĩa là nó không thể thực hiện các chức năng “động” Hiểu một cáchđơn giản hơn, cũng tương tự như phần mềm Microsoft Word, HTML chỉ có tácdụng bố cục và định dạng trang web HTML khi kết hợpvới CSS và JavaScript sẽ trở thành một nền tảng vững chắc cho thế giới mạng.[2]

1.1.2 Lịch sử hình thành HTML

HTML được tạo ra bởi Tim Berners-Lee, một nhà vật lý học của trungtâm nghiên cứu CERN ở Thụy Sĩ Hiện nay, HTML đã trở thành một chuẩnInternet được tổ chức W3C (World Wide Web Consortium) vận hành và pháttriển Bạn có thể tự tìm kiếm tình trạng mới nhất của HTML tại bất kỳ thời điểmnào trên Website của W3C

Phiên bản đầu tiên của HTML xuất hiện năm 1991, gồm 18 tag HTML.Phiên bản HTML 4.01 được xuất bản năm 1999 Sau đó, các nhà phát triển đãthay thế HTML bằng XHTML vào năm 2000

Đến năm 2014, HTML được nâng cấp lên chuẩn HTML5 với nhiều tagđược thêm vào markup, mục đích là để xác định rõ nội dung thuộc loại là gì (ví

dụ như: <article>, <header>, <footer>,…)

Theo Mozilla Developer Network thì HTML Element Reference hiện nay

có khoảng hơn 140 tag Tuy nhiên một vài tag trong số đó đã bị tạm ngưng (dokhông được hỗ trợ bởi các trình duyệt hiện hành).[2]

1.1.3 Ưu điểm của HTML

HTML được sử dụng để tạo cấu trúc trang web Nó có một số ưu điểmnhư sau:

 Có nhiều tài nguyên hỗ trợ với động đồng người dùng lớn

 Có thể hoạt động mượt mà trên hầu hết các trình duyệt hiện nay

 Học HTML khá đơn giảm

xii

 Các markup sử dụng trong HTML thường ngắn gọn, có độ đồngnhất cao

 Sử dụng mã nguồn mở hoàn toàn miễn phí

 HTML là chuẩn web được vận hành bởi W3C

 Dễ dàng tích hợp mọi ngôn ngữ backend khác (PHP,Node.js,…)[2]

1.1.4 Nhược điểm của HTML

 Chỉ áp dụng được chủ yếu cho web tĩnh Nếu muốn các tính năngđộng, lập trình viên phải dùng thêm Javascript hoặc ngôn ngữ backend(Ví dụ PHP)

 Mỗi trang HTML cần được tạo riêng biệt, ngay khi có yếu tố trùng lặpnhư header, footer

 Một vài trình duyệt còn cập nhật chậm để hỗ trợ tính năng mới củaHTML

1.2 Tổng quan về CSS

1.2.1 Khái niệm của CSS

CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được

sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánhdấu Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web Bạn có thểhiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên websitenhư việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta

có thể thêm style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổimàu chữ, font chữ, thay đổi cấu trúc…[3]

1.2.2 Bố cục và cấu trúc một đoạn CSS

Bố cục CSS thường chủ yếu dựa vào hình hộp và mỗi hộp đều chiếmnhững khoảng trống trên trang của bạn với các thuộc tính như:

 Padding: Gồm không gian xung quanh nội dung

 Border: Là đường liền nằm ngay bên ngoài phần đệm

 Marign: Là khoảng cách xung quanh bên ngoài phần tử

1.2.3 Ưu và nhược điểm của CSS

Ưu điểm của Flutter

- Khả năng tiết kiệm thời gian

xiii

- Khả năng tải trang nhanh chóng

- Dễ dàng thực hiện bảo trì

- Sở hữu thuộc tính rộng

- Khả năng tương thích tốt

Nhược điểm của Flutter

- CSS hoạt động khác biệt cho từng trình duyệt

- Khá khó khăn cho người mới

- Định dạng web có khả năng

1.3 Tổng quan về ngôn ngữ Javascript

1.3.1 Khái niệm về Javascript

JavaScript thường được viết tắt là JS, là một ngôn ngữ lập trình kịch bảnphía máy khách (client-side) dựa vào đối tượng phát triển có sẵn hoặc tự địnhnghĩa, JavaScript được sử dụng rộng rãi trong các ứng dụng website Cùngvới HTML và CSS, JavaScript là một trong ba công nghệ cốt lõi của WorldWide Web JavaScript được hỗ trợ hầu như trên tất cả các trình duyệt nhưFirefox, Chrome,… thậm chí với các trình duyệt trên thiết bị di động[4].JavaScript được biết đến lần đầu tiên là Mocha và chỉ ngay sau đó mộtthời gian nó lại được đổi tên thành LiveScript và cuối cùng Netscape đã đổi tênthành JavaScript, bởi vì sự phổ biến của Java như là một hiện tượng lúc bấy giờ.Sau đó Netscape đã chuyển JavaScript đến ECMA International để làm côngtác chuẩn hóa và viết đặc tả,… Cái tên ECMAScript đã được hình thành từ đây.Phần core của ngôn ngữ này đã được nhúng vào hầu hết các trìnhduyệt Netscape, Internet Explorer, Chrome, Firefox,…[4]

JavaScript nên được bao gồm trong một tài liệu HTML cho việc mã hóa

để được thông dịch bởi trình duyệt JS được tích hợp và nhúng trong HTMLgiúp website sống động hơn vì nó cho phép kiểm soát các hành vi của trang webtốt hơn so với khi chỉ sử dụng mỗi HTML Javascript được sử dụng rất rộng rãi

và linh hoạt, từ các slideshow trên website tới các pop-up quảng cáo hay nhữngform điền thông tin, bản đồ tương tác, tính năng tự động điền, những đồ họa 2D,3D, trên website Đây là lớp thứ ba của công nghệ web tiêu chuẩn sau HTML

và CSS: HTML là ngôn ngữ đánh dấu để tạo cấu trúc và bố cục nội dung

xiv

website CSS là ngôn ngữ định kiểu đoạn tầng để áp dụng kiểu dáng cho nộidung HTML Javascript là ngôn ngữ kịch bản cho phép tạo nội dung động, kiểmsoát đa phương tiện, hình ảnh động và hầu hết mọi thứ khác[4].

1.3.2 Lịch sử của Javascript

Sun Microsystems đã phát minh thành một ngôn ngữ phức tạp và mạnh mẽ

mà chúng ta đã biết đó là ngôn ngữ Java Mặc dù Java có tính khả dụng cao nhưng

nó lại phù hợp nhất đối với các nhà lập trình có kinh nghiệm và cho các công việcphức tạp hơn Netscape Communications đã thấy được nhu cầu đối với một ngônngữ “nửa nọ nửa kia” – một ngôn ngữ sẽ cho phép các cá nhân thiết kế các trangWeb có khả năng tương tác với người dùng hoặc với Java applets nhưng sẽ đòi hỏiphải có kinh nghiệm lập trình tối thiểu LiveScript chỉ là một ngôn ngữ phát thảohơn là thực tế, nhưng nó lại khiến cho người ta tin rằng nó “bắt cầu” cho ý tưởngtốt hơn LiveScript được thiết kế theo tinh thần của nhiều ngôn ngữ script đơn giảnnhưng nó lại có tính khả dụng cao được thiết kế đặc biệt để xây dựng các trangWeb (chẳng hạn như HTML và các form tương tác) Để giúp “bán chạy” ngôn ngữmới này, Netscape hợp tác với Sun cho ra đời ngôn ngữ JavaScript Trên thực tế,Microsoft là người tiên phong thực thi phiên bản của JavaScript (còn có tên làJscript), nhưng họ vẫn chưa tham chiếu đến những đặc tả chính thức củaJavaScript[4]

Mục tiêu của JavaScript là nhằm cung cấp cho các nhà phát triển trangWeb một số khả năng và sự điều khiển trên chức năng của một trang Web MãJavaScript có khả năng nhúng trong tài liệu HTML để điều khiển nội dung củatrang Web và xác nhận tính hợp lý của dữ liệu mà người dùng nhập vào Khimột trang hiển thị trong trình duyệt, các câu lệnh được trình duyệt thông dịch vàthực thi JavaScript là ngôn ngữ script dựa trên đối tượng nhằm phát triển cácứng dụng Internet dựa trên client và server Javascript được ra đời và tháng 5năm 1995, cha đẻ là Brendan Eich một nhà công nghệ Mỹ, đồng sáng lậpMozilla và là một lập trình viên của Netscape[4]

1.3.3 Đặc điểm của Javascript

Nhiệm vụ chính của ngôn ngữ Javascript cơ bản là xây dựng website Có 3ngôn ngữ chính để lập trình web bao gồm HTML, CSS và Javascript và vai trò củaJavascript chính là lập trình chức năng và chịu trách nhiệm cho các yếu tố liên quan

xv

tới tương tác của người dùng bao gồm trang liên hệ, các cửa sổ, ghi nhận thông tin,biểu thức, hình động, bản đồ, trình phát video tương tác,…[4]

Phản hồi nhanh: Ngôn ngữ Javascript có thể hoạt động trên nhiều trình

duyệt, nền tảng và giúp người dùng giảm thiểu việc kiểm tra thủ công khi truy xuấtqua hệ cơ sở dữ liệu

Tương tác tốt: Khi sử dụng ngôn ngữ này, lập trình viên có thể dễ dàng

tạo các giao diện phản ứng khi người dùng sử dụng

Hạn chế tương tác máy chủ: Javascript được tiến hành thông qua vi bộ

xử lý của chính người dùng, do đó nó giúp tiết kiệm lưu lượng máy chủ

Dễ dàng sử dụng: Là một ngôn ngữ dễ học, đơn giản, thân thiện với người

dùng nên lập trình viên có thể bắt đầu lập trình ngay với vài bài tập Javascript cơbản

Tạo nhiều tính năng bổ sung: Ngôn ngữ Javascript giúp bạn dễ dàng mở

rộng tính năng của website thông qua bên thứ ba

1.3.4 Ưu điểm và nhược điểm của Javascript

Ưu điểm của Javascript

Javascript hỗ trợ đa nền tảng: Javascript hỗ trợ được đa nền tảng, trên tất cả

trình duyệt và thậm chí là các trình duyệt trên thiết bị di động, vậy nên các nhà lậptrình cũng có thể dùng JS để xây dựng những web game hay thậm chí là appmobile[6]

JavaScript nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác: Người

dùng có thể xác nhận đầu vào (input) người sử dụng trước khi gửi trang tới Server.Điều này làm tiết kiệm lưu lượng tải ở Server, nghĩa là Server của bạn tải ít hơn

Từ đó, JS trở thành ngôn ngữ nhanh và nhẹ hơn các ngôn ngữ lập trình khác[6]

Tăng tương tác cho website: Bạn có thể tạo ra giao diện mà người sử dụng

có thể tương tác dễ dàng bởi vài cú click chuột hoặc chạm vào màn hình Ngoài ra,

JS còn hỗ trợ lập trình các chương trình phản hồi ngay lập tức cho khách hàng: Họkhông cần phải tải lại trang web để thấy họ nhập thiếu thông tin nào đấy[6]

Giao diện phong phú hơn: Bạn có thể sử dụng JavaScript để bao gồm

những mục như các thành phần Drag và Drop (DnD) và các con trượt (Slider) đểcung cấp một Rich Interface (Giao diện giàu tính năng) tới site khách truy cập của

xvi

bạn Một lần nữa, JavaScript là một ngôn ngữ chương trình thông dịch, nhẹ mà chophép bạn xây dựng khả năng tương tác trong các trang HTML tĩnh.

Các công cụ phát triển JavaScript: Một trong những điểm mạnh lớn nhất

của JavaScript là nó không yêu cầu các công cụ phát triển tốn kém Bạn có thể bắtđầu với một bộ biên soạn văn bản đơn giản như Notepad, và vì nó là một ngôn ngữthông dịch bên trong context của một trình duyệt web, bạn không cần phải muamột Compiler (bộ phiên dịch)[6]

Triển khai tập lệnh phía máy khách: Nhờ Javascript, các lập trình viên có

thể dễ dàng viết tập lệnh phía máy khách, tích hợp các tập lệnh một cách liền mạchvào HTML, cho phép website tương tác, trả lời người dùng ngay lập tức và tạo ragiao diện hiển thị phong phú hơn

Đơn giản hóa phát triển ứng dụng web phức tạp: Javascript cho phép

các nhà phát triển đơn giản hóa thành phần của ứng dụng, qua đó đơn giản hóaviệc phát triển các ứng dụng web phức tạp

Thiết kế web responsive: JavaScript cho phép thiết kế web responsive – tối

ưu trên cả máy tính và thiết bị di động chỉ với một bộ mã

Nhiều bộ chuyển đổi: Mặc dù thiếu một số tính năng phức tạp được cung

cấp bởi các ngôn ngữ lập trình hiện đại như Java và C#, JavaScript vẫn có thể dễdàng mở rộng bằng cách sử dụng các bộ chuyển đổi như CoffeeScript, TypeScript,DukeScript và Vaadin

Nhiều thư viện hỗ trợ: Hiện nay có rất nhiều thư viện và frame được viết từ

Javascript như:

- jQuery: Chuyên về hiệu ứng.

- AngularJS: Chuyên xây dựng ứng dụng trang cá nhân.

- ReactJS: Chuyên viết ứng dụng mobile.

- Một số thư viện khác như ExtJS, Sencha Touch,…

JavaScript là ngôn ngữ lập trình dễ học: JavaScript có mã nguồn mở, thư

viện phong phú, lượng người dùng lớn cho nên đây là ngôn ngữ dễ học Hơn nữa,lỗi của JavaScript dễ phát hiện hơn và vì vậy dễ sửa hơn Những nhà lập trình “taymơ” đều có thể thử JS mà không gặp quá nhiều khó khăn

Nhược điểm của Javascript

xvii

Không thể xem JavaScript như là một ngôn ngữ chương trình chính thức(full-fledged) Nó thiếu các tính năng quan trọng sau:

- Client-side JavaScript không cho phép đọc và ghi các file, bởi vì lý do bảomật

- JavaScript không được sử dụng cho việc kết nối mạng các ứng dụng bởi

vì không có những hỗ trợ có sẵn

- JavaScript không có bất kỳ khả năng đa luồng hoặc đa xử lý

- Có thể được dùng để thực thi mã độc trên máy tính của người dùng

- Bởi sự phổ biến, Javascript có thể bị các hacker khai thác lỗ hổng bảo mật

- Có thể bị triển khai khác nhau tùy từng thiết bị dẫn đến việc không đồngnhất Thậm chí, giao diện sẽ là rất khác nhau ở các thiết bị

Không ngôn ngữ lập trình nào là hoàn hảo và không có khuyết điểm BởiJavaScript là ngôn ngữ lập trình phổ biến, được sử dụng rộng rãi trên nền tảngwebsite, vì vậy nó cũng là đối tượng tiềm năng của một lượng lớn hacker,scammer – những kẻ chuyên tìm kiếm lỗ hổng và các lỗi bảo mật và thâm nhập,đánh cắp dữ liệu nội bộ

1.3.5 Sự khác nhau giữa Javascript với các ngôn ngữ lập trình web khác

Bỏ qua một số thiếu sót cần khắc phục thì Javascript vẫn được coi như làmột ngôn ngữ lập trình chính khi lập trình website bởi nó có tính linh hoạt,tương tác, hỗ trợ khá tốt So sánh dựa trên một số yếu tố cơ bản dưới đây để làm

rõ sự khác nhau giữa các ngôn ngữ lập trình web với Javascript:

Javascript với HTML: Đây là một trong số các ngôn ngữ lập trình phổ

biến nhất hiện nay, nó được dùng để xây dựng phần khung chính của một website.HTML được coi là kiến trúc của một căn nhà thì ngôn ngữ Javascript sẽ là các yếu

tố trang trí của căn nhà đó Tất nhiên bạn hoàn toàn có thể xây nhà mà không cóyếu tố trang trí nhưng thế thì trông thật thiếu sót phải không nào? Đó cũng chính là

sự khác nhau cơ bản nhất giữa hai loại ngôn ngữ này Bên cạnh đó, khác vớiJavascript, HTML không thực sự được coi là một ngôn ngữ lập trình, nó không thểdùng để tạo ra các chức năng động mà chỉ được dùng để bố cục và định dạngwebsite[4]

xviii

Javascript với CSS: CSS là viết tắt của Cascading Style Sheets – hiểu một

cách đơn giản thì nhiệm vụ của CSS là nó xác định nội dung sẽ xuất hiện chongười dùng thấy như thế nào Ngôn ngữ này ảnh hưởng tới toàn bộ bố cục và giaodiện của website Trong khi đó, ngôn ngữ lập trình JavaScript đảm nhiệm phần lậptrình confirmation boxes, calls-to-action, và thêm thông tin mới vào thông tin hiệncó…[4]

Javascript với PHP: Và cuối cùng là PHP Ngôn ngữ PHP được viết đầy

đủ là Hypertext Preprocessor, nó đảm nhiệm vai trò xử lý các biểu mẫu, lưu file

dữ liệu, trả lại data cho người dùng, thu thập data từ các file và nhiều hơn thế nữatrong khi JavaScript được thiết kế để tạo các ứng dụng tập trung vào mạng Ngônngữ này được tích hợp nhiều cơ sở dữ liệu khác nhau như Postgre SQL, Oracle,Sybase, SQL và MySQL[4]

1.4 Tổng quan về PHP

1.4.1 Khái niệm về PHP

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)

Cú pháp PHP là giống C.[5]

1.4.2 Đặc trưng của PHP

5 đặc trưng quan trọng làm PHP trở thành ngôn ngữ khá tiện lợi:

 Đơn giản hóa

1.4.3 Lợi ích khi thiết kế web bằng PHP

PHP được phát triển và tối ưu liên tục từ các nhà phát triển trên toàn thế giới khiến cho nó vô cùng thân thiện với mọi người và ngày càng hoàn thiện hơn Nếu bạn đang tìm kiếm một kịch bản cụ thể, rất có thể là một người dùng khác đã tạo ra một cái gì đó tương tự Kiểm tra trong cộng đồng PHP và bạn có thể rút ngắn được rất nhiều thời gian phát triển thiết kế web và tối ưu hóa trang web cho mình

Tại Việt Nam, ngôn ngữ lập trình PHP là một trong những ngôn ngữ được

sử dụng nhiều nhất khi thiết kế web Không chỉ bởi nó được chia sẻ và sử dụng miễn phí mà còn ở sự đơn giản nhẹ nhàng và thân thiện của nó đối với các hệ thống máy chủ, trình duyệt Thời gian thiết kế nhanh chóng, chi phí rẻ khiến choPHP trở thành sự lựa chọn tối ưu của các doanh nghiệp vừa và nhỏ trong việc thiết kế và phát triển web cho mình.[5]

1.5 Tổng quan về framework Laravel

1.5.1 Khái niệm về Laravel

Laravel là một PHP framework, có mã nguồn mở và miễn phí, được xây

dựng nhằm hỗ trợ phát triển các phần mềm, ứng dụng, theo kiến trúc MVC

Framework chính là một thư viện với các tài nguyên có sẵn cho từng lĩnh

vực để lập trình viên sử dụng thay vì phải tự thiết kế Có Framework, lập trình.

viên chỉ tìm hiểu và khai thác những tài nguyên đó, gắn kết chúng lại với nhau

và hoàn chỉnh sản phẩm của mình Đối với lập trình viên trong mỗi một lĩnhvực, họ cần phải xây dựng các lớp chương trình để xây dựng nên những phầnmềm, ứng dụng thành phẩm

PHP framework là thư viện làm cho sự phát triển của những ứng dụng

web viết bằng ngôn ngữ PHP trở nên trôi chảy hơn Bằng cách cung cấp 1 cấutrúc cơ bản để xây dựng những ứng dụng đó Hay nói cách khác, PHPframework giúp bạn thúc đẩy nhanh chóng quá trình phát triển ứng dụng Giúpbạn tiết kiệm được thời gian, tăng sự ổn định cho ứng dụng Giảm thiểu số lầnphải viết lại code cho lập trình viên.[6]

1.5.2 Lịch sử phát triển của Laravel

Phiên bản đầu tiên của Laravel được Taylor Otwell tạo ra vào tháng 6năm 2011 như một giải pháp thay thế cho CodeIgniter Với framework này, lậptrình viên được hỗ trợ nhiều tính năng mới mẻ, hiệu quả và dễ thực hiện hơn

xx

Cho đến nay, Laravel đã được phát triển đến phiên bản 5.8 với nhiều cải tiếnmới mẻ hơn.[6]

1.5.3 Ưu và nhược điểm của Laravel

Ưu điểm của Laravel

Sử dụng các tính năng mới nhất của PHP:Sử dụng Laravel giúp cáclập trình viên tiếp cận những tính năng mới nhất mà PHP cung cấp, nhất là đốivới Namespaces, Interfaces, Overloading, Anonymous functions và Shorterarray syntax

Nguồn tài nguyên lớn và sẵn có: Nguồn tài nguyên của Laravel rất thânthiện với các lập trình viên với đa dạng tài liệu khác nhau để tham khảo Cácphiên bản được phát hành đều có nguồn tài liệu phù hợp với ứng dụng của mình

Tích hợp với dịch vụ mail:Lavarel là framework được trang bị API sạchtrên thư viện SwiftMailer, do đó, bạn có thể gửi thư qua các dịch vụ dựa trênnền tảng đám mây hoặc local

Tốc độ xử lý nhanh: Laravel hỗ trợ hiệu quả cho việc tạo lập website hay

các dự án lớn trong thời gian ngắn Vì vậy, nó được các công ty công nghệ vàlập trình viên sử dụng rộng rãi để phát triển các sản phẩm của họ

Dễ sử dụng: Laravel được đón nhận và trở nên sử dụng phổ biến vì nó rất

d sử dụng Thường chỉ mất vài giờ, bạn có thể bắt đầu thực hiện một dự án nhỏvới vốn kiến thức cơ bản nhất về lập trình với PHP

Tính bảo mật cao: Laravel cung cấp sẵn cho người dùng các tính năng bảo mật

mạnh mẽ để người dùng hoàn toàn tập trung vào việc phát triển sản phẩm của mình:

 Sử dụng PDO để chống lại tấn công SQL Injection

xxi

 Sử dụng một field token ẩn để chống lại tấn công kiểu CSRF.

Mặc định đều được Laravel escape các biến được đưa ra view mặc định, do đó

có thể tránh được tấn công XSS [6]

Nhược điểm của Laravel

So với các PHP framework khác, Laravel bộc lộ khá ít nhược điểm Vấn

đề lớn nhất có thể kể đến của framework này là thiếu sự liên kết giữa các phiênbản, nếu cố cập nhật code, có thể khiến cho ứng dụng bị gián đoạn hoặc phá vỡ.Bên cạnh đó, Lavarel cũng quá nặng cho ứng dụng di động, khiến việc tảitrang trở nên chậm chạp.[6]

1.5.4 Những tính năng của Laravel

Những tính năng tuyệt vời có thể kể đến của Laravel là:

 Composer: sử dụng để nâng cấp, cài đặt…

 Eloquent ORM: thao tác với cú pháp đẹp mắt và đơn giản.

 Restful API: hỗ trợ biến Laravel thành một web service API.

 Artisan: cung cấp các lệnh cần thiết để phát triển ứng dụng.

 View: giúp code sạch sẽ hơn rất nhiều.

 Migrations: hỗ trợ tạo các trường trong cơ sở dữ liệu, thêm các cột

trong bảng, tạo mối quan hệ giữa các bảng, hỗ trợ quản lý cơ sở dữ liệu

 Authentication: cung cấp sẵn các tính năng đăng nhập, đăng ký,

quên mật khẩu…

 Unit Testing: hỗ trợ test lỗi để sửa chữa.

1.6 PhpAdmin

1.6.1 Khái niệm về PhpAdmin

PhpMyAdmin là phần mềm mã nguồn mở được viết bằng ngôn ngữ PHPgiúp quản trị cở sở dữ liệu MySQL thông qua giao diện web Tính đếnnay, phpMyAdmin đã có đến hàng triệu lượt sử dụng và vẫn không ngừng tăng

1.6.2 Tính năng của PhpAdmin

xxii

 Quản lý user(người dùng): thêm, xóa, sửa(phân quyền).

 Quản lý cơ sở dữ liệu: tạo mới, xóa, sửa, thêm bảng, hàng, trường,tìm kiếm đối tượng

 Nhập xuất dữ liệu(Import/Export): hỗ trợ các định dạng SQL, XML

và CSV

 Thực hiện các truy vấn MySQL, giám sát quá trình và theo dõi

 Sao lưu và khôi phục(Backup/Restore): Thao tác thủ công

CHƯƠNG II: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

2.1 Phân tích yêu cầu đề tài

2.1.1 Phát biểu bài toán

Tên đề tài : “Nghiên cứu, xây dựng website thương mại dành cho thú

cưng sử dụng công nghệ Laravel theo mô hình MVC

Đây là một loại hình kinh doanh trực tuyến bằng cách xây dựng mộtwebsite cho phép khách hàng tiếp cận được các sản phẩm dành cho thú cưngmột các dễ dàng Khi sử dụng website người dùng sẽ thấy được toàn bộ thôngtin các phẩm danh cho thú cưng bao gồm hình ảnh, giá cả, bình luận, đánh giá,

… Từ đó người dùng có thể chọn lựa được các sản phẩm dành cho thú cưng mộtcách nhanh chóng, phù hợp nhất

Người dùng cần đăng nhập vào hệ thống để thực hiện được nhiều chứcnăng hơn, cũng như quản lí mọi thông tin liên quan Người dùng có thể đăng nhập

xxiii

bằng các tài khoản mạng xã hội như Facebook, Google hoặc tạo mới tài khoảnvới địa chỉ email và mật khẩu riêng Đối với quản trị viên , họ sẽ tạo tài khoảnquản trị, họ có quyền thêm sản phẩm, xem thống kê, quản lý đơn hàng.

2.1.2 Yêu cầu bài toán

Hệ thống có chức năng ủy quyền người dùng, do đó:

Đối với người dùng:

 Được đăng ký tài khoản, đăng nhập bằng các tài khoản mạng xã hội( Facebook và Google)

 Được xem thông tin sản phẩm

 Được đặt cọc, thuê phòng trống trên hệ thống

 Được đặt hàng, thanh toán tiền hàng

 Được gửi đánh giá, bình luận sau khi mua hàng

 Được nhận thông báo khi có mã khuyến mãi mới

 Quản lí tài khoản của mình

Đối với người quản trị:

 Được tạo tài khoản quản trị

 Được quản lý thông tin sản phẩm, thêm sửa xóa sản phẩm

 Được quản lý phí giao hàng

 Được quản lý mã khuyến mãi

 Được quản lý ảnh banner

 Được quản lý thống kê theo ngày tháng năm

 Được quản lý các đơn hàng

 Được in hóa đơn đơn hàng

 Quản lí tài khoản của mình

Người dùng

Người dùng ở đây là những người truy cập vàowebsite, có thể đăng kí làm thành viên hoặc không.Người dùng chỉ có một số quyền nhất định đối vớiwebsite

2.3 Sơ đồ usecase

Biểu đồ ca sử dụng (use case diagram) mô tả tập hợp các ca sử dụng, cáctác nhân và những quan hệ giữa chúng Các biểu đồ ca sử dụng mô tả cái nhìntĩnh về hệ thống dưới con mắt của người sử dụng Các biểu đồ ca sử dụng rấtquan trọng để nắm bắt các chức năng của hệ thống

a Ca sử dụng (usecase)

Bước đầu tiên của phân tích yêu cầu là xác định các ca sử dụng của hệthống Một ca sử dụng là một tương tác giữ hệ thống và môi trường Tập hợpcác ca sử dụng là mô tả toàn bộ hệ thống cần xây dựng Một ca sử dụng tươngứng với một chức năng của hệ thống dưới góc nhìn của người sử dụng Một ca

sử dụng có thể lớn hoặc nhỏ Một ca sử dụng chỉ ra làm thế nào một mục tiêucủa người sử dụng được thoả mãn bởi hệ thống Cần phân biệt các mục tiêu củangười sử dụng và các tương tác của họ với hệ thống

oMục tiêu: cái mà người sử dụng mong đợi

oTương tác: kỹ thuật cho phép đáp ứng mục tiêu

Thực tế, chúng ta xác định các mục tiêu trước, sau đó chọn tập hợp cáctương tác đáp ứng các mục tiêu đó

b Tác nhân (Actor)

Tác nhân đóng vai trò một người sử dụng hoặc một thực thể bên ngoaìtương tác với hệ thống Cần phải phân biệt tác nhân (actor) và người sử dụng(user):

- Nhiều người sử dụng có thể tương ứng một tác nhân

- Một người sử dụng có thể tương ứng với nhiều tác nhân khác nhauTác nhân không nhất thiết luôn luôn là con người Tác nhân có thể là môitrường, hệ thống khác, thực thể bên ngoài tương tác với hệ thống

c Đặc tả ca sử dụng

Đặc tả điển hình của ca sử dụng:

xxv

- Ca sử dụng: tên ca sử dụng thường bắt đầu bởi động từ

- Các tác nhân: danh sách các tác nhân liên quan

- Mô tả: tóm tắt các xử lý cần thực hiện

Đặt tả ca sử dụng có thể thêm:

- Tham chiếu (reference) đến mục liên quan trong đặc tả yêu cầu

- Điều kiện trước và điều kiện sau khi thực hiện ca sử dụng

Ngoài ra, đối với ca sử dụng ta có thể xây dựng một kịch bản (scenario)hành động mô tả các sự kiện sảy ra Kịch bản gồm: gồm các sự kiện chính vàcác sự kiện ngoại lệ Các sự kiện chia làm 2 luồng: Luồng tương ứng với các tácnhân và luồng tương ứng với hệ thống

2.3.1 Sơ đồ usecase tổng quát khách hàng

Hình 2.3.1 Sơ đồ usecase tổng quát khách hàng

2.3.2 Sơ đồ usecase tổng quát admin

Hình 2.3.2 Sơ đồ usecase tổng quát admin

xxvii

2.3.3 Sơ đồ usecase đăng nhập

Hình 2.3.3 Sơ đồ usecase đăng nhập

- Mục đích: Người dùng có thể tích hợp thêm đăng nhập bằnggoogle,facebook và đăng nhập bằng email

- Tác nhân: Khách hàng

- Điều kiện: Click vào nút đăng nhập để thực hiện

2.3.4 Sơ đồ usecase đăng xuất

Hình 2.3.4 Sơ đồ usecase đăng xuất

- Mục đích: Người dùng có thể đăng xuất ra khỏi hệ thống.

- Tác nhân: Khách hàng

- Điều kiện: Click vào nút đăng xuất

xxviii

2.3.5 Sơ đồ usecase đăng ký

Hình 2.3.5 Sơ đồ usecase đăng ký

- Mục đích: Người dùng đăng kí buộc nhập phải đủ 6 form tên,số điện thoại,email,mật khẩu,xác nhận mật khẩu,chọn thành phố

- Tác nhân: Khách hàng

- Điều kiện: Click vào nút đăng kí

2.3.6 Sơ đồ usecase đánh giá, bầu chọn sản phẩm

Hình 2.3.6 Sơ đồ usecase đánh giá, bầu chọn sản phẩm

xxix

- Mục đích: Người dùng nhấn vào sản phẩm vào trang sản phẩm chi tiết vàsau đó đánh giá sản phẩm đó nhưng bắt buộc phải đăng nhập trước và đãmua sản phẩm

- Tác nhân: Khách hàng

- Điều kiện: Click vào nút đánh giá sao

2.3.7 Sơ đồ usecase thanh toán

Hình 2.3.7 Sơ đồ usecase thanh toán

- Mục đích: Người dùng nhấn vào nút thanh toán bắt buộc phải đăng nhập

và thêm 2 giai đoạn chọn địa chỉ , thông tin cá nhân và nhập phương thứcgiao Nếu người dùng có mã giảm giá thì nhập thêm mã để được giảm giá

và thanh toán bằng tiền mặt

- Tác nhân: Khách hàng

- Điều kiện: Click vào nút thanh toán

2.3.8 Sơ đồ usecase thay đổi mật khẩu

xxx

Hình 2.3.8 Sơ đồ usecase thay đổi mật khẩu

- Mục đích: Người dùng nhấn thay đổi mật khẩu thì nhập email để formđến email để thực hiện xác nhận mật khẩu

- Tác nhân: Khách hàng

- Điều kiện: Click vào nút thay mật khẩu

2.3.9 Sơ đồ usecase quản lý đơn đặt hàng

Hình 2.3.9 Sơ đồ usecase quản lý đơn đặt hàng

xxxi

- Mục đích: Admin quản lí đơn hàng có thể cập nhập trạng thái đơn hàngđang giao,đã giao và hủy đơn hàng.Admin có in được hóa đơn cho kháchhàng

- Tác nhân: Admin

- Điều kiện: Click vào đơn hàng

2.3.10 Sơ đồ usecase quản lý khách hàng

Hình 2.3.10 Sơ đồ usecase quản lý khách hàng

- Mục đích: Admin quản lí người dùng có thể quản lí nhiều thông tin củangười dùng, admin có chức năng thêm,sửa,xóa người dùng

- Tác nhân: Admin

- Điều kiện: Click vào thông tin người dùng

xxxii

2.3.11 Sơ đồ usecase thông tin cá nhân

Hình 2.3.11 Sơ đồ usecase thông tin cá nhân

- Mục đích: Khách hàng có chức năng sửa thông tin bao gồm thay ảnhavatar.sửa tên,sửa quê quán,sửa số điện thoại,sửa địa chỉ,sửa giới tính

- Tác nhân: Khách hàng

- Điều kiện: Click vào thông tin người dùng

2.3.12 Sơ đồ usecase tìm kiếm sản phẩm

Hình 2.3.12 Sơ đồ usecase tìm kiếm sản phẩm

xxxiii

- Mục đích: Người dùng có chức năng tìm kiếm sản phẩm theo tên và giá.

- Tác nhân: Khách hàng

- Điều kiện: Click vào tìm kiếm sản phẩm

2.3.13 Sơ đồ usecase bình luận , đánh giá , yêu thích

Hình 2.3.13 Sơ đồ usecase bình luận , đánh giá , yêu thích

- Mục đích: Người dùng vào sản phẩm chi tiết có cả bình luận sảnphẩm,đánh giá sản phẩm,yêu thích sản phẩm nhưng tất cả đều bắt buộcphải đăng nhập

- Tác nhân: Khách hàng

- Điều kiện: Click vào bình luận,đánh giá,yêu thích

xxxiv

2.3.14 Sơ đồ usecase quản lý thương hiệu

Hình 2.3.14 Sơ đồ usecase quản lý thương hiệu

- Mục đích: Người dùng quản lí thương hiệu có chức năng thêm thươnghiệu,tìm kiếm thương hiệu,sửa thương hiệu và xóa thương hiệu

- Tác nhân: Admin

- Điều kiện: Click vào thương hiệu

xxxv