Blade Templates – Citra Air Nusantara (CAN) https://citanusantara.id Inovasi tanpa batas, solusi cerdas Wed, 20 Jul 2022 23:54:38 +0000 en-US hourly 1 https://wordpress.org/?v=7.0 https://citanusantara.id/wp-content/uploads/2024/08/cropped-Icon-CAN-32x32.png Blade Templates – Citra Air Nusantara (CAN) https://citanusantara.id 32 32 236061052 Mengenal Blade Templates Pada Laravel #belajarlaravel-4 https://citanusantara.id/2022/07/20/mengenal-blade-templates-pada-laravel-belajarlaravel-4/ Wed, 20 Jul 2022 23:54:38 +0000 https://abdulrahmann.com/?p=850 Blade adalah mesin templating sederhana namun kuat yang disertakan dengan Laravel. Tidak seperti beberapa mesin templating PHP, Blade tidak membatasi Anda untuk menggunakan kode PHP biasa di templat Anda. Faktanya, semua template Blade dikompilasi ke dalam kode PHP biasa dan di-cache sampai dimodifikasi, yang berarti Blade pada dasarnya menambahkan nol overhead ke aplikasi Anda. File template blade menggunakan ekstensi file .blade.php dan biasanya disimpan di direktori resources/views.

Tampilan blade dapat dikembalikan dari rute atau pengontrol menggunakan bantuan tampilan global. Tentu saja, seperti yang disebutkan dalam dokumentasi tentang tampilan, data dapat diteruskan ke tampilan Blade menggunakan argumen kedua pembantu tampilan:

Route::get('/', function () {
    return view('greeting', ['name' => 'Finn']);
});

Anda dapat menampilkan isi dari variabel nama seperti:

Hello, {{ $name }}

Extending A Layout

Saat mendefinisikan child view, gunakan perintah @extends Blade untuk menentukan tata letak mana yang harus “diwarisi” oleh child view. Tampilan yang memperluas tata letak Blade dapat menyuntikkan konten ke bagian tata letak menggunakan arahan @section. Ingat, konten bagian ini akan ditampilkan dalam tata letak menggunakan @yield

Selanjutnya kita akan membuat tampilan dengan menggunakan framework css yaitu Bootstrap 5, silahkan download pada link berikut DOWNLOAD letakan file yang sudah di download pada direktori public/bootstrap5

File Bootsrap5

Membuat halaman main.blade.php pada folder layouts

Selanjutnya silahkan buat folder layouts yang isinya adalah file main.blade.php

Struktur Folder Layouts yang isinya main.blade.pphp

Tujuan dari halaman main ini adalah untuk menjadi halaman utama yang bisa kita @extend untuk halaman @yield. Isi dari file main.blade.php adalah 

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> ARP | {{ $title }} </title>
    <link rel="stylesheet" type="text/css" href=" {{ ('bootstrap5/css/bootstrap.min.css') }} ">

</head>

<body>
    
    <nav class="navbar navbar-expand-lg navbar-dark bg-secondary ">
    <div class="container">
        <a class="navbar-brand" href="/">ARP</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link {{ ($title === "Home") ? 'active' : '' }}" aria-current="page" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ ($title === "About") ? 'active' : '' }}" href="/about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ ($title === "Buku") ? 'active' : '' }}" href="/buku">Buku</a>
                </li>
                
        </div>
    </div>
</nav>

    <div class="container mt-4">
        @yield('container')
    </div>

    <script src=" {{ ('boostrap5/js/bootstrap.min.js') }} "></script>

</body>

</html>

Kemudian pada halaman home.blade.php , about.blade.php dan posts.blade.php adalah sebagai berikut

@extends('layouts.main')

@section('container')
<h1>Halaman Home</h1>
@endsection

@extends('layouts.main')

@section('container')
<h1>Halaman About</h1>
@endsection

@extends('layouts.main')

@section('container')
<h1>Halaman Buku</h1>
@endsection

Selanjutnya agar code terlihat lebih rapi dan kita bisa bongkar pasang sesuai dengan keinginan kita, kita akan memisahkan navbar nya menjadi halaman tersendiri dengan model partial. Langkah awal silahkan membuat folder partials pada views lalu buat halaman navbar.blade.php yang isinya adalah :

<nav class="navbar navbar-expand-lg navbar-dark bg-secondary ">
    <div class="container">
        <a class="navbar-brand" href="/">ARP</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link {{ ($title === "Home") ? 'active' : '' }}" aria-current="page" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ ($title === "About") ? 'active' : '' }}" href="/about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ ($title === "Blog") ? 'active' : '' }}" href="/blog">Blog</a>
                </li>
                
        </div>
    </div>
</nav>

Selanjutnya hapus code html navbar pada halaman main.blade.php dan ganti dengan code berikut :

@include('partials.navbar')

Code diatas artinya kita akan memanggil file navbar.blade.php pada folder partials yang ada pada views. Hasil akhir code pada halaman main.blade.php adalah sebagai berikut :

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> ARP | {{ $title }} </title>
    
    <link rel="stylesheet" href=" {{ asset('bootstrap5/css/bootstrap.min.css') }} " />
    <link rel="stylesheet" href=" {{ asset('bootstrap5/css/font-icons.css') }} " />
    <link rel="stylesheet" href=" {{ asset('bootstrap5/css/style.css') }} " />
    <link rel="stylesheet" href=" {{ asset('bootstrap5/css/custom.css') }} " />
    <link rel="stylesheet" href=" {{ asset('bootstrap5/css/colors/pink.css') }} " />


</head>

<body>
    
    @include('partials.navbar')

    <div class="container mt-4">
        @yield('container')
    </div>

    <script src=" {{ asset('boostrap5/js/bootstrap.min.js') }} "></script>

</body>

</html>

Dan untuk tampilan dari website yang kita buat adalah :

Hasil akhir membuat menu navigasi di laravel 9
]]> 850