Chương 11-Bài 4. Tạo giao diện trang Giới thiệu (about)

Thực hiện tạo giao diện trang Giới thiệu (about)

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

Step 1: tạo route about

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

Route::get('/gioi-thieu', 'FrontendController@about')->name('frontend.about');

Step 2: viết code action

Viết code cho action about():

• Action about() dùng để hiển thị giao diện trang Giới thiệu about.

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

/**
 * Action hiển thị view Giới thiệu
 * GET /about
 */
public function about()
{
    return view('frontend.pages.about');
}

Tạo view about.blade.php

• Để 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 resources/views/frontend/pages
• Tạo file resources/views/frontend/pages/about.blade.php

Nội dung view about.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')
Giới thiệu 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')
<!-- Title page -->
<section class="bg-img1 txt-center p-lr-15 p-tb-92" style="background-image: url('{{ asset('themes/cozastore/images/bg-01.jpg') }}');">
    <h2 class="ltext-105 cl0 txt-center">
        About
    </h2>
</section>


<!-- Content page -->
<section class="bg0 p-t-75 p-b-120">
    <div class="container">
        <div class="row p-b-148">
            <div class="col-md-7 col-lg-8">
                <div class="p-t-7 p-r-85 p-r-15-lg p-r-0-md">
                    <h3 class="mtext-111 cl2 p-b-16">
                        Our Story
                    </h3>

                    <p class="stext-113 cl6 p-b-26">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consequat consequat enim, non
                        auctor massa ultrices non. Morbi sed odio massa. Quisque at vehicula tellus, sed tincidunt
                        augue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                        Maecenas varius egestas diam, eu sodales metus scelerisque congue. Pellentesque habitant morbi
                        tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas gravida justo eu
                        arcu egestas convallis. Nullam eu erat bibendum, tempus ipsum eget, dictum enim. Donec non
                        neque ut enim dapibus tincidunt vitae nec augue. Suspendisse potenti. Proin ut est diam. Donec
                        condimentum euismod tortor, eget facilisis diam faucibus et. Morbi a tempor elit.
                    </p>

                    <p class="stext-113 cl6 p-b-26">
                        Donec gravida lorem elit, quis condimentum ex semper sit amet. Fusce eget ligula magna. Aliquam
                        aliquam imperdiet sodales. Ut fringilla turpis in vehicula vehicula. Pellentesque congue ac
                        orci ut gravida. Aliquam erat volutpat. Donec iaculis lectus a arcu facilisis, eu sodales
                        lectus sagittis. Etiam pellentesque, magna vel dictum rutrum, neque justo eleifend elit, vel
                        tincidunt erat arcu ut sem. Sed rutrum, turpis ut commodo efficitur, quam velit convallis
                        ipsum, et maximus enim ligula ac ligula.
                    </p>

                    <p class="stext-113 cl6 p-b-26">
                        Any questions? Let us know in store at 8th floor, 379 Hudson St, New York, NY 10018 or call us
                        on (+1) 96 716 6879
                    </p>
                </div>
            </div>

            <div class="col-11 col-md-5 col-lg-4 m-lr-auto">
                <div class="how-bor1 ">
                    <div class="hov-img0">
                        <img src="{{ asset('themes/cozastore/images/about-01.jpg') }}" alt="IMG">
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="order-md-2 col-md-7 col-lg-8 p-b-30">
                <div class="p-t-7 p-l-85 p-l-15-lg p-l-0-md">
                    <h3 class="mtext-111 cl2 p-b-16">
                        Our Mission
                    </h3>

                    <p class="stext-113 cl6 p-b-26">
                        Mauris non lacinia magna. Sed nec lobortis dolor. Vestibulum rhoncus dignissim risus, sed
                        consectetur erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
                        turpis egestas. Nullam maximus mauris sit amet odio convallis, in pharetra magna gravida.
                        Praesent sed nunc fermentum mi molestie tempor. Morbi vitae viverra odio. Pellentesque ac velit
                        egestas, luctus arcu non, laoreet mauris. Sed in ipsum tempor, consequat odio in, porttitor
                        ante. Ut mauris ligula, volutpat in sodales in, porta non odio. Pellentesque tempor urna vitae
                        mi vestibulum, nec venenatis nulla lobortis. Proin at gravida ante. Mauris auctor purus at
                        lacus maximus euismod. Pellentesque vulputate massa ut nisl hendrerit, eget elementum libero
                        iaculis.
                    </p>

                    <div class="bor16 p-l-29 p-b-9 m-t-22">
                        <p class="stext-114 cl6 p-r-40 p-b-11">
                            Creativity is just connecting things. When you ask creative people how they did something,
                            they feel a little guilty because they didn't really do it, they just saw something. It
                            seemed obvious to them after a while.
                        </p>

                        <span class="stext-111 cl8">
                            - Steve Job’s
                        </span>
                    </div>
                </div>
            </div>

            <div class="order-md-1 col-11 col-md-5 col-lg-4 m-lr-auto p-b-30">
                <div class="how-bor2">
                    <div class="hov-img0">
                        <img src="{{ asset('themes/cozastore/images/about-02.jpg') }}" alt="IMG">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

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

<!-- Các đoạn code còn lại 
     ...
-->

<!-- Menu desktop -->
<div class="menu-desktop">
  <ul class="main-menu">
    <li class="{{ Request::is('') ? 'active-menu' : '' }}">
      <a href="{{ route('frontend.home') }}">Home</a>
    </li>

    <li>
      <a href="product.html">Shop</a>
    </li>

    <li class="label1" data-label1="hot">
      <a href="shoping-cart.html">Features</a>
    </li>

    <li>
      <a href="blog.html">Blog</a>
    </li>

    <li class="{{ Request::is('gioi-thieu') ? 'active-menu' : '' }}">
      <a href="{{ route('frontend.about') }}">About</a>
    </li>

    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</div>	

<!-- Các đoạn code còn lại 
     ...
-->

Kiểm tra

• Truy cập trang http://sunshine.local/gioi-thieu