75
b. Rekayasa antarmukatampilan
Rekayasa sistem peminjaman berbasis web menggunakan CodeIgniter
sebagai framework dengan konsepmetode MVC Model-Controller-View. Script
Controller, Model, dan View secara lengkap ada pada source code CD. Berikut
disajikan penjelasan beberapa halaman hasil rekayasa sistem peminjaman dalam bentuk gambar beserta potongan
script Controller, Model, dan View:
1 konfigurasi sistem peminjaman berbasis web. Beberapa hal
perlu disiapkan agar sistem dapat berfungsi dengan baik, diantaranya dengan mengatur
konfigurasi config.php
dan database.php
pada folder
pelatapplicationconfig. Pada config.php dilakukan pengaturan base URL sistem
dengan mengubah script pada bagian config[base_url]. Misalnya sistem dapat
diakses melalui IP 192.168.0.105, maka script menjadi seperti berikut ini:
... config[base_url] = http:192.168.0.105pelat;
...
Pada database.php dilakukan pengaturan koneksi ke basis data seperti hostname basis data, username basis data, password basis data, dan database
yang akan digunakan sistem. Misalnya username pada basis data “root” dengan
password “skarose” dan database yang digunakan adalah “pelat” maka script menjadi seperti berikut:
... db[default][hostname] = localhost;
db[default][username] = root; db[default][password] = skarose;
db[default][database] = pelat; ...
76 Bootstrap, Bootstrap-datepicker, dan DataTables sebagai komponen
tambahan dalam pengembangan sistem peminjaman berbasis web perlu di-load
terlebih dahulu agar dapat berfungsi. Cara me- load Bootstrap, Bootstrap-
datepicker, dan DataTables ditunjukkan pada script admin_template.php berikut:
DOCTYPE html html lang=en
head meta charset=utf-8
meta http-equiv=X-UA-Compatible content=IE=edge meta name=viewport content=width=device-width, initial-
scale=1.0 meta name=description content=Sistem Peminjaman Alat Studio
Multimedia SMK 2 Sewon meta name=author content=Tim ICT SMK 2 Sewon
link rel=shortcut icon href=?php echo base_url.assetsimagesfav_icon.png; ?
title?php echo issettitle ? title : ; ?title link rel=stylesheet href=?php echo
base_url.assetscssbootstrap.css; ? link rel=stylesheet href=?php echo
base_url.assetscssdataTables.bootstrap.css; ? link rel=stylesheet href=?php echo
base_url.assetscssdatepicker3.css; ? link rel=stylesheet href=?php echo
base_url.assetscssstyle.css; ? head
body id=?php echo issettitle ? title : ; ? div id=navigation
?php this-load-viewadmin_navigation; ? div
div class=container ?php this-load-viewmain_view; ?
div div id=footer
?php this-load-viewfooter; ? div
script src=?php echo base_url.assetsjsjquery-1.11.0.js; ? script
script src=?php echo base_url.assetsjsbootstrap.js; ? script
script src=?php echo base_url.assetsjsbootstrap- datepicker.js; ? script
script src=?php echo base_url.assetsjsbootstrap- datepicker.id.js; ? script
script src=?php echo base_url.assetsDataTables- 1.10.0mediajsjquery.dataTables.js; ? script
script src=?php echo base_url.assetsjsdataTables.bootstrap.js; ? script
script src=?php echo base_url.assetsDataTables- 1.10.0extensionsTableToolsjsdataTables.tableTools.js; ? script
body html