MODUL 4
Pengenalan BootStrap sebagai komponen User Interface Pada Sistem Informasi
PRAKTIKUM
Pengenalan Bootsrap
Install AdminLTE gunakan sebagai tampilan pada BackEnd dengan cara:
Buat folder assets pada (namaAplikasi)/public/
Copy 3 folder :
pada folder (namaAplikasi)/public/asset tersebut.
Gunakan Index.php Pada AdminLTE, pecah menjadi 4 bagian, Header, footer, Navigation, dan Isi.
Buat File PHP dalam bagian VIEW untuk menampung Header, footer, Navigation, dan Isi tersebut:
Admin_header.php <!DOCTYPE html>
<html lang="en">
<head>
Dst.
Admin_nav.php <!-- Main Sidebar Container -->
Dst.
Admin_footer.php <footer class="main-footer">
Dst.
Home.php <div class="wrapper">
Dst.
Panggil pada Fungsi Index di Controller.
public function index()
{
echo View('Admin_header');
echo View('Admin_nav');
echo View ('Home');
echo View('Admin_footer');
}
Tambahkan script berikut agar dapat membaca path plugin dan folder lain pada AdminLTE
<base href="<?= base_url("assets") ?>/">
Buat Tampilan User Interface sesuai kebutuhan Anda.
Gunakan Sidebar sesuai kebutuhan.
Buat Menu sederhana sebagai berikut pada Navigasi.
Isilah link pada navigasi Anda sesuai dengan Controllers/Home yang bekerja Pada Halaman tersebut.
<li class="nav-item">
<a href="<?php echo site_url('Home/viewmhs');?>" class="nav-link">
<i class="nav-icon fas fa-edit"></i>
<p>
Manajemen Mahasiswa </p>
</a>
</li>
Pada Controllers/Home tambahkan halaman yang akan diload pada fungsi yang dituju.
public function viewmhs() {
$mhs = new Mahasiswa_model();
$datamhs = $mhs->tampildata();
$data = array('dataMhs'=> $datamhs,);
echo View('Admin_header');
echo View ('Viewmhs',$data);
echo View('Admin_footer');
}
Sehingga Link navigasi akan bekerja seperti berikut.
Ubah User Interface sesuai kebutuhan dengan menggunakan beberapa source dari AdminLTE.
Lakukan hal yang sama dengan form Input Mahasiswa.
<li class="nav-item">
<a href="<?php echo site_url('Home/forminputmhs');?>" class="nav- link">
<i class="nav-icon fas fa-edit"></i>
<p>
Input Data Mahasiswa </p>
</a>
</li>
Pastikan sudah terdapat fungsi yang dituju pada Controllers.
public function forminputmhs() {
echo View('Admin_header');
echo View('Admin_nav');
echo View ('Input_mhs');
echo View('Admin_footer');
}
Halaman akan tampil pada Menu Navigasi
Modifikasi sesuai kebutuhan Sistem Anda.
TUGAS :
Buatlah Sistem Informasi untuk UMKM dengan data sebagai berikut:
akan dibahas pada bab-bab berikutnya)
JENIS USAHA
DATA UMKM
DATA BOBOT
DATA KRITERIA
