Xây dựng website cho siêu thị điện máy thái nguyên

LỜI CÁM ƠN
Trong thời gian làm đồ án, em đã nhận được nhiều sự giúp đỡ, đóng góp ý
kiến và chỉ bảo nhiệt tình củathầy cô, gia đình và bạn bè.
Em xin gửi lời cảm ơn chân thành đến TS.Vũ Vinh Quang, người đã tận
tình hướng dẫn, chỉ bảo em trong suốt quá trình làm thực tập.
Em cũng xin chân thành cảm ơn các thầy cô giáo trong trường ĐH Công
nghệ thông tin & truyền thông nói chung, các thầy cô trong Bộ môn Khoa Học Máy
Tính nói riêng đã dạy dỗ cho em kiến thức về các môn đại cương cũng như các
môn chuyên ngành, giúp em có được cơ sở lý thuyết vững vàng và tạo điều kiện
giúp đỡ em trong suốt quá trình học tập.
Cuối cùng, em xin chân thành cảm ơn gia đình và bạn bè, đã luôn tạo điều
kiện, quan tâm, giúp đỡ, động viên em trong suốt quá trình học tập và hoàn thành
đồ án tốt nghiệp.
Bước đầu đi vào thực tế, kiến thức của em còn hạn chế và còn nhiều bỡ ngỡ.
Do vậy, không tránh khỏi những thiếu sót là điều chắc chắn, em rất mong nhận
được những ý kiến đóng góp quý báu của quý Thầy Cô và các bạn để kiến thức của
em trong lĩnh vực này được hoàn thiện hơn.

1


LỜI CAM ĐOAN
Đồ án tốt nghiệp là một sản phẩm quan trọng, là sự tổng hợp các ý kiến và
kiến thức mà sinh viên đã được học trong suốt quá trình học tập của bản thân mình
tại trường. Ý thức được điều đó, với tinh thần làm việc nghiêm túc, tự giác và sự lao
động miệt mài của bản thân cùng với sự hướng dẫn tận tình của thầy TS.Vũ Vinh
Quang em đã hoàn thành đồ án tốt nghiệp của mình.
Em xin cam đoan: Đồ án tốt nghiệp này là sản phẩm do chính em nghiên cứu
và xây dựng nên, nội dung trong đồ án của em không sao chép từ bất kỳ đồ án nào
khác. Mọi thông tin sai lệch trong đồ án em xin hoàn toàn chịu trách nhiệm trước
hội đồng bảo vệ.

Sinh viên
Phan Văn Quang

2


MỤC LỤC
LỜI CÁM ƠN .........................................................................................................1
LỜI CAM ĐOAN....................................................................................................2
MỤC LỤC ..............................................................................................................3
LỜI NÓI ĐẦU ........................................................................................................5
CHƯƠNG 1: TÌM HIỂU VỀ CƠ SỞ LÝ THUYẾT ................................................9
1.1 WEB APPLICATION FRAMEWORK, MÔ HÌNH MVC ............................9
1.1.1 Web Application Framework là gì? ..........................................................9
1.1.2 PHP Framework.......................................................................................9
1.1.3 Framwork CSS.........................................................................................9
1.1.4 Mô hình MVC(Model-View-Controller). ...............................................10
1.1.5 Vai trò của các thành phần M-V-C trong Web framework......................10
1.2 TÌM HIỂU FRAMWORK PHP LARAVEL................................................12
1.2.1. Giới thiệu về Framework LARAVEL:...................................................12
1.2.2 Cài đặt framework Laravel. ....................................................................12
1.2.3 Giới thiệu 1 số thư mục chính của Framework .......................................12
1.2.4 Những điểm nổi bật...............................................................................15
1.2.5 Làm việc trên laravel..............................................................................16
1.3 TÌM HIỂU FRAMWORK CSS BOOTSTRAP............................................17
1.3.1 Giới thiệu về BOOTSTRAP. ..................................................................17
1.3.2 Cấu trúc của Bootstrap ...........................................................................18
1.3.3 Cài đặt Frame Work Bootstrap3. ............................................................18
1.3.4 Làm việc cơ bản với Framework Bootstrap3. .........................................19
CHƯƠNG 2. TÌM HIỂU HỆ THỐNG KINH DOANH TRỰC TUYẾN VÀ PHÂN

TÍCH THIẾT KẾ XÂY DỰNG WEBSITE ...........................................................23
2.1.Khảo sát .......................................................................................................23
2.1.1.Giới thiệu về siêu thị điện máy Thái Nguyên..........................................23
2.1.2.Khảo sát thực trạng siêu thị điện máy Thái Nguyên................................23
2.1.3. Giải pháp xây dựng website ..................................................................24

3


2.1.4.Yêu cầu hệ thống....................................................................................25
2.1.5.Mục tiêu của đề tài nghiên cứu...............................................................26
2.2 Phân tích thiết kế hệ thống bằng UML .........................................................27
2.2.1 Biểu đồ USE CASE, biểu đồ trình tự và biểu đồ cộng tác.......................27
2.2.2 Biểu đồ lớp.............................................................................................52
2.2.3 Biểu đồ hoạt động ..................................................................................56
CHƯƠNG 3: XÂY DỰNG WEBSITE CHO CÔNG TY.......................................57
3.1 CẤU TRÚC TRANG WEBSITE .................................................................57
3.1.1 Cấu trúc HMVC của website..................................................................57
3.1.2 Cấu hình cơ sở dữ liệu website. ..............................................................59
3.2 Một số hình ảnh về website ..........................................................................59
KẾT LUẬN...........................................................................................................62
TÀI LIỆU THAM KHẢO .....................................................................................63
NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN....................................................64

4


DANH MỤC HÌNH ẢNH
Hình 1.1 : Mô hình MVC ........................................................................................9
Hình 1.2: Các lớp của mô hình MVC ....................................................................10

Hình 1.3: Biểu đồ tuần tự một chuỗi MVC đơn giản..............................................11
Hình 1.4 Grid System ............................................................................................19
Hình 2.1.Biểu đồ Usecase tổng quát ......................................................................29
Hình 2.2: Biểu đồ trình tự cho tác vụ đăng ký thành viên ......................................30
Hình 2.3: Biểu đồ cộng tác cho tác vụ đăng ký thành viên.....................................30
Hình 2.4: Biểu đồ trình tự cho tác vụ đăng nhập ....................................................31
Hình 2.5: Biểu đồ cộng tác cho tác vụ đăng nhập ..................................................31
Hình 2.6: Biểu đồ trình tự cho tác vụ tìm kiếm sản phẩm ......................................32
Hình 2.7: Biểu đồ cộng tác cho tác vụ tìm kiếm sản phẩm.....................................32
Hình 2.8: Biểu đồ trình tự cho tác vụ xem chi tiết sản phẩm ..................................33
Hình 2.9: Biểu đồ cộng tác cho tác vụ xem chi tiết sản phẩm ................................33
Hình 2.10: Biểu đồ trình tự cho tác vụ thêm sản phẩm vào giỏ hàng......................34
Hình 2.11: Biểu đồ cộng tác cho tác vụ thêm sản phẩm vào giỏ hàng ....................34
Hình 2.12: Biểu đồ trình tự cho tác vụ xóa sản phẩm trong giỏ hàng .....................35
Hình 2.13: Biểu đồ cộng tác cho tác vụ xóa sản phẩm trong giỏ hàng....................35
Hình 2.14: Biểu đồ trình tự cho tác vụ cập nhật số lượng trong giỏ hàng ...............36
Hình 2.15: Biểu đồ cộng tác cho tác vụ cập nhật số lượng trong giỏ hàng..............36
Hình 2.16: Biểu đồ trình tự cho tác vụ xem giỏ hàng .............................................37
Hình 2.17: Biểu đồ cộng tác cho tác vụ xem giỏ hàng ...........................................37
Hình 2.18: Biểu đồ trình tự cho tác vụ làm đơn hàng .............................................38
Hình 2.19: Biểu đồ cộng tác cho tác vụ làm đơn hàng ...........................................38
Hình 2.20: Biểu đồ trình tự cho tác vụ quản trị viên đăng nhập..............................39
Hình 2.21: Biểu đồ cộng tác cho tác vụ quản trị viên đăng nhập ............................39
Hình 2.22: Biểu đồ trình tự cho tác vụ quản lý khách hàng....................................40
Hình 2.23: Biểu đồ cộng tác cho tác vụ quản lý khách hàng ..................................41
Hình 2.24: Biểu đồ trình tự Quản trị viên thêm loại sản phẩm ...............................42

5

Hình 2.25:Biểu đồ cộng tác cho tác vụ thêm loại sản phẩm ...................................42
Hình 2.26: Biểu đồ trình tự cho tác vụ xóa loại sản phẩm ......................................43
Hình 2.27: Biểu đồ cộng tác cho tác vụ xóa loại sản phẩm ....................................43
Hình 2.28: Biểu đồ trình tự cho tác vụ cập nhật loại sản phẩm...............................43
Hình 2.29: Biểu đồ cộng tác cho tác vụ cập nhật loại sản phẩm .............................44
Hình 2.30: Biểu đồ trình tự cho tác vụ thêm sản phẩm mới....................................45
Hình 2.31: Biểu đồ cộng tác cho tác vụ thêm sản phẩm mới ..................................45
Hình 2.32: Biểu đồ trình tự cho tác vụ xóa sản phẩm.............................................45
Hình 2.33: Biểu đồ cộng tác cho tác vụ xóa sản phẩm ...........................................46
Hình 2.34: Biểu đồ trình tự cho tác vụ cập nhật sản phẩm .....................................46
Hình 2.35: Biểu đồ cộng tác cho tác vụ cập nhật sản phẩm....................................46
Hình 2.36: Biểu đồ trình tự cho tác vụ cập nhật đơn hàng......................................47
Hình 2.37: Biểu đồ cộng tác cho tác vụ cập nhật đơn hàng ....................................47
Hình 2.38: Biểu đồ trình tự cho tác vụ xử lý ý kiến khách hàng.............................48
Hình 2.39: Biểu đồ cộng tác cho tác vụ xử lý ý kiến khách hàng ...........................49
Hình 2.40: Biểu đồ trình tự cho tác vụ thêm tin tức ...............................................50
Hình 2.41: Biểu đồ cộng tác cho tác vụ thêm tin tức..............................................50
Hình 2.42: Biểu đồ trình tự cho tác vụ xóa tin tức..................................................50
Hình 2.43: Biểu đồ cộng tác cho tác vụ xóa tin tức ................................................51
Hình 2.44: Biểu đồ trình tự cho tác vụ cập nhật tin tức ..........................................51
Hình 2.45: Biểu đồ cộng tác cho tác vụ cập nhật tin tức.........................................52
Hình 2.46: Biểu đồ lớp cho ca sử dụng quản lý Loại _Sản_Phẩm ..........................52
Hình 2.47: Biểu đồ lớp cho ca sử dụng Quản lý_Sản Phẩm ...................................53
Hình 2.48: Biểu đồ cho ca sử dụng người dùng .....................................................53
Hình 2.49: Biểu đồ lớp cho ca sử dụng QL_Tin tức...............................................54
Hình 2.50: Biểu đồ lớp cho ca sử dụng Đơn Hàng .................................................55
Hình 2.51: Biểu đồ lớp chính trong Hệ Thống .......................................................55
Hình 2.52: Biểu đồ hoạt động cho tác vụ Khách Hàng...........................................56
Hình 2.53: Biểu đồ hoạt động cho tác vụ Admin ...................................................57
Hình 3.1. Thư mục mã nguồn views ......................................................................57

6


Hình 3.2. Thư mục model......................................................................................58
Hình 3.4: cấu hình database. ..................................................................................59
Hình 3.5: Danh mục sản phẩm..............................................................................60
Hình 3.6. Chi tiết sản phẩm ..................................................................................60
Hình 3.7. Giỏ hàng. ...............................................................................................60
Hình 3.8: Xem các sản phẩm .................................................................................61

7


LỜI NÓI ĐẦU
Laravel là 1 trong những framwork khá mới mẻ, trong thời gian gần đây
Laravel đang được cộng đồng PHP chú ý , ưa chuộng, và sử dụng bởi tính năng linh
hoạt và tùy biến cao của nó. Laravel là 1 framework kế thừa nhiều thư viện
Symphony (framework khá nổi tiếng)
Bootstrap là một CSS Framework miễn phí phổ biến nhất hiện nay do Twitter
phát triển. Nó là bộ công cụ giúp design trang web bằng css nhanh và theo chuẩn quốc tế.
Xây dựng một website bán hàng trở nên phổ biến, xu thế mạnh mẽ. Có nhiều
công ty kinh doanh có nhu cầu quản bá sản phẩm, mua bán trực tuyến. Chính vì vậy
em xin xây dựng một website kinh doanh điện máy với laravel và Bootstrap.
Em xin chân thành cảm ơn các thầy cô khoa Công nghệ thông tin – Đại học
Công nghệ và truyền thông đã trang bị cho em nhưng kiến thức cơ bản cần thiết
trong nhưng năm học vừa qua. Đặc biệt em chân trọng xin cảm ơn thầy TS. Vũ
Vinh Quang đã tận tình giúp đỡ, hướng dẫn em, tạo những điều kiện thuận lợi để
em có thể hoàn thành tốt đồ án tốt nghiệp này. Do thời gian nghiên cứu và kinh
nghiệm thực tế có hạn, mặc dù đã cố gắng nhưng đề tài không tránh khỏi những sai

sót nhất định. Kính mong quý doanh nghiệp, quý thầy cô đóng góp ý kiến bổ sung
để đề tài được hoàn thiện hơn.
Em xin chân thành cảm ơn !
Sinh viên thực hiện:
Phan Văn Quang

8


CHƯƠNG 1: TÌM HIỂU VỀ CƠ SỞ LÝ THUYẾT
1.1 Web application framework, mô hình mvc
1.1.1 Web Application Framework là gì?
“Web application framework” là một nền tảng phần mềm được thiết kế để
hỗ trợ việc phát triển các website động, các ứng dụng web và các dịch vụ web.
Mục đích của Framework là nhắm tới việc giảm bớt các hao phí liên quan
tới các hoạt động thực hiện trong quá trình phát triển web. Ví dụ, nhiều framework
cung cấp thư viện để truy cập cơ sở dữ liệu, khung khuôn mẫu và quản lý phiên làm
việc, thêm vào đó làm tăng khả năng tái sử dụng mã.
1.1.2 PHP Framework
PHP framework là web framework được viết bằng PHP - một ngôn ngữ lập
trình nguồn mở phổ biến nhất hiện nay. Nội dung khóa luận đề cập tới PHP
Framework là do PHP là ngôn ngữ rất linh hoạt, được các lập trình viên ưa chuộng
sử dụng khi tiến hành xây dựng các ứng dụng web cỡ lớn (Facebook, Flickr,
Twitter…). Chưa kể tới việc vấn đề an toàn, bảo mật cho ứng dụng web ngày càng
bị xem nhẹ. Đây là lúc họ cần tới một PHP framework.

Hình 1.1 : Mô hình MVC
1.1.3 Framwork CSS.
Cũng như các ngôn ngữ khác, khi ta đưa ra một ngôn ngữ, ta có đầy đủ các
API giúp người lập trình hầu như lập trình tốt với nó. Nhưng mọi thứ không dừng ở

9


đây, các framework được xây dựng để ta lập trình nhanh và tốt hơn nữa.CSS
Framework cũng vậy, nó giúp các môi trường làm việc với CSS được các lập trình
viên/ nhóm lập trình xây dựng giúp lập trình CSS nhanh và chuẩn hơn. Cấu trúc của
các framework đều đạt chuẩn W3C.
1.1.4 Mô hình MVC(Model-View-Controller).
MVC là chữ viết tắt của Model-View-Controller, một mẫu kiến trúc
(architectural pattern) được tạo ra nhằm giải quyết các vấn đề phát sinh cũng như
các giải pháp tổ chức mã trong quá trình phát triển phần mềm. Khi sử dụng đúng
cách, mẫu MVC giúp cho người phát triển phần mềm cô lập các nguyên tắc
nghiệp vụ và giao diện người dùng một cách rõ ràng hơn.
1.1.5 Vai trò của các thành phần M-V-C trong Web framework

Hình 1.2: Các lớp của mô hình MVC
a. C -Controller
Controller là các lớp điều khiển luồng ứng dụng, tiếp nhận yêu cầu người
dùng thông qua HTTP header, sau đó chuyển tiếp nó đến các lớp phụ trách trực
tiếp xử lý yêu cầu
Tùy theo dữ liệu đầu vào, Controller sẽ thực hiện các phép lọc (với dịch vụ
lấy từ Model), các tính toán lựa chọn (Action Mapping) dựa trên kiến trúc và cấu
hình nhằm xác định thành phần lớp chính sẽ thực hiện yêu cầu của người
dùng. Hiểu một cách đơn giản, Controller là thành phần trung gian giữa View và
Model. Nó nhận dữ liệu nhập vào qua View, sau đó gọi Model tương ứng rồi lấy
kết quả trả về từ Model này. Tiếp theo, một View thích hợp sẽ được lựa chọn.
Controller sẽ chuyển tiếp dữ liệu vào view để nó xử lý.
b. M -Model
Model là các lớp cung cấp dữ liệu, dịch vụ liên quan đến dữ liệu và các vấn

đề xử lý logic nghiệp vụ. Model có thể:
10


+ Đánh giá tính hợp lệ của dữ liệu.
+ Ví dụ kiểm tra dữ liệu vào có đúng với nguyên tắccủa hệ thống không
+ Chuyển đổi dữ liệu. Ví dụ chuyển đổi định dạng file, chuyển đổi tỉ giá,
chuyển đổi ngôn ngữ…
+ Đưa ra quyết định về nghiệp vụ. Ví dụ đưa ra các dữ liệu, lời khuyên tư
vấn đầu tư .dựa trên dữ liệu đầu vào của người dùng và các dữ liệu đang có
+ Thực hiện việc xử lý dữ liệu theo một quy trình.
c. V -View
View là các lớp định nghĩa cách thức trình bày dữ liệu (không cập nhậtdữ
liệu). Trong các web framework, View gồmhai phần chính:
+ Template file:định nghĩa cấu trúc và cách thức trình bày dữ liệu cho
người dùng. Ví dụ như bố cụ, màu sắc, khung nhìn...
+ Phần Logic:xử lý cách áp dụng dữ liệu vào cấu trúc trình bày. Logic này
có thể bao gồm việc kiểm tra định dạng dữ liệu, chuyển đổi định dạng dữ liệu sang
một sạng dữ liệu trung gian để có thể hiển thị với cấu trúc template đang có..., kiểm
tra trạng thái và đặc tính của dữ liệu để lựa chọn một cấu trúc hiện thị phù hợp. Bản
thân View cũng là một tổ hợp của nhiều lớp. Và nó cũng có thể có View con để
giảm tải trên một số lớp chính và để sử dụng lại mã.
Các công nghệ thường được sử dụng ở View là HTML, CSS và JavaScript.

Hình 1.3: Biểu đồ tuần tự một chuỗi MVC đơn giản

11


1.2 Tìm hiểu framwork php laravel

1.2.1. Giới thiệu về Framework LARAVEL:
Laravel ra mắt vào cuối tháng 04-2011 nhưng đã gây được sự chú ý lớn đối
với cộng đồng PHP framework. Laravel được tạo ra bởi Taylor Otwell. Nó là 1
framework khá mới mẻ nhưng bù lại nó có “hướng dẫn sử dụng” (Document) khá
đầy đủ, rõ ràng và dễ hiểu và nhiều ưu điểm hấp dẫn. Nếu đã từng làm việc với các
framework khác hoặc chỉ là người mới bắt đầu tìm hiểu php framework thì việc tiếp
cận laravel framework không phải là vấn đề khó khăn gì. Laravel Frameword vẫn
sử dụng cấu trúc MVC và trên nền tảng lập trình hướng đối tượng OOP đồng thời
kế thừa được sức mạnh của các đàn anh và đem đến những tính năng mới của PHP
5.3 trở lên.
1.2.2 Cài đặt framework Laravel.
a. Chuẩn bị
 Composer
 Một webserver với :
 PHP >= 5.4 -- MCrypt PHP Extension
 Một localhost chạy PHP
b. Cài đặt Laravel
 Mở CommandPrompt lên tại thư mục gốc của localhost (với WampServer
là thư mục www, các server khác có thể là htdocs, public, …). Gõ lệnh sau
composer create-project laravel/laravel laravelproject --prefer-dist
Composer sẽ tự động tải và cài đặt Laravel kèm với các thành phần đi kèm
vào thư mục laravelproject (các ta có thể đổi tên thư mục này tùy ý)
 Mở trình duyệt lên truy cập vào địa chỉ http://localhost/laravelproject/public
1.2.3 Giới thiệu 1 số thư mục chính của Framework
pathroot/
/app/
/commands/
/config/

12

/controllers/
/database/
/lang/
/models/
/start/
/storage/
/tests/
/views/
/bootstrap/
/public/
/index.php
/assets/
/packages/
/uploads/
/vendor/
/workbench/
/Composer.json
/Artisan
/server.php
Trong đó:
Pathroot là đường dẫn tới thư mục laravel và chứa tất cả các file của laravel,
bao gồm các file cần phải có composer.json,artisan, server.php, và các thư mục con
chính app, bootstrap, public, vendor, workbench (có thể không có).
1. Composer.json là file để cấu hình việc thao tác với composer như install
hay update Laravel, thêm các file hỗ trợ ...
2. Artisan là file mà laravel tạo ra để hỗ trợ chạy lệnh: php artisan
3. server.php cần có để chạy lệnh: php artisan serve
4. app là thư mục chứa các file cấu hình, lưu trữ, tập lệnh của laravel, trong

đó gồm có:
 commands: các command sử dụng trong laravel (hiện tại chưa cần để ý đến nó).

13


 config:

nơi chứa các file cấu hình laravel như database, mail, url, ...

 models,

views, controllers: nơi chứa file của mô hình MVC

 database:

nơi chứa các file xây dựng và khởi tạo cơ sở dữ liệu

 lang:

nơi chứa các file ngôn ngữ

 start:

các file xử lý khi laravel hoạt động

 storage:
 tests:

nơi chứa các file lưu trữ của laravel như log, cache, ...

chứa test file (cũng chưa cần để ý đến nó).

 File

routes.php: nơi chứa các định tuyến (route) của laravel

 file

filters.php: nơi chứa các bộ lọc định tuyến.

5. bootstrap: thư mục chứa file cài đặt các biến cơ bản của laravel
(paths.php), nơi cài đặt môi trường làm việc (start.php) đồng thời cũng là nơi các
filekhác được include vào laravel (autoload.php).

6. public: chứa file index.php, .htaccess, assets (thường dùng để chứa các file
js, css, image của giao diện) . File khi khởi chạy ứng dụng, file .htaccess sẽ chuyển
hướng mọi yêu cầu (request) tới file index.php, index.php sẽ gọi đến các thành phần
tương ứng của laravel (model, view, controller, ...) để thực thi và trả về kết quả
(response).

14


7. vendor: chứa bộ mã nguồn của laravel và các thành phần đi kèm laravel,
cũng như các gói (packages) sau này sẽ thêm vào laravel
8. workbench: thư mục dành cho các lập trình viên tự tạo ra các gói
(package). Mặc định thư mục này sẽ không tồn tại
Hình ảnh bao quát:

1.2.4 Những điểm nổi bật
Một số ưu điểm nội bật
 Autoload
 Các

lệnh tương tác với cơ sở dữ liệu cực kỳ ngắn gọn và thân thiện.

 Việc
 Dễ

theo namespace.

quản lý layout thật sự giản đơn .

dàng tích hợp các thư viện của Zend và các gói bundle (giống như

moduel) vào project. Có rất nhiều gói bundle được cộng đồng mạng build sẳn và
chia sẵn trên Internet.
các ví dụ cơ bản:
+ Tìm tài khoản theo Id
$account = Account::find(1900); // tìm user có id là 1900.
+ Tìm tài khoản theo email và password khi login

15


$account=Account::where_email_password('
m','19001830')->first();
// tìm user theo trường email có giá trị là ,
theo trường password có giá trị là 19001830.

+ Tạo mới tài khoản
$account = Account::create(array(
'email' => '',
'password ' => '19001830',
)
);
+ Hoặc có thể tạo mới tài khoản bằng cách sau:
$account = new Account;
$account ->email = '';
$account ->password = '62888999';
$account ->save();
+ Chỉnh sửa tài khoản theo Id :
$account = Account::find(1);
$account ->email = '';
$account ->password = '38681999';
$account ->save();
+ Xóa tài khoản theo Id:
Account::find(1)->delete();
+ Phân trang trong laravel cực kỳ đơn giản :
$per_page = 10;
$accounts = Account::paginate($per_page);
//nếu muốn sắp xếp thì thêm order_by vào như thế này
$accounts = Account::order_by('id','desc')->paginate($per_page);
1.2.5 Làm việc trên laravel
a. Làm việc với View

16


Với Laravel, sử dụng Blade Template Engine. Rất nhẹ nhàng mà lại cực kỳ

hữu dụng. Ta chỉ cần có 1 trang master template (template sườn chung) sẽ được sử
dụng và kế thừa từ các file template con.
Ví dụ có 1 trang index từ đầu đến cuối, chỉ có phần body là thay đổi – động
theo yêu cầu – xử lý, các phần khác như header, footer, menu…sẽ giữ nguyên.
Để ý phần @yield(‘content’) . Khi sử dụng blade template thì các không phải
include gì cả, chỉ cần tạo thêm file ngắn gọn để hiển thị ở phần này, nó sẽ load động
theo request, còn các thành phần các sẽ được thừa kế lại. Rất tiện
b, Làm việc với Database – Model
Laravel hỗ trợ nhiều cách viết để ngắn gọn nhất có thể và nhiều cách viết
khác nhau như Fluent Query Builder và Eloquent . Cực kỳ ngắn gọn – dễ quản lý và
hữu dụng. Hỗ trợ sẵn các hàm để tìm dữ liệu – fetch dữ liệu – đếm dòng – CRUD…
Laravel hỗ trợ tương tác với Database như tạo database, tạo bảng, chỉnh sửa
bảng, insert dữ liệu…rất hay qua Schema Builder
1.3 Tìm hiểu framwork css bootstrap.
1.3.1 Giới thiệu về BOOTSTRAP.
Bootstrap là một CSS Framework phổ biến nhất hiện nay được phát triển bởi
Mark Otto .và Jacob Thornton tại Twitter. Hiểu theo từ framework thì nó là bộ công
cụ giúp design trang web bằng css nhanh hơn. Nghĩa là là nó được trừu tượng hóa
lên một mức cao hơn. Thay vì phải hiểu rõ về các bộ chọn, các thuộc tính và giá trị
trong CSS để style cho trang web của mình, thì chỉ cần biết các thành phần có trên
trang web như form, navbar, tooltip, dropdown-menu, modal, button,….. và add nó
vào trang html của mình một cách thích hợp. Công việc còn lại là của Bootstrap.
Bootstrap là một miễn phí bộ sưu tập các công cụ để tạo ra các trang web và
các ứng dụng web . Nó chứa HTML và CSS 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ư tùy
chọn JavaScript mở rộng. Trong tháng 6 năm 2014 nó đã được các dự án số 1 trên
GitHub với 69,000 + sao và 25,000 + fork, với một cơ sở người dùng bao gồm
MSNBC và NASA.

17

Bắt đầu với phiên bản 3.0, Bootstrap đã hỗ thiết kế giao diện điện thoại di
động nhấn mạnh thiết kế đáp ứng theo mặc định.
1.3.2 Cấu trúc của Bootstrap
Bootstrap được xây dựng theo cấu trúc sau:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
Nó gồm 3 phần css, javacript và fornt. Nền tảng của nó được xây dựng trên
css3, và chạy trên nền tảng Jquery.
1.3.3 Cài đặt Frame Work Bootstrap3.
Nếu sử dụng web trên môi trường internet thì có thể sử dụng đoạn mã
nguồn sau trong mã nguồn:
rel="stylesheet"href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstr
ap.min.css">
href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

18


Như vậy là đã hiểu qua về Boostrap, để bắt đầu các cần download nó
tại sau đó add nó vào project
1.3.4 Làm việc cơ bản với Framework Bootstrap3.
 Grid System
Grid system là khái niệm bắt nguồn từ kỹ thuật in ấn, thiết kế các poster, bìa
sách, tạp chí,…. Đó là một hệ thống các đường kẻ ngang, dọc chia không gian trang
thành nhiều ô để đặt bố cục cho các phần của trang.
Được ứng dụng sang lĩnh vực thiết kế web, hệ thống grid chia layout web của ta
thành các hàng (row) và các cột (column). Cụ thể trong Bootstrap, layout sẽ được chia
thành 12 cột, mỗi cột sẽ chiếm tỷ lệ % nhất định và bằng nhau trên layout.
Từ đây, đơn vị cơ sở để tính độ rộng cho các element mà ta bố trí trên layout sẽ là
cột. Tức là sẽ chỉ định độ rộng của phần tử đó là 1, 2, 3 hay 6 cột chứ không phải là bao
nhiêu pixel. Dù trang web bị co dãn thì tỷ lệ giữa các element này vẫn không thay đổi,
điều này lý giải cho khả năng Responsive của Bootstrap.
Ví dụ minh họa:

Hình 1.4 Grid System
Hàng còn lại gồm 2 thành phần, mỗi thành phần được bao trong 6 cột, là .col-md-6.
Nhìn như vậy chắc cũng đã hiểu rõ cách hoạt động của nó, để chia làm 4 cột ta
dùng đặt tên class là .col-md-4. Tương tự với 1 cột, 2 cột sẽ là .col-md-1, col-md-2,…..
md (medium devices) chính là kích thước đại diện cho thiết bị desktop, ngoài ra còn có
các loại kích thước khác mà bootstrap định nghĩa như sau:

19

Ký hiệu
lớp
.col-xs-$

Thiết bị

Extra small

Độ rộng lớp

Chú thích

container
Auto

Dùng cho điện thoại kích
thước nhỏ hơn 768px

.col-sm-$

Small devices

750px

Dùng cho tablets kích thước
>= 768px

.col-md-$

Medium

970px

devices
.col-lg-$

Large devices

Dùng

cho

desktop

(

>=992px)
1170px

Dùng

cho

desktops

>=1200px
Ký tự $ trong bảng trên đại diện cho số cột chứa phần tử đó, là một số từ 1
đến 12.

Offset
Bootstrap cung cấp cho người dùng hệ thống icon fonts khá đầy đủ (khoảng
hơn 200 icon). Để sử dụng dùng thẻ span và add 2 lớp .glyphicon , .glyphicon-$.
Trong đó $ là tên icon.
 Button Groups
Nếu muốn nhóm các button trong Bootstrap thì làm thế nào? Đơn giản sử
dụng thêm lớp.btn-group bên ngoài để bao các button. Muốn chỉnh kích thước các
Button trong nhóm thì add thêm class .btn-group-$ (với $ là sm, xs hoặc lg).
 Dropdowns Menu
Để tạo Dropdown Menu cho một button khi click sử dụng như ví dụ sau:
<div class="btn-group">id="”toggle”" type="button" data-toggle="dropdown">
Dropdown button </button>
<ul class="dropdown-menu" role="menu">

20


<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li class="divider"></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
Thẻ span với class .caret là icon xổ xuống. Có thể thay class .btn-group bao ở
trên bằng class .dropdown của Bootstrap hoặc một class bất kỳ mà ta đặt, miễn là nó
phải được set position: relative. Sử dụng class=”divider” để ngăn các item bên trên
và dưới nó.
 Dropdown.js
 Navigation

Để sử dụng thanh điều hướng các ta add class .nav kết hợp với class .navpills , .nav-tabs hoặc .nav-jusstified. Ví dụ:
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Forum</a></li>
</ul>
Tất nhiên là trong mỗi thẻ li ta có thể add thêm một class .dropdown-menu.
Cách làm vẫn như cũ.
 Tab.js
Tab.js cung cấp công cụ khi ta muốn show nội dung riêng cho các tab trong
nav khi click (hoặc cả dropdown).
 Navbar
Navbar là thành phần phổ biến trên các trang web. Để sử dụng navbar trong
Bootstrap add class.navbar trong thẻ nav. Ví dụ một navbar đơn giản:
 Panel

21


Panel giống như một Layout Web thu nhỏ, ta có cả header, body và footer
trong đó. Với Bootstrap, để tạo panel ta cũng có ba class .panel-heading, panelbody, panel-footertương ứng với 3 thành phần đó
 Thumbnails
Với hệ thống lưới của Bootstrap, ta có thể hiển thị các hình ảnh kèm thông
tin rút gọn hay video cho các list nội dung của ta rất dễ dàng. ví dụ một thumbnails
đơn giản:
 Modal (modal.js)
Để tạo một modal trong Bootstrap khá đơn giản, ta chỉ cần tạo một button để
kích hoạt modal và tạo một modal với class .modal để show ra.ví dụ:
 Tooltip (tooltip.js)

22


CHƯƠNG 2. TÌM HIỂU HỆ THỐNG KINH DOANH TRỰC TUYẾN VÀ
PHÂN TÍCH THIẾT KẾ XÂY DỰNG WEBSITE
Trong chương này chúng ta sẽ phân tích các yêu cầu của đề tài như việc tóm
tắt hoạt động của hệ thống mà dự án sẽ được ứng dụng, phạm vi ứng dụng của đề
tài và đối tượng sử dụng, mục đích của dự án. Xác định yêu cầu của khách hàng:
Xuất phát từ hệ thống hiện hành của cửa hàng cùng với yêu cầu của khách hàng để
vạch ra được yêu cầu hệ thống cần xây dựng như việc thiết kế giao diện, yêu cầu về
chức năng. Trong chương này chúng ta đi xây dựng một số biểu đồ Use Case, biểu
đồ hoạt động của các chức năng trong hệ thống và thông tin cơ sở dữ liệu của
chương trình.
2.1.Khảo sát
2.1.1.Giới thiệu về siêu thị điện máy Thái Nguyên
Siêu thị điện máy Thái Nuyên được thành lập năm 2010 kinh doanh nhiều
loại mặt hàng thiết bị điện tử ... của cả trong nước lẫn ngoài nước.
Địa chỉ : 12 , P. Quang Trung, Tp. Thái Nguyên.
Hình thức kinh doanh của siêu thị vẫn là hình thức kinh doanh truyền thống,
khách hàng tới xem hàng, lựa chọn hàng và thanh toán trực tiếp tại quầy.
Các thông tin và hình ảnh của siêu thị, cũng như những sản phẩm cung cấp
chủ yếu được biết đến thông qua số lượng khách viếng thăm trực tiếp, các khách
hàng thân tín, vì thế mà siêu thị đã bỏ qua mất một số lượng khách hàng đáng kể, đó
là những khách hàng ở xa, không thể tiếp cận được sản phẩm của cửa hàng, mà
chính những khách hàng đó có thể mang lại cho siêu thị một khoản lợi nhuận không
nhỏ. Vì vậy việc tiến hành xây dựng website là một vấn đề cấp thiết, để siêu thị có
cơ hội giới thiệu vào thị trường các mặt hàng mà siêu thị kinh doanh một cách dễ
dàng.
2.1.2.Khảo sát thực trạng siêu thị điện máy Thái Nguyên
Hiện tại siêu thị vẫn sử dụng phương pháp bán hàng truyền thống, mọi việc

kinh doanh đều được tiến hành ngay tại của hàng.
 Công tác quảng cảo

23


Chủ yếu của hàng sử dụng phát tờ rơi,dựa vào sự tin tưởng và giới thiệu của
các khách hàng thân thiết, hoặc sử dụng những biển quảng cáo lớn, biển chỉ dẫn lớn
để thu hút sự chú ý của mọi người.
 Công tác bán hàng
Khi khách hàng muốn mua hàng thì nhất thiết phải dành thời gian tới tận siêu
thị để chọn đồ.
Khi khách hàng thích sản phẩm nào, thì họ mang hàng ra quầy tiến hành
thanh toán và nhận hàng của mình
Quá trình mua bán được thực hiện ngay tại siêu thị .
 Công tác quản lý hàng hóa
Các thông tin về hàng hóa, cũng như số lượng bán ra hay tồn kho chủ yếu
được quản lý thông qua thống kê bằng sổ sách như vậy sẽ rất mất thời gian và tốn
thêm chi phí nhân công và dễ xảy ra sai sót.
2.1.3. Giải pháp xây dựng website
Từ những kết quả của việc khảo sát hiện trạng công tác bán hàng tại siêu thị
em thấy, việc quảng cáo của cửa hàng như vậy rất tốn kém và mang lại hiệu quả
chưa cao, đồng thời việc khách hàng phải tới tận của hàng để chọn sản phẩm sẽ rất
mất thời gian, hơn nữa khách hàng khó có thể nắm bắt được thông tin chính xác về
sản phẩm mà mình lựa chọn, như tác giả, nhà xuất bản… Các khách hàng ở nơi xa
không thể tiếp cận được những sản phẩm mà cửa hàng cung cấp, như vậy của hàng
đã bỏ qua một lượng khách hàng không nhỏ, và chính họ có thể giúp của hàng có
thêm khoản doanh thu và lợi nhuận lớn hơn rất nhiều.
Trước tình hình như vậy, việc xây dựng website đã giải quyết hết yêu cầu bởi
sự hoạt động trên mạng internet mang lại hiệu quả cao, ít tốn kém mà lại mà lại có

thể quảng bá được sản phẩm một cách rộng rãi nhất.
Sử dụng website, siêu thị có thể quảng cáo những sản phẩm mới nhất của
mình mà không phải mất nhiều thời gian phát tờ rơi hay giới thiệu sản phẩm trực
tiếp tới khách hàng, mà những khách hàng ở khắp mọi nơi đều có thể tiếp cận với
mọi thông tin về sản phẩm một cách chi tiết cụ thể nhất. Thông qua website của cửa
hàng và khách hàng chỉ cần đặt hàng với một cái click chuột nhanh gọn và đơn

24


giản, nhập đầy đủ thông tin cần thiết, cửa hàng sẽ giao sản phẩm khách hàng mong
muốn tới tận tay khách hàng .
Hiện nay việc xây dựng Website bằng Ngôn ngữ PHP và MySQLđã trở nên
rất phổ biến.Những ưu điểm của PHP thể hiện ở:
Khi sử dụng PHP,người dùng sẽ có được tốc độ nhanh hươn nhiều so với các
ngôn ngữ kịch bản khác,bởi PHP là phần mềm mã nguồn mở,được hỗ trợ nhiều lập
trình viên giỏi,có số lượng người dùng đông đảo. Ngoài ra PHP chạy được trên
nhiều hệ điều hành khác nhau
 Rút ngắn thời gian phát triển
PHP cho phép tách phần HTML code và phần script,do đó có thể độc lập
giữa công việc phát triển mã và thiết kế. Điều này vừa giúp lập trình viên dễ dàng
hơn vừa có thể làm cho chương trình mềm dẻo hơn trong việc thay đổi giao diện
 PHP là phần mềm mã nguồn mở
PHP không chỉ là phần mềm mã nguồn mở mà còn thực sự miễn phí (kể cả
khi sử dụng cho mục đích thương mại). Do là phần mềm mã nguồn mở,các lỗi (bug)
của PHP được công khai và nhanh chóng được sửa chữa bởi nhiều chuyên gia
 Tốc độ
Nhờ vào sức mạnh của Zend Engine,khi so sánh PHP với ASP,có thể thấy
PHP vượt hơn ở một số test,vượt trội ở tốc độ biên dịch
 Tính khả chuyển

PHP được thiết kế để chạy trên nhiều nền tảng khác nhau,có thể làm việc với
nhiều phần mềm máy chủ,cơ sở dữ liệu (ví dụ: có thể phát triển dự án trên UNIX
,sau đó chuyển sang NT mà không gặp bất cứ vấn đề gì)
2.1.4.Yêu cầu hệ thống
 Đề tài trình bày đúng quy cách, rõ ràng, dễ hiểu, ngắn gọn.
 Website có dung lượng vừa đủ, tốc độ sử lý nhanh.
 Chương trình chạy trên môi trường Windows.
 Font chữ hiển thị nhất quán, sử dụng bộ chữ ABC.
 Giúp khách hàng tìm hiểu thông tin một cách nhanh nhất.
 Cập nhật thông tin về sản phẩm mới trên thị trường.

25