Step 1: tạo route about
- Hiệu chỉnh file
routes/web.php
Route::get('/san-pham', 'Frontend\FrontendController@product')->name('frontend.product');
Step 2: viết code action
Viết code cho action product()
:
/** * Action hiển thị danh sách Sản phẩm */ public function product(Request $request) { // Query tìm danh sách sản phẩm $danhsachsanpham = $this->searchSanPham($request); // Query Lấy các hình ảnh liên quan của các Sản phẩm đã được lọc $danhsachhinhanhlienquan = DB::table('cusc_hinhanh') ->whereIn('sp_ma', $danhsachsanpham->pluck('sp_ma')->toArray()) ->get(); // Query danh sách Loại $danhsachloai = Loai::all(); // Query danh sách màu $danhsachmau = Mau::all(); // Hiển thị view `frontend.index` với dữ liệu truyền vào return view('frontend.pages.product') ->with('danhsachsanpham', $danhsachsanpham) ->with('danhsachhinhanhlienquan', $danhsachhinhanhlienquan) ->with('danhsachmau', $danhsachmau) ->with('danhsachloai', $danhsachloai); }
Tạo view resources/views/frontend/pages/product.blade.php
{{-- View này sẽ kế thừa giao diện từ `frontend.layouts.master` --}} @extends('frontend.layouts.master') {{-- Thay thế nội dung vào Placeholder `title` của view `frontend.layouts.master` --}} @section('title') Danh sách sản phẩm Shop Hoa tươi - Sunshine @endsection {{-- Thay thế nội dung vào Placeholder `custom-css` của view `frontend.layouts.master` --}} @section('custom-css') @endsection {{-- Thay thế nội dung vào Placeholder `main-content` của view `frontend.layouts.master` --}} @section('main-content') @include('frontend.widgets.product-list', [$data = $danhsachsanpham]) @endsection {{-- Thay thế nội dung vào Placeholder `custom-scripts` của view `frontend.layouts.master` --}} @section('custom-scripts') @endsection
Step 3: gắn liên kết cho menu about trên header
Hiệu chỉnh file resources/views/frontend/layouts/partials/header.blade.php
:
<!-- Menu desktop --> <div class="menu-desktop"> <ul class="main-menu"> <li class="{{ Request::is('') ? 'active-menu' : '' }}"> <a href="{{ route('frontend.home') }}">Trang chủ</a> </li> <li class="{{ Request::is('san-pham') ? 'active-menu' : '' }}"> <a href="{{ route('frontend.product') }}">Sản phẩm</a> </li> <li class="{{ Request::is('gioi-thieu') ? 'active-menu' : '' }}"> <a href="{{ route('frontend.about') }}">Giới thiệu</a> </li> <li class="{{ Request::is('lien-he') ? 'active-menu' : '' }}"> <a href="{{ route('frontend.contact') }}">Liên hệ</a> </li> </ul> </div>
Mục lục
Chương trình học
- Bức tranh Tổng thể về Lập trình WEB
-
Giới thiệu, cài đặt, cấu hình môi trường lập trình
9
- Cài đặt web server XAMPP #84
- Cài đặt công cụ truy vấn database HeidiSQL #85
- Cài đặt Composer để quản lý các gói thư viện trong PHP #86
- Cài đặt trình soạn thảo code Visual Studio Code IDE #64
- Tạo tên miền ảo trên máy cục bộ (virtual host on localhost) bằng XAMPP #107
- Cài đặt nền tảng quản lý Source Code sử dụng GIT #1030
- Cài đặt công cụ quản lý Source Code TortoiseGit #1045
- Cài đặt chế độ Debug PHP với Visual Studio Code #8066
- Tạo chứng chỉ SSL trên Localhost #10399
- Tập làm quen với quản lý source code bằng GitHub 3
- Cài đặt framework Laravel 1
- Tìm hiểu mô hình kiến trúc MVC vận hành trong framework Laravel 4
- Sử dụng Template Engine để trình diễn nội dung trong các VIEW 3
-
Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế CSDL
7
- Phân tích các yêu cầu, nghiệp vụ của khách hàng #68
- Mô hình thiết kế CSDL mẫu Sunshine #69
- Khởi tạo database sunshine, thiết lập kết nối CSDL trong Laravel #1143
- Tạo cấu trúc table bằng tính năng MIGRATION trong Laravel - Danh mục phẳng #70
- Tạo cấu trúc table bằng tính năng MIGRATION trong Laravel - Danh mục có liên kết khóa ngoại #1157
- Tạo dữ liệu ban đầu cho CSDL bằng tính năng SEED trong Laravel - Danh mục phẳng #71
- Tạo dữ liệu ban đầu cho CSDL bằng tính năng SEED trong Laravel - Danh mục có liên kết khóa ngoại #7851
- Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Ánh xạ CSDL và Laravel 3
-
Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế Backend
20
- Thiết kế bố cục (layouts) cho giao diện Backend #72
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (index) #135
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (create) #137
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (edit) #138
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (delete) #139
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Index #75
- Lưu đồ Upload file từ Client lên Server #2229
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Create #108
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Edit #87
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Delete #88
- Xây dựng danh mục Sản phẩm có chức năng upload nhiều Hình ảnh cùng lúc #9259
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Bổ sung menu vào sidebar #104
- Xây dựng chức năng xuất biểu mẫu và In ấn trực tiếp trên web #78
- Xây dựng chức năng xuất Excel #76
- Xây dựng chức năng xuất PDF #77
- Tạo chức năng Đăng nhập #1870
- Lưu đồ Kiểm tra ràng buộc dữ liệu (Validation) #2205
- Kiểm tra ràng buộc dữ liệu (Validation) phía Client #2206
- Kiểm tra ràng buộc dữ liệu (Validation) phía Server #2207
- Bài tập tổng hợp - Tạo các chức năng Backend cho trang web đọc Truyện Tranh và Tiểu Thuyết Online sử dụng Laravel framework #9312
-
AngularJS
7
- AngularJS là gì? Cài đặt AngularJS và cú pháp sử dụng AngularJS #95
- Cách mô hình kiến trúc MVC vận hành trong AngularJS #96
- Cách sử dụng AngularJS Controller, Scope #98
- Cách sử dụng AngularJS Directive #97
- Cách sử dụng AngularJS Event #100
- Cách sử dụng AngularJS Filter #99
- Cách sử dụng AngularJS Validation #101
-
Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế Frontend sử dụng AngularJS
11
- Thiết kế bố cục (layouts) cho giao diện Frontend #80
- Tích hợp AngularJS vào framework Laravel #102
- Tạo giao diện trang chủ (index) #81
- Tạo giao diện trang Giới thiệu (about) #109
- Tạo giao diện trang Liên hệ (contact) #114
- Tạo trang danh sách Sản phẩm (product) #110
- Tạo nút Thêm vào giỏ hàng cho từng sản phẩm (add-to-cart) #112
- Tạo trang Chi tiết Sản phẩm (product-detail) #111
- Tạo giỏ hàng (cart sidebar) #82
- Tạo trang thanh toán (checkout) #83
- Tạo đơn hàng và gởi mail xác nhận #103
-
Bonus
9
- Đa ngôn ngữ trong Laravel #115
- Tạo báo cáo với biểu đồ ChartJS #116
- Tạo khung chọn Ngày tháng cho dự án #2431
- Tạo các trang thông báo lỗi tương ứng STATUS CODE #117
- Kiểm tra ứng dụng với tunnel ảo NGROK #2418
- Phân trang trong Laravel #2436
- Bổ sung khung xem Hình ảnh trước khi upload (preview image upload) #2439
- Tạo API trong Laravel và sử dụng AngularJS để hiển thị giao diện #9385
- Cách tự động sinh Ảnh nhiều kích cỡ (Automatic resize image) khi upload file Ảnh #9970
- Danh sách Đồ án xây dựng trang web sử dụng LARAVEL 2
- Tài liệu tham khảo 3
- Thực hiện Đồ án 1
Các bài học
Bài học trước Bài học tiếp theo
Chương trình học
Bao gồm Module, Chương, Bài học, Bài tập, Kiểm tra...Chương trình học
- Bức tranh Tổng thể về Lập trình WEB
-
Giới thiệu, cài đặt, cấu hình môi trường lập trình
9
- Cài đặt web server XAMPP #84
- Cài đặt công cụ truy vấn database HeidiSQL #85
- Cài đặt Composer để quản lý các gói thư viện trong PHP #86
- Cài đặt trình soạn thảo code Visual Studio Code IDE #64
- Tạo tên miền ảo trên máy cục bộ (virtual host on localhost) bằng XAMPP #107
- Cài đặt nền tảng quản lý Source Code sử dụng GIT #1030
- Cài đặt công cụ quản lý Source Code TortoiseGit #1045
- Cài đặt chế độ Debug PHP với Visual Studio Code #8066
- Tạo chứng chỉ SSL trên Localhost #10399
- Tập làm quen với quản lý source code bằng GitHub 3
- Cài đặt framework Laravel 1
- Tìm hiểu mô hình kiến trúc MVC vận hành trong framework Laravel 4
- Sử dụng Template Engine để trình diễn nội dung trong các VIEW 3
-
Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế CSDL
7
- Phân tích các yêu cầu, nghiệp vụ của khách hàng #68
- Mô hình thiết kế CSDL mẫu Sunshine #69
- Khởi tạo database sunshine, thiết lập kết nối CSDL trong Laravel #1143
- Tạo cấu trúc table bằng tính năng MIGRATION trong Laravel - Danh mục phẳng #70
- Tạo cấu trúc table bằng tính năng MIGRATION trong Laravel - Danh mục có liên kết khóa ngoại #1157
- Tạo dữ liệu ban đầu cho CSDL bằng tính năng SEED trong Laravel - Danh mục phẳng #71
- Tạo dữ liệu ban đầu cho CSDL bằng tính năng SEED trong Laravel - Danh mục có liên kết khóa ngoại #7851
- Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Ánh xạ CSDL và Laravel 3
-
Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế Backend
20
- Thiết kế bố cục (layouts) cho giao diện Backend #72
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (index) #135
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (create) #137
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (edit) #138
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (delete) #139
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Index #75
- Lưu đồ Upload file từ Client lên Server #2229
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Create #108
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Edit #87
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Delete #88
- Xây dựng danh mục Sản phẩm có chức năng upload nhiều Hình ảnh cùng lúc #9259
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Bổ sung menu vào sidebar #104
- Xây dựng chức năng xuất biểu mẫu và In ấn trực tiếp trên web #78
- Xây dựng chức năng xuất Excel #76
- Xây dựng chức năng xuất PDF #77
- Tạo chức năng Đăng nhập #1870
- Lưu đồ Kiểm tra ràng buộc dữ liệu (Validation) #2205
- Kiểm tra ràng buộc dữ liệu (Validation) phía Client #2206
- Kiểm tra ràng buộc dữ liệu (Validation) phía Server #2207
- Bài tập tổng hợp - Tạo các chức năng Backend cho trang web đọc Truyện Tranh và Tiểu Thuyết Online sử dụng Laravel framework #9312
-
AngularJS
7
- AngularJS là gì? Cài đặt AngularJS và cú pháp sử dụng AngularJS #95
- Cách mô hình kiến trúc MVC vận hành trong AngularJS #96
- Cách sử dụng AngularJS Controller, Scope #98
- Cách sử dụng AngularJS Directive #97
- Cách sử dụng AngularJS Event #100
- Cách sử dụng AngularJS Filter #99
- Cách sử dụng AngularJS Validation #101
-
Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế Frontend sử dụng AngularJS
11
- Thiết kế bố cục (layouts) cho giao diện Frontend #80
- Tích hợp AngularJS vào framework Laravel #102
- Tạo giao diện trang chủ (index) #81
- Tạo giao diện trang Giới thiệu (about) #109
- Tạo giao diện trang Liên hệ (contact) #114
- Tạo trang danh sách Sản phẩm (product) #110
- Tạo nút Thêm vào giỏ hàng cho từng sản phẩm (add-to-cart) #112
- Tạo trang Chi tiết Sản phẩm (product-detail) #111
- Tạo giỏ hàng (cart sidebar) #82
- Tạo trang thanh toán (checkout) #83
- Tạo đơn hàng và gởi mail xác nhận #103
-
Bonus
9
- Đa ngôn ngữ trong Laravel #115
- Tạo báo cáo với biểu đồ ChartJS #116
- Tạo khung chọn Ngày tháng cho dự án #2431
- Tạo các trang thông báo lỗi tương ứng STATUS CODE #117
- Kiểm tra ứng dụng với tunnel ảo NGROK #2418
- Phân trang trong Laravel #2436
- Bổ sung khung xem Hình ảnh trước khi upload (preview image upload) #2439
- Tạo API trong Laravel và sử dụng AngularJS để hiển thị giao diện #9385
- Cách tự động sinh Ảnh nhiều kích cỡ (Automatic resize image) khi upload file Ảnh #9970
- Danh sách Đồ án xây dựng trang web sử dụng LARAVEL 2
- Tài liệu tham khảo 3
- Thực hiện Đồ án 1
Bài học trước Bài học tiếp theo
Menu Tiện ích
Menu Hướng dẫn Học tập
❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜
Thực hiện các bước tuần tự theo nội dung Bài học nhé!