Trentech.id
No Result
View All Result
Login / Register
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget
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.4k
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("/", "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-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
Previous Post

Ini Dia Contoh Referensi Aplikasi dan Game Berbasis Web Terbaik yang Menerapkan PWA

Next Post

Yuk Simak Belajar Cara Menjadi Besar dari AirBnB

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.6k

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.7k

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

Please login to join discussion

Terpopuler

  • contoh pitch deck

    8 Contoh Pitch Deck Startup yang Bisa Kamu Pelajari

    925 shares
    Share 370 Tweet 231
  • Kumpulan Materi Kuliah Jurusan Teknik Informatika dan Ilmu Komputer

    329 shares
    Share 132 Tweet 82
  • Masa Depan Zoom Tercoreng PHK: Dampak dan Prospek

    108 shares
    Share 43 Tweet 27
  • Menjelajahi Kelebihan dan Keterbatasan Chatbot AI BARD

    108 shares
    Share 43 Tweet 27
  • Upgrade XAMPP? Beginilah Caranya

    231 shares
    Share 92 Tweet 58
  • Masa Depan Bitcoin Kian Terancam

    108 shares
    Share 43 Tweet 27
  • Startup Kecerdasan Buatan (AI) Membawa Solusi Baru dalam Industri

    108 shares
    Share 43 Tweet 27
  • Alasan Mahasiswa IT Harus Bisa Coding

    121 shares
    Share 48 Tweet 30
  • Sistem Baru TikTok: Solusi Terbaru untuk Kreativitas dan Keamanan Pengguna

    108 shares
    Share 43 Tweet 27
  • 6 Kebiasaan Elon Musk yang Bisa Bikin Kamu Sukses

    120 shares
    Share 48 Tweet 30

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
  • Gadget
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.