Xây dựng trang web bán linh kiện máy tính đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Chương 2: Khảo Sát Hiện Trạng Và Xác Định Yêu Cầu Bảng 3.1 Cấu trúc các chức năng của các nhóm người dùng Xem danh sách sản phẩm Xem thông tin chi tiết sản phẩm Các chức năng của giỏ hà

Báo Cáo Khóa Luận Tốt Nghiệp Trang | iii

Mục Lục

LỜI CẢM ƠN i

LỜI NÓI ĐẦU ii

Mục Lục iii

DANH MỤC HÌNH ẢNH viii

DANH MỤC BẢNG x

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

CHƯƠNG 1: MỞ ĐẦU 1

1 Đặt vấn đề và lý do chọn đề tài 1

2 Mục tiêu và nhiệm vụ của đề tài 2

2.1 Mục tiêu 2

2.2 Nhiệm vụ 3

3 Yêu cầu 3

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

5 Bố cục của báo cáo 5

CHƯƠNG 2: CÔNG NGHỆ SỬ DỤNG 6

1 Html/Css 6

1.1 HTML - HyperText Markup Language 6

1.2 Css - Cascade Style Sheet 7

2 Laravel PHP framework 8

3 Mô hình MVC 9

4 Một số package của Laravel được sử dụng trong đồ án 9

5 Cơ sở dữ liệu MySQL 10

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

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

1.1 Gearvn 11

1.2 AnphatPC 12

1.3 Phong Vũ 13

2 Cấu trúc ứng dụng 13

3 Qui định và yêu cầu thiết kế 17

3.1 Quy định 17

3.2 Yêu cầu thiết kế 17

4 Đánh giá và lựa chọn công nghệ 18

CHƯƠNG 4: THIẾT KẾ PHẦN MỀM 19

1 Lược đồ usecase và mô tả use case 19

1.1 Danh sách usecase 19

1.2 Lược đồ usecase 20

1.3 Đặc tả use case 21

1.3.1 Tìm kiếm thông tin 21

1.3.2 Xem danh sách sản phẩm 21

1.3.3 Xem thông tin chi tiết sản phẩm 22

1.3.4 Các chức năng của giỏ hàng 22

1.3.5 Đăng ký 23

1.3.6 Đăng nhập 23

1.3.7 Đăng xuất 24

1.3.8 Đặt mua hàng 24

1.3.9 Xem danh sách đơn hàng 25

1.3.10 Xem thông tin đơn hàng 25

1.3.11 Chỉnh sửa thông tin cá nhân 26

1.3.12 Đánh giá sản phẩm 26

1.3.13 Quản lý banner quảng cáo 27

1.3.14 Quản lý tài khoản khách hàng 27

1.3.15 Quản lý đơn hàng 28

1.3.16 Quản lý sản phẩm 28

Báo Cáo Khóa Luận Tốt Nghiệp Trang | v

1.3.17 Quản lý bài viết 29

1.3.18 Quản lý danh mục 30

1.3.19 Xem thống kê bán hàng 31

1.3.20 Quản lý nhân viên 31

2 Mô hình cơ sở dữ liệu 32

2.1 Lược đồ quan hệ 32

2.2 Danh sách các bảng 33

2.3 Mô tả chi tiết các bảng 34

2.3.1 Bảng admins 34

2.3.2 Bảng articles 34

2.3.3 Bảng categories 35

2.3.4 Bảng contacts 36

2.3.5 Bảng orders 36

2.3.6 Bảng out_banners 37

2.3.7 Bảng slide_banners 37

2.3.8 Bảng password_resets 38

2.3.9 Bảng payments 38

2.3.10 Bảng products 39

2.3.11 Bảng ratings 40

2.3.12 Bảng transactions 40

2.3.13 Bảng users 41

2.4 Quan hệ giữa các bảng 42

2.4.1 ratings – users 42

2.4.2 payments – users 43

2.4.3 payments – transactions 44

2.4.4 transactions – orders 45

2.4.5 orders – products 46

2.4.6 products – categories 47

2.4.7 admins - articles 48

3 Lược đồ tuần tự 49

3.1 Đăng nhập 49

3.2 Đăng ký 50

3.3 Thêm sản phẩm 51

3.4 Đặt hàng 52

3.5 Xử lý đơn hàng 53

4 Sơ đồ sitemap website 54

4.1 Sơ đồ sitemap khách hàng 54

4.2 Sơ đồ sitemap admin 55

5 Thiết kế giao diện 56

5.1 Khách hàng 56

5.1.1 Trang chủ 56

5.1.2 Trang đăng nhập 58

5.1.3 Trang đăng ký 59

5.1.4 Trang xem danh sách sản phẩm theo danh mục 60

5.1.5 Trang xem chi tiết sản phẩm 61

5.1.6 Trang xem lịch sử đơn hàng 62

5.1.7 Trang xem sản phẩm trong giỏ hàng 63

5.1.8 Trang xác nhận thông tin đơn hàng 64

5.1.9 Trang thông báo đặt hàng thành công 65

5.1.10 Trang thanh toán online 66

5.1.11 Trang thông báo thanh toán thành công 67

5.1.12 Trang xem thông tin cá nhân 68

5.1.13 Trang thay đổi thông tin cá nhân 70

5.1.14 Trang chính sách bảo hành 71

Báo Cáo Khóa Luận Tốt Nghiệp Trang | vii

5.1.15 Trang hướng dẫn trả góp 72

5.2 Admin 73

5.2.1 Trang tổng quan 73

5.2.2 Trang quản lý danh mục 74

5.2.3 Trang quản lý sản phẩm 76

5.2.4 Trang thêm/sửa sản phẩm 77

5.2.5 Trang quản lý các đánh gíá 79

5.2.6 Trang xử lý đơn hàng 80

5.2.7 Trang quản lý tin tức 81

5.2.8 Trang quản lý tài khoản khách hàng 82

5.2.9 Trang quản lý banner quảng cáo 83

5.2.10 Trang quản lý tài khoản quản trị viên 84

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

1 Cài đặt 85

1.1 Chuẩn bị môi trường hosting 85

1.2 Chuẩn bị database 87

2 Kiểm thử 89

CHƯƠNG 6: KẾT LUẬN 90

1 Kết quả đạt được 90

2 Ưu điểm 90

3 Khuyết điểm 91

4 Hướng phát triển 91

TÀI LIỆU THAM KHẢO 92

DANH MỤC HÌNH ẢNH

Hình 3.1 Giao diện trang chủ GearVN 11

Hình 3.2 Giao diện trang chủ AnphatPC 12

Hình 3.3 Giao diện trang chủ Phongvu 13

Hình 4.1 Lược đồ usecase 20

Hình 4.2 Lược đồ quan hệ 32

Hình 4.3 Quan hệ giữa bảng ratings - users 42

Hình 4.4 Quan hệ giữa bảng payments - users 43

Hình 4.5 Quan hệ giữa bảng payments - transactions 44

Hình 4.6 Quan hệ giữa bảng transactions - orders 45

Hình 4.7 Quan hệ giữa bảng orders - products 46

Hình 4.8 Quan hệ giữa bảng products - categories 47

Hình 4.9 Quan hệ giữa bảng admins - articles 48

Hình 4.10 Lược đồ tuần tự cho chức năng đăng nhập 49

Hình 4.11 Lược đồ tuần tự cho chức năng đăng ký 50

Hình 4.12 Lược đồ tuần tự cho chức năng thêm sản phẩm 51

Hình 4.13 Lược đồ tuần tự cho chức năng đặt hàng 52

Hình 4.14 Lược đồ tuần tự cho chức năng xử lý đơn hàng 53

Hình 4.15 Sitemap cho khách hàng 54

Hình 4.16 Sitemap cho admin 55

Hình 4.17 Giao diện cho trang chủ 56

Hình 4.18 Giao diện cho trang đăng nhập 58

Hình 4.19 Giao diện cho trang đăng ký 59

Hình 4.20 Giao diện cho trang xem danh sách sản phẩm theo danh mục 60

Hình 4.21 Giao diện cho trang xem chi tiết sản phẩm 61

Hình 4.22 Giao diện cho trang xem lịch sử đơn hàng 62

Hình 4.23 Giao diện cho trang xem sản phẩm trong giỏ hàng 63

Báo Cáo Khóa Luận Tốt Nghiệp Trang | ix

Hình 4.24 Giao diện cho trang xác nhận thông tin đơn hàng 64

Hình 4.25 Giao diện cho trang thông báo đặt hàng thành công 65

Hình 4.26 Giao diện cho trang thanh toán online 66

Hình 4.27 Giao diện cho trang thông báo thanh toán thành công 67

Hình 4.28 Giao diện cho trang xem thông tin cá nhân 68

Hình 4.29 Giao diện cho trang thay đổi thông tin cá nhân 70

Hình 4.30 Giao diện cho trang chính sách bảo hành 71

Hình 4.31 Giao diện cho trang hướng dẫn trả góp 72

Hình 4.32 Giao diện cho trang tổng quan 73

Hình 4.33 Giao diện cho trang quản lý danh mục 74

Hình 4.34 Giao diện cho trang quản lý sản phẩm 76

Hình 4.35 Giao diện cho trang thêm sửa sản phẩm 77

Hình 4.36 Giao diện cho trang quản lý các đánh giá 79

Hình 4.37 Giao diện cho trang xử lý đơn hàng 80

Hình 4.38 Giao diện cho trang quản lý tin tức 81

Hình 4.39 Giao diện cho trang quản lý tài khoản khách hàng 82

Hình 4.40 Giao diện cho trang quản lý banner quảng cáo 83

Hình 4.41 Giao diện cho trang quản lý tài khoản quản trị viên 84

Hình 5.1 Setting cơ bản 85

Hình 5.2 Setting chi tiết cho App 86

Hình 5.3 Nội dung file Procfile để setting dyno 86

Hình 5.4 Convert database sang file migration 87

Hình 5.5 Chạy migration trên console của Heroku 87

Hình 5.6 Seed dữ liệu mậu vào Heroku 88

Hình 5.7 Đăng nhập admin trên host vừa deploy 88

DANH MỤC BẢNG

Bảng 3.1 Cấu trúc các chức năng của các nhóm người dùng 15

Bảng 4.1 Danh sách Usecase 19

Bảng 4.2 Đặc tả usecase tìm kiếm thông tin 21

Bảng 4.3 Đặc tả usecase xem danh sách sản phẩm 21

Bảng 4.4 Đặc tả usecase xem thông tin chi tiết sản phẩm 22

Bảng 4.5 Đặc tả usecase giỏ hàng 22

Bảng 4.6 Đặc tả usecase đăng ký 23

Bảng 4.7 Đặc tả usecase đăng nhập 23

Bảng 4.8 Đặc tả usecase đăng xuất 24

Bảng 4.9 Đặc tả usecase đặt mua hàng 24

Bảng 4.10 Đặc tả usecase xem danh sách đơn hàng 25

Bảng 4.11 Đặc tả usecase xem thông tin đơn hàng 25

Bảng 4.12 Đặc tả usecase chỉnh sửa thông tin cá nhân 26

Bảng 4.13 Đặc tả usecase đánh giá sản phẩm 26

Bảng 4.14 Đặc tả usecase quản lý banner quảng cáo 27

Bảng 4.15 Đặc tả usecase quản lý tài khoản khách hàng 27

Bảng 4.16 Đặc tả usecase quản lý đơn hàng 28

Bảng 4.17 Đặc tả usecase quản lý sản phẩm 28

Bảng 4.18 Đặc tả usecase quản lý bài viết 29

Bảng 4.19 Đặc tả usecase quản lý danh mục 30

Bảng 4.20 Đặc tả usecase xem thống kê bán hàng 31

Bảng 4.21 Đặc tả usecase quản lý nhân viên 31

Bảng 4.22 Danh sách các bảng 33

Bảng 4.23 Bảng Admin 34

Bảng 4.24 Bảng articles 34

Báo Cáo Khóa Luận Tốt Nghiệp Trang | xi

Bảng 4.25 Bảng categories 35

Bảng 4.26: Bảng contacts 36

Bảng 4.27 Bảng orders 36

Bảng 4.28 Bảng out_banners 37

Bảng 4.29 Bảng slide_banners 37

Bảng 4.30 Bảng password_resets 38

Bảng 4.31 Bảng payments 38

Bảng 4.32 Bảng products 39

Bảng 4.33 Bảng ratings 40

Bảng 4.34 Bảng transactions 40

Bảng 4.35 Bảng users 41

Bảng 4.36 Mô tả chức năng giao diện trang chủ 56

Bảng 4.37 Biến cố giao diện trang chủ 57

Bảng 4.38 Mô tả chức năng giao diện trang đăng nhập 58

Bảng 4.39 Biến cố giao diện trang đăng nhập 58

Bảng 4.40 Mô tả chức năng giao diện trang đăng ký 59

Bảng 4.41 Biến cố giao diện trang đăng ký 59

Bảng 4.42 Mô tả chức năng giao diện trang xem danh sách sản phẩm theo danh mục 60 Bảng 4.43 Mô tả chức năng giao diện trang xem chi tiết sản phẩm 61

Bảng 4.44 Biến cố giao diện trang xem chi tiết sản phẩm 62

Bảng 4.45 Mô tả chức năng giao diện trang xem lịch sử đơn hàng 62

Bảng 4.46 Mô tả chức năng giao diện trang xem sản phẩm trong giỏ hàng 63

Bảng 4.47 Biến cố giao diện trang xem sản phẩm 63

Bảng 4.48 Mô tả chức năng giao diện trang xác nhận thông tin đơn hàng 64

Bảng 4.49 Biến cố giao diện trang xác nhận thôn tin đơn hàng 64

Bảng 4.50 Mô tả chức năng giao diện trang thông báo đặt hàng thành công 65

Bảng 4.51 Biến cố giao diện trang thông báo 65

Bảng 4.52 Mô tả chức năng giao diện trang thanh toán online 66

Bảng 4.53 Biến cố giao diện trang thanh toán online 66

Bảng 4.54 Mô tả chức năng giao diện trang thông báo thanh toán thành công 67

Bảng 4.55 Biến cố giao diện trang thông báo thanh toán thành công 67

Bảng 4.56 Mô tả chức năng giao diện trang xem thông tin cá nhân 68

Bảng 4.57 Biến cố giao diện trang xem thông tin cá nhân 69

Bảng 4.58 Mô tả chức năng giao diện trang thay đổi thông tin cá nhân 70

Bảng 4.59 Biến cố giao diện trang thay đổi thông tin cá nhân 70

Bảng 4.60 Mô tả chức năng giao diện trang chính sách bảo hành 71

Bảng 4.61 Mô tả chức năng giao diện trang hướng dẫn trả góp 72

Bảng 4.62 Mô tả chức năng giao diện trang tổng quan admin 73

Bảng 4.63 Mô tả chức năng giao diện trang quản lý danh mục 74

Bảng 4.64 Biến cố giao diện trang quản lý danh mục 75

Bảng 4.65 Mô tả chức năng giao diện trang quản lý sản phẩm 76

Bảng 4.66 Biến cố giao diện trang quản lý sản phẩm 76

Bảng 4.67 Mô tả chức năng giao diện trang thêm sửa sản phẩm 78

Bảng 4.68 Biến cố giao diện trang thêm sửa sản phẩm 78

Bảng 4.69 Mô tả chức năng giao diện trang quản lý các đánh giá 79

Bảng 4.70 Mô tả chức năng giao diện trang xử lý đơn hàng 80

Bảng 4.71 Mô tả chức năng giao diện trang quản lý tin tức 81

Bảng 4.72 Mô tả chức năng giao diện trang quản lý tài khoản khách hàng 82

Bảng 4.73 Mô tả chức năng giao diện trang quản lý banner quảng cáo 83

Bảng 4.74 Mô tả chức năng giao diện trang quản lý tài khoản quản trị viên 84

Báo Cáo Khóa Luận Tốt Nghiệp Trang | xiii

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

- MVC: Model-View-Controller

- HTML: HyperText Markup Language

- CSS: Cascade Style Sheet

- PHP: Hypertext Preprocessor

- CRUD: Create – Read – Update – Delete

lẽ đó, môi trường internet là môi trường tuyệt vời để giới thiệu và bán các sản phẩm linh kiện máy tính, và một trang web giới thiệu sản phẩm có khả năng ghi lại đơn hàng và hỗ trợ các hình thức thanh toán online trở thành thứ không thể thiếu khi muốn mở một cửa hàng bán linh kiện máy tính hay bất cứ thứ gì khác

Qua quá trình được học tại trường lớp cũng như tự học, bọn em quyết định áp dụng những kiến thức đã có để hoàn thiện đề tài “Xây dựng website bán linh kiện điện tử” với

sự hướng dẫn tận tình của giáo viên hướng dẫn Quá trình làm đồ án cũng giúp cho các thành viên trong nhóm tích lũy được nhiều kinh nghiệm để giải quyết các vấn đề gặp phải trong việc phát triển một trang web bán hàng và nâng cao khả năng lập trình

Do kiến thức và kinh nghiệm lập trình còn hạn chế, nên sản phẩm của nhóm em sẽ không tránh khỏi các thiếu sót nên bọn em rất mong nhận được sự góp ý của các thầy cô trong hội đồng để sản phẩm của nhóm được hoàn thiện hơn

Báo Cáo Khóa Luận Tốt Nghiệp Trang | 2

2 Mục tiêu và nhiệm vụ của đề tài

2.1 Mục tiêu

Xây dựng một website cung cấp phục vụ cho việc bán các mặt hàng linh kiện điện

tử:

Giúp khách hàng:

- Tìm kiếm những thông tin về sản phẩm từ hệ thống và đặt mua mặt hàng này

- Thực hiện giao dịch trực tuyến trên hệ thống bằng nhiều hình thức thanh toán

- Thực hiện thao tác tìm kiếm nhanh, hiệu quả bên cạnh đó còn giúp cho khách hàng tiết kiệm được thời gian, tiết kiệm được chi phí của các doanh nghiệp

- Chức năng giỏ hàng để khách hàng có thể dễ dàng trong việc mua sắm hơn

- Theo dõi đơn hàng của mình thông qua đăng nhập bằng tài khoản đăng ký tại website, hoặc có thể dùng chính tài khoản google để đăng nhập

Giúp người quản lý:

- Xem được thống kê tình trạng bán hàng

- Quản lý được những thành phần sẽ được hiện trên trang chủ, các danh mục nổi bật, các banner quảng cáo

- Thêm, sửa, xóa thông tin sản phẩm và thông tin khách hàng, kiểm tra và xử lý đơn hàng

Áp dụng được những kiến thức đã được học trước đây trong trường để hoàn thành việc xây dựng website

Chương 1: Mở Đầu

2.2 Nhiệm vụ

Một số nhiệm vụ chính mà nhóm cần phải thực hiện để có thể hoàn thiện khóa luận này:

- Tìm hiểu về PHP, Laravel framework

- Tìm hiểu các package Laravel cần thiết để thực hiện xây dựng một trang web

- Khảo sát các trang bán linh kiện điện tử hiện đang hoạt động

- Nghiên cứu cách sử dụng các thư viện javascript, jquery hỗ trợ như ajax để cải thiện trang web

- Nghiên cứu những công nghệ mới, kiến thức mới để có thể áp dụng cho tương lai

- Chức năng chỉnh sửa thông tin đơn hàng khi đặt hàng

- Chức năng thanh toán online

Đối với phía admin:

- Trang dashboard thống kê tình trạng bán hàng

- Chức năng quản lý tất cả các thành phần ở website phía khách hàng

- Khả năng tùy chỉnh chi tiết bài viết cũng như mô tả cho sản phẩm

Báo Cáo Khóa Luận Tốt Nghiệp Trang | 4

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

Phương pháp nghiên cứu tài liệu:

- Nghiên cứu và tìm hiểu các tài liệu, document của các công cụ, công nghệ được sử dụng

- Tìm hiểu về các lỗi và cách sữa chữa trên các trang hỏi đáp về lập trình như Stack Overflow

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ị và bạn bè có kinh nghiệm liên quan đến các vấn đề của khóa luận để tạo tính chính xác và khoa học của đề tài

Phương pháp mô hình hóa:

- Mô phỏng trang web từ bước thiết kế cài đặt cho đến kết quả thành phẩm

Chương 1: Mở Đầu

5 Bố cục của báo cáo

Bố cục báo cáo bao gồm các chương sau:

Báo Cáo Khóa Luận Tốt Nghiệp Trang | 6

CHƯƠNG 2: CÔNG NGHỆ SỬ DỤNG

1 Html/Css

1.1 HTML - HyperText Markup Language

HTML là từ viết tắt của HyperText Markup Language, nghĩa là ngôn ngữ đánh dấu

siêu văn bản

Hypertext (siêu văn bản): là một đoạn text bất kì nhưng có chứa link đến một nguồn

thông tin khác (như một đoạn văn bản khác, một địa chỉ website, hình ảnh, âm thanh…)

HTML được ví như là bộ xương của một giao diện website, dù nó là dành cho

WordPress hay bất cứ website nào “Bộ xương” này sẽ giúp chúng ta xác định bố cục trên mỗi website và đánh dấu lại các phần đó bằng các thẻ (tag) nhất định, sau đó nó sẽ

tự xác định mỗi đối tượng được đánh dấu mang một vài trò riêng trong website

HTML được tương thích với mọi hệ điều hành cùng các trình duyệt của nó Khả năng dễ học, dễ viết là một ưu điểm của HTML không những vậy việc soạn thảo đòi hỏi hết sức đơn giản, chúng ta có thể dùng word, notepad hay bất cứ một trình soạn thảo văn bản nào để viết và chỉ cần lưu với định dạng “.html” hoặc “.htm” là đã có thể tạo ra một file HTML

Phiên bản mới nhất của HTML là HTML5 với nhiều tính năng ưu việt so với các phiên bản cũ HTML cải tiến khá nhiều đặc biệt hỗ trợ mạnh mẽ các phần tử multimedia

mà không cần các plugin Một tập tin HTML bao gồm trong đó là các đoạn văn bản HTML, được tạo lên bởi các thẻ HTML HTML5 nói chung mạnh mẽ hơn nhiều không chỉ về tốc độ và độ thích ứng cao mà chính là khả năng hỗ trợ API (Application Programming Interface - giao diện lập trình ứng dụng) và DOM (Document Object Model – các đối tượng thao tác văn bản)

Chương 1: Mở Đầu

1.2 Css - Cascade Style Sheet

CSS là từ viết tắt của Cascade Style Sheet, là ngôn ngữ giúp trình duyệt hiểu được

các thiết lập định dạng và bố cục cho trang web CSS cho phép bạn điều khiển thiết kế của nhiều thành phần HTML chỉ với duy nhất 1 vùng chọn CSS Điều này giúp giảm thiểu thời gian thiết kế và chỉnh sửa, khi bạn có thể tách biệt được cấu trúc (HTML) và định dạng (CSS)

CSS có cấu trúc đơn giản và sử dụng các từ tiếng anh để đặt tên cho các thuộc tính CSS khi sử dụng có thể viết trực tiếp xen lẫn vào mã HTML hoặc tham chiếu từ một file css riêng biệt CSS thường được viết riêng thành một tập tin với mở rộng là “.css”, nhờ

đó mà các trang web có sử dụng CSS thì nội dung HTML sẽ trở nên ngắn gọn hơn Ngoài

ra có thể sử dụng một tập tin CSS đó cho nhiều website tiết kiệm rất nhiều thời gian và công sức

Một đặc điểm quan trọng đó là tính kế thừa của CSS giúp giảm được số lượng dòng code mà vẫn đạt được yêu cầu Tuy nhiên, đối với CSS thì các trình duyệt hiểu theo kiểu riêng của nó Do vậy, việc trình bày một nội dung trên các trình duyệt khác nhau là không thống nhất CSS cung cấp hàng trăm thuộc tính trình bày dành cho các đối tượng với sự sáng tạo cao trong kết hợp các thuộc tính giúp mang lại hiệu quả

- Ưu điểm:

+ Mô hình lập trình đơn giản

+ Hỗ trợ ADO (Active Data Object), FSO (File System Object)

+ ASP cùn hỗ trợ nhiều ngôn ngữ như: VBscrip, Javascrip

- Nhược điểm:

+ Code ASP lẫn với html nên khó khan trong việc tìm lỗi

+ Không hỗ trợ cơ chế cache

+ Tốc độ xử lý còn chậm

Báo Cáo Khóa Luận Tốt Nghiệp Trang | 8

2 Laravel PHP framework

PHP là viết tắt của từ Hypertext Preprocessor Ngôn ngữ này được phát triển từ năm

1994 và cho đến nay đã được nhiều người sử dụng để phát triển các ứng dụng phần mềm thông qua lập trình web Đặc điểm của ngôn ngữ lập trình này là sử dụng mã nguồn mở,

dễ dàng nhúng vào HTML và tích hợp với web

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

Laravel giúp 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ấu trúc cơ bản để xây dựng những ứng dụng đó Hay nói cách khác, Laravel giúp tăng tốc quá trình phát triển ứng dụng, tiết kiệm được thời gian, tăng sự ổn định cho ứng dụng Giảm thiểu số lần phải viết lại code cho lập trình viên

Ưu điểm của Laravel Framework:

- Nhiều nguồn tài liệu tham khảo

- Tốc độ xử lý nhanh

- Dễ sử dụng

- Tính bảo mật cao

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

- Vì là một framework của php nên Laravel cũng kế thừa nhiều nhược điểm cố hữu của php như hạn chế về cấu trúc ngữ pháp, chỉ sử dụng được trong các hệ thống

có quy mô không quá lớn, …

Chương 1: Mở Đầu

3 Mô hình MVC

MVC (viết tắt của Model-View-Controller) là một mô hình kiến trúc phần mềm được

sử dụng trong việc phát triển phầm mềm MVC chia một ứng dụng thành ba phần tương

tác được với nhau để tách biệt giữa cách thức mà thông tin được xử lý phía server và

phần thông tin được trình bày và tiếp nhận từ phía người dùng Trong đó:

- Model (M): là bộ phận có chức năng lưu trữ toàn bộ dữ liệu của ứng dụng Bộ

phận này là một cầu nối giữa 2 thành phần bên dưới là View và Controller Model

thể hiện dưới hình thức là một cơ sở dữ liệu hoặc có khi chỉ đơn giản là một file

XML bình thường

- View (V): là phần giao diện dành cho người sử dụng View chỉ có chức năng ghi

nhận và chuyển tiếp các hành động của người dùng trên trang web cho controller

và nhận các dữ liệu từ controller gửi về để hiển thị cho người dùng

- Controller (C): là bộ phận có nhiệm vụ xử lý các yêu cầu người dùng đưa đến

thông qua view Từ đó, C đưa ra dữ liệu phù hợp với người dùng Bên cạnh đó,

Controller còn có chức năng kết nối với model

4 Một số package của Laravel được sử dụng trong đồ án

- barryvdh/laravel-debugbar: Hỗ trợ trong việc debug khi code, được tích hợp thẳng

vào giao diện trang web khi chạy

- laravel/socialite: Hỗ trợ việc tích hợp các chức năng đăng nhập thông qua các tài

khoản mạng xã hội như Facebook hoặc Google

- nwidart/laravel-module: Hỗ trợ tạo riên từng module cho source code giúp việc

quản lý các chức năng của từng actor dể dàng hơn

- bumbummen99/shoppingcart: Hỗ trợ việc tạo ra chức năng giỏ hàng

Báo Cáo Khóa Luận Tốt Nghiệp Trang | 10

5 Cơ sở dữ liệu MySQL

MySQL là hệ quản trị dữ liệu miễn phí, được tích hợp sử dụng chung với Apache, PHP Vì được phát triển trong cộng đồng mã nguồn mở nên MySQL đã qua rất nhiều sự

hỗ trợ của những lập trình viên yêu thích mã nguồn mở MySQL cũng có cùng một cách truy xuất và mã lệnh tương tự với ngôn ngữ SQL, nhưng MySQL không bao quát toàn

bộ những câu truy vấn cao cấp như SQL Về bản chất MySQL chỉ đáp ứng việc truy xuất đơn giản trong quá trình vận hành của website nhưng có thể giải quyết hầu hết các bài toán trong PHP

MySQL là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh

Các ưu điểm của MySQL có thể kể đến như:

• MySQL miễn phí vì là mã nguồn mở

• MySQL sử dụng một Form chuẩn của ngôn ngữ dữ liệu nổi tiếng là SQL

• MySQL làm việc được trên nhiều hệ điều hành và với nhiều ngôn ngữ như PHP, PERL, C, C++, Java, …

• MySQL hoạt động nhanh với các tập dữ liệu lớn

• MySQL hỗ trợ các cơ sở dữ liệu lớn, lên tới 50 triệu hàng hoặc nhiều hơn trong một bảng Kích cỡ file mặc định được giới hạn cho một bảng là 4 GB (Gigabyte), nhưng kích cỡ này có thể được nới rộng (nếu hệ điều hành có khả năng xử lý) để đạt tới giới hạn về mặt lý thuyết là 8 TB (Terabyte)

• MySQL có khả năng điều chỉnh theo ý muốn Giấy phép GPL mã nguồn mở cho phép lập trình viên sửa đổi phần mềm MySQL để phù hợp với môi trường cụ thể của họ

Chương 2: Khảo Sát Hiện Trạng Và Xác Định Yêu Cầu

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

CẦU

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

1.1 Gearvn

Địa chỉ trang chủ: gearvn.com

Hình 3.1 Giao diện trang chủ GearVN

Điểm mạnh:

- Giao diện trực quan, khi nhìn vào có thể thấy ngay menu danh mục được hiển thị thẳng ra, giúp người sử dụng có cái nhìn tổng quan về các sản phẩm đang được bán

- Có một chuyên mục riêng để chứa các thông tin khuyến mãi của shop

- Tổng hợp các chức năng người dùng hay tìm kiếm vào thẳng trang chủ để tiết kiệm thời gian cho người sử dụng

Điểm yếu:

- Không có chức năng thay đổi thông tin cá nhân của người dùng

- Không có chức năng đăng nhập qua tài k hoản google hay facebook

Báo Cáo Khóa Luận Tốt Nghiệp Trang | 12

1.2 AnphatPC

Địa chỉ trang chủ: anphatpc.com.vn

Hình 3.2 Giao diện trang chủ AnphatPC

Điểm mạnh:

- Giao diện trực quan, khi nhìn vào có thể thấy ngay menu danh mục 1 bên, có cái

nhìn tổng quan về các sản phẩm đang được bán

- Có dòng địa chỉ chạy trên thanh điều hướng giúp người sử dụng nhìn thấy vị trí cửa

hàng tiện hơn so với việc phải kéo xuống footer để tìm

- Có chức năng lưu lại những sản phẩm đã xem trước đó của khách hàng

- Có chức năng xây dựng cấu hình PC dựa theo các sản phẩm trong cửa hàng

- Bộ lọc sản phẩm được thiết kế tốt khi dựa trên nhiều tiêu chí để lọc sản phầm

Điểm yếu:

- Thanh menu danh mục che mất 1 phần banner quảng cáo

- Mục chat với quản trị viên bị để tự động bung ra chiếm không gian nhìn

Chương 2: Khảo Sát Hiện Trạng Và Xác Định Yêu Cầu

1.3 Phong Vũ

Địa chỉ trang chủ: phongvu.vn

Hình 3.3 Giao diện trang chủ Phongvu

Điểm mạnh:

- Giao diện trực quan, khi nhìn vào có thể thấy ngay menu danh mục 1 bên, có cái nhìn tổng quan về các sản phẩm đang được bán

- Số điện thoại tư vấn và chăm sóc khách hàng đều được đặt trên thanh navbar

- Có chức năng xây dựng cấu hình PC dựa theo các sản phẩm trong cửa hàng

- Các banner được thiết kế gọn gàng để tránh rối mắt

- Bộ lọc sản phẩm được thiết kế tốt khi dựa trên nhiều tiêu chí để lọc sản phầm

- Có một chuyên mục riêng để chứa các thông tin khuyến mãi của shop

- Có sắp xếp một danh sách riêng các thương hiệu nổi bật

Báo Cáo Khóa Luận Tốt Nghiệp Trang | 14

Chương 2: Khảo Sát Hiện Trạng Và Xác Định Yêu Cầu

Bảng 3.1 Cấu trúc các chức năng của các nhóm người dùng

Xem danh sách sản phẩm Xem thông tin chi tiết sản phẩm Các chức năng của giỏ hàng Đăng ký

Khách hàng có tài khoản Tìm kiếm thông tin

Xem danh sách sản phẩm Xem thông tin chi tiết sản phẩm Các chức năng của giỏ hàng Đăng ký

Đăng nhập Đăng xuất Đặt mua hàng Xem danh sách đơn hàng Xem thông tin đơn hàng Đánh giá sản phẩm Chỉnh sửa thông tin cá nhân

Đăng xuất Quản lý banner quảng cáo Quản lý tài khoản khách hàng Quản lý đơn hàng

Quản lý sản phẩm Quản lý bài viết Quản lý danh mục

Báo Cáo Khóa Luận Tốt Nghiệp Trang | 16

Xem thống kê bán hàng

Đăng xuất Quản lý banner quảng cáo Quản lý tài khoản khách hàng Quản lý đơn hàng

Quản lý sản phẩm Quản lý bài viết Quản lý danh mục Xem thống kê bán hàng Quản lý nhân viên

Chương 2: Khảo Sát Hiện Trạng Và Xác Định Yêu Cầu

3 Qui định và yêu cầu thiết kế

3.2 Yêu cầu thiết kế

- Phân quyền ở cả back-end và front-end

- Giao diện trang chủ

- Hiển thị đầy đủ thông tin, các chức năng bố trí phù hợp

- Có các danh mục và search engine để dễ dàng tìm kiếm

- Có chức năng giỏ hàng

- Có chức năng đăng nhập bằng google +

- Thể hiện các thông tin thiết yếu của sản phẩm khi xuất hiện

- Hệ thống gồm các actor chính: Admin, khách hàng, chủ cửa hàng

- Nhân viên là những người trực tiếp quản lý website, có quyền thêm, sửa và xóa các thông tin trong database

- Người chủ cửa hàng là người có quyền trực tiếp thêm hoặc xóa tài khoản nhân viên

Báo Cáo Khóa Luận Tốt Nghiệp Trang | 18

4 Đánh giá và lựa chọn công nghệ

- Lưu trữ dữ liệu: MySQL vì có khả năng hoạt động với độ ổn định cao, dễ sử dụng, chạy được trên nhiều hệ điều hành và cung cấp một hệ thống các hàm tiện ích rất thuận lợi, độ bảo mật cao, và khả năng mở rộng mạnh mẽ

- Ngôn ngữ lập trình: Do cần phải phát triển một website trong thời gian có hạn là

15 tuần nên nhóm quyết định sử dụng PHP Laravel framework với các ưu điểm như dễ sử dụng, tính bảo mật cao và tốc độ phát triển nhanh để phát triển sản phẩm

- Công cụ lập trình: Visual Studio Code

- Công cụ thiết lập local host: Xampp

- Công cụ quản lý package: Composer

- Công cụ quản lý phiên bản code: Github

Chương 4: Thiết Kế Phần Mềm

CHƯƠNG 4: THIẾT KẾ PHẦN MỀM

1 Lược đồ usecase và mô tả use case

1.1 Danh sách usecase

Bảng 4.1 Danh sách Usecase

3 Xem thông tin chi tiết sản phẩm Guest, Khách hàng có tài khoản

4 Các chức năng của giỏ hàng Guest, Khách hàng có tài khoản

12 Chỉnh sửa thông tin cá nhân Khách hàng có tài khoản, Nhân

viên, Chủ cửa hàng

13 Quản lý banner quảng cáo Nhân viên, Chủ cửa hàng

14 Quản lý tài khoản khách hàng Nhân viên, Chủ cửa hàng

Báo Cáo Khóa Luận Tốt Nghiệp Trang | 20

1.2 Lược đồ usecase

Hình 4.1 Lược đồ usecase

Chương 4: Thiết Kế Phần Mềm

1.3 Đặc tả use case

1.3.1 Tìm kiếm thông tin

Bảng 4.2 Đặc tả usecase tìm kiếm thông tin

Goal Xem danh sách sản phẩm theo danh mục

Actors Guest, Khách hàng có tài khoản

Pre-conditions N/A

Post-conditions N/A

Main Flow 1 Click vào danh mục sản phẩm trên thanh menu ngang

2 Click vào danh mục sản phẩm muốn xem ở menu xổ xuống

Exception

Open Issues N/A

Báo Cáo Khóa Luận Tốt Nghiệp Trang | 22

1.3.3 Xem thông tin chi tiết sản phẩm

Bảng 4.4 Đặc tả usecase xem thông tin chi tiết sản phẩm

Use Case ID

Name Xem thông tin chi tiết sản phẩm

Goal Xem thông tin chi tiết sản phẩm

Actors Guest, Khách hàng có tài khoản

Pre-conditions N/A

Post-conditions N/A

Main Flow 1 Click vào hình ảnh sản phẩm hoặc tên sản phẩm

2 Kéo chuột để đọc chi tiết sản phẩm Exception

Open Issues N/A

1.3.4 Các chức năng của giỏ hàng

Bảng 4.5 Đặc tả usecase giỏ hàng

Use Case ID

Name Chức năng của giỏ hàng

Goal Xem chi tiết giỏ hàng, thao tác với giỏ hàng

Actors Guest, Khách hàng có tài khoản

Pre-conditions N/A

Post-conditions N/A

Main Flow 1 Click vào biểu tượng giỏ hàng trên thanh menu

2 Click vào button thanh toán để thanh toán

3 Click vào button thao tác để sửa đổi mặt hàng Exception

Open Issues N/A

Main Flow 1 Click vào label Đăng ký trên thanh menu

2 Nhập thông tin tài khoản tương ứng

3 Click button đăng ký để đăng ký tài khoản Exception

Open Issues N/A

1.3.6 Đăng nhập

Bảng 4.7 Đặc tả usecase đăng nhập

Use Case ID

Goal Đăng nhập vào hệ thống

Actors Khách hàng có tài khoản, Nhân viên, Chủ cửa hàng

Pre-conditions Đăng nhập tài khoản khách hàng có tài khoản, admin, chủ cửa

hàng Post-conditions N/A

Main Flow 1 Click vào label Login

2 Nhập thông tin tài khoản

3 Ấn enter hoặc nhấn vào button Sign in Exception

Open Issues N/A

Báo Cáo Khóa Luận Tốt Nghiệp Trang | 24

1.3.7 Đăng xuất

Bảng 4.8 Đặc tả usecase đăng xuất

Use Case ID

Goal Thoát khỏi hệ thống

Actors Khách hàng có tài khoản, Nhân viên, Chủ cửa hàng

Pre-conditions Đăng nhập tài khoản khách hàng có tài khoản, admin, chủ cửa

hàng Post-conditions N/A

Main Flow 1 Click vào button log out trên thanh menu

Goal Thêm sản phẩm vào giỏ hàng

Actors Khách hàng có tài khoản

Pre-conditions Đăng nhập tài khoản khách hàng có tài khoản

Post-conditions N/A

Main Flow 1 Rê chuột đến hình ảnh sản phẩm

2 Click vào biểu tưởng giỏ hàng hiện lên trên hình ảnh sản phẩm

Exception

Open Issues N/A

Chương 4: Thiết Kế Phần Mềm

1.3.9 Xem danh sách đơn hàng

Bảng 4.10 Đặc tả usecase xem danh sách đơn hàng

Use Case ID

Goal Xem chi tiết các đơn hàng

Actors Khách hàng có tài khoản

Pre-conditions Đăng nhập tài khoản khách hàng có tài khoản

Post-conditions N/A

Main Flow 1 Click vào label tài khoản trên thanh menu

2 Click vào danh mục đơn hàng của bạn Exception

Open Issues N/A

1.3.10 Xem thông tin đơn hàng

Bảng 4.11 Đặc tả usecase xem thông tin đơn hàng

Use Case ID

Name Xem thông tin đơn hàng

Goal Xem chi tiết thông tin đơn hàng

Actors Khách hàng có tài khoản

Pre-conditions Đăng nhập tài khoản khách hàng có tài khoản

Post-conditions N/A

Main Flow 1 Click biểu tượng xem chi tiết đơn hàng ở cột thao tác

2 Click biểu tượng thùng rác để xóa

3 Click button save change để lưu lại

4 Click vào button close hoặc nút x ở góc phải bên trên để đóng

Exception

Open Issues N/A

Báo Cáo Khóa Luận Tốt Nghiệp Trang | 26

1.3.11 Chỉnh sửa thông tin cá nhân

Bảng 4.12 Đặc tả usecase chỉnh sửa thông tin cá nhân

Use Case ID

Name Chỉnh sửa thông tin cá nhân

Goal Chỉnh sửa thông tin cá nhân

Actors Khách hàng có tài khoản

Pre-conditions N/A

Post-conditions Đăng nhập tài khoản khách hàng có tài khoản

Main Flow 1 Click vào label tài khoản trên thanh menu

2 Chọn danh mục thông tin cá nhân

3 Click button Edit

4 Nhập thông tin cần thay đổi

5 Click button Save để lưu lại

6 Click button cancel để thoát

Goal Đánh giá sản phẩm, vote sao

Actors Khách hàng có tài khoản

Pre-conditions N/A

Post-conditions Đăng nhập tài khoản khách hàng có tài khoản

Main Flow 1 Click vào button gửi đánh giá

2 Chọn số lượng sao

3 Nhập nội dung đánh giá

4 Click button gửi đánh giá Exception

Open Issues N/A

Chương 4: Thiết Kế Phần Mềm

1.3.13 Quản lý banner quảng cáo

Bảng 4.14 Đặc tả usecase quản lý banner quảng cáo

Use Case ID

Name Quản lý banner quảng cáo

Goal Quản lý banner quảng cáo

Actors Nhân viên, Chủ cửa hàng

Pre-conditions N/A

Post-conditions Đăng nhập tài khoản admin, chủ cửa hàng

Main Flow 1 Click vào danh mục banner quảng cáo

2 Chọn banner ngoài hoặc banner trong

3 Chọn trạng thái hiển thị public hoặc private

4 Chọn button edit để sửa

5 Chọn button delete để xóa Exception

Open Issues N/A

1.3.14 Quản lý tài khoản khách hàng

Bảng 4.15 Đặc tả usecase quản lý tài khoản khách hàng

Use Case ID

Name Quản lý tài khoản khách hàng

Goal Quản lý tài khoản khách hàng

Actors Nhân viên, Chủ cửa hàng

Pre-conditions N/A

Post-conditions Đăng nhập tài khoản admin, chủ cửa hàng

Main Flow 1 Click vào danh mục thành viên

2 Chọn button edit để thay đổi thông tin

3 Nhập thông tin tài khoản

4 Click button lưu thông tin

5 Click button delete để xóa tài khoản Exception

Open Issues N/A

Báo Cáo Khóa Luận Tốt Nghiệp Trang | 28

1.3.15 Quản lý đơn hàng

Bảng 4.16 Đặc tả usecase quản lý đơn hàng

Use Case ID

Actors Nhân viên, Chủ cửa hàng

Pre-conditions N/A

Post-conditions Đăng nhập tài khoản admin, chủ cửa hàng

Main Flow 1 Click vào danh mục đơn hàng

2 Click menu xổ chọn trạng thái

3 Click button thanh toán để thay đổi thông tin thanh toán

4 Click biểu tượng view để xem chi tiết đơn hàng

5 Click biểu tượng delete để xóa đơn hàng Exception

Open Issues N/A

Post-conditions Đăng nhập tài khoản admin, chủ cửa hàng

Main Flow 1 Click vào danh mục sản phẩm

2 Click chọn trạng thái hiển thị public hoặc private

3 Click chọn trạng thái nổi bật hoặc none

4 Click button edit để chỉnh sửa

Chương 4: Thiết Kế Phần Mềm

1.3.17 Quản lý bài viết

Bảng 4.18 Đặc tả usecase quản lý bài viết

Use Case ID

Name Quản lý bài viết

Actors Nhân viên, Chủ cửa hàng

Pre-conditions N/A

Post-conditions Đăng nhập tài khoản admin, chủ cửa hàng

Main Flow 1 Click vào danh mục tin tức

2 Click vào button thêm mới

3 Nhập thông tin bài viết

4 Click button Lưu bài viết

5 Click biểu tượng edit để chỉnh sửa

6 Click biểu tượng delete để xóa Exception

Open Issues N/A