ĐỀ tài WEBSITE bán đồ THỜI TRANG

 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ý tệp hình ảnh File Manager  Quản lý danh mục: Quản lý, thêm, sửa, xóa, danh mục  Quản lý sản phẩ

i

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

WEBSITE BÁN ĐỒ THỜI TRANG

Sinh viên thực hiện : Hoàng Hùng

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

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

ii

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

WEBSITE BÁN ĐỒ THỜI TRANG

Sinh viên: Hoàng Hùng

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

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

iii

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

iv

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 Cuối cùng em xin gửi lời cảm ơn sâu sắc nhất đến giảng viên Lê Thị Thu Nga – là giảng viên trực tiếp cố vấn giúp đỡ và hỗ trợ em hoàn thành đồ án này tốt đẹp nhất

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

Sinh viên, Hoàng Hùng

v

MỤC LỤC

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

DANH MỤC HÌNH VẼ x

MỞ ĐẦU 1

1.Giới thiệu 1

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

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

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

5.Ý nghĩa thực tiễn của đề tài 3

6.Bố cục đề tài 3

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

1 Công nghệ sử dụng 4

1.1 PHP 4

1.2 MYSQL (Cơ Sở Dữ Liệu ) 4

1.3 HTML 5

1.4 CSS 6

1.5 JavaScript 6

2 Công cụ hỗ trợ 7

2.1 XAMPP 7

2.2 PHPStorm 8

2.3 Navicat 8

3 Thư viện sử dụng 7

3.1 Laravel PHP Framwork 9

3.2 JQuery 9

3.3 Bootstrap 10

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

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

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

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

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

2.2 Phân tích yêu cầu 14

vi

2.2.1 Sơ đồ chức năng admin 14

2.2.2 Sơ đồ chức năng quản lý khách hàng (trang người dùng) 15

2.3 Sơ đồ Use case 15

2.3.1 Sơ đồ Use case tổng quát 15

2.3.2 Sơ đồ User case đăng nhập admin 17

2.3.3 Sơ đồ User case quản lý danh mục sản phẩm 18

2.3.4 Sơ đồ User case quản lý sản phẩm 19

2.3.5 Sơ đồ User case quản lý slide(banner) 20

2.3.6 Sơ đồ User case quản lý thương hiệu 21

2.3.7 Sơ đồ User case quản lý đơn vị vận chuyển 22

2.3.8 Sơ đồ User case quản lý đơn hàng 24

2.3.9 Sơ đồ User case quản lý thành viên 26

2.3.10 Sơ đồ User case quản lý bài viết 27

2.3.11 Sơ đồ User case quản lý mã giảm giá 28

2.3.12 Sơ đồ User case quản lý bình luận 29

2.3.13 Sơ đồ User case quản lý đánh giá 30

2.4 Phân tích cơ sở dữ lệu 31

2.4.1 Sơ đồ tổng quát 31

2.4.2 Danh sách các bảng dữ liệu 31

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

3.1 Giao diện chung 44

3.1.2 Giao diện trang giới thiệu của Website 45

3.1.2 Giao diện trang sản phẩm của website 47

3.1.4 Giao diện trang bài viết của website 48

3.1.5 Giao diện trang liên hệ của website 49

3.1.5 Giao diện trang chi tiết sản phẩm của website 50

3.2 Giao diện chức năng 51

3.2.1 Giao diện Đăng nhập khách hàng của website 51

3.2.2 Giao diện Đăng ký khách hàng của website 51

3.2.3 Giao diện Đăng ký khách hàng của Website 52

3.2.4 Giao diện Danh sách yêu thích của Website 52

3.2.5 Giao diện Thanh toán của website 53

3.3 Giao diện dành cho khách hàng 54

vii

3.3.1 Giao diện hiển thị đơn hàng 54

3.3.2 Giao diện hiển thị Đánh giá 54

3.3.3 Giao diện hiển thị Bình luận 55

3.3.4 Giao diện hiển thị Chi tiết đơn hàng 55

3.3.5 Giao diện hiển thị Trang thông tin cá nhân 56

3.3.5 Giao diện hiển thị Đổi mật khẩu 56

3.4 Giao diện dành cho quản trị 57

3.4.1 Giao diện hiển thị Banner 57

3.4.2 Giao diện hiển thị Thêm Banner 57

3.4.3 Giao diện hiển Sửa Banner 58

3.4.4 Giao diện hiển thị Danh mục sản phẩm 58

3.4.5 Giao diện hiển thị Thêm danh mục sản phẩm 59

3.4.6 Giao diện hiển thị Sửa danh mục sản phẩm 59

3.4.7 Giao diện hiển thị sản phẩm 60

3.4.8 Giao diện hiển thị Thêm sản phẩm 60

3.4.9 Giao diện hiển thị Sửa sản phẩm 61

3.4.10 Giao diện hiển thị Thương hiệu 61

3.4.11 Giao diện hiển thị thêm Thương hiệu 62

3.4.12 Giao diện hiển thị sửa Thương hiệu 62

3.4.13 Giao diện hiển Đơn vị vận chuyển 63

3.4.14 Giao diện hiển thị thêm Đơn vị vận chuyển 63

3.4.15 Giao diện hiển thị sửa Đơn vị vận chuyển 64

3.4.16 Giao diện hiển thị đơn hàng 64

3.4.17 Giao diện hiển thị chi tiết đơn hàng 65

3.4.18 Giao diện hiển thị sửa đơn hàng 65

3.4.19 Giao diện hiển thị đánh giá sản phẩm 66

3.4.20 Giao diện hiển thị sửa trạng thái đánh giá sản phẩm 66

3.4.21 Giao diện hiển thị bài viết 67

3.4.22 Giao diện hiển thị thêm bài viết 67

3.4.23 Giao diện hiển thị sửa bài viết 68

3.4.24 Giao diện hiển thị danh mục bài viết 68

3.4.25 Giao diện hiển thị thêm danh mục bài viết 69

3.4.26 Giao diện hiển thị thẻ tag bài viết 69

viii

3.4.27 Giao diện hiển thị thêm thẻ tag bài viết 70

3.4.28 Giao diện hiển thị sửa thẻ tag bài viết 70

3.4.29 Giao diện hiển thị bình luận 71

3.4.30 Giao diện hiển thị sửa trạng thái bình luận 71

3.4.31 Giao diện hiển thị mã giảm giá 72

3.4.32 Giao diện hiển thị thêm mã giảm giá 72

3.4.33 Giao diện hiển thị sửa mã giảm giá 73

3.4.34 Giao diện hiển thị tài khoản người dùng 73

3.4.35 Giao diện hiển thị thêm tài khoản người dùng 74

3.4.36 Giao diện hiển thị sửa tài khoản người dùng 74

3.4.37 Giao diện hiển thị cài đặt Website 75

KẾT LUẬN 76

TÀI LIỆU THAM KHẢO 77

x

DANH MỤC HÌNH VẼ

Hình 2.2.1.Sơ đồ chức năng admin……….12

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

Hình 2.3.1.Sơ đồ use case tổng quát… ……….………… 14

Hình 2.3.2.Sơ đồ use case đăng nhập admin … …… …… 15

Hình 2.3.3 Sơ đồ use case quản lý danh mục sản phẩm… … 16

Hình 2.3.4.Sơ đồ use case quản lý sản phẩm……… 17

Hình 2.3.5.Sơ đồ use case quản lý slide ……… 18

Hình 2.3.6.Sơ đồ use case quản lý thương hiệu……… … 19

Hình 2.3.7.Sơ đồ use case quản lý đơn vị vận chuyển… ……….20

Hình 2.3.8.Sơ đồ use case quản lý đơn hàng (admin)……….21

Hình 2.3.8.Sơ đồ use case quản lý đơn hàng (khách hàng)……….22

Hình 2.3.9.Sơ đồ use case quản lý tài khoản thành viên………….23

Hình 2.3.10.Sơ đồ use case quản lý bài viết… ……….24

Hình 2.3.11.Sơ đồ use case quản lý mã giảm giá… ……….25

Hình 2.3.12.Sơ đồ use case quản lý bình luận… ……… 26

Hình 2.3.13.Sơ đồ use case quản lý đánh giá… ………27

Hình 2.4.1.Sơ đồ Diagram Database tổng quát… ……….29

Từ những phần mềm quản lý giúp cho công việc bán hàng của cửa 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

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ời trang giới trẻ 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ời trang

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

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 dành cho giới trẻ 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ê cái đẹp là không thể thiếu 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

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

2

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

- 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

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 đồ thời trang, 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

3

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 cá nhâ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 chung vào 3 chương sau:

nghệ công cụ được sử dụng để xây dưng websỉe như: PHP, MYSQL,

HTML, JQUERY, JAVASCRIPT, CSS Ứng dụng mô hình MVC

vào xây dựng trang web.Ứng dụng Frameword Laravel vào xây dựng

trang web

- 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, phân tích cơ sở dữ liệu,… được trình bày chi tiết trong

chương này Thiết kế đặc tả hệ thống Xây dưng cơ sở dữ liệu trên

MySQL

kết qủa đạt được như: thiết kế giao diện về phái 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.

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 (Cơ Sở Dữ Liệu )

Hình 2 : Cơ sở dữ liệu MYSQL

MySQL là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, 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 MySQL miễn phí hoàn toàn cho nên bạn có thể tải về MySQL từ trang chủ MySQL là một trong những ví dụ rất cơ bản về Hệ Quản trị Cơ sở dữ liệu quan hệ sử dụng ngôn ngữ truy vấn

có cấu trúc (SQL) MySQL đang được sử dụng cho nhiều công việc kinh doanh từ nhỏ tới lớn

1.3 HTML

Hinh 3 : HTML Language

HTML được viết tắt của cụm từ Hypertext Markup Language Là một ngôn ngữ đánh

dấu , HTML được sử dụng để tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, titles, blockquotes… và HTML không phải là ngôn ngữ lập trình

HTML là một chuẩn ngôn ngữ internet được tạo ra và phát triển bởi tổ chức World Wide Web Consortium còn được viết tắc là W3C Trước đó thì HTML xuất bản theo chuẩn của RFC HTML được tương thích với mọi hệ điều hành cùng các trình duyệt của

nó Khả năng dễ học, dễ viết là một ưu điểm của HTML không những vậy việc soạn thảo đòi hỏi hết sức đơn giản, chúng ta có thể dùng word, notepad hay bất cứ một trình soạn thảo văn bản nào để viết và chỉ cần lưu với định dạng “.html “ hoặc “.htm” là đã

có thể tạo ra một file chứa HTML Hiện nay, phiên bản mới nhất của HTML là HTML5 với nhiều tính năng ưu việt so với các phiên bản cũ HTML cải tiến khá nhiều đặc biệt

hỗ trợ mạnh mẽ các phần tử multimedia mà không cần các plugin Một tập tin HTML bao gồm trong đó là các đoạn văn bản HTML, được tạo lên bởi các thẻ HTML HTML5 nói chung mạnh mẽ hơn nhiều không chỉ về tốc độ và độ thích ứng cao mà chính là khả

6

năng hỗ trợ API (Application Programming Interface - giao diện lập trình ứng dụng) và DOM (Document Object Model – các đối tượng thao tác văn bản)

1.4 CSS

CSS (Cascading Style Sheets) là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…CSS quy định cách hiển thị của các thẻ HTML bằng cách quy định các thuộc tính của các thẻ đó (font chữ, kích thước, màu sắc )

CSS có cấu trúc đơn giản và sử dụng các từ tiếng anh để đặt tên cho các thuộc tính CSS khi sử dụng có thể viết trực tiếp xen lẫn vào mã HTML hoặc tham chiếu từ một file css riêng biệt Hiện nay CSS thường được viết riêng thành một tập tin với mở rộng là “.css” Chính vì vậy mà các trang web có sử dụng CSS thì mã HTML sẽ trở nên ngắn gọn hơn Ngoài ra có thể sử dụng một tập tin CSS đó cho nhiều website tiết kiệm rất nhiều thời gian và công sức Một đặc điểm quan trọng đó là tính kế thừa của CSS do đó sẽ giảm được số lượng dòng code mà vẫn đạt được yêu cầu

1.5 JavaScript

Hình 5 : JavaScript

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

7

Client-Side script tương tác với người sử dụng và tạo các trang web động Nó là một ngôn ngữ chương trình thông dịch với các khả năng hướng đối tượng

JavaScript được biết đến đầu tiên với tên Mocha, và sau đó là LiveScript, nhưng công

ty Netscape đã đổi tên của nó thành JavaScript, bởi vì sự phổ biến như là một hiện tượng của Java lúc bấy giờ JavaScript xuất hiện lần đầu trong Netscape 2.0 năm 1995 với tên LiveScript Core đa năng của ngôn ngữ này đã được nhúng vào Netscape, IE, và các trình duyệt khác

2.Công cụ hỗ trợ

2.1 XAMPP

Hình 1 : Công cụ server XAMPP

Xampp 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 Không như Appserv, Xampp có chương trình quản lý khá tiện lợi, cho phép 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

Xampp là một chương trình 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 chương trình đa nền tảng vì nó có thể chạy tốt trên cả Linux, Windows và MacOS 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

8

2.2 PHPStorm

PhpStorm là một môi trường phát triển tích hợp (IDE), đa nền tảng cho PHP, được xây dựng bởi công ty JetBrains, hãng phần mềm hàng đầu thế giới về các công cụ cho lập trình và phát triển PhpStorm cung cấp trình soạn thảo cho PHP, HTML và JavaScript với khả năng phân tích mã nhanh, ngăn ngừa lỗi và tái cấu trúc tự động cho mã PHP và JavaScript

JetBrains PhpStorm được sử dụng chủ yếu bởi các nhà phát triển web, những người cần những công cụ thích hợp để chỉnh sửa PHP, HTML, CSS, JavaScript và các tập tin XML

PhpStorm giúp người dùng tạo và chỉnh sửa mã nguồn bất kể ngôn ngữ lập trình mà họ đang sử dụng Như bất kỳ trình soạn thảo IDE khác, nó đi kèm với các tính năng cơ bản như đánh dấu trang, hoàn thành mã, phóng to thu nhỏ, các điểm ngắt, vv Tuy nhiên, nó

có chứa các tính năng khác nhau như các macro, phân tích mã và nhanh chóng chuyển hướng để làm cho công việc của bạn dễ dàng hơn nhiều

PhpStorm được phát triển bằng ngôn ngữ Java do đó thừa hưởng rất nhiều lợi ích từ ngôn ngữ này, phần mềm chạy rất nhanh trên Linux, thích hợp code PHP, tối ưu việc sử dụng tài nguyên,…

2.3 Navicat

Hình 3: Navicat

Navicat Premium là một công cụ quản trị cơ sở dữ liệu đa kết nối nâng cao cho phép bạn kết nối đồng thời với tất cả các loại cơ sở dữ liệu một cách dễ dàng Navicat cho phép bạn kết nối với cơ sở dữ liệu MySQL, MariaDB, Oracle, PostgreSQL, SQLite và SQL Server từ một ứng dụng duy nhất, giúp quản trị cơ sở dữ liệu trở nên dễ dàng

9

Sẽ không còn phải sử dụng cửa sổ dòng lệnh đơn đọc bạn có thể dễ dàng và nhanh chóng xây dựng, quản lý và duy trì một cơ sở dữ liệu của mình bằng giao diện sinh động Nó

có thể giúp bạn kết nói với một máy chỉ database ở xa và cung cấp các công cụ tiện ích

mà bạn có thể sẽ bất ngờ Chương trình hoàn toàn tương thích với các cơ sở dữ liệu địa phương, mạng cũng như các đám mây như Amazon, SQL Azure, Oracle Cloud và Google Cloud

Tháng 6/2011, Taylor Otwell – người đã tạo ra bộ công cụ trợ giúp này Đã đưa Laravel vào hoạt động như một giải pháp thay thế cho CodeIgniter Với giải pháp này, lập trình viên (developer) đã được hỗ trợ nhiều tính năng mới mẻ với thao tác vô cùng đơn giản Eloquent ORM mạnh mẽ, xác thực đơn giản, phân trang hiệu quả, …là những tính năng thu hút sự chú ý của đông đảo người dùng của phiên bản đầu tiên này

3.2 JQuery

Hinh 2 : Thư Viện JQuery

10

JQuery là một thư viện JavaScript đa tính năng, nhỏ gọn, nhanh, được tạo bởi John Resig vào năm 2006 với một phương châm hết sức ý nghĩa: Write less, do more - Viết

ít hơn, làm nhiều hơn

JQuery đơn giản hóa việc duyệt tài liệu HTML, xử lý sự kiện, hoạt ảnh và tương tác Ajax để phát triển web nhanh chóng Các phân tích web đã chỉ ra rằng, jQuery là thư viện JavaScript được triển khai rộng rãi nhất

JQuery là một bộ công cụ JavaScript được thiết kế để đơn giản hóa các tác vụ khác nhau bằng cách viết ít code hơn

Các tính năng quan trọng mà JQuery hỗ trợ như : DOM (Document Object Model) , AJAX (Asynchronous Javascript and XML) , Xử lý sự kiện , Hiệu ứng động , gọn nhẹ

và hỗ trợ hầu hết bởi các trình duyệt hiện đại

3.3 Bootstrap

Hình 3 : Thư viện Bootstrap

Bootstrap là nền tảng framework HTML, CSS hay JavaScript cho phép lập trình viên có thể thiết được được website dựa trên responsive web mobile Là một front-end framework hoàn toàn miễn phí, giúp cho quá trình phát triển website được dễ dàng và tiện lợi hơn rất nhiều

Hiện nay Bootstrap đã có rất nhiều mẫu thiết kế được dựa trên các ngôn ngữ lập trình trên HTML và CSS như typography, form, buttons, tables hay navigitations, modals hay images … cũng như có nhiều các plugin JavaScript tuỳ chọn khác nhau

Bootstrap được xây dựng và phát triển bởi Mark Otto và Jacob Thornton tại Twitter, và được phát hành giống như một sản phẩm nguồn mở vào tháng 8/2011 trên GitHub

11

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

 Thêm vào giỏ hàng, cập nhật giỏ hang

 Thêm danh sách các món đồ được yêu thích , cập nhập danh sách

 Trang quản lý xem chi tiết đơn hàng đã đặt , bình luận , đánh giá

 Lọc sản phẩm

 Xem thông tin hỗ trợ của cửa hàng

 Cho phép liên hệ với người quản trị

-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ý tệp hình ảnh (File Manager)

 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ương hiệu: Quản lý, thêm, sửa, xóa thương hiệu

 Quản lý đơn vị giao hàng: Quản lý, thêm, sửa, xóa các đơn vị vận chuyện hàng cho cửa hàng hiện tại

 Quản lý đánh giá : Quản lý, sửa, xóa các đánh giá của khách hàng

 Quản lý bài viết : Quản lý, thêm, sửa, xóa, cập nhập các tin tức mới nhất cho cửa hàng, thêm danh mục dễ quản lý bài viết, thêm thẻ tag dễ cho khách hàng tìm kiếm nắm bắt được thông tin khi cần

 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ý mã giảm giá : Quản lý, thêm, sửa, xóa mã giảm giá theo từng thời kỳ của cửa hàng áp dụng

 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

 Quản lý cài đặt cho hệ thống : Cập nhật giao diện, quảng cáo website

12

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ủ

Thêm, sửa, xóa

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

Hình

Danh mục phẩm Sản

Thươ

ng hiệu

Vận Chuy

ển

Đơn hàng

Tài khoả

n

Bài viết

Giảm giá

Đánh giá

Bình luận

14

2.3 Sơ đồ use case

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

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

Chú thích : QL => Quản lý

15

2.3.2 Sơ đồ use case đăng nhập admin

Hình 2.3.2 Sơ đồ use case đăng nhập admin

Tác nhân: Admin

Mô tả: Use case cho admin đăng nhập vào hệ thống

Điều kiện trước: admin đăng nhập vào hệ thống

Dòng sự kiện chính:

Chọn chức năng đăng nhập

Giao diện đăng nhập hiển thị

 Nhập mã admin, mật khẩu vào giao diện đăng nhập

 Hệ thống kiểm tra mã admin và mật khẩu nhập của admin Nếu nhập sai mã admin hoặc mật khẩu thì chuyển sang dòng sự kiện rẽ nhánh A1 Nếu nhập đúng thì hệ thống sẽ chuyển tới trang quản trị

Use case kết thúc

Dòng sự kiện rẽ nhánh:

16

 Dòng rẽ nhánh A1: admin đăng nhập không thành công

 Hệ thống thông báo quá trình đăng nhập không thành công do sai mã admin hoặc mật khẩu

 Chọn nhập lại hệ thống yêu cầu nhập lại mã admin, mật khẩu

 Use case kết thúc

Kết quả: admin đăng nhập thành công và có thể sử dụng các chức năng quản lý tương ứng trong trang quản trị

2.3.3 Sơ đồ use case quản lý danh mục sản phẩm

Hình 2.3.3: Sơ đồ use case quản lý danh mục sản phẩm

17

 Xóa thông tin danh mục sản phẩm: hệ thống hiển thị danh sách danh mục sản phẩm, chọn danh mục sản phẩm cần xóa, nếu việc thay đổi thông tin thành công hệ thống sẽ đưa ra thông báo, nếu sai thì thực hiện dòng rẽ nhánh A1, lưu thông tin danh sách danh mục sản phẩm

 Kết quả: các thông tin về danh mục sản phẩm được cập nhật trong cơ sở dữ liệu

2.3.4 Sơ đồ use case quản lý sản phẩm

Hình 3.3.4 : Sơ đồ use case quản lý sản phẩm

Tác nhân: Admin

Mô tả: use case cho phép xem, thêm, sửa, xóa, tìm kiếm thông tin sản phẩm trong hệ thống Điều kiện trước: admin đã đăng nhập vào hệ thống

Dòng sự kiện chính:

Người sử dụng chọn kiểu tác động: thêm, sửa, xóa, tìm kiếm thông tin sản phẩm

 Thêm thông tin sản phẩm: chọn thêm sản phẩm, hệ thống hiển thị giao diện nhập thông tin sản phẩm và danh sách sản phẩm, người sử dụng nhập thông tin sản phẩm, nếu thành công

hệ thống đưa ra thông báo, nếu sai thực hiện dòng rẽ nhánh A1, lưu thông tin vào danh sách sản phẩm

 Sửa thông tin sản phẩm: hệ thống hiển thị danh sách sản phẩm, chọn sản phẩm cần sửa, nhập các thông tin cần thay đổi, nếu việc thay đổi thông tin thành công hệ thống sẽ đưa ra thông báo, nếu sai thì thực hiện dòng rẽ nhánh A1, lưu thông tin danh sách sản phẩm

 Xóa thông tin sản phẩm: hệ thống hiển thị danh sách sản phẩm, chọn sản phẩm cần xóa, nếu việc thay đổi thông tin thành công hệ thống sẽ đưa ra thông báo, nếu sai thì thực hiện dòng rẽ nhánh A1, lưu thông tin danh sách sản phẩm

 Tìm kiếm sản phẩm: nhập thông tin tìm kiếm vào ô tìm kiếm trong danh sách, hệ thống

sẽ hiển thị danh sách tìm kiếm được

Use case kết thúc

Dòng sự kiện rẽ nhánh A1: hệ thống thông báo việc nhập dữ liệu không hợp lệ, nhập lại thông tin, quay lại thực hiện lại của dòng sự kiện chính

18

Kết quả: các thông tin về sản phẩm được cập nhật trong cơ sở dữ liệu

2.3.5 Sơ đồ use case quản lý slide (banner)

Hình 2.3.5 : Sơ đồ use case quản lý slide

Tác nhân: Admin

Mô tả: use case cho phép xem, thêm, sửa, xóa, tìm kiếm thông tin slide trong hệ thống Điều kiện trước: admin đã đăng nhập vào hệ thống

Dòng sự kiện chính:

 Người sử dụng chọn kiểu tác động: thêm, sửa, xóa, tìm kiếm thông tin slide

 Thêm thông tin Slide: chọn thêm Slide, hệ thống hiển thị giao diện nhập thông tin Slide và danh sách Slide, người sử dụng nhập thông tin Slide, nếu thành công hệ thống đưa ra thông báo, nếu sai thực hiện dòng rẽ nhánh A1, lưu thông tin vào danh sách Slide

 Sửa thông tin Slide: hệ thống hiển thị danh sách Slide, chọn Slide cần sửa, nhập các thông tin cần thay đổi, nếu việc thay đổi thông tin thành công hệ thống sẽ đưa ra thông báo, nếu sai thì thực hiện dòng rẽ nhánh A1, lưu thông tin danh sách Slide

 Xóa thông tin Slide: hệ thống hiển thị danh sách Slide, chọn Slide cần xóa, nếu việc thay đổi thông tin thành công hệ thống sẽ đưa ra thông báo, nếu sai thì thực hiện dòng rẽ nhánh A1, lưu thông tin danh sách Slide

 Tìm kiếm slide : nhập thông tin tìm kiếm vào ô tìm kiếm trong danh sách, hệ thống sẽ hiển thị danh sách tìm kiếm được

19

2.3.6 Sơ đồ use case quản lý thương hiệu

Hình 2.3.6 : Sơ đồ use case quản lý thương hiệu

Tác nhân: Admin

Mô tả: use case cho phép xem, thêm, sửa, xóa, tìm kiếm thương hiệu trong hệ thống

Điều kiện trước: admin đã đăng nhập vào hệ thống

 Sửa thông tin thương hiệu: hệ thống hiển thị danh sách thương hiệu, chọn thương hiệu cần sửa, nhập các thông tin cần thay đổi, nếu việc thay đổi thông tin thành công hệ thống sẽ đưa ra thông báo, nếu sai thì thực hiện dòng rẽ nhánh A1, lưu thông tin danh sách thương hiệu

 Xóa thông tin thương hiệu: hệ thống hiển thị danh sách thương hiệu, chọn thương hiệu cần xóa, nếu việc thay đổi thông tin thành công hệ thống sẽ đưa ra thông báo, nếu sai thì thực hiện dòng rẽ nhánh A1, lưu thông tin danh sách thương hiệu

 Tìm kiếm thương hiệu: nhập thông tin tìm kiếm vào ô tìm kiếm trong danh sách,

hệ thống sẽ hiển thị danh sách tìm kiếm được

 Kết quả: các thông tin về thương hiệu được cập nhật trong cơ sở dữ liệu

20

2.3.7 Sơ đồ use case quản lý đơn vị vận chuyển

Hình 2.3.7 Sơ đồ use case quản lý đơn vị vận chuyển

 Xóa thông tin Đơn vị vận chuyển: hệ thống hiển thị danh sách đơn vị vận chuyển, chọn đơn vị vận chuyển cần xóa, nếu việc xóa thông tin thành công hệ thống sẽ đưa ra thông báo, nếu sai thì thực hiện dòng rẽ nhánh A1, lưu thông tin danh sách đơn

vị vận chuyển

 Tìm kiếm đơn vị vận chuyển: nhập thông tin tìm kiếm vào ô tìm kiếm trong danh sách, hệ thống sẽ hiển thị danh sách tìm kiếm được

 Use case kết thúc

21

 Dòng sự kiện rẽ nhánh A1: hệ thống thông báo việc nhập dữ liệu không hợp lệ, nhập lại thông tin, quay lại thực hiện lại của dòng sự kiện chính

 Kết quả: các thông tin về đơn vị vận chuyển được cập nhật trong cơ sở dữ liệu

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

2.3.8.1 Phía Admin

Hình 2.3.8 Sơ đồ use case quản lý đơn hàng (admin)

Tác nhân: Admin

Mô tả: use case cho phép xem, sửa, xóa, tìm kiếm thông tin đơn hàng

Điều kiện trước: admin đã đăng nhập vào hệ thống

Dòng sự kiện chính:

 Người sử dụng chọn kiểu tác động: xem, sửa, xóa, tìm kiếm thông tin đơn hàng

 Xem thông tin đơn hàng: chọn Danh sách đơn hàng, hệ thống hiển thị giao diện danh sách đơn hàng, nếu người dùng muốn xem chi tiết của đơn hàng ,chọn vào đơn hàng cần hiển thị chi tiết ,và có thể chọn xuất ra tệp pdf nếu muốn bằng nút xuất dữ liệu

 Sửa trạng thái đơn hàng: hệ thống hiển thị danh sách đơn hàng, chọn đơn hàng sửa, nhập các thông tin trạng thái hiện tại, nếu việc thay đổi thông tin trạng thái thành công hệ thống sẽ đưa ra thông báo, nếu sai thì thực hiện dòng rẽ nhánh A1, lưu thông tin danh sách đơn hàng

22

 Xóa thông tin đơn hàng hệ thống hiển thị danh sách đơn hàng, chọn đơn hàng cần xóa, nếu việc xóa thông tin thành công hệ thống sẽ đưa ra thông báo, nếu sai thì thực hiện dòng rẽ nhánh A1, lưu thông tin danh sách đơn hàng

 Tìm kiếm đơn hàng: nhập thông tin tìm kiếm vào ô tìm kiếm trong danh sách,

hệ thống sẽ hiển thị danh sách tìm kiếm được

Mô tả: use case cho phép xem, tìm kiếm thông tin đơn hàng

Điều kiện trước: khách hàng đã đăng nhập vào hệ thống

Dòng sự kiện chính:

 Người sử dụng chọn kiểu tác động: xem, xóa, tìm kiếm thông tin đơn hàng

 Xem thông tin đơn hàng: chọn Danh sách đơn hàng, hệ thống hiển thị giao diện danh sách đơn hàng, nếu người dùng muốn xem chi tiết của đơn hàng ,chọn vào đơn hàng cần hiển thị chi tiết ,và có thể chọn xuất ra tệp pdf nếu muốn bằng nút xuất dữ liệu

 Tìm kiếm đơn hàng: nhập thông tin tìm kiếm vào ô tìm kiếm trong danh sách,

hệ thống sẽ hiển thị danh sách tìm kiếm được

 Use case kết thúc

23

 Dòng sự kiện rẽ nhánh A1: hệ thống thông báo việc nhập dữ liệu không hợp lệ, nhập lại thông tin, quay lại thực hiện lại của dòng sự kiện chính

 Kết quả: các thông tin về đơn hàng được cập nhật trong cơ sở dữ liệu

2.3.9 Sơ đồ use case quản lý tài khoản thành viên

Hình 2.3.9 Sơ đồ use case quản lý tài khoản thành viên

 Sửa thông tin tài khoản thành viên: hệ thống hiển thị danh sach tài khoản thành viên, chọn tài khoản thành viên cần sửa thông tin, nếu thay đổi thành công hệ thống sẽ đưa ra thông báo, nếu sai thì thực hiện dòng rẽ nhánh A1, lưu thông tin danh sách tài khoản thành viên

Use case kết thúc

24

Dòng sự kiện rẽ nhánh A1: hệ thống thông báo việc nhập dữ liệu không hợp lệ, nhập lại thông tin, quay lại thực hiện lại của dòng sự kiện chính

Kết quả: các thông tin về tài khoản thành viên được cập nhật trong cơ sở dữ liệu

2.3.10 Sơ đồ use case quản lý bài viết

Hình 2.3.10 Sơ đồ use case quản lý bài viết

Tác nhân: Admin

Mô tả: use case cho phép xem, thêm, sửa, xóa, tìm kiếm thông tin bài viết trong hệ thống Điều kiện trước: admin đã đăng nhập vào hệ thống

Dòng sự kiện chính:

Người sử dụng chọn kiểu tác động: thêm, sửa, xóa thông tin bài viết

 Thêm thông tin bài viết: chọn thêm bài viết, hệ thống hiển thị giao diện nhập thông tin bài viết và danh sách bài viết, người sử dụng nhập thông tin bài viết, nếu thành công hệ thống đưa ra thông báo, nếu sai thực hiện dòng

rẽ nhánh A1, lưu thông tin vào danh sách bài viết

 Sửa thông tin bài viết: hệ thống hiển thị danh sách bài viết, chọn bài viết cần sửa, nhập các thông tin cần thay đổi, nếu việc thay đổi thông tin thành công hệ thống sẽ đưa ra thông báo, nếu sai thì thực hiện dòng rẽ nhánh A1, lưu thông tin danh sách bài viết

 Xóa thông tin bài viết: hệ thống hiển thị danh sách bài viết, chọn bài viết cần xóa, nếu việc thay đổi thông tin thành công hệ thống sẽ đưa ra thông

Kết quả: các thông tin về bài viết được cập nhật trong cơ sở dữ liệu

2.3.11 Sơ đồ use case quản lý mã giảm giá

Hình 2.3.11 Sơ đồ use case quản lý mã giảm giá

Người sử dụng chọn kiểu tác động: thêm, sửa, xóa thông tin mã giảm giá

 Thêm thông tin mã giảm giá: chọn thêm mã giảm giá, hệ thống hiển thị giao diện nhập thông tin mã giảm giá và danh sách mã giảm giá, người sử dụng nhập thông tin mã giảm giá, nếu thành công hệ thống đưa ra thông báo, nếu sai thực hiện dòng rẽ nhánh A1, lưu thông tin vào danh sách mã giảm giá

 Sửa thông tin mã giảm giá: hệ thống hiển thị danh sách mã giảm giá, chọn

mã giảm giá cần sửa, nhập các thông tin cần thay đổi, nếu việc thay đổi thông tin thành công hệ thống sẽ đưa ra thông báo, nếu sai thì thực hiện dòng rẽ nhánh A1, lưu thông tin danh sách mã giảm giá

26

 Xóa thông tin mã giảm giá: hệ thống hiển thị danh sách mã giảm giá, chọn

mã giảm giá cần xóa, nếu việc thay đổi thông tin thành công hệ thống sẽ đưa ra thông báo, nếu sai thì thực hiện dòng rẽ nhánh A1, lưu thông tin danh sách mã giảm giá

Use case kết thúc

Dòng sự kiện rẽ nhánh A1: hệ thống thông báo việc nhập dữ liệu không hợp lệ, nhập lại thông tin, quay lại bước 1 của dòng sự kiện chính

Kết quả: các thông tin về mã giảm giá được cập nhật trong cơ sở dữ liệu

2.3.12 Sơ đồ use case quản lý bình luận

Hình 2.3.12 Sơ đồ use case quản lý bình luận

Tác nhân: Admin hoặc khách hàng

Mô tả: use case cho phép xem, sửa, xóa, tìm kiếm thông tin bình luận

Điều kiện trước: admin hoặc khách hàng đã đăng nhập vào hệ thống

Dòng sự kiện chính:

 Người sử dụng chọn kiểu tác động: xem, sửa, xóa, tìm kiếm thông tin bình luận

 Xem thông tin bình luận: chọn Danh sách bình luận, hệ thống hiển thị giao diện danh sách bình luận, nếu người dùng muốn xem chi tiết của bình luận,chọn vào bình luận cần hiển thị chi tiết

 Sửa trạng thái bình luận: hệ thống hiển thị danh sách bình luận, chọn bình luận sửa, nhập các thông tin trạng thái hiện tại, nếu việc thay đổi thông tin trạng thái thành công hệ thống sẽ đưa ra thông báo, nếu sai thì thực hiện dòng rẽ nhánh A1, lưu thông tin danh sách bình luận

27

 Xóa thông tin bình luận hệ thống hiển thị danh sách bình luận, chọn bình luận cần xóa, nếu việc xóa thông tin thành công hệ thống sẽ đưa ra thông báo, nếu sai thì thực hiện dòng rẽ nhánh A1, lưu thông tin danh sách bình luận

 Tìm kiếm bình luận: nhập thông tin tìm kiếm vào ô tìm kiếm trong danh sách,

hệ thống sẽ hiển thị danh sách tìm kiếm được

 Use case kết thúc

 Dòng sự kiện rẽ nhánh A1: hệ thống thông báo việc nhập dữ liệu không hợp lệ, nhập lại thông tin, quay lại thực hiện lại của dòng sự kiện chính

 Kết quả: các thông tin về bình luận được cập nhật trong cơ sở dữ liệu

2.3.13 Sơ đồ use case quản lý đánh giá

Hình 2.3.13 Sơ đồ use case quản lý đánh giá

Tác nhân: Admin hoặc khách hàng

Mô tả: use case cho phép xem, sửa, xóa, tìm kiếm thông tin đánh giá

Điều kiện trước: admin hoặc khách hàng đã đăng nhập vào hệ thống

Dòng sự kiện chính:

 Người sử dụng chọn kiểu tác động: xem, sửa, xóa, tìm kiếm thông tin đánh giá

 Xem thông tin đánh giá: chọn Danh sách đánh giá, hệ thống hiển thị giao diện danh sách đánh giá, nếu người dùng muốn xem chi tiết của đánh giá, chọn vào đánh giá cần hiển thị chi tiết

 Sửa trạng thái đánh giá: hệ thống hiển thị danh sách đánh giá, chọn đánh giá sửa, nhập các thông tin trạng thái hiện tại, nếu việc thay đổi thông tin trạng thái thành công hệ thống sẽ đưa ra thông báo, nếu sai thì thực hiện dòng rẽ nhánh A1, lưu thông tin danh sách đánh giá

28

 Xóa thông tin đánh giá hệ thống hiển thị danh sách đánh giá, chọn đánh giá cần

xóa, nếu việc xóa thông tin thành công hệ thống sẽ đưa ra thông báo, nếu sai thì thực

hiện dòng rẽ nhánh A1, lưu thông tin danh sách đánh giá

 Tìm kiếm đánh giá: nhập thông tin tìm kiếm vào ô tìm kiếm trong danh sách, hệ

thống sẽ hiển thị danh sách tìm kiếm được

 Use case kết thúc

 Dòng sự kiện rẽ nhánh A1: hệ thống thông báo việc nhập dữ liệu không hợp lệ,

nhập lại thông tin, quay lại thực hiện lại của dòng sự kiện chính

 Kết quả: các thông tin về đánh giá được cập nhật trong cơ sở dữ liệu

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

2.4.1.Sơ đồ tổng quát

Hình 2.4.1: Sơ đồ diagram database tổng quát

2.4.2 Danh sách các bảng dữ liệu

thay đổi mật khẩu (theo từng

người dùng )

mục bài viết

luận bài viết

tag bài viết

viết

slug Tạo đường dẫn

Text

status Trạng thái

slide

Enum(active or inactive) create_at Thời gian khởi