Gambar 4.21 UI Storyboard Menu Login dan Tampilan Awal

1 4.1.1. User Interface Storyboard User interface (UI) storyboard merupakan penggambaran dari navigasi desain sistem yang diusulkan. Penggambaran ini dipergunakan sebagai panduan alur dari tampilan pada aplikasi yang diusulkan. Berikut UI Storyboard untuk setiap menu pada rancangan aplikasi yang diusulkan: Gambar 4.21 UI Storyboard Menu Login dan Tampilan Awal UI Storyboard menu login dan tampilan awal menggambarkan alur tampilan pada navigasi login, logout, serta tampilan awal dari aplikasi yang diusulkan. User yang ingin menggunakan aplikasi dapat memasukkan domain aplikasi pada tab browser internet yang digunakan. Menu login akan muncul dan user dapat melakukan login. User yang tidak memiliki username dan password, maka dapat melakukan login sebagai guest. Jika user login ke dalam sistem sebagai guest, maka tampilan yang dapat dilihat hanya menu dashboard saja. User yang memiliki username dan password dapat mengakses penuh aplikasi. Tampilan di atas merupakan tampilan dari user yang memiliki akses penuh ke

2 dalam sistem dimana terdapat menu lain selain menu dashboard yaitu menu RAB, log registry, serta source list. Di dalam menu dashboard terdapat tampilan kurva S dari setiap proyek yang dipilih user. User dapat memilih proyek pada tabel dibawah kurva S. Tampilan dari total nilai proyek, RAB serta konsumsi dari RAB terdapat di samping dari kurva S. Gambar 4.22 UI Storyboard Tampilan Awal RAB Gambar 4.23 UI Storyboard Menu RAB Tampilan awal dari menu RAB menampilkan tombol add new RAB serta tampilan tabel RAB yang telah dibuat di samping kanan dari button tersebut. Setelah memilih tombol add

3 new RAB, maka akan muncul tampilan detil RAB beserta tabel RRAB. User harus mengisi detil dari RAB terlebih dahulu serta save RAB barulah user dapat membuat kelengkapan untuk pembuatan RAB seperti edit RAB, add new AHS, make RAB, serta back to RRAB. Gambar 4.24 UI Storyboard Menu RAB, Gallery, dan S Curve Menu RAB yang telah dipilih dapat di upload gambar terkait proyek tersebut. User juga dapat melihat dan memonitor RAB yang telah dibuat dalam diagram kurva S yang terbentuk otomatis berdasarkan data yang diisi dalam detil RAB. Gambar diatas memperlihatkan beberapa hasil gambar yang di upload beserta kurva S yang dapat dilihat apabila memilih tab gallery atau tab kurva S.

4 Gambar 4.25 UI Storyboard Menu Source List Menu source list merupakan menu kumpulan dari sumber-sumber data yang terkait di dalam proses bisnis perencanaan, penganggaran serta persiapan proyek. Sumber data tersebut terdiri dari surat jalan, purchase order, invoice, surat perintah kerja (SPK), dan vendor. User dapat memilih sesuai dengan akses yang dimiliki. Bagian Administrasi dan Keuangan dapat mengakses surat jalan, invoice, resource list, dan SPK. Untuk vendor dapat diakses oleh Bagian Administrasi dan Keuangan serta Bagian Perancangan dan Perencanaan. Khusus sumber PO hanya dapat diakses oleh Manager Operasional.

5 Gambar 4.26 UI Storyboard Menu Purchase Order Menu PO yang diakses oleh Manager Operasional digunakan untuk memesan barangbarang yang dibutuhkan kepada vendor untuk melaksanakan proyek konstruksi. Purchase order detil akan muncul apabila user memilih tombol add new PO. Apabila user telah selesai memasukkan data PO, maka user dapat mengisi detil pesanan dari PO dengan memilih tombol make PO. Apabila seluruh data PO telah terisi, user dapat save PO dan cetak PO. PO yang sudah di save akan muncul dalam tabel daftar PO. 4.1.2. Design The User-Interface User interface merupakan tampilan aplikasi yang berhubungan langsung dengan user. Tampilan utama yang diusulkan dirancangan berdasarkan analisa pada system sequence diagram. Hubungan antara user dan system ditampilkan lebih nyata dalam rancangan user interface. Rancangan tampilan aplikasi yang diusulkan memiliki beberapa standarisasi dan bentuk-bentuk form sebagai berikut : 1. Standarisasi Tombol Tombol yang digunakan dalam aplikasi yang diusulkan berbentuk icon sebagai simbol action yang akan dilakukan. Adapun keterangan dari beberapa tombol yang menggunakan icon dalam aplikasi yang diusulkan sebagai berikut :

6 No Tombol Keterangan 1 Add detil 2 3 4 Merubah detil untuk Hapus data dan detil Cancel Tabel 4.13 Keterangan Standarisasi Tombol 2. Menu Transaksi Menu transaksi pada aplikasi yang diusulkan terdapat pada menu RAB yang berisikan RAB, RRAB, dan AHS. Selain itu menu transaksi terdapat di dalam menu source list untuk menu PO, surat jalan, dan invoice. Berikut tampilan masing-masing menu transaksi : a. Menu transaksi RAB Gambar 4.27 Menu RAB User memilih menu RAB, memilih tombol add new RAB. Rab_id akan terbentuk secara otomatis pada data RAB. User input detil RAB kemudian save RAB. RAB akan terbentuk di dalam aplikasi dan user baru dapat memilih tombol add new AHS untuk membuat AHS.

7 b. Menu transaksi AHS Gambar 4.28 Tampilan AHS User memilih tombol add new AHS, sistem secara otomatis menambahkan nomor AHS yang baru. User dapat memasukkan data AHS sesuai dengan kebutuhan proyek kemudian memasukkan detil dari AHS. Setelah detil AHS terisi sesuai dengan kebutuhan proyek konstruksi aplikasi menampilkan jumlah harga dari detil AHS yang telah dimasukkan kemudian user dapat save AHS. AHS yang terbentuk akan tersimpan dan membentuk tabel RRAB sebagai realisasi dari analisa pada AHS dan RAB yang telah dibuat. RRAB dapat di update dan delete sesuai dengan realisasi proyek. Tampilan dari kumpulan AHS yang membentu RRAB sebagai berikut :

8 Gambar 4.29 Tampilan RRAB c. Menu transaksi make RAB Gambar 4.30 Tampilan Membuat RAB Jika User ingin mencetak RAB yang telah dibuat, maka user dapat memilih tombol make RAB pada menu RAB dan akan tampil form seperti bagan di atas. Tampilan form tersebut dimaksudkan untuk mencetak RAB dan melakukan modifikasi tambahan untuk tampilan cetak RAB yang akan diberikan kepada client. Jika user input uraian pekerjaan dan volume, sistem akan menampilkan harga satuan, satuan, dan biaya secara otomatis berdasarkan AHS yang telah dibuat. Apabila user telah selesai memasukkan data dapat memilih submit pada pilihan dengan tanda + dan jumlah akan dihitung oleh sistem. User dapat memilih print PDF apabila telah selesai melakukan kegiatan pada form make RAB. d. Menu transaksi SPK

9 Gambar 4.31 Tampilan SPK User yang sudah melakukan negosiasi dengan client atas RAB yang telah dibuat akan melakukan assign atau pencantuman SPK dengan RAB yang disetujui antara perusahaan dengan client. User memilih tombol add new SPK kemudian user baru dapat memasukkan data dari SPK tersebut. kode_spk akan terbentuk otomatis dan user memilih RAB yang sesuai dengan perjanjian dengan client. Setelah seluruh data lengkap terisini user dapat memilih save dan SPK yang terbentuk akan muncul dalam tabel daftar SPK. e. Menu transaksi PO Gambar 4.32 Tampilan PO

10 User membuka menu PO, memilih vendor yang diinginkan sesuai yang terdapat pada databe vendor. Setelah vendor terisini user harus memasukkan RAB yang terkait dengan PO yang dibuat sekaligus mengisi detil dari PO. Detil PO yang diisi oleh user digunakan untuk mendefinisikan barang-barang yang akan dipesan kepada vendor yang telah dicantumkan pada data PO. Definisi barang berupa deskripsi, jumlah barang, satuan, harga satuan dengan memilih tombol + dalam form detil PO. Sistem akan secara otomatis menghitung jumlah harga dari datadata yang dimasukkan user. Berikut tampilan dari detil PO yang dimaksud : Gambar 4.33 Tampilan Detil PO f. Menu transaksi invoice Gambar 4.34 Tampilan Invoice User yang telah mengirimkan PO tentu akan menerima barang dari pelanggan serta tagihan atas pelunasan barang tersebut. Oleh karena itu perlu adanya pencatatan atas invoice agar terhindar dari penagihan ganda oleh vendor. Invoice yang

11 diterima harus dibuat di dalam data transaksi invoice. User memilih add new invoice kemudian kode_invoice dapat terbentuk otomatis. Setelahnya user harus memilih kode_po terkait dengan invoice yang dikirim. Hal ini juga digunakan sebagai pengecekan dokumen antara tagihan dengan dengan pesanan. g. Menu transaksi surat jalan Gambar 4.35 Tampilan Surat Jalan User yang telah mengirimkan PO dan invoice sekaligus mengirimkan surat jalan atas pengiriman barang yang telah dipesan dalam PO. Oleh karena itu perlu adanya pencatatan atas surat jalan agar menguatkan dokumentasi invoice dan PO yang telah dicatat oleh perusahaan sebelumnya. Surat jalan yang dibuat harus memasukkan kode PO sebagai dasar landasan isian data surat jalan. User memilih add new surat jalan kemudian kode_surat_jalan dapat terbentuk otomatis. Setelahnya user harus memilih kode_po terkait dengan invoice yang dikirim. Hal ini juga digunakan sebagai pengecekan dokumen antara barang yang dikirim dengan dengan pesanan.

12 3. Menu Master Menu master merupakan kumpulan sumber-sumber yang dibutuhkan dalam pembuatan suatu transaksi, bersifat tetap, dan dapat digunakan untuk transaksitransaksi selanjutnya. Master data pada aplikasi yang dirancang terdapat dalam menu source list dimana master data terdiri dari menu vendor dan menu resource. Berikut penjabaran tampilan dari masing-masing menu master pada aplikasi usulan : a. Menu master resource Gambar 4.36 Menu Resource Master resource digunakan oleh user dalam aplikasi usulan untuk melengkapi pembuatan transaksi rancangan anggaran biaya (RAB). Lebih tepatnya resource digunakan dalam pembuatan analisa harga satuan (AHS) dimana koefisien pada resource list merupakan SNI. Harga untuk per satuan pada resource list telah disepakati dan dirancang sesuai dengan kebutuhan dan kesepakatan user. Dalam pembuatan AHS user cukup memilih data resource yang terletak pada tabel detil AHS dan sistem akan menarik berdasarkan pilihan pelanggan yang tersedia dalam resource list.

13 b. Menu Master Vendor Gambar 4.37 Menu Vendor Master vendor digunakan user dalam transaksi pembutan PO untuk membeli barang persiapan awal proyek konstruksi. Master vendor digunakan sebagai landasan informasi mengenai data vendor yang terkait dengan perusahaan. Pada menu transaksi PO, user harus memilih terlebih dahulu vendor yang akan di buatkan PO atas barang-barang yang dibutuhkan untuk persiapan awal proyek konstruksi.

14 c. Menu Jurnal History Gambar 4.38 Tampilan Jurnal History User membuka menu jurnal history, memilih periode yang diinginkan kemudian memilih tombol search jurnal. Jurnal akan terbentuk berdasarkan penarikan data dari nominal pada invoice pada tanggal di dalam periode yang dipilih. d. Menu Log Registry Gambar 4.39 Tampilan Log Registry Log registry merupakan tampilan seluruh historis log kegiatan user yang tercatat di dalam database aplikasi. User yang dapat membuka Log registry hanyalah Direktur atau Admin. User dapat melihat historis dari kegiatan dari karyawan pada periode tertentu. Pembuatan Log registry dimaksudkan untuk memperlihatkan kegiatan yang telah dilakukan oleh setiap user yang dapat digunakan oleh Direktur sebagai bukti otentik atas kegiatan setiap user.

15 4.1.3. Standarisasi Output Standarisasi output dari print-out dokumen memiliki elemen judul merupakan nama dari laporan, header berisikan kegiatan lokasi serta tahun anggaran dari RAB. Detil item berisikan mengenai data AHS yang telah dibuat beserta total anggaran. Footer berisikan pengesahan dokumen tersebut dari pihak terkait. Berikut tampilan dari hasil print-out laporan : Gambar 4.40 Laporan RAB PDF