02 Days 18

02 days 18:58:52 Promo Member Baru 40%!
Program
Full Stack Membership! Hanya 3 Hari! Klaim Promo
 LIBRARY
 UPDATE
o Blog
o Webinar
 DISCUSSION
 BOOTCAMP

LOGIN / REGISTER JOIN MEMBERSHIP

Lebih terarah belajar coding melalui Kelas Online dan Interactive
Coding LIHAT MATERI BELAJAR
Memulai Web
Development dengan
Laravel - Menggunakan
Blade Template
Ditulis oleh Muhammad Arslan, dipublikasi pada 17 Apr 2017 dalam
kategori Tutorial
Template engine adalah salah satu fitur yang sangat
diharapkan oleh web developer. Bila suatu web
framework sudah memiliki built-in template engine,
maka web framework tersebut akan semakin nyaman
digunakan, misalnya Laravel. Web framework yang
satu ini sudah memiliki template engine dengan nama
Blade.
Memang di PHP ada beberapa template engine yang
sudah memiliki seperti Twig. Sekarang mari kita coba
gunakan Blade yang bisa mempermudah kamu dalam
membuat aplikasi web dengan Laravel.
Menyiapkan Controller
Sekarang mari kita buat controller untuk demo Blade.
Silahkan buat file dengan
nama DemoBladeController.php di
dalam app\Http\Controllers kemudian buat kode berikut
di dalam file tersebut:
<?php
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Redis;
class DemoBladeController extends Controller {
public function index() {
return view("blade_sample.index");
}
public function detail() {
return view("blade_sample.detail");
}
public function conditional() {
$nilai = 90;
return view("blade_sample.if", ['nilai' => $nilai]);
}
public function looping() {
$siswa = [
"Jajang",
"Sukmana",
"Debby",
"Ratu",
"Clara",
"Juminah",
"Inem",
"Supono"
];
return view("blade_sample.loop", ['siswa' => $siswa]);
}
}
Sekarang silahkan
tambahkan route untuk controller ini di
dalam routes/web.php:
// contoh blade
Route::group(["prefix"=>"demo-blade"], function () {
Route::get("/", "DemoBladeController@index");
Route::get("/detail", "DemoBladeController@detail");
Route::get("/conditional", "DemoBladeController@conditional");
Route::get("/looping", "DemoBladeController@looping");
});
Nah, dari sini ayo kita lanjut ke

membuat view dan layout menggunakan Blade
terlebih dahulu.
Membuat Layout Sederhana

Di dalam folder resources/views silahkan
buat folder dengan nama blade_sample. Kemudian
buatlah sebuah file di dalamnya
dengan layout.blade.php.
Lalu buatlah kode berikut di dalam file tersebut:
<html>
<head>
<title>Laravel - @yield('title')</title>
</head>
<body>
<div class="nav">
Ini adalah nav
<hr/>
</div>
<div class="content">
@yield('content')
</div>
<div class="footer">
<hr/>
Ini adalah footer
</div>
</body>
</html>
Nantinya kode diatas akan menjadi wadah bagi kode

lain yang menggunakan layout tersebut. Jadi hanya
dengan sekali tulis untuk bagian yang sering muncul,
maka kita akan menghemat waktu dan tenaga untuk
tidak menulis ulang footer dan nav di
setiap file view yang kita tulis.
Menggunakan Layout
Sekarang kita akan menggunakannya kepada
dua view yang akan meng-extend layout tadi.
Silahkan buat terlebih dahulu file dengan
nama index.blade.php di
dalam folder blade_sample kemudian buat kode
berikut di dalam file tersebut:
@extends('blade_sample.layout')
@section('title', 'Index Page')
@section('content')
<p>Ini adalah isi utama dari halaman index</p>
@endsection
Kemudian silahkan buat lagi file dengan

nama detail.blade.php di
dalam folder blade_sample kemudian buat kode
berikut di dalam file tersebut:
@section('content')
<p>Ini adalah isi utama dari halaman detail</p>
@endsection
Dan setelah selesai, silahkan lihat perbedaannya

melalui URL berikut:
http://localhost/laraweb/public/index.php/demo-blade
http://localhost/laraweb/public/index.php/demo-blade/detail
Intinya, bagian section akan
menjadi placeholder yang dapat diisin apapun
dari child template. Dengan demikian kita tidak perlu
menulis ulang bagian yang sama dari layout di setiap
halaman.
Menggunakan If
Sekarang kita akan mencoba view yang menggunakan
kondisional di Blade. Silahkan buat terlebih
dahulu file dengan
nama if.blade.php di folder resources/views/blade_sa
mple. Kemudian buat source code berikut di dalamnya:
@section('content')
@if ($nilai >= 90)
<p>Kamu mendapatkan nilai A!</p>
@elseif ($nilai >= 60 && $nilai < 90)
<p>Kamu mendapatkan nilai B!</p>
<p>Kamu mendapatkan nilai C!</p>
<p>Kamu mendapatkan nilai D!</p>
@endif
@endsection
Sekarang coba lihat hasilnya melalui URL ini:
http://localhost/laraweb/public/index.php/demo-blade/conditional
Kamu juga dapat mencoba mengubah isi

variabel nilai yang ada di controller untuk melihat
perubahan lainnya.
Menggunakan Loop
Dan yang terakhir kita akan menggunakan loop yang
dimiliki oleh Blade. Silahkan buat file dengan
nama loop.blade.php dan taruh file tersebut di
dalam folder resources/views/blade_sample. Kemudian
buat kode berikut di dalam file tersebut:
@section('content')
<ul>
@foreach ($siswa as $item)
<li>{{ $item }}</li>
@endforeach
</ul>
<br/>
<ul>
@for ($i = 0; $i < 10; $i++)
<li>{{ $i }}</li>
@endfor
</ul>
@endsection
Untuk melihat hasilnya, kamu hanya perlu mengakses

URL ini:
http://localhost/laraweb/public/index.php/demo-blade/looping
Dengan demikian kamu dapat memilih apakah akan

menggunakan for atau foreach saat menggunakan
Blade. Tergantung kasus yang akan kamu temui nanti.
Share on Facebook Share on Twitter
Gabung CodePolitan
Membership
Ingin belajar coding secara online dengan lebih terarah?
Gabung sekarang dalam program Premium Membership
di CodePolitan. Dapatkan ratusan modul belajar
pemrograman premium dalam beragam format dengan
materi silabus lengkap dan tersusun rapi dari awal
hingga mahir.
LIHAT MATERI BELAJAR GABUNG MEMBERSHIP
Artikel Lainnya
Cara Fetch dan Update Data User di Mobile Aplikasi iOS

Menggunakan Mesosfer
Apr 17, 2017
Cara Membuat SignUp User untuk Mobile Aplikasi iOS

Menggunakan Mesosfer
Apr 17, 2017
 FEEDBACK
 TERMS & CONDITIONS
 PRIVACY POLICY
 HALL OF FAME

 MERCHANDISE

© 2020 CodePolitan. All rights reserved
info@codepolitan.com

02 Days 18

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

02 Days 18

Diunggah oleh

Hak Cipta:

Format Tersedia

02 days 18:58:52 Promo Member Baru 40%!

LOGIN / REGISTER JOIN MEMBERSHIP

class DemoBladeController extends Controller {

public function index() {

public function detail() {

public function conditional() {

public function looping() {

Nah, dari sini ayo kita lanjut ke

Membuat Layout Sederhana

Nantinya kode diatas akan menjadi wadah bagi kode

@section('title', 'Index Page')

Kemudian silahkan buat lagi file dengan

@section('title', 'Index Page')

Dan setelah selesai, silahkan lihat perbedaannya

@section('title', 'Index Page')

Sekarang coba lihat hasilnya melalui URL ini:

Kamu juga dapat mencoba mengubah isi

@section('title', 'Index Page')

Untuk melihat hasilnya, kamu hanya perlu mengakses

Dengan demikian kamu dapat memilih apakah akan

Share on Facebook Share on Twitter

Cara Fetch dan Update Data User di Mobile Aplikasi iOS

Cara Membuat SignUp User untuk Mobile Aplikasi iOS

 TERMS & CONDITIONS

Anda mungkin juga menyukai