●Laravel View
Hình 3. 2 - Liên kết Route, Controller và View trong Laravel View là các tệp tin có đi .php, chứa mã nguồn html, hiển thị dữ liệu cho người dùng xem và được lưu tại resources/views.
Giả sử truyền lên trình duyệt một đường dẫn, trình duyệt sẽ gửi lên router, Route chuyển sang Controller, sau khi Controller xử lý xong, sẽ gọi tệp tin index.php, đây chính là view. Tập tin này chứa các mã nguồn html, css, hoặc các dữ liệu mà nhà phát triển ứng dụng muốn hiển thị lên màn hình rồi trả về trình duyệt hiển thị cho người dùng xem.
Cài đặt Route Cont rolle r myView.ph p Route::get('myView', 'MyController@myView ');
Public function myView() { Return view(‘myView’); } <h1>Đâ y là view </h1>
●Truyền tham số sang view
Cài đặt Route Controller myView.php
Route::get('myView/{ts}', 'MyController@myView'); Public function myView($ts) { Return view(‘myView’, [‘thamso’=>&ts]); } <h1>Đây là <?php echo $thamso; ?></h1>
●Master template
Hình 3. 3 - Hoạt động của Master Template trong Laravel Luồng xử lý dữ liệu tương tự như ở View ở trên. Trong View có tệp master.blade.php, tệp này chứa giao diện chung của hệ thống, @section định nghĩa phần nội dung còn @yield sử dụng để hiển thị nội dung mà section đem lại. Các view sẽ kế thừa blade template này bằng cách sử dụng lệnh @extends.
Muốn sử dụng Blade Template thì tên tệp phải có chứa .blade đằng trước .php
3.1.5 Sử dụng các thư viện dành cho thiết kế giao diện website với Laravel
3.1.5.1 Sử dụng Bootstrap CSS Framework
Bootstrap là 1 framework HTML, CSS, và JavaScript cho phép người dùng dễ dàng thiết kế website theo một chuẩn nhất định, bao gồm typography (kiểu dáng văn bản), forms (biểu mẫu), buttons (nút bấm),
tables (bảng biểu), navigation (menu), modals (các phương thức), image carousels (trình chiếu ảnh) và nhiều thứ khác. Trong bootstrap có thêm các trình cắm (plugin) Javascript trong nó, giúp tạo các website thân thiện (web responsive) với các thiết bị cầm tay như mobile, ipad, tablet,... dễ dàng hơn và nhanh chóng hơn.
Trong các phiên bản Laravel 5.x, bootstrap đã được thiết lập sẵn cấu hình, chỉ cần tải về các gói (package) là sử dụng được.
Mỗi trang web, khi muốn sử dụng có 2 cách là tải Bootstrap từ getbootstrap.com hoặc thêm từ CDN. Ví dụ trường hợp sử dụng CDN:
3.1.5.2 Sử dụng Jquery Javascript Framework
Jquery là một thư viện javascript, nó giúp viết javascript nhanh hơn với cú pháp đơn giản hơn. Thay vì phải viết những dịng lệnh dài và lặp lại nhiều lần trong javascript thì jquery đã đóng gói chúng thành những phương thức sẵn có để dễ dàng sử dụng.
Để sử dụng cũng có 2 cách để nhúng thư viện vào trang web như sau: - Tải thư viện tại https://jquery.com/download/ sử dụng nó như sau: Ví dụ ở đây đang sử dụng phiên bản jquery 2.0.2. Khi tải về tìm đến tệp jquery-2.0.2.min.js rồi nhúng đường dẫn của file đó vào website là có thể dùng được
- Sử dụng cdn tại https://code.jquery.com/ chọn phiên bản cần dùng và copy đoạn nhúng script mà trang web cung cấp. Ví dụ:
3.1.5.3 Sử dụng kỹ thuật Jquery Ajax
AJAX - "Asynchronous JavaScript and XML" - là một bộ công cụ
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/boots trap.min.css" integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/ K68vbdEjh4 u" crossorigin="anonymous">
<script src="'jquery-2.0.2.min.js'"></script> <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256- DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35Eouy E=" crossorigin="anonymous"></script>
cho phép tải dữ liệu từ máy chủ mà khơng u cầu tải lại trang. Nó sử dụng chức năng sẵn có XMLHttpRequest(XHR) của trình duyệt để thực hiện một yêu cầu đến máy chủ và xử lý dữ liệu trả về.
jQuery cung cấp method $.ajax và một số phương thức tiện lợi giúp làm việc với XHRs thơng qua trình duyệt một cách dễ dàng hơn.
❖ Hàm Jquery ajax tổng quát :
- Jquery.ajax( options ): Tải một trang từ xa sử dụng một
HTTP request. Các thơng số chính trong options như sau: + url: Một chuỗi chứa URL để yêu cầu được gửi tới
+ data: tham số tùy ý này biểu diễn các cặp khoá/giá trị (key/value) mà sẽ được gửi tới máy chủ.
+ type: Là phương thức cần gửi đi (get,post,put … )
+ dataType: tham số tùy ý này biểu diễn kiểu dữ liệu để được trả về tới hàm callback: "xml", "html", "script", "json", "jsonp", hoặc "text".
+ callback: tham số tùy ý này biểu diễn một hàm để được thực thi bất cứ khi nào dữ liệu được tải thành cơng.
Ví dụ: 3.2 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG $.ajax({ url: 'Demo.php', type: ‘post’, dataType: 'json', data : {‘value’:var} }) .done(successFunction) .fail(errorFunction) .always(alwaysFunction);
3.2.1 Phân tích các chức năng của chương trình.3.2.1.1 Thiết kế kiến trúc hệ thống 3.2.1.1 Thiết kế kiến trúc hệ thống
Hình 3.4: Sơ đồ thiết kế kiến trúc
3.2.1.2 Mô tả sự phân rã.
Hệ thống được chia làm hai phần: Một phần dành cho khách mua hàng, một phần dành
Hình 3.5 :Sơ đồ use – case Quản trị viên
Hình 3.5 mơ tả các trường hợp sử dụng của quản trị viên hệ thống (Administrator). Quản trị viên hệ thống có các quyền cơ bản của một người dùng bình thường, ngồi ra, quản trị viên hệ thống cịn có các quyền cao hơn khi đăng nhập vào phần quản trị của hệ thống. Sau khi đăng nhập thành công, quản trị viên hệ thống sẽ có đầy đủ các chức năng, thao tác toàn quyền với hệ thống của ứng dụng. Bao gồm chỉnh sửa thông tin tài khoản người dùng, tất cả các chức năng của quản trị viên quản lý thông tin khách hàng, quản lý danh mục sản phẩm, quản lý nội dung sản phẩm, video. quản lý bài viết của sản phẩm, quản lý các thẻ (Tags) của các bài sản phẩm.v.v. Và cuối cùng là đăng xuất khỏi hệ thống khi xong việc.
Hình 3.6 :Sơ đồ use – case Khách hàng
Hình 3.6 mơ tả các trường hợp sử dụng của khách hàng khi truy cập vào website (Customer). Khách hàng vào website phải đăng ký tài khoản người dùng rồi mới đăng nhập. Sau khi đăng nhập xong khách hàng có thể thoải mái mua sắm, chọn lọc các sản phẩm thơng qua ơ tìm kiếm sản phẩm, xem thơng tin sản phẩm, bình luận sản phẩm, thêm vào giỏ hàng. Ngồi ra người dùng có thể trải nghiệm xem Video của sản phẩm đó. Thêm số lượng sản phẩm muốn mua hay xóa sản phẩm trong giỏ hàng. Hơn nữa nếu là khách hàng đã từng mua hàng nhiều sẽ được tặng mã giảm giá theo phần trăm hoặc giảm giá theo tiền để nhập vào ô nhập mã khuyến mãi giảm giá khi khách hàng mua hàng và sẽ được thông tin chi tiết đơn hàng về địa chỉ website. Và sản phẩm khách hàng đặt mua sẽ được gửi về địa chỉ khi khách hàng điền thông tin đặt mua hàng.
3.2.2 Thiết kế cơ sở dữ liệu
Khi xây dựng một ứng dụng, việc thiết kế cơ sở dữ liệu đúng chuẩn và đáp ứng được truy cập là rất quan trọng. Một cơ sở dữ liệu tốt là cơ sở dữ liệu đủ tiêu chuẩn đáp ứng được tối thiểu chuẩn 3NF. Trong ứng dụng này, cơ sở dữ liệu sử dụng sẽ là MySQL. Các bác trong cơ sở dữ liệu sẽ bao gồm bảng người dùng (user), bảng sản
phẩm (product), bảng danh mục (category), bảng thẻ (tags), bảng chứa các thông tin về dữ liệu tải lên (files), và các bảng dùng để làm trung gian kết nối sẽ được tạo sau.
Đầu tiên là dữ liệu dành cho tài khoản (users). Thông tin cần lưu lại của một tài khoản sẽ bao gồm số định danh (ID) của tài khoản, tên tài khoản, địa chỉ email, mật khẩu, một số các thông tin thêm về người sử dụng tài khoản như ảnh đại diện, ngày sinh, … và các thông tin xác thực như token (dạng như chữ ký điện tử được mã hoá), thời gian tạo tài khoản. Dữ liệu này chỉ được sử dụng đối với các quản trị viên, nên có thể đặt tên bảng này là users hoặc admin.
Tiếp theo là dữ liệu dành cho sản phẩm (product). Đây là dữ liệu quan trọng nhất của một website bán hàng online. Cũng giống như với tài khoản, thông tin cần lưu lại trước tiên sẽ là số hiệu định danh (ID) của sản phẩm dùng làm khóa chính, theo sau đó là các thơng tin của sản phẩm, như tiêu đề sản phẩm (title), nội dung sản phẩm (content), mô tả sản phẩm (description), đường dẫn liên kết (slug), số lượng lượt xem (view). Ngoài ra, để thuận tiện hơn trong việc quản lý và điều chỉnh sản phẩm, một sản phẩm cần có thêm các mục như ảnh sản phẩm (image product), sản phẩm đó có là bài nổi bật hay khơng (hot), sản phẩm còn hàng để hiển thị trên trang web hay không (status), video sản phẩm (video product), giá sản phẩm (cost product) thông tin này sẽ được kết nối với bảng người dùng
(user), danh mục sản phẩm (category product), thông tin này cũng sẽ được kết nối với bảng danh mục.
Dữ liệu dành cho danh mục sản phẩm (categories). Trước hết, trường ID sẽ là sự ưu tiên để làm khóa chính và để làm cầu kết nối giữa hai bảng danh mục sản phẩm (category product) và bảng sản phẩm (product) và bảng chi tiết sản phẩm (detail product), sau đó sẽ là các thông tin về danh mục, bao gồm tên danh mục (name), đường dẫn liên kết của danh mục (slug), danh mục cha (parent id). Bảng danh mục sản phẩm và thương hiệu sản phẩm sẽ được sử dụng để hiển thị menu ở phần đầu của trang web.
Tiếp theo là các bảng dùng để quản lý thẻ (tags) và dữ liệu tải lên các sản phẩm (product). Đối với thẻ, thông tin cần lưu lại trong cơ sở dữ liệu sẽ là ID, tên thẻ (name), đường dẫn liên kết của thẻ (slug), và thời gian tạo. Đối với dữ liệu tải lên, thông tin cần lưu lại sẽ là ID, tên (name), đường dẫn liên kết đến tệp tin đó (link), số lượng sản phẩm đó (product id), dùng để xác định xem sản phẩm đó thuộc danh mục hay thương hiệu nào.
Về cơ bản, cơ sở dữ liệu của ứng dụng đã được hình thành, tiếp theo là kiểm tra lần nữa xem nó đã đủ chuẩn 3NF hay chưa.
●Dạng chuẩn thứ nhất 1NF: khơng có phần tử/nhóm các phần tử lặp, tức là khơng thể phân chia một thuộc tính bất kỳ thành các phần nhỏ hơn. Trong khi thiết kế cơ sở dữ liệu, các thuộc tính đã được chia ra thành các phần nhỏ và đưa vào các bảng khác nhau sau đó kết nối với nhau, vậy cơ sở dữ liệu trên đã đáp ứng được chuẩn thứ nhất 1NF. ●Dạng chuẩn thứ hai 2NF: Khơng có phụ thuộc hàm khơng đầy đủ vào
khóa chính, tức là khơng có một trường nào đó khơng thực sự liên quan đến khóa chính hay đến bảng. Dễ dàng nhận thấy, các thông tin trong các bảng đã được phân loại một cách đầy đủ để chỉ mang lại
thông tin cho một thực thể nhất định trong ứng dụng, vậy nên sẽ khơng có thuộc tính khơng liên quan, vậy nó đã chuẩn 2NF.
●Dạng chuẩn thứ ba 3NF: Khơng có phụ thuộc hàm vào thuộc tính khơng khố. Tất cả các dữ liệu chỉ phụ thuộc vào trường định danh (ID) của các bảng, và trường đó là khố chính, vậy cơ sở dữ liệu trên đã đạt chuẩn 3NF.
Hình 3.7. Sơ đồ thực thể liên kết
3.2.3 Các yêu cầu giao tiếp bên ngoài.3.2.3.1 Giao diện người sử dụng. 3.2.3.1 Giao diện người sử dụng.
- Các điều khiển trên trang web cần quen thuộc, dễ thao tác với người dùng.
- Giao diện gồm ít nhất một thứ tiếng: tiếng Việt. Ngôn ngữ dễ sử dụng.
- Tên các trường thơng tin, chức năng phải thống nhất tồn bộ giao diện.
- Font chữ Arial đơn giản và không vướng mắt người dùng.
- Màu sắc sử dụng hài hòa.
3.2.3.2 Giao tiếp phần cứng.
● CẤU HÌNH ● CẤU HÌNH TỐI THIỂU ● CẤU HÌNH ĐỀ
NGHỊ
● Hệ điều hành● Tùy ý ● MS
Windows(7,8,8.1,10)
● Browser ● Google Chrome, Firefox, Cốc Cốc, IE 9+, Opera
● Google Chrome, Firefox, Cốc Cốc,…
3.2.3.3 Giao tiếp phần mềm.
- Để tương tác với hệ thống người dùng cần sử dụng chuột và bàn phím để thực hiện các thao tác lựa chọn, di chuyển, điền thông tin (Không yêu cần với các thiết bị cảm ứng).
- Khả năng vận hành chính xác của các thiết bị phần cứng phải được đảm bảo.
3.2.3.4 Giao tiếp thông tin.
- Sử dụng giao tiếp truyền thông tin HTTP, HTTPs. - Hỗ trợ hầu hết các browser phổ biến hiện nay:
● IE 9+ ● FrieFox ● Opera ● Chrome
3.2.4 Các yêu cầu phi chức năng.
3.2.4.1 Yêu cầu hiệu năng.
- Yêu cầu về độ thực thi: Tốc độ xử lý và tính tốn nhanh (Các thuật tốn sắp xếp, tìm kiếm được thiết kế tối ưu).
- Yêu cầu về giao diện: Giao diện phải thân thiện với người dùng; dễ dàng thao tác.
3.2.4.2 Yêu cầu độ tin cậy.
- Đáp ứng được nhu cầu của khách hàng
● Đảm bảo đáp ứng được các yêu cầu của người sử dụng. ● Ổn định, thời gian làm việc không gặp lỗi quá lớn. ● Cho kết quả chính xác.
- Đảm bảo website có ít khiếm khuyết về lập trình ● Kiểm sốt được các ngoại lệ.
● Lỗi logic tối thiểu.
3.2.4.3 Yêu cầu bảo mật.
- Đảm bảo tính duy nhất của tên đăng nhập người sử dụng. - Chỉ có người quản trị hệ thống mới có quyền cập nhật các
thông tin về sản phẩm và người sử dụng.
- Chịu được tấn cơng của tin tặc và có thể khắc phục ngày về trạng thái trước khi bị tấn cơng.
- Có tính bảo mật cao, đảm bảo nếu khơng có được username, password và được cho phép hoạt động của Admin thì khơng có một User nào có thể thay đổi thơng tin về sản phẩm cũng như toàn bộ Website ngồi việc thay đổi thơng tin cá nhân của User vì vậy việc quản lý dữ liệu bằng mật khẩu đăng nhập: - + Tên đăng nhập
- + Mật khẩu đăng nhập
- Các thông tin của khách hàng được bảo mật.
- Hệ thống quản trị tuyệt đối an tồn, khơng thể bị truy cập do lỗi của hệ thống.
- Như vậy, từ các biểu đồ Use Case và biểu đồ hoạt động của hệ thống đã thể hiện được các chức năng của các tác nhân và hệ thống làm việc như thế nào, xuất phát từ hệ thống hiện tại và các yêu cầu về hệ thống, yêu cầu khách hàng, chúng ta nên xây dựng cho trang Website có đầy đủ chức năng của người quản trị và người dùng và phải đảm bảo có được tính bảo mật cao.
3.2.4.4 Yêu cầu chất lượng.
- Tính bảo trì:
● Kiến trúc tốt kết nối giữa các module lỏng lẻo.
● Cài đặt bằng ngôn ngữ bậc cao (PHP) sử dụng các module có sẵn.
- Tính đáng tin cậy:
● Có ít khiếm khuyết về lỗi lập trình.
● Đáp ứng nhu cầu về chức năng, giao diện của người sử dụng.
- Tính hiệu quả:
● Website khơng sử dụng tài nguyên lãng phí, cài đặt tối ưu về bộ nhớ và tốc độ.
- Tính tiện dụng:
● Giao diện đơn giản, trình bày các chức năng một cách hợp lý theo ý thích của người sử dụng đề ra.
● Cung cấp đầy đủ tài liệu cho việc học hiệu quả. ● Hỗ trợ người sử dụng những tính năng khó
● Giá thành rẻ do việc cài đặt bằng ngôn ngữ bậc cao và khơng q ưu hẹp về tài chính.
● Sử dụng các module có sẵn để giảm thời gian xây dựng.
3.2.5 Cách tổ chức dữ liệu cho trang web.
Việc tổ chức dữ liệu phải giải quyết được các yêu cầu đã phân tích để lúc hiển thị lên trang Web có giao diện dễ nhìn, dễ dàng, hấp dẫn khách hàng... Một phương pháp sử dụng khá rộng rãi từ trước đến nay là quản lý theo từng nhóm sản phẩm. Mỗi nhóm sẽ có một mã nhóm và tên nhóm để nhận biết. Đối với Website này, với các sản phẩm, các sản phẩm sẽ tương ứng với mã hãng và mã loại sản phẩm của nó và mã đó sẽ làm khóa chính trong bảng đó. Sau đây là một số bảng cơ sở dữ liệu chính trong tồn bộ cơ sở dữ liệu:
Hình 3.9: Danh sách Bảng tài khoản Khách hàng.
Hình 3.10: Danh sách bảng Thương hiệu sản phẩm.
Hình 3.12: Danh sách Bảng Sản phẩm.
Hình 3.14: Danh sách Bảng Bài viết.
Hình 3.15: Danh sách Bảng Mã giảm giá.
Hình 3.17: Danh sách Bảng Hóa đơn.
Hình 3.19: Danh sách Bảng thơng tin đặt hàng.