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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.49 MB, 64 trang )

Trang 1<div class="page_container" data-page="1">

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

</div>Trang 2<div class="page_container" data-page="2">

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

</div>Trang 3<div class="page_container" data-page="3">

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, đồ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ị, đồ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 hồ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.

</div>Trang 4<div class="page_container" data-page="4">

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 q 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

</div>Trang 5<div class="page_container" data-page="5">

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

</div>Trang 6<div class="page_container" data-page="6">

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

</div>Trang 7<div class="page_container" data-page="7">

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

</div>Trang 8<div class="page_container" data-page="8">

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

</div>Trang 9<div class="page_container" data-page="9">

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

</div>Trang 10<div class="page_container" data-page="10">

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

</div>Trang 11<div class="page_container" data-page="11">

- 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 đó.

</div>Trang 12<div class="page_container" data-page="12">

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

1.5.1.2. Ngun 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 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 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 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ì.

</div>Trang 13<div class="page_container" data-page="13">

- 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 chun 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

</div>Trang 14<div class="page_container" data-page="14">

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 tốn

</div>Trang 15<div class="page_container" data-page="15">

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 q 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.

</div>Trang 16<div class="page_container" data-page="16">

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

</div>Trang 17<div class="page_container" data-page="17">

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. Ngồ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.

</div>Trang 18<div class="page_container" data-page="18">

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. Hồn tồn khác với các framework ngun 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.

</div>Trang 19<div class="page_container" data-page="19">

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, hồ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

</div>Trang 20<div class="page_container" data-page="20">

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à 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 tố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.

</div>Trang 21<div class="page_container" data-page="21">

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 q 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

</div>Trang 22<div class="page_container" data-page="22">

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ụ hồ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.

</div>Trang 23<div class="page_container" data-page="23">

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ó tồ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

</div>Trang 24<div class="page_container" data-page="24">

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

</div>Trang 25<div class="page_container" data-page="25">

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

</div>Trang 26<div class="page_container" data-page="26">

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

</div>Trang 27<div class="page_container" data-page="27">

- 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

</div>Trang 28<div class="page_container" data-page="28">

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

2.4.1. Biểu đồ Use Case

</div>Trang 29<div class="page_container" data-page="29">

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

</div>Trang 30<div class="page_container" data-page="30">

- 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

</div>Trang 31<div class="page_container" data-page="31">

- 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

</div>Trang 32<div class="page_container" data-page="32">

- 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