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

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ù

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

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

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

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

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

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

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

đâ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

+ Đá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

+ 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

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

 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/

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ó:

 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: nơi chứa các file lưu trữ của laravel như log, cache,

 tests: 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)

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 theo namespace

 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 quản lý layout thật sự giản đơn

 Dễ 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

$account=Account::where_email_password('matbao.technicaldept@gmail.com','19001830')->first();

// tìm user theo trường email có giá trị là matbao.technicaldept@gmail.com, theo trường password có giá trị là 19001830

+ Tạo mới tài khoản

+ Hoặc có thể tạo mới tài khoản bằng cách sau:

$account = new Account;

$account ->email = 'mediasupport@matbao.com';

1.2.5 Làm việc trên laravel

a Làm việc với View

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

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:

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:

<link

rel="stylesheet"href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<link rel="stylesheet"

href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<script

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

Như vậy là đã hiểu qua về Boostrap, để bắt đầu các cần download nó

tại http://getbootstrap.com/getting-started/#download 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:

 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"><button class="btn btn-default dropdown-toggle" id="”toggle”" type="button" data-toggle="dropdown">

Dropdown button </button>

<ul class="dropdown-menu" role="menu">

<li><a href="#">Item 1</a></li>

<li><a href="#">Item 2</a></li>

.nav-<ul class="nav nav-tabs">

<li class="active"><a href="#">Home</a></li>

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, panel-body, 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)

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

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

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

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

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

 Đáp ứng được nhu cầu của khách hàng khi truy cập trang web

 Đảm bảo dữ liệu khi chạy web trực tuyến

 Khách hàng chỉ có thể viếng thăm trang Web chứ không có quyền sửa đổi Website

 Nhân viên cửa hàng được phép cập nhật thông tin

 Chủ cửa hàng toàn quyền với Website

2.1.5.Mục tiêu của đề tài nghiên cứu

Đây là website nhằm bán và giới thiệu rộng rãi các mặt hàng của siêu thị đến người tiêu dùng với các chi tiết mặt hàng cũng như giá cả một cách chính xác nhất

 Giúp cho khách hàng:

Khách hàng là những người có nhu cầu mua sắm hàng hóa Họ sẽ tìm kiếm các mặt hàng cần thiết từ hệ thống và đặt mua các mặt hàng này Vậy nên trang web phải giúp cho khách hàng:

+ Tìm kiếm và lựa chọn từ xa sản phẩm mình cần: Khách hàng khi truy cập

vào trang web thương mại thường tìm kiếm các mặt hàng hay các sản phẩm muốn mua Nhưng đôi khi cũng có nhiều khách hàng vào website mà không định mua hay không biết mua gì thì yêu cầu đặt ra cho hệ thống là làm thế nào để khách hàng dễ

bị bắt mắt và hấp dẫn với sản phẩm đó, đồng thời có thể tìm kiếm nhanh và hiệu quả các sản phẩm mà họ cần tìm

+ Đặt mua hàng: Sau khi khách hàng lựa chọn xong những mặt hàng cần đặt

mua thì đơn đặt hàng sẽ được chuyển đến với ban quản trị, tránh những đòi hỏi hay những thông tin yêu cầu quá nhiều từ phía khách hàng, tạo cảm giác thoải mái, riêng tư cho khách hàng

 Giúp nhà quản lý:

Là người có quyền đăng nhập hệ thống, quản lý và làm chủ mọi hoạt động của hệ thống trang web Nhà quản lý có một username và một password để truy cập vào hệ thống nhằm thực hiện các chức năng sau:

+ Quản lý hàng hóa một cách dễ dàng

+ Thêm, xóa, sửa thông tin hàng hóa vào cơ sở dữ liệu

+ Kiểm tra và xử lý đơn đặt hàng

Bên cạnh các chức năng nêu trên thì trang web phải trông thật đẹp mắt và dễ truy cập Giao diện đẹp là yếu tố quan trọng góp phần tăng lượng khách hàng, và trang web phải làm sao cho khách hàng thấy được những thông tin cần tìm, cung cấp những thông tin quảng cáo thật hấp dẫn, nhằm thu hút sự quan tâm của khách hàng

2.2 Phân tích thiết kế hệ thống bằng UML

2.2.1 Biểu đồ USE CASE, biểu đồ trình tự và biểu đồ cộng tác

Nhận diện tác nhân và use-case

Qua quá trình khảo sát bài toán, ta xác định được các tác nhân sau:

Tác nhân thứ nhất là khách hàng, tác nhân này tham gia vào hệ thống chủ yếu là tìm kiếm, xem thông tin về hàng hóa và thực hiện chức năng mua hàng và thanh toán nếu có nhu cầu Ngoài ra hệ thống còn cung cấp cho tác nhân những chức năng cần thiết khác như đăng ký thành viên, đăng nhập hệ thống, gửi ý kiến khách hàng, mua hàng và thanh toán v.v

Tác nhân thứ hai là nhà quản trị hệ thống (hệ thống quản trị được phân thành các nhóm chức năng khác nhau như: Quản lý người sử dụng, quản lý đơn hàng, quản lý cập nhật thông tin hàng hóa v.v.) tác nhân này tham gia hệ thống với công việc chủ yếu là soạn thảo, nhập và chỉnh sửa thông tin dữ liệu trong hệ thống,

xử lý các đơn hàng của khách, tiếp nhận những báo cáo được kết xuất từ hệ thống

 Tác nhân thứ ba là ngân hàng tiếp nhận thông tin từ nhà quản trị hệ thống để ra quyết định là chuyển khoản hay không từ tài khoản của khách hàng tới doanh nghiệp

Danh sách các tác nhân và UseCase:

Tác nhân UseCase

Member(Khách hàng)

Đăng ký Đăng nhập Tìm kiếm sản phẩm Xem chi tiết sản phẩm Thêm sản phẩm vào giỏ hàng Xóa sản phẩm khỏi giỏ hàng Xem giỏ hàng

Làm đơn hàng Thanh toán Gửi ý kiến

Administrator(Người quản trị)

Đăng nhập Quản lý khách hàng Quản lý loại sản phẩm Quản lý sản phẩm Quản lý đơn hàng Quản lý tin tức Quản lý ý kiến khách hàng

Tìm kiếm Xem thông tin

 Biểu đồ Usecase tổng quát

Dựa trên các yêu cầu của hệ thống, biểu đồ usecase tổng quát của hệ thống

có thể xây dựng mở rộng với các chức năng biểu diễn như trong hình dưới đây:

Hình 2.1.Biểu đồ Usecase tổng quát

Use-case này bắt đầu khi người dùng chọn chức năng đăng ký

Hệ thống hiển thị trang đăng ký

Người dùng nhập các thông tin tài khoản bao gồm: email, mật khẩu (không phải mật khẩu thực sự của email) và nhập thông tin cá nhân bao gồm: họ tên, địa chỉ, tỉnh/thành, điện thoại

Hệ thống hiển thị thông báo đăng ký thành công

 Luồng sự kiện phụ:

Đăng ký bị lỗi do trùng thông tin tài khoản hay nhập thông tin cá nhân thiếu

Hệ thống hiển thị thông báo lỗi Người dùng có thể trở về đầu của dòng sự kiện chính hay hủy bỏ việc đăng ký, lúc này use-case kết thúc

Hình 2.2: Biểu đồ trình tự cho tác vụ đăng ký thành viên

Hình 2.3: Biểu đồ cộng tác cho tác vụ đăng ký thành viên

 Use-case Đăng nhập:

Use-case này mô tả cách thức khách hàng là thành viên đăng nhập vào website

 Luồng sự kiện chính:

Từ trang web, người dùng nhập email và mật khẩu và nhấn nút đăng nhập

Hệ thống sẽ hiển thị ra trang khách hàng đã đăng nhập thành công vào hệ thống

 Luồng sự kiện phụ: Nếu người dùng nhập sai email hoặc mật khẩu, hệ thống sẽ hiển thị một thông báo lỗi Người dùng có thể chọn trở về đầu của dòng sự kiện chính hay hủy bỏ việc đăng nhập, lúc này use-case kết thúc

Hình 2.4: Biểu đồ trình tự cho tác vụ đăng nhập

Hình 2.5: Biểu đồ cộng tác cho tác vụ đăng nhập

Hệ thống hiển thị trang thông tin các sản phẩm tương ứng với tên sản phẩm người dùng đã nhập

 Luồng sự kiện phụ: không có

Hình 2.6: Biểu đồ trình tự cho tác vụ tìm kiếm sản phẩm

Hình 2.7: Biểu đồ cộng tác cho tác vụ tìm kiếm sản phẩm