xây dựng website bán giày đá bóng

TÓM TẮT Tên đề tài: Xây dựng website bán giày đá bóng Sinh viên thực hiện: Nguyễn Văn Thuấn MSV: 1911505310166 Lớp: 19T1 Mục tiêu của đề tài là xây dựng một website cung cấp các mẫu giày

Trang 1

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

XÂY DỰNG WEBSITE BÁN GIÀY ĐÁ BÓNG

Sinh viên thực hiện : Nguyễn Văn Thuấn

Trang 2

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

XÂY DỰNG WEBSITE BÁN GIÀY ĐÁ BÓNG

Giảng viên hướng dẫn duyệt

Đà Nẵng, tháng 6/2023

Trang 3

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

Trang 4

NHẬN XÉT CỦA NGƯỜI PHẢN BIỆN

Trang 5

TÓM TẮT

Tên đề tài: Xây dựng website bán giày đá bóng Sinh viên thực hiện: Nguyễn Văn Thuấn

MSV: 1911505310166 Lớp: 19T1 Mục tiêu của đề tài là xây dựng một website cung cấp các mẫu giày đá bóng đẹp, rẽ, chất lượng đến các khách hàng có nhu cầu

Khách vãng lai sau khi truy cập website thì có thể tìm kiếm giày theo tên giày hoặc danh mục, xem thông tin chi tiết của sản phẩm, chọn mua giày, cập nhật giỏ hàng và đăng ký tài khoản thành viên để tiến hành đặt hàng và thanh toán

Khách hàng đã đăng nhập có thể tiến hành đặt hàng và chọn hình thức thanh toán trực tiếp hoặc thanh toán online, nếu chọn thanh toán trực tiếp thì khách hàng sẽ thanh toán sau khi nhận giày, nếu chọn thanh toán online thì giao diện sẽ chuyển sang trang thanh toán online để khách hàng thực hiện Ngoài ra khách hàng còn có thể theo dõi tình trạng của đơn hàng đã đặt, xem những đơn hàng đã mua trước đó

Quản trị viên sẽ là người quản trị cao nhất của hệ thống, quản lý tất cả các thông tin của website: danh mục sản phẩm, thông tin của giày, đơn hàng, tài khoản của khách hàng

Trang 6

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

+ https://laravel.com/docs + https://php.net/docs.php

3 Nội dung chính của đồ án:

Quá trình xây dựng website bán giày đá bóng - Thu thập thông tin tài liệu liên quan và khảo sát thực tế - Phân tích thiết kế các chức năng của hệ thống

- Phân tích thiết kế cơ sơ dữ liệu - Thiết kế giao diện cho các chức năng - Xây dựng hệ thống website

- Kiểm thử website - Hoàn thành báo cáo tổng hợp

4 Các sản phẩm dự kiến:

- Website bán giày đá bóng - File báo cáo hoàn chỉnh

5 Ngày giao đồ án: 06/02/2023 6 Ngày nộp đồ án: 07/06/2023

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

Trang 7

i

LỜI NÓI ĐẦU

Thế giới ngày nay đã có nhiều tiến bộ mạnh mẽ về công nghệ thông tin (CNTT) từ một tiềm năng thông tin đã trở thành một tài nguyên thực sự, trở thành sản phẩm hàng hoá trong xã hội, tạo ra một sự thay đổi to lớn trong lực lượng sản xuất, cơ sở hạ tầng, cấu trúc kinh tế, tính chất lao động và cả cách thức quản lý trong các lĩnh vực của xã hội

Với sự phát triển Internet nó được xem là một trong những thành tựu khoa học kỹ thuật vĩ đại trong lịch sử loài người và là nguồn tài nguyên thông tin lớn nhất, đa dạng nhất của thế giới hiện nay Internet giúp mọi người có thể trao đổi thông tin trong sinh hoạt hàng ngày, thu thập, tìm kiếm các thông tin mới nhất ở khắp mọi nơi trên toàn thế giới, giao dịch thương mại, cộng tác trong nghiên cứu khoa học… Vì vậy, trên con đường công nghiệp hóa, hiện đại hóa đất nước ta hiện nay, việc đưa Internet đến mọi người là một xu thế tất yếu Vấn đề đặt ra là làm sao cho Internet thực sự phục vụ cho con người một cách có hiệu quả trên mọi lĩnh vực

Xu thế thương mại điện tử hóa việc quản lý kinh doanh là xu thế rất cần thiết đối với mọi quốc gia bởi những ưu điểm vượt trội và những thành quả to lớn của việc ứng dụng thương mại điện tử mang lại hiệu quả kinh tế to lớn trong quản lý kinh doanh và trong nhiều lĩnh vực khác

Em chọn đề tài của mình là "XÂY DỰNG WEBSITE BÁN GIÀY ĐÁ BÓNG" với mục đích xây dựng một môi trường kinh doanh điện tử cho các cửa hàng bán giày đá bóng, đồng thời tìm hiểu và nghiên cứu các phương pháp luận và công cụ cho thiết kế và xây dựng website thương mại điện tử Hệ thống này giúp bất kỳ ai truy nhập vào website đều có thể xem, mua và mua giày một cách nhanh chóng, an toàn mà không phải trực tiếp đến cửa hàng

Lời đầu tiên, em xin gửi lời cảm ơn chân thành đến quý thầy cô đã giúp đỡ em thực hiện đề tài này, đặc biệt là ThS Trần Bửu Dung, cô đã tận tình giúp đỡ em trong suốt quá trình thực hiện đề tài tốt nghiệp này

Đồng thời, em cũng xin chân thành cảm ơn quý thầy cô thuộc ngành Công Nghệ Thông Tin trường Đại học Sư phạm Kỹ thuật - Đại học Đà Nẵng đã truyền đạt những kiến thức cần thiết và những kinh nghiệm quý báu cho chúng em trong suốt thời gian trên giảng đường để em thực hiện tốt đề tài này

Trong quá trình thực hiện đề tài, do kiến thức và thời gian còn hạn chế nên không thể tránh khỏi những sai sót Vì vậy em mong quý thầy, cô thông cảm và góp ý để em

Trang 8

ii có thể hoàn thiện đề tài Thêm nữa là, những lời góp ý đó có thể giúp em tránh được những sai lầm sau này

Em xin chân thành cảm ơn!

Trang 9

iii

LỜI CAM ĐOAN

Em xin cam đoan đồ án “Xây dựng website bán giày đá bóng” là một công trình

nghiên cứu độc lập dưới sự hướng dẫn của giảng viên Th.S Trần Bửu Dung Ngoài ra không có bất cứ sự sao chép nào của người khác Đề tài, nội dung báo cáo đồ án là sản phẩm mà em đã nỗ lực nghiên cứu trong quá trình học tập tại trường Các kết quả trình bày trong báo cáo là hoàn toàn trung thực, em xin chịu hoàn toàn trách nhiệm, kỷ luật của trưởng bộ môn và nhà trường đề ra nếu như có vấn đề xảy ra

Sinh viên thực hiện

Nguyễn Văn Thuấn

Trang 10

iv

MỤC LỤC

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN i

NHẬN XÉT CỦA NGƯỜI PHẢN BIỆN ii

TÓM TẮT iii

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

LỜI NÓI ĐẦU i

LỜI CAM ĐOAN iii

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

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

Trang 11

v

1.3 Frameword và thư viện hổ trợ 6

1.3.1 Giới thiệu Laravel Framework 6

1.3.2 Thư viện Jquery 7

1.3.3 Thư viện Chart.Js 7

1.3.4 Thư viện Boostrap 8

1.4 Công cụ hổ trợ xây dựng hệ thống 8

1.4.1 Visual Studio Code 8

1.4.2 XAMPP 9

1.5 Lý thuyết xây dựng web 10

Chương 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 11

2.5.1.1 Đăng ký tài khoản 12

2.5.1.2 Xem thông tin giày 13

2.5.1.3 Tìm kiếm thông tin giày 13

Trang 12

vi

2.5.2 Khách hàng 14

2.5.2.1 Đăng nhập trang người dùng 14

2.5.2.2 Cập nhật thông tin tài khoản 14

2.5.2.3 Cập nhật giỏ hàng 15

2.5.2.4 Thanh toán giỏ hàng 15

2.5.2.5 Xem danh sách đơn hàng 16

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

2.6 Sơ đồ hoạt động (Activity Diagram) 20

2.6.1 Khách vãng lai 20

2.6.1.1 Tìm kiếm giày 20

2.6.1.2 Xem thông tin giày 21

2.6.1.3 Đăng ký tài khoản thành viên 21

2.6.2 Khách hàng 22

2.6.2.1 Đăng nhập trang người dùng 22

Trang 13

vii

2.7 Sơ đồ quan hệ 27

2.8 Thiết kế Form, bảng cơ sở dữ liệu 27

2.8.1 Khách hàng 27

2.8.1.1 Đăng ký tài khoản 27

Chương 3 XÂY DỰNG CHƯƠNG TRÌNH 34

3.1 Công cụ xây dựng chương trình 34

3.2 Giao diện người dùng 34

3.2.1 Giao diện trang chủ khi chưa đăng nhập 34

3.2.2 Giao diện chi tiết sản phẩm khi chưa đăng nhập 35

3.2.3 Giao diện đăng nhập 35

3.2.4 Giao diện đăng ký 36

3.2.5 Giao diện trang chủ khi đăng nhập thành công 36

3.2.6 Giao diện cập nhật thông tin 37

3.2.7 Giao diện thêm vào giỏ hàng 37

3.2.8 Giao diện giỏ hàng 38

3.2.9 Giao diện đặt hàng 38

3.2.10 Giao diện tìm kiếm tên sản phẩm 39

3.3 Giao diện quản trị viên 39

3.3.1 Giao diện đăng nhập 39

Trang 14

viii

3.3.2 Giao diện quản lý danh mục 40

3.3.3 Giao diện thêm mới danh mục 40

3.3.4 Giao diện chỉnh sửa danh mục 40

3.3.5 Giao diện quản lý thương hiện 41

3.3.6 Giao diện thêm mới thương hiệu 41

3.3.7 Giao diện sản phẩm 42

3.3.8 Giao diện thêm mới sản phẩm 42

3.3.9 Giao diện chỉnh sửa sản phẩm 43

3.3.10 Giao diện quản lý người dùng 43

3.3.11 Giao diện quản lý đơn hàng 44

3.3.12 Giao diện quản lý xem và duyệt đơn hàng 44

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

TÀI LIỆU THAM KHẢO 46

Trang 15

ix

DANH MỤC BẢNG BIỂU

Bảng 2.1 Kịch bản usecase đăng ký 13

Bảng 2.2 Kịch bản usecase xem thông tin giày 13

Bảng 2.3 Kịch bản usecase xem thông tin giày 14

Bảng 2.4 Kịch bản usecase đăng nhập trang người dùng 14

Bảng 2.5 Kịch bản usecase cập nhật thông tin tài khoản 15

Bảng 2.6 Kịch bản usecase cập nhật giỏ hàng 15

Bảng 2.7 Kịch bản usecase thanh toán giỏ hàng 16

Bảng 2.8 Kịch bản usecase xem danh sách đơn hàng 17

Bảng 2.9 Kịch bản usecase đăng nhập trang quản trị viên 17

Bảng 2.10 Kịch bản usecase cập nhật danh mục sản phẩm 18

Bảng 2.11 Kịch bản usecase cập nhật sản phẩm 19

Bảng 2.12 Kịch bản usecase quản lý đơn hàng 19

Bảng 2.13 Kịch bản usecase quản lý tài khoản khách hàng 20

Trang 16

Hình 1.9 Ảnh minh hoạ Visual Studio Code 8

Hình 1.10 Ảnh minh hoạ Xampp 9

Hình 1.11 Ảnh minh họa mô hình MVC 10

Hình 2.1 Sơ đồ Usecase 12

Hình 2.2 Sơ đồ hoạt động chức năng tìm kiếm giày 20

Hình 2.3 Sơ đồ hoạt động xem thông tin giày 21

Hình 2.4 Đăng ký tài khoản thành viên 21

Hình 2.5 Sơ đồ hoạt động đăng nhập trang người dùng 22

Hình 2.6 Sơ đồ hoạt động chức năng cập nhật thông tin tài khoản 23

Hình 2.7 Sơ đồ hoạt động chức năng cập nhật giỏ hàng 24

Hình 2.8 Sơ đồ hoạt động thanh toán giỏ hàng 25

Hình 2.9 Sơ đồ hoạt động chức năng quản lý danh mục sách 26

Hình 2.10 Sơ đồ hoạt động quản lý thông tin giày 26

Hình 2.11 Sơ đồ Quan hệ 27

Hình 2.12 Giao diện đăng ký tài khoản 27

Hình 2.13 Giao diện cập nhật thông tin tài khoản 28

Hình 2.14 Giao diện cập nhật giỏ hàng 29

Hình 2.15 Giao diện danh mục 30

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

Hình 2.17 Giao diện quản lý đơn hàng 32

Hình 3.1 Giao diện trang chủ khi chưa đăng nhập 34

Hình 3.2 Giao diện chi tiết sản phẩm khi chưa đăng nhập 35

Trang 17

xi

Hình 3.3 Giao diện đăng nhập 35

Hình 3.4 Giao diện đăng ký 36

Hình 3.5 Giao diện trang chủ khi đăng nhập thành công 36

Hình 3.6 Giao diện cập nhật thông tin 37

Hình 3.7 Giao diện thêm vào giỏ hàng 37

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

Hình 3.9 Giao diện đặt hàng 38

Hình 3.10 Giao diện tìm kiếm tên sản phẩm 39

Hình 3.11 Giao diện đăng nhập 39

Hình 3.12 Giao diện quản lý danh mục 40

Hình 3.13 Giao diện thêm mới danh mục 40

Hình 3.14 Giao diện chỉnh sửa danh mục 40

Hình 3.15 Giao diện quản lý thương hiệu 41

Hình 3.16 Giao diện thêm mới thương hiệu 41

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

Hình 3.18 Giao diện thêm mới sản phẩm 42

Hình 3.19 Giao diện chỉnh sửa sản phẩm 43

Hình 3.20 Giao diện quản lý người dùng 43

Hình 3.21 Giao diện quản lý đơn hàng 44

Hình 3.22 Giao diện quản lý xem và duyệt đơn hàng 44

Trang 18

xii

DANH MỤC CHỮ VIẾT TẮT

1 PHP Hypertext Preprocessor Ngôn ngữ lập trình kịch bản 2 HTML HyperText Markup Language Ngôn ngữ đánh dấu siêu văn bản 3 CSS Cascading Style Sheets Ngôn ngữ tạo phong cách cho

website 4 W3C World Wide Web Consortium Tổ chức tiêu chuẩn quốc tế chính

cho World Wide Web 5 RDBMS Relational Database

Trang 19

Xây dựng Website bán giày đá bóng

MỞ ĐẦU 1 Lý do chọn đề tài

Với sự bùng nổ thông tin trên Internet, vai trò của các trang thông tin điện tử trực tuyến ngày càng trở nên quan trọng Khi mà Internet gần như phủ sóng toàn cầu như hiện nay thì việc mua sắm sản phẩm, dịch vụ online tại Việt Nam đã trở nên quen thuộc và phổ biến hơn bao giờ hết Chỉ với một chiếc máy tính được kết nối Internet khách hàng có thể lựa chọn và mua sắm mọi lúc, mọi nơi chỉ với một vài thao tác đơn giản họ

sẽ có được một sản phẩm ưng ý nhất Bên cạnh đó còn giúp cửa hàng quản lý được việc

mua bán hiệu quả hơn so với việc quản lý trên giấy tờ dễ gây sai sót hay mất mác thông tin, các dữ liệu về sản phẩm, khách hàng được lưu trữ một cách an toàn

Ngày nay, sở thích tập luyện thể thao của con người rất phổ biến và có xu hướng phát triển mạnh Trong đó, đá bóng là môn thể thao được mọi người tham gia đông đảo nhất Cùng với sự phát triển của Internet và thương mại điện tử, em quyết định thực hiện đề tài “Xây dựng website bán giày đá bóng” Những khách hàng có nhu cầu mua giày, những phụ kiện hỗ trợ trong đá bóng chỉ cần thông qua website trực tuyến không mất nhiều thời gian để có thể sở hữu những sản phẩm phù hợp với bản thân mình

2 Mục tiêu đề tài

- Mục tiêu: Xây dựng một hệ thống với mục tiêu chủ yếu là giới thiệu giày của cửa hàng đến khách hàng Khách hàng có thể xem, tìm kiếm các thông tin về giày một cách trực quan và có thể đặt mua các loại giày trên mạng mà không cần phải trực tiếp đến cửa hàng Quản trị viên có thể quản lý hệ thống một cách chính xác và hiệu quả

- Nhiệm vụ: + Nghiên cứu đề tài + Phân tích và thiết kế hệ thống + Thiết kế và xây dựng website

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

- Đối tượng nghiên cứu + Khách hàng là những học sinh, sinh viên và những người trong độ tuổi đá

bóng + Quản lý và nhân viên tại cửa hàng bán giày đá bóng + Tài liệu tham khảo liên quan đến website giày đá bóng

Trang 20

- Phạm vi nghiên cứu + Website này có thể được ứng dụng cho các của hàng kinh doanh mặt hàng

thể thao có quy mô và hình thức hoạt động nghiệp vụ nhỏ

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

- Tham khảo các website bán giày trên mạng - Khảo sát thực tế

- Tìm kiếm tài liệu trên internet có liên quan đến nội dung nghiên cứu - Tìm hiểu về công cụ hỗ trợ lập trình và cách sử dụng

- Thu tập tài liệu liên quan đên nghiệp vụ quản lý website bán sách

5 Giải pháp công nghệ

- Thiết kế cơ sở dữ liệu, sơ đồ usecase, sơ đồ hoạt động: StarUML - Hỗ trợ soạn thảo mã nguồn: Visual Studio Code

- Ngôn ngữ lập trình: + Backend: PHP (Framework Laravel) + Frontend: HTML, CSS, JavaScript, Jquery - Thư viện: Framework Laravel, Bootstrap 4, JQuery confirm, Chart.js - Hệ quản trị CSDL: MySQL (chạy trên môi trường XAMPP)

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

- Ý nghĩa khoa học của đề tài + Giúp sinh viên bổ sung kiến thức để bắt đầu trên con đường trở thành kỹ sư

lập trình giỏi + Rèn luyện kỹ năng phân tích và thiết kế dự án - Ý nghĩa thực tiễn của đề tài

+ Kiến thức về ngôn ngữ PHP + Kiến thức về Laravel Framework + Kiến thức thiết kế website với HTML, CSS, Javascript, Jquery,… + Phát huy tính sáng tạo và cách làm việc độc lập cho mình

Trang 21

Nêu các cơ sở lý thuyết sẽ áp dụng trong hệ thống: ngôn ngữ HTML, CSS, JavaScript, ngôn ngữ lập trình PHP, hệ quản trị cơ sở dữ liệu MySQL, thư viện Chart.js,

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG Trình bày các sơ đồ use case, kịch bản cho các use case, sơ đồ ERD, sơ đồ hoạt động của các chức năng trong hệ thống Từ những phân tích ở trên, tiến hành thiết kế cơ sở dữ liệu cho hệ thống sẽ triển khai

CHƯƠNG 3: XÂY DỰNG CHƯƠNG TRÌNH Từ những phân tích và thiết kế về hệ thống ở trên, áp dụng xây dựng các chức năng hệ thống Trình bày giao diện của phần mềm triển khai

Trang 22

Chương 1

CƠ SỞ LÝ THUYẾT

1.1 Tổng quan về ngôn ngữ lập trình 1.1.1 HTML

Hình 1.1 Ngôn ngữ lập trình HTML

HTML là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với các mẫu thông tin được trình bày trên World Wide Web Cùng với CSS và Javascript, HTML tạo ra bộ ba nền tảng kỹ thuật cho World Wide Web

HTML được định nghĩa như là một ứng dụng đơn giản của SGML và được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp HTML đã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì Phiên bản chính thức mới nhất của HTML và HTML 4.01 (1999) Sau đó, các nhà phát triển đã thay thế nó bằng XHTML Hiện nay, HTML đang được phát triển tiếp với phiên bản HTML5 hứa hẹn mang lại diện mạo mới cho trang Web

1.1.2 CSS

Hình 1.2 Ngôn ngữ lập trình CSS

Trang 23

CSS 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ữ đánh dấu (ví dụ như HTML)

Ta 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 website như 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 một chút “phong cách” vào các phần tử HTML đó như đổi màu sắc trang, đổi màu chữ, thay đổi cấu trúc, …

CSS được sử dụng trong Website là công nghệ được phát triển bởi W3C, được dùng để phát triển Front-end

1.1.3 PHP

PHP là một ngôn ngữ lập trình kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triển các ứng dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát Nó rất thích hợp với web và có thể dễ dàng nhúng vào trang HTML

Hình 1.3 Ví dụ về code PHP

Do được tối ưu hóa cho các ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống C và Java, dễ học và thời gian xây dựng sản phẩm tương đối ngắn hơn so với các ngôn ngữ khác nên PHP đã nhanh chóng trở thành một ngôn ngữ lập trình web phổ biến PHP được sử dụng trong Website là công nghệ được thiết kế bởi Rasmus Lerdorf, nhà phát triển The PHP Group, phiên bản sử dụng là PHP 7.3.0 và được sử dụng cho Back-end

1.2 Hệ quản trị cơ sở dữ liệu MYSQL

Hình 1.4 Icon MySQL

Trang 24

MySQL là một hệ thống quản trị cơ sở dữ liệu quan hệ (RDBMS) hoạt động theo mô hình client-server RDBMS là một phần mềm hay dịch vụ dùng để tạo và quản lý các cơ sở dữ liệu (Database) theo hình thức quản lý các mối liên hệ giữa chúng

MySQL là hệ quản trị cơ sở dữ liệu tự do nguồn mở phổ biến nhất thế giới và được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng Vì MySQL là hệ quản trị cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển, 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 Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cập cơ sở dữ liệu trên internet

1.3 Frameword và thư viện hổ trợ 1.3.1 Giới thiệu Laravel Framework

Hình 1.5 Icon Laravel

Laravel là một PHP framework mã nguồn mở và miễn phí, được phát triển bởi Taylor Otwell và nhắm vào mục tiêu hỗ trợ phát triển các ứng dụng web theo kiếm 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 , sử dụng hệ thống đóng gói module, quản lý package (Composer), hỗ trợ nhiều hệ quản trị CSDL quan hệ (MySQL, SQLite, PostgeSQL…)

Ưu điểm: - Sử dụng các tính năng mới nhất của PHP - Nguồn tài nguyên vô cùng lớn và sẵn có - Tích hợp với dịch vụ mail

- Tốc độ xử lý nhanh - Dễ sử dụng

- Tính bảo mật cao

Trang 25

1.3.2 Thư viện Jquery

Hình 1.6 Icon Jquery

Jquery chính là một thư viện của JavaScript giúp đơn giản hóa cách viết Javascript và tăng tốc độ xử lý các sự kiện trên trang web Jquery thêm tính năng tương tác Ajax vào trong trang web Jquery được thiết kế để thay đổi cách viết mới cho Javascript

Jquery được sử dụng trong Website là công nghệ được thiết kế bở John Resig, phát triển bởi jQuery Team được sử dụng cho Back-end

1.3.3 Thư viện Chart.Js

Hình 1.7 Hình ảnh sơ đồ trong Chart.JS

Chart.js là thư viện JavaScript mã nguồn mở đơn giản, dễ dàng thiết lập và tùy chỉnh Nó cung cấp nhiều thiết kế mặt phẳng cho biểu đồ như biểu đồ đường thẳng, biểu đồ bong bóng…

Chart.js được sử dụng trong Website là công nghệ phiên bản sử dụng là 2.0 và được sử dụng cho Front-end

Trang 26

1.3.4 Thư viện Boostrap

Hình 1.8 Icon Bootstrap

Bootstrap là 1 framework HTML, CSS, và JavaScript cho phép người dùng dễ dàng thiết kế website theo 1 chuẩn nhất định, tạo các website thân thiện với các thiết bị cầm tay như mobile, ipad, tablet,

Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và công cụ dùng để tạo ra một mẫu webiste hoàn chỉnh Với các thuộc tính về giao diện được quy định sẵn như kích thước, màu sắc, độ cao, độ rộng…, các designer có thể sáng tạo nhiều sản phẩm mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc với framework này trong quá trình thiết kế giao diện website

1.4 Công cụ hổ trợ xây dựng hệ thống 1.4.1 Visual Studio Code

Hình 1.9 Ảnh minh hoạ Visual Studio Code

Visual Studio Code được biết đến là một trình biên tập lập trình code miễn phí dành cho Windows, Linux và macOS Nó được phát triển bởi Microsoft là sự kết hợp hoàn

Trang 27

hảo giữa IDE và Code Editor Trình biên tập này được hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting, tự hoàn thành mã thông minh, snippets, cùng đó là cải tiến mã nguồn Ngoài ra, Visual Studio Code còn cho phép người dùng thay đổi theme, phím tắt, và các tùy chọn khác

Những ưu điểm nổi bật của Visual Studio Code: - Đa dạng ngôn ngữ lập trình giúp bạn thỏa sức sáng tạo như HTML, CSS,

JavaScript, C++, … - Ngôn ngữ, giao diện tối giản, tinh tế, giúp người dùng dễ dàng định hình nội

dung - Các tiện ích mở rộng đa dạng, phong phú - Tích hợp các tính năng bảo mật (Git), tăng tốc xử lý vòng lặp (Debug),… - Có thể đơn giản trong việc tìm quản lý hết tất cả các Code có trên hệ thống

1.4.2 XAMPP

Hình 1.10 Ảnh minh hoạ Xampp

Xampp là một phần mềm cho phép giải lập môi trường server hosting ngay trên máy tính của bạn, cho phép bạn chạy demo website mà không cần phải mua hosting hay VPS Chính vì vậy, Xampp hay được phục vụ cho hoạt động học tập giảng dạy thự hành và phát triển web

Xampp được viết tắt của X + Apache + MySQL + PHP + Perl vì nó được tích hợp sẵn Apache, MySQL, PHP, FTP Server, Mail Server Còn X thể hiện cho sự đa nền tảng

Trang 28

của Xampp vì nó có thể dùng được cho 4 hệ điều hành khác nhau: Windows, MacOS, Linus và Solaris

1.5 Lý thuyết xây dựng web

Mô hình hoạt động MVC (Server Side Rendering): - Người dùng gửi yêu cầu (HTTP Request) qua một trình duyệt web bất kỳ Yêu

cầu này có thể kèm theo những dữ liệu tới Controller xử lý Bộ Routing điều hướng sẽ xác định Controller xử lý

- Khi Controller nhận được yêu cầu, nó sẽ kiểm tra yêu cầu đó có cần dữ liệu từ Model hay không Nếu có sẽ dùng các class/function trong Model sau đó trả ra kết quả Khi đó, Controller cũng sẽ xử lý các giá trị đó và trả ra view để hiển thị Controller sẽ xác định các View tương ứng và hiển thị đúng theo yêu cầu - Khi View nhận được giá trị từ Controller, chúng sẽ xây dựng các thành phần hiển

thị như hình ảnh, thông tin dữ liệu, … rồi trả về GUI content để Controller đưa ra kết quả và hiển thị lên màn hình Browser

- Browser sẽ nhận được giá trị trả về và hiển thị với người dùng và kết thúc quá trình hoạt động

Hình 1.11 Ảnh minh họa mô hình MVC

Trang 29

Chương 2

PHÂN TÍCH THIẾT KẾ HỆ THỐNG

2.1 Tác nhân

- Khách vãng lai - Khách hàng - Quản trị viên

2.2 Đặc tả và yêu cầu nghiệp vụ 2.2.1 Khách vãng lai

Có thể tìm kiếm, xem thông tin giày, xem các thông tin của website và đăng ký tài khoản

2.2.2 Khách hàng

Khách hàng kế thừa những chức năng của khách vãng lai Đồng thời có thêm các chức năng như cập nhật thông tin tài khoản cá nhân, thanh toán giỏ hàng, theo dõi tình trạng đơn hàng, xem danh sách đơn hàng đã mua, bình luận và đánh giá giày sau khi mua

2.2.3 Quản trị viên

Quản trị viên có thể thực hiện tất cả các chức năng của các actor khác Đồng thời quản lý tất cả các thông tin của hệ thống

2.3 Đặc tả yêu cầu phần mềm 2.3.1 Khách vãng lai

- Đăng kí - Xem và tìm kiếm thông tin sản phẩm theo giá, theo danh mục, theo size, theo

Trang 30

- Xem lịch sử mua hàng

2.3.3 Quản trị viên

- Đăng nhập - Cập nhật danh mục sản phẩm - Cập nhật sản phẩm

- Quản lý đơn hàng - Tìm kiếm sản phẩm, danh mục sản phẩm, hóa đơn - Báo cáo thống kê doanh thu

- Báo cáo thống kê số lượng theo size, màu

2.4 Sơ đồ usecase

Hình 2.1 Sơ đồ Usecase

2.5 Kịch bản cho Usecase 2.5.1 Khách vãng lai

2.5.1.1 Đăng ký tài khoản

STT Use case name Đăng ký tài khoản

Trang 31

1 Description Actor đăng ký tài khoản thành viên của hệ thống 2 Actor Khách vãng lai

3 Input Khách vãng lai truy cập vào hệ thống, chưa có tài khoản

thành viên 4 Output Đăng ký tài khoản thành công

5 Basic flow

1) Bắt đầu use case 2) Khách vãng lai chọn đăng ký tài khoản 3) Khách vãng lai nhập thông tin như tên tài khoản, email, số điện thoại, mật khẩu và nhấn nút đăng ký

4) Kết thúc use case 6 Alternative flow Không có

7 Exception flow (Nêu các trường hợp ngoại lệ của Basic flow)

3’) Hệ thống thông báo nếu email hoặc số điện thoại đã được sử dụng

Bảng 2.1 Kịch bản usecase đăng ký

2.5.1.2 Xem thông tin giày

STT Use case name Xem thông tin giày 1 Description Actor xem thông tin của giày như tên giày, hãng, giá tiền 2 Actor Khách vãng lai

3 Input Khách vãng lai truy cập vào hệ thống 4 Output Thông tin về giày được hiển thị

5 Basic flow

1) Bắt đầu use case 2) Khách vãng lai nhấn chuột vào giày muốn xem thông tin

3) Thông tin của giày được hiển thị 4) Kết thúc use case

6 Alternative flow Không có 7 Exception flow Không có

Bảng 2.2 Kịch bản usecase xem thông tin giày

2.5.1.3 Tìm kiếm thông tin giày

STT Use case name Tìm kiếm giày 1 Description Actor tìm kiếm giày mong muốn

Trang 32

2 Actor Khách vãng lai 3 Input Khách vãng lai truy cập vào hệ thống 4 Output Giày cần tìm được hiển thị

5 Basic flow

1) Bắt đầu use case 2) Actor nhập từ khoá sau đó bấm tìm kiếm 3) Giày liên quan đến từ khóa sẽ hiển thị 4) Kết thúc use case

6 Alternative flow Actor muốn tìm giày theo danh mục, giá, size, màu:

2’) Chọn danh mục, giá, size, màu mong muốn 7 Exception flow 3’) Không có giày nào liên quan đến từ khóa

Bảng 2.3 Kịch bản usecase xem thông tin giày

2.5.2 Khách hàng

2.5.2.1 Đăng nhập trang người dùng

STT Use case name Đăng nhập 1 Description Actor đã có tài khoản có thể đăng nhập 2 Actor Khách hàng

3 Input Khách hàng truy cập vào hệ thống 4 Output Khách hàng đăng nhập thành công

5 Basic flow

1) Bắt đầu use case 2) Khách hàng chọn đăng nhập 3) Khách hàng nhập tài khoản và mật khẩu sau đó nhấn nút đăng nhập

4) Kết thúc use case 6 Alternative flow Không có

7 Exception flow 3’) Thông báo lỗi nếu tài khoản hoặc mật khẩu không

đúng

Bảng 2.4 Kịch bản usecase đăng nhập trang người dùng

2.5.2.2 Cập nhật thông tin tài khoản

STT Use case name Cập nhật thông tin tài khoản 1 Description Actor chỉnh sửa thông tin tài khoản 2 Actor Khách hàng

3 Input Khách hàng đăng nhập thành công 4 Output Khách hàng chỉnh sửa thông tin thành công