Báo cáo xây dựng và phân tích website bán hàng giày đá bóng

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. Ý 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. 6. 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)

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

KHOA CÔNG NGHỆ SỐ

ĐỒ ÁN TỐT NGHIỆP

ĐẠI HỌC NGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

ĐỀ TÀI:

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

Sinh viên thực hiện :

Đà Nẵng, ngày tháng năm 2023 Giảng viên hướng dẫn

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

Người phản biện

TÓM TẮT

Tên đề tài: Xây dựng website mua bán giày đá bóng

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

MSV: 1911505310166 Lớp: 19T1

Khách vãng lai sau khi truy cập website thì có thể tìm kiếm giày theo tên giàyhoặ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ántrự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ẽ thanhtoán sau khi nhận giày, nếu chọn thanh toán online thì giao diện sẽ chuyển sang trangthanh toán online để khách hàng thực hiện Ngoài ra khách hàng còn có thể theo dõitình trạng của đơn hàng đã đặt, xem những đơn hàng đã mua trước đó, có thể bìnhluận, đánh giá sau khi mua hàng

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ôngtin của website: danh mục sản phẩm, thông tin của giày và các phụ kiện liên quan, đơnhàng, tài khoản của khách hàng, bình luận và đánh giá của khách hàng, tài khoản củaquản trị viên

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

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

1 Tên đề tài: Xây dựng website mua bán giày đá bóng

2 Các số liệu, tài liệu ban đầu:

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

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ựctuyế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 quenthuộ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 Internetkhá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ấtmá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ướngphá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 mua 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ựctuyế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ảnthân mình

2 Mục tiêu và nhiệm vụ nghiên cứu

- Mục tiêu:

+ Xây dựng được một website hoàn chỉnh, đầy đủ các chức năng cơ bản củamột website bán hàng trực tuyến để cho khách hàng một cách dễ dàng cũngnhư quản trị viên dễ dàng quản lí website

+ Website được sắp xếp, bố cục một cách hợp lí, tạo điều kiện cho ngườidùng dễ dàng định hướng trong website

3 Đối tượng 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

- 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àngthể 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 Ý 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

6 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)

7 Cấu trúc của đồ án tốt nghiệp

Bài báo cáo ngoài các nội dung gồm phần mở đầu và phần kết thúc thì bố cục gồm

có 3 chương:

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

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ệnChart.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ứcnăng hệ thống Trình bày giao diện của phần mềm triển khai

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT1.1 Tổng quan về ngôn ngữ lập trình

1.1.1 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ớicá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ànhmột chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì Phiên bảnchí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ảnHTML5 hứa hẹn mang lại diện mạo mới cho trang Web

Hình 1 2 Icon CSS

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ổngquá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ụ 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ônngữ 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

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

Hình 1 4 Icon MySQL

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

1.3.1 Giới thiệu Laravel Framework

Laravel là một PHP framework mã nguồn mở và miễn phí, được phát triển bởiTaylor Otwell và nhắm vào mục tiêu hỗ trợ phát triển các ứng dụng web theo kiếmtrú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…)

Hình 1 5 Icon Laravel

Ưu điểm của Laravel:

- 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

1.3.2 Thư viện 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 Ajaxvà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 và phiên bản được sử dụng là 3.2.1, được sử dụng choBack-end

Hình 1 6 Icon jQuery

1.3.3 Thư viện 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ùychỉ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

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

1.3.4 Thư viện 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ẩmmớ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

Hình 1 8 Icon Bootstrap

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

1.4.1 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 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ộidung

- 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

Hình 1 9 Ảnh minh họa Visual Studio Code

1.4.2 Xampp

Xampp là một phần mềm cho phép giải lập môi trường server hosting ngay trênmáy tính của bạn, cho phép bạn chạy demo website mà không cần phải mua hostinghay 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ợpsẵn Apache, MySQL, PHP, FTP Server, Mail Server Còn X thể hiện cho sự đa nềntảng 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

Hình 1 10 Ảnh minh họa Xampp

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

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êucầu này có thể kèm theo những dữ liệu tới Controller xử lý Bộ Routing điềuhướ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ả rakết quả Khi đó, Controller cũng sẽ xử lý các giá trị đó và trả ra view để hiểnthị 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ầnhiể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

8.

CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG2.1 Tác nhân

- 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ơ đồ Use case

2.5 Kịch bản Use case

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

1 Description Actor đăng ký tài khoản thành viên của hệ thống

số điện thoại, mật khẩu và nhấn nút đăng ký 4) Kết thúc use case

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,

…

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 case2) 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

(Nêu các bước

Không có

STT Use case name Tìm kiếm giày

1 Description Actor tìm kiếm giày mong muốn

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 case2) Actor nhập từ khoá sau đó bấm tìm kiếm3) Giày liên quan đến từ khóa sẽ hiển thị4) Kết thúc use case

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

STT Use case name Đăng nhập

1 Description Actor đã có tài khoản có thể đăng nhập

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 case2) Khách hàng chọn đăng nhập3) Khách hàng nhập tài khoản và mật khẩu sau đó nhấn nút đăng nhập

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

4 Output Khách hàng chỉnh sửa thông tin thành công

5 Basic flow

1) Bắt đầu use case2) Khách hàng vào phần Thông tin tài khoản3) Khách hàng nhập các thông tin muốn sửa đổi4) Khách hàng nhấn nút cập nhật

5) Kết thúc use case6

2.5.2.4 Thanh toán giỏ hàng

STT Use case name Thanh toán giỏ hàng

1 Description Actor tiến hành thanh toán giỏ hàng sau khi đã cập nhật

giỏ hàng

2 Actor Khách hàng

3 Input Actor đăng nhập thành công và đã cập nhật giỏ hàng

4 Output Khách hàng thanh toán đơn hàng thành công, đơn hàng

được lưu vào hệ thống

5 Basic flow

1) Bắt đầu use case2) Nếu khách hàng chọn hình thức thanh toán là Trực tiếp

và nhấn nút Thanh toán3) Đơn hàng được lưu vào hệ thống4) Khách hàng sẽ thanh toán khi nhận hàng5) Kết thúc use case

2e) Nhấn nút Xác nhận4a) Khách hàng sẽ không thanh toán tiền mặt khi nhận sách

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

STT Use case name Xem danh sách đơn hàng đã mua

1 Description Khách hàng có thể xem danh sách đơn hàng

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

4 Output Khách hàng xem được lịch sử đơn hàng

5 Basic flow

1) Bắt đầu use case2) Khách hàng nhấp chuột vào danh sách đơn hàng3) Giao diện hiển thị thông tin tất cả các đơn hàng mà khách hàng đã đặt mua, bao gồm các đơn hàng đã giao và chưa giao

4) Khách hàng có thể chọn hủy đơn hàng5) Kết thúc use case

6 Alternative flow Không có