Gambar 22. Form Date Picker
Untuk tata letak form sehingga rapi dan teratur dapat menggunakan float leftright sehingga form- form dapat mudah diakses. Setelah selesai menulis source code form inputan data
seperti pada Code 17, maka hasil dari halaman yang disediakan untuk inputan data baik data baru maupun data yang telah ada pada database dapat dilihat pada Gambar 23.
Gambar 23. Form Input Data
3.2.3.5. Menu Button Back, Save, Print
Setelah menampilkan rincian nota print, aplikasi website ini menyediakan tiga button yang masing- masing memiliki fungsi :
a Back Untuk dapat menampilkan button Back dapat menggunakan kode program seperti pada Code 18.
Code 18 berfungsi menampilkan button Back teks Back diinisialisasikan dalam value, button akan ditampilkan jika menggunakan type dan
id = submit
, kemudian menggunakan fungsi
onClick
sehingga button dapat berfungsi dan beralih ke link halaman yang dituju. Untuk button back digunakan untuk kembali ke halaman sebelumnya atau fungsi cancel jika tidak ingin
mencetak nota print. Pada fungsi
onClick
tertulis
histrory.go-1
yang berfungsi kembali ke
CODE 18: input
name =
submit type
= submit
id =
submit onClick
= history.go-1;return
true; value
= Back
halaman sebelumnya. Untuk hasil penerapan kode program Code 18 dapat dilihat pada Gambar 24.
Gambar 24. Button Back
b Save Untuk dapat menampilkan button Save dapat menggunakan kode program seperti pada Code 19.
Code 19 berfungsi menampilkan button Save teks save diinisialisasikan dalam value, button akan ditampilkan jika menggunakan type dan
id = submit
, kemudian menggunakan fungsi
onClick
sehingga button dapat berfungsi dan beralih ke link halaman yang dituju. Untuk button back digunakan untuk kembali ke halaman sebelumnya atau fungsi cancel jika tidak ingin
mencetak nota print. Pada fungsi
onClick
tertulis location.href dan link dari halaman yang akan dituju yang berfungsi kembali ke halaman selanjutnya. Untuk hasil penerapan kode program
Code 19 dapat dilihat pada Gambar 25.
Gambar 25. Button Save
c Print Untuk dapat menampilkan button Print dapat menggunakan kode program seperti pada Code 20.
Code 20 berfungsi menampilkan button Print teks print diinisialisasikan dalam value, button akan ditampilkan jika menggunakan type dan
id = submit
, kemudian menggunakan fungsi
onClick
sehingga button dapat berfungsi dan beralih ke link halaman yang dituju. Untuk button back digunakan untuk kembali ke halaman sebelumnya atau fungsi cancel jika tidak ingin
mencetak nota print. Pada fungsi
onClick
tertulis location.href dan link dari halaman yang akan dituju yang berfungsi kembali ke halaman selanjutnya. Untuk hasil penerapan dari kode program
Code 20 dapat dilihat pada Gambar 26.
fCODE 19: input
name =
submit type
= submit
id =
submit onclick
= location.href=
?php
echo base_url
? HomeControllersaveprint
? =
customer ?
value =
Save
CODE 20: input
name =
submit type
= submit
id =
submit onclick
= location.href=
?php
echo base_url
? HomeControllerprintpdf
? =
customer ?
value =
Print
Gambar 26. Button Print
Berikut adalah tampilan website aplikasi hasil penerapan template dan konten- konten yang ada dalam aplikasi simulasi tarif ini :
a Halaman Login dapat dilihat pada Gambar 27.
Gambar 27. Login
a Halaman “Home” dapat dilihat pada Gambar 28.
Gambar 28. Home
b Menu dropdown pada navbar yang disediakan oleh aplikasi ini dapat dilihat pada Gambar 29
Gambar 29. Menu Dropdown pada Navbar
c Halaman Utama jika memilih diantara menu dropdown pada navbar dapat dilihat pada Gambar 30.
Gambar 30. HomePage Menu Utama
d Halaman pengisian form jika memilih menu add pada halaman sebelumnya dapat dilihat pada Gambar 31
Gambar 31. Halaman Form Input Data
e Halaman untuk menampilkan nota tarif dari data yang dipilih sebelumnya dapat dilihat pada Gambar 32.
Gambar 32. Halaman Rincian Nota Tarif
f Halaman untuk mencetak nota tarif yang dipilih dapat dilihat pada Gambar 33
Gambar 33. Halaman Print Nota Cetak
3.2.4. Penerapan dan Penggunaan Fungsi Dalam Aplikasi Simulasi Tarif
