Tutorial Sebelumnya:
Tutorial Laravel #8: Konfigurasi 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 adalahfunction homeyang ada di dalamcontroller BlogController. - Pada saat kita mengakses
route tentang, maka yang akan dijalankan adalahfunction tentangyang ada di dalamcontroller BlogController. - Pada saat kita mengakses
route kontak, maka yang akan dijalankan adalahfunction kontakyang ada di dalamcontroller 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 BlogControllerSetelah 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 © 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>
@endsectionIsi 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>
@endsectionIsi 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>
@endsectionPerhatikan semua kode view di atas, kita telah membuat empat buah file view yaitu:
- 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().
- 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.
- 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.
- 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:
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:
Tampilan Halaman Kontak seperti berikut:
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
tutorial menempel bootstrap belum ada kang
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?
Kalau semisal no WA tersebut dibuat bisa di klik dan langsung terhubung dengan Whatsapp bagaimana caranya Kak?
Laravel ini sanagat bagus kk. Kk mau tanya gimana cara buat loginnya kk ?
Menggunakan visual studio dan terkoneksi ke laravelnya kk ?