Instrumen Pengujian Sistem oleh User

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