Đề tài THIẾT KẾ WEB BÁN ĐỒ ĂN VẶT VÀ QUẢN LÝ TRÊN MÔ HÌNH MVC

Đặc biệt với sự bùng nổ của công nghệ thông tin và internet thì tất cả cácthông tin luôn được cập nhật, thay đổi một cách liên tục và đầy đủ thông quamạng truyền thông và internet, mà ph

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

TRƯỜNG ĐẠI HỌC CẦN THƠ TRƯỜNG CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG

NIÊN LUẬN CÔNG NGHỆ THÔNG TIN

NGÀNH CÔNG NGHỆ THÔNG TIN

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

Cần Thơ, ngày tháng 11 năm 2022

Giảng viên hướng dẫn

LỜI CẢM ƠN

Đầu tiên, em xin cảm ơn các Thầy Cô khoa Công nghệ thông tin và truyềnthông đã tạo điều kiện cho em học tập và truyền đạt những kiến thức chuyên môncũng như các kinh nghiệm trong suốt quá trình học tập tại trường để em có đủ khảnăng để nghiên cứu và thực hiện đề tài

Em cũng xin cảm ơn khoa Công nghệ thông tin và truyền thông đã tạo mọiđiều kiện về tài liệu tham khảo, không gian học tập và làm việc góp phần để emhoàn thành tốt niên luận cơ sở Đồng thời, em cũng xin cảm ơn ban lãnh đạo khoa

đã tạo điều kiện cũng như cơ sở hạ tầng để hỗ trợ các sinh viên thực hiện tốt đề tàinghiên cứu

Đặc biệt, em xin chân thành cảm ơn thầy Võ Bùi Quốc Bảo đã giúp đỡ em rấtnhiều trong suốt quá trình thực hiện niên luận công nghệ thông tin Nhờ sự giúp

đỡ và hướng dẫn tận tình của thầy em có thể quản lý được tiến độ dự án và đảmbảo hoàn thành đúng thời gian quy định Ngoài ra, giúp em tích lũy nhiều kiếnthức chuyên môn cho sau này

Mặc dù đã có nhiều cố gắng thực hiện đề tài một cách hoàn chỉnh nhất, song

do hạn chế về thời gian nghiên cứu cũng như kiến thức và kinh nghiệm không thểtránh khỏi những thiếu sót nhất định mà em chưa thấy được Em rất mong nhậnđược những góp ý đến từ thầy cô để đề tài của em được hoàn thiện hơn

Em kính chúc thầy cô nhiều sức khỏe, thành công và hạnh phúc Em xin trântrọng cảm ơn

Mục Lục

1 Đặc Tả Yêu Cầu Chức Năng Của Hệ Thống 14

2 Mô Hình Use Case Tổng Quát Của Đặc Tả Hệ Thống 15

3 Mô Hình Use Case Cụ Thể Của Đặc Tả Hệ Thống 16

3 Dữ Liệu Các Tỉnh Thành, Quận Huyện Việt Nam 28

1.2 Thiết lập các tài nguyên trong dự án 30

CHƯƠNG I GIỚI THIỆU

1 Đặt Vấn Đề

Ngày nay, với sự phát triển mạnh mẽ của khoa học – công nghệ, nó gópphần thúc đẩy sự tiến bộ của xã hội trong tất cả các lĩnh vực của đời sống xãhội Đặc biệt với sự bùng nổ của công nghệ thông tin và internet thì tất cả cácthông tin luôn được cập nhật, thay đổi một cách liên tục và đầy đủ thông quamạng truyền thông và internet, mà phổ biến là thông qua các website

Hiện nay, nhu cầu mua hàng ngày càng nhiều trong thời đại thương mạiđiện tử, từ các thiết bị công nghệ đến những nhu yếu phẩm hằng ngày, các trang

thương mại điện tử đang dần là xu thế như: Shopee, Tiki, Lazada hiện không

còn mấy xa lại với nhiều người

Trên thực tế cho thấy, hiện nay rất nhiều nhà bán hành đang có nhu cầu bánhàng trực tuyến, nhưng muốn làm 1 trang website riêng biệt để tăng độ uy tín và

mở rộng thị trường thay vì chỉ làm đối tác cho các nền tảng lớn như Shopee Nhưng để làm 1 website bán hàng chuẩn SEO thật hoàn chỉnh sẽ mất rất nhiều

thời gian nhưng chỉ yêu cầu những tính năng cơ bản

Nắm bắt được nhu cầu đó, ý tưởng làm "WebSite bán đồ ăn vặt" với

những công nghệ đơn giản giúp cho việc giới thiệu những món hàng của nhàbuôn bán nhanh chóng quản lý thu chi và đơn hàng, với thời gian có hạn

2 Mục Tiêu Đề Bài

Đây là tài liệu đặc tả yêu cầu về hệ thống chia sẻ giáo trình, tài liệu trên nềnweb Tài liệu này nhằm mục đích mô tả và cung cấp các thông tin về chức năng,hiệu năng, các yêu cầu về thiết kế, giao diện và các yêu cầu đặc biệt khác chothiết kế viên Bên cạnh đó còn xây dựng một hệ thống đẹp mắt, thân thiện vớingười dùng

3 Đối Tượng Và Phương Pháp Nghiên Cứu

"Website bán hàng" được xây dựng với mục đích phục vụ cho các nhà

bán hàng có 1 website riêng biệt của mình với thời gian xây dựng ngắn mà vẫnđảm bảo được công việc cốt lõi bán hàng của mình

4 Nội Dung Nghiên Cứu

Tìm hiểu cách làm 1 website bằng những công nghệ cơ bản như HTML,

CSS, Javascript, PHP, mySQL và mô hình MVC và cách áp dụng những thư

viện Javascript để đơn giản hoá vấn đề

CHƯƠNG II CƠ SỞ LÝ THUYẾT

1 Ngôn Ngữ Thiết Kế WebSite

HTML là khung xương của website CSS như lớp da thẩm mỹ của website

Javascript như các hệ thống thần kinh

và cơ bắp của website giúp cho mọi thứhoạt động

Hình 1 Cấu trúc của một website

1.1 HTML5

Là viết tắt của từ Hypertext Markup Language, một ngôn ngữ lập trình đánh dấu

siêu văn bản dùng để xây dựng các website

HTML được hiểu là cấu trúc của một trang web, sử dụng các thẻ và nhãn để

định dạng các nội dung khác nhau của 1 trang web

GIAI ĐOẠN PHÁT TRIỂN CỦA HTML

1.2 CSS3

Là viết tắt của Cascading Style Sheets, dùng để định dạng cách mà các thẻ

HTML hoạt động trên màn hình của các thiết bị, được ví như lớp áo của trang web,

nó có thể điều khiển bố cục trang, và thêm các hiệu ứng hoạt ảnh cho trang webthêm sinh động

HTML chưa từng sinh ra để định dạng trang web mà nó chỉ mô tả trang web

chính vì thế W3C đã tạo ra CSS để làm việc đó

CSS được sử dụng để xác định kiểu cho các trang web của bạn, bao gồm thiết

kế, bố cục và các biến thể hiển thị cho các thiết bị và kích thước màn hình khácnhau, 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.

GIAI ĐOẠN PHÁT TRIỂN CỦA CSS:

Năm Phiên bản

1996 CSS1 được giới thiệu chính thức bởi W3C

1998 CSS2 ra đời cải tiến so với CSS1

1999 CSS3 ra đời và phát triển tới hiện nay

1.3 JavaScript

Là một ngôn ngữ lập trình thông dịchđược phát triển từ các ý niệmnguyênmẫu Ngôn ngữ này được dùng rộng rãi cho các trang web(phía người dùng)cũng như phía máy chủ (với Nodejs) Nó vốn được phát triển bởiBrendan Eichtại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript Giống Java, JavaScript có cúpháp tương tự C, nhưng nó gần với Self hơn Java .js là phần mở rộng thườngđược dùng chotập tin mã nguồnJavaScript

GIAI ĐOẠN PHÁT TRIỂN JAVASCRIPT

1995 Javascript được tạo ra bởi Brendan Eich

1997 Javascript trở thành chuẩn ECMA, và phiên bản

ECMAScript 1 đầu tiên ra rời

2 Thư Viện Cho CSS Và Javascript

bị, trình duyệt và tính nhất quán trong thiết kế được đảm bảo

GIAI ĐOẠN PHÁT TRIỂN BOOTSTRAP:

2.2 jQuery

Là một thư viện phổ biến nhất của Javascript đơn giản hoá việc lập trìnhJavascript nhiều hơn

jQuery thực hiện rất nhiều tác vụ phổ biến đòi hỏi nhiều dòng code JavaScript

để hoàn thành và gói chúng thành các phương thức mà bạn chỉ cần gọi chúng.Hoạt động tốt với mọi nền tảng trang trình duyệt như IE, Firefox, Chrome…từng được các công ty lớn sử dụng như Google, Microsoft, IBM, Netflix…

Thư viện jQuery chứa:

2.3 Các thư viện bổ sung cho web

Tên thư viện Phiên bản Chức năng Nguồn

fontAwesome Pro 6.2.1 Hỗ trợ gói icon fontawesome.com

pace 1.2.4 HIển thị process

page load codebyzach.github.io/paceanimate 4.1.1 Thêm animation

cho thẻ HTML

animate.style

khi lướt web

michalsnik.github.io/aos

nice-select 2.0.0 Cải tiến select

dropdown bluzky.github.io/nice-select2lolibox

notification 1.2.7 Popup hiển thịthông báo github.com/arboshiki/lobiboxtiny-slider 2.9.3 Làm slider cho

ảnh hoặc đốitượng

ganlanyuan.github.io/tiny-slider

metismenu 3.0.7 Cải tiến thanh

menu có thể thugọn

onokumus.github.io/metismenu

perfect-scrollbar 1.5.5 Tạo thanh cuộn perfectscrollbar.com

apexchars 3.36.1 Tạo các biểu đồ

thống kê hiện đại apexcharts.comdatatable 1.13.1 Xây dựng bảng

dữ liệu thống kê datatables.netstar-rating.js 4.3.0 Tạo đánh giá sản

phẩm

pryley.github.io/star-rating.js

3 Ngôn Ngữ Lập Trình Backend PHP

PHP (viết tắt hồi quy "PHP: Hypertext Preprocessor") là mộtngôn ngữ lậptrình kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triển các ứngdụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát Nó rấtthích hợp với web và có thể dễ dàng nhúng vào trang HTML Do được tối ưuhóa cho các ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giốngCvà Java, dễhọc và thời gian xây dựng sản phẩm tương đối ngắn hơn so với các ngôn ngữkhác nên PHP đã nhanh chóng trở thành một ngôn ngữ lập trình web phổ biếnnhất thế giới

GIAI ĐOẠN PHÁT TRIỂN PHP

Năm Phiên bản

1995 PHP 1 ra đời lần đầu với tên gọi Personal Home Page Tools

(PHP Tool)

1997 PHP 2 ra đời với tên gọi PHP/FI 2.0

1998 PHP 3 ra đời, với chuyển đổi giữa dự án cá nhân thành dự

4 MySQL Database

MySQL là hệ quản trị cơ sở dữ liệu tự do nguồn mởphổ biến nhất thế giới

và được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng VìMySQL là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển,hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện íchrấ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 ứngdụ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ủ Nó có nhiều phiên bản cho các hệ điều hànhkhác nhau: phiên bản Win32 cho các hệ điều hành dòng Windows, Linux, Mac

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

GIAI ĐOẠN PHÁT TRIỂN mySQL

5 Mô Hình MVC

5.1 Giới thiệu MVC

MVC là viết tắt của Model-View-Controller là một mô hình trong thiết kế

phần mềm để triển khai giao diện, dữ liệu, kiểm soát logic của người dùng

Mô hình nhấn mạnh điểm tách biệt giữa logic và hiển thị của phần mềm

Sự tách biệt này giúp cho việc phát triển và bảo trì ứng dụng được làm hiệu quảhơn, và nhanh chóng hơn, mọi thứ được cải thiện…

Có một số mẫu thiết kế khác dựa trên MVC chẳng hạn như: MVVM

(Model-View-ViewModel), MVP (Model-View-Presenter), MVW

(Model-View-Whatever)

Ba thành phần chính của MVC như sau: Model (dữ liệu), View (giao diện) và

Controller (bộ điều khiển) Mỗi thành phần có một nhiệm vụ độc lập không phụ

thuộc vào các thành phần khác

Ưu điểm của MVC Nhược điểm của MVC

Vì sử dụng viewstate nên rất tiết kiệm

băng thông giúp hoạt động ổn định hơn

Chỉ phù hợp với các website cóquy mô vừa và lớn

Tạo một mô hình chuẩn cho dự án để

giúp cho việc tiếp cận với ứng dụng dễ

dàng hơn

Phân chia công việc và nghiệp

vụ giữa các thành phần không đồngđều, trong đó Model phải xử lý rấtnhiều tác vụ

Trình tự các quy trình rõ ràng, các

nhiệm vụ riêng biệt, độc lập với các

thành phần khác và các thành phần có thể

tương tác với nhau

Đối với các mô hình, ứng dụng nhỏthì việc triển khai sử dụng MVC có

vẻ quá cồng kềnh

Gỡ lỗi, phát triển, bảo trì đơn giản Khó khăn phát triển giao diện

Có thể chia nhiều lập trình viên làm

việc cùng lúc

Khó triển khai và mất thời gianlúc ban đầu

5.2 Mô hình MVC

Hãy tưởng tượng rằng ta đang có 1 website mua sắm đơn giản Tất cả những gì

ta muốn là danh sách tên, số lượng, và giá của từng mặt hàng cần mua

Và đây là mô tả cách triển khai một số tính năng trên MVC:

Hình 2 Mô Hình MVC

Model Xác định dữ liệu mà ứng dụng sẽ chứa

Nếu trạng thái của dữ liệu này thay đổi,

thì Model thường sẽ thông báo cho chế

độ xem (để màn hình có thể thay đổikhi cần) và đôi khi là bộ điều khiển(nếu cần logic khác để kiểm soát chế

độ xem được cập nhật)

Chỉ định dữ liệu nào màcác mục trong danh sáchnên chứa — mặt hàng,giá, v.v — và những mụcnào trong danh sách đã cósẵn

View Định nghĩa các dữ liệu trong app được

hiển thị

Hiển thị giao diện danhsách các sản phẩm tronggiỏ hàng cho được lấy từ

model Controller Chứa các logic để cập nhật model /

view để phản hồi lại các thao tác củangười dùng tới app

Các form nhập thông tinhoặc các nút mua hàng,thêm hàng đều được gửitới Controller để xử lý vàtrả về view thích hợp

5.3 MVC trong ứng dụng Web

Hình 3.Mô hình MVC thực tế trong website

Trình duyệt gửi một request lên server, server nhận được request sẽ phân tích

và gửi dữ liệu vào Controller dựa vào router điều hướng.

Trong vài trường hợp thì controller sẽ render luôn ra view (một template được

chuyển thành HTML) và gửi trả về cho trình duyệt

Thông thường, cho các trang dynamic web, controller sẽ tương tác với một

model (đại diện cho một phần tử ví dụ như Post, chịu trách nhiệm giao tiếp với cơ

sở dữ liệu) Sau khi gọi vào model, controller sẽ render view với dữ liệu lấy được

và trả kết quả về cho trình duyệt để hiển thị

Trong những thời kỳ sơ khai của Web, mô hình MVC chủ yếu được triển khai

từ phía Server, các form, link, và button để cập nhật view đểu gửi về server để cập nhật view và hiển thị ra màn hình Tuy nhiên hiện nay với sự phát triển của

Website với sự ra đời của client-side storage và XMLHttpRequest để cho phép

trang cập nhật một cách nhanh chóng hơn rất nhiều

6 CDN

CDN ( Content Delivery Network ) là mạng lưới toàn cầu giúp tải tài nguyên

với máy chủ gần bạn nhất cho một tốc độ load tốt nhất, như mô hình dưới đây

Hình 4 Dịch vụ CDN tối ưu tải trang

Dịch vụ CDN Mô tả Nguồn

Jsdelivr Là một dịch vụ CDN mã nguồn mở tập

trung vào hiệu suất, độ tin cậy và bảo mật

Nó miễn phí sử dụng cho tất cả mọi người,không giới hạn băng thông

jsdelivr.com

imagekit Là một dịch vụ CDN tối ưu hoá theo thời

gian thực dành cho ảnh và video, cung cấpnhiều công cụ để tối ưu hoá các tài nguyênảnh và video trong website

imagekit.io

CHƯƠNG III ĐẶC TẢ YÊU CẦU

1 Đặc Tả Yêu Cầu Chức Năng Của Hệ Thống

Hệ thống gồm 3 người dùng

Khách vãng lai là người dùng lần đầu tới website

Người dùng là khách hàng đã đăng nhập tài khoản

Admin là người dùng có quyền quản lý các sản phẩm và người dùng

Người dùng Khách vãng lai Admin

Đăng ký người dùng Xem sản phẩm Đăng nhập

Đăng nhập Tìm kiếm sản phẩm Đăng xuất

Đăng xuất Liên hệ Phân tích tổng quan

Đổi thông tin cá nhân Đăng ký Quản lý sản phẩm

Đổi mật khẩu Lọc sản phẩm Quản lý người dùng

Tìm kiếm sản phẩm Quản lý đơn hàng

Quản lý giỏ hàng Phản hồi liên hệ

Lọc sản phẩm

Thanh toán đơn hàng

Xem đơn hàng đã mua

Liên hệ

2 Mô Hình Use Case Tổng Quát Của Đặc Tả Hệ Thống

3 Mô Hình Use Case Cụ Thể Của Đặc Tả Hệ Thống

1 Use case đăng nhập

Hình 6 Use case đăng nhập

2 Use case đăng ký thành viên

Hình 7 Use case đăng ký người dùng

3 Use case đăng xuất

4 Use case xem sản phẩm

Hình 9 Use case xem sản phẩm

5 Use case Tìm kiếm sản phẩm

Hình 10 Use case tìm kiếm sản phẩm

5 Use case Lọc sản phẩm

6 Use case Quản lý giỏ hàng

Hình 12 Use case quản lý giỏ hàng

7 Use case thanh toán đơn hàng

Hình 13 Use case thanh toán đơn hàng

8 Use case tra cứu đơn hàng

9 Use case thay đổi thông tin

Hình 15 Use case thay đổi thông tin

10 Use case thay đổi mật khẩu

Hình 16 Use case thay đổi mật khẩu

11 Use case phân tích tổng quan

Hình 17 Use case phân tích tổng quát

12 Use case quản lý sản phẩm

Hình 18 Use case quản lý sản phẩm

13 Use case quản lý đơn hàng

Hình 19 Use case quản lý đơn hàng

14 Use case quản lý người dùng

Hình 20 Use case quản lý người dùng

15 Use case phản hồi liên hệ

Hình 21 Use case phản hồi liên hệ

CHƯƠNG IV THIẾT KẾ GIẢI PHÁP

1 Thiết Kế Cơ Sở Dữ Liệu

Sử dụng ứng dụng Navicat để thiết kế cơ sở dữ liệu để phù hợp với các đặc tả trên

như sau:

2 Chi Tiết Các Thực Thể

Bảng tb_user: thể hiện người dùng khi đã đăng nhập

Thuộc tính Kiểu dữ liệu Khoá chính Khoá phụ Not Null

Bảng tb_category: thể hiện các loại của sản phẩm

Thuộc tính Kiểu dữ liệu Khoá chính Khoá phụ Not Null

id_category char(25) (tb_category) x

Chú thích: ràng buộc khóa ngoại lấy từ bảng tb_category

id_product sẽ đặt là auto_increment

Bảng tb_cart: thể hiện giỏ hàng

Thuộc tính Kiểu dữ liệu Khoá chính Khoá phụ Not Null

Chú thích: Ràng buộc khóa ngoại lấy từ bảng tb_user và tb_product

Đây là 1 thực thể yếu