Blade Template

BIKIN BALIK

6 Jul, 2023

Blade adalah mesin templating yang sederhana namun kuat yang disertakan dengan Laravel.

Tidak seperti beberapa mesin templating PHP, Blade tidak membatasi anda untuk menggunakan kode PHP biasa di dalam templat Anda.

Faktanya, semua templat Blade dikompilasi ke dalam kode PHP biasa dan di-cache hingga dimodifikasi, yang berarti Blade pada dasarnya tidak membebani proses pada aplikasi Anda.

Menggabungkan Routing, Controller, dan View

Flow

Browser 🠊 Link 🠊 Routing 🠊 Controller View

Sebelum implementasi blade engine di laravel, kita akan membuat tampilan web sederhana dengan digabungkan dengan routing, controller dan view.

Langkah Pertama: Membuat Controller Baru Pada Laravel

Saat kita menggunakan laravel kita tidak lagi membuat code php dari nol, dengan menggunakan fitur artisan yang sudah ada di laravel jadi terbantu.

Untuk membuat controller baru kita bisa menggunakan perintah : php artisan make:controller nama_controller , contoh disini untuk nama yaitu; HalamanController .

Membuat Controller Baru

Langkah Kedua: Menghubungkan HalamanController dengan View

Setelah selesai membuat Controller, sekarang kita akan menghubungkan HalamanController dengan View Halaman .

Masukan Function index, tentang, dan kontak di HalamanController
Masuk Resource 🠊 View 🠊 Buat Folder Halaman dan file dengan nama index.blade.php
Isi index.blade.php dengan html sederhana seperti h1, p .
Untuk jumlah lorem Ipsum pada tag p adalah 20, bisa mengetikan di visual studio lorem20

Menghubungkan Controller dengan View

Langkah Ketiga: Menghubungkan Route dengan HalamanController

Kita Lanjut Menghubungkan Route dengan ControllerHalaman , masukan code laravel php Route:get('/', [HalamanController::class], 'index'); di bagian paling bawah.

Seblumnya route default dari laravel comment atau // terlebih dahulu di belakang route agar tidak conflict yang mengarah ke welcome.

Artinya ketika ada yang mengakses link laravel di browser http://127.0.0.1 atau http://127.0.0.1/ diarahkan ke index.blade.php yang berada di folder views 🠊 halaman.

Menghubungkan Route dengan HalamanController

Langkah Kempat: Test Mengkases di Browser

Berikut Hasil dari mengakses http://127.0.0.1 atau http://127.0.0.1/ di browser

Studi Kasus Menambah Halaman Kontak dan Tentang

Coba teman" pecahkan studi kasus menambah halaman kontak dan tentang baru, disini penulis sudah memberikan source code laravel, tinggal melakukan implementasi.

Fokus pada Route dan Controller di persegi panjang merah,

Route

Controller

View kontak dan tentang

Goals dari pembuatan halaman kontak dan tentang baru pada laravel, bisa implementasi route, controller, view sampai ke perbaikan saat ada error dan.

Halaman Kontak dan Halaman Tentang bisa di akses di browser.

Halaman Kontak

Halaman Tentang

Implementasi Blade Template

Saat kita melihat script html di index.blade.php, kontak.blade.php dan halaman.blade.php , ada html yang berulang seperti <html></html, <head></head>, dan <body></body> dan yang berbeda cuma di h1 dan p/ paragraf.

Dengan adanya Blade Template Engine kita bisa membuat satu <html></html>, <head></head>, dan <body></body>.

Bisa digunakan beberapa halaman contohnya index.blade.php, kontak.balde.php dan tentang.blade.php .

Langkah Pertama : Membuat HTML, HEAD, dan BODY Utama sebagai Layouting

Sebelumnya buat terlebih dahulu folder dengan nama layout di dalam folder view, isi folder layout dengan file aplikasi.blade.php sebagai utama halaman kontak dan tentang.

@Yield('nama_bebas') adalah fungsi yang digunakan di Laravel untuk mendefinisikan bagian tertentu dalam tata letak dan secara permanen digunakan untuk mengambil konten dari halaman anak dan mentransfernya ke halaman master.

Halaman Master Layouting

@extends('lokasi_halaman_layouting_master') memungkinkan anda untuk "memperluas" template, yang mendefinisikan bagiannya sendiri, dll. Templat yang dapat Anda perluas akan mendefinisikan bagiannya sendiri menggunakan @yield , yang kemudian dapat Anda masukkan ke dalam file tampilan Anda.

@section('nama_yield') menyuntikkan tata letak konten dari tata letak extended blade dan menampilkannya di child blade, konten dari bagian ini akan ditampilkan dalam layout menggunakan arahan @yield dan @parent akan digantikan oleh konten layout saat tampilan di-render.

Untuk halaman kontak dan halaman tentang sama seperti halaman depan yang membedakan isi dari tiap-tiap halaman.

Halaman Depan

Source Code Halaman Depan

Menampilkan Data di View dari Controller

Sebelumnya kita sudah mencoba bagaimana cara membuat halaman dan meroutekan dari controller ke view.

Sekarang kita akan menampilkan data dari controller ke view dan tidak menggunakan database untuk mengambil datanya, hanya menggunakan variable dan array sederhana.

Cara Pertama Menggunakan Variable

    
    $judul = 'Ini Adalah Halaman Kontak';
    return view("halaman/kontak")->with('halaman_judul', $judul);

menampilkan data di blade dari controller

Untuk menampilkan data di kontak cukup masukan {{ $halama_judul }} dimana variable ini menangkap dari variable judul dari controller.

Cara Kedua Menggunakan Array

    
    $data = [
        'judul' => 'Ini Adalah Halaman Kontak',
        'kontak' => [
            'email' => 'dosqangga45@gmail.com',
            'website' => 'https://www.bikinbalik.com'
            ]
    ];
    return view("halaman/kontak")->with($data);

menangkap data dari controller variable array

Tujuan dari menggunakan variable dan array, bisa dan paham bagaimana cara implementasikan saat pembuatan sebuah aplikasi web menggunakan framework laravel.