Sederhana.co.id Semua Serba Sederhana
Hai Sobat Sederhana, pada kesempatan kali ini kita akan membahas cara membuat side bar sederhana dengan menggunakan framework Laravel. Side bar adalah salah satu elemen penting dalam sebuah website yang berfungsi untuk menampilkan menu navigasi pada halaman web. Tutorial ini akan membahas cara membuat side bar sederhana dengan mudah dan menyenangkan.
Persiapan
Sebelum memulai tutorial ini, pastikan kamulah sudah memiliki beberapa persiapan sebagai berikut:
1. |
Sudah menginstall Laravel di komputer |
2. |
Menguasai dasar-dasar HTML, CSS, dan PHP |
3. |
Memiliki editor teks seperti Sublime Text atau Visual Studio Code |
Membuat Template Dasar
Langkah pertama dalam membuat side bar adalah membuat template dasar untuk website. Buatlah file layout.blade.php pada direktori resources/views/ dan masukkan kode berikut:
<!DOCTYPE html><html><head><title>@yield('title') | Website Sederhana</title></head><body><div class="container">@yield('content')<div class="sidebar"><h2>Menu</h2><ul><li><a href="#">Home</a></li><li><a href="#">Profil</a></li><li><a href="#">Kontak</a></li></ul></div></div></body></html>
Kode di atas merupakan template dasar untuk website kita. Pada bagian @yield('content'), kita akan mengisi konten utama dari website. Sedangkan pada bagian <div class="sidebar">, kita akan menambahkan side bar.
Membuat Halaman Home
Langkah selanjutnya adalah membuat halaman home dan memanfaatkan template dasar yang telah kita buat. Buatlah file home.blade.php pada direktori resources/views/ dan masukkan kode berikut:
@extends('layout')@section('title', 'Home')@section('content')<h1>Selamat Datang di Website Sederhana</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices quis sem sit amet gravida. Nulla facilisi. Fusce iaculis luctus mauris, sed semper ante rutrum id. Morbi euismod condimentum consectetur. In hac habitasse platea dictumst. Curabitur ac est vel tellus ornare blandit nec a diam. Sed ut erat bibendum, lobortis augue in, feugiat odio. Proin aliquam felis eu tortor tempor, vel consequat sapien facilisis. Mauris at porta justo. Nullam lobortis est vel enim blandit eleifend. Integer placerat elit massa. Fusce eget nulla eu risus commodo eleifend in non purus. Sed aliquet ex a velit euismod, id dapibus metus porttitor.</p>@endsection
Di sini kita menggunakan sintaks @extends('layout') untuk menyatakan bahwa halaman home ini akan memanfaatkan template yang telah kita buat sebelumnya. Kemudian dengan menggunakan sintaks @section('title', 'Home'), kita menetapkan judul halaman menjadi “Home”. Pada blok @section('content'), kita menambahkan konten utama dari halaman home.
Membuat Halaman Profil
Langkah selanjutnya adalah membuat halaman profil dan memanfaatkan template dasar yang telah kita buat. Buatlah file profil.blade.php pada direktori resources/views/ dan masukkan kode berikut:
@extends('layout')@section('title', 'Profil')@section('content')<h1>Profil Saya</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices quis sem sit amet gravida. Nulla facilisi. Fusce iaculis luctus mauris, sed semper ante rutrum id. Morbi euismod condimentum consectetur. In hac habitasse platea dictumst. Curabitur ac est vel tellus ornare blandit nec a diam. Sed ut erat bibendum, lobortis augue in, feugiat odio. Proin aliquam felis eu tortor tempor, vel consequat sapien facilisis. Mauris at porta justo. Nullam lobortis est vel enim blandit eleifend. Integer placerat elit massa. Fusce eget nulla eu risus commodo eleifend in non purus. Sed aliquet ex a velit euismod, id dapibus metus porttitor.</p>@endsection
Di sini kita menggunakan sintaks @extends('layout') untuk menyatakan bahwa halaman profil ini akan memanfaatkan template yang telah kita buat sebelumnya. Kemudian dengan menggunakan sintaks @section('title', 'Profil'), kita menetapkan judul halaman menjadi “Profil”. Pada blok @section('content'), kita menambahkan konten utama dari halaman profil.
Membuat Halaman Kontak
Langkah selanjutnya adalah membuat halaman kontak dan memanfaatkan template dasar yang telah kita buat. Buatlah file kontak.blade.php pada direktori resources/views/ dan masukkan kode berikut:
@extends('layout')@section('title', 'Kontak')@section('content')<h1>Kontak Saya</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices quis sem sit amet gravida. Nulla facilisi. Fusce iaculis luctus mauris, sed semper ante rutrum id. Morbi euismod condimentum consectetur. In hac habitasse platea dictumst. Curabitur ac est vel tellus ornare blandit nec a diam. Sed ut erat bibendum, lobortis augue in, feugiat odio. Proin aliquam felis eu tortor tempor, vel consequat sapien facilisis. Mauris at porta justo. Nullam lobortis est vel enim blandit eleifend. Integer placerat elit massa. Fusce eget nulla eu risus commodo eleifend in non purus. Sed aliquet ex a velit euismod, id dapibus metus porttitor.</p>@endsection
Di sini kita menggunakan sintaks @extends('layout') untuk menyatakan bahwa halaman kontak ini akan memanfaatkan template yang telah kita buat sebelumnya. Kemudian dengan menggunakan sintaks @section('title', 'Kontak'), kita menetapkan judul halaman menjadi “Kontak”. Pada blok @section('content'), kita menambahkan konten utama dari halaman kontak.
Menampilkan Side Bar pada Semua Halaman
Selanjutnya, kita akan menambahkan side bar pada semua halaman yang telah kita buat. Untuk melakukannya, kita hanya perlu menambahkan block @include('sidebar') di dalam template dasar. Buatlah file sidebar.blade.php pada direktori resources/views/ dan masukkan kode berikut:
<div class="sidebar"><h2>Menu</h2><ul><li><a href="/">Home</a></li><li><a href="/profil">Profil</a></li><li><a href="/kontak">Kontak</a></li></ul></div>
Di sini kita menggunakan sintaks @include('sidebar') untuk memasukkan side bar ke dalam template dasar. Kode side bar yang kita buat sebelumnya di masukkan ke dalam file sidebar.blade.php.
Menambahkan CSS untuk Side Bar
Agar side bar terlihat lebih menarik, kita bisa menambahkan sedikit CSS. Buatlah file app.css pada direktori public/css/ dan masukkan kode berikut:
.container {display: flex;}.sidebar {width: 200px;background-color: #263238;padding: 20px;color: #fff;}.sidebar h2 {font-size: 20px;font-weight: bold;}.sidebar ul {list-style: none;margin: 0;padding: 0;}.sidebar li {margin-bottom: 10px;}.sidebar a {color: #fff;text-decoration: none;}.sidebar a:hover {color: #ccc;}
Di sini kita menetapkan warna latar belakang, warna teks, ukuran font, dan margin dari side bar. Selain itu, kita juga menetapkan tampilan saat cursor mouse berada di atas link menu.
Menjalankan Website
Setelah semua file telah dibuat, jalankan perintah php artisan serve pada terminal untuk menjalankan server. Buka browser dan akses http://localhost:8000 untuk melihat hasilnya. Anda akan melihat halaman home dengan side bar di sebelah kiri. Klik menu untuk mengunjungi halaman profil atau kontak dan lihat bahwa side bar tetap muncul di semua halaman.
FAQ
1. Apa itu side bar?
Side bar adalah elemen pada website yang ditampilkan di sisi kiri atau kanan layar dan berfungsi untuk menampilkan menu navigasi atau link ke halaman lain.
2. Mengapa perlu membuat side bar?
Side bar berguna untuk memudahkan pengunjung website dalam menavigasi dan menemukan informasi yang dibutuhkan. Selain itu, side bar juga dapat meningkatkan tampilan dan fungsionalitas website.
3. Apa itu Laravel?
Laravel adalah framework PHP yang populer dan banyak digunakan oleh para web developer. Laravel memudahkan pengembangan website dengan menyediakan fitur-fitur yang lengkap dan mudah digunakan.
Kesimpulan
Sekarang Anda telah berhasil membuat side bar sederhana dengan menggunakan framework Laravel. Anda telah mempelajari cara membuat template dasar, halaman-halaman utama, dan menambahkan side bar pada semua halaman. Selain itu, Anda juga telah belajar cara menambahkan CSS dan menjalankan website secara lokal. Semoga Bermanfaat dan sampai jumpa di artikel menarik lainnya.