Teknik Analisis Data METODE PENELITIAN
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
77 Selain
load pada template bagian View sistem peminjaman berbasis web, Bootstrap-datepicker
dan DataTables juga perlu “dipanggil” untuk dapat tampil dan berfungsi dengan baik tiap halaman. Pemanggilan Bootstrap-datepicker
dilakukan pada file bootstrap-datepicker.js di dalam folder assetsjs. Pada bagian
bawah file tersebut ditambahkan script sebagai berikut:
... function{
[data-provide=datepicker-inline].datepicker; JS to trigger the datepicker
.trigger-datepicker.datepicker{ format: dd-mm-yyyy,
language: id, startView: 2,
todayBtn: true, todayHighlight: true,
weekStart: 1 };
mmbr_birth-date.datepicker .onchangeDate, functione{
mmbr_birth.vale.formatdd-mm-yyyy; };
mmbr_expiredate-date.datepicker .onchangeDate, functione{
mmbr_expiredate.vale.formatdd-mm-yyyy; };
eqpmitem_receivedate-date.datepicker .onchangeDate, functione{
eqpmitem_receivedate.vale.formatdd-mm-yyyy; };
clctitem_receivedate-date.datepicker .onchangeDate, functione{
clctitem_receivedate.vale.formatdd-mm-yyyy; };
stck_receivedate-date.datepicker .onchangeDate, functione{
stck_receivedate.vale.formatdd-mm-yyyy; };
.input-daterange.datepicker{ format: dd-mm-yyyy,
language: id, startView: 0,
todayBtn: false, todayHighlight: true,
weekStart: 1 };
loan_actualdate-date.datepicker .onchangeDate, functione{
loan_actualdate.vale.formatdd-mm-yyyy; };
srvc_date-date.datepicker .onchangeDate, functione{
srvc_date.vale.formatdd-mm-yyyy; };
78
srvc_fixdate-date.datepicker .onchangeDate, functione{
srvc_fixdate.vale.formatdd-mm-yyyy; };
take_date-date.datepicker .onchangeDate, functione{
take_date.vale.formatdd-mm-yyyy; };
}; ...
Sementara pemanggilan pada DataTables dilakukan dengan cara menambahkan
script pada bagian bawah file dataTables.tableTools.js di dalam folder pelat\assets\DataTables-1.10.0\extensions\TableTools\js. Script yang
ditambahkan sebagai berikut:
... DataTables API
document.readyfunction { var table = search.DataTable;
var tt = new .fn.dataTable.TableTools table ; } ;
document.readyfunction { var table = search2.DataTable;
var tt = new .fn.dataTable.TableTools table ; } ;
...
2 Halaman Home. Halaman Home memuat menu navigasi Home,
Alat, Bahan, Koleksi, dan Login. Halaman Home tidak memuat data dari basis data sehingga tidak memiliki
script model. Admin dan operator dapat mengakses Halaman Login dengan cara klik
link Login pada menu navigasi atau tombol Login di tengah halaman Home. Tampilan halaman Home ditunjukkan pada Gambar
28.