Belajar Laravel Bagian 4: Sistem Templating Blade di Laravel

Setelah belajar tentang Model, View, Controller di seri belajar Laravel bagian 3, selanjutnya kita akan membahas tentang sistem templating di laravel.

Daftar Isi hide

1 Apa itu Blade Templating

2 Bagian Blade Templating

3 Demo membuat template dinamis di Laravel

4 Catatan Blade Templating

Pada framework Laravel, dikenal istilah blade templating yang berfungsi sebagai default template. Dalam seri belajar Laravel bagian 4 ini, kami akan membahas secara detail tentang apa itu blade templating, fungsinya dan demo pembuatannya.

Apa itu Blade Templating

Blade templating adalah sistem template bawaan dari Laravel yang memungkinkan Anda untuk membuat tampilan web dengan cara yang lebih rapi dan terstruktur.

Dengan Blade, Anda bisa membuat bagian-bagian dari halaman web, seperti header atau footer, yang bisa digunakan kembali di banyak halaman tanpa perlu menulis ulang kode. Tentunya, hal ini membuat proses pengembangan web lebih cepat dan mudah.

Blade juga menyediakan fitur sederhana untuk menggabungkan logika PHP dengan HTML, seperti menampilkan data dari database atau memeriksa kondisi tertentu, menggunakan sintaks yang mudah dibaca dan dipahami.

Bagian Blade Templating

Selanjutnya dalam seri belajar laravel bagian 4, kita akan belajar bagian-bagian dari blade templating yang perlu Anda pahami. Berikut diantaranya:

1. Membuat File Blade

Blade templating digunakan untuk membuat tampilan dinamis di Laravel. Dengan ekstensi file .blade.php, Anda akan menyimpan file blade di dalam direktori resources/view.

2. Sintaks dasar

‘{{ }}’ digunakan untuk mencetak data yang diproses oleh Laravel.

<h1>{{ $judul }}</h1>

“@” digunakan untuk menginstruksikan perintah Blade.

@if ($user)
    <p>Selamat datang, {{ $user->name }}</p>
@else
    <p>Selamat datang, Guest</p>
@endif

3. Blade directative

@extends: digunakan untuk mewariskan layout.
@section: digunakan untuk mendefinisikan bagian konten.
@yield: digunakan untuk menampilkan konten tertentu dari section
@include: digunakan untuk menyertakan file blade lain.

Demo membuat template dinamis di Laravel

Saat membuat website atau aplikasi berbasis web, kita perlu membuat tampilannya dinamis. Dengan begitu, jika ingin melakukan perubahan kecil pada satu bagian halaman, kita tidak perlu mengubah seluruh file. Cukup melakukan perubahan pada file utama atau template master saja.

Dalam demo ini, kita akan membuat halaman blog yang memiliki beberapa halaman, seperti Homepage, Tentang, dan Kontak.

1. Membuat route Blog

Pertama yang harus dilakukan adalah membuat route blog terlebih dahulu. Silakan edit file routes\web.php dengan menambahkan file berikut:

use App\Http\Controllers\BlogController;

// Route untuk menampilkan data Blog
Route::get('/blog', [BlogController::class, 'index']);
Route::get('/blog/tentang', [BlogController::class, 'tentang']);
Route::get('/blog/kontak', [BlogController::class, 'kontak']);

Penjelasan dari script diatas adalah :

Saat kita mengakses /blog, maka yang akan dikerjakan sistem adalah menjalankan method index yang ada di dalam controller BlogController.
Saat kita mengakses /blog/tentang, maka yang akan dikerjakan sistem adalah menjalankan method tentang yang ada di dalam controller BlogController.
Saat kita mengakses /blog/kontak, maka yang akan dikerjakan sistem adalah menjalankan method kontak yang ada didalam controller BlogController.

Sehingga isi file routes\web.php selengkapnya sekarang menjadi:

<?php

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

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/

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

Route::get('halo', function () {
	return "Hello World. Selamat datang halaman Tutorial Belajar Laravel Serie 1";
});

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

// Route untuk menampilkan data siswa
Route::get('/siswa', [SiswaController::class, 'index']);

// Route untuk menampilkan data Blog
Route::get('/blog', [BlogController::class, 'index']);
Route::get('/blog/tentang', [BlogController::class, 'tentang']);
Route::get('/blog/kontak', [BlogController::class, 'kontak']);

2. Membuat Controller BlogController

Sebagaimana yang telah dipelajari sebelumnya, untuk membuat controller di Laravel bisa dilakukan dengan perintah artisan. Silakan jalankan perintah berikut.

php artisan make:controller BlogController

Screenshot saat menjalankan perintahnya dari terminal:

php artisan membuat controller - Belajar Laravel Bagian 4

3. Edit File BlogController.php

Langkah selanjutnya, silakan edit file BlogController.php yang ada di app\Http\Controllers\BlogController.php.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class BlogController extends Controller
{
    public function index(){
		return view('blog.index');
	}
 
	public function tentang(){
		return view('blog.tentang');
	}
 
	public function kontak(){
		return view('blog.kontak');
	}
}

Keterangan syntax:

Method index memanggil view blog.index
Method tentang memanggil view blog.tentang
Method kontak memanggil view blog.kontak

4. Membuat Template Master yang akan menjadi induk dari tampilan

Silakan buat file dengan nama master.blade.php yang berada di path /resources/views/master.blade.php.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Blog')</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #0c6af3;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
        nav ul {
            list-style: none;
            padding: 0;
        }
        nav ul li {
            display: inline;
            margin: 0 15px;
        }
        nav ul li a {
            color: #fff;
            text-decoration: none;
        }
        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        footer {
            text-align: center;
            padding: 10px;
            background-color: #0c6af3;
            color: #fff;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    @include('blog.header')

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

    @include('blog.footer')
</body>
</html>

Keterangan:

Template master.blade.php ini menjadi induk dari template dinamis yang dibuat pada contoh ini. Template master ini merupakan isi tampilan utama dari halaman blog yang mana akan digunakan di seluruh halaman blog nantinya.

Selanjutnya, mari membuat bagian header, footer, about, kontak, sesuai yang diperlukan.

5. Membuat Header

Silakan buat file dengan nama header.blade.php yang berada di path /resources/views/header.blade.php.

<header>
    <h1>My Blog</h1>
    <nav>
        <ul>
            <li><a href="/blog">Home</a></li>
            <li><a href="/blog/tentang">Tentang</a></li>
            <li><a href="/blog/kontak">Kontak</a></li>
        </ul>
    </nav>
</header>

6. Membuat Footer

Silakan buat file dengan nama footer.blade.php yang berada di path /resources/views/footer.blade.php.

<footer>
    <p>&copy; 2024 My Blog. All rights reserved.</p>
</footer>

7. Membuat file Index

Silakan buat file dengan nama index.blade.php yang berada di path /resources/views/index.blade.php.

@extends('blog.master')

@section('title', 'Blog')

@section('content')
    <h2>Selamat Datang di Blog Kami</h2>
    <p>Ini adalah halaman utama blog</p>

    <article>
        <h3>Blog Post Judul 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut elit vel lorem scelerisque pretium.</p>
    </article>

    <article>
        <h3>Blog Post Judul 2</h3>
        <p>Curabitur tincidunt, ligula eu dictum vulputate, magna nulla luctus enim, at aliquet justo turpis in nulla.</p>
    </article>
@endsection

8. Membuat file Tentang

Silakan buat file dengan nama tentang.blade.php yang berada di path /resources/views/tentang.blade.php.

<!-- Menghubungkan dengan view template master -->
@extends('blog.master')
 
<!-- isi bagian judul halaman -->
<!-- cara penulisan isi section yang pendek -->
@section('title', 'Halaman Tentang')
 
 
<!-- isi bagian konten -->
<!-- cara penulisan isi section yang panjang -->
@section('content')
 
	<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

9. Membuat file Kontak

Silakan buat file dengan nama kontak.blade.php yang berada di path /resources/views/kontak.blade.php.

<!-- Menghubungkan dengan view template master -->
@extends('blog.master')
 
<!-- isi bagian judul halaman -->
<!-- cara penulisan isi section yang pendek -->
@section('title', 'Halaman Kontak')
 
 
<!-- isi bagian konten -->
<!-- cara penulisan isi section yang panjang -->
@section('content')
 
	<p>Ini Adalah Halaman Kontak</p>
	
	<table border="1">
		<tr>
			<td>Email</td>
			<td>:</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Hp</td>
			<td>:</td>
			<td>085-123-123-123</td>
		</tr>
	</table>
 
@endsection

Untuk melihat hasilnya, silakan jalankan perintah berikut:

php artisan serve

Test Akses

Akses halaman blog di url http://127.0.0.1:8000/blog

Klik menu Tentang maka akan tampil

Klik menu Kontak maka akan tampil.

Sampai disini, tentu Anda sudah mengetahui pentingnya membuat halaman dinamis pada website dengan memanfaatkan fitur blade dari Laravel ini.

Catatan Blade Templating

Dengan menggunakan Blade Templating, jika Anda ingin mengubah tampilan, misalnya dari warna biru ke warna lain, cukup edit file master.blade.php. Perubahan ini akan otomatis diterapkan ke semua halaman, tanpa perlu mengedit setiap halaman satu per satu.

Hal yang sama berlaku jika Anda ingin mengubah bagian header atau footer. Cukup ubah pada file yang sesuai, dan perubahan tersebut akan langsung berlaku untuk semua halaman tanpa harus mengeditnya satu per satu.

Demikian seri belajar Laravel bagian 4 tentang sistem templating di Laravel. Dengan menggunakan cara ini, Anda bisa membuat halaman website yang dinamis dan lebih cepat. Ikuti terus seri belajar laravel bagian 5 yang akan kami publish dalam beberapa waktu mendatang. Semoga bermanfaat.