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
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget

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.

Baca lagi

10 Cara Belajar Koding untuk Pemula dengan Mudah dan Efektif

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

Kamu Sering Menggunakan Template Website? Mulai Sekarang Coba Pikir Ulang

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

cara belajar koding

10 Cara Belajar Koding untuk Pemula dengan Mudah dan Efektif

30 March 2023
1.4k

Apakah Anda ingin belajari koding tetapi bingung harus mulai dari mana? Jangan khawatir, karena dengan panduan yang tepat, belajar koding...

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

Please login to join discussion

Terpopuler

  • contoh pitch deck

    8 Contoh Pitch Deck Startup yang Bisa Kamu Pelajari

    1137 shares
    Share 454 Tweet 284
  • Saham Kapal Induk: Apa Itu dan Apa Keuntungannya?

    176 shares
    Share 70 Tweet 44
  • Upgrade XAMPP? Beginilah Caranya

    271 shares
    Share 108 Tweet 68
  • Apa Saja Fitur Flipper Zero?

    121 shares
    Share 48 Tweet 30
  • Kumpulan Materi Kuliah Jurusan Teknik Informatika dan Ilmu Komputer

    402 shares
    Share 161 Tweet 101
  • Bekerja di Bidang Otomotif, Menjanjikan Penghasilan Besar! Berminat?

    147 shares
    Share 59 Tweet 37
  • Perbedaan Mic Condenser dan Dynamic Mic Serta Cara Merawatnya Agar Awet

    247 shares
    Share 99 Tweet 62
  • Sarjana Komputer Tidak Bisa Coding? Apa Kata Dunia?

    183 shares
    Share 73 Tweet 46
  • Ternyata Beginilah Cara Kerja Powerbank

    187 shares
    Share 74 Tweet 47
  • Yuk Ketahui Sejarah Perkembangan Aplikasi Chat di Seluruh Dunia

    164 shares
    Share 66 Tweet 41

About . Contact . Partnership . Google News

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
  • Login
  • Sign Up
About . Contact . Partnership . Google News

Welcome Back!

Sign In with Facebook
Sign In with Google
OR

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Sign Up with Facebook
Sign Up with Google
OR

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