METODOLOGI PENELITIAN

3.7 Desain Antar Muka Aplikasi

Ada beberapa rancangan dari sistem KRK Monitoring yang akan dijelaskan pada bagian sub bab berikut.

3.6.1 Rancangan Halaman Login

Halaman pertama yang tampil saat admin mengunjungi sistem KRK Monitoring, jika proses login berjalan, maka admin dapat membuka halaman menu utama untuk melakukan pengolahan data sistem KRK Monitoring. Rancangan halaman login dapat dilihat pada Gambar 3.12.

KRK ONLINE.COM HALAMAN ADMIN

Form Login Admin

Input username

Input password Kode chaptca

Input kode chaptca

Login

Gambar 3.12 Rancangan halaman login

3.6.2 Rancangan Halaman Admin (Home)

Rancangan halaman home adalah ketika seorang admin mengakses sistem KRK Monitoring yang akan tampil pertama kali sebelum melakukan login. Rancangan halaman awal dapat dilihat pada Gambar 3.13 untuk Bidang PB, Gambar 3.14 untuk Bidang TR dan Gambar 3.15 untuk Kepala Dinas.

KRK ONLINE.COM Notifikasi 1

Notifikasi 2 Kelola Akun

Foto Akun

Dashboard

Data Regional Kecamatan | Desa

Konten

Data KRK Pemohon | Deskripsi | Berkas Konfirmasi | Kajiaan GTB

Data Informasi Artikel | Informasi | Slider

Pegawai Bangunan Pemerintah

Gambar 3.13 Rancangan Halaman Home (Bidang PB)

KRK ONLINE.COM Notifikasi 1

Notifikasi 2 Kelola Akun

Foto Akun

Dashboard

Data Regional Kecamatan | Desa

Konten

Data KRK Pemohon | Deskripsi | Berkas Konfirmasi | Kajiaan TR

Data Informasi Artikel | Informasi | Slider

Data Jenis Pekerjaan | No. Id | Bangunan | Pekerjaan | Material

Pegawai

Gambar 3.14 Rancangan Halaman Home (Bidang TR)

KRK ONLINE.COM

Notifikasi 1

Notifikasi 2 Kelola Akun

Foto Akun

Dashboard

Data Regional

Kecamatan | Desa

Konten

Data KRK

Pemohon | Kajiaan GTB

| Kajian TR

Pegawai

Bangunan Pemerintah

Sub Bidang

Sistem Login

Gambar 3.15 Rancangan Halaman Home (Kepala Dinas)

3.6.3 Rancangan Halaman Admin (Data Regional - Kecamatan)

Rancangan halaman ini digunakan saat admin melakukan pengolahan (view, input , ubah dan hapus) data kecamatan. Rancangan halaman data regional kecamatan dapat dilihat pada Gambar 3.16 untuk view data, Gambar 3.17 untuk input data dan Gambar 3.18 untuk ubah data.

KRK ONLINE.COM

Kelola Akun

Notifikasi 1

Notifikasi 2

Foto Akun

DATA KECAMATAN

Tabel Data Kecamatan

Dashboard

pencarian

Data Regional

Nama Kecamatan Data Kecamatan

Kode Pos

Data Data Desa

Data

Gambar 3.16 Rancangan Halaman Data Regional - Kecamatan (View Data)

KRK ONLINE.COM

Notifikasi 1

Notifikasi 2 Kelola Akun

Foto Akun

DATA KECAMATAN

Tambah Data Kecamatan

Dashboard

Data Regional *Kode Pos Input

*Nama Kecamatan

Input

Data Kecamatan

Data Desa

Batal

Simpan

Gambar 3.17 Rancangan Halaman Data Regional - Kecamatan (Input Data)

KRK ONLINE.COM

Notifikasi 1

Notifikasi 2 Kelola Akun

Foto Akun

DATA KECAMATAN

Ubah Data Kecamatan

Dashboard

Data Regional *Kode Pos

Input

*Nama Kecamatan

Input

Data Kecamatan

Data Desa

Ubah

Batal

Gambar 3.18 Rancangan Halaman Data Regional - Kecamatan (Ubah Data)

3.6.4 Rancangan Halaman Admin (Data Regional - Desa)

Rancangan halaman admin data regional desa, dibuat untuk digunakan saat admin akan mengoperasikan (view, input, ubah dan hapus) data desa. Rancangan halaman data regional desa teridiri dari tiga halaman, yaitu halaman view data desa, input data desa, dan ubah data desa. Rancangan halaman data regional desa dapat dilihat pada Gambar 3.19 untuk view data, Gambar 3.20 untuk input data dan Gambar 3.21 untuk ubah data.

Gambar 3.19 Rancangan Halaman Data Regional - Desa (View Data)

KRK ONLINE.COM

Gambar 3.20 Rancangan Halaman Data Regional - Desa (Input Data)

KRK ONLINE.COM

Notifikasi 1

Notifikasi 2 Kelola Akun

Foto

Akun

DATA DESA

Ubah Data Desa

Dashboard

*Kecamatan

Data Regional

Input

*Kode Desa

Input

Data Kecamatan *Nama Desa

Input

Data Desa

Batal

Ubah

Gambar 3.21 Rancangan Halaman Data Regional - Desa (Ubah Data)

3.6.5 Rancangan Halaman Admin (Data KRK - Pemohon)

Rancangan halaman data KRK dibuat untuk melihat data pendaftaran yang masuk, baik secara keseluruhan maupun detail perorang. Rancangan halaman data KRK dapat dilihat pada Gambar 3.22 untuk view data dan Gambar 3.23 untuk view detail data.

Gambar 3.22 Rancangan Halaman Data KRK - Pemohon (View Data)

KRK ONLINE.COM

Notifikasi 1

Notifikasi 2 Kelola Akun

Foto DATA PEMOHON Akun

Data Lengkap Pemohon

Dashboard

Photo KTP/SIM

Data KRK

*No. Reg.

*No. Kontak

Gambar 3.23 Rancangan Halaman Data KRK - Pemohon (View Data Detail)

3.6.6 Rancangan Halaman Admin (Data KRK - Deskripsi)

Rancangan halaman berikut digunakan untuk melihat deskripsi pengajuan. Juga melakukan proses kajian GTB (Gambar Teknis Bangunan) dan proses kajian TR (Tata Ruang), yang dapat dilihat pada Gambar 3.24 untuk view data, Gambar

3.25 untuk view detail data, Gambar 3.26 untuk input data kajian GTB dan Gambar

3.27 untuk untuk input data kajian TR.

Gambar 3.24 Rancangan Halaman Data KRK - Deskripsi (View Data)

Gambar 3.25 Rancangan Halaman Data KRK - Deskripsi (View Detail Data)

KRK ONLINE.COM

Notifikasi 1

Notifikasi 2 Kelola Akun

Foto Akun

DATA DESKRIPSI

Kajian GTB (Gambar Teknis Bangunan)

Dashboard

Data KRK

*No. Reg.

Data

Pemohon * Detail Pengajuan

Gambar 3.26 Rancangan Halaman Data KRK - Kajian GTB (Input Data)

Gambar 3.27 Rancangan Halaman Data KRK - Kajian TR (Input Data)

3.6.7 Rancangan Halaman Admin (Data KRK - Berkas)

Rancangan halaman ini digunakan untuk melihat berkas-berkas dari pendaftaran, dan dapat dilihat pada Gambar 3.27.

Gambar 3.28 Rancangan Halaman Data KRK - Berkas (View Data)

3.6.8 Rancangan Halaman Admin (Data KRK - Konfirmasi)

Rancangan halaman ini buat untuk melihat dan membuat konfimasi pendaftaran, yang menampilkan proses dan informasi untuk pendaftar, rancangan halaman dapat dilihat pada Gambar 3.29 untuk view data, Gambar 3.30 untuk input data dan Gambar 3.31 untuk ubah data.

Gambar 3.29 Rancangan Halaman Data KRK - Konfirmasi (View Data)

Notifikasi 1

KRK ONLINE.COM

Notifikasi 2 Kelola Akun

Foto Akun

DATA KONFRIMASI

Konfrimasi Pendaftaran

Dashboard

Data KRK

*Kode Kfm

*No. Reg.

Pilihan

*Status

Deskripsi *Keterangan

Input

Berkas

*Tgl. Keluar

Gambar 3.30 Rancangan Halaman Data KRK - Konfirmasi (Input Data)

KRK ONLINE.COM

Notifikasi 1

Notifikasi 2 Kelola Akun

Foto Akun

DATA KONFRIMASI

Dashboard

Ubah Konfrimasi Pendaftaran

Data KRK *Kode Kfm

Data

Pemohon

*No. Reg.

*Tgl. Keluar

Gambar 3.31 Rancangan Halaman Data KRK - Konfirmasi (Ubah Data)

3.6.9 Rancangan Halaman Admin (Data KRK - Kajian GTB dan TR)

Rancangan halaman ini dirancang untuk melihat data permohonan yang sudah dilakukan proses kajian GTB (Gambar Teknis Bangunan) dan TR (Tata Ruang), rancangan halaman dapat dilihat pada Gambar 3.32 untuk view data kajian GTB dan Gambar 3.33 untuk view data kajian TR.

Gambar 3.32 Rancangan Halaman Data KRK - Kajian GTB (View Data)

Kelola Akun Foto

KRK ONLINE.COM

Notifikasi 1

Notifikasi 2

DATA KAJIAN

Akun

Dashboard

Tabel Data Kajian TR (Tata Ruang)

Data KRK

pencarian

No. Reg.

Pemohon

File

Tanggal Keluar

Deskripsi Berkas Konfirmasi Kajian

Gambar 3.33 Rancangan Halaman Data KRK - Kajian TR (View Data)

3.6.10 Rancangan Halaman Admin (Ubah Akun)

Rancangan halaman ini dugunakan ketika admin akan melakukan pengubahan akun berupa username dan password yang digunakan. Rancangan halaman dapat dilihat pada Gambar 3.34.

KRK ONLINE.COM

Notifikasi 1

Notifikasi 2 Kelola Akun

Foto

Akun

SISTEM LOGIN

Ubah Akun Login

Dashboard

Sistem Login Input

Confirm password

Batal

Ubah

Gambar 3.34 Rancangan Halaman Ubah Akun

3.6.11 Rancangan Halaman User (Home)

Rancangan halaman ini dugunakan sebagai halaman pembuka saat user mengunjungi sistem. Rancangan halaman dapat dilihat pada Gambar 3.35.

KRK ONLINE.COM

Home

Informasi

KRK Online

Bid PB Subid TR Kontak

SLIDER

Konten 2

Konten Home

Konten 3

Footer

Gambar 3.35 Rancangan Halaman Home

3.6.12 Rancangan Halaman User (Informasi)

Rancangan halaman ini dugunakan sebagai halaman yang menyajikan artikel bagi user saat mengunjungi sistem. Rancangan halaman dapat dilihat pada Gambar

KRK ONLINE.COM

Home

Informasi

KRK Online

Bid PB Subid TR Kontak

SLIDER

Konten Artikel 1

Konten 2

Konten Artikel 2 Konten 3

Konten Artikel 3

Footer

Gambar 3.36 Rancangan Halaman Informasi

3.6.13 Rancangan Halaman User (KK Online)

Rancangan halaman ini dugunakan sebagai halaman yang digunakan user untuk melakukan proses pendaftaran pengajuan IMB. Pada halaman ini terdapat 3 sub menu yang terdiri dari buat pengajuan, konfirmasi pendaftaran, dan informasi pendaftar. Rancangan halaman dapat dilihat pada Gambar 3.37 untuk menu KRK Monitoring , Gambar 3.38 untuk form pendaftaran, Gambar 3.39 untuk form cek konfirmasi dan Gambar 3.40 data pendaftar.

KRK ONLINE.COM

Home

Informasi

KRK Online

Bid PB Subid TR Kontak

SLIDER

Konten 2

Buat Pengajuan

Cek Konfirmasi Ddaftar

Gambar 3.37 Rancangan Halaman KRK Monitoring

Informasi KRK Online

KRK ONLINE.COM

Home

Bid PB Subid TR Kontak

Pendaftaran 2 Pendaftaran 3

Konten 3

Footer

Gambar 3.38 Rancangan Halaman KRK Monitoring (Form Pendaftaran)

KRK ONLINE.COM

Home

Informasi

KRK Online

Bid PB Subid TR Kontak

SLIDER

Konten 2

Form Cek Konfirmasi

Konten 3

Footer

Gambar 3.39 Rancangan Halaman KRK Monitoring (Form Cek Konfirmasi)

KRK ONLINE.COM

Home

Informasi

KRK Online

Bid PB Subid TR Kontak

SLIDER

Konten 2

Form Daftar Pengajuan

Konten 3

Footer

Gambar 3.40 Rancangan Halaman KRK Monitoring (Form Daftar Pengajuan)

3.6.14 Rancangan Halaman User (Bid PB)

Rancangan halaman ini dugunakan sebagai halaman yang menyajikan informasi tentang Bidang Pengendalian Bangunan. Rancangan halaman dapat dilihat pada Gambar 3.41.

KRK ONLINE.COM

Home

Informasi

KRK Online

Bid PB

Subid TR Kontak

SLIDER

Konten 2

Konten Informasi Bidang P2B

Konten 3

Footer

Gambar 3.41 Rancangan Halaman Bid PB

3.6.15 Rancangan Halaman User (Subid TR)

Rancangan halaman ini dugunakan sebagai halaman yang menyajikan informasi tentang Bidang Tata Ruang. Rancangan halaman dapat dilihat pada Gambar 3.42.

KRK ONLINE.COM

Home

Informasi

KRK Online

Bid PB

Subid TR

Konten Informasi Bidang TR

Konten 3 Footer

Gambar 3.42 Rancangan Halaman Subid TR (Tata Ruang)

3.6.16 Rancangan Halaman User (Kontak)

Rancangan halaman ini dugunakan sebagai halaman yang menyajikan informasi pegawai Dinas Cipta Karya Kab. Indramayu. Rancangan halaman dapat dilihat pada Gambar 3.43.

KRK ONLINE.COM

Home

Informasi

KRK Online

Bid PB Subid TR

Konten Informasi Data Pegawai

Konten 3 Footer

Gambar 3.43 Rancangan Halaman Kontak

3.6.17 Rancangan Laporan

Rancangan laporan digunakan sebagai kerangka pembuatan laporan, dan bertujuan memenuhi kebutuhan sistem. Adapun laporan yang dibuat adalah laporan data regional, data pegawai, penilaian kajian, dan data pendaftaran. Rancangan laporan dapat dilihat pada Gambar 3.44 untuk data kecamatan, Gambar 3.45 untuk data desa, Gambar 3.46 untuk data pegawai, Gambar 3.47 untuk kajian GTB, 3.48 untuk bukti pendafataran, Gambar 3.49 untuk kajian Gambar TR, 3.50 untuk data pendaftar dan Gambar 3.51 untuk data bangunan pemerintah.

LOGO KOP SURAT

Keterangan

KODE POS

Gambar 3.44 Rancangan Laporan Data Regional (Kecamatan)

LOGO

KOP SURAT

Gambar 3.45 Rancangan Laporan Data Regional (Desa)

LOGO

KOP SURAT

Keterangan

NOMOR ID

Gambar 3.46 Rancangan Laporan Data Pegawai

LOGO

KOP SURAT

Keterangan

URAIAN

LUAS BANGUNAN

Gambar 3.47 Rancangan Laporan Data Kajian Gambar Teknis Bangunan

LOGO

KOP SURAT

Keterangan

DATA PENDAFTAR

KESIMPULAN

Gambar 3.48 Rancangan Laporan Bukti Pendaftaran

LOGO

KOP SURAT

Gambar 3.49 Rancangan Laporan Data Kajian Tata Ruang

KOP SURAT

LOGO

Keterangan

IDENTITAS JENIS BANGUNAN

No. REG

NAMA

TGL. REG

Gambar 3.50 Rancangan Laporan Data Pendaftaran

LOGO

KOP SURAT

Keterangan

NOMOR ID

NAMA

LOKASI

DATA DATA

DATA

Gambar 3.51 Rancangan Laporan Data Bangunan Pemerintah