View

Latihan praktik

Latihan layout & section Buat file layout di resoureces/views/layouts/app.blade.php lalu isikan kode berikut:

12345678910111213141516171819202122<html>
 <head>
   <title>App Name - @yield('title')</title>

   <!-- BOOTSTRAP CSS -->
   <link
     rel="stylesheet"
     href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
     integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
     crossorigin="anonymous"
   />
 </head>
 <body>
   @section('navbar') Navbar dari Layout
   <hr />
   @show

   <div class="container">
     @yield('content')
   </div>
 </body>
</html>

Setelah itu buat file view yang akan menggunakan layout di atas pada resources/views/child.blade.php dan isikan kode berikut:

12345@extends("layouts.app")

@section("title")
    Aplikasi Toko Online
@endsection

@section("content") Konten dari child view @endsection

1234567891011
Setelah itu buka file `routes/web.php` dan cukup tambahkan route view pada route group "latihan" yang pernah kita buat pada praktik bab Eloquent & Model.

```php
Route::group(["prefix" => "latihan"], function(){
    // KODE KODE ROUTE SEBELUMNYA
    // ......

    // Tambahkan ini
    Route::view("layouts", "child");
});

Dengan route tersebut maka kini kita bisa mengakses halaman http://toko-online.test/latihan/layouts dan kamu akan melihat konten yang berasal dari view resources/views/layouts/app.blade.php dan konten dari resources/views/child.blade.php.

Jika kamu sudah berhasil menampilkannya maka ini adalah bukti bahwa resources/views/child.blade.php menggunakan layouts resources/views/layouts/app.blade.php dan mengisi section yang disediakan di layouts yaitu title dan content.

Latihan component
- Buat file view yang akan kita gunakan sebagai component pada path resources/views/alert.blade.php lalu isikan kode berikut ini:
```
123<div class="alert alert-warning">
{{$slot}}
</div>
```
- Buka kembali file child.blade.php lalu kita tambahkan kode untuk menggunakan component alert yang baru kita buat
```
123@component("alert")
Alert - Latihan berhasil
@endcomponent
```
  Sehingga jika kamu buka kembali http://toko-online.test/latihan/layouts maka kamu akan menjumpai alert telah berhasil ditampilkan seperti ini:
  Tapi tunggu dulu, alert tersebut selalu menampilkan warna kuning atau type warning dari bootstrap. Gimana caranya kalo kita ingin mengganti ke type lain misalnya "success". Mari kita ubah kode component kita supaya support fitur tersebut.
- Buat component alert dapat diubah tipe alertnya. Buka file alert.blade.php lalu ubah kodenya menjadi seperti ini:
```
123456789@if(isset($type))
<div class="alert alert-{{$type}}">
{{$slot}}
</div>
@else
<div class="alert alert-warning">
{{$slot}}
</div>
@endif
```
  Penjelasan Kode: Kini kita memperkenalkan variabel tambahan yaitu \$type. Variabel ini bisa digunakan nantinya oleh child.blade.php seperti ini:
```
123@component("alert", ["type"=>"success"])
 // ...
@endcomponent
```
- Ubah kembali file child.blade.php sehingga memanfaatkan component alert untuk membuat alert success seperti ini:
```
12345@extends("layouts.app")

@section("title")
 Aplikasi Toko Online
@endsection
```
  @section("content") @component("alert", ["type"=>"success"]) Alert - Latihan berhasil @endcomponent Konten dari child view @endsection
```
12345

Lalu buka kembali `http://toko-online.test/latihan/layouts` maka kini warna alert akan berubah menjadi hijau.

![alert-success](images/laravel/latihan-component-2.png?centerme)
```
Dengan demikian kini kita bisa menggunakan component alert di view manapun yang kita inginkan, dan kita bisa menyesuaikan tipe alertnya "success", "warning", "info" atau "danger" tanpa perlu membuat component sendiri untuk masing-masing tipe. Component merupakan cara yang baik untuk membuat view yang bisa digunakan berulangkali.
Latihan data pagination
Pada bab Eloquent dan Model kita telah belajar tentang melakukan pagination menggunakan model dengan fungsi simplePaginate() dan paginate(). Di situ juga telah dijelaskan perbedaan keduanya. Nah sekarang kita akan belajar untuk menampilkan pagination di view.
- Kita akan melanjutkan latihan praktik menggunakan CategoryController dan view kategori/index.
- Buka CategoryController dan pastikan action index memiliki kode berikut:
```
1234567public function index(){

 $daftar_kategori = \App\Category::all();

 return view("kategori.index", ["daftar_kategori" => $daftar_kategori]);

}
```
- Setelah itu buka view resources/views/kategori/index.blade.php dan ubah kodenya agar menjadi seperti ini:
```
123456789101112 @extends("layouts.app")

 @section("content")

     <ul>
         @foreach($daftar_kategori as $kategori)
             <li>{{ $kategori->name }}</li>
             <br/>
         @endforeach
     </ul>

 @endsection
```
  Penjelasan Kode: Kita kembali menggunakan layout app ("layouts.app") yang terletak di resources/views/layouts/app.blade.php lalu mengisi section content dengan looping variable $daftar_kategori yang dikirim oleh action index di CategoryController untuk menampilkan masing-masing nama kategori.
  Jika kamu akses kembali http://toko-online.test/latihan/kategori/all maka kamu akan menjumpai tampilan seperti ini:
- Selanjutnya kita ingin menampilkan per halaman adalah 3 item. Maka ubah kembali action index pada CategoryController menjadi seperti ini:
```
12345public function index(){
    $daftar_kategori = \App\Category::paginate(3);

    return view("kategori.index", ["daftar_kategori" => $daftar_kategori]);
}
```
  Penjelasan Kode: Kita mengubah \App\Category::all() menjadi \App\Category::paginate(3) untuk menampilkan 3 item kategori sekali tampil (per halaman)
  Buka kembali http://toko-online.test/latihan/kategori/all kamu kini hanya melihat 3 kategori teratas seperti ini:
- Nah kini kita ingin menampilkan link pagination di view kita. Buka file resources/views/kategori/index.blade.php dan tambahkan kode untuk menampilkan pagination sehingga secara keseluruhan kode viewnya menjadi seperti ini:
```
12345678910111213141516    @extends("layouts.app")

    @section("content")

    <ul>
        @foreach($daftar_kategori as $kategori)
            <li>{{ $kategori->name }}</li>
            <br/>
        @endforeach
    </ul>

    <hr>
    
    {{$daftar_kategori->links()}}

    @endsection
```
Dengan kode di atas maka jika kamu buka kembali http://toko-online.test/latihan/kategori/all kamu akan memiliki link pagination seperti ini:
Dan kamu boleh mengeklik ke halaman 2 atau 3 semuanya sudah berfungsi! Keren!