22
PEMBAHASAN
3.1. Tinjauan Instansi
Dalam pembahasan tinjauan rancangan website Desa Kalijambe Kabupaten Tegal meliputi sejarah desa, visi dan misi, struktur organisasi dan fungsi.
3.1.1. Sejarah Instansi
Balai desa merupakan tempat berkantornya Lurah desa dan perangkat yang lain. Pada zaman dahulu Balai Desa Selalu berpindah-pindah tempatnya mengikuti arah tempat tinggal perangkat desa yang terpilih. Pada tahun 1960 Balai Desa masih menggunakan rumah pribadi dari perangkat Desa yaitu ibu Samroh. Balai Desa Kalijambe merupakan salah satu Balai Desa yang tidak berpindah-pindah dari dulu. Bangunan Balai Desa berdiri terletak di wilayah RT 02 RW.02. Balai Desa itu sendiri mulai renovasi pada tahun 1985 dan terakhir renovasi tahun 2016, maka dari itu banyak bangunan Balai Desa mengalami perubahan dari tahun ke tahun.
Diambil dari penjelasan para sesepuh Desa Kalijambe di latar belakangi oleh bebrapa hal. Kalijambe merupakan salah satu desa yang berada di Kecamatan Tarub, Kabupaten Tegal, Provinsi Jawa Tengah dan memiliki luas wilayah yang lumayan luas. Desa Kalijambe memiliki 2 perdukuhan yaitu perdukuhan tangkil dan jenggul. Pada sekitar abad 18 babad Desa Kalijambe mempunyai dua desa yaitu Desa Kenanga dan Desa Kalijambe. Nama Kalijambe di ambil dari banyak pohon jambe disekitar kali, karena dahulu sepanjang kali Desa Kalijambe
ditumbuhi jambe dan sudah sangat terkenal. Itulah sekilas sejarah dari Desa Kalijambe itu sendiri.
Berikut adalah Visi dan Misi Desa Kalijambe Kabupaten Tegal : 1. Visi
Terwujudnya Masyarakat Desa Kalijambe Yang Aman, Tentram, Maju, Makmur dan berkeadilan menuju kemandirian.
2. Misi
a. Mewujudkan Tata Kelola Pemerintahan Desa yang bersih, jujur, dan transparan .
b. Mewujudkan pengelolaan Sumber Daya Alam dan Sumber Daya alam dan sumber daya manusia yang berkesinambungan.
c. Menciptakan kondisi Desa Kalijambe yang konduksif dan berbudaya yang berjiwa ke gotong royongan.
d. Meningkatkan kesejahteraan masyarakat desa.
e. Meningkatkan kapsitas kelembagaan serta sarana dan prasarana desa. 3.1.2. Struktur Organisasi dan Fungsi
Struktur organisasi pada Desa Kalijambe Kabupaten Tegal ini terdiri dari Kepala Desa yaitu Ibu Eka Handayani, Sekertaris Desa, Kaur Pemerintahan, Kaur Kesejahteraan, Kasi Pelayanan Tata Kelola dan Umum, Kaur Keuangan, Kaur Perencanaan, dan Kadus.
Sumber : Kelurahan Desa Kalijambe Kab.Tegal
Gambar III.1.Struktur Organisasi Desa Kalijambe Kabupaten Tegal Berikut adalah fungsi dan tanggung jawab pada Desa Kalijambe Kabupaten Tegal:
Tabel III.1.Tugas Pokok dan Fungsi Struktur Organisasi
No Nama Tugas Tugas Pokok dan Fungsi
1. Kepala Desa a. Menyelenggarakan pemerintahan desa berdasarkan kebijakan yang ditetapkan bersama BPD.
b. Mengajukan rancangan peraturan Desa.
c. Menetapkan peraturan-peraturan yang telah mendapatkan persetujuan bersama BPD. d. Menyusun dan mengajukan rancangan
peraturan desa mengnenai APB Desa untuk dibahas dan ditetapkan bersama BPD.
e. Mengordinasikan pembangunan desa secara partisipatif.
2. Sekertaris Desa a. Membantu Kepala Desa dalam mempersiapkan dan melaksanakan pengelolaan administrasi Desa, mempersiapkan bahan penyusunan laporan penyelenggaraan Pemerintah Desa. b. Penyelenggara kegiatan administrasi dan
mempersiapkan bahan untuk kelancaran tugas Kepala Desa.
c. Melaksanakan tugas kepala desa dalam hal kepala desa berhalangan
d. Melaksanakan tugas kepala desa apabila kepala desa diberhentikan sementara
e. Penyiapan bantuan penyusunan Peraturan Desa f. Pelaksanaan tugas lain yang diberikan oleh
Kepala Desa.
3. Kasi Layanan a. Bertugas membantu kepala desa sebagai pelaksanaan hak dan kewajiban masyarakat desa
b. Melaksanakan pekerjaan teknis pelayanan nikah, talak, cerai dan rujuk.
c. Melaksanakan pekerjaan teknis urusan kelahiran dan kematian.
4. Kasi Kesejahteraan d. Membantu Kepala Desa dalam melaksanakan penyiapan bahan perumusan kebijakan teknis Penyusunan Program Keagamaan serta melaksanakan Program pemberdayaan masyarakat dan sosial kemasyarakatan.
e. Penyiapan bahan untuk pelaksanaan program kegiatan keagamaan.
f. Penyiapan bahan dan pelaksanaan program, pemberdayaan masyarakat dan sosial kemasyarakatan; dan
5. Kaur Pemerintahan a. Membantu Kepala Desa dalam melaksanakan pengelolaan administrasi kependudukan, administrasi pertanahan, pembinaan, ketentraman dan ketertiban masyarakat Desa, mempersiapkan bahan perumusan kebijakan penataan, Kebijakan dalam Penyusunan produk hukum Desa.
b. Pelaksanaan kegiatan administrasi kependudukan.
c. Persiapan bahan-bahan penyusunan rancangan peraturan Desa dan keputusan Kepala Desa. d. Pelaksanaan kegiatan administrasi pertanahan. 6. Tata Kelola dan
Umum
a. Membantu sekertaris desa dalam melaksanakan administrasi umum, tata usaha dan kearsipan, pengelolaan inventaris kekayaan desa serta mempersiapkan agenda rapat dan laporan.
b. Pelaksanaan,pengendalian dan pengelolaan suratmasuk dan surat keluar serta pengendalian tata kearsipan
c. Pelaksanaan pendataan inventaris kekayaan desa
d. Melaksanaan pengelola administrasi umum e. Mengelola administrasi data perangkat desa 7. Kaur Keuangan a. Membantu Sekretaris Desa dalam
melaksanakan pengelolaan sumber pendapatan Desa, pengelolaan administrasi keuangan Desa dan mempersiapkan bahan penyusunan APB Desa.
b. Pelaksanaan pengelolaan administrasi keuangan Desa.
c. Persiapan bahan penyusunan APB Desa; dan. d. Pelaksanaan tugas lain yang diberikan oleh
Sekretaris Desa.
8. Kaur Perencanaan a. Membantu sekertaris desa dalam urusan pelayanan administrasi perencanaan pendukung pelaksanaan tugas-tugas pemerintahan.
b. Mengooordinasikan urusan perencanaan serta menyusun rencana anggaran pendapatan dan belanja desa
c. Menginventarisir data-data dalam rangka pembangunan.
d. Melakukan monitoring dan evaluasi program, serta penyusunan laporan
9. Kadus(Kepala Dusun)
a. Membantu pelaksanaan tugas kepala desa dalam wilayah kerjanya.
b. Melakukan pembinaan dalam rangka meningkatkan swadaya dan gotong royong masyarakat.
c. Membantu kepala desa dalam pembinaan dan mengkoordinasikan kegiatan RW (Rukun Wilayah) dan RT (Rukun Tetangga) diwilayah kerjanya.
d. Melakukan kegiatan dalam rangka pembinaan dan pemeliharaan ketrentaman dan ketertiban masyarakat.
3.2. Analisis Kebutuhan
Pada tahap analisis kebutuhan penulis mencoba menganalisa dua kebutuhan yaitu kebutuhan fungsional dan kebutuhan non fungsional. Tujuan dari analisis kebutuhan adalah untuk memberi kenyamanan pengguna dalam mengakses web dan untuk kelancaran sistem.
A. Analisa Kebutuhan Fungsional
Dalam analisa kebutuhan fungsional yaitu kebutuhan-kebutuhan yang menjelaskan dalam website, berikut kebutuhan fungsional diantaranya:
1. Kebutuhan Administrator
Kebutuhan Administrator meliputi kebutuhan apa saja yang dibutuhkan oleh administrator pada Website Desa Kalijambe Kabupaten Tegal ini diantaranya:
a. Admin dapat mengelola tampilan data user, pengunjung (visitor) dan admin.
b. Admin dapat mengelola data pada halaman user setelah admin melakukan login terlebih dahulu.
c. Admin dapat mengelola manajemen user, data warga, permohonan surat online, daftar surat, data pelayanan surat, data admin, berita, artikel, galeri, laporan data warga, laporan permohonan surat, laporan statistik, dan laporan statistik surat.
d. Admin dapat menambah, mengubah, serta menghapus galeri, berita, dan kegiatan desa.
e. Admin dapat menyetujui, menolak proses permohonan surat.
f. Admin dapat menambahkan, mengubah, menghapus data formulir untuk pemohon surat.
g. Admin dapat melihat statistik surat, statistik permohonan surat, laporan surat, laporan data kependudukan dan mencetak hasil laporan.
2. Kebutuhan User
a. User dapat melihat halaman menu beranda, kontak, ubah password, permohonan surat, daftar permohonan, logout setelah melakukan login terlebih dahulu.
b. User dapat melakukan login setelah registrasi terlebih dahulu.
c. User dapat melakukan input permohonan Surat Keterangan seperti Surat Keterangan Kelahiran, Surat Keterangan Usaha, Surat Keterangan Tidak Mampu, dan Surat Keterangan Belum Menikah.
3. Kebutuhan Pengunjung (Visitor)
Kebutuhan Pengunjung yang dibutuhkan adalah:
a. Pengunjung dapat melihat semua halaman menu Beranda, Tentang, Artikel, Galeri, Kontak, Warga yang terdiri dari Login, Registrasi Cepat Warga, tanpa login terlebih dahulu.
b. Pengunjung dapat melakukan registrasi warga untuk kebutuhan login user agar dapat melakukan permohonan surat secara online.
B. Analisa Kebutuhan Non Fungsional
Kebutuhan non fungsional untuk web Rancang Bangun Website Desa Kalijambe Kabupaten Tegal yaitu sistem komputer yang berupa perangkat keras (Hardware) maupun perangkat lunak (Software). Berikut spesifikasi analisa kebutuhan non fungsional kebutuhan perangkat keras (hardware).
1. Kebutuhan Perangkat Keras (Hardware)
Kebutuhan perangkat keras (hardware) yang dibutuhkan dalam membuat Website Desa Kalijambe Kabupaten Tegal yaitu:
a. 1 buah Laptop atau Notebook b. RAM 2 .00 GB
c. Monitor 14 inch d. Printer
e. Koneksi internet
2. Kebutuhan Perangkat lunak (Software)
Kebutuhan perangkat lunak (software) yang dibutuhkan dalam membuat dan mengoperasikan Website Desa Kalijambe ini yaitu:
b. Web Server : (Apache,mysql)
c. Editor Web : (Adobe Dreamweaver CC 2015) d. Pengolah database : Database
e. Web Browser : (Google Chrome, Mozila Firefox)
3.3. Rancangan Antar Muka
Rancangan antar muka dalam Tugas Akhir Website Desa Kalijambe Kabupaten Tegal ini, yaitu :
1. Rancangan Antar Muka Halaman Home
Gambar III.2.Rancangan Antar Muka Halaman Home
Gambar III.2. merupakan home atau sering disebut sebagai halaman index atau halaman yang pertama kali tampil di halaman website. Pada halaman ini, terdapat logo dan menu seperti Home, Tentang mempunyai sub menu yaitu Profil, Struktur Organisasi, dan Visi Misi, Artikel, Gallery, Kontak, dan Warga.
2. Rancangan Antar Muka Halaman Tentang
Gambar III.3. Rancangan Antar Muka Halaman Tentang Gambar III.3. Merupakan halaman Tentang yang terdapat pada halaman Home atau index dari website ini. Halaman ini berfungsi menampilkan Profil Desa Kalijambe Kabupaten Kalijambe. Terdapat informasi yang disediakan yaitu Profil, Struktur Organisasi, dan Visi Misi, Artikel, Gallery, Kontak dan Warga dengan klik menu tentang yang berfungsi untuk menuju pilihan yang diinginkan.
3. Rancangan Antar Muka Halaman Artikel
Gambar III.4. Rancangan Antar Muka Halaman Artikel
Gambar III.4. Merupakan halaman Artikel yang terdapat pada halaman home atau index dari website ini. Berfungsi menampilkan beberapa artikel mengenai kegiatan desa.
4. Rancangan Antar Muka Halaman Gallery
Gambar III.5. Rancangan Antar Muka Halaman Gallery
Gambar III.5. Merupakan halaman Gallery yang terdapat pada halaman home atau index dari website ini. Berfungsi menampilkan beberapa koleksi gambar atau foto yang ada di website ini.
5. Rancangan Antar Muka Halaman Kontak
Gambar III.6. Rancangan Antar Muka Halaman Kontak
Gambar III.6. Merupakan halaman Kontak yang terdapat pada halaman home atau index dari website ini. Berfungsi menampilkan informasi Gmail dan media social Facebook Desa Kalijambe.
6. Rancangan Antar Muka Halaman Login User
Gambar III.7. Rancangan Antar Muka Halaman Login User
Gambar III.7. merupakan halaman login yang terdapat pada halaman home atau index dari website dengan cara menekan pada menu warga. Tampilan login ini untuk menampilkan form untuk login sebagai user.
7. Rancangan Antar Muka Halaman Register Warga
Gambar III.8. Merupakan halaman register warga yang terdapat pada halaman home atau index dari website ini pada menu warga dan di dalamnya ada menu untuk register warga.
8. Rancangan Antar Muka Halaman Home User
Gambar III.9.Rancangan Antar Muka Halaman Home User
Gambar III.9. Merupakan halaman user yang terdapat pada halaman home atau index dari website ini. Menampilkan beberapa menu diantaranya Home, Tentang terdiri dari Profil, Struktur Organisaasi, dan Visi Misi. Untuk dapat login dan dapat permohonan surat keterangan online, pengunjung bisa menekan menu warga kemudian klik login, dan menu register untuk pendaftaran warga.
9. Rancangan Antar Muka Halaman Dashboard Warga User
Gambar III.10. merupakan halaman Dashboard warga user yang terdapat pada halaman home atau index dari website ini. Berfungsi menampilkan informasi user dapat mengelola dashboard warga, ubah profil, logout.
10. Rancangan Antar Muka Halaman Ubah Profil User
Gambar III.11. Rancangan Antar Muka Halaman Ubah Profil User Gambar III.11. merupakan halaman ubah profil warga yang terdapat pada halaman home atau index dari website ini. Berfungsi menampilkan form data yang akan di ubah data yang dikelola dengan menekan menu warga, pilih ubah profil user.
11. Rancangan Antar Muka Halaman Login Admin
Gambar III.12. Rancang Antar Muka Halaman Login
Gambar III.12. merupakan halaman login pertama sebelum masuk ke . dalam halaman. Rancangan antar muka login untuk admin masuk ke halaman administrator.
12. Rancangan Antar Muka Halaman Beranda
Gambar III.13. Rancangan Antar Muka Halaman Beranda Admin. Gambar III.13. merupakan halaman beranda atau sering disebut sebagai halaman index atau halaman yang pertama kali tampil di halaman website. Pada halaman ini, terdapat logo dan menu seperti Beranda, Data Penduduk, Surat yang terdiri dari Permohonan Surat Online, Data Admin, Artikel, Galeri, Laporan
terdiri dari Laporan Data Penduduk, Laporan Permohonan Surat, Laporan Statistik.
13. Rancangan Antar Muka Halaman Data Penduduk
Gambar III.14. Rancangan Antar Muka Halaman Data Penduduk Gambar III.14. merupakan halaman Data Penduduk atau sering disebut sebagai halaman index atau halaman yang pertama kali tampil di halaman website. Halaman ini berfungsi menampilkan jenis permohonan surat keterangan. Terdapat tiga pilihan aksi diantaranya ada detail, edit, dan hapus, masing-masing aksi tersebut hanya dilakukan oleh admin.
14. Rancangan Antar Muka Halaman Permohonan Surat Online
Gambar III.15. merupakan halaman permohonan surat atau sering disebut sebagai halaman index atau halaman yang pertama kali tampil di halaman website. Halaman ini berfungsi menampilkan jenis permohonan surat keterangan. Terdapat empat pilihan aksi diantaranya ada setuji, tolak, diambil dan edit.
15. Rancangan Antar Muka Halaman Data Admin
Gambar III.16. Rancangan Antar Muka Halaman Data Admin
Gambar III.16. merupakan halaman Data Admin Terdapat dua pilihan aksi diantaranya ubah dan hapus, masing-masing aksi tersebut hanya dilakukan oleh admin.
16. Rancangan Antar Muka Halaman Artikel
Gambar III.17. merupakan halaman Artikel terdapat tiga pilihan aksi diantaranya ada ubah, hapus, detail, masing-masing aksi tersebut hanya dilakukan oleh admin.
17. Rancangan Antar Muka Halaman Galeri
Gambar III.18. Rancang Antar Muka Halaman Galeri Gambar III.18. merupakan halaman Galeri Terdapat tiga pilihan aksi diantaranya ada ubah, hapus, detail, masing-masing aksi tersebut hanya dilakukan oleh admin.
18. Rancangan Antar Muka Halaman Laporan Data Penduduk
Gambar III.19. merupakan halaman yang berfungsi menampilkan tabel Laporan Data dari Penduduk
19. Rancangan Antar Muka Halaman Laporan Permohonan Surat
Gambar III.20. Rancang Antar Muka Halaman Laporan Permohonan Surat
Gambar III.20. merupakan halaman laporan permohonan surat online, yang dialkukan oleh warga, gambar tersebut berfungsi menampilkan tabel laporan permohonan yang berisi nomer registrasi, tanggal registrasi, nik warga, jenis surat yang dibuat, status surat dan juga tanggal pengambilan. Laporan ini ditampilkan berdasarkan per-periodenya dari mulai bulan, dan tahun.
20. Rancangan Antar Muka Halaman Laporan Statistik
Gambar III.21. Rancang Antar Muka Halaman Laporan Statistik Gambar III.21. merupakan halaman dari laporan laporan statistik warga yang di gambarkan berdasarkan jumlah penduduk, jumlah penduduk laki-laki dan perempuan, jumlah permohonan surat keterangan surat online, jenis pendidikan, dan jenis pekerjaan yang di tampilkan dengan gambar yang dapat di baca dan dilihat dengan jelas.
3.4. ERD (Entity Relationship Diagram)
Perancangan basis data menjelaskan tentang file juga menghasilkan pemetaan tabel-tabel yang di gambarkan dengan (ERD) Entity Relationship Diagram. Berikut adalah struktur ERD (Entity Relationship Diagram) pada database web ini :
Gambar III.22.ERD (Entity Relationship Diagram)
3.5. LRS (Logical Record Structure)
3.6. Spesifikasi File
Menjelaskan tentang file atau tabel-tabel yang terbentuk dari transformasi ERD dan LRS yang tersimpan dalam database. Dalam pembuatan Tugas Akhir menggunakan satu database dengan nama simpedes.sql.
1. Spesifikasi File Admin
Nama File : File Admin Akronim : Admin
Fungsi : Untuk menyimpan data admin Tipe File : File Master
Organisasi File : Index Sequential Akses File : Random
Media : Hard Disk Panjang Record : 72 byte Kunci Field : id_admin
Software : Mysql
Tabel III.2. Spesifikasi File Admin
No Elemen Data Nama Field Tipe Size Keterangan
1. Id_admin id_admin int 11 Primary Key
2. Username username varchar 20 3. Passsword passsword varchar 15 4. Nama Asli nama_asli varchar 25
2. Spesifikasi File Penduduk
Nama File : File Penduduk Akronim : Penduduk
Fungsi : Untuk menyimpan data Penduduk Tipe File : File Master
Media : hard disk Panjang Record : 264byte Kunci Field : nik
Software : Mysql
Tabel III.3.
Spesifikasi File Penduduk
No Elemen Data Nama Field Tipe Size Keterangan
1. Nik nik varchar 16 Primary
Key
2. Email email varchar 30
3. Nama_lengkap nama_lengkap varchar 26 4. Jenis Kelamin jenis_kelamin enum
5. Alamat alamat varchar 50
6. Rt rt int 10
7. Rw rw iInt 10
8. Status status int 1
10. Tempat Lahir tempat_lahir varchar 50 11. Tanggal Lahir tgl_lahir date
12. Warga_negara warga_negara varchar 100 13. Pekerjaan pekerjaan varchar 50 14. Status Kawin status_kawin enum
3. Spesifikasi File Artikel
Nama File : File Artikel Akronim : Artikel
Fungsi : Untuk menampilkan data Artikel Tipe File : File Master
Media : hard disk Panjang Record :136 byte Kunci Field : id_artikel
Software : Mysql
Tabel III.4. Spesifikasi File Artikel
No Elemen Data Nama Field Tipe Size Keterangan 1. Id Artikel id_artikel varchar 11 Primary Key
2. Judul judul varchar 25
3. Isi Artikel isi_artikel text 4. Tanggal
Artikel
tgl_artikel datetime
4. Spesifikasi File Galeri
Nama File : File Galeri Akronim : Galeri
Fungsi : Untuk menampilkan data Galeri Tipe File : File Master
Media : hard disk Panjang Record : 40 byte Kunci Field : id_galeri
Software : Mysql
Tabel III.5. Spesifikasi File Galeri
No Elemen Data Nama Field Tipe Size Keterangan 1. Id Galeri id_galeri varchar 15 Primary Key 2. Judul Galeri judul_galeri varchar 25
3. Tgl Galeri tgl_galeri datetime 4. Deskripsi deskripsi text
5. Spesifikasi File Galeri Detail
Nama File : File Galeri Detail Akronim : Galeri
Fungsi : Untuk menampilkan data Galeri Tipe File : File Master
Media : hard disk Panjang Record : 40 byte
Kunci Field : id_galeri_detail
Tabel III.6.
Spesifikasi File Galeri Detail
No Elemen Data Nama Field Tipe Size Keterangan 1. Id galeri_detail id_galeri_detail varchar 15 Primary Key 2. Id Galeri id_galeri varchar 25
3. Gambar gambar datetime
6. Spesifikasi File Surat Request
Nama File : File Surat Request Akronim : Surat Request
Fungsi : Untuk menyimpan data Surat Request Tipe File : File Master
Media : hard disk Panjang Record : 221 byte Kunci Field : id_surat Software : Mysql
Tabel III.6.
Spesifikasi File Surat Request
No Elemen Data Nama Field Tipe Size Keterangan 1. Id surat id_surat int 11 Primary Key 2. No reg no_reg varchar 100
3. Tgl_reg tgl_reg date
4. Nik nik varchar 50
5. Jenis_surat jenis_surat varchar 50 6. Deskripsi deskripsi longtext 7. Status_surat status_surat int 1 8. Tgl_ambil tgl_ambil date
7. Spesifikasi File Jenis Surat
Nama File : File Surat Jenis surat Akronim : Jenis Surat
Fungsi : Untuk menyimpan data Jenis Surat Tipe File : File Master
Media : hard disk Panjang Record : 221 byte Kunci Field : idjenissurat Software : Mysql
Tabel III.7.
Spesifikasi File Jenis Surat
3.7. Pengkodean 1. Id Galeri
Setiap galeri memiliki Id masing-masing untuk membedakan galeri sesuai dengan saat mengunggah galeri, diantaranya terdiri dari:
Contoh :
Ket : GAL = Untuk Identitas Id Galeri Gambar III.24. Pengkodean Id Galeri
No Elemen Data Nama Field Tipe Size Keterangan 1. Idjenissurat idjenissurat int 11 Primary Key 2. Namajenissurat no_reg varchar 100
X X X 9 9 9 9 9 9 9 G A L 2 0 1 8 0 0 1
2. Id Jenis Surat
Setiap Jenis surat mempunyai identitas berbeda, masing-masing identitas untuk membedakan nama dari surat yang satu dengan yang lain, diantaranya yaitu:
X X X 9 9 9 9 9 9 9 9
Contoh:
X X X 9 9 9 9 9 9 9 9
Ket : STM = Untuk Identitas Surat Tidak Mampu Gambar III.25. Pengkodean Id Jenis Surat
3.8. Spesifikasi Program
A. Struktur Navigasi Halaman Admin
Rancangan antar muka merupakan segala sesuatu yang berhubungan desain tampilan yang akan diterapkan dalam sebuah pembuatan projek dengan memperhatikan unsur kenyamanan pengguna baik itu user ataupun pengunjung (visitor).
Id Jenis Surat Kode Surat Tahun No.Urut
Gambar III.26. Struktur Navigasi Halaman Index (Menu Utama) B. Struktur Navigasi Halaman User
Gambar III.27. Struktur Navigasi Halaman User C. Struktur Navigasi Halaman Pengunjung (Visitor)
3.9. Implementasi
A. Implementasi Antar Muka
Implementasi rancangan antar muka pada website Desa Kalijambe Kabupaten Tegal, berdasarkan hasil rancangan antar mukanya sebagai berikut. 1. Tampilan Home User
Gambar III.29. Tampilan Halaman Home User
Gambar III.29. merupakan implementasi dari halaman Home User atau Home page dari website ini. Terdapat menu Home untuk kembali ke halaman awal, menu Tentang yang terdiri dari beberapa Sub menu seperti Profil Desa, Visi & Misi, dan Struktur Organisasi. Serta menu lainnya seperti Artikel, Gallery, Kontak, dan Menu Warga.
2. Tampilan Tentang
Gambar III.30. Tampilan Halaman Tentang
Gambar III.30. merupakan implementasi dari halaman Tentang dalam home yang dapat dilihat dengan menekan Menu Tentang yang terdiri dari Sejarah Desa, Visi & Misi, dan Struktur Organisasi. Serta menu lainnya seperti Artikel, Gallery, Kontak, dan Menu Warga.
3. Tampilan Artikel
Gambar III.31. merupakan implementasi dari halaman artikel dalam home yang dapat dilihat dengan menekan menu artikel yang tersedia di header yang berisi gambar dan artikel seputar.
4. Tampilan Gallery
Gambar III.32. Tampilan Halaman Gallery
Gambar III.32. merupakan implementasi dari halaman gallery dalam home yang dapat dilihat dengan menekan Menu Gallery yang tersedia di header bagian tampilan galerry maka akan muncul informasi mengenai keterangan foto yang terkait.
5. Tampilan Login User
Gambar III.33. merupakan implementasi dari halaman login user dalam home yang dapat dilihat dengan menekan Menu warga yang tersedia di header maka akan muncul informasi untuk login sebagai user dengan input nik dan password. 6. Tampilan Dashboard Warga
Gambar III.34.Tampilan Halaman Dashboard Warga
Gambar III.34. merupakan implementasi dari halaman dashboard warga dalam home yang dapat dilihat dengan login terlebih dahulu yang tersedia di header maka akan muncul informasi surat keterangan yang akan dibuat, dan tampilan surat yang sudah dibuat.
7. Tampilan Pengajuan Surat
Gambar III.35. Tampilan Halaman Pengajuan Surat
Gambar III.35. merupakan implementasi dari halaman Pengajuan Surat dalam home yang dapat dilihat dengan klik tombol tambah surat, maka akan muncul form seperti ini. Untuk membuat permohonan surat keterangan yang akan akan dibuat.
8. Tampilan Register User
Gambar III.36. Tampilan Halaman Register User
Gambar III.36. merupakan implementasi dari halaman Register yang dapat dilihat setelah menekan link Register disini dibawah form login warga pada halaman beranda website ini. Untuk melakukan register harus mengisi data dengan lengkap dan jelas. Kemudian, tekan tombol Daftar yang tersedia dibawah form.
9. Tampilan Ubah Profil Penduduk
Gambar III.37. Tampilan Ubah Profil Penduduk
Gambar III.37. merupakan implementasi dari halaman untuk Ubah Profil Penduduk, penduduk dapat mengubah identitas, kemudian tekan tombol Kirim.
10. Tampilan Login Admin
Gambar III.38. Tampilan Login Admin
Gambar III.38. merupakan implementasi dari halaman login untuk masuk ke dalam halaman Administrator, harus mengisi username dan password kemudian tekan tombol Sign In.
11. Tampilan Beranda Admin
Gambar III.39. Tampilan Beranda Admin
Gambar III.39. merupakan implementasi dari halaman beranda admin yang dapat dilihat setelah berhasil login admin. Terdapat beberapa menu admin diantaranya Beranda, Data Penduduk, Surat, Data Admin, Artikel, Galeri, dan Laporan.
12. Tampilan Data Penduduk
Gambar III.40. Tampilan Data Penduduk
Gambar III.40. merupakan implementasi dari halaman data penduduk yang berisi data-data penduduk dan dapat mengetahui penduduk yang sudah meninggal maupun yang masih hidup, melihat jenis pekerjaan warga, dan data lainnya.
13. Tampilan Permohonan Surat Keterangan Online
Gambar III.41. Tampilan Permohonan Surat Online
Gambar III.41. merupakan implementasi dari halaman permohonan surat yang akan muncul apabila memilih menu Surat dropdown Surat.
14. Tampilan Data Admin
Gambar III.42. Tampilan Data Admin
Gambar III.42. merupakan implementasi dari halaman Data Admin yang dapat dilihat setelah berhasil login admin, berisi username, nama asli, dan aktif.
15. Tampilan Artikel
Gambar III.43. Tampilan Artikel
Gambar III.43. merupakan implementasi dari halaman Artikel desa yang berisi informasi-informasi yang akan muncul apabila memilih Artikel pada menu dropdown Surat.
16. Tampilan Galeri
Gambar III.44. TampilanGaleri
Gambar III.44. merupakan implementasi dari halaman galeri admin yang akan muncul apabila memilih Galeri yang isinya album dari desa. Aksi ini hanya bisa di lakukan oleh admin.
17. Tampilan Laporan Data Penduduk
Gambar III.45. Tampilan Laporan Data Penduduk
Gambar III.45. merupakan implementasi dari halaman Laporan Data Penduduk yang dapat disimpan dan dicetak sebagai arsip instansi Desa.
18. Tampilan Laporan Permohonan Surat
Gambar III.46. Tampilan Laporan Permohonan Surat
Gambar III.46. merupakan implementasi dari halaman Laporan Permohonan Surat yang dapat disimpan dan dicetak sebagai arsip instansi Desa.
19. Tampilan Laporan Statistik
Gambar III.47. Tampilan Laporan Statistik
Gambar III.47. merupakan implementasi dari halaman Laporan Penduduk yang dapat disimpan dan dicetak sebagai arsip instansi Desa.
3.10. Pengujian Unit
Pengujian terhadap program yang dibuat menggunakan blackbox testing yang fokus terhadap proses masukan dan keluaran program.
1. Pengujian Terhadap Form Login Admin
Tabel III.8. Hasil Pengujian Form Login Admin
No Skenario
pengujian Test case
Hasilyang diharapkan Hasil Pengujian Kesimpulan 1. Username dan Password tidak diisi kemudian klik tombol “Sign In” Username: Kosong Password: Kosong Sistem akan menolak akses dan menampilkan pesan” Login Gagal Silahkan periksa kembali username dan password Anda” Sesuai harapan Valid 2. Username diisi dan Password tidak diisi, Username: indana Password: Sistem akan menolak akses dan Sesuai harapan Valid
kemudian klik “Sign In” Kosong menampilkan pesan” Login Gagal Silahkan periksa kembali username dan password Anda” 3. Username tidak diisi dan Password diisi kemudian klik tombol Masuk Username: Kosong Password: indana Sistem akan menolak akses dan menampilkan pesan” Login Gagal Silahkan periksa kembali username dan password Anda” Sesuai harapan Valid 4. Username dan Password diisi dengan data yang salah. Username: indanazul Password: 1234 Sistem akan menolak akses dan menampilkan pesan” Login Gagal Silahkan periksa kembali username dan password Anda” Sesuai harapan Valid 5. Username dan Password diisi dengan data yang benar kemudian klik Sign In. Username: indana Password: indana Sistem menerima akses login dan masuk ke halaman beranda admin Sesuai harapan Valid
2. Pengujian Terhadap Form Data Penduduk
Tabel III.9. Hasil Pengujian Form Data Penduduk
No. Skenario
Pengujian Test Case
Hasil Yang diharapkan Hasil Pengujian Kesimpulan 1. Username diisi, Email, NIK, Nama Lengkap, Jenis Email: Kosong Nik: Kosong Nama Lengkap: Kosong Jenis Kelamin: Kosong Alamat: Kosong Sistem akan menolak akses dan menampilkan pesan “masukan email Sesuai harapan Valid
Kelamin, Alamat, RT, RW, Status, Tempat Lahir, Tanggal Lahir, Pekerjaan, Status Kawin, dan passoword tidak diisi kemudian klik “Simpan Data” RT: Kosong RW: Kosong Status: Kosong Tempat Lahir: Kosong Tanggal Lahir: Kosong Pekerjaan: Kosong StatusKawin: Kosong Password: Kosong dahulu” 2. Username diisi, Email diisi, NIK, Nama Lengkap, Jenis Kelamin, Alamat, RT, RW, Status, Tempat Lahir, Tanggal Lahir, Pekerjaan, Status Kawin, dan passoword tidak diisi kemudian klik “Simpan Data” Email: aman@gmail.com Nik: Kosong Nama Lengkap: Kosong Jenis Kelamin: Kosong Alamat: Kosong RT:Kosong RW: Kosong Status: Kosong Tempat Lahir: Kosong Tanggal Lahir: Kosong Pekerjaan: Kosong Status Kawin: Kosong Password: Kosong Sistem akan menolak akses dan menampilkan pesan “masukan NIK dahulu” Sesuai harapan Valid 3. Email diisi, NIK diisi, Email: aman@gmail.com Nik: Sistem akan menolak akses dan Sesuai harapan Valid
Nama Lengkap, Jenis Kelamin, Alamat, RT, RW, Status, Tempat Lahir, Tanggal Lahir, Pekerjaan, Status Kawin, dan passoword tidak diisi kemudian klik “Simpan Data” 3336578729298001 Nama Lengkap: Kosong Jenis Kelamin: Kosong Alamat:Kosong RT: Kosong RW: Kosong Status: Kosong Tempat Lahir: Kosong Tanggal Lahir: Kosong Pekerjaan:Kosong Status Kawin: Kosong Password: Kosong menampilkan pesan “masukan Nama Lengkap dahulu” 4. Email diisi, NIK diisi, Nama Lengkap diisi, Jenis Kelamin, Alamat, RT, RW, Status, Tempat Lahir, Tanggal Lahir, Pekerjaan, Status Kawin, dan password tidak diisi kemudian klik “Simpan Data” Email: aman@gmail.com Nik: 3336578729298001 Nama Lengkap: Salman Aman Jenis Kelamin: Kosong Alamat:Kosong RT: Kosong RW: Kosong Status: Kosong Tempat Lahir: Kosong Tanggal Lahir: Kosong Pekerjaan:Kosong Status Kawin: Kosong Password: Kosong Sistem akan menolak akses dan menampilkan pesan “masukan Jenis Kelamin dahulu” Sesuai harapan Valid 5. Email diisi, NIK diisi, Email: aman@gmail.com Nik: Sistem akan menolak akses dan Sesuai harapan Valid
Nama Lengkap diisi, Jenis Kelamin diisi, Alamat, RT, RW, Status, Tempat Lahir, Tanggal Lahir, Pekerjaan, Status Kawin, dan passoword tidak diisi kemudian klik “Simpan Data” 3336578729298001 Nama Lengkap: Salman Aman Jenis Kelamin: Laki-laki Alamat: Kosong RT: Kosong RW: Kosong Status: Kosong Tempat Lahir: Kosong Tanggal Lahir: Kosong Pekerjaan: Kosong Status Kawin: Kosong Password: Kosong menampilkan pesan “masukan alamat dahulu” 6. Email diisi, NIK diisi, Nama Lengkap diisi, Jenis Kelamin diisi, Alamat diisi, RT, RW, Status, Tempat Lahir, Tanggal Lahir, Pekerjaan, Status Kawin, dan passoword tidak diisi kemudian klik “Simpan Data” Email: aman@gmail.com Nik: 3336578729298001 Nama Lengkap: SALMAN AMAN Jenis Kelamin: Laki-laki Alamat: KALIJAMBE RT: Kosong RW: Kosong Status: Kosong Tempat Lahir: Kosong Tanggal Lahir: Kosong Pekerjaan: Kosong Status Kawin: Kosong Password: Kosong Sistem akan menolak akses dan menampilkan pesan “masukan rt dahulu” Sesuai harapan Valid
7. Email diisi, NIK diisi, Nama Lengkap diisi, Jenis Kelamin diisi, Alamat diisi, RT diisi, RW, Status, Tempat Lahir, Tanggal Lahir, Pekerjaan, Status Kawin, dan passoword tidak diisi kemudian klik “Simpan Data” Email: aman@gmail.com Nik: 3336578729298001 Nama Lengkap: SALMAN AMAN Jenis Kelamin: Laki-laki Alamat: KALIJAMBE RT: 02 RW: Kosong Status: Kosong Tempat Lahir: Kosong Tanggal Lahir: Kosong Pekerjaan: Kosong Status Kawin: Kosong Password: Kosong Sistem akan menolak akses dan menampilkan pesan “masukan rw dahulu” Sesuai harapan Valid 8. Email diisi, NIK diisi, Nama Lengkap diisi, Jenis Kelamin diisi, Alamat diisi, RT diisi, RW diisi, Status Tempat Lahir, Tanggal Lahir, Pekerjaan, Status Kawin, dan passoword Email: aman@gmail.com Nik: 3336578729298001 Nama Lengkap: SALMAN AMAN Jenis Kelamin: Laki-laki Alamat: KALIJAMBE RT: 02 RW: 01 Status: Kosong Tempat Lahir: Kosong Tanggal Lahir: Kosong Pekerjaan: Kosong Status Kawin: Kosong Password: Kosong Sistem akan menolak akses dan menampilkan pesan “masukan status dahulu” Sesuai harapan Valid
tidak diisi kemudian klik “Simpan Data” 9. Email diisi, NIK diisi, Nama Lengkap diisi, Jenis Kelamin diisi, Alamat diisi, RT diisi, RW diisi, Status diisi Tempat Lahir, Tanggal Lahir, Pekerjaan, Status Kawin, dan password tidak diisi kemudian klik “Simpan Data” Username: Kosong Email: aman@gmail.com Nik: 3336578729298001 Nama Lengkap: SALMAN AMAN Jenis Kelamin: Laki-laki Alamat: KALIJAMBE RT:02 RW: 01 Status:1 Tempat Lahir: Kosong Tanggal Lahir: Kosong Pekerjaan: Kosong Status Kawin: Kosong Password: Kosong Sistem akan menolak akses dan menampilkan pesan “masukan tempat lahir dahulu” Sesuai harapan Valid
10. Email diisi, NIK diisi, Nama Lengkap diisi, Jenis Kelamin diisi, Alamat diisi, RT diisi, RW diisi, Status diisi Tempat Lahir diisi, Tanggal Lahir, Pekerjaan, Status Kawin, dan password tidak diisi kemudian klik “Simpan Data” Email: aman@gmail.com Nik: 3336578729298001 Nama Lengkap: SALMAN AMAN Jenis Kelamin: Laki-laki Alamat: KALIJAMBE RT: 02 RW: 01 Status: 1 Tempat Lahir: TEGAL Tanggal Lahir: Kosong Pekerjaan: Kosong Status Kawin: Kosong Password: Kosong Sistem akan menolak akses dan menampilkan pesan “masukan tanggal lahir dahulu” Sesuai harapan Valid 11. Username diisi, Email diisi, NIK diisi, No.KK diisi, Nama Lengkap diisi, Jenis Kelamin diisi, Alamat diisi, RT diisi, RW diisi, Status diisi Tempat Username: Kosong Email: aman@gmail.com Nik: 3336578729298001 No.KK: 3336510291049100 Nama Lengkap: SALMAN AMAN Jenis Kelamin: Laki-laki Alamat: KALIJAMBE RT: 02 RW: 01 Status:1 Tempat Lahir: Sistem akan menolak akses dan menampilkan pesan “masukan pekerjaan dahulu” Sesuai harapan Valid
Lahir diisi, Tanggal Lahir diisi, Pekerjaan, Status Kawin, dan password tidak diisi kemudian klik “Simpan Data” TEGAL Tanggal Lahir: 08-09-1997 Pekerjaan: Kosong Status Kawin: Kosong Password: Kosong 12. Email diisi, NIK diisi, Nama Lengkap diisi, Jenis Kelamin diisi, Alamat diisi, RT diisi, RW diisi, Status diisi Tempat Lahir diisi, Tanggal Lahir diisi, Pekerjaan diisi, Status Kawin, dan password tidak diisi kemudian klik “Simpan Data” Email: aman@gmail.com Nik: 3336578729298001 Nama Lengkap: SALMAN AMAN Jenis Kelamin: Laki-laki Alamat: KALIJAMBE RT: 02 RW: 01 Status: 1 Tempat Lahir: TEGAL Tanggal Lahir: 08-09-1997 Pekerjaan: PELAJAR Status Kawin: Kosong Password: Kosong Sistem akan menolak akses dan menampilkan pesan “masukan status kawin dahulu” Sesuai harapan Valid 13. Email diisi, NIK diisi, Nama Email: aman@gmail.com Nik: 3336578729298001 Sistem akan menolak akses dan menampilkan Sesuai harapan Valid
Lengkap diisi, Jenis Kelamin diisi, Alamat diisi, RT diisi, RW diisi, Status diisi Tempat Lahir diisi, Tanggal Lahir diisi, Pekerjaan diisi, Status Kawin diisi, dan password tidak diisi kemudian klik “Simpan Data” Nama Lengkap: SALMAN AMAN Jenis Kelamin: Laki-laki Alamat: KALIJAMBE RT: 02 RW: 01 Status:1 Tempat Lahir: TEGAL Tanggal Lahir: 08-09-1997 Pekerjaan: PELAJAR Status Kawin: Belum Kawin Password: Kosong pesan “masukan password dahulu” 14. Email diisi, NIK diisi, Nama Lengkap diisi, Jenis Kelamin diisi, Alamat diisi, RT diisi, RW diisi, Status diisi Tempat Lahir diisi, Tanggal Lahir diisi, Pekerjaan diisi, Status Kawin diisi, dan password diisi Email: aman@gmail.com Nik: 3336578729298001 Nama Lengkap: SALMAN AMAN Jenis Kelamin: Laki-laki Alamat: KALIJAMBE RT: 02 RW: 01 Status:1 Tempat Lahir: TEGAL Tanggal Lahir: 08-09-1997 Pekerjaan: PELAJAR Status Kawin: Belum Kawin Password: salman Sistem akan menerima akses dan akan menampilkan pesan “Data Berhasil disimpan” Sesuai harapan Valid
kemudian klik “Simpan Data”
3. Pengujian Terhadap Form Data Admin
Tabel III.10. Hasil Pengujian Form Data Admin
No Skenario
pengujian Test case
Hasilyang diharapkan Hasil Pengujian Kesimpulan 1. Username, Password, Nama Asli, Aktif tidak diisi kemudian klik tombol “Simpan” Username: Kosong Password: Kosong Nama Asli: Kosong Aktif: Kosong Sistem akan menolak akses dan menampilkan pesan”masuka n username dahulu” Sesuai harapan Valid 2. Username diisi, Password, Nama Asli, Aktif tidak diisi kemudian klik tombol “Simpan” Username: indana Password: Kosong Nama Asli: Kosong Aktif: Kosong Sistem akan menolak akses dan menampilkan pesan” masukan password dahulu” Sesuai harapan Valid 3. Username diisi, Password diisi, Nama Asli, Aktif tidak diisi kemudian klik tombol “Simpan” Username: indana Password: indana Nama Asli: Kosong Aktif: Kosong Sistem akan menolak akses dan menampilkan pesan” masukan nama asli dahulu” Sesuai harapan Valid 4. Username diisi, Password diisi, Nama Asli diisi, Aktif tidak diisi kemudian klik tombol “Simpan” Username: indana Password: indana Nama Asli: indanazul Aktif: Kosong Sistem akan menolak akses dan menampilkan pesan” masukan aktif dahulu” Sesuai harapan Valid
5. Username diisi, Password diisi, Nama Asli diisi, Aktif diisi kemudian klik tombol “Simpan” Username: indana Password: indana Sistem akan menerima akses dan akan menampilkan pesan “Data Berhasil disimpan” Sesuai harapan Valid
4. Pengujian Terhadap Form Artikel
Tabel III.11. Hasil Pengujian Form Artikel
No Skenario
pengujian Test case
Hasil yang diharapkan
Hasil
Pengujian Kesimpulan 1. Judul Artikel, Isi
Artikel, Foto, tidak diisi kemudian klik tombol “Simpan” Judul Artikel: Kosong Isi : Kosong Tanggal Artikel: Kosong Foto: Kosong Sistem akan menolak akses dan akan menampilkan pesan “Masukan Judul Artikel dahulu” Sesuai harapan Valid 2. Judul Artikel: diisi
Isi Artikel, Foto, tidak diisi kemudian klik tombol “Simpan” Judul Artikel: Gerbang Desa Isi: Kosong Tanggal Artikel: Kosong Foto: Kosong Sistem akan menolak akses dan akan menampilkan pesan “Masukan Isi Artikel dahulu” Sesuai harapan Valid
3. Judul Artikel diisi, Isi Artikel diisi, Foto, tidak diisi kemudian klik tombol “Simpan” judul Artikel: Gerbang Desa Isi: Gerbang Desa Kalijambe Foto: Kosong Sistem akan menolak akses dan akan menampilkan pesan “Masukan foto terlebih dahulu” Sesuai harapan Valid
4. Judul Artikel diisi, Isi Artikel diisi Foto: diisi kemudian klik tombol “Simpan” Judul Artikel: Gerbang Desa Isi: Gerbang Desa Kalijambe Foto: Kosong Sistem akan menerima akses dan akan menampilkan pesan“ simpan Data Berhasil” Sesuai harapan Valid
5. Pengujian Terhadap Form Galeri
Tabel III.12. Hasil Pengujian Form Galeri
No Skenario
pengujian Test case
Hasilyang diharapkan Hasil Pengujian Kesimpulan 1. Judul Galeri , Deskripsi, Tanggal Galeri, File Gambar tidak diisi kemudian klik tombol “Simpan” Judul Galeri: Kosong Deskripsi: Kosong Tanggal Galeri: Kosong File Gambar: Kosong Sistem akan menolak akses dan akan menampilkan pesan “ Silahkan Masukan isi Judul Galeri terlebih dahulu” Sesuai harapan Valid 2. Judul Galeri : diisi, Isi Galeri, Foto tidak diisi kemudian klik tombol “Simpan” Judul Galeri: Gerbang Desa Deskripsi: Kosong Foto: Kosong Sistem akan menolak akses dan akan menampilkan pesan “ Silahkan Masukan deskripsi dahulu” Sesuai harapan Valid
3. Judul Galeri : diisi, Isi Galeri : diisi, Foto diisi kemudian klik tombol “Simpan” Judul Galeri: Gerbang Desa Isi Galeri: Gerbang Desa Kalijambe Foto: Gerbang desa Sistem akan menerima akses dan akan menampilkan pesan “simpan Data Berhasil” Sesuai harapan Valid
6. Pengujian Terhadap Form Laporan Permohonan Surat
Tabel III.13. Hasil Pengujian Data Laporan Permohonan Surat
No Skenario
pengujian Test case
Hasilyang diharapkan Hasil Pengujian Kesimpula n 1. Filter data dari
bulan diisi, Tahun: Tidak diisi (kosong) kemudian klik “Tampilkan” Filter data dari bulan: Agustus Sampai Tahun: Kosong Sistem akan menolak akses dan akan menampilkan “Data Tidak kosong” Sesuai harapan Valid
2. Filter data dari bulan diisi, Tahun: Diisi kemudian klik “Tampilkan” Filter data dari bulan : Agustus Sampai Tahun: 2018 Sistem akan menerima akses dan akan menampilkan “Data yang sudah diinput” Sesuai harapan Valid
