NIÊN LUẬN CÔNG NGHỆ THÔNG TIN NGÀNH CÔNG NGHỆ THÔNG TIN đề tài THIẾT kế WEB bán đồ ăn vặt và QUẢN lý TRÊN mô HÌNH MVC

1.2 CSS3Là 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ố

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

Cần Thơ, 12/2022

NHẬN XÉT CỦA GIÁO 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

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

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

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

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ọithứ 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

2014 HTML5 ra đời được W3C khuyên dùng

2016 HTML5.1 ra đời được W3C khuyên dùng

2017 HTML5.2 ra đời được W3C khuyên dùng

Trang 2

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ệm nguyê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ởi Brendan Eich

tạ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 cho tậ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

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 codebyzach.github.io/pace

page loadanimate 4.1.1 Thêm animation animate.style

cho thẻ HTMLaos 2.3.4 Thêm animation michalsnik.github.io/aos

khi lướt webnice-select 2.0.0 Cải tiến select bluzky.github.io/nice-select2

dropdownlolibox 1.2.7 Popup hiển thị github.com/arboshiki/lobibox

notification thông báo

tiny-slider 2.9.3 Làm slider cho ganlanyuan.github.io/tiny-slider

ảnh hoặc đốitượng

metismenu 3.0.7 Cải tiến thanh onokumus.github.io/metismenu

menu có thể thugọn

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

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

thống kê hiện đạidatatable 1.13.1 Xây dựng bảng datatables.net

dữ liệu thống kêstar-rating.js 4.3.0 Tạo đánh giá sản pryley.github.io/star-rating.js

phẩm

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

PHP (viết tắt hồi quy "PHP: Hypertext Preprocessor") là một ngôn ngữ lập

trình kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triển các ứng

dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát Nó rấ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ống C và Java, dễhọc và thời gian xây dựng sản phẩm tương đối ngắn hơn so với các ngôn ngữkhác nên PHP đã nhanh chóng trở thành một ngôn ngữ lập trình web phổ biế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 Chỉ phù hợp với các website cóbăng thông giúp hoạt động ổn định hơn quy mô vừa và lớn

Tạo một mô hình chuẩn cho dự án để Phân chia công việc và nghiệpgiúp cho việc tiếp cận với ứng dụng dễ vụ giữa các thành phần không đồng

đều, trong đó Model phải xử lý rấtdàng hơn

nhiều tác vụ

Trình tự các quy trình rõ ràng, các Đối với các mô hình, ứng dụng nhỏnhiệm vụ riêng biệt, độc lập với các thì việc triển khai sử dụng MVC cóthành phần khác và các thành phần có thể vẻ quá cồng kềnh

tương tác với nhau

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 Khó triển khai và mất thời gian

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 Chỉ định dữ liệu nào mà

Nếu trạng thái của dữ liệu này thay đổi, các mục trong danh sách

thì Model thường sẽ thông báo cho chế nên chứa — mặt hàng,

độ xem (để màn hình có thể thay đổi giá, v.v — và những mụckhi cần) và đôi khi là bộ điều khiển nào trong danh sách đã có(nếu cần logic khác để kiểm soát chế sẵn

view để phản hồi lại các thao tác của hoặc các nút mua hàng,người dùng tới app thêm hàng đều được gửi

tới Controller để xử lý vàtrả về view thích hợp

Trang 11

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 jsdelivr.com

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

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

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

Trang 13

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ùngTìm kiếm sản phẩm Quản lý đơn hàng

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

Hình 5 Sơ đồ Use case tổng quát

Trang 15

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

Hình 11 Use case lọc sản phẩm

Trang 17

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

Trang 19

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

Trang 21

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:

Trang 23

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

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

Trang 25

Bảng tb_order: thể hiện đơn 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 từ bảng tb_user

status có 4 giá trị bao gồm:

‘pending’: đã đặt hàng, đang chờ xử lý

‘shipping’: đã xử lý, đang giao hàng

‘delivered’: đã giao hàng

‘canceled’: đã huỷ hàng