Trentech.id
No Result
View All Result
Login / Register
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
Trentech.id
No Result
View All Result

Memulai Web Development dengan Laravel – Menggunakan Blade Template

22 April 2017
in Learn
Memulai Web Development dengan Laravel – Menggunakan Blade Template
1.3k
VIEWS

Daftar Isi

  • Menyiapkan Controller
  • Membuat Layout Sederhana
  • Menggunakan Layout
  • Menggunakan If
  • Menggunakan Loop
5/5 - (1 vote)

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("/", "[email protected]");
	Route::get("/detail", "[email protected]");
	Route::get("/conditional", "[email protected]");
	Route::get("/looping", "[email protected]");
});

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-extendlayout 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 folderblade_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 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 folderresources/views/blade_sample. Kemudian buat source code berikut di dalamnya:

@extends('blade_sample.layout')

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

@section('content')
	@if ($nilai >= 90)
    <p>Kamu mendapatkan nilai A!</p>
    @elseif ($nilai >= 60 && $nilai < 90)
    <p>Kamu mendapatkan nilai B!</p>
    @elseif ($nilai >= 40 && $nilai < 60)
    <p>Kamu mendapatkan nilai C!</p>
    @elseif ($nilai >= 0 && $nilai < 40)
    <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:

@extends('blade_sample.layout')

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

@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. [cp

/ap]
Tags: belajarbelajar kodingbelajar webbelalar laravelBlade Templatelaravel
Angga Permana

Angga Permana

Related Posts

Kalau Mau Kaya Tanpa Jadi Pengusaha, Belajar Coding Bisa Jadi Jawabannya

Kalau Mau Kaya Tanpa Jadi Pengusaha, Belajar Coding Bisa Jadi Jawabannya

27 March 2022
1.4k

Mengapa jadi programmer? Bukankan menulis kode di depan komputer adalah pekerjaan yang gak keren? Barangkali bagimu pekerjaan ini terlihat membosankan, tapi...

template website

Kamu Sering Menggunakan Template Website? Mulai Sekarang Coba Pikir Ulang

24 March 2022
1.4k

Ada banyak cara yang bisa Anda lakukan sebagai pelaku bisnis untuk menampilkan citra profesional di internet. Memiliki website adalah salah satunya. Desain...

Ini Dia 6 Situs Untuk Mencari Inspirasi Seputar Desain UI/UX

Ini Dia 6 Situs Untuk Mencari Inspirasi Seputar Desain UI/UX

22 March 2022
1.4k

Saat mengembangkan sebuah produk baik itu aplikasi mobile atau website, sering kita kehabisan ide, mau dibuat seperti apa website atau...

Terpopuler

  • contoh pitch deck

    8 Contoh Pitch Deck Startup yang Bisa Kamu Pelajari

    253 shares
    Share 101 Tweet 63
  • Kumpulan Materi Kuliah Jurusan Teknik Informatika dan Ilmu Komputer

    155 shares
    Share 62 Tweet 39
  • Manfaat Belajar Bahasa Pemrograman untuk Kehidupan

    131 shares
    Share 52 Tweet 33
  • Tokopedia Diretas Hacker, 91 Juta Data Pengguna Bocor

    109 shares
    Share 44 Tweet 27
  • Cara Ampuh Market Validation untuk Melakukan Validasi Ide Startup

    132 shares
    Share 53 Tweet 33
  • Perbedaan Mic Condenser dan Dynamic Mic Serta Cara Merawatnya Agar Awet

    136 shares
    Share 54 Tweet 34
  • Upgrade XAMPP? Beginilah Caranya

    141 shares
    Share 56 Tweet 35
  • Ini Cara Memeriksa Apakah Data Email dan Password Saya Sudah Diketahui Hacker

    109 shares
    Share 44 Tweet 27
  • Ini Dia 6 Situs Untuk Mencari Inspirasi Seputar Desain UI/UX

    115 shares
    Share 46 Tweet 29
  • Inilah Kumpulan Co-Working Space di Jakarta yang Wajib Kamu Coba

    115 shares
    Share 46 Tweet 29

About . Contact . Partnership

Trentech.id adalah situs yang menyajikan konten tentang startup, bisnis, game, event, hingga informasi pekerjaan. Trentech berusaha memberikan konten yang berkualitas untuk para pembacanya agar dapat menjadi rujukan utama mengenai dunia teknologi pada khususnya. Tim trentech terdiri dari orang – orang yang berkompeten dibidangnya, dan akan selalu mendukung karya – karya terbaik anak bangsa dengan memberikan kesempatan seluas-luasnya untuk para startup agar dapat publish karyanya di trentech.

Trentech ID

  • About
  • Contact
  • Partnership
  • Panduan Penulis
  • Privacy Policy
  • Sitemap

Tools

  • Harga Crypto Terbaru
  • Cek Ongkir
  • Cek Resi
  • Cek Domain
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
Login / Register

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
  • Login
  • Sign Up
Forgot Password?
Lost your password? Please enter your username or email address. You will receive a link to create a new password via email.