xây dựng website bán quà lưu niệm sử dụng vuejs laravel

Nắm bắt được nhu cầu đó với việc chọn và thực hiện đề tài “Xây dựng Website bán quà lưu niệm sử dụng công nghệ Vuejs và Laravel”, với mong muốn xây dựng một Website nhằm đáp ứng các nhu

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á

ĐỒ ÁN TỐT NGHIỆP

LƯU NIỆM SỬ DỤNG VUEJS + LARAVEL

Sinh viên thực hiên:TRƯƠNG CAO DƯƠNG

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á

ĐỒ ÁN TỐT NGHIỆP

LƯU NIỆM SỬ DỤNG VUEJS + LARAVEL

Sinh viên thực hiên:TRƯƠNG CAO DƯƠNG

LỜI NÓI ĐẦU

Hiện nay trong sự phát triển không ngừng chỉ của xã hội, việc ứng dụng công nghệ thông tin cùng việc tin học hóa hiện đại hóa được xem là một trông những thành phần quyết định, tất yếu trong hoạt động của các chính phủ và các tổ chúc cũng như các doanh ngiệp, đoàn thể, nó đóng vai trò vô cùng quan trọng, có thể tạo ra những bước đột

phá, cái tiến rõ rệt, vô cùng mạnh mẽ trông mọi hoạt động

Vì vậy việc sở hữu riêng cho mình một trang web dược xem như là một chiến lược quảng cáo, cạnh tranh của các doanh nghiệp, công ty, đơn vị, đoàn thể trong việc tiếp thị, giới thiệu, quảng bá sảm phẩm cũng như kinh doanh các sản phẩm, khả năng mở rộng khi hoạt động kinh doanh tăng lên Thông qua Website, thông tin về doanh nghiệp, công ty, đơn vị, đoàn thể dịch vụ mới, sản phẩm mới… sẽ đến dược với những người quan tâm, đến với những khách hàng của họ một cách nhanh chóng dễ dàng Nắm bắt được nhu cầu đó với việc chọn và thực hiện đề tài “Xây dựng Website bán quà lưu niệm sử dụng công nghệ Vuejs và Laravel”, với mong muốn xây dựng một Website nhằm đáp ứng các nhu cầu cung cấp thông tin sản phẩm một cách linh hoạt nhất tới tay người tiêu dùng cũng như cải thiện doanh số kinh doanh của doanh nghiệp, cá nhân kinh nhân cùng với khả năng quản lý dễ dàng trong việc quản lý và cập nhật thông tin Website

Em xin gửi lời cảm ơn chân thành đến với giảng viên hướng dẫn, cô Ngô Thị Hoa đã tận tình hướng dẫn em hoàn thành đồ án này Một lần nữa, em xin gửi lời cảm ơn đến tất cả các thầy cô Trường Đại học Công nghệ Đông Á đã giảng dạy, giúp đỡ em trong thời gian vừa qua

LỜI CẢM ƠN

Em xin gửi lời cảm ơn chân thành tới cô Ngô Thị Hoa đã hướng dẫn em trong suốt quá trình làm báo cáo thực tập tốt nghiệp Trong thời gian được làm việc với cô, em không những học hỏi được nhiều kiến thức bổ ích mà còn học được tinh thần làm việc và thái độ làm việc nghiêm túc của cô

Trong suốt quá trình thực hiện đề tài này, mặc dù đã nổ lực hết sức mình nhưng báo cáo của em khó tránh khỏi những sai sót Em rất mong nhận được sự thông cảm và chỉ bảo tận tình của quý thầy cô Một lần nữa em xin chân thành cảm ơn!

Bắc Ninh, năm 2023

Sinh viên thực hiện

Trương Cao Dương

CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI 8

1.1 Giới thiệu đề tài 8

1.5.4 Cơ sở dữ liệu MySQL 17

1.5.5 Firebase và Firebase storage 19

1.5.6 Xampp 19

1.6 Lợi ích của Website trong thương mại điện tử 20

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 21

2.1 Phân tích nghiệp vụ và hệ thống 21

2.1.1 Đặc tả Actor Khách hàng 21

2.1.2 Đặc tả Actor Quản trị viên 21

2.2 Biểu đồ luồng dữ liệu 21

2.2.1 Biểu đồ luồng dữ liệu mức khung cảnh 21

2.2.2 Biểu đồ luồng dữ liệu mức đỉnh 22

2.2.3 Biểu đồ luồng dữ liệu mức dưới đỉnh 22

2.3 Biểu đồ phân rã chức năng 24

2.4 Biểu đồ Use Case và mô tả kịch bản ca sử dụng 26

2.4.1 Biểu đồ Use Case 26

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

2.6.1 Cấu trúc bảng cơ sở dữ liệu 37

MỤC LỤC HÌNH ẢNH

Hình 1 Mô hình Client-Server 10

Hình 2 Sơ đồ hoạt động của Laravel theo mô hình MVC 13

Hình 3 Cấu trúc thư mục của dự án Laravel 14

Hình 4 VueJS code 17

Hình 5 Biểu đồ luồng dữ liệu mức khung cảnh 21

Hình 6 Biểu đồ luồng dữ liệu mức đỉnh 22

Hình 7 Biểu đồ luồng dữ liệu mức dưới đỉnh chức năng quản lý bán hàng 22

Hình 8 Biểu đồ luồng dữ liệu mức dưới đỉnh chức năng quản lý user 23

Hình 9 Biểu đồ luồng dữ liệu mức dưới đỉnh chức năng quản lý sản phẩm 23

Hình 10 Biểu đồ phân rã chức năng hệ thống 24

Hình 11 Biểu đồ Use Case 27

Hình 12 Biểu đồ tuần tự xem sản phẩm 33

Hình 13 Biểu đồ tuần tìm kiếm sản phẩm 34

Hình 14 Biểu đồ tuần thêm giỏ hàng 34

Hình 15 Biểu đồ tuần tự xóa giỏ hàng 35

Hình 16 Biểu đồ tuần tự đăng nhập admin 35

Hình 17 Biểu đồ tuần tự duyệt đơn hàng 36

Hình 27 Đăng nhập trang quản trị 50

Hình 28 Bảng điều khiển trang quản trị 51

Hình 29 Quản lý sản phẩm 52

Hình 30 Quản lý thêm sản phẩm 53

Hình 31 Quản lý danh mục sản phẩm 54

Hình 32 Quản lý thêm danh mục sản phẩm 55

Hình 33 Quản lý sửa danh mục sản phẩm 56

Hình 34 Quản lý đơn hàng 57

Hình 35 Quản lý cập nhật đơn hàng 58

MỤC LỤC BẢNG BIỂU

Bảng 1 Cấu trúc thư mục của Laravel 15

Bảng 2 Mô tả kịch bản xem sản phẩm 27

Bảng 3 Mô tả kịch tìm kiếm sản phẩm 28

Bảng 4 Mô tả kịch bản xem bài viết tin tức 28

Bảng 5 Mô tả kịch bản thêm/cập nhật sản phẩm trong giỏ hàng 29

Bảng 6 Mô tả kịch bản quản lý danh mục 29

Bảng 7 Mô tả kịch bản quản lý sản phẩm 30

Bảng 8 Mô tả kịch bản quản lý đơn hàng 31

Bảng 9 Mô tả kịch bản quản lý người dùng 32

TCP/IP Transmission Control Protocol/ Internet Protocol - Giao thức điều khiển truyền nhận/ Giao thức liên mạng

ERD Entity Relationship Diagram – Sơ đồ thực tể liên kết

CLI Command Line Interface

APP Application - Ứng dụng

FCM Firebase Cloud Messaging

CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI

1.1 Giới thiệu đề tài

Bán hàng trực tuyến hiện nay đang được coi là một trong những chiến lược kinh doanh cực kỳ hiệu quả đối với các cửa hàng doanh nghiệp kinh doanh và đặc biệt là xây dựng hệ thống Website kết hợp với các trang mạng xã hội đang phát triển hiện nay như Facebook,TikTok … Đã đem lại rất thành công cho nhiều doanh nghiệp và cửa hàng đặc biệt là trong thời đại công nghệ, cho nên nhu cầu mua sắm online càng nhiều Đã có rất nhiều ngôn ngữ, Framework xây dựng hệ thống bán hàng trực tuyến rất thuận tiện và thành công và đã thu lại một nguồn lợi nhuận rất lớn ví dụ như các cửa hàng Thegioididong, FPTShop, Lazada… họ đã rất thành công với việc bán hàng từ hệ thống Website Bên cạnh những lợi ích từ việc xây dựng hệ thống Website bán hàng thì cũng gặp không ít khó khăn trong việc chọn ngôn ngữ, Framework để xây dựng hệ thống để đáp ứng đầy đủ nhu cầu của người kinh doanh và khách hàng tìm kiếm thông tin

Do đó em chọn đề tài “Xây dựng website bán quà lưu niệm sử dụng VueJS + Laravel” có thể phần nào giúp cửa hàng trình bày sản phẩm và thông tin, giúp cho khách hàng có thể có nhu cầu tìm kiếm thông tin sản phẩm và đặt hàng online một cách dễ dàng

1.2 Mục đích đề tài

Xây dựng hệ thống Website trình bày sản phẩm, tin tức, giới thiệu, thông tin chi tiết cho từng sản phẩm, tin tức, và có thể quản lý sản phẩm, tin tức, các module, một cách thuận tiện và thân thiện với người dùng nhất Nghiên cứu và đưa một số công nghệ vào hệ thống Website, cung cấp thông tin hữu ích về sản phẩm, hỗ trợ đẩy mạnh kinh doanh cũng như vấn đề về bảo mật, giúp khách hàng có thể dễ dàng tìm kiếm thông tin và một giao diện đẹp nhất

1.3 Đối tượng phạm vi nghiên cứu

- Đối tượng nghiên cứu:

+ MySQL + JavaScript

- Phạm vi nghiên cứu đối với các hoạt động liên quan đến bán hàng qua mạng

+ Hiển thị và quản lý thông tin sản phẩm + Quản lý đơn hàng

+ Quản lý sản phẩm

+ Quản lý danh mục sản phẩm + Quản lý danh mục bài viết + Quản lý bài viết

+ Quản lý người dùng 1.4 Ý nghĩa đề tài

Với việc xây dựng được một Website bán đồ quà lưu niệm trực tuyến sẽ giúp ích được nhiều cho chủ cửa hàng vừa và nhỏ có thể quản lý được các sản phẩm của mình khi thống kê và giao dịch, công việc sẽ được rút ngắn xuống Có thể giúp người tiêu dùng có thể tiếp cận được những sản phẩm mà không cần phải đến trực tiếp, hỗ trợ thông tin sản phẩm Người tiêu dùng cũng có thể gửi phản ánh những thắc mắc về sản phẩm về cho chủ cửa hàng biết

1.5 Cơ sở lý thuyết

1.5.1 Mô hình Client – Server 1.5.1.1 Khái niệm

Mô hình Client - Server là mô hình mạng máy tính trong đó các máy tính con được đóng vai trò như một máy khách, chúng làm nhiệm vụ gửi yêu cầu đến các máy chủ Để máy chủ xử lý yêu cầu và trả kết quả về cho máy khách đó

Hình 1 Mô hình Client-Server

1.5.1.2 Nguyên tắc hoạt động

Trong mô hình Client Server, server chấp nhận tất cả các yêu cầu hợp lệ từ mọi nơi khác nhau trên Internet, sau đó trả kết quả về máy tính đã gửi yêu cầu đó

Máy tính được coi là máy khách khi chúng làm nhiệm vụ gửi yêu cầu đến các máy chủ và đợi câu trả lời được gửi về

Để máy khách và máy chủ có thể giao tiếp được với nhau thì giữa chúng phải có một chuẩn nhất định, và chuẩn đó được gọi là giao thức Một số giao thức được sử dụng phổ biến hiện nay như: HTTPS, TCP/IP, FTP,

Nếu máy khách muốn lấy được thông tin từ máy chủ, chúng phải tuân theo một giao thức mà máy chủ đó đưa ra Nếu yêu cầu đó được chấp nhận thì máy chủ sẽ thu thập thông tin và trả về kết quả cho máy khách yêu cầu Bởi vì Server - máy chủ luôn luôn trong trạng thái sẵn sàng để nhận request từ client nên chỉ cần client gửi yêu cầu tín hiệu và chấp nhận yêu cầu đó thì server sẽ trả kết quả về phía client trong thời gian ngắn nhất

• Ưu điểm của mô hình

- Giúp chúng ta có thể làm việc trên bất kì một máy tính nào có hỗ trợ giao thức truyền thông Giao thức chuẩn này cũng giúp các nhà sản xuất tích hợp lên nhiều sản phẩm khác nhau mà không gặp phải khó khăn gì

- Có thể có nhiều server cùng làm một dịch vụ, chúng có thể nằm trên nhiều máy tính hoặc một máy tính

- Chỉ mang đặc điểm của phần mềm mà không hề liên quan đến phần cứng, ngoài yêu cầu duy nhất là server phải có cấu hình cao hơn các client

- Hỗ trợ người dùng nhiều dịch vụ đa dạng và sự tiện dụng bởi khả năng truy cập từ xa

- Cung cấp một nền tảng lý tưởng, cho phép cung cấp tích hợp các kỹ thuật hiện đại như mô hình thiết kế hướng đối tượng, hệ chuyên gia, hệ thông tin địa lý (GIS)

• Nhược điểm

- Vấn đề bảo mật dữ liệu thông tin đôi khi còn chưa được an toàn do phải trao đổi dữ liệu giữa 2 máy tính khác nhau ở 2 khu vực địa lý cách xa nhau Và đây cũng nhược điểm duy nhất của mô hình này

- Tuy nhiên vấn đề này thì có một số giao thức đã hỗ trợ bảo mật dữ liệu khi truyền tải Giao thức được sử dụng phổ biến như HTTPS

1.5.2 PHP và Framework Laravel 1.5.2.1 PHP

PHP là chữ viết tắt của “Personal Home Page” do Rasmus Lerdorf tạo ra năm 1994 Vì tính hữu dụng của nó và khả năng phát triển, PHP bắt đầu được sử dụng trong môi trường chuyên nghiệp và nó trở thành “PHP: Hypertext Preprocessor”

Thực chất PHP là ngôn ngữ kịch bản nhúng trong HTML, nói một cách đơn giản đó là một trang HTML có nhúng mã PHP, PHP có thể được đặt rải rác trong HTML

PHP là một ngôn ngữ lập trình được kết nối chặt chẽ với máy chủ, là một công nghệ phía máy chủ (Server-Side) và không phụ thuộc vào môi trường (cross-platform) Đây là hai yếu tố rất quan trọng, thứ nhất khi nói công nghệ phía máy chủ tức là nói đến mọi thứ trong PHP đều xảy ra trên máy chủ, thứ hai, chính vì tính chất không phụ thuộc môi trường cho phép PHP chạy trên hầu hết trên các hệ điều hành như Windows, Unix và nhiều biến thể của nó Đặc biệt các mã kịch bản PHP viết trên máy chủ này sẽ làm việc bình thường trên máy chủ khác mà không cần phải chỉnh sửa hoặc chỉnh sửa rất ít

1.5.2.2 Framework Laravel

Laravel là một trong những PHP web framework phổ biến nhất theo mẫu MVC (Model-View- Controller) Được tạo bởi Taylor Otwell, Laravel framework là nguồn mở và miễn phí giúp đưa ra các sản phẩm chất lượng cao Các code sẽ được giảm thiểu đi, nhưng vẫn đạt tiêu chuẩn ngành, giúp tiết kiệm được hàng trăm giờ đồng hồ dành cho việc phát triển Bản phát hành đầu tiên vào năm 2011, phiên bản hiện tại đã ra mắt là Laravel 8 Có thể kể đến các ưu điểm như:

- Tiếp cận các tính năng mới nhất của PHP

- Tích hợp dịch vụ mail dựa trên nền tảng đám mây hoặc local nhờ API sạch trên thư viện SwiftMailer

- Dễ sử dụng nhờ tuân theo mẫu thiết kế mô hình 3 lớp MVC dễ hiểu - Tính bảo mật cao

- Công cụ tích hợp cho dòng lệnh Artisan - Tạo liên kết đến các Route được đặt tên

- Tốc độ xử lý nhanh, đáp ứng nhu cầu tạo lập Website hay các dự án lớn trong thời gian ngắn

- Tuy nhiên Laravel cũng có một số nhược điểm nhất định: - Làm chậm tốc độ tải trang vì Laravel nặng cho thiết bị di động - Không hỗ trợ tính năng tính toán

Hình 2 Sơ đồ hoạt động của Laravel theo mô hình MVC

Vì Laravel cũng sử dụng theo mô hình MVC nên luồng hoạt động cơ bản sẽ là khi người dùng gửi một yêu cầu lên hệ thống thông qua một route, route đó sẽ gọi đến một Controller và một action trong đó, Controller xử lý các yêu cầu của người dùng Trong quá trình làm việc đó, Controller sẽ phải thông qua lớp Model nếu muốn làm việc với Cơ sở dữ liệu Sau khi xử lý xong, Model sẽ đưa dữ liệu về cho Controller, Controller tiếp tục đưa sang View và View hiển thị lại cho người dùng kết quả cuối cùng

Hình 3 Cấu trúc thư mục của dự án Laravel

Bảng 1 Cấu trúc thư mục của Laravel

app Thư mục app, chứa tất cả các project được tạo, hầu hết các class trong project được tạo đều ở trong đây

Không giống các framwork khác, các file model không được chứa trong một thư mục riêng biệt, mà được chứa ngay tại thư mục app này

app/Console Thư mục Console, chứa các tập tin định nghĩa các câu lệnh trên artisan

app/Exceptions Thư mục Exceptions, chứa các tập tin quản lý, điều hướng lỗi

app/Http/Controllers Thư mục Controllers, chứa các controller của project

app/Http/Middleware Thư mục Middleware, chứa các tập tin lọc và ngăn chặn các

requests

app/Providers Thư mục Providers, chứa các file thực hiện việc khai báo service và bind vào trong Service Container

bootstrap Thư mục bootstrap, chứa những file khởi động của framework và những file cấu hình auto loading, route, và file cache

config Thư mục config, chứa tất cả những file cấu hình

database Thư mục database, chứa 2 thư mục migration (tạo và thao tác database) và seeds (tạo dữ liệu mẫu), tiện lợi để lưu trữ dữ liệu sau này

public Thư mục public, chứa file index.php giống như cổng cho tất cả các request vào project, bên trong thư mục còn chứa file

JavaScript, và CSS

resources Thư mục resources, chứa những file view và raw, các file biên soạn như LESS, SASS, hoặc JavaScript Ngoài ra còn chứa tất cả các file lang trong project

resources/views Thư mục views, chứa các file view xuất giao diện người dùng

routes Thư mục routes, chứa tất cả các điều khiển route (đường dẫn) trong project Chứa các file route sẵn có: web.php,

channels.php, api.php, và console.php

routes/web.php File web.php, điều khiển các route của view, như route của trang top, sản phẩm,

.env File env, chứa các config chính của Laravel

artisan File thực hiện lệnh của Laravel

.gitattributes gitignore

File dành cho xử lý git

1.5.3 Framework VueJS

VueJS là một framework rất linh động được dùng phổ biến để xây dựng nên các giao diện người dùng Hoàn toàn khác với các framework nguyên khối thì Vue thường sở hữu thiết kế từ đầu theo những hướng cho phép cũng như khuyến khích làm việc để phát triển dễ dàng hơn các ứng dụng theo từng bước một

Một khi đã phát triển lớp giao diện (view layer) thì người dùng chỉ cần sử dụng loại thư viện lõi của Vue Ngoài ra, nếu như bạn kết hợp với các kỹ thuật thiên hướng hiện đại thì Vue cũng có thể đáp ứng được dễ dàng mọi nhu cầu xây dựng ứng dụng của một trang với độ phức tạp cao hơn

• Ưu điểm của Vuejs

Trước sự tồn tại của hàng loạt các framework, thư viện Javascript vô cùng mạnh mẽ như React, Angular, VueJS nổi bật và trở thành lựa chọn lý tưởng hàng đầu của các lập trình viên khi phát triển ứng dụng bởi những lý do sau

- Hiệu suất vô cùng cao: Là một framework linh động với nhiều tính năng được kế

thừa từ đối thủ và khả năng mở rộng cao, VueJS mang lại hiệu suất vô cùng cao trong các dự án phát triển Lập trình viên chỉ cần dùng một framework duy nhất để tạo ra các app

- Tốc độ đáng gờm: Một trong những đặc điểm nổi bật của VueJS là chỉ giữ core

Điều này khiến cho dung lượng tải của framework tương đối thấp, giúp tốc độ tải trang nhanh hơn

- Đơn giản và dễ học: VueJS rất đơn giản, dễ học và dễ áp dụng vào trong các dự

án, dù là một newbie thì bận cũng không cần lo lắng quá nhiều khi sử dụng framework này

composer.json composer.lock composer-setup.php

File của Composer

package.js File package.js, chứa các package cần dùng cho projects

phpunit.xml File phpunit.xml, xml của phpunit dùng để testing project

webpack.mix.js File webpack.mix.js, file dùng để build các webpack

Không phải ngẫu nhiên mà VueJS được các nhà phát triển sử dụng phổ biến, bởi nó mang lại nhiều tiện ích cho người dùng dưới đây

Hình 4 VueJS code

- Trang web nhẹ, tốc độ xử lý cực nhanh bởi được Render, xử lý bằng Javascript - Đơn giản, dễ học và dễ áp dụng trong các dự án, đặc biệt là với newbie

- Có khả năng xử lý các render thuộc server thành file Js tĩnh

- Kho thư viện lớn, hỗ trợ xây dựng giao diện một cách nhanh chóng, hoàn hảo - Dung lượng tải thấp, giúp tốc độ tải trang nhanh hơn

- Sàng lọc, tích hợp các tính năng ưu việt của nhiều framework đối thủ, giúp tối ưu hóa hiệu suất làm việc

• Nhược điểm của Vuejs

- Rào cản ngôn ngữ và cộng đồng bị hạn chế

- Buông lỏng việc tích hợp dẫn đến cái gì cũng có thể sử dụng, gây ra lỗi

- Thiếu hỗ trợ tài chính cho các dự án quy mô lớn do vị thế chưa thể bằng Angular hay React

- Nguồn tài nguyên giới hạn do còn mới được phát triển

1.5.4 Cơ sở dữ liệu MySQL

1.5.4.1 Giới thiệu cơ sở dữ liệu

MySQL là ứng dụng cơ sở dữ liệu mã nguồn mở phổ biến nhất hiện nay và được sử dụng phối hợp với PHP Trước khi làm việc với MySQL cần xác định các nhu cầu cho ứng dụng

MySQL là cơ sở dữ có trình giao diện trên Windows hay Linux, cho phép người

sử dụng có thể thao tác các hành động liên quan đến nó Việc tìm hiểu từng công nghệ

trước khi bắt tay vào việc viết mã kịch bản Python, việc tích hợp hai công nghệ Python

và MySQL là một công việc cần thiết và rất quan trọng

1.5.4.2 Mục đích sử dụng cơ sở dữ liệu

Mục đích sử dụng cơ sở dữ liệu bao gồm các chức năng như: lưu trữ (storage), truy cập (accessibility), tổ chức (organization) và xử lí (manipulation)

- Lưu trữ: Lưu trữ trên đĩa và có thể chuyển đổi dữ liệu từ cơ sở dữ liệu này sang cơ sở dữ liệu khác, nếu bạn sử dụng cho quy mô nhỏ, bạn có thể chọn cơ sở dữ liệu nhỏ như: Microsoft Exel, Microsoft Access, MySQL, Microsoft Visual FoxPro… Nếu ứng dụng có quy mô lớn, bạn có thể chọn cơ sở dữ liệu có quy mô lớn như: Oracle, SQL Server…

- Truy cập: Truy cập dữ liệu phụ thuộc vào mục đích và yêu cầu của người sử dụng, ở mức độ mang tính cục bộ, truy cập cơ sỏ dữ liệu ngay trong cơ sở dữ liệu với nhau, nhằm trao đổi hay xử lí dữ liệu ngay bên trong chính nó, nhưng do mục đích và yêu cầu người dùng vượt ra ngoài cơ sở dữ liệu, nên bạn cần có các phương thức truy cập dữ liệu giữa các cơ sở dử liệu với nhau như: Microsoft Access với SQL Server, hay SQL Server và cơ sở dữ liệu Oracle

- Tổ chức: Tổ chức cơ sở dữ liệu phụ thuộc vào mô hình cơ sở dữ liệu, phân tích và thiết kế cơ sở dữ liệu tức là tổ chức cơ sở dữ liệu phụ thuộc vào đặc điểm riêng của từng ứng dụng Tuy nhiên khi tổ chức cơ sở dữ liệu cần phải tuân theo một số tiêu chuẩn của hệ thống cơ sở dữ liệu nhằm tăng tính tối ưu khi truy cập và xử lí - Xử lí: Tùy vào nhu cầu tính toán và truy vấn cơ sở dữ liệu với các mục đích khác nhau, cần phải sử dụng các phát biểu truy vấn cùng các phép toán, phát biểu của cơ sở dữ liệu để xuất ra kết quả như yêu cầu Để thao tác hay xử lí dữ liệu bên trong chính cơ sở dữ liệu ta sử dụng các ngôn ngữ lập trình như: Python, PHP, C++, Java, Visual Basic

1.5.5 Firebase và Firebase storage 1.5.5.1 Firebase

Firebase là một nền tảng sở hữu bởi google giúp chúng ta phát triển các ứng dụng di động và web Họ cung cấp rất nhiều công cụ và dịch vụ tiện ích để phát triển ứng dụng nên một ứng dụng chất lượng Điều đó rút ngắn thời gian phát triển và giúp ứng

dụng sớm ra mắt với người dùng

Firebase cung cấp cho người dùng các dịch vụ cơ sở dữ liệu hoạt động trên nền tảng đám mây với hệ thống máy chủ cực kỳ mạnh mẽ của Google Chức năng chính của firebase là giúp người dùng lập trình ứng dụng, phần mềm trên các nền tảng web, di động bằng cách đơn giản hóa các thao tác với cơ sở dữ liệu

Với Firebase, bạn có thể tạo ra những ứng dụng real-time như app chat, cùng nhiều tính năng như xác thực người dùng, Cloud Messaging, Bạn có thể dùng firebase giống như phần backend của app

1.5.5.2 Firebase storage

Firebase Storage là dịch vụ được xây dựng cho mục đích lưu trữ và quản lý các

nội dung mà người dùng ứng dụng tạo ra như ảnh, videos hay dữ liệu dạng file

Firebase Storage cung cấp các API cho việc uploads và download các file từ app của bạn một cách bảo mật và bạn không cần quan tâm đến chất lượng đường truyền mạng

Firebase Storage được xây dựng trên nền tảng Google Cloud Platform nên có nhiều

lợi thế

Một số điểm mạnh:

- Robust: Firebase Storage thực hiện việc upload và download không phụ thuộc vào chất lượng đường truyền mạng hơn nữa các quá trình đó có thể bắt đầu lại khi bị tạm dừng giúp tiết kiệm thời gian và băng thông

- Secure: Được tích hợp Firebase Authentication cho việc bảo mật nên dễ dàng quản lý quyền truy cập vào các files

- Scalable: Firebase Storage được xây dựng trên nền tảng Google Cloud Platform nên khả năng mở rộng có thể lên đến hàng Petabyte dữ liệu

1.5.6 Xampp

XAMPPlà một ứng dụng phần mềm khá nổi tiếng và thường hay được các lập trình viên sử dụng để xây dựng và phát triển các dựa án Website ngôn ngữ PHP XAMPP được cài đặt và chạy trực tiếp trong môi trường Windows XAMPP 5.6.28 là phiên bản mới nhất hiện nay được rất nhiều người dùng ưa thích

XAMPP được xem là một bộ công cụ hoàn chỉnh dành cho lập trình viên PHP, nó tích hợp các thành phần quan trọng và tương thích nhau như:

- Apache ( Xem thêm : Webserver)

- PHP (tạo môi trường chạy các tập tin script *.php) - MySql (hệ quản trị dữ liệu mysql)

- Ba thành phần trên là 3 thành phần cốt lõi giúp chúng ta nhập môn học ngôn ngữ

PHP, XAMPP lựa chọn sự tương thích các phiên bản giữa chúng và đóng gói

chúng lại giúp cho người dùng dễ dàng cài đặt và sử dụng

1.6 Lợi ích của Website trong thương mại điện tử

Với một website thương mại điện tử sẽ giúp khách hàng cập nhật thông tin về giá, sản phẩm, dịch vụ đến với người tiêu dùng một cách nhanh chóng Bất cứ khi nào khách hàng cần được tư vấn, đội ngũ chăm sóc khách hàng sẽ tư vấn kịp thời, đảm bảo không để khách hàng chờ đợi lâu Điều này cũng là cách thể hiện sự uy tín, chuyên nghiệp của cửa hàng trong lòng khách hàng từ đó khách hàng sẽ tin tưởng và lựa chọn sản phẩm, dịch vụ mà cửa hàng cung cấp

Đối với cửa hàng Tiệm Cô Thỏ, website giúp quảng bá sản phẩm quà lưu niệm, giới thiệu nhiều loại sản phẩm tới khách hàng dễ dàng hơn, đẩy mạnh doanh thu của cửa hàng

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG

2.1 Phân tích nghiệp vụ và hệ thống 2.1.1 Đặc tả Actor Khách hàng

Các chức năng phục vụ cho khách hàng và giúp khách hàng có nhiều tiện ích khi xem và mua hàng như: xem tin tức, xem chi tiết sản phẩm, tìm kiếm sản phẩm, cho sản phẩm vào giỏ hàng, sửa giỏ hàng, đặt hàng, chat online với nhân viên bán hàng

2.1.2 Đặc tả Actor Quản trị viên

Người quản trị Website đăng nhập vào hệ thống nhằm mục đích điều hành quản lí và theo dõi mọi hoạt động của hệ thống quản lý thông tin, có toàn quyền sử dụng cấu hình và xem xóa sửa cơ sở dữ liệu, xem các chi tiết đơn hàng, quản lý danh mục, quản lý sản phẩm, quản lý bài viết, …

2.2 Biểu đồ luồng dữ liệu

2.2.1 Biểu đồ luồng dữ liệu mức khung cảnh

Hình 5 Biểu đồ luồng dữ liệu mức khung cảnh

2.2.2 Biểu đồ luồng dữ liệu mức đỉnh

Hình 6 Biểu đồ luồng dữ liệu mức đỉnh

2.2.3 Biểu đồ luồng dữ liệu mức dưới đỉnh 2.2.3.1 Chức năng quản lý bán hàng

Hình 7 Biểu đồ luồng dữ liệu mức dưới đỉnh chức năng quản lý bán hàng

2.2.3.2 Chức năng quản lý user

Hình 8 Biểu đồ luồng dữ liệu mức dưới đỉnh chức năng quản lý user

2.2.3.3 Chức năng quản lý sản phẩm

Hình 9 Biểu đồ luồng dữ liệu mức dưới đỉnh chức năng quản lý sản phẩm

2.3 Biểu đồ phân rã chức năng

Hình 10 Biểu đồ phân rã chức năng hệ thống

- Quản lý bài viết, tin tức

+ Tìm kiếm bài viết, tin tức + Thêm bài viết, tin tức + Sửa bài viết, tin tức + Xóa bài viết, tin tức

2.4 Biểu đồ Use Case và mô tả kịch bản ca sử dụng

2.4.1 Biểu đồ Use Case

Hình 11 Biểu đồ Use Case

- Người dùng chọn vào hình ảnh hay thông tin, giá, tên sản phẩm tại giao diện trang chủ hoặc trang danh sách sản phẩm

- Hệ thống sẽ lấy thông tin sản phẩm và chuyển hướng người dùng đến 1 trang mới hiển thị chi tiết thông tin sản

- Người dùng chọn chức năng tìm kiếm trên giao diện - Hệ thống hiển thị 1 text box để nguời dùng nhập từ

khóa tìm kiếm

- Người dùng nhập từ khóa tìm kiếm và bấm nút tìm kiếm

- Hệ thống sẽ kiểm tra trong hệ thống với từ khóa giống hoặc gần giống để trả về danh sách kết quả các sản phẩm, nếu không có sản phẩm nào trùng với từ khóa tìm kiếm thì thực hiện luồng sự kiện phụ 1

Luồng sự kiện phụ:

- Sự kiện 1: thông báo không tìm thấy sản phầm nào phù hợp với kết quả

Kết quả Danh sách sản phẩm người dùng muốn tìm kiếm

2.4.2.1.3 Mô tả kịch bản xem bài viết tin tức

Bảng 4 Mô tả kịch bản xem bài viết tin tức

Luồng sự kiện chính

Luồng sự kiện chính:

- Người dùng click chọn vào tiêu đề hoặc hình ảnh bài viết trong trang danh sách bài viết

- Hệ thống sẽ lấy thống tin trả về và chuyển hướng đến trang chi tiết bài viết

- Người dùng xem tin tức từ kết quả trả về Kết quả Chi tiết của bài viết, tin tức

2.4.2.1.4 Mô tả kịch bản thêm/cập nhật sản phẩm trong giỏ hàng

Bảng 5 Mô tả kịch bản thêm/cập nhật sản phẩm trong giỏ hàng

Luồng sự kiện chính

Luồng sự kiện chính:

- Người dùng click vào nút Thêm vào giỏ hàng khi đang xem sản phẩm để thêm sản phẩm vào giỏ hàng

- Hệ thống sẽ đưa ra thông báo Thêm giỏ hàng thành công

- Người dùng có thể cập nhật số lượng sản phẩm hoặc xóa sản phẩm bằng cách click vào biểu tượng giỏ hàng trên thanh header, hệ thống sẽ chuyển hướng trang tới trang giỏ hàng

Kết quả Sản phẩm đã được thêm/cập nhật trong giỏ hàng

2.4.2.2 Quản trị viên

2.4.2.2.1 Mô tả kịch bản quản lý danh mục

Bảng 6 Mô tả kịch bản quản lý danh mục Tác nhân Quản trị viên

Điều kiện Đăng nhập vào hệ thống quản trị Luồng sự kiện chính Luồng sự kiện chính:

- Thêm danh mục:

+ Quản trị viên nhập thông tin danh mục ở form

thêm bài viết

+ Hệ thống kiểm tra tính hợp lệ của thông tin

nhập vào nếu các thông nhập vào đã đúng với định dạng yêu cầu thì thêm mới vào database

+ Nếu thông tin nhập vào không hợp lệ thì

chuyển hướng đến luồng sự kiện phụ 1

- Sửa danh mục:

+ Quản trị viên tiến hành cập nhật lại dữ liệu

cho đúng với định dạng yêu cầu, hệ thống sẽ kiểm tra tính hợp lệ của thông tin nhập vào, nếu thông tin đúng định dạng thì tiến hành cập nhật, nếu thông tin nhập vào không đúng định dạng thì chuyển hướng đến luồng sự kiện phụ 1

- Xóa danh mục:

+ Quản trị click chọn danh mục muốn xóa + Hệ thống thông báo có chắc chắn muốn xóa

hay không, nếu có thì sẽ tiến hành xóa danh mục, nếu không thì chuyển hướng đến luồng sự kiện phụ 2

Luồng sự kiện phụ:

- Sự kiện 1: Thông báo thông tin nhập vào không hợp lệ và yêu cầu nhập lại

- Sự kiện 2: Quay trở lại trang hiện tại

Kết quả Hệ thống thông báo thành công hoặc báo lỗi

2.4.2.2.2 Mô tả kịch bản quản lý sản phẩm

Bảng 7 Mô tả kịch bản quản lý sản phẩm Tác nhân Quản trị viên

Điều kiện Đăng nhập vào hệ thống quản trị Luồng sự kiện chính Luồng sự kiện chính:

- Thêm sản phẩm:

+ Quản trị viên nhập thông tin sản phẩm ở form

thêm sản phẩm

+ Hệ thống kiểm tra tính hợp lệ của thông tin

nhập vào, nếu thông tin nhập đúng định dạng