ĐỀ tài WEBSITE bán đồ THỂ THAO

Từ những phần mềm quản lý giúp cho công việc bán hàng của cở hàng trở nên nhanh chóng và dễ dàng, ngày nay công nghệ thông tin đã phát triển mạnh mẽ hơn nữa, Website ra đời không chỉ đáp

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

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

LỜI CẢM ƠN

Để hoàn thành bài báo cáo này, trước hết, em xin cảm ơn các thầy cô giáo khoa công nghệ thông tin Trường Đại học CNTT và Truyền Thông Việt - Hàn, em đã nhận được rất nhiều sự quan tâm, giúp đỡ của quý thầy cô cùng bạn bè Em cũng xin gửi lời cảm ơn đến ban giám hiệu nhà trường đã tạo điều kiện tốt nhất cho em củng như các bạn trong suốt thời gian học tập và làm đồ án tốt nghiệp

Em xin chân thành cảm ơn Cô Lê Thị Thu Nga đã trang bị cho em những kiến thức chuyên môn trong thời gian vừa qua, và giúp em hiểu rỏ hơn cái lĩnh vực đã nghiên cứu để hoàn thành đề tại được giao

Với điều kiện thời gian có hạn, kiến thức còn hạn chế, bài báo cáo này không thể tránh được những sai sót Em rất mong nhận được ý kiến đóng góp của các quý thầy

cô và nhà trường để em có thêm kinh nghiệm và bổ sung kiến thức bản thân, và tiếp tục phát triển đồ án của mình

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

Sinh viên

Hồ Nhật Rin

MỤC LỤC

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

DANH MỤC HÌNH VẼ ix

MỞ ĐẦU 1

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

2 Mục tiêu đạt được 1

3 Nhiệm vụ và hướng giải quyết 2

4 Bố cục của đồ án 2

Chương 1 CÔNG CỤ CÔNG NGHỆ SỬ DỤNG 3

1.1 PHP 3

1.2 MySQL 4

1.3 Bootstrap 4

1.4 Javascript 5

1.5 Xampp 6

1.6 Sublime Text 3 6

1.7 CSS 7

Chương 2 PHÂN TÍCH MÔ HÌNH HỆ THỐNG 8

2.1 Phân tích yêu cầu 8

2.1.1.Yêu cầu về chức năng hệ thống 8

2.1.2.Yêu cầu về hình thức 8

2.1.3.Yêu cầu về bảo mật 8

2.2.Phân tích chức năng 9

2.2.1.Sơ đồ chức năng quản lý admin: 9

2.2.2.Sơ đồ chức năng của khách hàng: 10

2.3 Sơ đồ use case 11

2.3.1 Sơ đồ use case tổng quát 11

2.3.2 Sơ đồ use case quản lý admin 11

2.3.3 Sơ đồ quản lý danh mục admin 12

2.3.4 Sơ đồ quản lý sản phẩm admin 12

2.3.5 Sơ đồ quảng lý quảng cáo .12

2.3.6 Sơ đồ quản lý tài khoản 13

2.3.7 Sơ đồ quản lý khách hàng 13

2.3.8 Sơ đồ quản lý đơn hàng 14

2.3.9 Sơ đồ quản lý bình luận 14

2.3.10 Sơ đồ use case phía người dùng 15

2.3.11 Sơ đồ quản lý giỏ hàng 15

2.3.12 Sơ đồ thêm sản phẩm vào giỏ hàng 16

2.3.13 Sơ đồ đặt hàng 16

2.4.1 Bảng danh mục sản phẩm 17

2.4.2 Bảng sản phẩm 17

2.4.3 Bảng banner (quảng cáo) 17

2.4.4 Bảng bình luận 18

2.4.5 Bảng người dùng 18

2.4.6 Bảng phiếu mua hàng 18

2.4.7 Bảng tài khoản 19

2.4.8 Sơ đồ cấu trúc các bảng 19

Chương 3 XÂY DỰNG ỨNG DỤNG .20

3.1 Giao diện phía người dùng 20

3.1.1 Giao diện trang chủ Website 20

3.1.2 Giao diện đăng ký 21

3.1.3 Giao diện đăng nhập 21

3.1.4 Giao diện chi tiết sản phẩm 22

3.1.5 Giao diện bình luận sản phẩm 22

3.1.6 Giao diện giỏ hàng 23

3.2 Giao diện phía người quản trị 24

3.2.1 Giao diện trang chủ admin 24

3.2.2 Giao diện danh mục sản phẩm 24

3.2.3 Giao diện quản lý sản phẩm 25

3.2.4 Giao diện thêm sản phẩm 25

3.2.5 Giao diện đăng nhập hệ thống 26

KẾT LUẬN 27

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

2 Những hạn chế và thiếu sót 27

3 Hướng phát triển 28

TÀI LIỆU THAM KHẢO .29

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

PHP Hypertext Preprocessor HTML Hyper Text Markup Language CSS Cascading Style Sheets SQL Structured Query Lanuage

DANH MỤC HÌNH VẼ

Hình 1.1 Ảnh mô tả ngôn ngữ php 3

Hình 1.2 Ảnh mô tả MySQL 4

Hình 1.3 Ảnh mô tả Bootstrap 4

Hình 1.4 Ảnh mô tả Javascript 5

Hình 1.5 Ảnh mô tả xampp 6

Hình 1.6 Ảnh mô tả Sublime text 6

Hình 1.7 Ảnh mô tả CSS 7

Hình 2.2.1 Sơ đồ chức năng admin 9

Hình 2.2.2 Sơ đồ chức năng khách hàng 10

Hình 2.3.1 Sơ đồ use case tổng quát 11

Hình 2.3.2 Sơ đồ use case quản lý admin 11

Hình 2.3.3 Sơ đồ quản lý danh mục admin 12

Hình 2.3.4 Sơ đồ quản lý sản phẩm admin 12

Hình 2.3.4 Sơ đồ quản lý quảng cáo 12

Hình 2.3.6 Sơ đồ quản lý tài khoản 13

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

Hình 2.3.8 Sơ đồ quản lý đơn hàng 14

Hình 2.3.9 Sơ đồ quản lý bình luận 14

Hình 2.3.10 Sơ đồ use case phía người dùng 15

Hình 2.3.11 Sơ đồ quản lý giỏ hàng 15

Hình 2.3.12 Sơ đồ thêm sản phẩm vào giỏ hàng 16

Hình 2.3.13 Sơ đồ đặt hàng 16

Hình 3.1.1 Giao diện trang chủ website 20

Hình 3.1.2 Giao diện đăng ký 20

Hình 3.1.3 Giao diện đăng nhập 21

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

Hình 3.1.5 Giao diện bình luận sản phẩm 22

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

Hình 3.2.1 Giao diện trang chủ admin 24

Hình 3.2.2 Giao diện danh mục sản phẩm 24

Hình 3.2.3 Giao diện quản lý sản phẩm 25

Hình 3.2.4 Giao diện thêm sản phẩm 25

Hình 3.2.5 Giao diện đăng nhập hệ thống 26

MỞ ĐẦU

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

Trong thời đại công nghiệp hóa - hiện đại hóa đất nước như ngày nay nói đến công nghệ thông tin chúng ta hình dung ngay tới một môi trường phát triển năng động được xếp vào hàng bậc nhất thế giới Công nghệ thông tin được ứng dụng rộng rãi vào mọi lĩnh vực của đời sống xã hội hiện nay

Từ những phần mềm quản lý giúp cho công việc bán hàng của cở hàng trở nên nhanh chóng và dễ dàng, ngày nay công nghệ thông tin đã phát triển mạnh mẽ hơn nữa, Website ra đời không chỉ đáp ứng cho các khách hàng đến trực tiếp cửa hàng mua sản phẩm mà nó còn phục vụ cho những khách hàng ở xa Không những thế, với việc giới thiệu, quảng bá hình ảnh về của hàng, công ty được mở rộng trên quy mô lớn giúp cho việc kinh doanh, buôn bán, trao đổi tin tức thuận lợi hơn rất nhiều,mang lại hiệu quả kinh tế cao hơn tạo uy tín trong khách hàng

Ngày nay, việc áp dụng Website trong việc phát triển kinh doanh của cửa hàng trở nên rất phổ biến và hiệu quả, trong đó ngành thời trang thể thao cũng có sử dụng nhiều đến Website để giới thiệu và quảng bá sản phẩm của cửa hàng, công ty mình Việc lên mạng tìm kiếm và mua sản phẩm trở nên khá gần gũi với các bạn trẻ ngày nay, đặc biệt là các bạn đam mê thể thao là không thể thiếu

Chính vì lợi ích mà Website mang lại mà các cửa hàng, nhiều công ty đã áp dụng nó để phát triển công việc kinh doanh giới thiệu của hàng của mình Trong số

đó, thời trang cũng là một ngành sử dụng nhiều đến Website Do vậy em lựa chọn

đề tài thiết Website bán đồ thể thao nhằm đưa khách đến cho khách hàng một địa

điểm lý tưởng trong việc mua sắm đồ thể thao

2 Mục tiêu đạt được

Mục tiêu của đề tài như sau:

- Xây dựng một website cung cấp cho khách hàng tất cả những thông tin chi tiết về các sản phẩm trên trang web, thông tin liên hệ cũng như những sản phẩm mới nhất được cập nhật thường xuyên

- Khách hàng có thể đặt hàng ngay những sản phẩm mà khách hàng yêu

thích

- Tạo ra sản phẩm thân thiện, đơn giản với giao diện tự nhiên, bắt mắt, dễ

sử dụng cho tất cả mọi người

- Xây dựng một website giúp người quản trị quản lý thông tin hệ thống một cách dễ dàng hơn, tiện lợi hơn

- Củng cố và bổ sung kiến thức các môn đã học Qua đó, rèn luyện kỹ năng làm việc độc lập Từ đề tài này có thể mở rộng ra và ứng dụng cho các đề tài khác có liên quan

3 Nhiệm vụ và hướng giải quyết

Mục tiêu của đề tài nhằm xây dựng một Website bán hàng trực tuyến và giới thiệu quảng bá sản phẩm, đặt hàng theo yêu cầu, các sản phẩm đa dạng với giá cả hợp lý nhất Từ các yêu cầu đặt ra của đề tài tiến hành phân tích và đưa ra hướng giải quyết theo các bước sau:

- Tìm hiểu về các website tương tự để xây dựng các chức năng sao cho phù hợp với đa phần thị hiếu của người sử dụng hiện nay

- Tiến hành tìm hiểu về các khái niệm có liên quan và từ các thông tin khảo sát được sẽ tiến hành phân tích các chức năng dự định đưa vào website

- Tìm hiểu về các nội dung cần có của một trang web bán đồ thể thao, từ

đó đưa ra các giải pháp để tiến hành xây dựng

- Lựa chọn và cài đặt các công cụ, phần mềm phù hợp cho việc thiết kế website

- Bắt tay vào việc xây dựng website

- Tiến hành kiểm tra và chạy thử

- Thay đổi, bổ sung, khắc phục các lỗi để website hoàn chỉnh hơn

4 Bố cục của đồ án

Ngoài phần Mở đầu và Kết luận, nội dung đồ án được thể hiện qua ba

chương chính như sau:

- Chương 1 : Giới thiệu về các công cụ, công nghệ sử dụng

- Chương 2 : Phân tích mô hình hệ thống

- Chương 3 : Xây dựng ứng dụng

Chương 1 CÔNG CỤ CÔNG NGHỆ SỬ DỤNG

Để thực hiện đồ án, các công công cụ, công nghệ sau được sử dụng:

- Ngôn ngữ sử dụng PHP

- HTML, CSS, Bootstrap, Javascript…

- XAMPP

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

- Phần mềm hỗ trợ viết code: Visual studio code, Sublime Text 3

1.1 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 Do được tối ưu hóa cho các ứng dụng wrb, 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 nhất thế giới

Hình 1.1 Ảnh mô tả ngôn ngữ PHP

Ngôn ngữ, các thư viện, tài liệu gốc của PHP được xây dựng bởi cộng đồng

và có sự đóng góp rất lớn của Zend Inc, công ty do các nhà phát triển cốt lõi của PHP lập nên nhằm tạo ra một môi trường chuyên nghiệp để đưa PHP phát triển ở quy mô doanh nghiệp

1.2 MySQL

Microsoft SQl server là một hệ quản trị cơ sở dữ liệu quan hệ (relational database management system – RDBMS) do Microsoft phát triển SQL Server là một hệ quản trị cơ sở dữ liệu quan hệ mạng máy tính hoạt động theo mô hình khách chủ cho phép đồng thời cùng lúc có nhiều người dùng truy xuất đến dữ liệu, quản lý việc truy nhập hợp lệ và các quyền hạn của từng người dùng trên mạng

Hình 1.1 Ảnh mô tả MySQL

Ngôn ngữ truy vấn quan trọng của Microsoft SQL server là Transact-SQL Transact-SQL là ngôn ngữ SQL mở rộng dựa trên SQL chuẩn của ISO (International Organization for Standardization) và ANSI (American National Standards Institute) được sử dụng trong SQL Server

1.3 Bootstrap

Hình 1.2 Ảnh mô tả Bootstrap

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

Bootstrap cho phép quá trình thiết kế website diễn ra nhanh chóng và dễ dàng hơn

dựa trên những thành tố cơ bản sẵn có như typography, forms, buttons, tables, grids, navigation, image carousels…

1.4 Javascript

Hình 1.3 Ảnh mô tả Javascript

JavaScript là ngôn ngữ phổ biến nhất Tập lệnh (script) được bao gồm trong

HTML document hoặc được tham chiếu bởi HTML document, sẽ được trình duyệt biên dịch và thực thi Có thể tương tác với người dùng, kiểm soát trình duyệt và tạo nội dung HTML động

– Cơ chế phía máy khách JavaScript (JavaScript client-side) cung cấp nhiều lợi thế hơn các kịch bản lệnh phía máy chủ CGI (CGI server-side) truyền thống Ví dụ: bạn

có thể sử dụng JavaScript để xem liệu người dùng đã nhập địa chỉ email hợp lệ vào form hay chưa Mã JavaScript được thực hiện khi người dùng gửi form, và chỉ được thực thi nếu tất cả các mục nhập hợp lệ và được gửi đến Web Server Điều này sẽ giúp giảm tải xử lý ở Web Server

– Với JavaScript, bạn có thể tương tác với khi dùng khi họ sử dụng website, chẳng hạn như khi click chuột vào button, click vào liên kết, thay đổi kích thước website,… Dưới đây là một số ví dụ về những gì JavaScript có thể làm

1.5 Xampp

Hình 1.4 Ảnh mô tả Xampp

Xampp Là phần mềm web server thuộc bản quyền của GNU General Public

Licence, XAMPP do Apache Friends phân phối và phát triển Đây là chương trình tạo máy chủ Web (Web Server) được tích hợp sẵn Apache, PHP, MySQL, FTP Server, Mail Server và các công cụ như phpMyAdmin

1.6 Sublime Text 3

Hình 1.5 Ảnh mô tả Sublime Text

Sublime text 3 là phiên bản mới nhất của chương trình soạn thảo văn bản được sử

dụng nhiều nhất bởi web developers, coders, và programmers Nó sẵn có cho Mac, Windows, Linux và cho phép tải về và sử dụng miễn phí Trong bài viết này chúng

ta sẽ cùng nhau tìm hiểu về hướng dẫn sử dụng Sublime Text 3 cho web

developer, phím tắt hữu ích và hơn thế nữa

1.7 CSS

CSS là một ngôn ngữ cho phép định nghĩa các bảng kiểu (style sheet) để cung cấp

các quy tắc nhằm định nghĩa nên style cho các phần tử của trang

Hình 1.7 Ảnh mô tả CSS

CSS cho phép định nghĩa các thuộc tính của các phần tử trong trang web, làm cho

trang web trở nên đẹp hơn, thu hút, hấp dẫn hơn Các thuộc tính của CSS cho phép định nghĩa nên màu nền, màu chữ, phông chữ, kích thước, vị trí, đường viền, căn lề v.v… của các phần tử trên trang, đồng thời cho phép thiết lập nên bố cục trang

Chương 2 PHÂN TÍCH MÔ HÌNH HỆ THỐNG

2.1 Phân tích yêu cầu

2.1.1.Yêu cầu về chức năng hệ thống

-Về phía người dùng (user):

+ đăng ký, đăng nhập + Xem chi tiết sản phẩm + Tìm kiếm sản phẩm + Chọn hàng, mua hàng và thanh toán + Bình luận, đánh giá sản phẩm

+ Thêm vào giỏ hàng, cập nhật giỏ hàng + Lọc sản phẩm

+…

-Về phía nhà cung cấp:

-Về phía quản trị (admin)

+ Đăng nhập: Thông tin đăng nhập có sẵn của quản trị viên sẽ được tạo sẵn khi website được đưa vào sử dụng

+ Thống kê: Thống kê doanh thu , thống kê sản phẩm và số lượng sản phẩm bán ra

+ Quản lý danh mục: Quản lý, thêm sửa, xóa, danh mục + Quản lý sản phẩm: Quản lý, thêm sửa, xóa, sản phẩm + Quản lý thành viên: Quản lí lượng khách hàng đăng kí và sử dụng website

+ Quản lý đơn hàng: Kiểm tra tình trạng đơn hàng , kiểm duyệt thông tin và giao hàng cho khách hàng đặt hàng

+ Cập nhật giao diện, quảng cáo website

2.1.2.Yêu cầu về hình thức

- Giao diện thân thiện, dễ dùng

- màu sác hài hóa

- Bố cục các chức năng hợp lý

- Cho phép người dùng chọn nhanh các sản phầm thông qua danh sách có sẵn

2.1.3.Yêu cầu về bảo mật

- Về phía người dùng: cần phải đăng nhập để mua hàng, củng như bình luận và đánh giá sản phẩm, nếu chưa có tài khoản thì có thể đăng ký…

- Về phía người quản trị: đăng nhập để quản lý dữ liệu website

2.2.Phân tích chức năng

2.2.1.Sơ đồ chức năng quản lý admin:

Hình 2.2 1 Sơ đồ chức năng admin

Trang quản trị Đăng nhập

Trang

chủ

Sản Phẩm

Danh mục

Quảng cáo

Tài khoản

Khách hàng

Đơn hàng

Bình luận

Thêm, sửa, xóa

Đổi mật khẩu Kiểm tra, xóa

2.2.2.Sơ đồ chức năng của khách hàng:

Hình 2.2 2 Sơ đồ chức năng của khách hàng

Sản phẩm Tìm kiếm