Memasang Template di Laravel

Cara Memasang Template di Laravel

Tutorial Sebelumnya:

Tutorial Laravel #8Konfigurasi Database MySQL di Laravel

Berikut ini adalah Tutorial Cara Memasang Template di Laravel. Di bagian ini kita akan membahas satu fitur lagi yang paling keren dari laravel yaitu Sistem Blade Template Laravel.

Belajar Sistem Blade Template Laravel

Pada tutorial Belajar Sistem Blade Template Laravel ini kita akan membuat halaman web sederhana yang memiliki 3 buah halaman dinamis, yaitu halaman home, halaman tentang, dan halaman kontak.

Karena kita akan membuat 3 buah halaman view, maka kita juga butuh 3 route untuk mengakses halaman-halaman tersebut.

Sekarang silahkan buat 3 buah route pada folder routes/web.php.

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\BlogController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', [BlogController::class, 'home']);
Route::get('tentang', [BlogController::class, 'tentang']);
Route::get('kontak', [BlogController::class, 'kontak']);

Perhatikan route di atas, berikut ini penjelasannya:

  • Pada saat kita mengakses route /, maka yang akan dijalankan adalah function home yang ada di dalam controller BlogController.
  • Pada saat kita mengakses route tentang, maka yang akan dijalankan adalah function tentang yang ada di dalam controller BlogController.
  • Pada saat kita mengakses route kontak, maka yang akan dijalankan adalah function kontak yang ada di dalam controller BlogController.

Karena route nya akan menjalankan function pada controller BlogController, kita belum punya controller yang bernama BlogController.

Sekarang kita buat dulu controller BlogController.php. Buka terminal, masuk ke direktori project Laravel kita, dan jalankan perintah berikut:

php artisan make:controller BlogController

Setelah selesai membuat BlogController.php, sekarang kita buat function home, function tentang, function kontak di dalam BlogController.

Berikut ini function pada BlogController lengkap dengan pemanggilan view-nya masing-masing:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class BlogController extends Controller
{

	public function home(){
		return view('home');
	}

	public function tentang(){
		return view('tentang');
	}

	public function kontak(){
		return view('kontak');
	}

}

Perhatikan kode di atas, penjelasannya sebagai berikut:

  • Function home memanggil view home
  • Function tentang memanggil view tentang
  • Function kontak memanggil view kontak

Sampai di sini kita akan membuat template masternya terlebih dulu. Template master yang dimaksud di sini adalah template induknya, di template master ini lah nantik kita manampung semua view.

Buat sebuah view baru di folder resource/views dengan nama master.blade.php, isinya sebagai berikut:

<!DOCTYPE html>
<html>
<head>
  <title>Belajar Sistem Blade Template Laravel - Ayo Ngoding</title>
</head>
<body>
  <header>
    <h2>Blog Ayo Ngoding</h2>
    <nav>
      <a href="/">HOME</a>
      |
      <a href="/tentang">TENTANG</a>
      |
      <a href="/kontak">KONTAK</a>
    </nav>
  </header>
  <hr/>
  <br/>
  <br/>

  <!-- bagian ini menampung judul halaman blog -->
  <h3> @yield('judul') </h3>

  <!-- bagian ini menampung konten blog -->
  @yield('konten')

  <br/>
  <br/>
  <hr/>
  <footer>
    <p>Copyright &copy; 2019 - 2021 <a href="https://www.ayongoding.com/">www.ayongoding.com</a></p>
  </footer>
</body>
</html>

View master.blade.php ini kita jadikan sebagai template induk, dimana isi dari view master segala sesuatu yang tidak berubah-ubah seperti menu, footer dan nama blog nya.

Jadi sekarang semua view-view yang di panggil pada function pada BlogController akan kita buat dan kita hubungkan dengan template view master ini.

Buat 3 buah view baru, yaitu view home, view tentang dan view kontak.

Isi dari view home seperti kode di bawah ini:

<!-- Menghubungkan dengan view template master -->
@extends('master')

<!-- isi bagian judul halaman -->
<!-- cara penulisan isi section yang pendek -->
@section('judul', 'Halaman Home')

<!-- isi bagian konten -->
<!-- cara penulisan isi section yang panjang -->
@section('konten')

  <p>Selamat datang!</p>
  <p>Ini Adalah Halaman Home - Belajar Sistem Blade Template Laravel</p>

@endsection

Isi dari view tentang seperti kode di bawah ini:

<!-- Menghubungkan dengan view template master -->
@extends('master')

<!-- isi bagian judul halaman -->
<!-- cara penulisan isi section yang pendek -->
@section('judul', 'Halaman Tentang')

<!-- isi bagian konten -->
<!-- cara penulisan isi section yang panjang -->
@section('konten')

  <p>Ini Adalah Halaman Tentang</p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

@endsection

Isi dari view kontak seperti kode di bawah ini:

<!-- Menghubungkan dengan view template master -->
@extends('master')

<!-- isi bagian judul halaman -->
<!-- cara penulisan isi section yang pendek -->
@section('judul', 'Halaman Kontak')

<!-- isi bagian konten -->
<!-- cara penulisan isi section yang panjang -->
@section('konten')

  <p>Ini Adalah Halaman Kontak</p>
  
  <table border="1" cellpadding="3" cellspacing="0">
    <tr>
      <td>Email</td>
      <td>:</td>
      <td>info@ayongoding.com</td>
    </tr>
    <tr>
      <td>Facebook</td>
      <td>:</td>
      <td>facebook/ayongoding</td>
    </tr>
    <tr>
      <td>Twitter</td>
      <td>:</td>
      <td>twitter/ayongoding</td>
    </tr>
    <tr>
      <td>Hp</td>
      <td>:</td>
      <td>0853-6411-6655</td>
    </tr>
  </table>

@endsection

Perhatikan semua kode view di atas, kita telah membuat empat buah file view yaitu:

  1. View master.blade.php: Terdapat fungsi dengan nama yield(). Fungsi @yield() berguna untuk bagian-bagian tertentu pada template website yang isinya dinamis. Isi dari view lain akan kita tampung di dalam parameter dengan fungsi @yield().
  2. View home.blade.php: Terdapat fungsi dengan nama @extends() dan @section(). Fungsi @extends() berfungsi untuk menghubungkan view home dengan view master. Kemudian semua isi yang ada diantara fungsi @section pada view home akan di tampilkan pada bagian fungsi @yield pada view master.
  3. View tentang.blade.php: Terdapat fungsi dengan nama @extends() dan @section(). Fungsi @extends() berfungsi untuk menghubungkan view tentang dengan view master. Kemudian semua isi yang ada diantara fungsi @section pada view tentang akan di tampilkan pada bagian fungsi @yield pada view master.
  4. View kontak.blade.php: Terdapat fungsi dengan nama @extends() dan @section(). Fungsi @extends() berfungsi untuk menghubungkan view kontak dengan view master. Kemudian semua isi yang ada diantara fungsi @section pada view kontak akan di tampilkan pada bagian fungsi @yield pada view master.

Sekarang kita coba akses project kita dengan mengakses localhost:8000, akan muncul halaman seperti berikut:

Belajar Sistem Blade Template Laravel
Belajar Sistem Blade Template Laravel

Perhatikan pada gambar di atas, pada saat route ‘/’ di akses, maka akan dijalankan function home pada controller BlogController, kemudian function home pada controller BlogController akan memanggil view home.blade.php.

Begitu juga dengan halaman lainnya. Coba klik pada menu kontak dan tentang. Maka halaman view master tetap di tamiplkan namun yang berubah hanya bagian judul dan konten sesuai halaman yang di klik.

Tampilan Halaman Tentang seperti berikut:

Belajar Sistem Blade Template Laravel
Belajar Sistem Blade Template Laravel

Tampilan Halaman Kontak seperti berikut:

Belajar Sistem Blade Template Laravel
Belajar Sistem Blade Template Laravel

Memasang Template Bootstrap di Laravel

Kita sudah belajar Sistem Blade Template Laravel. Sekarang kita akan belajar cara menggunakan atau Memasang Template Boostrap di Laravel.

Pada tutorial ini kita akan menggunakan template bootstrap AdminLTE.

Tutorial Selanjutnya:

Tutorial Laravel #10: Membuat Login pada Laravel

Web Programmer. Flutter Developer. Content Creator. Founder Ayongoding.com. Penyuka minuman sachet. Menulis pakai tangan kanan. Masih main mobilan remot. Dan pernah kuliah Sistem Informasi sampai lulus.

4 Komentar

  1. Gungwah Reply

    Halo kak, aku sudah ikutin dari awal tutorialnya, tapi waktu aku coba itu yg home mau dia, tapi waktu yg about sama contact dia gamau muncul, keliatan warna putih tok, padahal ada konten yg aku buat harusnya, itu kira” gimana ya?

  2. adrianus wayan dian adi pamungkas Reply

    Kalau semisal no WA tersebut dibuat bisa di klik dan langsung terhubung dengan Whatsapp bagaimana caranya Kak?

Leave a Reply

Your email address will not be published. Required fields are marked *