Hướng dẫn code trang chủ quản trị lavarel

• Đăng nhập
• Đăng kí

Danh mục

• Top code
• Code chất lượng
• Code tham khảo
• Code miễn phí
• Domain - Hosting
  • * Đăng kí tên miền
    • Hosting SSD
    • Clould VPS
    • Email server
    • Chứng thực SSL
• Dịch vụ
  • * Cài đặt website
    • Thiết kế website
      

Mã khác

ShareCode.vn Cộng đồng chia sẻ và download source code

THÔNG BÁO

• THÔNG BÁO NGHỈ LỄ GIỖ TỔ HÙNG VƯƠNG VÀ 30/4 - 1/5### SIÊU KHUYẾN MÃI "MUA CODE GIỜ VÀNG NHẬN HOÀN XU NGAY" MỪNG ĐẠI LỄ 30/4 - 1/5### Cách UPLOAD code hiệu quả và tối ưu SEO### Mẹo giúp bạn TĂNG DOANH THU bán source code### Hướng dẫn nạp tiền vào tài khoản### Hướng dẫn RÚT TIỀN từ tài khoản### Hướng dẫn cách chạy website ASP.Net trên Localhost

  Tác giả: Dương Nguyễn Phú Cường

  Ngày đăng: Hồi xưa đó

  Thực hiện tạo giao diện trang chủ Frontend

  Step 1: tạo controller chứa các action thực thi các tác vụ cho Frontend

  • Thực thi câu lệnh

  php artisan make:controller Frontend/FrontendController

  • Laravel Framework sẽ tạo cho bạn file controller ở app/Http/Controllers/Frontend/FrontendController.php

  Mô hình hoạt động của action index():

  

  Step 2: tạo route index

  • Hiệu chỉnh file routes/web.php

  Route::get('/', 'Frontend\FrontendController@index')->name('frontend.home');

  Step 3: viết code action

  Viết code cho action index():

  • Action index() dùng để hiển thị giao diện trang chủ Route::get('/', 'Frontend\FrontendController@index')->name('frontend.home'); 1.

  Hiệu chỉnh file app/Http/Controllers/Frontend/FrontendController.php

  <?php namespace App\Http\Controllers\Frontend; use Illuminate\Http\Request; use App\Http\Controllers\Controller; use App\Loai; use DB; class FrontendController extends Controller {

  /**  
  

  • Action hiển thị view Trang chủ
  • GET /

     /  
    public function index(Request $request)  
    {  
        // Query top 3 loại sản phẩm (có sản phẩm) mới nhất  
        $ds_top3_newest_loaisanpham = DB::table('cusc_loai')  
            ->join('cusc_sanpham', 'cusc_loai.l_ma', '=', 'cusc_sanpham.l_ma')  
            ->orderBy('l_capNhat')->take(3)->get();
        // Query tìm danh sách sản phẩm  
        $danhsachsanpham = $this->searchSanPham($request);  
        // Hiển thị view frontend.index với dữ liệu truyền vào  
        return view('frontend.index')  
            ->with('ds_top3_newest_loaisanpham', $ds_top3_newest_loaisanpham)  
            ->with('danhsachsanpham', $danhsachsanpham);  
    }  
    /*  

  • Hàm query danh sách sản phẩm theo nhiều điều kiện / private function searchSanPham(Request $request) { $query = DB::table('cusc_sanpham')->select(''); // Kiểm tra điều kiện searchByLoaiMa $searchByLoaiMa = $request->query('searchByLoaiMa'); if ($searchByLoaiMa != null) { } $data = $query->get(); return $data; } }

    Tạo view

  Route::get('/', 'Frontend\FrontendController@index')->name('frontend.home');

  3

  • Do nhận thấy, trong giao diện trang chủ của theme Route::get('/', 'Frontend\FrontendController@index')->name('frontend.home'); 4 có các thành phần có thể tái sử dụng lại nhiều lần. Chúng ta sẽ tiến hành tách các thành phần của giao diện trang chủ thành các widget như sau:
  
  • Để dễ dàng quản lý các view, ta sẽ tạo 1 thư mục tương ứng với tên Controller, mỗi action sẽ tương ứng với tên view.
  • Tạo folder Route::get('/', 'Frontend\FrontendController@index')->name('frontend.home'); 5
  • Tạo file Route::get('/', 'Frontend\FrontendController@index')->name('frontend.home'); 6
  • Nội dung file Route::get('/', 'Frontend\FrontendController@index')->name('frontend.home'); 3

  {{ 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') 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') <! Slider > @include('frontend.widgets.homepage-slider') <! Banner > @include('frontend.widgets.homepage-banner', [$data = $ds_top3_newest_loaisanpham]) <! Product > @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

  • Nội dung file Route::get('/', 'Frontend\FrontendController@index')->name('frontend.home'); 8

  <div class="sec-banner bg0 p-t-80 p-b-50">

  <div class="container">  
      <div class="row">  
          @foreach($data as $index=>$item)  
          <div class="col-md-6 col-xl-4 p-b-30 m-lr-auto">  
              <!-- Block{{$index+1}} -->  
              <div class="block1 wrap-pic-w"><img src="{{ asset('themes/cozastore/images/banner-0'. ($index+1) .'.jpg') }}" alt="IMG-BANNER"><a href="#" id="homepageBannerLoaiSanPham_{{ $item->l_ma }}" class="block1-txt ab-t-l s-full flex-col-l-sb p-lr-38 p-tb-34 trans-03 respon3">  
                      <div class="block1-txt-child1 flex-col-l"><span class="block1-name ltext-102 trans-04 p-b-8">{{ $item->l_ten }}  
                          </span><span class="block1-info stext-102 trans-04">Hàng hot 2018 </span></div>  
                      <div class="block1-txt-child2 p-b-4 trans-05">  
                          <div class="block1-link stext-101 cl0 trans-09">Shop Now </div>  
                      </div>  
                  </a></div>  
          </div>  
          @endforeach  
      </div>  
  </div>  
  

  </div>
  • Nội dung file Route::get('/', 'Frontend\FrontendController@index')->name('frontend.home'); 9

  <section class="section-slide">

  <div class="wrap-slick1">  
      <div class="slick1">  
          <div class="item-slick1" style="background-image: url({{ asset('themes/cozastore/images/slide-01.jpg') }});">  
              <div class="container h-full">  
                  <div class="flex-col-l-m h-full p-t-100 p-b-30 respon5">  
                      <div class="layer-slick1 animated visible-false" data-appear="fadeInDown" data-delay="0">  
                          <span class="ltext-101 cl2 respon2">  
                              Women Collection 2018  
                          </span>  
                      </div>
                      <div class="layer-slick1 animated visible-false" data-appear="fadeInUp" data-delay="800">  
                          <h2 class="ltext-201 cl2 p-t-19 p-b-43 respon1">  
                              NEW SEASON  
                          </h2>  
                      </div>
                      <div class="layer-slick1 animated visible-false" data-appear="zoomIn" data-delay="1600">  
                          <a href="product.html" class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04">  
                              Shop Now  
                          </a>  
                      </div>  
                  </div>  
              </div>  
          </div>
          <div class="item-slick1" style="background-image: url({{ asset('themes/cozastore/images/slide-02.jpg') }});">  
              <div class="container h-full">  
                  <div class="flex-col-l-m h-full p-t-100 p-b-30 respon5">  
                      <div class="layer-slick1 animated visible-false" data-appear="rollIn" data-delay="0">  
                          <span class="ltext-101 cl2 respon2">  
                              Men New-Season  
                          </span>  
                      </div>
                      <div class="layer-slick1 animated visible-false" data-appear="lightSpeedIn" data-delay="800">  
                          <h2 class="ltext-201 cl2 p-t-19 p-b-43 respon1">  
                              Jackets & Coats  
                          </h2>  
                      </div>
                      <div class="layer-slick1 animated visible-false" data-appear="slideInUp" data-delay="1600">  
                          <a href="product.html" class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04">  
                              Shop Now  
                          </a>  
                      </div>  
                  </div>  
              </div>  
          </div>
          <div class="item-slick1" style="background-image: url({{ asset('themes/cozastore/images/slide-03.jpg') }});">  
              <div class="container h-full">  
                  <div class="flex-col-l-m h-full p-t-100 p-b-30 respon5">  
                      <div class="layer-slick1 animated visible-false" data-appear="rotateInDownLeft" data-delay="0">  
                          <span class="ltext-101 cl2 respon2">  
                              Men Collection 2018  
                          </span>  
                      </div>
                      <div class="layer-slick1 animated visible-false" data-appear="rotateInUpRight" data-delay="800">  
                          <h2 class="ltext-201 cl2 p-t-19 p-b-43 respon1">  
                              New arrivals  
                          </h2>  
                      </div>
                      <div class="layer-slick1 animated visible-false" data-appear="rotateIn" data-delay="1600">  
                          <a href="product.html" class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04">  
                              Shop Now  
                          </a>  
                      </div>  
                  </div>  
              </div>  
          </div>  
      </div>  
  </div>  
  

  </section>
  • Nội dung file <?php namespace App\Http\Controllers\Frontend; use Illuminate\Http\Request; use App\Http\Controllers\Controller; use App\Loai; use DB; class FrontendController extends Controller {

    /  
    

    • Action hiển thị view Trang chủ
    • GET /

       /  
      public function index(Request $request)  
      {  
          // Query top 3 loại sản phẩm (có sản phẩm) mới nhất  
          $ds_top3_newest_loaisanpham = DB::table('cusc_loai')  
              ->join('cusc_sanpham', 'cusc_loai.l_ma', '=', 'cusc_sanpham.l_ma')  
              ->orderBy('l_capNhat')->take(3)->get();  
          // Query tìm danh sách sản phẩm  
          $danhsachsanpham = $this->searchSanPham($request);  
          // Hiển thị view frontend.index với dữ liệu truyền vào  
          return view('frontend.index')  
              ->with('ds_top3_newest_loaisanpham', $ds_top3_newest_loaisanpham)  
              ->with('danhsachsanpham', $danhsachsanpham);  
      }  
      /*  

    • Hàm query danh sách sản phẩm theo nhiều điều kiện / private function searchSanPham(Request $request) { $query = DB::table('cusc_sanpham')->select(''); // Kiểm tra điều kiện searchByLoaiMa $searchByLoaiMa = $request->query('searchByLoaiMa'); if ($searchByLoaiMa != null) { } $data = $query->get(); return $data; } } 0

  <div class="bg0 m-t-23 p-b-140">

  <div class="container">  
      <div class="flex-w flex-sb-m p-b-52">  
          <div class="flex-w flex-l-m filter-tope-group m-tb-10">  
              <button class="stext-106 cl6 hov1 bor3 trans-04 m-r-32 m-tb-5 how-active1" data-filter="*">  
                  All Products  
              </button>
              <button class="stext-106 cl6 hov1 bor3 trans-04 m-r-32 m-tb-5" data-filter=".women">  
                  Women  
              </button>
              <button class="stext-106 cl6 hov1 bor3 trans-04 m-r-32 m-tb-5" data-filter=".men">  
                  Men  
              </button>
              <button class="stext-106 cl6 hov1 bor3 trans-04 m-r-32 m-tb-5" data-filter=".bag">  
                  Bag  
              </button>
              <button class="stext-106 cl6 hov1 bor3 trans-04 m-r-32 m-tb-5" data-filter=".shoes">  
                  Shoes  
              </button>
              <button class="stext-106 cl6 hov1 bor3 trans-04 m-r-32 m-tb-5" data-filter=".watches">  
                  Watches  
              </button>  
          </div>
          <div class="flex-w flex-c-m m-tb-10">  
              <div class="flex-c-m stext-106 cl6 size-104 bor4 pointer hov-btn3 trans-04 m-r-8 m-tb-4 js-show-filter">  
                  <i class="icon-filter cl2 m-r-6 fs-15 trans-04 zmdi zmdi-filter-list"></i>  
                  <i class="icon-close-filter cl2 m-r-6 fs-15 trans-04 zmdi zmdi-close dis-none"></i>  
                  Filter  
              </div>
              <div class="flex-c-m stext-106 cl6 size-105 bor4 pointer hov-btn3 trans-04 m-tb-4 js-show-search">  
                  <i class="icon-search cl2 m-r-6 fs-15 trans-04 zmdi zmdi-search"></i>  
                  <i class="icon-close-search cl2 m-r-6 fs-15 trans-04 zmdi zmdi-close dis-none"></i>  
                  Search  
              </div>  
          </div>
          <!-- Search product -->  
          <div class="dis-none panel-search w-full p-t-10 p-b-15">  
              <div class="bor8 dis-flex p-l-15">  
                  <button class="size-113 flex-c-m fs-16 cl2 hov-cl1 trans-04">  
                      <i class="zmdi zmdi-search"></i>  
                  </button>
                  <input class="mtext-107 cl2 size-114 plh2 p-r-15" type="text" name="search-product" placeholder="Search">  
              </div>  
          </div>
          <!-- Filter -->  
          <div class="dis-none panel-filter w-full p-t-10">  
              <div class="wrap-filter flex-w bg6 w-full p-lr-40 p-t-27 p-lr-15-sm">  
                  <div class="filter-col1 p-r-15 p-b-27">  
                      <div class="mtext-102 cl2 p-b-15">  
                          Sort By  
                      </div>
                      <ul>  
                          <li class="p-b-6">  
                              <a href="#" class="filter-link stext-106 trans-04">  
                                  Default  
                              </a>  
                          </li>
                          <li class="p-b-6">  
                              <a href="#" class="filter-link stext-106 trans-04">  
                                  Popularity  
                              </a>  
                          </li>
                          <li class="p-b-6">  
                              <a href="#" class="filter-link stext-106 trans-04">  
                                  Average rating  
                              </a>  
                          </li>
                          <li class="p-b-6">  
                              <a href="#" class="filter-link stext-106 trans-04 filter-link-active">  
                                  Newness  
                              </a>  
                          </li>
                          <li class="p-b-6">  
                              <a href="#" class="filter-link stext-106 trans-04">  
                                  Price: Low to High  
                              </a>  
                          </li>
                          <li class="p-b-6">  
                              <a href="#" class="filter-link stext-106 trans-04">  
                                  Price: High to Low  
                              </a>  
                          </li>  
                      </ul>  
                  </div>
                  <div class="filter-col2 p-r-15 p-b-27">  
                      <div class="mtext-102 cl2 p-b-15">  
                          Price  
                      </div>
                      <ul>  
                          <li class="p-b-6">  
                              <a href="#" class="filter-link stext-106 trans-04 filter-link-active">  
                                  All  
                              </a>  
                          </li>
                          <li class="p-b-6">  
                              <a href="#" class="filter-link stext-106 trans-04">  
                                  $0.00 - $50.00  
                              </a>  
                          </li>
                          <li class="p-b-6">  
                              <a href="#" class="filter-link stext-106 trans-04">  
                                  $50.00 - $100.00  
                              </a>  
                          </li>
                          <li class="p-b-6">  
                              <a href="#" class="filter-link stext-106 trans-04">  
                                  $100.00 - $150.00  
                              </a>  
                          </li>
                          <li class="p-b-6">  
                              <a href="#" class="filter-link stext-106 trans-04">  
                                  $150.00 - $200.00  
                              </a>  
                          </li>
                          <li class="p-b-6">  
                              <a href="#" class="filter-link stext-106 trans-04">  
                                  $200.00+  
                              </a>  
                          </li>  
                      </ul>  
                  </div>
                  <div class="filter-col3 p-r-15 p-b-27">  
                      <div class="mtext-102 cl2 p-b-15">  
                          Color  
                      </div>
                      <ul>  
                          <li class="p-b-6">  
                              <span class="fs-15 lh-12 m-r-6" style="color: 
  

  # 222;">

                                  <i class="zmdi zmdi-circle"></i>  
                              </span>
                              <a href="#" class="filter-link stext-106 trans-04">  
                                  Black  
                              </a>  
                          </li>
                          <li class="p-b-6">  
                              <span class="fs-15 lh-12 m-r-6" style="color: 
  

  # 4272d7;">

                                  <i class="zmdi zmdi-circle"></i>  
                              </span>
                              <a href="#" class="filter-link stext-106 trans-04 filter-link-active">  
                                  Blue  
                              </a>  
                          </li>
                          <li class="p-b-6">  
                              <span class="fs-15 lh-12 m-r-6" style="color: 
  

  # b3b3b3;">

                                  <i class="zmdi zmdi-circle"></i>  
                              </span>
                              <a href="#" class="filter-link stext-106 trans-04">  
                                  Grey  
                              </a>  
                          </li>
                          <li class="p-b-6">  
                              <span class="fs-15 lh-12 m-r-6" style="color: 
  

  # 00ad5f;">

                                  <i class="zmdi zmdi-circle"></i>  
                              </span>
                              <a href="#" class="filter-link stext-106 trans-04">  
                                  Green  
                              </a>  
                          </li>
                          <li class="p-b-6">  
                              <span class="fs-15 lh-12 m-r-6" style="color: 
  

  # fa4251;">

                                  <i class="zmdi zmdi-circle"></i>  
                              </span>
                              <a href="#" class="filter-link stext-106 trans-04">  
                                  Red  
                              </a>  
                          </li>
                          <li class="p-b-6">  
                              <span class="fs-15 lh-12 m-r-6" style="color: 
  

  # aaa;">

                                  <i class="zmdi zmdi-circle-o"></i>  
                              </span>
                              <a href="#" class="filter-link stext-106 trans-04">  
                                  White  
                              </a>  
                          </li>  
                      </ul>  
                  </div>
                  <div class="filter-col4 p-b-27">  
                      <div class="mtext-102 cl2 p-b-15">  
                          Tags  
                      </div>
                      <div class="flex-w p-t-4 m-r--5">  
                          <a href="#" class="flex-c-m stext-107 cl6 size-301 bor7 p-lr-15 hov-tag1 trans-04 m-r-5 m-b-5">  
                              Fashion  
                          </a>
                          <a href="#" class="flex-c-m stext-107 cl6 size-301 bor7 p-lr-15 hov-tag1 trans-04 m-r-5 m-b-5">  
                              Lifestyle  
                          </a>
                          <a href="#" class="flex-c-m stext-107 cl6 size-301 bor7 p-lr-15 hov-tag1 trans-04 m-r-5 m-b-5">  
                              Denim  
                          </a>
                          <a href="#" class="flex-c-m stext-107 cl6 size-301 bor7 p-lr-15 hov-tag1 trans-04 m-r-5 m-b-5">  
                              Streetstyle  
                          </a>
                          <a href="#" class="flex-c-m stext-107 cl6 size-301 bor7 p-lr-15 hov-tag1 trans-04 m-r-5 m-b-5">  
                              Crafts  
                          </a>  
                      </div>  
                  </div>  
              </div>  
          </div>  
      </div>
      <div class="row isotope-grid">  
          @foreach($data as $index=>$sp)  
          <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item women">  
              <!-- Block2 -->  
              <div class="block2">  
                  <div class="block2-pic hov-img0">  
                      <img src="{{ asset('storage/photos/' . $sp->sp_hinh) }}" alt="IMG-PRODUCT">
                      <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">  
                          Quick View  
                      </a>  
                  </div>
                  <div class="block2-txt flex-w flex-t p-t-14">  
                      <div class="block2-txt-child1 flex-col-l ">  
                          <a href="product-detail.html" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">  
                              {{ $sp->sp_ten }}  
                          </a>
                          <span class="stext-105 cl3">  
                              {{ $sp->sp_giaBan }}  
                          </span>  
                      </div>
                      <div class="block2-txt-child2 flex-r p-t-3">  
                          <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">  
                              <img class="icon-heart1 dis-block trans-04" src="{{ asset('themes/cozastore/images/icons/icon-heart-01.png') }}" alt="ICON">  
                              <img class="icon-heart2 dis-block trans-04 ab-t-l" src="{{ asset('themes/cozastore/images/icons/icon-heart-02.png') }}" alt="ICON">  
                          </a>  
                      </div>  
                  </div>  
              </div>  
          </div>  
          @endforeach  
      </div>
      <!-- Load more -->  
      <div class="flex-c-m flex-w w-full p-t-45">  
          <a href="#" class="flex-c-m stext-101 cl5 size-103 bg2 bor1 hov-btn1 p-lr-15 trans-04">  
              Load More  
          </a>  
      </div>  
  </div>  
  

  </div>