Download Link Template:
https://startbootstrap.com/template/simple-sidebar
https://github.com/startbootstrap/startbootstrap-simple-sidebar/archive/gh-pages.zip
1. Pindahkan Aset (CSS, JS, Gambar) ke Folder public
Folder public di Laravel adalah tempat yang bisa diakses langsung oleh browser.
Buka folder template Bootstrap yang sudah Anda unduh.
Cari folder seperti css, js, images, fonts, atau vendor.
Salin (copy) semua folder tersebut.
Buka folder proyek Laravel Anda, lalu masuk ke folder public.
Buat folder baru di dalam public dengan nama template (opsional, agar rapi).
Tempel (paste) semua folder aset tadi ke dalam folder public/template/
2. Buat File Master Layout Blade
Laravel menggunakan sistem templating bernama Blade. Praktik terbaiknya adalah membuat satu file layout utama (master) agar Anda tidak perlu mengulang kode header dan footer di setiap halaman.
Buka teks editor (VS Code), masuk ke folder resources/views/.
Buat folder baru bernama layouts.
Di dalam folder layouts, buat file baru bernama main.blade.php.
Buka file index.html dari template Bootstrap Anda, copy seluruh isinya, dan paste ke dalam main.blade.php.
3. Sesuaikan Path Aset dengan Fungsi asset()
File HTML dari template biasanya memanggil CSS/JS seperti ini:
<link rel="stylesheet" href="css/style.css">
Di Laravel, Anda harus membungkus path tersebut dengan fungsi {{ asset() }} agar framework mengetahui lokasi absolut file tersebut di folder public.
Ubah semua pemanggilan CSS, JS, dan Gambar di dalam main.blade.php menjadi seperti ini:
Sebelum:
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<link href="css/styles.css" rel="stylesheet" />
<script src="js/scripts.js"></script>
<img src="images/logo.png">
<script src="js/main.js"></script>
Sesudah:
<link rel="icon" type="image/x-icon" href="{{ asset('template/assets/favicon.ico') }}" />
<link rel="stylesheet" href="{{ asset('template/css/style.css') }}">
<script src="{{ asset('template/js/scripts.js') }}"></script>
<img src="{{ asset('template/images/logo.png') }}">
<script src="{{ asset('template/js/main.js') }}"></script>
4. Pisahkan Area Konten dengan @yield
Masih di dalam main.blade.php, cari bagian HTML yang merupakan konten utama (bagian yang akan berubah-ubah tiap halaman, misalnya isi artikel atau form). Hapus elemen konten tersebut dan ganti dengan kode ini:
Sebelum:
<div class="container-fluid">
<h1 class="mt-4">Simple Sidebar</h1>
<p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
<p>
Make sure to keep all page content within the
<code>#page-content-wrapper</code>
. The top navbar is optional, and just for demonstration. Just create an element with the
<code>#sidebarToggle</code>
ID which will toggle the menu when clicked.
</p>
</div>
Sesudah:
<!-- Page content-->
<div class="container-fluid">
<!-- Area ini yang akan diganti-ganti isinya -->
@yield('konten')
</div>
5. Selanjutnya, buat file baru untuk menampung teks konten yang tadi dihapus. Simpan file ini sebagai resources/views/home.blade.php:
@extends('layouts.main')
@section('konten')
<h1 class="mt-4">Simple Sidebar</h1>
<p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
<p>
Make sure to keep all page content within the
<code>#page-content-wrapper</code>
. The top navbar is optional, and just for demonstration. Just create an element with the
<code>#sidebarToggle</code>
ID which will toggle the menu when clicked.
</p>
@endsection
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
0 Comments
