Direktif @extends('layouts.main') di awal sebuah file Blade Laravel berfungsi untuk mewarisi kerangka atau master layout utama yang telah dibuat (dalam kasus Anda, file resources/views/layouts/main.blade.php).
Berikut adalah fungsi dan cara kerja detailnya:
Menghubungkan Halaman ke Template Utama: Memberitahu Laravel bahwa file tampilan (view) tersebut (seperti home.blade.php, profile.blade.php, atau operator.blade.php) adalah bagian turunan yang akan menumpang pada kerangka main.blade.php.
Memasukkan Komponen Konsisten Otomatis: Memastikan halaman turunan tersebut secara otomatis mendapatkan struktur HTML dasar, sidebar, navbar, serta tautan CSS dan JavaScript yang sudah dipasang di file master layout tanpa harus menulis ulang kodenya dari awal.
Bekerja Berpasangan dengan @section: Kode ini selalu digunakan bersamaan dengan @section('konten') ... @endsection. Bagian di dalam section tersebutlah yang nantinya akan disisipkan ke dalam posisi @yield('konten') yang ada di file main.blade.php.
6. Untuk melihat hasil dari template yang sudah Anda buat, Anda perlu mengarahkan route Laravel ke file home.blade.php tersebut dan menyalakan servernya.
Berikut adalah langkah-langkah untuk menjalankannya:
Langkah 1: Atur Route di web.php
Buka file routes/web.php yang ada di dalam proyek Laravel Anda. Pastikan route utama (/) memanggil view home yang baru saja Anda buat.
Ubah kodenya menjadi seperti ini:
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('home'); // Memanggil file resources/views/home.blade.php
});
Langkah 2: Jalankan Server Laravel
Buka Terminal di VS Code (klik menu Terminal > New Terminal di bagian atas).
Pastikan posisi terminal sudah berada di dalam folder proyek Anda (misalnya laravel10/coba1).
Ketik perintah berikut lalu tekan Enter: php artisan serve
Jika Menemukan error seperti ini:
Jika Anda meletakkan file home.blade.php di dalam folder layouts (sehingga letaknya menjadi resources/views/layouts/home.blade.php), maka pemanggilan view di dalam file routes/web.php harus disesuaikan.
Laravel menggunakan tanda titik (.) untuk membaca file yang berada di dalam sub-folder.
Solusi 1: Ubah kode di routes/web.php
Jika Anda ingin tetap meletakkannya di sana, ubah rute Anda menjadi seperti ini:
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('layouts.home'); // Memanggil file resources/views/layouts/home.blade.php
});
Jika Tampilannya:
Periksa Penulisan Nama File (styles.css vs style.css)
Buka panel sebelah kiri di VS Code dan arahkan ke folder public/template/css/. Perhatikan baik-baik nama file CSS yang ada di sana. Biasanya, template Start Bootstrap menggunakan nama styles.css (dengan akhiran huruf s).Rubah Klaimat Simple Sidebar dengan Tampilan:
Selamat Datang
Selamat Datang Di Halaman Web pertamaku
@extends('layouts.main')
@section('konten')
<h1 class="mt-4">Selamat Datang</h1>
<p>Selamat Datang Di Halaman Web pertamaku</p>
@endsection
Tugas:
menu halaman Profile ditambahkan isinya menjadi profile pribadi nama saya agung dan ada photonya
1. Siapkan File Foto
Siapkan file foto Anda (misalnya bernama agung.jpg). Buat folder baru bernama images di dalam folder public pada proyek Laravel Anda, lalu tempelkan (paste) foto tersebut ke dalamnya. Posisi filenya harus berada di public/images/agung.jpg.
2. Buat File View profile.blade.php Buka folder resources/views/ dan buat file baru bernama profile.blade.php. Salin kode berikut ke dalamnya. Kode ini menggunakan fitur Card dari Bootstrap agar foto dan teks terlihat rapi.
@extends('layouts.main')
@section('konten')
<h1 class="mt-4">Profil Pribadi</h1>
<div class="card mt-4 shadow-sm" style="max-width: 400px;">
<!-- Memanggil gambar dari folder public/images/ -->
<img src="{{ asset('images/agung.jpg') }}" class="card-img-top" alt="Foto Agung">
<div class="card-body text-center">
<h3 class="card-title">Agung</h3>
<p class="card-text text-muted">Web Developer</p>
<p class="card-text">Halo! Ini adalah halaman profil pribadi saya. Saya sedang belajar menggunakan framework Laravel dan Bootstrap.</p>
</div>
</div>
@endsection
3. Buat Route Baru di web.php
Buka file routes/web.php dan tambahkan pengaturan route baru untuk halaman profil di bawah route utama Anda:
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('layouts.home'); // Memanggil file resources/views/layouts/home.blade.php
});
// Route baru untuk halaman profil
Route::get('/profile', function () {
return view('layouts.profile');
});
4. Hubungkan Menu Sidebar ke Halaman Profil
Buka file master layout Anda di resources/views/layouts/main.blade.php. Cari daftar menu sidebar, tepatnya pada baris tulisan Profile:
<a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Profile</a>
Ubah isi href="#!" menjadi href="{{ url('/profile') }}" agar tombol tersebut mengarahkan pengguna ke halaman profil:
Jika Foto Profile Ga Muncul:
Letak posisi folder fotonya:
<img src="{{ asset('template/images/agung.jpg') }}" class="card-img-top" alt="Foto Agung">
Sekarang Rapihkan
Buka file resources/views/profile.blade.php Anda dan ubah seluruh isinya menjadi kode berikut:
@extends('layouts.main')
@section('konten')
<h1 class="mt-4 mb-4">Profil Pribadi</h1>
<div class="card shadow-sm mb-3" style="max-width: 800px;">
<div class="row g-0">
<!-- Bagian Kiri: Foto -->
<div class="col-md-4 d-flex align-items-center">
<img src="{{ asset('template/images/agung.jpg') }}" class="img-fluid rounded-start" alt="Foto Agung" style="width: 100%; height: auto; object-fit: contain;">
</div>
<!-- Bagian Kanan: Teks Teks -->
<div class="col-md-8">
<div class="card-body">
<h3 class="card-title">Agung</h3>
<p class="card-text text-muted mb-4">Web Developer</p>
<h5 class="mt-3">Tentang Saya</h5>
<p class="card-text">
Halo! Ini adalah halaman profil pribadi saya. Saya sedang belajar mengembangkan aplikasi website menggunakan framework Laravel dan desain antarmuka menggunakan Bootstrap.
</p>
<h5 class="mt-4">Kontak</h5>
<ul class="list-unstyled">
<li><strong>Email:</strong> agung@example.com</li>
<li><strong>Lokasi:</strong> Indonesia</li>
</ul>
</div>
</div>
</div>
</div>
@endsection
Buat Form operator:
Sumber: https://gemini.google.com/app/b9465e80b7b9eda0
.jpeg)
