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