> For the complete documentation index, see [llms.txt](https://learn.devlabss.my.id/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learn.devlabss.my.id/laravel/bab-3-blade-templating/3.1-pengenalan-blade-engine.md). # 3.1 Pengenalan Blade Engine ## Pengenalan Blade Engine Setelah memahami routing, sekarang Anda masuk ke bagian tampilan. Di Laravel, tampilan biasanya dibuat dengan **Blade**. Blade membantu Anda menulis HTML yang tetap rapi saat harus menampilkan data dari Laravel. ### Target belajar BAB 3 Setelah menyelesaikan BAB 3, Anda diharapkan bisa: * menjelaskan fungsi Blade di Laravel * membuat file view baru dengan benar * memakai layout dan komponen yang dipakai ulang * menghubungkan route ke view Blade * membuat halaman baru dengan struktur tampilan yang konsisten ### Apa itu Blade Blade adalah templating engine bawaan Laravel. Blade dipakai untuk membuat file view yang berisi HTML dan sintaks Laravel yang ringkas. Semua file Blade disimpan di folder: ``` resources/views ``` Ekstensi file Blade adalah: ``` .blade.php ``` ### Kenapa Blade dipakai Tanpa Blade, Anda tetap bisa menulis PHP biasa di dalam HTML. Masalahnya, kode cepat terlihat panjang dan sulit dibaca. Bandingkan contoh berikut. #### PHP biasa ```php

Selamat datang,

``` #### Blade ```php

Selamat datang, {{ $nama }}

``` Blade lebih ringkas. Blade juga lebih nyaman dibaca saat file tampilan mulai besar. ### Sintaks Blade paling dasar Sintaks yang paling sering dipakai di awal adalah: ```php {{ $nama }} ``` Artinya, Laravel menampilkan isi variabel `$nama` ke halaman. Blade juga bisa menampilkan hasil ekspresi sederhana: ```php {{ 5 + 5 }} ``` Jika halaman dibuka, hasilnya menjadi `10`. {% hint style="info" %} Tanda `{{ }}` dipakai untuk menampilkan data dengan aman. Laravel akan melakukan escaping otomatis. {% endhint %} ### Sebelum mulai Pastikan kondisi berikut sudah siap: * proyek `e-library` sudah bisa dijalankan * Anda bisa membuka `routes/web.php` * Anda bisa membuka folder `resources/views` Jika proyek belum berjalan, ulangi dulu [1.3 Membuat Proyek Baru](/laravel/bab-1-pengenalan-and-instalasi/1.3-membuat-proyek-baru.md) dan [1.5 Troubleshooting & Error Populer](/laravel/bab-1-pengenalan-and-instalasi/1.5-troubleshooting-and-error-populer.md). ### Membuat file Blade pertama Sekarang buat file view pertama Anda. {% stepper %} {% step %} ### Buat file `halo.blade.php` Buka folder `resources/views`. Buat file baru dengan nama: ``` halo.blade.php ``` {% endstep %} {% step %} ### Isi file dengan HTML dan Blade Masukkan kode berikut ke dalam file itu: ```html Belajar Blade Engine

Halo Anak RPL, selamat belajar Laravel Blade!

Hasil dari 5 ditambah 5 adalah: {{ 5 + 5 }}

``` Lalu simpan file dengan `Ctrl + S`. {% endstep %} {% step %} ### Hubungkan file Blade ke route Buka file `routes/web.php`. Tambahkan route berikut: ```php Route::get('/halo-blade', function () { return view('halo'); }); ``` Lalu simpan file dengan `Ctrl + S`. {% endstep %} {% endstepper %} ### Nyalakan server sebelum membuka halaman Sebelum menguji hasilnya, pastikan server Laravel sedang berjalan. Gunakan salah satu cara berikut: * buka **Laragon** lalu klik **Start All** * atau jalankan `php artisan serve` dari folder proyek ### Menguji halaman Blade Sekarang buka browser dan akses salah satu alamat berikut: * `http://e-library.test/halo-blade` * `http://127.0.0.1:8000/halo-blade` Jika berhasil, halaman menampilkan: * judul sambutan Blade * hasil `5 + 5` yang berubah menjadi `10` Jika angka `10` muncul, berarti Blade berhasil memproses ekspresi di dalam `{{ }}`. ### Bagaimana Blade bekerja Saat route menjalankan `view('halo')`, Laravel mencari file: ``` resources/views/halo.blade.php ``` Lalu Laravel memproses isi Blade sebelum hasilnya dikirim ke browser. Browser tidak membaca sintaks Blade secara langsung. Browser hanya menerima hasil akhir dalam bentuk HTML. ### Hal penting yang perlu diingat Pegang tiga aturan ini: * file Blade disimpan di `resources/views` * nama file harus berakhiran `.blade.php` * pemanggilan `view('halo')` tidak perlu menulis `.blade.php` {% hint style="warning" %} Saat menulis `view('halo')`, jangan tulis `view('halo.blade.php')`. Laravel sudah mencari file Blade secara otomatis. {% endhint %} ### Troubleshooting awal yang paling sering Masalah yang paling sering muncul: * **`View [halo] not found.`** — nama file salah atau file tidak berada di `resources/views` * **teks `{{ 5 + 5 }}` tampil mentah** — file salah ekstensi dan bukan file Blade * **halaman tidak bisa dibuka** — server belum aktif atau route belum disimpan ### Output yang harus terlihat Setelah menyelesaikan BAB 3, hasil minimal yang seharusnya sudah ada: * file Blade pertama berhasil dibuat * route ke view Blade berhasil berjalan * ekspresi `{{ }}` diproses oleh Laravel * halaman dengan layout yang konsisten bisa dibuka di browser ### Poin evaluasi bab 3.1 Pastikan Anda sudah memahami poin berikut: * Saya paham Blade adalah templating engine bawaan Laravel. * Saya tahu file Blade disimpan di `resources/views`. * Saya tahu ekstensi file Blade adalah `.blade.php`. * Saya berhasil membuat file `halo.blade.php`. * Saya berhasil menghubungkan view ke route `/halo-blade`. * Saya paham fungsi `{{ }}` untuk menampilkan data. * Saya berhasil membuka halaman Blade pertama di browser. Jika semua sudah jelas, lanjut ke [3.2 Memotong Layout HTML (Slicing)](/laravel/bab-3-blade-templating/3.2-memotong-layout-html-slicing.md). --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://learn.devlabss.my.id/laravel/bab-3-blade-templating/3.1-pengenalan-blade-engine.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.