ĐỀ tài xây DỰNG WEBSITE bán BALO

Lý do chọn đề tài Việc mua sắm online hiện nay là một xu thế trên toàn thế giới ở tất cả các mặt hàng vì không phải đi xa mà cũng chọn được sản phẩm mình ưng ý về kiểu dáng.. Xây dựng m

1

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

XÂY DỰNG WEBSITE BÁN BALO

Sinh viên thực hiện : Nguyễn Văn Hiếu

Giảng viên hướng dẫn: TS LÊ THỊ THU NGA

Đà Nẵng, tháng 11 năm 2021

2

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

XÂY DỰNG WEBSITE BÁN BALO

Sinh viên: Nguyễn Văn Hiếu

Giảng viên hướng dẫn: TS LÊ THỊ THU NGA

Đà Nẵng, tháng 11 năm 2021

3

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

Em cũng xin cảm ơn cô Lê Thị Thu Nga đã giúp đỡ và hổ trợ trong một số vấn đề liên quan đến quá trình thực hiện đồ án tốt nghiệp

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

Sinh viên, Nguyễn Văn Hiếu

5

MỤC LỤC

DANH MỤC HÌNH 7

DANH MỤC BẢNG 9

MỞ ĐẦU 10

1 Giới thiệu 10

2 Lý do chọn đề tài 10

3 Mục tiêu của đề tài 11

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

5 Ý nghĩa thực tiển của đề tài: 12

6 Bố cục đề tài 12

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

1.1 Công nghệ 13

1.1.1 HTML 13

1.1.2 CSS 14

1.1.3 JavaScript 15

1.1.4 Thư viện Tailwind.css 16

1.1.5 Icon boxicon.com 17

1.1.6 PHP 18

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

1.1.8 Framework Laravel 20

1.2 Công cụ: 20

1.2.1 Visual Studio Code 20

1.2.2 Xampp 21

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

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

2.1.1 Yêu cầu về hình thức 22

2.1.2 Yêu cầu về bảo mật 22

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

2.2.1 Chức năng dành cho khách hàng 23

2.2.2 Chức năng dành cho người quản trị 25

2.3 Sơ đồ use case 26

6

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

2.3.2 Sơ đồ use case người dùng 26

2.3.3 Sơ đồ use case quản trị viên 28

2.4 Biểu đồ hoạt động 29

2.4.1 Biểu đồ hoạt động người dùng 29

2.4.2 Biểu đồ hoạt động quản trị viên 30

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

2.5.1 Sơ đồ quan hệ 31

2.5.2 Phân tích chi tiết bảng 31

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

3.1 Giao diện khách hàng 35

3.1.1 Giao diện trang chủ 35

3.1.2 Giao diện sản phẩm 36

3.1.3 Giao diện chi tiết sản phẩm 37

3.1.4 Giao diện giỏ hàng 38

3.1.5 Giao diện thanh toán 39

3.1.6 Giao diện thông tin cá nhân 39

3.1.7 Giao diện đổi mật khẩu 40

3.2 Giao diện dành cho người quản trị 40

3.2.1 Giao diện quản lí sản phẩm 40

3.2.2 Giao diện quản lí khách hàng 41

3.2.3 Giao diện quản trị tổng quan 41

KẾT LUẬN 42

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

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

TÀI LIỆU THAM KHẢO 44

7

DANH MỤC HÌNH

Hình 1: Hình minh họa HTML 13

Hình 2:Ví dụ về code HTML 14

Hình 3:Hình minh họa CSS 14

Hình 4:Ví dụ code CSS 15

Hình 5:Hình minh họa Javascrip 15

Hình 6:Ví dụ code Javascrip 16

Hình 7:Hình minh họa taidwindcss 16

Hình 8:Ví dụ code taidwindcss 17

Hình 9:Ví dụ boxicon 17

Hình 10:Hình minh họa PHP 18

Hình 11:Ví dụ code PHP 18

Hình 12:Hình minh họa MySQL 19

Hình 13:Giao diện MySQL 19

Hình 14:Hình minh họa Laravel 20

Hình 15:Giao diện visual studio code 21

Hình 16:Giao diện XAMPP 21

Hình 17:Biểu đồ usecase tổng quát 26

Hình 18:Biểu đồ usecase khách hàng 26

Hình 19:Usecase quản lí giỏ hàng 27

Hình 20:Usecase lọc sản phẩm 27

Hình 21:Usecase quản lí thông tin cá nhân 27

Hình 22:Biểu đồ usecase quản trị viên 28

Hình 23:Usecase quản lí sản phẩm 28

Hình 24:Usecase quản lí khách hàng 28

Hình 25:Biểu đồ hoạt động quản lí giỏ hàng 29

Hình 26:Biểu đồ hoạt động lọc sản phẩm 29

Hình 27:Biểu đồ hoạt đọng quản lí sản phẩm 30

Hình 28:Giao diện trang chủ 35

8

Hình 29:Giao diện trang chủ 35

Hình 30:Giao diện trang chủ 36

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

Hình 32:Giao diện chi tiết sản phẩm 37

Hình 33:Giao diện chi tiết sản phẩm 37

Hình 34:Giao diện chi tiết sản phẩm 38

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

Hình 36:Giao diện thanh toán 39

Hình 37:Giao diện thông tin cá nhân 39

Hình 38:Giao diện đổi mật khẩu 40

Hình 39:Giao diện quản lí sản phẩm 40

Hình 40:Giao diện quản lí khách hàng 41

Hình 41:Giao diện quản trị tổng quan 41

9

DANH MỤC BẢNG

Bảng 1: Bảng khách hàng 31

Bảng 2: Bảng dòng sản phẩm 32

Bảng 3: Bảng sản phẩm 32

Bảng 4:Nhóm sản phẩm 33

Bảng 5:Bảng giỏ hàng 33

Bảng 6:Bảng đơn hàng 33

Bảng 7:Bảng chi tiết đơn hàng 34

Bảng 8:Thông tin thanh toán 34

Bảng 9:Phương thức thanh toán 34

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

Trong thời đại 4.0 như hiện nay, Việt Nam có hơn 45 triệu người sử dụng Internet mỗi ngày và trong đó có hơn 75% có xu hướng tìm kiếm thông tin, mua sắm trực tuyến Vì thế, việc bán balo, túi xách online được xem là một trong những hướng đi đúng đắn, mang lại hiệu quả tối đa cho doanh nghiệp

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

Việc mua sắm online hiện nay là một xu thế trên toàn thế giới ở tất cả các mặt hàng vì không phải đi xa mà cũng chọn được sản phẩm mình ưng ý về kiểu dáng

Và việc mua sắm balo, túi xách cũng tương tự như vậy, khi có nhu cầu mua sắm

online chị em thường phân vân không biết nên chọn mua tại đâu mẫu mã đẹp và chất lượng uy tín 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 Do vậy em quyết định thực hiện đề tài này với mong muốn đưa đến nhiều sự lựa chon hơn cho khách hàng, và phát triển của hàng trên quy mô lớn hơn và giúp cho việc mua sắm balo, phụ kiện và những sản phẩm liên

11

quan trở nên dễ dàng hơn Những vấn đề như hạn chế ra đường khi không cần thiết, rất phù hợp cho dịch bệnh hiện tại, tiết kiệm thời gian cho khách hàng khi mọi hoạt động mua bán đều thực hiện qua online, khách hàng chỉ việc thanh toán và nhận hàng

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

3 Mục tiêu của đề tài

Mục tiêu của đề tài bao gồm:

- 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

4 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 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 balo, từ đó đưa ra các giải pháp để tiến hành xây dựng

12

- 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

5 Ý nghĩa thực tiển của đề tài:

Ý nghĩa thực tiễn của đề tài như sau:

- Ý nghĩa đối với doanh nghiệp:Website được xây dựng nhằm giúp quảng

bá thông tin sản phẩm , dịch vụ của hệ thống ra ngoài thị trường một cách rộng rãi Qua đó giúp tăng số lượng khách hàng sử dụng trang web và tăng doanh thu Bên cạnh đó, còn giúp cho doanh nghiệp, cá nhân giảm được chi phí

- Ý nghĩa đối với khách hàng: Giúp cho người sử dụng có thể nhanh

chóng lựa chọn những món hàng mà mình muốn đặt mà không cần đến cửa hàng

- Ý nghĩa đối với bản thân sinh viên: Qua đề tài này, em có thể xây dựng

một website để ứng dụng vào thực tế với giao diện thân thiện, dễ dàng sử dụng trong quá trình xem thông tin và dễ quản lý

6 Bố cục đề tài

Ngoài phần mở dầu và kết luận, nội dung đề tài tập chũng vào 3 chương sau:

- Chương 1 Công nghệ công cụ Chương này trình bày một số công nghệ

công cụ được sử dụng để xây dưng website như: HTML, CSS, JavaScript, PHP, Laravel, MySQL

- Chương 2 Phân tích thiết kế hệ thống Phân tích yêu cầu chức năng, sơ

đồ use case, biểu đồ hoạt động, phân tích cơ sở dữ 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

dủa đạt được như: thiết kế giao diện về phái người dùng, giao diện về phái người quản trị

13

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

1.1 Công nghệ

1.1.1 HTML

HTML (viết tắt của từ 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 Nó có thể được trợ giúp bởi các công nghệ như CSS và các ngôn ngữ kịch bản giống như JavaScript

Các trình duyệt web nhận tài liệu HTML từ một web server hoặc một kho lưu trữ cục bộ và render tài liệu đó thành các trang web đa phương tiện HTML mô tả cấu trúc của một trang web về mặt ngữ nghĩa và các dấu hiệu ban đầu được bao gồm cho sự xuất hiện của tài liệu

n 1: n min ọa TML

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

14

n 2:Ví dụ về code TML

HTML có thể nhúng các chương trình được viết bằng scripting như JavaScript, điều này ảnh hưởng đến hành vi và nội dung của các trang web Việc bao gồm CSS xác định giao diện và bố cục của nội dung World Wide Web Consortium (W3C), trước đây là đơn vị bảo trì HTML và là người duy trì hiện tại của các tiêu chuẩn CSS, đã khuyến khích việc sử dụng CSS trên HTML trình bày rõ ràng kể từ năm 1997

1.1.2 CSS

Cascading Style Sheets (CSS) – được dùng để miêu tả cách trình bày các

tài liệu viết bằng ngôn ngữ HTML và XHTML Ngoài ra ngôn ngữ định kiểu theo tầng cũng có thể dùng cho XML, SVG, XUL Các đặc điểm kỹ thuật của CSS được duy trì bởi World Wide Web Consortium (W3C) Thay vì đặt các thẻ quy định kiểu dáng cho văn bản HTML (hoặc XHTML) ngay trong nội dung của nó, bạn nên sử dụng CSS

n 3: n min ọa CSS

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… Hạn chế tối thiểu việc làm rối mã HTML của trang Web bằng các thẻ quy định kiểu dáng (chữ đậm,

15

chữ in nghiêng, chữ có gạch chân, chữ màu), khiến mã nguồn của trang Web được gọn gàng hơn, tách nội dung của trang Web và định dạng hiển thị, dễ dàng cho việc cập nhật nội dung Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránh phải lặp lại việc định dạng cho các trang Web giống nhau

JavaScript là một ngôn ngữ lập trình website, được tích hợp và nhúng trong

HTML giúp website sống động hơn JavaScript cho phép kiểm soát các hành vi của

trang web tốt hơn so với khi chỉ sử dụng mỗi HTML Vậy ứng dụng thực tiễn của JavaScript là gì? Các slideshow, pop-up quảng cáo và tính năng autocomplete của Google là những ví dụ dễ thấy nhất cho bạn, chúng đều được viết bằng JavaScript

n 5: n min ọa Javascrip

1.1.4 Thƣ viện Tailwind.css

n 7: n min ọa taidwindcss

17

Tailwind CSS nó là một utility-first CSS framework, nó cũng giống như

Bootstrap, nó có những class built-in mà chúng ta có thể dùng Tailwind CSS có nhiều các class bao gồm các thuộc tính CSS khác nhau và quan trọng, chúng ta có

thể dễ dàng mở rộng tạo mới ra những class bằng chính những class của nó

Một điều tiện lợi khi dùng framework này là chúng ta có nhiều class mới hơn tiện lợi hơn Boostrap Và hơn nữa, việc có nhiều thêm những class nhưng với quy tắc đặt tên cực kỳ thân thiện với người dùng, người dùng cũng có thể nhìn vào class đó

và có thể biết được class này nó đang style cái gì Chúng ta cũng phải nói đến khả năng tùy biến và mở rộng cao, đem đến cho ta sự linh hoạt không giới hạn

n 8:Ví dụ code taidwindcss 1.1.5 Icon boxicon.com

Boxicon là một thư viện chứa các font chữ ký hiệu hay sử dụng trong

website Font chữ ký hiệu ở đây chính là các icons mà ta thường hay sử dụng trong các layout website o Chúng được xây dựng thành nhiều định dạng file font khác nhau như file otf, eot, ttf, woff, svg, Vì vậy bạn dễ dàng đưa vào sử dụng và hầu hết các hệ điều hành máy tính hiện nay đều chạy được

n 9:Ví dụ boxicon

18

1.1.6 PHP

PHP: Hypertext Preprocessor, thường được viết tắt thành 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

n 10: n min ọa P P

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 nhất thế giới

n 11:Ví dụ code P P

19

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

n 12: n min ọa MySQL 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 CSDL trên internet Người dùng có thể tải về MySQL miễn phí từ trang chủ MySQL có nhiều phiên bản cho các hệ điều hành khác nhau: phiên bản Win32 cho các hệ điều hành dòng Windows, Linux, Mac OS

X, Unix, FreeBSD, NetBSD, Novell NetWare, SGI Irix, Solaris, SunOS,

n 13:Giao diện MySQL

20

1.1.8 Framework Laravel

n 14: n min ọa Laravel Laravel là một Frame Work miễn phí được thiết kế và phát triển bởi Taylor Otwell nhằm hỗ trợ các ứng dụng trang web theo cấu trúc model- view- controller

(MVC) một trong những cấu trúc tối ưu Website đang rất thịnh hành hiện nay

Laravel có khá nhiều ưu điểm từ việc cấu trúc câu lệnh rõ ràng, truy xuất dữ liệu đơn giản, một hệ thống đóng gói module tiện lợi và nhiều ưu điểm khác tạo ra một Framework mã nguồn mở đầy triển vọng để phát triển như hiện nay

1.2 Công cụ:

1.2.1 Visual Studio Code

Visual Studio Code là một trình biên tập mã Nó hỗ trợ nhiều ngôn ngữ và

chức năng tùy vào ngôn ngữ sử dụng theo như trong bảng sau Nhiều chức năng của Visual Studio Code không hiển thị ra trong các menu tùy chọn hay giao diện người dùng Thay vào đó, chúng được gọi thông qua khung nhập lệnh hoặc qua một tập tin Json (ví dụ như tập tin tùy chỉnh của người dùng) Khung nhập lệnh là một giao diện theo dòng lệnh Tuy nhiên, nó biến mất khi người dùng nhấp bất cứ nơi nào khác, hoặc nhấn tổ hợp phím để tương tác với một cái gì đó ở bên ngoài đó Tương tự như vậy với những dòng lệnh tốn nhiều thời gian để xử lý Khi thực hiện những điều trên thì quá trình xử lý dòng lệnh đó sẽ bị hủy

21

n 15:Giao diện visual studio code 1.2.2 Xampp

Xampp là một mã nguồn mở máy chủ web đa nền được phát triển

bởi Apache Friends, bao gồm chủ yếu là Apache HTTP Server, MariaDB database,

và interpreters dành cho những đối tượng sử dụng ngôn ngữ PHP và Perl Xampp là viết tắt của Cross-Platform (đa nền tảng-X), Apache (A), MariaDB (M), PHP (P)

và Perl (P) Nó phân bố Apache nhẹ và đơn giản, khiến các lập trình viên có thể dễ dàng tạo ra máy chủ web local để kiểm tra và triển khai trang web của mình Tất cả mọi thứ cần cho phát triển một trang web - Apache (ứng dụng máy chủ), Cơ sở dữ liệu (MariaDB) và ngôn ngữ lập trình (PHP) được gói gọn trong 1 tệp Xampp cũng

là 1 đa nền tảng vì nó có thể chạy tốt trên cả Linux, Windows và Mac Hầu hết việc triển khai máy chủ web thực tế đều sử dụng cùng thành phần như XAMPP nên rất

dễ dàng để chuyển từ máy chủ local sang máy chủ online

n 16:Giao diện XAMPP

22

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ề hình thức

Yêu cầu về hình thức của website gồm:

- Trang web nên có từ 1-2 màu chính và giữ những màu đó xuyên suốt cả

web site Một website đẹp khi màu chủ đạo là màu trắng, văn bản màu đen kết hợp với 1-2 màu nổi bật khác

- Sử dụng hình ảnh có chất lượng tốt và có cùng kích cỡ cho trang web để có

được sự đồng nhất trong cách sắp xếp hình ảnh, đảm bảo tính thẩm mỹ

- Logo tạo ấn tượng cho khách truy cập rằng trang web của doanh nghiệp

luôn đề cao sự nghiêm túc, chỉnh chu và chuyên nghiệp

- Thêm các icons bên cạnh nội dung để tăng tính minh họa mà không cần

phải thiết kế hình ảnh cũng tăng tính thu hút và thẩm mỹ cho trang web

- Phối hợp các font chữ với nhau để vừa đảm bảo tính thẩm mỹ vừa tạo sự

hài hòa dễ đọc cho khách đến xem trang web

- Những nội dung trên trang web phải được sắp xếp hợp lý

- Phải có sự liên kết ý chính xuyên suốt cả website, như vậy càng tăng tính

chuyên nghiệp cho thiết kế web

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

- Tắt hóa tất cả module không cần thiết

- Thiết lập quyền truy cập và hạn chế truy cập vào các tập tin và thư mục là

điều rất cần thiết

- Thường xuyên kiểm tra theo dõi thông tin truy cập

- Sử dụng mã hóa và các giao thức an toàn