Layouting atau mengatur tampilan web di laravel dengan memanfaatkan fitur blade bawaan.

Layouting di laravel masih sama dengan konsep OOP menggunakan extends, teman-teman pasti sering menjumpai  sebuah situs dengan halaman berbeda namun navbar tetap sama, yang berubah hanya isi atau kontennya saja, jadi setiap halaman web itu memiliki script navbar yang sama, layouting laravel ini akan membuat navbar tersebut hanya sekali saja dan membuat halaman-halaman konten lainnya di. jadi file navbar dan konten akan dipisahkan.

langsung saja kita lihat cara pembuatan, tentu saja Anda sudah mengaktifkan file laravel dengan cara masuk ke direktori laravel dengan cmd lalu ketikkan ‘php artisan serve’, kemudian buka text editor dan buka folder laravel. silakan ikuti langkah berikut :

  1. langkah awal adalah menetapkan bahwa akan 2 konten yang kita buat, sehinnga nanti kita akan buat 3 file, 1 untuk file navbar sebagai templatenya dan 2 lainnya sebagai konten. karena kita sudah tentukan, maka langsung saja kita tambahkan script berikut di file web.php, file ini berada di folder routes :Route::get(‘show-data’, ‘HomeController@index’);
    Route::get(‘input-data’, ‘HomeController@create’);
  2. poin sebelumnya ditentukan bahwa kedua route di atas akan mengakses file HomeController di folder app/Http/Controllers, jika kita cek sekarang file HomeController tersebut belum ada, maka kita akan membuat file tersebut terlebih dahulu, buka cmd baru lalu masuk ke direktori laravel atau project Anda lalu ketikkanphp artisan make:controller HomeController –resource–resource pada script di atas merupakan opsional, jika menambahkan script tersebut maka file Conttroller yang kita buat akan dilengkapi dengan function yang lebih memudahkan programmer. sekarang silakan cek di folder app/Http/Controllers, maka file HomeController telah tersedia dengan beberapa function di dalamnya.
  3. buka file HomeController dan tambahkan script ini pada function index()
    return view(‘data’);

    isi dari fungsi view pada script di atas merupakan nama file yang berada di folder resources/views, file tersebut belum ada, kita akan membuatnya di poin berikutnya.

  4. Tambahkan script berikut pada di HomeController pada function create()
    return view(‘inputdata’);
  5. membuat file navbar dengan nama template.blade.php, ingat pembuatan file ini berada di folder resources/views.
    copy script html berikut, @yield(‘content) di bawah penanda bahwa file konten nantinya akan di letakkan di script @yield ini dengan penanda ‘content’.
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <link rel=”stylesheet” type=”text/css” href=”{{asset(‘css/app.css’)}}”>
    <script type=”text/javascript” src=”{{asset(‘js/app.js’)}}”></script>
    </head>
    <body>
    <nav class=”navbar navbar-expand-lg navbar-light bg-light”>
    <a class=”navbar-brand” href=”#”>Navbar</a>
    <button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarSupportedContent” aria-controls=”navbarSupportedContent” aria-expanded=”false” aria-label=”Toggle navigation”>
    <span class=”navbar-toggler-icon”></span>
    </button>

    <div class=”collapse navbar-collapse” id=”navbarSupportedContent”>
    <ul class=”navbar-nav mr-auto”>
    <li class=”nav-item active”>
    <a class=”nav-link” href=”/show-data”>Data <span class=”sr-only”>(current)</span></a>
    </li>
    <li class=”nav-item”>
    <a class=”nav-link” href=”/input-data”>Input Data</a>
    </li>
    </ul>
    <form class=”form-inline my-2 my-lg-0″>
    <input class=”form-control mr-sm-2″ type=”search” placeholder=”Search” aria-label=”Search”>
    <button class=”btn btn-outline-success my-2 my-sm-0″ type=”submit”>Search</button>
    </form>
    </div>
    </nav>

    <div class=”container”>
    @yield(‘content’)
    </div>

    </body>
    </html>

  6. buat file kontennya dengan nama data.blade.php, masih di dalam folder resources/views.
    copy script di bawah ini, @extends(‘template’) berarti file data.blade.php ini akan mengakses file template di folder yang sama, script di dalam @section(‘content’) akan mengisi @yield(‘content’) di file template, @section diakhiri dengan script @endsection.

    @extends(‘template’)

    @section(‘content’)
    <table class=”table”>
    <thead>
    <tr>
    <th scope=”col”>#</th>
    <th scope=”col”>First</th>
    <th scope=”col”>Last</th>
    <th scope=”col”>Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <th scope=”row”>1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
    </tr>
    <tr>
    <th scope=”row”>2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@fat</td>
    </tr>
    <tr>
    <th scope=”row”>3</th>
    <td>Larry</td>
    <td>the Bird</td>
    <td>@twitter</td>
    </tr>
    </tbody>
    </table>
    @endsection

  7. sekarang kita akan membuat file konten yang kedua dengan nama inputdata.blade.php dan masih di folder resources/views, penjelasannya sama dengan poin sebelumnya, copy script di bawah ini :@extends(‘template’)@section(‘content’)
    <form>
    <div class=”form-group”>
    <label for=”exampleInputEmail1″>Email address</label>
    <input type=”email” class=”form-control” id=”exampleInputEmail1″ aria-describedby=”emailHelp” placeholder=”Enter email”>
    <small id=”emailHelp” class=”form-text text-muted”>We’ll never share your email with anyone else.</small>
    </div>
    <div class=”form-group”>
    <label for=”exampleInputPassword1″>Password</label>
    <input type=”password” class=”form-control” id=”exampleInputPassword1″ placeholder=”Password”>
    </div>
    <div class=”form-group form-check”>
    <input type=”checkbox” class=”form-check-input” id=”exampleCheck1″>
    <label class=”form-check-label” for=”exampleCheck1″>Check me out</label>
    </div>
    <button type=”submit” class=”btn btn-primary”>Submit</button>
    </form>
    @endsection
  8. Route, Controller dan View telah kita buat, saatnya untuk mencoba menjalankan route yang telah dibuat di file web.php pada folder routes, ketikkan localhost:8000/show-data atau localhost:8000/input-data di browser

Hasilnya pada route /input-data

Hasil pada route /show-data

Sekian untuk pembahasan Layouting di Laravel, semoga bermanfaat, tutorial berikutnya kita akan membahas input dan retrieving data.

Leave a Reply

Your email address will not be published. Required fields are marked *