Đồ án tốt nghiệp(có cả soure CODE) Ứng dụng mô hình MVC và công nghệ bootstrap để xây dựng website bán hàng trực tuyến

Gồm có đồ án tốt nghiệp (file word) + bộ soure code + File cơ sở dữ liệu (database) + 1 file hướng dẫn cài đặtĐồ án xây dưng website bán hàng.. ứng dụng Bootstrap và mô hình MVCĐồ án chất lượng đã bảo vệ và rất cao

Tên: “XÂY DỰNG WEBSITE BÁN HÀNG”

Giao diện trang chủ

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ínhphủ, 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ượtchinh phục hết đỉnh cao này đến đỉnh cao khác Mạng Internet là một trongnhữ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à thanhtoá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ựctuyế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ốiinternet 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 nhucầ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ầumua sắm của thời đại, hàng loạt website cho các mục đích thương mại đã ra đờinhư Amazon.com, Sendo.com.vn, Lazada.com, … Để đáp ứng với việc mua bántrứ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ằngFramework Bootstrap

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ỗiquố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útngắ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ọctậ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âydự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ựatrê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ácthà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ụcnhữ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 pluginJavascript 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.

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ụngbootstrap 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à xuhướ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ốngkhô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 GridSystem 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ỏisản phẩm nhẹ thì việc sử dụng bootstrap sẽ là cả một gánh nặng choweb

 Chưa hoàn thiện: Bootstrap chưa đầy đủ các thư viện cần thiết Cácphá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ủamộ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ếtkhi 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àothemes sẵn có, gọi ra cái class từ stylesheet và thế là bạn đã có mộttrang web responsive trông cũng ổn ổn Sự tiện dụng và dễ dàng củaBootstrap nhiều khi sẽ khuyễn khích tính lười sáng tạo, vốn luônthường trực trong mỗi chúng ta Kết quả là, chúng ta thướng thoả hiệpnhữ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

 Bước 1: Tải về Bootstrap tại đây:

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ônngữ 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ảntrị cơ sở dữ liệu nên PHP thường đi kèm với Apache, MySQL và hệ điều hànhLinux (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ạicho 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

 Linux: Hệ điều hành mã nguồn mở được sử dụng rất rộng rãi cho cácwebserver 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êndướ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 https://www.apachefriends.org/download.html

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

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

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 :

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 íchrất mạnh Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứngdụng có truy cập CSDL trên internet

MySQL miễn phí hoàn toàn cho nên bạn có thể tải về MySQL từ trang chủ

Nó có nhiều phiên bản cho các hệ điều hành khác nhau: phiên bản Win32 chocá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ệuquan hệ sử dụng Ngôn ngữ truy vấn có cấu trúc (SQL).

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ệtphầ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àmviệ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ớiModel để lấy dữ liệu được yêu cầu, sau cùng Controller trả dữ liệu này về choView 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ầnView ( 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

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:

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

 Giao diện hiển thị trang chủ

 Giao diện hiển thị chi tiết danh mục

 Giao diện hiển thị chi tiết sản phẩm

 Chức năng giỏ hàng (thêm, cập nhật, xóa)

 Giao diện chi tiết giỏ hàng

 Giao diện chi tiết đặt hàng

 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ụcsản phẩm.

 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Ệ THỐNG WEBSITE BÁN HÀNG

Quản lý danh mục Quản lý đơn hàng Tìm kiếm Quản trị hệ thố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

0

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

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

1.0

QUẢN TRỊ HỆ THỐNG

2.0 QUẢN LÝ DANH MỤC

3.0 QUẢN LÝ ĐƠN HÀNG

4.0 TÌM KIẾM

1 4

5 8

9 12

13 16

2 3

6 7

10 11

14 15 QUẢN TRỊ VIÊN

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

8

2 3

6 7

1.3

ĐỔI THÔNG TINTÀI KHOẢN12

9

10

11 D1

THÔNG TIN TÀI KHOẢN

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

2 3

D8 DANH MỤC SẢN PHẨM

2.2

SẢN PHẨM8

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ụ

1 Quản trị viên yêu cầu xử lý đơ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ụ

D10 TÌM KIẾM

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)

7 status tinyint 4 Trạng thái

Categories (DANH MỤC)

hàng

Order_detail (CHI TIẾT ĐƠ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ựchiện các tác vụ như truy vấn, thêm, xoá, cập nhật dữ liệu Khi dữ liệu trongModel 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

 Lưu dữ liệu vào cơ sở dữ liệu.

function save($table, $data = array()) {

$sql = "UPDATE `$table` SET "

implode(',', $values) " WHERE id=$id";

 Xóa bản ghi có khóa chính là $id

function delete($table, $id) {

$id = intval($id);

$sql = "DELETE FROM `$table` WHERE id=$id"; mysql_query($sql) or die(mysql_error());

}

 Trả về bản ghi có khóa chính là $id

function get_a_record($table, $id, $select = '*'){

 Trả về tất cả bản ghi thỏa mãn điều kiện trong $option

function get_all($table, $options = array()) { //xử lý $options

$select = isset($options['select']) ?

$options['select'] : '*';

$where = isset($options['where']) ? 'WHERE ' $options['where'] : '';

$order_by = isset($options['order_by']) ? 'ORDER BY ' $options['order_by'] : '';

$limit = isset($options['offset']) &&

isset($options['limit']) ? 'LIMIT '

$options['offset'] ',' $options['limit'] : '';

function get_total($table, $options = array()) { //xử lý $options

$where = isset($options['where']) ? 'WHERE ' $options['where'] : '';

$products = get_all('products', $options);

foreach ($products as $product) {