Berdasarkan flowchart dan sturktur tabel untuk database yang telah dibuat, maka kemudian dapat direalisasikan pembuatan sistem tersebut kedalam bentuk aplikasi berbasis website.
A. Halaman List User
Pada saat user menekan menu user, maka halaman akan berganti ke halaman list user. Halaman tersebut memuat informasi dan beberapa tombol yang berguna untuk membuat dan mengubah informasi user.
Gambar 3.16 Tampilan Halaman List User
Gambar 3.16 merupakan tampilan setelah sistem diimplementasikan.
Halaman List User menyajikan informasi mengenai setiap user beserta group user untuk menentukan privilege yang dimiliki oleh setiap user tersebut. user dapat
menekan beberapa tombol diantaranya adalah create user. Apabila user menekan tombol add new, akan memunculkan form untuk pembuatan user baru.
Gambar 3.17 Tampilan Create New User
Pada gambar 3.17 merupakan tampilan form yang muncul setelah tombol add new di pilih. Pengguna dapat membuat user baru dengan mengisi informasi yang dibutuhkan, dan memilih user group sesuai dengan privilege yang diinginkan oleh user tersebut.
Gambar 3.18 Tampilan Edit User
Pada gambar 3.18 merupakan tampilan form setelah tombol edit di click.
Pengguna yang memiliki privilege, dapat merubah informasi user lainnya dan juga merubah informasi untuk login seperti username dan password. Perbedaan form yang ada pada create dan edit, terletak pada value dari masing masing kolom informasi. beberapa kolom dari form edit akan menampilkan value untuk membantu user dalam perubahan yang akan dilakukan.
B. Halaman List Surat
Halaman akan berpindah ke halaman list surat pada saat user memilih menu surat pada sidebar. Pada halaman ini user dapat melihat surat-surat yang telah dibuat sebelumnya.
Gambar 3.19 Tampilan List Surat
Gambar 3.19 merupakan tampilan halaman list surat. Pada halaman ini list surat yang ditampilkan dan disajikan dalam bentuk tabel dengan menampilkan Nomor surat, Nama Surat, dan jenis surat. Pada halaman ini juga user dapat melakukan edit dan melihat detail surat, serta melakukan pencarian dengan memasukkan kata kunci berupa nomor surat, nama surat, atau jenis surat. Pada halaman ini juga menampilkan tombol add new yang berguna untuk membuat surat baru.
C. Halaman Create New Surat
Pada saat user menekan tombol create new, maka halaman akan berpindah ke halaman pembuatan surat. Pada halaman ini, user akan diminta untuk mengisi informasi mengenai surat yang akan dibuat.
Gambar 3.20 Tampilan Create New Surat
Gambar 3.20 merupakan tampilan pada halaman create new surat. User dapat memilih tipe surat yang ingin dibuat, dan form yang ditampilkan sesuai dengan tipe surat yang dipilih. User dapat mengisi informasi yang dibutuhkan mengenai surat yang ingin dibuat, dan user juga dapat dengan mudah melakukan generate nomor surat dengan menekan tombol generate yang secara otomatis akan tebentuk sesuai dengan nomor urutan, bulan, dan tahun peruntukan surat dibuat.
D. Halaman Detail Surat
Selain membuat dan mengubah surat, user juga dapat melakukan review surat. Hal ini dapat dilakukan dengan menekan tombol view surat yang akan berpindah halaman ke detail surat apabila tombol ditekan.
Gambar 3.21 Tampilan Detail Surat
Pada gambar 3.21 merupakan tampilan pada Detail surat yang dipilih. Pada halaan ini, user dapat melihat segala informasi mengenai surat yang telah dibuat, yaitu nama surat, nomor surat yang telah otomatis di generate, tanggal dibuatnya surat, tanggal peruntukan surat, ditujukan kepada, nama pembuat surat yang secara otomatis didapat dari user yang membuat surat, dan informasi spesifik sesuai dengan tipe surat yang dibuat.
E. Halaman Edit Surat
Halaman edit surat merupakan halaman dimana user dapat merubah informasi mengenai surat yang telah dibuat sebelumnya. User dapat mengakses halaman ini dengan menekan tombol edit.
Gambar 3.22 Tampilan Edit Surat
Pada gambar 3.22 merupakan tampilan pada halaman Edit Surat. Pada halaman ini, user dapat melakukan perubahan beberapa informasi mengenai surat yang telah dipilih.
F. Halaman List Invoice
User dapat melihat list dari invoice yang telah dibuat sebelumnya pada halaman list invoice. Halaman list invoice dapat diakses oleh user melalui menu invoice pada sidebar.
Gambar 3.23 Tampilan List Invoice
Pada Gambar 3.23 merupakan tampilan halaman daftar invoice. Daftar invoice yang ditampilkan dalam tabel dapat di search menggunakan search box yang tersedia. Pada halaman ini juga tertera tombol untuk melihat detail dari invoice, tombol untuk merubah, menambah, dan mengenerate invoice menjadi PDF yang dapat langsung di unduh.
G. Halaman Create New Invoice
User dapat menambahkan invoice baru dengan menekan tombol add new pada halaman list invoice. Pada halaman tersebut user membuat invoice baru dengan memasukan informasi yang diperlukan dalam pembuatan invoice.
Gambar 3.24 Tampilan Create New Invoice
Pada Gambar 3.24 merupakan tampilan pada pembuatan invoice baru. Pada halaman ini, user dapat memasukkan informasi yang dibutuhkan dalam sebuah invoice sesuai dengan form yang tertera. Pada halaman ini, user dapat memasukkan lebih dari 1 contract number dan item apabila dirasa dibutuhkannya lebih dari satu dengan menekan tombol yang tertera.
H. Halaman Detail Invoice
User dapat melakukan review terhadap invoice yang telah terbuat dan tersimpan di database. Hal ini dapat dilakukan dengan menekan tombol view pada halaman list invoice.
Gambar 3.25 Tamplian Detail Invoice
Pada gambar 3.25 merupakan halaman tampilan untuk detail invoice. User dapat melihat secara detail setiap informasi mengenai invoice, dan tertera tabel untuk item. Terdapat search box untuk memudahkan user dalam mencari item.
I. Halaman Edit Invoice
User dapat merubah informasi mengenai invoice yang telah dibuat sebelumnya. Hal ini dapat dilakukan pada halaman edit invoice. User dapat
Gambar 3.26 Tampilan Edit Invoice
Pada gambar 3.26 menunjukkan halaman edit invoice, dimana user dapat menghubah, menambahkan, maupun mengurangi informasi seperti addendum number dan item.
Gambar 3.27 PDF Invoice
Gambar 3.27 merupakan PDF hasil generate dari Invoice yang telah dibuat.
Segala informasi yang tertera sesuai dengan informasi yang telah ada di database.
Layout PDF yang di generate sudah sesuai dengan invoice yang dibutuhkan oleh perusahaan, dan tabel yang tertera bersifat responsive terhadap jumlah item dan contract number apabila lebih dari satu.
Gambar 3.28 PDF Kuitansi
Gambar 3.28 merupakan PDF hasil generate dari invoice yang telah dibuat.
Segala informasi yang tertera sesuai dengan informasi yang telah ada di database.
Layout PDF kuitansi sudah sesuai dengan kuitansi yang dibutuhkan oleh perusahaan. PDF kuitansi menjadi satu file PDF dengan invoice saat digenerate.
File PDF tersebut dapat langsung di unduh oleh user.