gociwidey
  • Hosting
  • Indonesia
  • Website
  • Laravel
  • Development
  • Bisnis
No Result
View All Result
gociwidey
  • Hosting
  • Indonesia
  • Website
  • Laravel
  • Development
  • Bisnis
No Result
View All Result
gociwidey
No Result
View All Result
Home Blade

Laravel Blade Template Engine Tutorial Indonesia: Desain Tampilan Website Lebih Cepat

Atticus Finch by Atticus Finch
November 26, 2025
in Blade, Desain, Laravel, Templating, Website
0
Share on FacebookShare on Twitter

Ingin membuat tampilan website yang menarik dan profesional dengan lebih cepat dan efisien? Laravel Blade Template Engine adalah jawabannya! Tutorial ini akan membimbing Anda langkah demi langkah dalam menggunakan Blade, khususnya bagi para developer di Indonesia. Kita akan membahas mulai dari dasar hingga teknik lanjutan, sehingga Anda bisa menguasai Blade dan meningkatkan produktivitas dalam pengembangan web. Mari kita mulai!

1. Apa Itu Laravel Blade Template Engine dan Mengapa Penting? (Pengantar Blade)

Laravel Blade Template Engine adalah sistem templating yang kuat dan sederhana yang disediakan oleh framework Laravel. Bayangkan Blade sebagai alat bantu yang mempermudah Anda dalam memisahkan logika aplikasi (kode PHP) dari tampilan (HTML). Ini sangat penting karena:

  • Kode Lebih Bersih: Dengan Blade, kode HTML dan PHP Anda menjadi lebih terstruktur dan mudah dibaca. Tidak ada lagi campuran kode yang membingungkan.
  • Reusabilitas Kode: Anda dapat membuat template induk (layout) yang berisi struktur dasar website dan kemudian menggunakan template ini untuk halaman-halaman lainnya. Ini sangat menghemat waktu dan tenaga.
  • Keamanan yang Lebih Baik: Blade secara otomatis melakukan escaping (pelolosan) data untuk mencegah serangan XSS (Cross-Site Scripting).
  • Kemudahan Pemeliharaan: Ketika tampilan website terpisah dari logika aplikasi, perubahan pada tampilan tidak akan memengaruhi kode PHP Anda, dan sebaliknya. Ini mempermudah pemeliharaan dan pengembangan website di masa mendatang.
  • Sintaksis yang Mudah Dipelajari: Sintaksis Blade sangat intuitif dan mudah dipelajari, bahkan bagi pemula sekalipun.

Singkatnya, Laravel Blade Template Engine membantu Anda menulis kode yang lebih bersih, aman, mudah dipelihara, dan tentu saja, lebih cepat. Ini adalah skill penting bagi setiap web developer yang menggunakan Laravel di Indonesia.

2. Instalasi dan Konfigurasi Laravel: Persiapan Awal Menggunakan Blade

Sebelum kita menyelam lebih dalam ke Blade, pastikan Anda sudah menginstal dan mengkonfigurasi Laravel dengan benar. Berikut langkah-langkah singkatnya:

Related Post

Hosting Unlimited Bandwidth & Storage di Jakarta: Performa Optimal untuk Website Anda

December 6, 2025

Hosting Unlimited Bandwidth dan Storage di Jakarta: Solusi Terbaik untuk Website Anda

December 6, 2025

Hosting Indonesia dengan Dukungan Pelanggan Terbaik: Review dan Perbandingan

December 5, 2025

Hosting Indonesia dengan Dukungan Pelanggan Terbaik: Panduan Lengkap untuk Bisnis Online Anda

December 4, 2025
  1. Persyaratan Sistem: Pastikan sistem Anda memenuhi persyaratan minimum Laravel, seperti PHP (minimal versi 7.3), Composer, dan beberapa ekstensi PHP yang dibutuhkan. Anda bisa melihat daftar lengkapnya di dokumentasi Laravel.

  2. Instalasi Laravel: Cara paling umum untuk menginstal Laravel adalah menggunakan Composer. Buka terminal atau command prompt Anda dan jalankan perintah berikut:

    composer create-project --prefer-dist laravel/laravel nama-proyek

    Ganti nama-proyek dengan nama proyek yang Anda inginkan.

  3. Konfigurasi Database: Setelah instalasi selesai, atur konfigurasi database Anda. Buka file .env di direktori proyek Anda dan ubah nilai-nilai berikut sesuai dengan detail database Anda:

    DB_CONNECTION=mysql
    DB_HOST=127.0.0.1
    DB_PORT=3306
    DB_DATABASE=nama_database
    DB_USERNAME=nama_pengguna
    DB_PASSWORD=password

    Pastikan database yang Anda tentukan (nama_database) sudah dibuat.

  4. Migrasi Database (Opsional): Jika Anda memiliki migrasi database, jalankan perintah berikut untuk membuat tabel-tabel yang dibutuhkan:

    php artisan migrate
  5. Menjalankan Server Development: Untuk menjalankan server development Laravel, gunakan perintah berikut:

    php artisan serve

    Buka browser Anda dan kunjungi alamat yang ditampilkan (biasanya http://127.0.0.1:8000) untuk melihat halaman default Laravel.

Setelah Laravel terinstal dan berjalan dengan baik, Anda siap untuk mulai menggunakan Laravel Blade Template Engine untuk membuat tampilan website yang menakjubkan.

3. Sintaksis Dasar Blade: Mengenal Direktif dan Variabel

Sintaksis Blade sangat intuitif dan mudah dipelajari. Berikut beberapa direktif dan cara menggunakan variabel yang paling sering digunakan:

  • {{ $variable }}: Menampilkan nilai variabel. Blade secara otomatis melakukan escaping (pelolosan) untuk mencegah serangan XSS. Contoh:

    <h1>Selamat Datang, {{ $nama }}!</h1>

    Jika $nama berisi “John Doe”, maka outputnya akan menjadi:

    <h1>Selamat Datang, John Doe!</h1>
  • {!! $variable !!}: Menampilkan nilai variabel tanpa escaping. Hati-hati! Gunakan ini hanya jika Anda yakin bahwa nilai variabel tersebut aman dan tidak mengandung kode berbahaya. Biasanya digunakan untuk menampilkan HTML yang sudah diformat sebelumnya.

  • @if, @elseif, @else, @endif: Direktif untuk kondisi. Mirip dengan struktur if-else pada PHP. Contoh:

    @if ($level == 'admin')
        <p>Anda memiliki akses penuh.</p>
    @elseif ($level == 'editor')
        <p>Anda memiliki akses terbatas.</p>
    @else
        <p>Anda tidak memiliki akses.</p>
    @endif
  • @foreach, @endforeach: Direktif untuk perulangan. Mirip dengan loop foreach pada PHP. Contoh:

    <ul>
        @foreach ($users as $user)
            <li>{{ $user->name }} - {{ $user->email }}</li>
        @endforeach
    </ul>
  • @for, @endfor: Direktif untuk perulangan dengan indeks.

    <ul>
        @for ($i = 0; $i < count($users); $i++)
            <li>{{ $users[$i]->name }}</li>
        @endfor
    </ul>
  • @while, @endwhile: Direktif untuk perulangan selama kondisi terpenuhi.

  • @include('view.name'): Menyertakan (include) file view lain. Sangat berguna untuk memecah tampilan menjadi bagian-bagian yang lebih kecil dan reusable. Contoh: @include('partials.header') akan menyertakan file resources/views/partials/header.blade.php.

  • @yield('section_name'), @section('section_name'), @endsection: Direktif untuk membuat layout dan section. Akan dijelaskan lebih detail pada bagian selanjutnya.

Ini hanya beberapa contoh direktif dasar Blade. Ada banyak direktif lain yang tersedia, dan Anda bisa membuat direktif kustom sendiri jika diperlukan. Dengan memahami sintaksis dasar ini, Anda sudah bisa mulai membuat tampilan website yang dinamis dan interaktif dengan Laravel Blade Template Engine.

4. Membuat Layout dan Section: Struktur Template yang Reusable

Salah satu fitur terpenting dari Blade adalah kemampuannya untuk membuat layout (template induk) dan section. Ini memungkinkan Anda untuk mendefinisikan struktur dasar website Anda (seperti header, footer, sidebar, dll.) dan kemudian menggunakan struktur ini untuk semua halaman Anda.

Contoh Layout (resources/views/layouts/app.blade.php):

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title') - Website Saya</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}"> <!-- Asumsikan Anda menggunakan Laravel Mix -->
</head>
<body>
    <header>
        @include('partials.header')
    </header>

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

    <footer>
        @include('partials.footer')
    </footer>

    <script src="{{ asset('js/app.js') }}"></script> <!-- Asumsikan Anda menggunakan Laravel Mix -->
</body>
</html>

Penjelasan:

  • @yield('title'): Area di mana judul halaman akan disisipkan.
  • @yield('content'): Area di mana konten utama halaman akan disisipkan.
  • @include('partials.header'): Menyertakan file resources/views/partials/header.blade.php (contoh header website).
  • @include('partials.footer'): Menyertakan file resources/views/partials/footer.blade.php (contoh footer website).
  • {{ asset('css/app.css') }} dan {{ asset('js/app.js') }}: Membantu menghasilkan URL yang benar untuk file CSS dan JavaScript Anda. Asumsikan Anda menggunakan Laravel Mix untuk mengelola asset.

Contoh Halaman yang Menggunakan Layout (resources/views/pages/home.blade.php):

@extends('layouts.app')

@section('title', 'Halaman Beranda')

@section('content')
    <h1>Selamat Datang di Website Saya!</h1>
    <p>Ini adalah halaman beranda.</p>
@endsection

Penjelasan:

  • @extends('layouts.app'): Menentukan bahwa halaman ini menggunakan layout resources/views/layouts/app.blade.php.
  • @section('title', 'Halaman Beranda'): Menentukan judul halaman. Nilai ini akan disisipkan ke dalam @yield('title') pada layout.
  • @section('content') ... @endsection: Menentukan konten utama halaman. Konten ini akan disisipkan ke dalam @yield('content') pada layout.

Dengan menggunakan layout dan section, Anda dapat dengan mudah membuat struktur website yang konsisten dan reusable. Anda hanya perlu mengubah konten pada masing-masing halaman, tanpa perlu mengulang kode HTML yang sama berulang-ulang. Ini sangat meningkatkan efisiensi dan mempermudah pemeliharaan website Anda.

5. Komponen Blade: Membangun UI yang Reusable

Komponen Blade adalah cara lain untuk membuat bagian-bagian UI yang reusable. Mereka mirip dengan partials, tetapi dengan beberapa keuntungan tambahan, seperti atribut dan slot.

Membuat Komponen:

Anda dapat membuat komponen menggunakan perintah Artisan:

php artisan make:component Alert

Ini akan membuat dua file:

  • app/View/Components/Alert.php: Kelas komponen (PHP).
  • resources/views/components/alert.blade.php: Template komponen (Blade).

Contoh Kelas Komponen (app/View/Components/Alert.php):

<?php

namespace AppViewComponents;

use IlluminateViewComponent;

class Alert extends Component
{
    public $type;
    public $message;

    public function __construct($type = 'info', $message = '')
    {
        $this->type = $type;
        $this->message = $message;
    }

    public function render()
    {
        return view('components.alert');
    }
}

Penjelasan:

  • $type dan $message adalah properti yang dapat diakses dari template komponen.
  • Constructor menerima nilai untuk properti-properti ini.
  • render() mengembalikan view yang akan digunakan untuk menampilkan komponen.

Contoh Template Komponen (resources/views/components/alert.blade.php):

<div class="alert alert-{{ $type }}">
    {{ $message }}
</div>

Menggunakan Komponen di View:

<x-alert type="success" message="Operasi berhasil!"></x-alert>
<x-alert type="danger" message="Terjadi kesalahan."></x-alert>

Penjelasan:

  • <x-alert> adalah cara untuk menggunakan komponen Blade.
  • type="success" dan message="Operasi berhasil!" adalah atribut yang diteruskan ke constructor komponen.
  • Nilai-nilai atribut ini dapat diakses dari template komponen menggunakan variabel $type dan $message.

Slot:

Slot memungkinkan Anda untuk menyisipkan konten kustom ke dalam komponen.

Contoh Kelas Komponen dengan Slot (app/View/Components/Card.php):

<?php

namespace AppViewComponents;

use IlluminateViewComponent;

class Card extends Component
{
    public function render()
    {
        return view('components.card');
    }
}

Contoh Template Komponen dengan Slot (resources/views/components/card.blade.php):

<div class="card">
    <div class="card-header">
        {{ $header }}
    </div>
    <div class="card-body">
        {{ $slot }}
    </div>
</div>

Menggunakan Komponen dengan Slot di View:

<x-card>
    <x-slot name="header">
        Judul Kartu
    </x-slot>

    Isi kartu.
</x-card>

Penjelasan:

  • <x-slot name="header"> mendefinisikan slot bernama “header”.
  • Isi antara <x-card> dan </x-card> akan menjadi konten default untuk $slot di template komponen.

Komponen Blade memberikan cara yang kuat dan fleksibel untuk membuat UI yang reusable. Mereka memungkinkan Anda untuk mengenkapsulasi logika dan markup, sehingga kode Anda lebih terstruktur dan mudah dipelihara.

6. Direktif Kustom: Memperluas Fungsionalitas Blade

Jika Anda memiliki kebutuhan khusus yang tidak terpenuhi oleh direktif bawaan Blade, Anda dapat membuat direktif kustom sendiri. Ini memungkinkan Anda untuk memperluas fungsionalitas Blade dan membuat kode Anda lebih ringkas dan mudah dibaca.

Contoh Direktif Kustom untuk Format Tanggal:

Misalkan Anda ingin membuat direktif yang dapat memformat tanggal sesuai dengan format Indonesia.

  1. Daftarkan Direktif di AppServiceProvider:

    Buka app/Providers/AppServiceProvider.php dan tambahkan kode berikut di dalam method boot():

    <?php
    
    namespace AppProviders;
    
    use IlluminateSupportFacadesBlade;
    use IlluminateSupportServiceProvider;
    
    class AppServiceProvider extends ServiceProvider
    {
        /**
         * Register any application services.
         *
         * @return void
         */
        public function register()
        {
            //
        }
    
        /**
         * Bootstrap any application services.
         *
         * @return void
         */
        public function boot()
        {
            Blade::directive('tanggalIndonesia', function ($expression) {
                return "<?php echo Carbon\Carbon::parse($expression)->locale('id')->translatedFormat('d F Y'); ?>";
            });
        }
    }

    Penjelasan:

    • Blade::directive('tanggalIndonesia', function ($expression) { ... }); mendaftarkan direktif baru bernama tanggalIndonesia.
    • $expression adalah argumen yang diteruskan ke direktif.
    • Kode di dalam fungsi akan dieksekusi ketika direktif digunakan.
    • Kita menggunakan library Carbon untuk memformat tanggal dalam format Indonesia. Pastikan Anda sudah menginstal Carbon: composer require nesbot/carbon.
    • locale('id') mengatur locale ke Indonesia.
    • translatedFormat('d F Y') memformat tanggal dalam format “tanggal bulan tahun” (contoh: “17 Agustus 2023”).
  2. Gunakan Direktif di View:

    <p>Tanggal hari ini: @tanggalIndonesia(now())</p>
    <p>Tanggal postingan: @tanggalIndonesia($post->created_at)</p>

    Outputnya akan menjadi:

    <p>Tanggal hari ini: 17 Agustus 2023</p>
    <p>Tanggal postingan: 15 Juli 2023</p>

Dengan direktif kustom, Anda dapat dengan mudah memperluas fungsionalitas Blade dan membuat kode Anda lebih mudah dibaca dan dipelihara. Pikirkan tentang kebutuhan khusus dalam proyek Anda dan buat direktif kustom yang sesuai.

7. Kondisi dengan @switch dan @case: Alternatif untuk @if

Selain @if, @elseif, dan @else, Blade juga menyediakan direktif @switch dan @case untuk menangani kondisi dengan banyak cabang. Ini adalah alternatif yang lebih rapi dan mudah dibaca ketika Anda memiliki banyak kondisi yang perlu diperiksa.

Contoh Penggunaan @switch dan @case:

Misalkan Anda ingin menampilkan pesan yang berbeda berdasarkan status pengguna.

@switch($user->status)
    @case('active')
        <p>Akun Anda aktif.</p>
        @break
    @case('pending')
        <p>Akun Anda sedang menunggu aktivasi.</p>
        @break
    @case('blocked')
        <p>Akun Anda diblokir.</p>
        @break
    @default
        <p>Status akun tidak valid.</p>
@endswitch

Penjelasan:

  • @switch($user->status) memulai blok switch dengan variabel yang akan diperiksa ($user->status).
  • @case('active') memeriksa apakah nilai variabel sama dengan 'active'. Jika ya, kode di bawahnya akan dieksekusi.
  • @break menghentikan eksekusi blok switch setelah case yang cocok ditemukan.
  • @default dieksekusi jika tidak ada case yang cocok.

Penggunaan @switch dan @case sangat berguna ketika Anda memiliki banyak kondisi yang perlu diperiksa dan ingin membuat kode Anda lebih rapi dan mudah dibaca. Ini adalah alternatif yang bagus untuk rantai @if, @elseif, dan @else yang panjang.

8. Looping dengan @forelse: Menangani Array Kosong dengan Elegan

Selain @foreach, Blade juga menyediakan direktif @forelse untuk menangani kasus di mana array yang di-loop kosong. Ini memungkinkan Anda untuk menampilkan pesan default atau melakukan tindakan lain ketika tidak ada data yang tersedia.

Contoh Penggunaan @forelse:

Misalkan Anda ingin menampilkan daftar produk.

<ul>
    @forelse ($products as $product)
        <li>{{ $product->name }} - {{ $product->price }}</li>
    @empty
        <li>Tidak ada produk yang tersedia.</li>
    @endforelse
</ul>

Penjelasan:

  • @forelse ($products as $product) memulai loop melalui array $products.
  • Jika array $products tidak kosong, maka setiap elemen akan di-loop dan kode di dalamnya akan dieksekusi.
  • @empty akan dieksekusi hanya jika array $products kosong.

Dengan @forelse, Anda dapat dengan mudah menangani kasus di mana array yang di-loop kosong dan menampilkan pesan yang sesuai kepada pengguna. Ini membuat kode Anda lebih robust dan mudah dipahami.

9. Menangani Data dari Controller: Melewatkan Variabel ke View

Salah satu aspek penting dalam menggunakan Laravel Blade Template Engine adalah bagaimana kita melewatkan data dari controller ke view. Berikut beberapa cara umum:

1. Menggunakan view() function:

Ini adalah cara paling umum untuk melewatkan data ke view.

public function index()
{
    $nama = "John Doe";
    $usia = 30;
    $products = Product::all(); // Mengambil semua data produk dari database

    return view('pages.home', [
        'nama' => $nama,
        'usia' => $usia,
        'products' => $products,
    ]);
}

Penjelasan:

  • view('pages.home') menentukan view yang akan ditampilkan (dalam kasus ini, resources/views/pages/home.blade.php).
  • Array asosiatif ['nama' => $nama, 'usia' => $usia, 'products' => $products] berisi data yang akan dilewatkan ke view. Kunci array akan menjadi nama variabel yang dapat diakses di view.

Di view pages.home.blade.php:

<h1>Selamat Datang, {{ $nama }}!</h1>
<p>Usia Anda: {{ $usia }} tahun.</p>

<ul>
    @foreach ($products as $product)
        <li>{{ $product->name }} - Rp. {{ number_format($product->price, 0, ',', '.') }}</li>
    @endforeach
</ul>

2. Menggunakan compact() function:

Cara ini lebih ringkas jika nama variabel di controller sama dengan nama variabel yang ingin diakses di view.

public function index()
{
    $nama = "John Doe";
    $usia = 30;
    $products = Product::all();

    return view('pages.home', compact('nama', 'usia', 'products'));
}

3. Menggunakan Method Chaining dengan with():

Ini adalah cara lain yang lebih elegan.

public function index()
{
    $nama = "John Doe";
    $usia = 30;
    $products = Product::all();

    return view('pages.home')
           ->with('nama', $nama)
           ->with('usia', $usia)
           ->with('products', $products);
}

Semua cara di atas akan menghasilkan hasil yang sama. Pilih cara yang paling nyaman dan mudah dibaca bagi Anda. Penting untuk memastikan bahwa data yang Anda lewati ke view sudah diformat dengan benar dan aman untuk ditampilkan.

10. Tips dan Trik Optimasi Blade Template

Berikut beberapa tips dan trik untuk mengoptimasi Blade template Anda:

  • Gunakan Cache: Laravel menyediakan fitur caching yang dapat meningkatkan performa aplikasi Anda secara signifikan. Anda dapat meng-cache view Anda untuk mengurangi waktu rendering. Gunakan perintah php artisan view:cache untuk mengaktifkan caching view.
  • Minifikasi HTML: Setelah tampilan website Anda selesai, minifikasi HTML untuk mengurangi ukuran file dan mempercepat loading halaman. Ada banyak tool online atau package Laravel yang bisa Anda gunakan untuk melakukan ini.
  • Gunakan CDN untuk Asset: Gunakan CDN (Content Delivery Network) untuk menghosting file CSS, JavaScript, dan gambar Anda. Ini akan mempercepat loading halaman karena file-file tersebut akan di-serve dari server yang lebih dekat dengan pengguna.
  • Hindari Query Database yang Berlebihan: Pastikan Anda tidak melakukan terlalu banyak query database di dalam view Anda. Sebaiknya lakukan semua query database di controller dan lewati data yang dibutuhkan ke view.
  • Gunakan Lazy Loading untuk Gambar: Gunakan lazy loading untuk gambar agar gambar hanya dimuat ketika terlihat di viewport. Ini akan mengurangi waktu loading awal halaman.
  • Memahami Eager Loading: Saat menggunakan Eloquent ORM, gunakan eager loading (with()) untuk mengurangi jumlah query database. Misalnya, jika Anda menampilkan daftar postingan dan setiap postingan memiliki penulis, gunakan Post::with('author')->get() untuk mengambil data penulis bersama dengan data postingan dalam satu query.
  • Pecah Template Menjadi Partials: Memecah template yang besar menjadi partials yang lebih kecil membuat kode lebih mudah dikelola dan di-cache secara individual.
  • Compile Template: Pastikan template Blade Anda dikompilasi ke kode PHP yang dioptimalkan. Laravel melakukannya secara otomatis, tetapi periksa konfigurasi cache Anda untuk memastikan semuanya berfungsi dengan benar.
  • Gunakan Laravel Debugbar: Package Laravel Debugbar sangat membantu untuk mendeteksi masalah performa di aplikasi Anda, termasuk masalah yang terkait dengan Blade template.

Dengan menerapkan tips dan trik ini, Anda dapat mengoptimasi Blade template Anda dan meningkatkan performa website Anda secara signifikan.

11. Studi Kasus: Membuat Tampilan Website Sederhana dengan Blade

Mari kita buat tampilan website sederhana menggunakan Laravel Blade Template Engine untuk mengaplikasikan apa yang telah kita pelajari. Kita akan membuat tampilan untuk halaman “Tentang Kami”.

1. Membuat Controller:

php artisan make:controller AboutController

2. Mengedit AboutController (app/Http/Controllers/AboutController.php):

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;

class AboutController extends Controller
{
    public function index()
    {
        $judulHalaman = "Tentang Kami";
        $deskripsi = "Ini adalah halaman tentang kami. Kami adalah perusahaan yang bergerak di bidang teknologi.";
        $tim = [
            ['nama' => 'John Doe', 'jabatan' => 'CEO'],
            ['nama' => 'Jane Smith', 'jabatan' => 'CTO'],
            ['nama' => 'Peter Jones', 'jabatan' => 'CMO'],
        ];

        return view('pages.about', compact('judulHalaman', 'deskripsi', 'tim'));
    }
}

3. Membuat Route (routes/web.php):

use AppHttpControllersAboutController;
use IlluminateSupportFacadesRoute;

Route::get('/tentang-kami', [AboutController::class, 'index'])->name('about');

4. Membuat View (resources/views/pages/about.blade.php):

@extends('layouts.app')

@section('title', $judulHalaman)

@section('content')
    <h1>{{ $judulHalaman }}</h1>
    <p>{{ $deskripsi }}</p>

    <h2>Tim Kami</h2>
    <ul>
        @foreach ($tim as $anggota)
            <li>{{ $anggota['nama'] }} - {{ $anggota['jabatan'] }}</li>
        @endforeach
    </ul>
@endsection

5. Pastikan Anda sudah memiliki layout layouts.app.blade.php (lihat contoh di bagian 4).

Penjelasan:

  • Kita membuat controller AboutController yang menangani logic untuk halaman “Tentang Kami”.
  • Di dalam method index(), kita mendefinisikan variabel $judulHalaman, $deskripsi, dan $tim yang berisi data yang akan ditampilkan di view.
  • Kita menggunakan compact() untuk melewatkan data ke view pages.about.
  • Di view pages.about.blade.php, kita menggunakan @extends untuk menggunakan layout layouts.app.blade.php.
  • Kita menggunakan @section untuk menentukan judul halaman dan konten utama.
  • Kita menggunakan direktif Blade untuk menampilkan data dari controller.

Dengan mengikuti langkah-langkah ini, Anda telah berhasil membuat tampilan website sederhana untuk halaman “Tentang Kami” menggunakan Laravel Blade Template Engine. Anda bisa mengembangkan lebih lanjut dengan menambahkan styling, gambar, dan konten lainnya.

12. Kesimpulan: Menguasai Laravel Blade untuk Pengembangan Web yang Lebih Efisien di Indonesia

Selamat! Anda telah mempelajari dasar-dasar dan teknik lanjutan dalam menggunakan Laravel Blade Template Engine. Dari memahami konsep dasar hingga membuat layout reusable, komponen, direktif kustom, dan mengoptimasi template, Anda sekarang memiliki fondasi yang kuat untuk mengembangkan tampilan website yang profesional dan efisien.

Ingatlah bahwa latihan adalah kunci utama. Teruslah bereksperimen dengan Blade, coba berbagai direktif dan fitur, dan bangun proyek-proyek kecil untuk mengasah kemampuan Anda. Manfaatkan dokumentasi resmi Laravel dan komunitas developer Laravel di Indonesia untuk mendapatkan bantuan dan inspirasi.

Dengan menguasai Laravel Blade Template Engine, Anda akan menjadi developer web yang lebih produktif dan mampu membuat website yang lebih baik. Semoga tutorial ini bermanfaat dan selamat berkarya!

Tags: Bladedesain websitefrontendIndonesiaLaravelPemrograman WebPHPTemplate Enginetutorialweb development
Atticus Finch

Atticus Finch

Related Posts

Bandwidth

Hosting Unlimited Bandwidth & Storage di Jakarta: Performa Optimal untuk Website Anda

by Jasper Blackwood
December 6, 2025
Bandwidth

Hosting Unlimited Bandwidth dan Storage di Jakarta: Solusi Terbaik untuk Website Anda

by Jasper Blackwood
December 6, 2025
Dukungan

Hosting Indonesia dengan Dukungan Pelanggan Terbaik: Review dan Perbandingan

by Jasper Blackwood
December 5, 2025
Next Post

Tips Optimasi Performa Website Laravel: Website Ngebut, Pengunjung Puas!

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

Harga Jasa Pembuatan Website E-Commerce di Jakarta: Investasi Terbaik untuk Bisnis

May 29, 2025

Harga Software CRM di Indonesia Terbaru: Perbandingan Harga & Fitur Lengkap

October 21, 2025

Kursus Web Development Online Bersertifikat: Investasi Terbaik untuk Karir Anda

October 24, 2025

Integrasi Laravel dengan Payment Gateway Indonesia: Transaksi Aman & Mudah

October 17, 2025

**hosting yang mendukung banyak bahasa pemrograman**

December 13, 2025

Hosting Murah dengan Uptime Tinggi: Kualitas Terbaik Harga Terjangkau

December 13, 2025

Tips Memilih Hosting dengan Uptime Terbaik: Hindari Downtime Website

December 13, 2025

Hosting Indonesia: Uptime Terjamin untuk Website Bisnis Anda

December 12, 2025

gociwidey

Our media platform offers reliable news and insightful articles. Stay informed with our comprehensive coverage and in-depth analysis on various topics.
Read more »

Recent Posts

  • **hosting yang mendukung banyak bahasa pemrograman**
  • Hosting Murah dengan Uptime Tinggi: Kualitas Terbaik Harga Terjangkau
  • Tips Memilih Hosting dengan Uptime Terbaik: Hindari Downtime Website

Categories

  • Admin
  • Adopsi
  • Afiliasi
  • Agency
  • AI
  • Akses
  • Aktif
  • Akuntansi
  • Akurat
  • Alasan
  • Algoritma
  • Alternatif
  • Aman
  • Analisis
  • Analytics
  • Andal
  • Android
  • Animasi
  • Anti
  • API
  • Aplikasi
  • Arsitektur
  • Artikel
  • Artisan
  • Asset
  • Authentication
  • Authorization
  • Back-End
  • Backend
  • Background
  • Backup
  • Bahasa
  • Bandwidth
  • Based on the article title "Cara Menggunakan Vue.js dengan Laravel: Membuat Interface Interaktif"
  • Batasan
  • Belajar
  • Berbagi
  • Berbayar
  • Best Practices
  • Biaya
  • Bisnis
  • Blade
  • Blog
  • Bootstrap
  • Brand
  • Budget
  • Bukti
  • Bulanan
  • CDN
  • Cepat
  • Chatbot
  • ChatGPT
  • Cloud
  • Coding
  • Command Line
  • Company Profile
  • Complete
  • Composer
  • Contoh
  • cPanel
  • CRM
  • CRUD
  • CSS
  • Custom
  • Customer Service
  • Dampak
  • Dasar
  • Dashboard
  • Data
  • Database
  • Debugging
  • Dedicated Server
  • Dependency
  • Deployment
  • Desain
  • Deteksi
  • Developer
  • Development
  • Diagnosis
  • Digital
  • Digital Marketing
  • Digitalisasi
  • Disk Space
  • Diskon
  • Diskusi
  • Dokumentasi
  • Domain
  • Download
  • Downtime
  • Dukungan
  • E-Commerce
  • Edit
  • Efektivitas
  • Efisiensi
  • Ekonomis
  • Eloquent
  • Email
  • Engagement
  • Enterprise
  • Error
  • Error generating categories
  • Estimasi
  • Etika
  • Events
  • Excel
  • Extension
  • Filesystem
  • Fitur
  • Fleksibilitas
  • Form
  • Forum
  • Foto
  • Framework
  • Freelance
  • Front-End
  • Full-Stack
  • Fungsi
  • Fungsionalitas
  • Gambar
  • Game
  • Garansi
  • Gateway
  • Git
  • Google
  • Gratis
  • Hacker
  • Harga
  • Hemat
  • Here are 5 categories based on the article title "Harga Software CRM dan Biaya Implementasi: Investasi yang Tepat untuk Bisnis Anda": CRM
  • Here are 5 categories based on the article title "Hosting Indonesia Murah dengan Fitur Lengkap: Solusi Tepat untuk Bisnismu": Hosting
  • Here are 5 categories based on the provided title: Hosting
  • Here are 5 categories based on the provided title: Rekomendasi Hosting Murah untuk Toko Online dengan Bandwidth Besar: Sukseskan Bisnismu! Hosting
  • Here are 5 categories based on the title "Tips Optimasi Performa Aplikasi Laravel agar Lebih Cepat: Website Anti Lemot": **Laravel
  • here are 5 categories: Laravel
  • Hosting
  • HTML
  • Hubungan
  • Ide
  • Iklan
  • Implementasi
  • Implikasi
  • Indonesia
  • Industri
  • Informasi
  • Inovasi
  • Input
  • Insight
  • Inspirasi
  • Instalasi
  • Install
  • Integrasi
  • Interaktif
  • Interface
  • Interview
  • Investasi
  • Jakarta
  • Jasa
  • JavaScript
  • Joomla
  • Kampanye
  • Kapasitas
  • Karier
  • Karir
  • Karyawan
  • Keamanan
  • Kebutuhan
  • Kecepatan
  • Kehidupan
  • Kekurangan
  • Kelebihan
  • Kemudahan
  • Kepuasan
  • Kerja
  • Kesehatan
  • Keuangan
  • Keunggulan
  • Keuntungan
  • Kode
  • Kompleks
  • Komunikasi
  • Komunitas
  • Konfigurasi
  • Konsep
  • Konsultan
  • Konten
  • Kontrol
  • Konversi
  • Kreatif
  • Kualitas
  • Kursus
  • Langkah
  • Laporan
  • Laravel
  • Layanan
  • Lengkap
  • Lingkungan
  • Linux
  • Livewire
  • Logika
  • Logistik
  • Logo
  • Lokal
  • Loyalitas
  • Mac
  • Machine Learning
  • Mahasiswa
  • Mahir
  • Maintenance
  • Management
  • Manajemen
  • Manfaat
  • Marketing
  • Masa Depan
  • Masyarakat
  • Media Sosial
  • Mesin Pencari
  • Middleware
  • Migrasi
  • Migration
  • Mitos
  • Mobile
  • Mobilitas
  • Model
  • Modern
  • Monitoring
  • Mudah
  • Murah
  • MySQL
  • Nilai
  • OAuth2
  • Online
  • Open Source
  • Opini
  • Optimal
  • Optimasi
  • ORM
  • Otomatis
  • Otomatisasi
  • Otorisasi
  • Output
  • Package
  • Panduan
  • Payment
  • PDF
  • Pekerjaan
  • Pelanggan
  • Pelatihan
  • Peluang
  • Pemahaman
  • Pemanfaatan
  • Pemasaran
  • Pembandingan
  • Pembelajaran
  • Pembuatan
  • Pemesanan
  • Pemilihan
  • Pemrograman
  • Pemula
  • Pemulihan
  • Pendidikan
  • Penerapan
  • Pengalaman
  • Pengambilan Keputusan
  • Pengembangan
  • Pengenalan
  • Pengertian
  • Pengguna
  • Penggunaan
  • Penghasilan
  • Pengobatan
  • Pengolahan
  • Pengujian
  • Peningkatan
  • Penipuan
  • Penjelasan
  • Penjualan
  • Penyimpanan
  • Peran
  • Perangkat
  • Perbandingan
  • Performa
  • Performance
  • Perkembangan
  • Personalisasi
  • Pertanian
  • Pertimbangan
  • Pertumbuhan
  • Perusahaan
  • Petani
  • PHP
  • Pilihan
  • Plagiarisme
  • Platform
  • Plugin
  • Pondasi
  • Portofolio
  • Potensi
  • Praktis
  • Prediksi
  • Premium
  • Presentasi
  • Pribadi
  • Produktivitas
  • Profesional
  • Profitabilitas
  • Programmer
  • Project
  • Promo
  • Proses
  • Proteksi
  • Proyek
  • Python
  • Queues
  • Ranking
  • React
  • Realita
  • Redis
  • Referensi
  • Rekomendasi
  • Relationship
  • Reputasi
  • Responsif
  • Responsive
  • RESTful
  • Restoran
  • Retail
  • Retensi
  • Review
  • Risiko
  • ROI
  • Saham
  • Sales
  • Scheduler
  • Search
  • Sederhana
  • Seeder
  • Sehari-hari
  • Selamanya
  • SEO
  • Sertifikasi
  • Server
  • Sinkronisasi
  • Sistem
  • Sistem Operasi
  • Siswa
  • Skalabilitas
  • Skill
  • Software
  • Solusi
  • Sosial
  • Space Disk
  • Spesifikasi
  • SSD
  • SSL
  • Stabil
  • Staging
  • Startup
  • Step-by-Step
  • Storage
  • Strategi
  • Studi Kasus
  • Subdomain
  • Sukses
  • Sumber Daya
  • Support
  • Surabaya
  • Syarat
  • Tahapan
  • Tambahan
  • Tampilan
  • Tanggung Jawab
  • Tantangan
  • Target
  • Teknis
  • Teknologi
  • Teks
  • Template
  • Templating
  • Terbaik
  • Terbaru
  • Terjangkau
  • Terjemahan
  • Terpercaya
  • Testimoni
  • Testing
  • Tim
  • Tingkat Lanjut
  • Tips
  • Toko Online
  • Tools
  • Traffic
  • Training
  • Transaksi
  • Tren
  • Trik
  • Troubleshooting
  • Tugas
  • Tutorial
  • UKM
  • UMKM
  • Undangan
  • Unlimited
  • Upgrade
  • Upload
  • Uptime
  • User
  • User-Friendly
  • Validasi
  • Video
  • Visual
  • VPS
  • Vue.js
  • Waktu
  • Web
  • Web Development
  • Website
  • WhatsApp
  • Windows
  • WordPress
  • XAMPP

Resource

  • About us
  • Contact Us
  • Privacy Policy

© 2024 gociwidey.

No Result
View All Result
  • Hosting
  • Indonesia
  • Website
  • Laravel
  • Development
  • Bisnis

© 2024 gociwidey.