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