bagaimana tampilan dari aplikasi yang akan dibangun. Software Balsamiq Mockup adalah salah satu software yang dapat digunakan untuk merancang desain aplikasi dengan dilengkapi fitur-
fitur yang mudah diakses pengguna.
3.2.1. Membuat Desain Mockup Website
Sebelum membuat aplikasi website, maka perlu merancang sebuah desain untuk mempermudah pengerjaan aplikasi. Aplikasi software yang dapat digunakan dan biasa digunakan
programmer untuk mendesain dashboard sebuah website adalah Balsamiq Mockup. Berikut adalah hasil dari rancangan desain yang dapat dibuat dalam software Balsamiq.
a Form Login Untuk membuat form login, desain yang dibuat menggunakan beberapa icon dari
balsamiq, kemudian menyisipkan logo perusahaan sebagai penanda bahwa aplikasi ini dimiliki oleh perusahaan yang bersangkutan. Fitur pendukung lainnya seperti textbox,
button dan lain sebagainya juga tersedia dalam software ini. Hasil desain untuk form login dapat dilihat pada Gambar 9.
Gambar 9. Form Login
b Home Desain yang digunakan untuk menu halaman home adalah menggunakan menu bar
yang digunakan untuk menyediakan menu-menu yang nantinya dapat diakses oleh user. Kemudian terdapat link untuk menghubungkan menu home dengan halaman lain sesuai
dengan text yang dituliskan pada link tersebut. Hasil desain untuk form homepage dapat dilihat pada Gambar 10.
Gambar 10. Homepage
c iTOS NBs Desain yang digunakan untuk menu iTos dan NBs, menggunakan menu bar yang
digunakan untuk menyediakan menu-menu yang nantinya dapat diakses oleh user. Kemudian terdapat link untuk menghubungkan menu home iTos dan NBs dengan
halaman lain sesuai dengan text yang dituliskan pada link tersebut. Hasil desain untuk form iTos dan NBs dapat dilihat pada Gambar 11.
Gambar 11. Menu dan Submenu iTOS NBs
d LiniOS Desain yang digunakan untuk menu LiniOS menggunakan menu bar yang digunakan
untuk menyediakan menu-menu yang nantinya dapat diakses oleh user. Kemudian terdapat link untuk menghubungkan menu home LiniOs dengan halaman lain sesuai
dengan text yang dituliskan pada link tersebut. Hasil desain untuk form LiniOS dapat dilihat pada Gambar 12.
Gambar 12. Menu dan Submenu LiniOS
e Halaman awal Menu Simulasi Tarif dan Billing Desain yang digunakan untuk menu halaman awal dari simulas tarif dan billing
adalah menampilkan tabel grid dari data-data yang berhasil disimpan kemudian terdapat icon add
+, edit, dan cetak. Hasil desain untuk form homepage menu simulasi tarif dan Billing dapat dilihat pada Gambar 13.
Gambar 13. Hompage Menu Simulasi Tarif dan Billing
f Form Submenu Delivery SP2Perpanjangan Receiving Desain yang digunakan untuk submenu halaman Delivery dan Receiving adalah
menampilkan form pengisian data yang nantinya akan disimpan kedalam database. Terdapat beberapa form textbox yang harus diisi, kemudian datepicker untuk memilih
tanggal yang diinginkan, combobox untuk memilih salah satu dari option yang disediakan dan button untuk aksi selanjutnya jika selesai mengisi setiap form. Hasil desain untuk
form delivery receiving dapat dilihat pada Gambar 14.
Gambar 14. Page Form Delivery, Receiving
g Desain Nota Untuk desain nota yang akan ditampilkan mengikuti format cetak nota yang
didapatkan dari perusahaan, yang nantinya setiap bagian yang ditampilkan akan dikoneksikan dengan database menggunakan source code. Hasil desain untuk tampilan
nota dapat dilihat pada Gambar 15.
Gambar 15. Tampilan Cetak Nota Tarif
3.2.2. Penerapan Template dengan Framework CodeIgniter
