Tutorial Laravel 11 : #7 Template Blade Laravel

Pengertian View dan Blade

Laravel View dan Blade merupakan salah fitur dari Laravel yang memudahkan pengembang web untuk memisahkan tampilan dengan logic.

Views adalah representasi visual dari suatu halaman web yang pada umumnya bertugas untuk menampilkan data yang diterima oleh Controller dari Model.  Dalam hal ini Views adalah bagian dari sistem Laravel di mana HTML dihasilkan dan kemudian ditampilkan di layar pengguna. Penggunaan Views sangat membantu pengembangan web khususnya untuk merawat dan memberikan tambahan fungsi, karena memisahkan logic atau program utama dengan bagian tampilan.

Blade adalah fitur yang disediakan Laravel untuk proses templating sederhana namun sangat bermanfaat dalam proses pengembangan tampilan halaman web. Tidak seperti fitur templating PHP populer lainnya, Blade tidak membatasi pemrogram untuk menggunakan kode PHP biasa dalam membuat kode untuk tampilan. Semua tampilan Blade dikompilasi ke dalam kode PHP biasa dan kemudian disimpan dalam cache hingga diubah, yang berarti Blade pada dasarnya tidak menambahkan beban atau overhead pada saat aplikasi dijalankan.

File tampilan blade menggunakan ekstensi file .blade.php dan biasanya disimpan di direktori resources/views. Dalam hal ini Blade pada Laravel menggunakan basis template inheritance dan sections.

Salah satu fungsi dari Laravel Blade templating adalah penggunaan layout, agar tampilan yang berulang misalnya header, footer, sidebar dan sebagainya tidak perlu dibuat berkali-kali sehingga rawan inkonsistensi. Pada umumnya layout ditempatkan dalam sebuah folder yang bernama layout dalam folder views, namun demikian programmer tidak dibatasi apabila ingin menggunakan nama lain.

 

 

Membuat Template Dinamis Dengan Template Blade Laravel

Di sini kita akan mencoba membuat 3 buah halaman website dinamis sederhana dan belum membuat pengolahan data dan penerapan logika yang rumit.

Tahap pertama jika belum ada projectnya kita buat dulu project laravelnya, untuk tahapan instalasinya dilahkan baca materi sebelumnya di https://agussuratna.net/2025/01/tutorial-laravel-11-cara-install-laravel-di-windows/. Pada contoh kali ini saya menggunakan project laravel yang sudah ada yaitu latihan_laravel.

Karena route-nya akan kita jalankan pada controller BlogController, sekarang kita buat dulu controller BlogController-nya. Di sini saya membuat controller dengan menggunakan perintah php artisan.

Masuk ke direktori project laravel kita dan ketik :

php artisan make:controller BlogController

 

 

Setelah selesai membuat BlogController.php, kita akan membuat 3 buah halaman web, maka sekarang buat 3 buah route pada latihan_laravel/routes/web.php.

// route blog 
Route::get('/blog', [BlogController::class,'home']);
Route::get('/blog/tentang', [BlogController::class,'tentang']); 
Route::get('/blog/kontak', [BlogController::class,'kontak']);

Jadi route lengkapnya seperti berikut :

<?php

use App\Http\Controllers\BlogController;
use App\Http\Controllers\GuruController;
use App\Http\Controllers\SiswaController;
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

Route::get('/siswa',[SiswaController::class,'siswatampil']);
Route::get('/guru/{nama}',[GuruController::class,'gurutampil']);
Route::get('/formulir',[GuruController::class,'formulir']); 
Route::post('/formulir/proses',[GuruController::class,'proses']);


// route blog 
Route::get('/blog', [BlogController::class,'home']);
Route::get('/blog/tentang', [BlogController::class,'tentang']); 
Route::get('/blog/kontak', [BlogController::class,'kontak']);

Perhatikan route di atas :

• Pada saat kita mengakses route /blog, maka yang akan dijalankan adalah method home() yang ada di dalam controller BlogController.
• Pada saat kita mengakses route /blog/tentang, maka yang akan dijalankan adalah method tentang() yang ada di dalam controller BlogController.
• Pada saat kita mengakses route /blog/kontak, maka yang akan dijalankan adalah method kontak() yang ada di dalam controller BlogController.

sekarang kita buat method home(), method tentang(), method kontak() lengkap dengan pemanggilan view nya masing-masing.

latihan_laravel/app/Http/Controllers/BlogController.php :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class BlogController extends Controller
{
    public function home()
    { 
        return view('v_home'); 
    } 
    
    public function tentang()
    { 
        return view('v_tentang'); 
    } 
    
    public function kontak()
    { 
        return view('v_kontak'); 
    }
}

Perhatikan sintak di atas :

• Method home() memanggil view v_home
• Method tentang() memanggil view v_tentang
• Method kontak() memanggil view v_kontak

Selanjutnya kita akan membuat template master-nya terlebih dulu. Template master yang dimaksud di sini adalah template induknya, dengan cara buat sebuah view baru dengan nama utama.blade.php didalam folder resources/views, atau gunakan sintak :

php artisan make:view utama

 

latihan_laravel/resources/views/utama.blade.php :

<!DOCTYPE html>
<html>
    <head>
        <title>Tutorial Laravel 11 : #7 Template Blade Laravel</title>
    </head>
    
    <body>


        <header>
            <h2>Blog Pertamaku</h2>
            <nav>
                <a href="/blog">HOME</a>
                |
                <a href="/blog/tentang">TENTANG</a>
                |
                <a href="/blog/kontak">KONTAK</a>
            </nav>
        </header>
        <hr/>
        <br/>
        <br/>

        <!-- bagian judul halaman blog -->
        <h3> @yield('judul_halaman') </h3>

        <!-- bagian konten blog -->
        @yield('konten')

        <br/>
        <br/>
        <hr/>
        <footer>
            <p>&copy; <a href="https://agussuratna.net">www.agussuratna.net</a>. 2020</p>
        </footer>
    </body>
</html>

 

utama.blade.php ini kita jadikan sebagai template induk dari template dinamis yang ingin kita buat, dimana pada utama.blade.php ini kita buat segala sesuatu yang tidak berubah-ubah seperti menu, footer dan nama blog nya.

Selanjutnya kita buat semua view-view yang akan dipanggil pada method yang akan kita hubungkan dengan template view utama ini. Buat 3 buah view baru, yaitu view v_home, v_tentang dan v_kontak.

latihan_laravel/resources/views/v_home.blade.php :

<!-- Menghubungkan dengan view template utama -->
@extends('utama')

<!-- isi bagian judul halaman -->
<!-- cara penulisan isi section yang pendek -->
@section('judul_halaman', 'Halaman Home')

<!-- isi bagian konten -->
<!-- cara penulisan isi section yang panjang -->
@section('konten')
    <p>Ini Adalah Halaman Home</p>
    <p>Selamat datang !</p>
@endsection

 

latihan_laravel/resources/views/v_tentang.blade.php :

<!-- Menghubungkan dengan view template utama -->
@extends('utama')

<!-- isi bagian judul halaman -->
<!-- cara penulisan isi section yang pendek -->
@section('judul_halaman', 'Halaman Tentang')

<!-- isi bagian konten -->
<!-- cara penulisan isi section yang panjang -->
@section('konten')
    <p>Ini Adalah Halaman Tentang</p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
@endsection

 

latihan_laravel/resources/views/v_kontak.blade.php :

<!-- Menghubungkan dengan view template utama -->
@extends('utama')

<!-- isi bagian judul halaman -->
<!-- cara penulisan isi section yang pendek -->
@section('judul_halaman', 'Halaman Kontak')

<!-- isi bagian konten -->
<!-- cara penulisan isi section yang panjang -->
@section('konten')
    <p>Ini Adalah Halaman Kontak</p>

    <table border="0">
        <tr>
            <td>Email</td>
            <td>:</td>
            <td>admin@agussuratna.net</td>
        </tr>
        <tr>
            <td>Hp</td>
            <td>:</td>
            <td>08098988888</td>
        </tr>
    </table>
@endsection

 

Penjelasan tentang fungsi-fungsi yang ada pada view v_utama, v_home, v_tentang dan v_kontak di atas.

Pada view utama.blade.php. disana ada fungsi @yield() yang kita buat. Fungsi @yield() berguna untuk bagian-bagian tertentu pada template website dan nama bagiannya bisa kita tulis di dalam parameter fungsi @yield(). Seperti yang sudah dibuat, di sana ada bagian judul_halaman dan bagian konten.

Selanjutnya pada bagian view lainnya, akan kita hubungkan ke template utama.blade.php ini dan tiap-tiap bagian @yield nya kita isi konten nya dari file view-view yang lainnya. Selanjutnya kita buka file home.blade.php.

Dari gambar di atas bisa kita lihat dengan jelas. Pertama pada view v_home kita hubungkan dulu ke view utama dengan menggunakan fungsi @extends. Kemudian semua isi yang ada diantara fungsi @section akan di tampilkan pada bagian fungsi @yield. Begitu juga dengan view v_kontak dan view v_tentang, intinya akan sama saja.

Selanjutnya kita coba akses project kita, jangan lupa mengaktifkannya dulu dengan project laravel kita dengan sintak :

php artisan serve

Kemudian kita akses localhost:8000/blog

Perhatikan pada gambar di atas, pada saat route ‘/blog’ di akses, maka akan dijalankan method home() pada controller BlogController, seperti yang sudah kita set pada route laravel sebelumnya di atas tadi. Kemudian method home() pada controller BlogController akan memanggil view ‘v_home.blade.php’ , begitu juga dengan halaman lainnya.

Selanjutnya kita coba klik pada menu kontak dan tentang :

 

Demikian tutorial tentang Template Blade Laravel pada Laravel 11, selanjutnya kita akan mempelajari teantang CRUD pada Laravel dengan Query Builder.