TUJUAN
Setelah kita mempelajari bagaimana membuat tabel, record di laravel dengan memanfaatkan migration dan seeder, dan kita sudah membuat dua buah tabel (tabel list, dan kegiatan) serta menambahkan masing-masing record pada tabel tersebut. Selanjutnya adalah membuat user interface agar data tersebut dapat tampil ke pemakai.
UI/UX yang kita rancang kali ini menggunakan Boostrap, kenapa boostrap buka tailwind yang lebih kompatible dengan laravel? boostrap memiliki kelebihan, selain mudah di gunakan bagi pemula, tampilan lebih konsisten dan code lebih rapi dari pada tailwind. Kita juga dapat memanfaatkan icon boostrap nantinya agar tampilan lebih elegan. selain itu kita dapat menggunakan datatable. ya
Setelah mempelajari materi ini anda dapat membuat desain usertface sederhana dengan di laravel dan responsive serta elegan hingga menarik peminat untuk mengunjungi web/aplikasi yang anda rancang.
Mari kita Mulai
MASUK KE MATERI
Membuat Template
Langkah pertama kita adalah membuat template terlebih dahulu. Silahkan buat folder baru di Resources=>View. Buat folder baru dan satu file baru di dalamnya. Beri nama file tersebut dengan dashboard.blade.php dan folder dengan nama templates. Kemudian di dalam folder templates buat satu folder bernama tem_main.blade.php. Berikut bentuk susunannya
📂View
📂templates
📋 temp_main.blade.php
📋 dashboard.blade.php
Sekarang mari kita mulai dari temp_main-nya. silahkan ketikan script html ke dalamnya.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Latihan CRUD | Barintek</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"></head><body><header class="container-fluid bg-warning text-center p-4"><h3>AGENDA BARINTEK</h3><h6>https://laravel-barintek.com</h6></header><nav class="navbar navbar-expand-sm bg-info container-fluid"><div class="navbar-nav container"><a class="nav-link active" href="/">Home</a><a class="nav-link" href="#">Profil</a><a class="nav-link" href="#">List Agenda</a><a class="nav-link" href="#">Kegiatan</a></div></nav><main class="container">@yield('main')</main></body></html>
Desain ini menggunakan library boostrap. Sedangkan pada navbar kita menggunakan menu Home, profil, List agenda dan Kegiatan. Perhatikan pada main kita menggunakan blade @yield dengan nama main. Ini berfungsi untuk memecah file menjadi beberapa bagian nantinya. Agar tampilan lebih menarik lagi, kita bisa tambahkan icon. Jadi tambahkan link ini beserta edit link di navbar:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Latihan CRUD | Barintek</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">{{-- Gaya CSS Tambahan untuk Flexbox --}}<style>body {display: flex;flex-direction: column;min-height: 100vh;}main {flex: 1;/* Ini akan membuat main mengambil sisa ruang yang tersedia */}</style></head><body class="bg-dark"><header class="container-fluid bg-warning text-center p-4"><h3>AGENDA BARINTEK</h3><h6>https://laravel-barintek.com</h6></header><nav class="navbar navbar-expand-sm bg-info container-fluid"><div class="navbar-nav container"><a class="nav-link active" href="/"><i class="bi bi-house-door-fill"></i> Home</a><a class="nav-link" href="#"><i class="bi bi-person-fill"></i> My Profil</a><a class="nav-link" href="#"><i class="bi bi-list-task"></i> List Agenda</a><a class="nav-link" href="#"><i class="bi bi-activity"></i> Kegiatan</a></div></nav><main class="container bg-white p-3">@yield('main')</main><footer class="bg-secondary text-white text-center p-3 mt-auto"><p class="mb-0">© 2025 AGENDA BARINTEK. All Rights Reserved.</p></footer></body></html>
Disini kita menambahkan sentukah bacground pada body dan main. serta kita menambahkan footer sebagai hak cipta.
Membuat Dashboard
Sekarang mari kita desain dulu Home/Dashboard sebagai halaman utama. buka file dashboard.blade.php dan ketikkan perintah ini:
@extends('templates.tem_main')@section('main')<div class="container mt-3"><h2 class="mb-4">DASHBOARD</h2></div>@endsection
@extends(...) akan memanggil template yang telah kita buat. Sedangkan templates adalah nama folder dan tem_main adalah nama file-nya. sedangkan @section akan memilih jenis seleksi. Karena di template tadi kita membuat nama @yield dengan nama main, maka nama inilah kita masukkan ke @section.
Sekarang mari kita percantik lagi tampilannya dengan menambahkan cardview.
@extends('templates.tem_main')@section('main')<div class="container mt-3"><h2 class="mb-4">DASHBOARD</h2><div class="row"><div class="col-md-4 mb-4"><div class="card bg-primary text-white shadow-sm h-100"><div class="card-body"><div class="d-flex justify-content-between align-items-center"><div><div class="fs-5 fw-bold text-uppercase">Total Agenda</div><h1 class="display-4 fw-bold">25</h1></div><i class="bi bi-calendar-check-fill fs-1"></i></div></div></div></div>{{-- Card untuk Agenda Minggu Ini --}}<div class="col-md-4 mb-4"><div class="card bg-success text-white shadow-sm h-100"><div class="card-body"><div class="d-flex justify-content-between align-items-center"><div><div class="fs-5 fw-bold text-uppercase">Agenda Minggu Ini</div><h1 class="display-4 fw-bold">10</h1></div><i class="bi bi-calendar-week-fill fs-1"></i></div></div></div></div>{{-- Card untuk Agenda Selesai --}}<div class="col-md-4 mb-4"><div class="card bg-info text-white shadow-sm h-100"><div class="card-body"><div class="d-flex justify-content-between align-items-center"><div><div class="fs-5 fw-bold text-uppercase">Agenda Selesai</div><h1 class="display-4 fw-bold">85</h1></div><i class="bi bi-journal-check fs-1"></i></div></div></div></div></div><hr>{{-- Section: Daftar Agenda Terbaru --}}<div class="card shadow-sm mt-4"><div class="card-header bg-light"><h4 class="mb-0">Daftar Agenda Terbaru</h4></div><div class="card-body"><div class="table-responsive"><table class="table table-striped table-hover mb-0"><thead><tr><th><i class="bi bi-calendar-event"></i> Tanggal</th><th><i class="bi bi-card-text"></i> Judul Agenda</th><th><i class="bi bi-clock"></i> Waktu</th><th><i class="bi bi-geo-alt"></i> Lokasi</th></tr></thead><tbody><tr><td>29 Agustus 2025</td><td>Rapat Koordinasi Proyek XYZ</td><td>09:00 - 11:00</td><td>Ruang Rapat Utama</td></tr><tr><td>30 Agustus 2025</td><td>Workshop Peningkatan Keterampilan</td><td>13:00 - 15:00</td><td>Gedung B, Aula 2</td></tr><tr><td>01 September 2025</td><td>Pertemuan Klien A</td><td>10:00 - 11:30</td><td>Virtual (Zoom)</td></tr></tbody></table></div></div></div></div>@endsection
Membuat Router
Silahkan buka kembali proyek yang telah dibuat sebelumnya dengan vscode. Pertama-tama kita akan membuat Route terlebih dahulu. Jadi di strukutur proyek buka cari folder Routes dan buka file web.php. Rubah jalurnya:
menjadi:
Berikut bentuk sementara ketika di jalankan:
Membuat Datatable:
Sekarang tambahkan library di tem_main.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"><link href="https://cdn.datatables.net/2.0.8/css/dataTables.bootstrap5.min.css" rel="stylesheet">
Kemudian tambahkan juga script js. script ini ditulis di bawah tag link yang kita tambahkan tadi. yaitu di dalam tag <head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><script src="https://cdn.datatables.net/2.0.8/js/dataTables.min.js"></script><script src="https://cdn.datatables.net/2.0.8/js/dataTables.bootstrap5.min.js"></script>
Selanjutnya kita buat code jQuery dan tambahkan di bawah tag </body>:
<script>$(document).ready(function() {$('#myTable').DataTable();});</script>
myTable merupakan id dari tabel yang kita buat nantinya di view.
Buatkan view baru di dalam folder view dengan nama tema.blade.php. ketikkan code ini:
@extends('templates.tem_main')@section('main')<div class="container mt-5"><h2 class="mb-4">Daftar Tema</h2><div class="d-flex justify-content-end mb-3"><a href="#" class="btn btn-primary"><i class="bi bi-plus-circle-fill me-2"></i>Tambah Tema Baru</a></div><table id="myTable" class="table table-striped table-bordered" style="width:100%"><thead><tr><th><i class="bi bi-hashtag"></i> NO</th><th><i class="bi bi-tag-fill"></i> TEMA</th><th><i class="bi bi-chat-left-text"></i> KETERANGAN</th><th><i class="bi bi-gear-fill"></i> Aksi</th></tr></thead><tbody><tr><td>1</td><td>Olahraga</td><td>Olahraga Pagi</td><td><button class="btn btn-warning btn-sm me-2"><i class="bi bi-pencil-square"></i> Edit</button><button class="btn btn-danger btn-sm"><i class="bi bi-trash"></i> Hapus</button></td></tr><tr><td>2</td><td>Rapat</td><td>Rapat Organisasi</td><td><button class="btn btn-warning btn-sm me-2"><i class="bi bi-pencil-square"></i> Edit</button><button class="btn btn-danger btn-sm"><i class="bi bi-trash"></i> Hapus</button></td></tr></tbody></table></div>@endsection
Perhatikan pada id tabel. terdapat myTable yang sama dengan nama yang di buat di jquery.
Mari kita buat routenya. Buka kembali tem_main. dan berikan link pada tema seperti berikut:
<a class="nav-link" href="/tema"><i class="bi bi-list-task"></i> Tema Agenda</a>
Buka routers/web.php. Tambahkan route ini:
Route::get('/', function () {return view('dashboard');});Route::get('/tema', function () {return view('tema');});
Jalankan Aplikasi, klik menu Tema Agenda. Berikut hasilnya:
Sampai disini kita sudah selesai membuat desain untuk menampilkan data dari database ke halaman web. Data ini masih bersifat statis, artinya data belum bisa kita rubah. Anda bisa membuat desain untuk data kegiatan.
