Nghiên cứu framework bootstrap vào xây dựng website bán hàng

TRƯỜNG CAO ĐẲNG CÔNG NGHỆ THÔNG TIN
HỮU NGHỊ VIỆT - HÀN
KHOA: CÔNG NGHỆ THÔNG TIN

ĐỒ ÁN TỐT NGHIỆP
NGÀNH: LẬP TRÌNH MÁY TÍNH
KHÓA HỌC: 2013-2016

ĐỀ TÀI
Tên: “NGHIÊN CỨU FRAMEWORK BOOTSTRAP
VÀO XÂY DỰNG WEBSITE BÁN HÀNG”

Sinh Viên Thực Hiện: Nguyễn Đình Thanh
Lớp:

CCLT07B

Họ tên GVHD:

ThS. Võ Hoàng Phương Dung

Đà Nẵng tháng 06 năm 2016


LỜI CẢM ƠN
Qua ba năm học tập và rèn luyện tại trường Trường Cao Đẳng Công Nghệ
Thông Tin Hữu Nghị Việt - Hàn, được sự chỉ bảo và giảng dạy nhiệt tình của quý thầy
cô, đặc biệt là quý thầy cô khoa Công Nghệ Thông Tin đã truyền đạt cho em những
kiến thức về lý thuyết và thực hành trong suốt thời gian học ở trường.. Cùng với sự nổ
lực của bản thân, em đã hoàn thành đồ án tốt nghiệp của mình.
Từ những kết quả đạt được này, em xin chân thành cám ơn:

Quý thầy cô trường Trường Cao Đẳng Công Nghệ Thông Tin Hữu Nghị Việt Hàn, đã truyền đạt cho em những kiến thức bổ ích trong thời gian qua. Đặc biệt, là cô
Võ Hoàng Phương Dung đã tận tình hướng dẫn em hoàn thành tốt đồ án tốt
nghiệp này.
Do kiến thức còn hạn hẹp nên không tránh khỏi những thiếu sót trong cách làm
đồ án, lỗi trình bày. Em rất mong nhận được sự đóng góp ý kiến của quý thầy cô và
ban lãnh đạo nhà trường, để đồ án tốt nghiệp đạt được kết quả tốt hơn.
Em xin chân thành cảm ơn !

i


MỤC LỤC
LỜI CẢM ƠN.......................................................................................................................................i
MỤC LỤC...........................................................................................................................................ii
DANH MỤC HÌNH ẢNH......................................................................................................................iv
LỜI MỞ ĐẦU......................................................................................................................................1
PHẦN 1 : GIỚI THIỆU VỀ CÁC CÔNG NGHỆ.........................................................................................2
1.1Giới thiệu chung về Bootstrap Framework................................................................................2
1.1.1Bootstrap là gì ?.....................................................................................................................2
1.1.2 Tại sao phải sử dụng Bootstrap ?.........................................................................................3
1.1.3Cách cài đặt Framework Bootstrap......................................................................................4
1.2Giới thiệu về ngôn ngữ PHP......................................................................................................5
1.3Giới thiệu về hệ quản trị cơ sở dữ liệu MySQL.........................................................................8
1.4Giới thiệu về mô hình MVC (Models Views Controllers)...........................................................9
PHẦN 2 : PHÂN TÍCH VÀ THIẾT KẾ....................................................................................................11
2.1Giới thiệu về website bán hàng...............................................................................................11
2.2Yêu cầu hệ thống thông tin.....................................................................................................11
2.2.1Yêu cầu hệ thống.................................................................................................................11
2.2.2Yêu cầu chức năng..............................................................................................................11
2.2.3Yêu cầu phi chức năng........................................................................................................12

2.3Phân tích hệ thống..................................................................................................................12
2.3.1 Biêu đồ phân rã chức năng................................................................................................12
2.3.2Biểu đồ luồng dữ liệu mức ngữ cảnh.................................................................................12
2.3.3Biểu đồ luồng dữ liệu mức 0...............................................................................................13
2.3.4Biểu đồ luồng dữ liệu mức 1: Quản trị hệ thống................................................................13
2.3.5Biểu đồ luồng dữ liệu mức 1: Quản lý danh mục...............................................................14
2.3.6Biểu đồ luồng dữ liệu mức 1: Quản lý nghiệp vụ...............................................................15
2.3.7Biểu đồ luồng dữ liệu mức 1: Quản lý nghiệp vụ...............................................................16
2.4Thiết kế cơ sở dữ liệu.............................................................................................................16
2.5Mô hình thực thể ERD.............................................................................................................18
2.6Sơ đồ cơ sở dữ liệu.................................................................................................................19
2.7Xây dựng website bằng mô hình MVC....................................................................................19
2.7.1MODELS.............................................................................................................................19
ii


2.7.2CONTROLLERS.................................................................................................................25
2.7.3VIEWS (Xây dựng bằng Bootstrap)....................................................................................31
PHẦN 3 : HƯỚNG DẪN SỬ DỤNG CHƯƠNG TRÌNH VÀ KẾT LUẬN....................................................37
3.1 Giới thiệu chương trình.........................................................................................................37
3.2 Hướng dẫn sử dụng cho quản trị viên....................................................................................37
3.3 Hướng dẫn sử dụng mua hàng cho khách hàng.....................................................................41
KẾT LUẬN.........................................................................................................................................44
TÀI LIỆU THAM KHẢO.........................................................................................................................v

iii


DANH MỤC HÌNH ẢNH
Hình 1.1 Giao diện được hiển thị trên các thiết bị.............................................................................3

Hình 1.2: Logo của Bootstrap Framework..........................................................................................4
Hình 1.3 Cách thức hoạt động của ngôn ngữ PHP..............................................................................6
Hình 1.4 Giao diện controller XAMP..................................................................................................7
Hình 1.5 Giao diện Localhost.............................................................................................................7
Hình 1.6 Chương trình Hello world !..................................................................................................8
Hình 2.1: Biểu đồ phân rã chức năng...............................................................................................12
Hình 2.2: Biểu đồ luồng dữ liệu mức ngữ cảnh................................................................................12
Hình 2.3 : Biểu đồ luồng dữ liệu mức 0............................................................................................13
Hình 2.4 : Biểu đồ luồng dữ liệu quản trị hệ thống mức 1...............................................................14
Hình 2.5 Biểu đồ luồng dữ liệu mức 1 – quản lý danh mục..............................................................15
Hình 2.6 Biểu đồ luồng dữ liệu mức 1 – quản lý đơn hàng.............................................................15
Hình 2.7 Biểu đồ luồng dữ liệu mức 1 – tìm kiếm............................................................................16
Hình 2.8 Mô hình thực thể liên kết..................................................................................................18
Hình 2.9 Sơ đồ cơ sở dữ liệu...........................................................................................................19
Hình 2.10 cấu trúc thư mục và file của lớp Models..........................................................................19
Hình 2.11 Cấu trúc thư mục Controllers...........................................................................................25
Hình 2.12 Cấu trúc thư mục Views...................................................................................................31
Hình 2 13 Trang chủ người dùng......................................................................................................32
Hình 2.14 Chi tiết danh mục Áo khoác.............................................................................................32
Hình 2.15 Chi tiết danh mục Áo thun...............................................................................................33
Hình 2.16 Giao diện chi tiết sản phẩm.............................................................................................33
Hình 2.17 Giao diện chi tiết giỏ hàng...............................................................................................34
Hình 2.18 Giao diện thông tin đơn hàng..........................................................................................34
Hình 2.19 Giao diện trang chủ quản trị viên.....................................................................................35
Hình 2.20 Giao diện danh sách danh mục........................................................................................35
Hình 2.21 Giao diện danh sách sản phẩm........................................................................................36
Hình 2.22 Giao diện danh sách đơn hàng........................................................................................36
iv

Hình 3.1 Trang đăng nhập................................................................................................................37
Hình 3.2 Đăng nhập thành công.......................................................................................................38
Hình 3.3 Giao diện thêm danh mục.................................................................................................38
Hình 3.4 Giao diện sửa danh mục....................................................................................................38
Hình 3.5 Giao diện thêm sản phẩm..................................................................................................39
Hình 3.6 Giao diện sửa sản phẩm....................................................................................................39
Hình 3.7 Giao diện xử lý đơn hàng..................................................................................................40
Hình 3.8 Giao diện thay đổi thông tin quản trị viên.........................................................................40
Hình 3.9 Trang chủ website..............................................................................................................41
Hình 3.10 Chọn sản phẩm................................................................................................................42
Hình 3.11 Chi tiết sản phẩm.............................................................................................................42
Hình 3.12 Chi tiết giỏ hàng...............................................................................................................42
Hình 3.13 Thông tin đơn hàng và phiếu thông tin khách hàng.........................................................43

v


Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng

LỜI MỞ ĐẦU
Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là một
trong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổ chức,
cũng như của các công ty, nó đóng vai trò hết sức quan trọng, có thể tạo ra những bước
đột phá mạnh mẽ.
Cùng với sự phát triển không ngừng về kỹ thuật máy tính và mạng điện tử,
công nghệ thông tin cũng được những công nghệ có đẳng cấp cao và lần lượt chinh
phục hết đỉnh cao này đến đỉnh cao khác. Mạng Internet là một trong những sản phẩm
có giá trị hết sức lớn lao và ngày càng trở nên một công cụ không thể thiếu, là nền tảng
chính cho sự truyền tải, trao đổi thông tin và thanh toán trên toàn cầu.
Giờ đây, mọi việc liên quan đến thông tin sản phẩm và mua sắm trực tuyến trở

nên thật dễ dàng cho người sử dụng: chỉ cần có một máy tính kết nối internet và một
dòng dữ liệu truy tìm thì gần như lập tức… cả thế giới về vấn đề mà bạn đang quan
tâm sẽ hiện ra, có đầy đủ thông tin sản phẩm bạn cần.
Truy cập Internet giúp ta có được một thông tin khổng lồ phục vụ mọi nhu cầu,
mọi mục đích của chúng ta một cách nhấp chuột. Nhận thức được nhu cầu mua sắm
của thời đại, hàng loạt website cho các mục đích thương mại đã ra đời như
Amazon.com, Sendo.com.vn, Lazada.com, … Để đáp ứng với việc mua bán trức tuyến
thì sự ra đời của một website bán hàng là điều tất yếu. Do vậy em đã quyết định vận
dụng ngôn ngữ PHP, MySQL để “Xây dựng webwite bán hàng” theo mô hình MVC
(Models Views Controllers) với giao diện viết bằng Framework Bootstrap.

Nguyễn Đình Thanh – CCLT07B
1


Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng

PHẦN 1 : GIỚI THIỆU VỀ CÁC CÔNG NGHỆ
Bán hàng qua mạng là một loại hình của thương mại điện tử. Hiện nay, thương
mại điện tử đang ngày càng được phát triển hơn trên thị trường của mỗi quốc gia và
trên thị trường thế giới. Nó đem lại lợi ích cho cả người sản xuất, doanh nghiệp và
người tiêu dùng, vì nó tiết kiệm chi phí, tiết kiệm thời gian, rút ngắn khoảng cách giữa
các doanh nghiệp và giữa các nước. Do nhu cầu và sự phát triển cũng như hiệu quả của
thương mại điện tử mang lại, sau ba năm học tập tại trường với nhưng kiến thức tiếp
thu được tôi quyết định chọn đề tài xây dựng Website bán hàng với giao diện dựa trên
Framework Bootstrap.
Bootstrap là Front-end framework, là một bộ sưu tập miễn phí các công cụ để
tạo ra các trang web và các ứng dụng web. Nó chứa HTML5 và CSS3 dựa trên các
mẫu thiết kế cho kiểu chữ, hình thức, các nút, chuyển hướng và các thành phần giao
diện khác, cũng như mở rộng JavaScript tùy chọn.

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter như
một framework, một công cụ để phục vụ công việc nội bộ của Twitter. Trước khi phát
triển Bootstrap, có nhiều thư viện khác nhau đã được sử dụng để phát triển giao diện,
dẫn đến mâu thuẫn, xung đột.Bootstrap ra đời để khắc phục những yếu tố này, cũng
như giúp các nhà phát triển, lập trình tại Twitter có thể triển khai công việc nhanh hơn,
tiện lợi và đồng bộ hơn.
Bootstrap tương thích với các phiên bản mới nhất của tất cả các trình duyệt nổi
tiếng trên thế giới như Chrome, Firefox, IE, Opera …
Kể từ phiên bản 2.0 trở l nó cũng hỗ trợ Responsive Web Design. Thiết kế và bố
trí của các trang web tự động điều chỉnh, tự động tương thích các thiết bị được sử dụng
(máy tính để bàn, máy tính bảng, điện thoại di động.

1.1 Giới thiệu chung về Bootstrap Framework
1.1.1 Bootstrap là gì ?
Bootstrap là một framework cho phép thiết kế website reponsive nhanh hơn và dễ
dàng hơn.
Bootstrap là bao gồm các HTML templates, CSS templates và Javascript tao ra
những cái cơ bản có sẵn như: typography, forms, buttons, tables, navigation, modals,
image carousels và nhiều thứ khác. Trong bootstrap có thêm các plugin Javascript
trong nó. Giúp cho việc thiết kế reponsive của bạn dễ dàng hơn và nhanh chóng hơn.
Nguyễn Đình Thanh – CCLT07B
2


Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng

1.1.2 Tại sao phải sử dụng Bootstrap ?
Bootstrap có các ưu điểm nổi bật hơn so với các framework khác như :
 Rất dễ để sử dụng: : Nó đơn giản vì nó được base trên HTML, CSS và
Javascript chỉ cẩn có kiến thức cơ bản về 3 cái đó là có thể sử dụng bootstrap

tốt.
 Tính năng Responsive: Với Bootstrap, việc phát triển giao diện website để
phù hợp với đa thiết bị trở nên dễ dàng hơn bao giờ hết. Đây là xu hướng phát
triển giao diện website đang rất được ưu chuộng trên thế giới.
Bản demo các mẫu giao diện được hiển thị trên các thiết bị:

Hình 1.1 Giao diện được hiển thị trên các thiết bị
 Tương thích với trình duyệt : Nó tương thích với tất cả các trình duyệt
(Chrome, Firefox, Internet Explorer, Safari, and Opera) nhưng lưu ý vì IE vẫn
rất hạn chế với IE phiên bản cũ vì thế việc IE9 hay IE8 đổ xuống không hỗ trợ
là điều đáng lo ngại.
 Tiết kiệm thời gian: Boostrap giúp người thiết kế giao diện website tiết kiệm
rất nhiều thời gian. Các thư viện Bootstrap có những đoạn mã sẵn sàng cho bạn
áp dùng vào website của mình. Bạn không phải tốn quá nhiều thời gian để tự
viết code cho giao diện của mình.
 Tùy biến cao : Bạn hoàn toàn có thể dựa vào Bootstrap và phát triển nền tảng
giao diện của chính mình. Bootstrap cung cấp cho bạn hệ thống Grid System
Nguyễn Đình Thanh – CCLT07B
3


Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng

mặc định bao gồm 12 bột và độ rộng 940px. Bạn có thể thay đổi, nâng cấp và
phát triển dựa trên nền tảng này.
Với những ưu thế nổi bật trên thì Bootstrap cũng có những hạn chế nhất
định.
 Sản phẩm nặng, tốc độ tối ưu chưa cao: nên nếu dự án của bạn đòi hỏi sản
phẩm nhẹ thì việc sử dụng bootstrap sẽ là cả một gánh nặng cho web.
 Chưa hoàn thiện: Bootstrap chưa đầy đủ các thư viện cần thiết. Các phát

triển chưa thể tạo ra một framework riêng hoàn hảo, do đó một số trang
web vẫn phải dùng phiên bản dành riêng cho mobile.
 Quá nhiều code thừa: Không thể phủ nhận rằng Bootstrap có rất nhiều ưu
điểm khi nó cũng cấp gần như đầy đủ những tính năng cơ bản của một
trang web responsive hiện đại. Tuy nhiên, mặt trái của việc này là website
của bạn sẽ phải tải thêm rất nhiều dòng code không cần thiết khi mà bạn chỉ
cần chưa đến 10% những gì Bootstrap cung cấp.
 Bootstrap không khuyến khích sáng tạo: Chỉ cần nhét Bootstrap vào themes
sẵn có, gọi ra cái .class từ stylesheet và thế là bạn đã có một trang web
responsive trông cũng ổn ổn. Sự tiện dụng và dễ dàng của Bootstrap nhiều
khi sẽ khuyễn khích tính lười sáng tạo, vốn luôn thường trực trong mỗi
chúng ta. Kết quả là, chúng ta thướng thoả hiệp những gì mình thực sự
muốn cho website để đổi lấy sự tiện dụng và tiết kiệm thời gian mà
Bootstrap mang lại.

Hình 1.2: Logo của Bootstrap Framework
1.1.3 Cách cài đặt Framework Bootstrap
Twitter Bootstrap giúp chúng ta giảm thiểu thời gian thiết kết html và css.Twitter
Bootstrap định nghĩa sẳn các class css công việc của chúng ta chỉ là sử dụng các class
đó vào mục đích của mình.
Nguyễn Đình Thanh – CCLT07B
4


Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng

 Bước 1: Tải về Bootstrap tại đây: />Sau khi tải về, sẽ có một file Zip. Tiến hành giải nén ta có một thư mục có tên
bootstrap, bên trong có 3 thư mục : css, img, js

 Bước 2: Chúng ta tạo 1 file html có tên là index.html ở trong thư mục bootstrap

vừa giải nén phía trên.

1.2 Giới thiệu về ngôn ngữ PHP.
PHP - viết tắt hồi quy của "Hypertext Preprocessor", là một ngôn ngữ lập trình
kịch bản được chạy ở phía server nhằm sinh ra mã html trên client. PHP đã trải qua rất
nhiều phiên bản và được tối ưu hóa cho các ứng dụng web, với cách viết mã rõ rãng,
tốc độ nhanh, dễ học nên PHP đã trở thành một ngôn ngữ lập trình web rất phổ biến và
được ưa chuộng.
PHP chạy trên môi trường Webserver và lưu trữ dữ liệu thông qua hệ quản trị cơ
sở dữ liệu nên PHP thường đi kèm với Apache, MySQL và hệ điều hành Linux
(LAMP).
•

Apache là một phần mềm web server có nhiệm vụ tiếp nhận request từ trình
duyệt người dùng sau đó chuyển giao cho PHP xử lý và gửi trả lại cho trình
duyệt.

•

MySQL cũng tương tự như các hệ quản trị cơ sở dữ liệu khác (Postgress,
Oracle, SQL server...) đóng vai trò là nơi lưu trữ và truy vấn dữ liệu.

Nguyễn Đình Thanh – CCLT07B
5


Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng
•

Linux: Hệ điều hành mã nguồn mở được sử dụng rất rộng rãi cho các

webserver. Thông thường các phiên bản được sử dụng nhiều nhất là RedHat
Enterprise Linux, Ubuntu...

PHP hoạt động như thế nào?
•

Khi người sử dụng gọi trang PHP, Web Server sẽ triệu gọi PHP Engine để thông
dịch dịch trang PHP và trả kết quả cho người dùng như hình bên dưới.

Hình 1.3 Cách thức hoạt động của ngôn ngữ PHP
Các bước cài đặt Web server:
Bước 1: Download XAMPP tại và tiến
hành cài đặt như các chương trình thông thường.
Bước 2: Start Apache và MySQL trong XAMPP control panel

Nguyễn Đình Thanh – CCLT07B
6


Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng

Hình 1.4 Giao diện controller XAMP
Bước 3: Gõ vào trình duyệt địa chỉ localhost. Nếu hiện ra màn hình sau thì việc cài đặt
đã thành công.

Hình 1.5 Giao diện Localhost

Nguyễn Đình Thanh – CCLT07B
7

Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng

Bước 4: Vào thư mục cài đặt XAMPP/htdocs và tiến hành tạo file test.php với nội
dung như sau :
1


2

echo "Hello World";

3 ?>
Gõ trên trình duyệt địa chỉ localhost/test.php. Nếu hiện ra dòng chữ Hello World nghĩa
là ứng dụng PHP đầu tiên đã chạy thành công.

Hình 1.6 Chương trình Hello world !
TIPS: Để lập trình PHP chúng ta có thể sử dụng các IDE sau: Netbeans, Eclipse,
Zend Studio, PHP Storm...để đẩy nhanh quá trình phát triển và hạn chế lỗi xảy ra trong
quá trình lập trình.

1.3 Giới thiệu về hệ quản trị cơ sở dữ liệu MySQL
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 í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ủ. Nó có
nhiều phiên bản cho các hệ điều hành khá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,...
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).
Nguyễn Đình Thanh – CCLT07B
8


Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng

MySQL được sử dụng cho việc bổ trợ PHP, Perl, và nhiều ngôn ngữ khác, nó làm
nơi lưu trữ những thông tin trên các trang web viết bằng PHP hay Perl, ...

1.4 Giới thiệu về mô hình MVC (Models Views Controllers)
Mô hình MVC (Model-View-Controller) là một kiến trúc phần mềm, đây là mô
hình tổ chức code một cách hợp lý và có hệ thống. Mô hình MVC tách biệt phần xử lý
dữ liệu ra khỏi phần giao diện, cho phép phát triển, kiểm tra và làm việc theo dự án.

Hình 1.7 Mô hình MVC
Theo đó :
-

Models : thể hiện các cấu trúc dữ liệu. Các lớp thuộc thành phần Model thường

thực hiện các tác vụ như truy vấn, thêm, xoá, cập nhật dữ liệu. Khi dữ liệu trong
Model thay đổi, thành phần View sẽ được cập nhật lại.Nói đơn giản hơn, Modem là
lớp thao tác với database là chính.
-

Views : là thành phần thể hiện dữ liệu trong Model thành các giao diện tương

tác với người sử dụng. Một mô hình có thể có nhiều View phụ thuộc vào các mục đích
khác nhau. Nói đơn giản hơn, View là lớp hiển thị dữ liệu ra bên ngoài cho người
dùng xem.
-

Controllers đóng vai trò trung gian giữa Model và View. Thông tin người dùng

từ View được gửi cho Controller xử lý, sau đó Controller tương tác với Model để lấy
Nguyễn Đình Thanh – CCLT07B
9


Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng

dữ liệu được yêu cầu, sau cùng Controller trả dữ liệu này về cho View. Nói đơn giản
hơn, Controller là lớp điều khiển, có chức năng điều khiển các hành vi, yêu cầu.
Mô hình MVC thường được sử dụng trong các ứng dụng web, vì thành phần View
( mã HTML/XHTML) được sinh ra từ các ngôn ngữ thiết kế website. Thành phần
Controller sẽ nhận các dữ liệu GET/POST, xử lý những dữ liệu này, sau đó chuyển
sang Model xử lý.
Model sẽ trả dữ liệu về phía Controller, sau đó Controller sinh mã HTML/XHTML
để thể hiện trên View.
Ưu và nhược điểm của mô hình MVC
•

•

Ưu điểm:
-

Hệ thống phân ra từng phần nên dễ dáng phát triển.

-

Chia thành nhiều modunl nhỏ nên nhiều người có thể làm chung dự án.

-

Vấn đề bảo trì cũng tương đối tốt, dễ nâng cấp.

-

Dễ dàng debug trong quá trình xây dựng.

Nhược điểm
-

Hệ thống sẽ chạy chậm hơn PHP thuần.

-

Xây dựng cầu kì và mất thời gian để xây dựng thư viện, cấu trúc.

Nguyễn Đình Thanh – CCLT07B
10


Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng

PHẦN 2 : PHÂN TÍCH VÀ THIẾT KẾ
2.1 Giới thiệu về website bán hàng.
Website sẽ được xây dựng theo hai phần:
o Phần 1: Front-end
Phần front-end là phần dùng cho xây dựng các chức năng cho người dùng
hay còn gọi là khách hàng. Front-end gồm có chức năng và nhiệm vụ sau:
o Giao diện hiển thị trang chủ.
o Giao diện hiển thị chi tiết danh mục.
o Giao diện hiển thị chi tiết sản phẩm.
o Chức năng giỏ hàng (thêm, cập nhật, xóa).
o Giao diện chi tiết giỏ hàng.
o Giao diện chi tiết đặt hàng.
o Chức năng tìm kiếm sản phẩm.
o Phẩn 2 : Back-end
Phẩn back-end là phần dành cho quản trị viên, trong đó xây dựng các chức
năng như sau:
o Chức năng cập nhật danh mục sản phẩm.
o Chức năng cập nhật sản phẩm.
o Chức năng xử lý đơn hàng.
o Chức năng tìm kiếm.
o Chức năng đổi thông tin tài khoản.
2.2 Yêu cầu hệ thống thông tin
2.2.1 Yêu cầu hệ thống
− Sử dụng ngôn ngữ PHP.
− Hệ quản trị cơ sở dữ liệu MySQL.
− Framework Bootstrap 3.
2.2.2 Yêu cầu chức năng
− Quản trị hệ thống: bao gồm đăng nhập, đăng xuất khỏi hệ thống.
− Quản lý sản phẩm: bao gồm các chức năng cập nhật sản phẩm
− Quản lý danh mục sản phẩm: bao gồm các chức năng cập nhật danh mục sản

phẩm.
Nguyễn Đình Thanh – CCLT07B
11


Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng

− Quản lý đơn hàng : Chức năng xử lý đơn hàng.
− Tìm kiếm: tìm kiếm theo tin.
2.2.3 Yêu cầu phi chức năng
− Giao diện web đẹp, thân thiện với người dùng.
− Hệ thống hoạt động liên tục.
− Phục vụ được một lúc nhiều người.
− Thông tin website chính xác.
2.3 Phân tích hệ thống
2.3.1 Biêu đồ phân rã chức năng

Hình 2.1: Biểu đồ phân rã chức năng
2.3.2 Biểu đồ luồng dữ liệu mức ngữ cảnh

Hình 2.2: Biểu đồ luồng dữ liệu mức ngữ cảnh
Giải thích :
1. Yêu cầu hệ thống website.
2. Trả về kết quả của yêu cầu hệ thống.
3. Yêu cầu hệ thống hệ thống.
4. Trả về kết quả của yêu cầu hệ thống.

Nguyễn Đình Thanh – CCLT07B
12

Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng

2.3.3 Biểu đồ luồng dữ liệu mức 0

Hình 2.3 : Biểu đồ luồng dữ liệu mức 0
Giải thích :
1. Yêu cầu cập nhật quản trị hệ thống .
2. Cập nhật quản trị hệ thống .
3. Trả về thông tin quản trị hệ thống.
4. Hiển thị thông tin quản trị hệ thống.
5. Yêu cầu cập nhật quản lý danh mục sản phẩm.
6. Cập nhật quản lý danh mục .
7. Trả về thông tin quản lý danh mục.
8. Hiển thị thông tin quản lý danh mục.
9. Yêu cầu cập nhật quản lý đơn hàng.
10. Cập nhật quản lý đơn hàng.
11. Trả về thông tin quản lý đơn hàng.
12. Hiển thị thông tin quản lý đơn hàng.
13. Yêu cầu tìm kiếm.
14. Cập nhật kết quả tìm kiếm.
15. Trả về thông tin tìm kiếm.
16. Hiển thị thông tin tìm kiếm.
2.3.4 Biểu đồ luồng dữ liệu mức 1: Quản trị hệ thống
Nguyễn Đình Thanh – CCLT07B
13


Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng

Hình 2.4 : Biểu đồ luồng dữ liệu quản trị hệ thống mức 1
Giải thích :
1. Quản trị viên yêu cầu đăng nhập.
2. Hệ thống cập nhật và truy xuất dữ liệu.
3. Trả về kết quả cho quản trị viên.
4. Hiển thị kết quả cho quản trị viên.
5. Quản trị viên yêu cầu đăng xuất.
6. Hệ thống cập nhật thông tin tài khoản.
7. Trả về kết quả cho quản trị viên.
8. Hiển thị kết quả cho quản trị viên.
9. Quản trị viên yêu cầu thay đổi thông tin.
10. Hệ thống cập nhật thông tin tài khoản.
11. Trả về kết quả cho quản trị viên.
12. Hiển thị kết quả cho quản trị viên.

2.3.5 Biểu đồ luồng dữ liệu mức 1: Quản lý danh mục
Nguyễn Đình Thanh – CCLT07B
14


Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng

Hình 2.5 Biểu đồ luồng dữ liệu mức 1 – quản lý danh mục
Giải thích :
1. Quản trị viên yêu cầu cập nhật danh mục sản phẩm.
2. Hệ thống cập nhật và truy xuất dữ liệu.
3. Trả về kết quả cho quản trị viên.
4. Hiển thị kết quả cho quản trị viên.
5. Quản trị viên yêu cầu cập nhật sản phẩm.
6. Hệ thống cập nhật và truy xuất dữ liệu.

7. Trả về kết quả cho quản trị viên.
8. Hiển thị kết quả cho quản trị viên.
2.3.6 Biểu đồ luồng dữ liệu mức 1: Quản lý nghiệp vụ

Hình 2.6 Biểu đồ luồng dữ liệu mức 1 – quản lý đơn hàng
Giải thích :
1. Quản trị viên yêu cầu xử lý đơn hàng.
Nguyễn Đình Thanh – CCLT07B
15


Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng

2. Hệ thống cập nhật và truy xuất dữ liệu.
3. Trả về kết quả cho quản trị viên.
4. Hiển thị kết quả cho quản trị viên.
2.3.7 Biểu đồ luồng dữ liệu mức 1: Quản lý nghiệp vụ

Hình 2.7 Biểu đồ luồng dữ liệu mức 1 – tìm kiếm
Giải thích :
1. Quản trị viên yêu cầu tìm kiếm sản phẩm.
2. Hệ thống cập nhật và truy xuất dữ liệu.
3. Trả về kết quả cho quản trị viên.
4. Hiển thị kết quả tìm kiếm cho quản trị viên.
2.4 Thiết kế cơ sở dữ liệu
Users (TÀI KHOẢN)
TT
1
2
3

4
5
6
6
7

Tên gọi
id
email
password
name
address
phone
level
status

Kiểu
int
varchar
varchar
varchar
varchar
varchar
int
tinyint

Độ dài
11
255
32

50
100
50
11
4

Chú thích
Mã admin
Tên admin
Mật khẩu
Tên
Địa chỉ
Số điện thoại
Quyền hạn
Trạng thái

Nguyễn Đình Thanh – CCLT07B
16


Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng

Categories (DANH MỤC)
TT

Tên gọi

Kiểu

Độ dài

Chú thích

1

id

int

11

Mã danh mục

2

name

255

255

Tên danh mục

3
4

possition
status

int

tinyint

11
4

Vị trí hiển thị
Trạng thái

Products (SẢN PHẨM)
TT

Tên gọi

Kiểu

Độ dài

Chú thích

1

id

int

11

Mã danh mục

2

Categories_id

int

11

Mã sản phẩm

3
4
5
6
7

name
summary
images
price
status

varchar
text
varchar
double
tinyint

255

Tên sản phẩm

Tóm tắt
Hình ảnh
Giá
Trạng thái

255
4

Orders (ĐƠN HÀNG)
TT
1
2
3
4
5
6

Tên gọi
id
name
address
phone
create_time
status

Kiểu
int
varchar
varchar
varchar

datetime
tinyint

Độ dài
11
50

Chú thích
Mã đơn hàng
Tên tên người

100

đặt hàng
Địa chỉ người

20

đặt hàng
Số điện thoại

4

người đặt hàng
Ngày đặt hàng
Trang thái

Nguyễn Đình Thanh – CCLT07B
17

Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng

Order_detail (CHI TIẾT ĐƠN HÀNG)
TT
1
2
3
4

Tên gọi
id
orders_id
product_id
number

Kiểu
int
int
int
varchar

Độ dài
11

Chú thích
Mã chi tiết đơn

11
11

20

hàng
Mã đơn hàng
Mã sản phẩm
Số sản phẩm
đã đặt

2.5 Mô hình thực thể ERD

Hình 2.8 Mô hình thực thể liên kết

Nguyễn Đình Thanh – CCLT07B
18


Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng

2.6 Sơ đồ cơ sở dữ liệu

Hình 2.9 Sơ đồ cơ sở dữ liệu
2.7 Xây dựng website bằng mô hình MVC
2.7.1 MODELS
Thể hiện các cấu trúc dữ liệu. Các lớp thuộc thành phần Model thường thực hiện
các tác vụ như truy vấn, thêm, xoá, cập nhật dữ liệu. Khi dữ liệu trong Model thay
đổi, thành phần View sẽ được cập nhật lại.

Hình 2.10 cấu trúc thư mục và file của lớp Models

Nguyễn Đình Thanh – CCLT07B

19