xây dựng website tư vấn chọn giày bóng đá

Điều này có nghĩa là việc xây dựng các hệ thống hỗ trợ quản lý kinh doanh trên mạng là điều không thể không làm, trong đó có hệ thống tư vấn chọn giày bóng đá Hệ thống tư vấn chọn giày b

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

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

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

TÓM TẮT

Tên đề tài: Xây dựng website tư vấn chọn giày bóng đá Sinh viên thực hiện: Phan Hữu Tường

Mã SV: 1911505310160 Lớp: 19T1 Nội dung tóm tắt:

Đề tài cung cấp cho khách hàng một trải nghiệm mua giày bóng đá đơn giản và tiện lợi, giúp họ chọn mua những đôi giày bóng đá phù hợp với nhu cầu của bản thân Website bao gồm những chức năng chính như:

- Tạo tài khoản - Xem sản phẩm - Tìm kiếm - lọc sản phẩm - Cập nhật giỏ hàng

- Thanh toán online hoặc trả sau - Bình luận, đánh giá đơn hàng Về phía cửa hàng, website giúp cửa hàng dễ dàng quản lý và chủ động hơn với các chức năng chính như:

- Quản lý sản phẩm - Quản lý danh mục - Quản lý bài viết - Quản lý đơn hàng - Quản lý tài khoản người dùng - Xem thống kê

Ngoài ra, Website còn tích hợp chức năng tư vấn chọn size giày dựa trên thông tin về chiều dài và chiều rộng của bàn chân mà khách hàng nhập vào, từ đó website sẽ gợi ý cho khách hàng size giày phù hợp để tham khảo Bên cạnh đó là công cụ hỗ trợ nhắn tin trực tuyến thời gian thực (live chat) sẽ giúp người dùng nhanh chóng giải quyết vấn đề cũng như tăng sự tin tưởng đối với cửa hàng

Giảng viên hướng dẫn: ThS Nguyễn Thị Hà Quyên Sinh viên thực hiện: Phan Hữu Tường Mã SV: 1911505310160

1 Tên đề tài: Xây dựng website tư vấn chọn giày bóng đá 2 Các số liệu, tài liệu ban đầu:

- Tài liệu: https://laravel.com/docs/10.x https://php.net/docs.php

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

1 Mục tiêu đề tài 2 Đối tượng và phạm vi nghiên cứu 3 Phương pháp nghiên cứu

4 Giải pháp công nghệ 5 Cấu trúc đồ án

Chương 1: Cơ sở lý thuyết

1 Tổng quan về ngôn ngữ lập trình 2 Hệ quản trị cơ sở dữ liệu

3 Framework và thư viện hỗ trợ 4 Mô hình MVC

Chương 2: Phân tích thiết kế hệ thống

1 Khảo sát yêu cầu 2 Phân tích thiết kế hệ thống 3 Sơ đồ Usecase

4 Thiết kế ERD 5 Thiết kế các bảng dữ liệu 6 Kịch bản và sơ đồ hoạt động

Chương 3: Xây dựng chương trình

1 Công cụ xây dựng chương trình 2 Giao diện chương trình

Kết luận và hướng phát triển

1 Kết luận 2 Hướng phát triển

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

- Website tư vấn chọ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

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 interernet 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 Điều này có nghĩa là việc xây dựng các hệ thống hỗ trợ quản lý kinh doanh trên mạng là điều không thể không làm, trong đó có hệ thống tư vấn chọn giày bóng đá

Hệ thống tư vấn chọn giày bóng sẽ giúp tất cả mọi người dùng internet đều có thể ngồi trước máy tính hoặc điện thoại của mình truy cập vào trang web để xem, tìm kiếm thông tin một cách trực quan và có thể mua giày mà không phải đến cửa hàng Từ đó, đề tài "XÂY DỰNG WEBSITE CHỌN GIÀY BÓNG ĐÁ" ra đời 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 wesite đều có thể xem, tra cứu, tư vấn chọn đúng size, đăng ký 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 Ngoài ra khách hàng có thể gửi thư góp ý hay thắc mắc tới của hàng

ii

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

Đồng thời, tôi cũng xin chân thành cảm ơn quý thầy cô thuộc Khoa Công Nghệ Số 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 tôi trong suốt thời gian trên giảng đường để có thể 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 rất mong quý thầy, cô thông cảm và góp ý để tôi có thể hoàn thiện đề tài Quan trọng hơn là, những lời góp ý đó có thể giúp tôi tránh được những sai lầm sau này

Tôi xin chân thành cảm ơn!

CAM ĐOAN

Tôi xin cam đoan đồ án “Xây dựng website tư vấn chọ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 ThS Nguyễn Thị Hà Quyên 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à tôi đã 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, tôi 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

Phan Hữu Tường

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

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

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

1.3 Framework và thư viện hỗ trợ 9

1.3.1 Giới thiệu Laravel Framework 9

1.3.2 Thư viện Jquery 11

1.3.3 Thư viện Chart.js 12

1.3.4 Thư viện Bootstrap 13

1.4 Mô hình MVC 15

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

2.1 Khảo sát yêu cầu 17

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

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

3.1.1 Sublime Text 36

3.1.2 Visual Studio Code 37

3.1.3 Xampp 39

3.2 Giao diện chương trình 41

3.2.1 Giao diện trang chủ 41

3.2.2 Đăng ký tài khoản 42

3.2.8 Thanh toán đơn hàng 45

3.2.9 Thanh toán online 45

3.2.22 Quản lý tài khoản người dùng 52

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

1 Kết luận 53

2 Hướng phát triển 53

TÀI LIỆU THAM KHẢO 54

Bảng 2-25 Kịch bản Cập nhật thông tin tài khoản 28

Bảng 2-26 Kịch bản Thanh toán giỏ hàng 29

Bảng 2-27 Kịch bản Xem đơn hàng đã mua 30

Bảng 2-28 Kịch bản Theo dõi thông tin đơn hàng 31

Bảng 2-29 Kịch bản Bình luận đánh giá đơn hàng 31

viii

Bảng 2-30 Kịch bản Quản lý sản phẩm 32

Bảng 2-31 Kịch bản Quản lý nhập kho 32

Bảng 2-32 Kịch bản Quản lý đơn hàng 33

Bảng 2-33 Kịch bản Quản lý tài khoản 33

Bảng 2-34 Kịch bản Xem thống kê, báo cáo 34

Hình 1.5 Tổng quan về hệ quản trị CSDL MySQL 8

Hình 1.6 Tổng quan về Framework Laravel 9

Hình 1.7 Tổng quan về thư viện jQuery 11

Hình 1.8 Hình ảnh sơ đồ trong Chart.js 12

Hình 1.9 Tổng quan về thư viện Bootstrap 14

Hình 1.10 Ảnh minh hoạ mô hình MVC 15

Hình 2.1 Sơ đồ nghiệp vụ của hệ thống 17

Hình 2.2 Sơ đồ Usecase 19

Hình 2.3 Sơ đồ ERD 20

Hình 3.1 Tổng quan về công cụ Sublime Text 36

Hình 3.2 Ảnh minh họa Visual Studio Code 38

Hình 3.3 Ảnh minh họa Xampp 39

Hình 3.4 Giao diện Trang chủ 41

Hình 3.5 Giao diện Đăng ký tài khoản 42

Hình 3.6 Giao diện Đăng nhập 42

Hình 3.7 Giao diện Tư vấn size giày 43

Hình 3.8 Giao diện Thêm vào giỏ hàng 43

Hình 3.9 Giao diện Cập nhật giỏ hàng 44

Hình 3.10 Giao diện Vượt tồn kho 44

Hình 3.11 Giao diện Thanh toán đơn hàng 45

Hình 3.12 Giao diện Thanh toán Online 45

Hình 3.13 Giao diện xem đơn hàng 46

Hình 3.14 Giao diện Xem chi tiết đơn hàng 46

Hình 3.15 Giao diện Đánh giá đơn hàng 47

Hình 3.16 Giao diện Trang chủ Admin 47

x

Hình 3.17 Giao diện Quản lý sản phầm (Admin) 48

Hình 3.18 Giao diện Thêm sản phẩm (Admin) 48

Hình 3.19 Giao diện Thùng rác (sản phẩm)(Admin) 49

Hình 3.20 Giao diện Quản lý nhập kho(Admin) 49

Hình 3.21 Giao diện Thêm đơn nhập (Admin) 50

Hình 3.22 Giao diện Xem chi tiết đơn nhập(Admin) 50

Hình 3.23 In hoá đơn (Admin) 51

Hình 3.24 Giao diện Quản lý đơn dùng (admin) 51

Hình 3.25 Giao diện Quản lý tài khoản sử dụng (Admin) 52

MỞ ĐẦU

Cùng với sự phát triển của môn thể thao vua và thương mại điện tử, nhu cầu tìm kiếm cũng như mua bán mặt hàng giày bóng đá ngày càng trở nên phổ biến Bên cạnh đó, đặc thù của đôi giày bóng đá là phải vừa dạng chân của từng người Ngoài những mô tả về chất liệu, màu sắc thì việc biết được kích cỡ chân của mình phù hợp với size giày nào và loại giày nào là sự cản trở của mua giày trực tuyến

Vì vậy, một trang web tư vấn với giao diện thân thiện và đầy đủ tính năng giúp giải quyết được những nhu cầu của người dùng là thực sự cần thiết

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

Xây dựng website bán giày bóng đá online phục vụ chủ yếu cho các đối tượng: Quản trị viên và Khách hàng của trang web Do đó hệ thống được tạo ra với các mục đích chính:

- Giúp cho khách hàng xem được sản phẩm của website và mua món hàng mình thích

- Giúp cho khách hàng có thể tìm kiếm, lựa chọn các loại giày theo nhu cầu và tìm hiểu về thông tin của chúng

- Tư vấn cho khách hàng về size chân và form giày để có đưa ra quyết định đúng hơn, giúp hạn chế tình trạng đổi trả hàng

- Giúp khách hàng có thể đa dạng thanh toán bằng trực tuyến hoặc trực tiếp - Giúp quản trị viên có thể quản lý người dùng và các sản phẩm của website

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

- Các chủ shop thể thao và bán hàng giày online - Người dùng có nhu cầu mua giày bóng đá

b Phạm vi nghiên cứu

Các cửa hàng hoặc cá nhân muốn bán hàng online có quy mô vừa và nhỏ

Xây dựng website tư vấn chọn giày bóng đá

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

- Phân tích tổng hợp từ nguồn tài liệu trên mạng về thông tin cần tư vấn khi chọn giày gồm: Thương hiệu, size giày, form giày, chất liệu, trải nghiệm người dùng khác…

- Trải nghiệm các trang bán giày online như: nike.com, adidas.com.vn, htsport.com.vn, thanhhungfutsal.com, …

- Tham khảo thông tin liên quan đến nghiệp vụ quản lý shop bán giày - Tìm hiểu về công cụ hỗ trợ lập trình và cách sử dụng

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

- Hệ quản trị CSDL: MySQL - Ngôn ngữ lập trình: HTML, CSS, JavaScript, PHP - Thư viện: Framework Laravel, Bootstrap, Jquery, Chart.js

5 Cấu trúc đồ án Mở đầu Chương 1: Cơ sở lý thuyết

Chương này Trình bày cơ sở lý thuyết bao gồm tính cấp thiết của đề tài và mô tả các công nghệ được sử dụng

Chương 2: Phân tích thiết kế hệ thống

Chương này tập trung vào trình bày và giải thích chi tiết về ý tưởng, tổng quan về hệ thống, các sơ đồ giải thích chi tiết về hệ thống

Chương 3: Xây dựng chương trình

Chương này trình bày chi tiết từ cài đặt các chương trình, thư viện, … cần sử dụng và quá trình thực hiện Từ đó trình bày kết quả đạt được và đưa ra đánh giá sơ bộ

Kết luận và hướng phát triển

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

HTML (Hypertext Markup Language) là ngôn ngữ đánh dấu tiêu chuẩn sử dụng để xây dựng và cấu trúc các trang web HTML sử dụng các thẻ (tags) để định dạng và mô tả nội dung trên trang web, cho phép trình duyệt hiểu và hiển thị nội dung một cách đúng đắn

HTML giúp bạn tạo ra các thành phần trên trang web như tiêu đề, đoạn văn bản, hình ảnh, liên kết, bảng, biểu đồ và nhiều hơn nữa Bằng cách sử dụng các thẻ và thuộc tính của HTML, bạn có thể điều chỉnh cấu trúc và hiển thị của nội dung trên trình duyệt web

Hình 1.1 Tổng quan về HTML

Ngôn ngữ HTML dễ học và sử dụng, vì nó có cú pháp đơn giản và tương đối tự nhiên Bạn chỉ cần viết mã HTML bằng một trình soạn thảo văn bản thông thường, sau đó lưu file dưới định dạng ".html" và mở nó trên trình duyệt web để xem kết quả

HTML cũng là ngôn ngữ căn bản để kết hợp với CSS (Cascading Style Sheets) và JavaScript để tạo ra các trang web đẹp mắt và tương tác CSS sẽ giúp bạn điều chỉnh kiểu dáng và giao diện của trang web, trong khi JavaScript cho phép bạn thêm tính năng động và tương tác cho trang

Xây dựng website tư vấn chọn giày bóng đá

Với HTML, bạn có thể xây dựng các trang web tĩnh đơn giản hoặc các ứng dụng web phức tạp Nó là một công cụ quan trọng và cơ bản cho việc phát triển web, và là điểm khởi đầu tuyệt vời cho bất kỳ ai quan tâm đến việc xây dựng trang web

1.1.2 CSS

CSS (Cascading Style Sheets) là ngôn ngữ định dạng và trình bày (styling) được sử dụng để điều chỉnh giao diện và kiểu dáng của các trang web Với CSS, bạn có thể thay đổi màu sắc, font chữ, kích thước, vị trí và các thuộc tính khác của các phần tử HTML trên trang web

Hình 1.2 Tổng quan về CSS

CSS hoạt động bằng cách chọn các phần tử HTML thông qua các lựa chọn (selectors) và áp dụng các thuộc tính (properties) cho các phần tử đó Bằng cách viết các quy tắc CSS, bạn có thể xác định cách một phần tử hoặc nhóm phần tử sẽ được hiển thị trên trang web CSS cung cấp nhiều thuộc tính khác nhau để tùy chỉnh giao diện, bao gồm:

- Màu sắc và nền: Bạn có thể thiết lập màu sắc văn bản, nền, đường viền và nhiều phần tử khác trên trang

- Font chữ: CSS cho phép bạn điều chỉnh kiểu, kích thước, độ dày và nhiều thuộc tính khác của font chữ trên trang web

- Định dạng văn bản: Bạn có thể điều chỉnh căn chỉnh, khoảng cách dòng, định dạng liên kết và các thuộc tính khác của văn bản

- Bố cục và kích thước: CSS cho phép bạn điều chỉnh kích thước, vị trí và bố cục của các phần tử trên trang web, bao gồm cả định dạng theo cột (layout) và phản hồi (responsive design)

- Hiệu ứng và chuyển động: CSS cung cấp các thuộc tính để tạo hiệu ứng và chuyển động như chuyển đổi, hiện/ẩn, động và chuyển động quay

CSS có thể được sử dụng bên trong các tệp HTML hoặc được lưu thành các tệp riêng biệt (.css) để tách biệt giữa nội dung và kiểu dáng Nó cũng hỗ trợ các khối và lớp (class) để áp dụng kiểu dáng cho nhiều phần tử cùng một lúc

Với CSS, bạn có thể tạo ra trang web có giao diện đẹp, tùy chỉnh và linh hoạt Nó là một công cụ quan trọng trong việc phát triển web và là một phần không thể thiếu của quá trình xây dựng một trang web chuyên nghiệp và hấp dẫn

1.1.3 JavaScript

JavaScript là một ngôn ngữ lập trình phía máy khách (client-side) phổ biến trong phát triển web Nó được sử dụng để tạo ra các hiệu ứng động, tương tác người dùng và thay đổi nội dung trên trang web mà không cần phải tải lại trang

Xây dựng website tư vấn chọn giày bóng đá

- Tương tác người dùng: JavaScript cho phép bạn tạo ra các tương tác người dùng động trên trang web, chẳng hạn như hiển thị hộp thoại cảnh báo, xác nhận hoặc yêu cầu người dùng nhập dữ liệu Bạn có thể kiểm tra và xử lý các sự kiện người dùng như nhấp chuột, gõ phím và di chuột, và thực hiện các hành động tương ứng

- Hiệu ứng và động học trên trang web: JavaScript cho phép bạn tạo ra các hiệu ứng động như di chuyển, thay đổi kích thước, mờ dần và đổi màu trên các phần tử trên trang web Bạn có thể tạo ra các hiệu ứng động tuyệt đẹp và tùy chỉnh theo ý muốn để làm cho trang web trở nên sống động và hấp dẫn hơn

- Thay đổi nội dung trang web: JavaScript cho phép bạn thay đổi nội dung trên trang web mà không cần phải tải lại trang Bạn có thể thêm, xóa, sửa đổi và thay đổi các phần tử HTML, CSS và nội dung văn bản trực tiếp từ mã JavaScript

- Tương tác với dịch vụ web và API: JavaScript cung cấp các công cụ và thư viện để tương tác với dịch vụ web và API bên ngoài Bạn có thể gửi và nhận dữ liệu từ máy chủ, gọi API và xử lý dữ liệu JSON

JavaScript là một ngôn ngữ lập trình mạnh mẽ và linh hoạt, được sử dụng rộng rãi trong việc phát triển ứng dụng web Nó giúp tạo ra các trang web tương tác, đáp ứng và động hơn, mang lại trải nghiệm người dùng tốt hơn

1.1.4 PHP

PHP là ngôn ngữ lập trình phía máy chủ (server-side scripting language) được sử dụng rộng rãi trong việc phát triển ứng dụng web động Với PHP, bạn có thể tạo ra các trang web tương tác, xử lý dữ liệu, tương tác với cơ sở dữ liệu và thực hiện nhiều chức năng phức tạp khác trên phía máy chủ

Dưới đây là một số đặc điểm quan trọng của PHP: - Động: PHP cho phép bạn tạo ra các trang web động, tức là nội dung trên

trang web có thể được tạo ra và thay đổi dựa trên dữ liệu và các yêu cầu từ người dùng

- Tương tác với cơ sở dữ liệu: PHP có thể kết nối và tương tác với các hệ quản trị cơ sở dữ liệu như MySQL, PostgreSQL, Oracle và nhiều

hệ quản trị dữ liệu khác Điều này cho phép bạn lưu trữ, truy xuất và xử lý dữ liệu từ cơ sở dữ liệu

- Xử lý biểu mẫu: PHP là một công cụ mạnh mẽ để xử lý dữ liệu được gửi từ biểu mẫu trên trang web Bạn có thể kiểm tra, xác thực và lưu trữ thông tin nhập liệu từ người dùng

- Tạo và xử lý tệp tin: PHP cho phép bạn tạo, đọc, ghi và xóa các tệp tin trên máy chủ Điều này rất hữu ích khi làm việc với các tệp tin như hình ảnh, tệp tin văn bản, tệp tin cấu hình và nhiều loại tệp tin khác

- Tích hợp với HTML và CSS: PHP có thể được nhúng vào trong mã HTML, giúp bạn tạo ra các trang web động và tương tác một cách dễ dàng Bạn có thể tạo ra đoạn mã PHP để xử lý dữ liệu và sau đó nhúng kết quả vào trong mã HTML để hiển thị lên trình duyệt

PHP là một ngôn ngữ lập trình mạnh mẽ, dễ học và có sự hỗ trợ rộng rãi từ cộng đồng phát triển Nó được sử dụng phổ biến trong việc xây dựng các ứng dụng web đa dạng, từ các trang web cá nhân đơn giản cho đến các ứng dụng web phức tạp và hệ thống quản lý nội dung (CMS)

Hình 1.4 Ví dụ về 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

Xây dựng website tư vấn chọn giày bóng đá

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

MySQL là một hệ quản trị cơ sở dữ liệu quan hệ mã nguồn mở (open-source relational database management system - RDBMS) Nó là một công cụ phổ biến và mạnh mẽ được sử dụng rộng rãi trong việc lưu trữ, truy xuất và quản lý cơ sở dữ liệu

Hình 1.5 Tổng quan về hệ quản trị CSDL MySQL

Dưới đây là một số đặc điểm quan trọng của MySQL: - Quản lý cơ sở dữ liệu: MySQL cho phép bạn tạo, sửa đổi và quản lý các

cơ sở dữ liệu Bạn có thể tạo bảng, chỉnh sửa cấu trúc, thêm, xóa và cập nhật dữ liệu trong cơ sở dữ liệu

- Ngôn ngữ truy vấn: MySQL sử dụng ngôn ngữ truy vấn SQL (Structured Query Language) để truy xuất và thao tác dữ liệu Với SQL, bạn có thể thực hiện các truy vấn phức tạp như SELECT, INSERT, UPDATE và DELETE để truy xuất và xử lý dữ liệu

- Tính toàn vẹn dữ liệu: MySQL hỗ trợ các ràng buộc (constraints) và quan hệ giữa các bảng, giúp đảm bảo tính toàn vẹn dữ liệu trong cơ sở dữ liệu Bạn có thể thiết lập khóa chính, ràng buộc duy nhất và ràng buộc ngoại để bảo đảm tính nhất quán và hợp lý của dữ liệu

- Hiệu suất cao: MySQL được tối ưu hóa để cung cấp hiệu suất cao và khả năng xử lý tốt cho các ứng dụng web Nó hỗ trợ các kỹ thuật tối ưu hóa truy vấn, chính sách lưu trữ và quản lý bộ nhớ cache để đảm bảo tốc độ truy xuất dữ liệu tối ưu

- Độ tin cậy và bảo mật: MySQL cung cấp các tính năng bảo mật như phân quyền người dùng, mã hóa dữ liệu và khả năng sao lưu và phục hồi dữ liệu để đảm bảo an toàn và độ tin cậy của hệ thống cơ sở dữ liệu

MySQL được sử dụng rộng rãi trong việc phát triển ứng dụng web và hệ thống quản lý dữ liệu Nó là một công cụ mạnh mẽ để lưu trữ và quản lý dữ liệu, và có sự hỗ trợ rộng rãi từ cộng đồng phát triển và cung cấp nhiều công cụ hỗ trợ phát triển và quản lý

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 Framework và thư viện hỗ trợ 1.3.1 Giới thiệu Laravel Framework

Laravel là một framework phát triển ứng dụng web mã nguồn mở, được xây dựng bằng ngôn ngữ PHP Nó cung cấp một cấu trúc phát triển mạnh mẽ và linh hoạt, giúp bạn xây dựng các ứng dụng web chất lượng cao một cách nhanh chóng và dễ dàng

Hình 1.6 Tổng quan về Framework Laravel

Xây dựng website tư vấn chọn giày bóng đá

Dưới đây là một số đặc điểm và lợi ích của Laravel: - Cấu trúc MVC: Laravel tuân theo mô hình MVC (Model-View-Controller),

giúp tách biệt logic ứng dụng, giao diện người dùng và xử lý cơ sở dữ liệu Điều này giúp tổ chức mã nguồn dễ dàng và giảm bớt sự phụ thuộc giữa các thành phần

- Tích hợp ORM: Laravel cung cấp Eloquent ORM, một công cụ mạnh mẽ để làm việc với cơ sở dữ liệu Eloquent cho phép bạn thực hiện các thao tác CRUD (Create, Read, Update, Delete) một cách dễ dàng và tự nhiên, và cung cấp các quan hệ giữa các bảng trong cơ sở dữ liệu

- Hệ thống định tuyến linh hoạt: Laravel cung cấp một hệ thống định tuyến mạnh mẽ, cho phép bạn định nghĩa các tuyến (routes) và xử lý các yêu cầu từ người dùng Điều này giúp bạn xây dựng các URL thân thiện và dễ quản lý các chức năng của ứng dụng

- Tích hợp thư viện và gói mở rộng: Laravel hỗ trợ tích hợp dễ dàng với các thư viện và gói mở rộng bên thứ ba Bạn có thể sử dụng Composer để quản lý các phụ thuộc và cài đặt các gói mở rộng từ cộng đồng Laravel, giúp bạn tiết kiệm thời gian và tăng tính mở rộng của ứng dụng

- Bảo mật và xác thực: Laravel cung cấp các công cụ mạnh mẽ để xác thực người dùng và bảo vệ ứng dụng khỏi các cuộc tấn công Nó hỗ trợ xác thực dựa trên phiên (session), CSRF (Cross-Site Request Forgery) và mã hóa dữ liệu

- Giao diện người dùng đẹp và linh hoạt: Laravel hỗ trợ Blade, một ngôn ngữ mẫu linh hoạt giúp bạn xây dựng giao diện người dùng đẹp mắt và dễ quản lý Nó cũng cung cấp các tiện ích để tạo biểu mẫu, xử lý yêu cầu AJAX và quản lý tài nguyên tĩnh

Laravel là một framework mạnh mẽ và phổ biến trong việc phát triển ứng dụng web Với cú pháp đơn giản, các tính năng tiện ích và cộng đồng phát triển sôi nổi, Laravel là lựa chọn tuyệt vời cho việc xây dựng ứng dụng web hiệu quả và linh hoạt

1.3.2 Thư viện Jquery

jQuery là một thư viện JavaScript mã nguồn mở phổ biến được sử dụng rộng rãi trong phát triển ứng dụng web Nó giúp đơn giản hóa việc tương tác với HTML, xử lý sự kiện, thao tác trên DOM và tạo hiệu ứng động trên trang web

Hình 1.7 Tổng quan về thư viện jQuery

Dưới đây là một số đặc điểm và lợi ích của jQuery: - Tương tác với DOM: jQuery cung cấp một cú pháp đơn giản và linh hoạt

để chọn và tương tác với các phần tử HTML trên trang web Bằng cách sử dụng các chọn lọc, bạn có thể dễ dàng thao tác với các phần tử, thay đổi nội dung, thuộc tính, và thậm chí xử lý các sự kiện như click, hover và submit

- AJAX: jQuery cung cấp các phương thức đơn giản để thực hiện các yêu cầu AJAX (Asynchronous JavaScript and XML) Bạn có thể tải dữ liệu từ máy chủ mà không cần tải lại trang hoặc gửi dữ liệu đến máy chủ một cách bất đồng bộ, giúp tạo ra các ứng dụng web tương tác mượt mà và nhanh chóng

- Hiệu ứng và hoạt động: jQuery cung cấp các hiệu ứng và hoạt động động để làm cho trang web của bạn thêm sinh động và tương tác Bạn có thể thêm hiệu ứng fade in/out, slide up/down, thay đổi kích thước và vị trí của các phần tử trên trang

- Xử lý sự kiện: jQuery giúp bạn dễ dàng xử lý các sự kiện như click, hover, change và submit Bạn có thể gắn kết các hàm xử lý sự kiện với các phần tử HTML và thực thi mã JavaScript khi sự kiện xảy ra

Xây dựng website tư vấn chọn giày bóng đá

- Tiện ích và plugins: jQuery có một cộng đồng lớn và phong phú, cung cấp các plugin và tiện ích mở rộng để mở rộng chức năng của thư viện Bạn có thể tìm và sử dụng các plugin có sẵn để thực hiện các nhiệm vụ cụ thể như kiểm tra hợp lệ dữ liệu đầu vào, tạo bảng dữ liệu linh hoạt, và thực hiện hiệu ứng đặc biệt

jQuery là một công cụ mạnh mẽ và tiện ích cho việc phát triển ứng dụng web Nó giúp bạn viết mã JavaScript ngắn gọn, dễ đọc và dễ bảo trì, đồng thời cung cấp các tính năng và chức năng mạnh mẽ để tạo ra trải nghiệm người dùng tốt hơn trên trang web của bạn

1.3.3 Thư viện Chart.js

Chart.js là một thư viện JavaScript mã nguồn mở cho phép bạn tạo ra các biểu đồ tương tác đẹp mắt trên trang web Nó cung cấp một cách đơn giản để hiển thị dữ liệu trong các biểu đồ dễ đọc và dễ hiểu

Hình 1.8 Hình ảnh sơ đồ trong Chart.js

Dưới đây là một số đặc điểm và lợi ích của Chart.js: - Dễ sử dụng: Chart.js có một cú pháp dễ hiểu và trực quan, giúp bạn

nhanh chóng tạo ra các biểu đồ Bạn chỉ cần cung cấp dữ liệu và cấu hình cho biểu đồ, sau đó thư viện sẽ tự động vẽ biểu đồ dựa trên các thông số đã được cung cấp

- Đa dạng loại biểu đồ: Chart.js hỗ trợ nhiều loại biểu đồ phổ biến như biểu đồ đường, biểu đồ cột, biểu đồ tròn, biểu đồ vùng và nhiều loại khác

Điều này cho phép bạn hiển thị dữ liệu theo cách phù hợp với nhu cầu và mục đích của bạn

- Tương tác và độ phản hồi: Chart.js cho phép người dùng tương tác với biểu đồ, như di chuột qua để xem giá trị chi tiết, nhấp chuột để chọn các mục trong biểu đồ, hoặc thậm chí kéo thả để thay đổi dữ liệu Điều này giúp cung cấp trải nghiệm người dùng tốt hơn và làm cho biểu đồ trở nên linh hoạt và tương tác

- Tùy chỉnh linh hoạt: Chart.js cho phép bạn tùy chỉnh biểu đồ theo ý muốn Bạn có thể thay đổi màu sắc, font chữ, kích thước và nhiều thuộc tính khác của các thành phần trong biểu đồ Ngoài ra, bạn cũng có thể áp dụng các hiệu ứng động và chuyển đổi cho biểu đồ để tạo ra các hiệu ứng hấp dẫn - Đáng tin cậy và được cập nhật: Chart.js là một thư viện phát triển và duy trì

mạnh mẽ, có sự hỗ trợ đa dạng từ cộng đồng và được cập nhật thường xuyên Điều này đảm bảo rằng bạn có thể tin tưởng và sử dụng Chart.js cho các dự án phát triển web của mình

Chart.js là một công cụ mạnh mẽ để biểu diễn dữ liệu dưới dạng biểu đồ trực quan trên trang web của bạn Với tính năng dễ sử dụng và đa dạng loại biểu đồ, nó giúp bạn tạo ra các biểu đồ tùy chỉnh và tương tác để hiển thị dữ liệu một cách trực quan và dễ hiểu cho người dùng

1.3.4 Thư viện Bootstrap

Bootstrap là một framework front-end phổ biến được sử dụng rộng rãi trong phát triển giao diện người dùng web Nó cung cấp một bộ công cụ và tài nguyên giúp bạn xây dựng giao diện web linh hoạt, đáp ứng và hấp dẫn

Dưới đây là một số đặc điểm và lợi ích của Bootstrap: - Responsive Design: Bootstrap hỗ trợ thiết kế đáp ứng (responsive design),

giúp giao diện web của bạn tự động điều chỉnh và tương thích với các thiết bị và kích thước màn hình khác nhau Điều này giúp đảm bảo trải nghiệm người dùng tốt trên cả desktop, máy tính bảng và điện thoại di động

- Grid System: Bootstrap sử dụng một hệ thống lưới (grid system) linh hoạt, cho phép bạn dễ dàng tạo cột và hàng để điều chỉnh vị trí và kích thước của

Xây dựng website tư vấn chọn giày bóng đá

các phần tử trên trang Điều này giúp bạn tạo ra giao diện web đồng nhất và bố cục hợp lý

- CSS và UI Components: Bootstrap cung cấp một loạt các CSS và UI components sẵn có để bạn sử dụng Các components bao gồm các nút, hộp thoại, biểu mẫu, bảng, thanh điều hướng, carousel và nhiều hơn nữa Bạn có thể sử dụng chúng một cách dễ dàng và tùy chỉnh theo nhu cầu của mình

- Tích hợp JavaScript: Bootstrap đi kèm với các plugin JavaScript tích hợp sẵn như tooltip, modal, scrollspy, tab và nhiều tính năng khác Nhờ đó, bạn có thể thêm các chức năng tương tác và hiệu ứng động vào giao diện web của mình một cách dễ dàng

- Tùy chỉnh linh hoạt: Bootstrap cho phép bạn tùy chỉnh và chỉnh sửa các phần tử theo ý muốn Bạn có thể thay đổi màu sắc, font chữ, kích thước và các thuộc tính khác của các components Ngoài ra, Bootstrap cũng hỗ trợ Sass để bạn có thể tùy chỉnh giao diện web một cách linh hoạt và dễ dàng - Hỗ trợ và cộng đồng: Bootstrap là một framework phổ biến và được hỗ trợ

rộng rãi bởi cộng đồng phát triển Bạn có thể tìm thấy tài liệu, ví dụ và các nguồn tài nguyên trực tuyến phong phú để học và áp dụng Bootstrap vào dự án của mình

Hình 1.9 Tổng quan về thư viện Bootstrap

Bootstrap là một công cụ mạnh mẽ và tiện ích cho việc phát triển giao diện người dùng web Nó giúp bạn nhanh chóng xây dựng giao diện đẹp mắt, tương thích với

nhiều thiết bị và cung cấp các thành phần và tính năng sẵn có để tăng cường trải nghiệm người dùng trên trang web của bạn

1.4 Mô hình MVC

MVC (Model-View-Controller) là một mô hình kiến trúc phần mềm được sử dụng rộng rãi trong phát triển ứng dụng web Nó tách biệt logic xử lý dữ liệu (Model), hiển thị giao diện người dùng (View) và quản lý luồng điều khiển (Controller) thành các thành phần riêng biệt, giúp tăng tính tái sử dụng, khả năng bảo trì và phát triển linh hoạt của ứng dụng

Hình 1.10 Ảnh minh hoạ mô hình MVC

Dưới đây là mô tả ngắn gọn về từng thành phần trong mô hình MVC: - Model (Mô hình): Đại diện cho dữ liệu và logic xử lý dữ liệu trong ứng dụng

Model đảm nhận nhiệm vụ truy xuất, cập nhật và lưu trữ dữ liệu, đồng thời thực hiện các phương thức và quy tắc kinh doanh liên quan Model không có thông tin về giao diện người dùng và không phụ thuộc vào bất kỳ thành phần nào khác trong mô hình

- View (Giao diện người dùng): Đại diện cho hiển thị dữ liệu và tương tác với người dùng View là phần giao diện mà người dùng nhìn thấy và tương tác trực tiếp Nó sẽ trích xuất dữ liệu từ Model để hiển thị và gửi yêu cầu tới Controller khi có sự kiện từ người dùng

Xây dựng website tư vấn chọn giày bóng đá

- Controller (Bộ điều khiển): Điều khiển luồng điều hướng và xử lý yêu cầu của người dùng Controller nhận yêu cầu từ View, tương tác với Model để lấy và cập nhật dữ liệu, sau đó chuyển đổi dữ liệu cho View để hiển thị kết quả cuối cùng cho người dùng Controller chịu trách nhiệm quản lý luồng điều khiển và đảm bảo sự tương tác hợp lý giữa Model và View

Mô hình MVC giúp tách biệt logic xử lý dữ liệu và giao diện người dùng, tạo ra sự phân chia rõ ràng và tăng tính linh hoạt trong phát triển ứng dụng Nó giúp giảm sự phụ thuộc giữa các thành phần và tạo điều kiện cho việc tái sử dụng và kiểm thử dễ dàng Mô hình này đã trở thành một tiêu chuẩn cho việc phát triển ứng dụng web và đã được áp dụng trong nhiều framework và công nghệ phát triển web khác nhau

Chương 2

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

2.1 Khảo sát yêu cầu 2.1.1 Hoạt động nghiệp vụ

Hình 2.1 Sơ đồ nghiệp vụ của hệ thống

2.1.2 Các tác nhân trong website

Hệ thống gồm 04 đối tượng chính sử dụng: - Quản trị viên

- Nhân viên - Khách hàng - Khách vãng lai

2.2 Phân tích thiết kế hệ thống 2.2.1 Liệt kê Actor và Usecase

a Khách vãng lai - Đăng ký - Tìm kiếm sản phẩm - Tư vấn chọn size giày

Xây dựng website tư vấn chọn giày bóng đá

- Xem chi tiết sản phẩm - Cập nhật giỏ hàng - Hỏi đáp thắc mắc (qua live chat) b Khách hàng

- Đăng nhập - Cập nhật thông tin tài khoản - Cập nhập giỏ hàng

- Đặt hàng - Thanh toán - Theo dõi đơn hàng - Đánh giá, bình luận c Nhân viên

- Đăng nhập - Cập nhật thông tin tài khoản - Quản lý bài viết

- Quản lý hình ảnh banner - Xem thông tin đơn hàng d Quản trị viên

- Đăng nhập - Quản lý danh mục - Quản lý sản phẩm - Quản lý người dùng - Xác nhận đơn hàng - Tư vấn, phản hồi thắc mắc - Quản lý đơn hàng

- Thống kê, báo cáo