# Cara Menggunakan Blade Laravel

<figure><img src="https://3397141630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVUQUm1GVUT3pDnRHmDRU%2Fuploads%2Fgc52RpYwV06Ze30fs9vY%2Fimage.png?alt=media&#x26;token=5d5c85f5-55c4-4c38-b0c0-2c23cbe37659" alt=""><figcaption></figcaption></figure>

Apa itu Blade? kenapa harus menggunakan Blade ?

ya simple aja karena udah ada fitur yang disediakan oleh Laravel kenapa ga kita pakai, jadi setiap view yang akan kita buat untuk penamaan filenya harus menggunakan .blade.php oke lanjut..

Di Laravel sendiri konsep templating nya seperti ini:

Buat folder pada view dengan nama admin atau bebas karna disini saya mau buat template untuk admin jadi agar dinamis saya buat folder dengan nama admin.

Nah didalam folder admin kita buat folder baru lagi dengan nama layouts setelah itu kita buat file dengan nama app.blade.php, nah didalam file ini yang akan kita jadikan master dari template yang akan kita gunakan. Contohnya seperti ini:

![](https://3397141630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVUQUm1GVUT3pDnRHmDRU%2Fuploads%2F0yGpbBWUl1COrIwlBZVD%2Fimage.png?alt=media\&token=ad7c00d0-0611-4592-a463-49abe912a04c)

Lalu didalam app.blade.php kita copycat semua template html sebagai master, setelah itu dipecah untuk membuat content dengan menggunakan yield - section, sbb:

```html
<div class="wrapper">
        @include('admin.layouts.navbar')
        @include('admin.layouts.sidebar')
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <div class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <h1 class="m-0 text-dark">@yield('subtitle')</h1>
                        </div><!-- /.col -->
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-right">
                                <li class="breadcrumb-item"><a href="#">Home</a></li>
                                <li class="breadcrumb-item active">@yield('subtitle')</li>
                            </ol>
                        </div><!-- /.col -->
                    </div><!-- /.row -->
                </div><!-- /.container-fluid -->
            </div>
            <!-- /.content-header -->

            <!-- Main content -->
            <div class="content">
                <div class="container-fluid">

                    @yield('content')

                    <!-- /.row -->
                </div><!-- /.container-fluid -->
            </div>
            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->
    </div>
    <!-- ./wrapper -->
```

Selanjutnya buat content diluar folder layouts namanya bebas, disini saya pakai blog.blade.php, kemudian saya isi didalamnya dengan script seperti ini

```html
@extends('admin.layouts.app')
@section('title', 'Post Page')
@section('content')
        <a href="{{ route('form.blog') }}" class="nav-link">
            <button type="submit" class="btn btn-primary">Add New Post</button>
        </a>
        <div class="container">
        <div class="card">
            <div class="card-header">
                <div class="card-tools">
                    <div class="input-group input-group-sm" style="width: 150px;">
                        <input type="text" name="table_search" class="form-control float-right" placeholder="Search">
                        <div class="input-group-append">
                            <button type="submit" class="btn btn-default"><i class="fas fa-search"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
@endsection
```

bisa dicustom sendiri sesuai kebutuhan ya

Sekian penjelasan dari saya jika masih ada yang kurang boleh ditanyakan dikolom komentar, Gomawo^-^