C. DFD Level 1
3.2.7 Perancangan Desain Interface
Setelah membuat Sistem Flow, ER-Diagram dan perancangan database kemudian dibuat suatu perancangan desain input dan output untuk mengartikan suatu desain sistem. Adapun perancangan desain interface tersebut adalah sebagai berikut:
A. Halaman Login
Halaman ini berfungsi untuk melakukan validasi terhadap password yang dimasukkan. Penggunanya ada 4, yaitu: Pimpinan, Operasional, Pemeliharaan dan supir seperti terlihat pada Gambar 3.27.
Gambar 3.27 Desain Halaman Login User
Tabel 3.16 Tabel Fungsi Objek Rancangan Halaman Login User
No Nama Objek Tipe Objek Fungsi
1 Email Textbox Untuk Melakukan validasi
akun
2 Password Textbox Untuk mengecek kecocokan data email yang akan
3 Login Button Untuk mengeksekusi jika email dan password benar
B. Halaman Utama
Desain form halaman utama administrator memiliki 3 menu, yaitu Data Master, Transaksi, dan Laporan. Menu master memiliki 3 menu sub yaitu master user, master kendaraan, master TPS. Menu transaksi memiliki 3 sub menu yaitu Jadwal, transaksi TPS dan transaksi maintenance kendaraan. Menu Laporan memiliki 5 sub menu yaitu Laporan Jadwal, Laporan Penggunaan kendaraan, laporan Maintenance Kendaraan, Laporan ketersediaan kendaraan, Laporan Sopir. Desain form halaman utama ini dapat dilihat pada Gambar 3.28
Tabel 3.17 Tabel Fungsional Objek Rancangan Halaman Utama
No Nama Objek Tipe Objek Fungsi
1 Login Button Untuk melakukan validasi
terdapat pada gambar 3.25 2 Total Sampah Hari Ini Dashboard Untuk melihat data transaksi
TPS yang telah dilakukan 3 Total Sisa Sampah Hari
ini
Button Untuk melihat data sampah yang telah terangkut pada transaksi TPS
4 Sampah Sekali Angkut Button Untuk Melihat Data Sampah Sekali Angkut
5 Maintenance Kendaraan Button Untuk Melihat Data
Kendaraan Yang Mengalami Maintenance
6 Kendaraan Yang Telah Selesai Di Maintenance
Button Untuk Melihat Data Kendaraan Yang Telah Selesai Mengalami Maintenance
7 Side Menu Home Button Berisikan Halaman Utama Aplikasi Seperti Pada Gambar 3.26
8 Side Menu Master Button Berisikan Sub Menu Master-Master dalam aplikasi
9 Sub Menu Master user Button Sub Menu Dari Menu Master Untuk Mengorganisir Data User Seperti Pada Gambar 3.27
10 Sub Menu master kendaraan
Button Sub Menu Dari Menu Master Untuk Mengorganisir Data Kendaraan Seperti Pada Gambar 3.31
11 Sub Menu master jadwal Button Sub Menu Dari Menu Master Untuk Mengorganisir Data Jadwal Seperti Pada Gambar 3.37
12 Sub Menu Master TPS Button Sub Menu Dari Menu Master Untuk Mengorganisir Data TPS Seperti Pada Gambar 3.39
13 Side Menu Transaksi Button Berisikan Sub Menu Transaksi
No Nama Objek Tipe Objek Fungsi
13 Sub Menu transaksi TPS Button Sub Menu Dari Menu Master Untuk Mengorganisir Data Transaksi TPS Seperti Pada Gambar 3.43
14 Sub Menu Transaksi Maintenance kendaraan
Button Sub Menu Dari Menu Master Untuk Mengorganisir Data Transaksi Maintenance Kendaraan Seperti Pada Gambar 3.45
15 Side Menu Laporan Button Berisikan Laporan-Laporan Yang Dibutuhkan
16 Side Menu Laporan Angkutan Sopir
Button Menampilkan Laporan angkutan Sopir Seperti Pada Gambar 3.47
17 Side Menu laporan maintenance kendaraan
Button Menampilkan Laporan Maintenance Kendaraan Seperti Pada Gambar 3.48 18 Side Menu laporan
kendaraan tersedia
Button Menampilkan Laporan Kendaraan Tersedia Seperti Pada Gambar 3.49
19 Side Menu Laporan Sampah Harian
Button Menampilkan Laporan Sampah Harian Seperti Pada Gambar 3.50
20 Side Menu laporan kineja sopir
Button Menampilkan Laporan Kinerja Sopir Seperti Pada Gambar 3.51
C. Halaman Master User
Halaman ini digunakan oleh user untuk menambah, mengubah, dan menghapus data user. Untuk menambah data user terdapat 6 inputan yang harus diisi yaitu id bagian, id tps, nama, lengkap, email, password, dan nomor telepon. Yang bertugas melakukan data ini adalah staff DKP pada Dinas Kebersihan Dan Pertamanan Kota Surabaya. Desain halaman master User digambarkan pada Gambar 3.29 dan 3.30.
Gambar 3.29 Desain Halaman Master User
Tabel 3.18 Tabel Fungsi Objek Rancangan Halaman Master User
No Nama Objek Tipe Objek Fungsi
1 Add user Button Menambah Semua Field Pada Form Data Master User 2 List User Data Table Menampilkan Data User Yang Telah Tersimpan
3 Hapus Button Menghapus Field Pada Data
Master User
4 Edit Button Mengubah Field Pada Data Master User
Gambar 3.30 Desain Form Input User
Tabel 3.19 Tabel Fungsi Objek Rancangan Form Input User
No Nama Objek Tipe Objek Fungsi
1 ID Bagian Combobox Memilih jenis bagian
user(Pimpinan, Operasional, Maintenance, Sopir)
2 ID TPS Combobox Memilih Lokasi TPS untuk
user operasional 3 Nama Lengkap Textbox Memberi Nama User 4 Email Textbox Memberi Identitas User 5 Password Textbox Memberi Sandi User
6 No HP Textbox Memberi Nomor User
7 Simpan Button Menyimpan field data yag
telah diinputkan
D. Halaman Master User Bagian
Halaman ini digunakan oleh user untuk menambah, mengubah, dan menghapus data user bagian. Untuk menambah data user bagian terdapat 1 inputan yang harus diisi yaitu nama bagian. Yang bertugas melakukan data ini adalah staff
DKP pada Dinas Kebersihan Dan Pertamanan Kota Surabaya. Desain halaman master User bagian digambarkan pada Gambar 3.31 dan 3.32.
Gambar 3.31 Desain Halaman Master Bagian
Tabel 3.20 Tabel Fungsi Objek Rancangan Halaman Master Bagian
No Nama Objek Tipe Objek Fungsi
1 Add bagian Button Menambah Semua Field Pada Form Data Master User Bagian
2 List bagian Data Table Menampilkan Data User Bagian Yang Telah Tersimpan
3 Hapus Button Menghapus Field Pada Data
Master User Bagian
4 Edit Button Mengubah Field Pada Data Master User Bagian
Gambar 3.32 Desain Form Input User Bagian
Tabel 3.21 Tabel Fungsi Objek Rancangan Form Input User Bagian
No Nama Objek Tipe Objek Fungsi
1 Nama Bagian Textbox Memberikan Bagian Baru
2 Simpan Button Menyimpan field data yag
telah diinputkan
E. Halaman Master Kendaraan
Halaman ini digunakan oleh user untuk menambah, mengubah, dan menghapus data kendaraan. Untuk menambah data kendaraan terdapat 5 inputan yang harus diisi yaitu id jenis kendaraan, id merk dan type, no rangka, tahun, no polisi. Yang bertugas melakukan data ini adalah staff DKP pada Dinas Kebersihan Dan Pertamanan Kota Surabaya. Desain halaman master kendaraan digambarkan pada Gambar 3.33 dan 3.34.
Gambar 3.33 Desain Halaman Master Kendaraan
Tabel 3.22 Tabel Fungsi Objek Rancangan Halaman Master Kendaraan
No Nama Objek Tipe Objek Fungsi
1 Add Kendaraan Button Menambah Semua Field Pada Form Data Master User Bagian
2 List Kendaraan Data Table Menampilkan Data User Bagian Yang Telah Tersimpan
3 Hapus Button Menghapus Field Pada Data
Master User Bagian
4 Edit Button Mengubah Field Pada Data Master User Bagian
Gambar 3.34 Desain Form Input Master Kendaraan
Tabel 3.23 Tabel Fungsi Objek Rancangan Form Input Kendaraan
No Nama Objek Tipe Objek Fungsi
1 Id jenis kendaraan Combobox Memilih jenis Kendaraan (Compactor, Dump Truck, Hyd Cont/Arm Roll 6m3, Hyd Cont/Arm Roll 8m, Hyd3 Cont/Arm Roll 14m3) 2 Id merk dan type Combobox Memilih Jenis Merk Dan
Type Kendaraan(Toyota, Hino, Isuzu)
3 No rangka Textbox Memberi No rangka
Kendaraan
4 Tahun Textbox Memberi Tahun Kendaraan
5 No polisi TextBox Memberi No Polisi
Kendaraan
6 Simpan Button Menyimpan field data yag
telah diinputkan
F. Halaman Master Jenis Kendaraan
Halaman ini digunakan oleh user untuk menambah, mengubah, dan menghapus data jenis kendaraan. Untuk menambah data jenis kendaraan terdapat 1
inputan yang harus diisi yaitu jenis kendaraan. Yang bertugas melakukan data ini adalah staff DKP pada Dinas Kebersihan Dan Pertamanan Kota Surabaya. Desain halaman master jenis kendaraan digambarkan pada Gambar 3.35 dan 3.36
Gambar 3.35 Desain Halaman Master Jenis Kendaraan
Tabel 3.24 Tabel Fungsi Objek Rancangan Halaman Master Jenis Kendaraan
No Nama Objek Tipe Objek Fungsi
1 Add Jenis Kendaraan Button Menambah Semua Field Pada Form Data Master Jenis Kendaraan
2 List Jenis Kendaraan Data Table Menampilkan Data Jenis Kendaraan Yang Telah Tersimpan
3 Hapus Button Menghapus Field Pada Data
Master Jenis Kendaraan 4 Edit Button Mengubah Field Pada Data
Gambar 3.36 Desain Form Input Master Jenis Kendaraan
Tabel 3.25 Tabel Fungsi Objek Rancangan Form Input Master Jenis Kendaraan
No Nama Objek Tipe Objek Fungsi
1 Jenis Kendaraan Textbox Memberikan Jenis Kendaraan Baru
2 Simpan Button Menyimpan field data yag
telah diinputkan
G. Halaman Master Merk Dan Type Kendaraan
Halaman ini digunakan oleh user untuk menambah, mengubah, dan menghapus data merk dan Type kendaraan. Untuk menambah data merk & type kendaraan terdapat 1 inputan yang harus diisi yaituid merk & type Yang bertugas melakukan data ini adalah staff DKP pada Dinas Kebersihan Dan Pertamanan Kota Surabaya. Desain halaman master merk & Type digambarkan pada Gambar 3.37 dan 3.38.
Gambar 3.37 Desain Halaman Master Merk Dan Type
Tabel 3.26 Tabel Fungsi Objek Rancangan Halaman Merk Dan Type
No Nama Objek Tipe Objek Fungsi
1 Add merk dan type Button Menambah Semua Field Pada Form Data Master Merk Dan Type
2 List merk dan type Data Table Menampilkan Data Merk Dan Type Yang Telah Tersimpan
3 Hapus Button Menghapus Field Pada Data
Master Merk Dan Type 4 Edit Button Mengubah Field Pada Data
Gambar 3.38 Desain Form Input Master Merk Dan Type
Tabel 3.27 Tabel Fungsi Objek Rancangan Form Input Master Merk Dan Type
No Nama Objek Tipe Objek Fungsi
1 Merk Dan Type Textbox Memberikan Merk Dan Type Baru
2 Simpan Button Menyimpan field data yag
telah diinputkan
H. Halaman Master TPS
Halaman ini digunakan oleh user untuk menambah, mengubah, dan menghapus data TPS. Untuk menambah data TPS terdapat 3(tiga) inputan yang harus diisi yaitu nama tps, lokasi tps, id kecamatan. Yang bertugas melakukan data ini adalah staff DKP pada Dinas Kebersihan Dan Pertamanan Kota Surabaya. Desain halaman master tps digambarkan pada Gambar 3.39 dan 3.40.
Gambar 3.39 Desain Halaman Master TPS
Tabel 3.28 Tabel Fungsi Objek Rancangan Halaman Master TPS
No Nama Objek Tipe Objek Fungsi
1 Add TPS Button Menambah Semua Field Pada Form Master Data TPS 2 List TPS Data Table Menampilkan Data TPS Yang
Telah Tersimpan
3 Hapus Button Menghapus Field Pada Data
Master TPS
4 Edit Button Mengubah Field Pada Data Master TPS
Gambar 3.40 Desain Form Input Master TPS
Tabel 3.29 Tabel Fungsi Objek Rancangan Form Input Master TPS
No Nama Objek Tipe Objek Fungsi
1 Nama TPS Textbox Memberikan Nama TPS Baru
2 Lokasi TPS Textbox Memberikan Lokasi TPS Baru
3 ID Kecamatan Combobox Memilih Lokasi Kecamatan TPS Baru (Kec. Bubutan, Kec. Simokerto, Kec.Genteng Dll.)
4 Simpan Button Menyimpan field data yag
telah diinputkan
I. Halaman Master TPS Kecamatan
Halaman ini digunakan oleh user untuk menambah, mengubah, dan menghapus data kecamatan. Untuk menambah data kecamatan terdapat 1(satu) inputan yang harus diisi yaitu nama kecamatan. Yang bertugas melakukan data ini
adalah staff DKP pada Dinas Kebersihan Dan Pertamanan Kota Surabaya. Desain halaman master TPS kecamatan digambarkan pada Gambar 3.41 dan 3.42.
Gambar 3.41 Desain Halaman Master Kecamatan
Tabel 3.30 Tabel Fungsi Objek Rancangan Halaman Master Kecamatan
No Nama Objek Tipe Objek Fungsi
1 Add Kecamatan Button Menambah Semua Field Pada Form Master Data Kecamatan 2 List Kecamatan Data Table Menampilkan Data
Kecamatan Yang Telah Tersimpan
3 Hapus Button Menghapus Field Pada Data
Master Kecamatan
4 Edit Button Mengubah Field Pada Data Master Kecamatan
Gambar 3.42 Desain Form Input Master Kecamatan
Tabel 3.31 Tabel Fungsi Objek Rancangan Form Input Master Kecamatan
No Nama Objek Tipe Objek Fungsi
1 Nama Kecamatan Textbox Memberikan Nama Kecamatan Baru
2 Simpan Button Menyimpan field data yag
telah diinputkan
J. Halaman Transaksi Jadwal
Halaman ini digunakan oleh user untuk menambah, mengubah, dan menghapus data jadwal. Untuk menambah data jadwal terdapat 8(delapan) inputan yang harus diisi yaitu sopir, id kendaraan, tanggal, tps 1, tps 2, tps 3, tps 4, tps 5 dimana inputan tps 2 sampai 5 diberikan untuk tugas pengangkutan tambahan. Yang bertugas melakukan data ini adalah staff DKP pada Dinas Kebersihan Dan Pertamanan Kota Surabaya. Desain halaman master jadwal digambarkan pada Gambar 3.43 dan 3.44.
Gambar 3.43 Desain Master Jadwal
Tabel 3.32 Tabel Fungsi Objek Rancangan Halaman Master Jadwal
No Nama Objek Tipe Objek Fungsi
1 Add jadwal Button Menambah Semua Field Pada Form Data Jadwal
2 List Jadwal Data Table Menampilkan Data Jadwal Yang Telah Tersimpan
3 Hapus Button Menghapus Field Pada Data
Master Jadwal
4 Edit Button Mengubah Field Pada Data Master Jadwal
Tabel 3.33 Tabel Fungsi Objek Rancangan Halaman Master Jadwal
No Nama Objek Tipe Objek Fungsi
1 Sopir Combobox Memilih Sopir Yang Akan
Bertugas (Sopir 1, Sopir 2, Sopir 3 Dll)
2 ID Kendaraan Combobox Memilih Jenis Kendaraan Kendaraan (L8044RP, L8044TP, L8045PP Dll.) 3 Tanggal Datepicker Memilih Tanggal Jadwal
Akan Dilaksanakan
4 TPS 1 Combobox Memilih TPS Yang Akan
Dijadwalkan (Demak Kali, Bubutan, Penghela Dll.)
5 TPS 2 Combobox Memilih TPS Yang Akan
Dijadwalkan Kendaraan (Demak Kali, Bubutan, Penghela Dll.)
6 TPS 3 Combobox Memilih TPS Yang Akan
Dijadwalkan (Demak Kali, Bubutan, Penghela Dll.)
7 TPS 4 Combobox Memilih TPS Yang Akan
Dijadwalkan (Demak Kali, Bubutan, Penghela Dll.)
8 TPS 5 Combobox Memilih TPS Yang Akan
Dijadwalkan (Demak Kali, Bubutan, Penghela Dll.)
9 Simpan Button Menyimpan field data yag
telah diinputkan
K. Halaman Transaksi Maintenance Kendaraan
Halaman ini digunakan oleh user untuk menambah, mengubah, dan menghapus data transaksi maintenance kendaraan. Untuk menambah data transaksi maintenance terdapat 6(enam) inputan yang harus diisi yaitu id kendaraan, sopir, tanggal kerusakan, keterangan, tanggal estimasi perbaikan, pengerjaan. Yang bertugas melakukan data ini adalah staff DKP dan pemeliharaan pada Dinas Kebersihan Dan Pertamanan Kota Surabaya. Desain halaman transaksi maintenance kendaraan digambarkan pada Gambar 3.45 dan 3.46.
Gambar 3.45 Desain Transaksi Maintenance
Tabel 3.34 Tabel Fungsi Objek Rancangan Transaksi Maintenance
No Nama Objek Tipe Objek Fungsi
1 Add Maintenance Button Menambah Semua Field Pada Form Transaksi Maintenance 2 List Maintenance Data Table Menampilkan Data Transaksi
Maintenance Yang Telah Tersimpan
3 Hapus Button Menghapus Field Pada Data
Transaksi Maintenance 4 Edit Button Mengubah Field Pada Data
Transaksi Maintenance 5 OK/Selesai Button Menyelesaikan Field Pada
Data Transaksi Maintenance selesai
Gambar 3.46 Desain Form Input Transaksi Maintenance
Tabel 3.35 Tabel Fungsi Objek Rancangan Form Input Transaksi Maintenance
No Nama Objek Tipe Objek Fungsi
1 ID kendaraan Combobox Memilih Lokasi Kecamatan TPS Baru (L8044RP, L8044TP, L8045PP Dll.)
2 Sopir Combobox Memilih Lokasi Kecamatan
TPS Baru (Sopir 1, Sopir 2, Sopir 3 Dll.)
3 Tanggal Kerusakan Datetimepicker Memilih Tanggal Kerusakan Kendaraan Akan di
Maintenance
4 Keterangan Textbox Menginputkan Keterangan Kendaraan Yang Akan Di Maintenance
5 Tanggal estimasi perbaikan
Datetimepicker Memilih Tanggal Estimasi Perbaikan Kendaraan Yang Akan di Maintenance Sesuai Kondisi
6 Kondisi Combobox Memilih Kategori Kondisi Kerusakan Kendaraan (Rusak Berat, Ringan, Sedang.) 7 Pengerjaan Textbox Menyimpan field data yag
No Nama Objek Tipe Objek Fungsi
8 Simpan Button Menyimpan field data yag
telah diinputkan
L. Halaman Transaksi TPS
Halaman ini digunakan oleh user untuk menambah, mengubah, dan menghapus data transaksi tps. Untuk menambah data transaksi tps terdapat 7(tujuh) inputan yang harus diisi yaitu tanggal, id jadwal, sopir, sampah sekarang, jumlah angkut, sisa yang belum terangkut, dan keterangan. Yang bertugas melakukan data ini adalah staff DKP pada Dinas Kebersihan Dan Pertamanan Kota Surabaya. Desain halaman transaksi tps digambarkan pada Gambar 3.47 dan 3.48.
Gambar 3.47 Desain Transaksi TPS
Tabel 3.36 Tabel Fungsi Objek Rancangan Transaksi TPS
No Nama Objek Tipe Objek Fungsi
1 Add Transaksi TPS Button Menambah Semua Field Pada Form Transaksi TPS
2 List Transaksi TPS Data Table Menampilkan Data Transaksi TPS Yang Telah Tersimpan
3 Hapus Button Menghapus Field Pada Data
Transaksi TPS
4 Edit Button Mengubah Field Pada Data Transaksi TPS
Gambar 3.48 Desain Form Input Transaksi TPS
Tabel 3.37 Tabel Fungsi Objek Rancangan Halaman Form Input Transaksi TPS
No Nama Objek Tipe Objek Fungsi
1 Tanggal Dan Jam Datetimepicker Memilih Tanggal Transaksi Pengangkutan TPS
2 TPS Combobox Memilih Lokasi TPS Yang Akan Dilakukan Transaksi
Pengangkutan (Demak Kali, Dipo Pringadi, Penghela Dll.) 3 Id jadwal Combobox Memilih ID jadwal TPS (1, 2, 3
Dll.)
4 Sampah Sekarang Textbox Menginputkan jumlah sampah yang berada pada TPS yang akan dikalkulasi dengan jumlah muat kendaraan pengangkut
5 Jumlah Angkut Textbox Menginputkan jumlah maksimal kendaraan pengangkut yang dikalkulasikan dengan jumlah sampah sekarang
6 Sekali Muat Radio button Untuk Menandakan Sampah terangkut semua dan tidak ada sisa sampah pada TPS
7 Sisa Textbox Hasil Kalkulasi dari Sampah sekarang dan jumlah agkut
No Nama Objek Tipe Objek Fungsi
kendaraan yang menandakan apakah sampah telah terangkut semua atau masih ada sisa pada TPS
8 Keterangan Textbox Menginputkan Keterangan Manual Untuk Transaksi TPS Yang Telah Selesai
Dilaksanakan
9 Simpan Button Menyimpan field data yag telah diinputkan
M. Desain Laporan Angkutan Sopir
Halaman ini menampilkan laporan Angkutan Sopir. Laporan ditampilkan dalam bentuk tabel dan grafik. Laporan ini dapat dicetak bila diperlukan. Gambar 3.49 menunjukkan tampilan laporan angkutan sopir.