Đồ án tốt nghiệp WEBSITE bán GIÀY và PHỤ KIỆN THỂ THAO

Biểu đồ chức năng tổng quát của website bán giày thể thao .... Biểu đồ trình tự đăng nhập của website bán giày thể thao .... .Biểu đồ trình tự đặt hàng của website bán giày thể thao ....

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

Trong suốt thời gian học tập và rèn luyện tại Trường Đại học Công nghệ Thông tin 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è Với lòng biết ơn sâu sắc và chân thành nhất, em xin gửi đến quý thầy cô Trường Đại học Công nghệ Thông tin và Truyền thông Việt – Hàn đã dùng tri thức và tâm huyết của mình

để truyền đạt vốn kiến thức quý báu cho em trong suốt thời gian em học tại

trường

Em xin chân thành cảm ơn cô Lê Thị Thu Nga đã tận tâm hướng dẫn

em qua từng buổi học trên lớp cũng như những buổi nói chuyện, trao đổi về

đề tài Xây dựng Website bán giày thể thao và phụ kiện

Em cũng xin gửi lời cảm ơn đến các ban lãnh đạo của Trường Đại học Công nghệ Thông tin và Truyền thông Việt – Hàn, cùng với các Khoa – Phòng ban chức năng đã trực tiếp và gián tiếp giúp đỡ em trong quá trình học

tập và nghiên cứu đề tài này

Với điều kiện thời gian cũng như hạn chế về kinh nghiệm của một sinh viên, bài báo cáo này không thể tránh được những thiếu xót Em rất mong nhận được sự chỉ bảo, đóng góp ý kiến của các quý thầy cô để em có thêm kinh nghiệm, bổ sung và nâng cao kiến thức của bản thân để phục vụ cho

công tác thực tế sau này

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

Sinh viên,

Trà Thị Kim Hằng

MỤC LỤC

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

DANH MỤC HÌNH VẼ vii

DANH MỤC BẢNG BIỂU viii

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 đề tài 2

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

1.1 Ngôn ngữ 3

1.2 Công cụ 6

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

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

2.2 Biểu đồ chức năng 10

2.3 Biểu đồ trình tự 13

2.4 Biểu đồ lớp 14

2.5 Phân tích cơ sở dữ liệu 15

Chưong 3 XÂY DỰNG VÀ TRIỂN KHAI ỨNG DỤNG 20

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

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

KẾT LUẬN 30

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

2 Hạn chế và thiếu sót 30

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

TÀI LIỆU THAM KHẢO 31

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

DANH MỤC HÌNH VẼ

Hình 1 Hình ảnh minh họa của ngôn ngữ HTML 3

Hình 2 Hình ảnh minh họa của ngôn ngữ CSS 4

Hình 3.Hình ảnh minh họa của ngôn ngữ Javascript 4

Hình 4.Hình ảnh minh họa ngôn ngữ PHP 5

Hình 5.Hình ảnh minh họa của MySQL 6

Hình 6 Hình ảnh minh họa phần mềm Visual Studio Code 7

Hình 7 Hình ảnh minh họa phầm mềm Xampp 8

Hình 8 Biểu đồ chức năng tổng quát của website bán giày thể thao 10

Hình 9 Biểu đồ use case người dùng tổng quan 11

Hình 10 Biểu đồ chức năng Đăng Nhập cho người dùng 11

Hình 11 Biểu đồ chức năng Mua hàng cho người dùng 11

Hình 12 Biểu đồ chức năng Người Quản Trị tổng quan 12

Hình 13 Biểu đồ chức năng Quản lý sản phẩm 12

Hình 14 Biểu đồ chức năng Quản lý đơn hàng 13

Hình 15 Biểu đồ chức năng Quản lý danh mục sản phẩm 13

Hình 16 Biểu đồ trình tự đăng nhập của website bán giày thể thao 14

Hình 17 .Biểu đồ trình tự đặt hàng của website bán giày thể thao 14

Hình 18 Biểu đồ lớp của website bán giày thể thao và phụ kiện 15

Hình 19 Cơ sở dữ liệu của website bán giày thể thao 15

Hình 20.Giao diện Đăng Nhập của website bán giày thể thao 21

Hình 21 Giao diện Đăng Ký của website bán giày thể thao 21

Hình 22 Giao diện Trang Chủ của website bán giày thể thao 22

Hình 23 Giao diện Sản Phẩm của website bán giày thể thao 22

Hình 24 Giao diện Giỏ Hàng của website bán giày thể thao 23

Hình 25 Giao diện Thanh Toán của website bán giày thể thao 23

Hình 26 Giao diện Thêm địa chỉ mới của website bán giày thể thao 24

Hình 27 Giao diện Thông tin cá nhân của website bán giày thể thao 24

Hình 28 Giao diện Thông tin địa chỉ của website bán giày thể thao 25

Hình 29 Giao diện đơn hàng của website bán giày thể thao 25

Hình 30 Giao diện trang chủ của người quản trị 26

Hình 31 Giao diện quản lý sản phẩm của người quản trị 26

Hình 32 Giao diện thêm sản phẩm của người quản trị 27

Hình 33 Giao diện quản lý danh mục sản phẩm của người quản trị 27

Hình 34 Giao diện quản lý đơn hàng của người quản trị 28

Hình 35 Giao diện quản lý tài khoản của người quản trị 28

Hình 36 Giao diện quản lý khách hàng của người quản trị 29

DANH MỤC BẢNG BIỂU

Bảng 1 Bảng Tài Khoản 16

Bảng 2 Bảng Sản Phẩm 16

Bảng 3 Bảng Hình Ảnh Chi Tiết 16

Bảng 4 Bảng Nhóm Sản Phẩm 17

Bảng 5 Bảng Thương Hiệu 17

Bảng 6 Bảng Đơn Hàng 17

Bảng 7 Bảng Chi Tiết Đơn Hàng 17

Bảng 8 Bảng Trạng Thái Đơn Hàng 18

Bảng 9 Bảng Địa Chỉ Khách Hàng 18

Bảng 10 Bảng Địa Chỉ Mặc Định 18

Bảng 11 Bảng Size 19

Bảng 12 Bảng Xã 19

Bảng 13 Bảng Quận Huyện 19

Bảng 14 Bảng Tỉnh Thành Phố 19

Bảng 15 Bảng Admin 20

MỞ ĐẦU

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

Ngày nay Internet đã trở thành dịch vụ phổ biến và thiết yếu ảnh hưởng sâu rộng đến thói quen, sinh hoạt, giải trí của nhiều người Cùng với sự phát triển nhanh chóng của Internet thì các hình thức mua và bán hàng hóa cho mọi người ngày càng đa dạng và phát triển hơn trong nhiều lĩnh vực

Thông tin hiện nay là một lĩnh vực rất quan trọng đối với cuộc sống hiện nay, bên cạnh đó các nhu cầu nghe nhìn,giải trí, trao đổi thông tin… Vì vậy cần các mặt hàng khác nhau để phục vụ nhu cầu trên, nhưng để chọn được những mặt hàng như ý đúng với các nhu cầu sử dụng không phải dễ, lý

do đó em chọn đề tài website bán hàng online Nhằm một phần nào đó giúp khách hàng có thể lựa chọn và mua những mặt hàng mọi lúc mọi nơi không cần đi xa mua hàng về tận nhà chỉ cần một cú click chuột

Đặc biệt trong thương mại điện tử, việc áp dụng công nghệ thông tin vào thương mại điện tử giúp cho việc mua bán thuận tiện và dễ dàng hơn Việc mua bán dễ dàng trên mạng sẽ kích thích người tiêu dùng mua hàng nhiều hơn qua đó làm tăng doanh thu cho cửa hàng.Mặt khác việc bán hàng qua mạng có nhiều lợi thế hơn so với bán hàng truyền thông:

- Cung cấp dịch vụ tốt hơn cho khách hàng

- Quảng bá thông tin và tiếp thị thị trường toàn cầu với chi phí thấp

- Tăng doanh thu và giảm chi phí

- Tạo lợi thế cạnh tranh

Với lý do trên, em chọn đề tài xây dựng “Website bán giày và phụ kiện

thể thao”

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

Mục tiêu của đề tài là xây dựng website bán hàng online, cụ thể là các mặt hàng thể thao, đặc biệt là giày thể thao Website cho pháp người dùng có thể tìm kiếm, xem chi tiết, đặt mua hàng online Mặt khác, website cũng cung cấp các chức năng cho người quản trị, cụ thể như: thêm, sửa, xóa…sản phẩm, quán lý khách hành, quản lý đơn hàng

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

Từ các yêu cầu đặt ra, đề 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 các tài liệu, sách báo, thông tin trên mạng internet về các vấn đề có liên quan đến nội dung đề tài

- Tìm hiểu công nghệ:

+ Tìm hiểu về ngôn ngữ lập trình PHP + Sử dụng Framework Laravel

+ Tìm hiểu về hệ quản trị cơ sở dữ liệu MySql

+ Tìm hiểu về ngôn ngữ lập trình JavaScritp

+ Tìm hiểu về kỹ thuật Ajax Jquery

- 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

- Chương 2 Phân tích mô hình hệ thống Phân tích yêu cầu chức năng, sơ đồ use case, phân tích cơ sở dưc liệu,… được trình bày chi tiết trong chương này

- Chương 3 Xây dựng và triển khai ứng dụng Trong chương này, các kết quả đạt được như: thiết kế giao diện về phía người dùng, giao diện về phía người quản trị,… Được trình bày trong chương này

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

1.1 Ngôn ngữ

1.1.1 HTML

HTML ( được viết tắt là Hypertext Markup Language, hay là "Ngôn ngữ Đánh dấu Siêu văn bản" ) là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web trên World Wide Web

Các phần tử HTML là các khối xây dựng của các trang HTML Với cấu trúc HTML, hình ảnh và các đối tượng khác như biểu mẫu tương tác có thể được nhúng vào trang được hiển thị HTML cung cấp một phương tiện để tạo tài liệu có cấu trúc bằng cách biểu thị ngữ nghĩa cấu trúc cho văn bản như headings, paragraphs, lists, links, quotes và các mục khác Các phần tử HTML được phân định bằng các tags, được viết bằng dấu ngoặc nhọn Các tags như <img /> và <input /> giới thiệu trực tiếp nội dung vào trang Các tags khác như <p> bao quanh và cung cấp thông tin về văn bản tài liệu và có thể bao gồm các thẻ khác làm phần tử phụ Các trình duyệt không hiển thị các thẻ HTML, nhưng sử dụng chúng để diễn giải nội dung của trang

Hình 1 Hình ảnh minh họa của ngôn ngữ HTML

1.1.2 CSS

CSS là chữ viết tắt của Cascading Style Sheets, là ngôn ngữ tạo phong cách cho trang web Bạn 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 style vào các phần tử HTML

đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác Sau đó là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó

Hình 2 Hình ảnh minh họa của ngôn ngữ CSS

1.1.3 JavaScript

Là một ngôn ngữ lập trình của HTML và WEB Nó là nhẹ và được sử dụng phổ biến nhất như là một phần của các trang web, mà sự thi hành của chúng cho phép Client-Side script tương tác với người sử dụng và tạo các trang web động

Hình 3.Hình ảnh minh họa của ngôn ngữ Javascript

1.1.4 PHP

PHP (được viết tắt là Hypertext Preprocessor) 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

PHP chỉ phân tích các đoạn mã nằm trong những dấu giới hạn của nó Bất cứ mã nào nằm ngoài những dấu giới hạn đều được xuất ra trực tiếp không thông qua xử lý bởi PHP Các dấu giới hạn thường dùng nhất

là <?php và ?> Cách viết dấu giới hạn dạng thẻ ngắn cũng có thể được dùng để thông báo bắt đầu đoạn mã PHP, là <? hay <?= (dấu này được sử dụng để in ra (echo) các xâu ký tự hay biến) với thẻ thông báo kết thúc đoạn mã PHP là ?>

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 CSDL trên internet

MySQL tạo ra các bảng với mục đích lưu trữ những dữ liệu, đồng thời có thể định nghĩa sự liên quan với các bảng đó

Thông thường Client sẽ gửi yêu cầu cho SQL bằng một lệnh đặc biệt

1.2.1 Visual Studio Code

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

Nó được xem là một sự kết hợp hoàn hảo giữa IDE và Code Editor Các tính năng của Visual Studio Code :

- Visual Studio Code hỗ trợ nhiều ngôn ngữ lập trình như C/C++, C#, F#, Visual Basic, HTML, CSS, JavaScript, … Vì vậy, nó dễ dàng phát hiện và đưa ra thông báo nếu chương chương trình có lỗi

- Các trình viết code thông thường chỉ được sử dụng hoặc cho Windows hoặc Linux hoặc Mac Systems Nhưng Visual Studio Code có thể hoạt động tốt trên cả ba nền tảng trên

- Trong trường hợp lập trình viên muốn sử dụng một ngôn ngữ lập trình không nằm trong số các ngôn ngữ Visual Studio hỗ trợ,

họ có thể tải xuống tiện ích mở rộng Điều này vẫn sẽ không làm giảm hiệu năng của phần mềm, bởi vì phần mở rộng này hoạt động như một chương trình độc lập

- Đi kèm với sự phát triển của lập trình là nhu cầu về lưu trữ an toàn.Với Visual Studio Code, người dùng có thể hoàn toàn yên tâm vìc nó dễ dàng kết nối với Git hoặc bất kỳ kho lưu trữ hiện

- Visual Studio Code có tích hợp thiết bị đầu cuối, giúp người dùng khỏi phải chuyển đổi giữa hai màn hình hoặc trở về thư mục gốc khi thực hiện các thao tác

- Người dùng Visual Studio Code có thể mở cùng lúc nhiều tệp tin và thư mục – mặc dù chúng không hề liên quan với nhau

Hình 6 Hình ảnh minh họa phần mềm Visual Studio Code

Các ưu điểm của XAMPP bao gồm:

+ XAMPP có thể chạy được trên tất cả các hệ điều hành: Từ platform, Window, MacOS và Linux

Cross-+ XAMPP có cấu hình đơn giản cũng như nhiều chức năng hữu ích cho người dùng Tiêu biểu gồm: giả lập Server, giả lập Mail Server,

hỗ trợ SSL trên Localhost

XAMPP tích hợp nhiều thành phần với các tính năng:

+ Apache

+ PHP (tạo môi trường chạy các tập tin script *.php);

+ Thay vì phải cài đặt từng thành phần trên, giờ đây các bạn chỉ cần cài XAMPP là chúng ta có 1 web server hoàn chỉnh

+ Mã nguồn mở: Không như Appserv, XAMPP có giao diện quản lý khá tiện lợi Nhờ đó, người dùng có thể chủ động bật tắt hoặc khởi động lại các dịch vụ máy chủ bất kỳ lúc nào

Hình 7 Hình ảnh minh họa phầm mềm Xampp

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ề môi trường

- Chạy được trên mọi trình duyệt

- Cơ sở dữ liệu dùng về MySQL

- Chạy được trên mọi hệ điều hành , nền tảng khác nhau

2.1.2 Yêu cầu về giao diện:

- Giao diện phải đáp ứng được tiêu chí quan trọng nhất là giới thiệu sản phẩm, giao dịch trực tuyến thuận tiện và đảm bảo an toàn

- Các điều khiển trên trang web phải dễ thao tác cho người dùng.Thông tin hình ảnh bao quát và đẹp và dễ dàng lựa chọn tìm kiếm

- Hiển thị thông tin chi tiết khi khách lựa chọn

2.1.3 Yêu cầu về chức năng

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

+ Đăng ký tài khoản , đăng nhập

+ Xem thông tin sản phẩm , tìm kiếm sản phẩm

+ Mua hàng , thanh toán

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

+ Quản lý đơn hàng : người quản trị có thể duyệt đơn hàng

+ Quản lý danh mục sản phẩm :thêm,sửa,xóa danh mục sản phẩm

+ Quản lý khách hàng : Xem các thông tin của khách hàng nhưng không được quyền thay đổi thông tin đó

2.2 Biểu đồ chức năng

2.2.1 Biểu đồ chức năng tổng quát

Hình 8. Biểu đồ chức năng tổng quát của website bán giày thể thao

2.2.2 Biểu đồ chức năng Người dùng tổng quan

Hình 9 Biểu đồ use case người dùng tổng quan

2.2.3 Biểu đồ chức năng Đăng Nhập cho người dùng

Hình 10. Biểu đồ chức năng Đăng Nhập cho người dùng

2.2.4 Biểu đồ chức năng Mua hàng cho người dùng

Hình 11 Biểu đồ chức năng Mua hàng cho người dùng