Pendahuluan
Template merupakan desain antar muka antara sistem dengan pengguna. Desain template sebuah halaman aplikasi melibatkan beberapa frameword dan salah satunya adalah boostrap. Maka pada materi ini anda diharapkan sudah menguasi dasar-dasar boostrap.
Lalu apa saja yang perlu di persiapkan? berikut beberapa hal yang perlu anda persiapan untuk mengikuti materi ini:
- Boostrap
- Kemampuan di dalam memahami Javascirpt dan CSS
- Koneksi Internet
- Memahami materi sebelumnya
Materi:
A. Memahami Layout Halaman Website
Layout merupakan tatanan antarmuka antara user dengan sistem. Di dalam rancangan website tatanan atau susunan komponen terdiri dari:
- Header => Biasa berisikan informasi secara global
- Navbar => Berisikan menu atau item yang dapat dipilih
- Main/Konten => Merupakan konten utama
- Sidebar => Berisi item-item namun lebih spesifik
- Footer => Berisi informasi hak cipta.
Sebagian perancangan website terkadang menggabungkan antara sidebar dan konten sehingga layout terdiri dari header,navbar, konten, footer yang pada kasus ini kita juga akan melakukan hal yang sama.
B. Merancang Layout dengan Boostrap
Nah sekarang mari kita mulai merancang template admin untuk pustaka kita. Silahkan buka projek kita yang telah kita buat. Buka folder controller dan cari file bernama Home.php. Rubahlah script berikut:
menjadi
Buka folder Views dan tambahkan sebuah folder baru. Beri nama folder tersebut dengan nama "template". Tambahkan satu file baru ke dalam folder tersebut dan beri nama file tersebut dengan nama "temp_main.php". Perhatikan sctruktur foldernya:
📁views
📁templates
🮹temp_main.php
Letakkan script berikut kedalam file tersebut:
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Aplikasi Perpustakaan</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"></head><body><div class="header">Header</div><div class="navbar">Navbar</div><div class="konten"><h2>Beranda </h2></div><div class="footer"><div class="container"> copyright © <?= date('Y') ?></div></div></body></html>
Perhatikan terdapat link: <link rel="stylesheet" href="https://cdn..... Link ini bertugas untuk mengakses halaman boostrap secara online.
Sedangkan di dalam body kita meletakkan 4 komponen yaitu, header, navbar, konten dan footer. Sekarang kita akan menambahkan desain pada masing komponen. Jadi silahkan lengkapi masing-masing komponen seperti berikut:
1. Header:
<div class="header bg-light p-2"><div class="container text-center"><h4 class="text-info">APLIKASI PUSTAKA DIGITAL</h4><h2 class="text-success">control panel</h2></div></div>
2. Navbar
<div class="navbar bg-info"><nav class="container navbar navbar-expand-lg"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link text-white" href="">Beranda</a></li><li class="nav-item"><a class="nav-link text-white" href="">Buku</a></li><li class="nav-item"><a class="nav-link text-white" href="">Peminjaman</a></li><li class="nav-item"><a class="nav-link text-white" href="">Pengembalian</a></li><li class="nav-item"><a class="nav-link text-white" href="">Data Anggota</a></li><li class="nav-item"><a class="nav-link text-white" href="">Keluar</a></li></ul></nav></div>
3. Konten
<div class="konten container border mt-2"><h2 class="bg-primary text-white p-2 mt-2">Beranda </h2><?= $this->renderSection('konten'); ?></div>
4. Footer
<div class="footer bg-dark text-white text-center position-absolute w-100 sticky-bottom"><div class="container"> copyright © <?= date('Y') ?></div></div>
D. Membuat Homepage
Selanjutnya buatlah satu file lagi di dalam folder views dengan nama "v_beranda.php. Tambahkan Script Berikut:
<?php$this->extend('templates/temp_main');$this->section('konten');?><div class="main"><h6>Selamat Datang Di Aplikasi Pustaka</h6></div><?= $this->endSection();
Kembali ke Controllers dan buka file Home.php. Tambahkan dan edit script sehingga menjadi berikut:
class Home extends BaseController{public function index(): string{$data = ['title' => 'Beranda'];return view('v_beranda', $data);}}
Jalankan program anda. Beikut hasil desain template halaman kita tadi.
Penutup
Nah, sampai disini kita telah sukses membuat template. Apa selanjutnya,? kita akan mencoba menampilkan data dari database ke dalam aplikasi.
