Tìm hiểu Laravel từ số 0 (P8)

Trong phần 7 tôi đã đi đến Restful resource controller, kế tiếp trong phần 8 này tôi sẽ đề cập đến những nội dung dưới đây :

• Navigation menu
• Implicit controller
• Đăng kí user và authen
• Forgot password

Đến phần này tôi đã viết khá nhiều về Article nhưng chưa có đề cập đến phần Navigation nên phần này tôi muốn thử tạo một cái. Tuy đây là chức năng phần lớn sẽ là dùng boostrap3 chứ không phải chức năng của Laravel cung cấp.

ROUTING

Đầu tiên thì bằng route tôi sẽ sửa routes.php để hiển thị được Article list. Rất đơn giản !

// app/Http/routes.php
 //...
Route::get('/', 'ArticlesController@index');  // root sẽ là danh sách bài viết
//...

VIEW

Tiếp là đi tạo Partial của navigation menu. Tôi tạo ra file mới là resouces/views/navbar.blade.php. Nội dung sẽ đi copy sample của Bootstrap3, phần Navbar và chỉ sửa phần link mà thôi.

{{-- resouces/views/navbar.blade.php --}}
 
<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <!-- Phần này sẽ hiển thị nút khi mà coi bằng smart phone hoặc tablet -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
 
            <!-- Hiển thị brand -->
            <a class="navbar-brand" href="/">My Blog</a>
        </div>
 
        <!-- Menu -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <!-- Menu căn trái -->
            <ul class="nav navbar-nav">
                <li>{!! link_to_route('articles.index', 'Blog') !!}</li>
                <li><a href="/contact">Contact</a></li>
                <li><a href="/about">About</a></li>
            </ul>
 
            <!-- Menu căn phải -->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Login</a></li>
                <li><a href="#">Register</a></li>
 
                <!-- Dropdown menu -->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">User Name <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Profile</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Logout</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

Để ví dụ thì tôi chỉ gắn link cho mấy menu trái là ”My Blog”, “Blog”, “Contact”, “About” đến địa chỉ cụ thể còn mấy cái hiển thị bên phải gồm ”Login”, “Register”, “User Name”, “Profile”, “Logout” thì sẽ ko gắn link, chỉ là dummy menu cho đẹp.

Sửalayout.blade.php để nó hiển thị cả navigation menu là công việc hoàn tất trong vài nốt nhạc