BAB 3

HASIL PENELITIAN

3.1 Mendengarkan Pelanggan

Dalam merancang suatu website dimana tahapan awal dari membuat

sebuah website adalah mendengarkan keluhan pengguna atau pelanggan. Dalam

mendengarkan keluhan pelanggan, penulis melakukan beberapa tahap untuk

membangun sebuah sistem penerimaan anggota baru berbasis website pada kantor

Laskar Anti Korupsi Indonesia Kabupaten Kubu Raya. Tahap awal, penulis

melakukan wawancara dengan ketua serta staff Laskar Anti Korupsi Kubu Raya

mengenai sistem penerimaan anggota baru yang digunakan saat ini. Tahap

berikutnya, penulis melakukan pengamatan melalui observasi langsung terhadap

pelaksanaan proses pemasukkan data dan pengolahan data yang dilakukan oleh

panitia penerimaan angota baru Laskar Anti Korupsi Indonesia.

Pada penelitian ini, penulis akan merancang sebuah sistem penerimaan

anggota baru Laskar Anti Korupsi Indonesia Kubu Raya berbasis website.

Identifikasi yang dilakukan pada sistem penerimaan anggota baru Laskar Anti

Korupsi Indonesia berbasis website adalah fungsinya dalam melakukan tugas.

Setelah mendapatkan analisis kebutuhan, perancangan sistem penerimaan anggota

baru Laskar Anti Korupsi Indonesia berbasis website akan lebih terarah dan tujuan

dari penelitian akan lebih jelas.

Dari hasil analisa yang dilakukan pada Kantor Laskar Anti Korupsi

Indonesia Kabupaten Kubu Raya, dimana proses penerimaan anggota baru masih

dilakukan secara manual yaitu dengan menggunakan formulir yang disediakan

oleh panitia. Hal ini tentu saja Laskar Anti Korupsi Indonesia Kabupaten Kubu

Raya membutuhkan sistem yang dapat memproses pendaftaran, seleksi, dan

pengumuman ke dalam database dengan mudah, cepat dan akurat secara

terkomputerisasi. Dari proses analisa yang dilakukan, ditemukan beberapa

permasalahan yang dihadapi oleh pihak Laskar Anti Korupsi Indonesia, untuk

membantu menyelesaikan permasalahan tersebut, Laskar Anti Korupsi Indonesia

membutuhkan :

a. Website yang dapat memproses pendaftaran.

b. Website yang dapat memproses seleksi.

c. Website yang dapat memberikan informasi pengumuman penerimaan.

3.2 Merancang dan Membuat Prototype

Dalam perancangan ini penulis menggunakan metode prototyping dimana

proses pembuatan prototyping merupakan proses yang interaktif dan berulang-

ulang yang menggabungkan langkah-langkah pengembangan tradisional.

Prototyping dievaluasi beberapa kali sebelum pengguna akhir menyatakan

prototyping tersebut dapat diterima. Penulis membangun website ini secara

bertahap.

a. Analisis kebutuhan sistem untuk mendeskripsikan apa yang harus

dilakukan sistem untuk memenuhi kebutuhan informasi bagi

pengguna.

b. Desain sistem untuk menentukan bagaimana sistem akan memenuhi

tujuan tersebut.
 c. Pengujian sistem yang bertujuan menemukan kesalahan-kesalahan

yang terjadi pada sistem dan melakukan revisi sistem.

d. Setelah prototyping diterima maka tahap ini merupakan impelementasi

sistem yang siap digunakan.

3.2.1 Arsitektur Perangkat Lunak

Arsitektur perangkat lunak merupakan sekumpulan pernyataan yang

menggambarkan komponen perangkat lunak serta hubungan antara komponen

tersebut. Agar website yang dibuat dapat lebih mudah dipahami, berikut ini

dijelaskan gambaran dari arsitektur perancangan website untuk pendaftaran

anggota baru pada Laskar Anti Korupsi Indonesia Kabupaten Kubu Raya.

Gambar 3.1 Arsitektur Perancangan Website

Untuk menghubungkan database dengan bahasa pemrograman PHP

menggunakan XAMPP dan MySQL.

3.2.2 Perancangan Menu

Agar lebih mudah dipahami struktur menu dapat dilihat pada bagan seperti

berikut :

Ketika mengunjungi website, pengguna akan dihadapkan pada beranda, untuk

admin dapat langsung login apabila sudah memiliki akun untuk mengakses data

pengguna, data pendaftaran, dan hasil seleksi. Untuk pengguna yang sudah

mendaftarkan akun dapat melakukan login dan melakukan pendaftaran serta

melihat hasil pengumuman.

3.2.3 Perancangan Flowchart

 Agar mempermudah dalam memulai merancang website untuk pendaftaran

anggota baru Laskar Anti Korupsi Indonesia Kabupaten Kubu Raya, maka

diperlukan perancangan algoritma terlebih dahulu sehingga dapat mudah

dipahami. Algoritma tersebut dapat digambarkan ke dalam bentuk bagan alir atau

disebut flowchart.

a. Rancangan Flowchart Login Admin

Halaman Login merupakan halaman yang tampil di website yang dapat

diakses melalui url sehingga orang lain tidak sembarangan menembus

halaman login admin. Terdapat 2 inputan di halaman login yaitu username

Gambar 3.3 Flowchart Login Admin

dan password, admin harus memasukkan username dan password untuk

bisa ke langkah selanjutnya, jika salah maka kembali untuk menginputkan

username dan password. Jika benar, maka tampilkan menu admin. Berikut

adalah flowchart login admin.

b. Rancangan Flowchart Menu Admin

Gambar 3.4 Flowchart Menu Admin

Menu admin merupakan tampilan yang terdapat pada halaman admin yang

berfungsi untuk melihat data pengguna, data pendaftaran, dan hasil seleksi.

Flowchart untuk menu admin adalah jika menu data pengguna dipilih

maka algoritma akan menampilkan halaman tampil data pengguna, jika

menu data pendaftaran dipilih maka algoritma akan menampilkan halaman

data pendaftaran, jika menu menu seleksi dipilih maka algoritma akan

menampilkan akan menampilkan halaman tampil hasil seleksi. Berikut

adalah flowchart menu admin.

c. Rancangan Flowchart Halaman Data Pengguna

 Halaman data pengguna merupakan tampilan yang terdapat pada menu

admin yang berfungsi untuk mencari data pengguna, menampilkan data

pengguna dan menghapus data pengguna. Flowchart untuk halaman data

pengguna adalah ketika admin memilih menu data pengguna, maka akan

menampilkan tabel pengguna, jika admin memilih baris yang akan dihapus

pada tabel pengguna kemudian klik tombol hapus, maka akan tampil kotak

dialog pesan dihapus kemudian pilih ya. Jika admin akan mencari data,

maka masukkan kata kunci yang dicari pada kolom pencarian dan pilih

Gambar 3.5 Flowchart Halaman Data Pengguna

cari, maka tabel data pengguna akan menampilkan data yang dicari.

Berikut adalah flowchart halaman data pengguna.

d. Rancangan Flowchart Halaman Data Pendaftaran

 Halaman data pendaftaran merupakan tampilan yang terdapat pada menu

admin yang berfungsi untuk mencari data pendaftaran, menampikan data

pendaftaran, mengubah data pendaftaran dan menghapus data pendaftaran.

Flowchart untuk halaman data pendaftaran adalah ketika admin memilih

menu data pendaftaran, maka akan menampilkan tabel pendaftaran, jika

admin memilih baris yang akan diubah pada tabel pendaftaran kemudian

klik tombol ubah, maka akan tampil form ubah data pendaftaran, jika

admin memilih baris yang akan dihapus pada tabel pendaftrarn kemudian

klik tombol hapus, maka akan tampil kotak dialog pesan dihapus

kemudian pilihya, jika admin akan mencari data, maka masukkan kata

kunci yang dicari pada kolom pencarian dan pilih cari, maka tabel data

Gambar 3.6 Flowchart Halaman Data Pendaftaran

pendaftaran akan menampilkan data yang dicari. Berikut adalah flowchart

halaman data pendaftaran.

e. Rancangan Flowchart Form Ubah Pendaftaran

Form ubah pendaftaran merupakan tampilan yang akan tampil ketika

admin mengklik tombol ubah pada halaman pendaftaran dan berfungsi

untuk mengubah data pendaftaran. Flowchart untuk form ubah data

pendaftaran yaitu, ketika admin mengklik tombol ubah pada halaman

pendaftaran, maka akan tampil form ubah pendaftaran, kemudian admin

Gambar 3.7 Flowchart Halaman Ubah Data Pendaftaran

mengubah data pendaftaran dengan lengkap. Jika admin ingin keluar dari

form maka klik tombol keluar. Berikut adalah flowchart form ubah

pendaftaran.
f. Rancangan Flowchart Halaman Data Seleksi

Halaman data seleksi merupakan tampilan yang terdapat pada menu admin

berfungsi untuk mencari data seleksi, menampilkan data seleksi, dan

mengunduh data seleksi. Flowchart untuk halaman data seleksi adalah

ketika admin memilih menu data seleksi, maka akan menampilkan tabel

seleksi, jika admin akan mencari data, maka masukkan kata kunci yang

dicari pada kolom pencarian dan pilih cari, maka tabel data seleksi akan

menampilkan data yang dicari. Berikut adalah flowchart halaman data

seleksi.

Gambar 3.8 Flowchart Halaman Data Seleksi

g. Rancangan Flowchart form tambah akun pengguna

 Form tambah akun pengguna merupakan tampilan yang akan tampil ketika

pengguna mengklik tombol daftar akun pada website dan berfungsi untuk

membuat akun pengguna. Flowchart untuk form tambah akun pengguna

yaitu, ketika pengguna mengklik tombol daftar akun pada form registrasi,

maka akan tampil form tambah akun pengguna, kemudian mengisi data

dengan lengkap. Jika pengguna ingin menyimpan maka klik tombol daftar.

Berikut flowchart form tambah akun pengguna.

h. Rancangan Flowchart Login Pengguna

 Halaman login merupakan halaman yang tampil di beranda website

pendaftaran calon anggota Laskar Anti Korupsi Indonesia Kabupaten

Kubu Raya, pengguna harus memasukkan username dan password untuk

bisa ke langkah selanjutnya, jika salah maka kembali untuk menginputkan

username dan password. Jika benar, maka akan menampilkan menu

pengguna. Berikut adalah flowchart login pengguna.

i. Rancangan Flowchart Halaman Pendaftaran

Halaman pendaftaran merupakan tampilan yang terdapat pada menu

pengguna yang berfungsi untuk menampilkan data pendaftaran. Flowchart

untuk halaman pendaftaran adalah ketika pengguna memilih menu

pendaftaran anggota, maka akan menampilkan form pengisian untuk

menjadi anggota Laskar Anti Korupsi Indonesia. Berikut adalah flowchart

halaman pendaftaran.
j. Rancangan Flowchart Halaman Pengumuman

Halaman pengumuman merupakan tampilan yang terdapat pada halaman

menu pengguna yang berfungsi untuk melihat pengumuman kelulusan.

Berikut merupakan flowchart halaman pengumuman.

Gambar 3.12 Flowchart Halaman Pengumuman

3.2.4 Perancangan Database

Dalam merancang website pendaftaran anggota Laskar Anti Korupsi

Indonesia Kabupaten Kubu Raya diperlukan sebuah database untuk meyimpan

data. Database yang digunakan adalah MySQL dan program yang digunakan

untuk merancang database adalah PHP Myadmin dan XAMPP. Database tersebut

terdiri dari beberapa tabel dengan struktur tabel dan atribut yang berbeda sesuai

dengan kebutuhan. Ada empat tabel yang digunakan dalam website pendaftaran

anggota Laskar Anti Korupsi Indonesia Kabupaten Kubu Raya yaitu tbl_user,

tbl_pengguna, tbl_pendaftaran, tbl_pengumuman.

3.2.4.1 Kamus Data

 Kamus data merupakan suatu penjelasan tertulis mengenai data yang

mencerminkan keterangan yang jelas dari struktur data yang berbeda dalam

database. Berikut ini kampus data dari elemen pada data entitas-entitas yang

digunakan dalam website pendaftaran calon anggota Laskar Anti Korupsi

Indonesia Kabupaten Kubu Raya :

a. Tbl_user = @id_user + nama_user + username + password

b. Tbl_pengguna = @id_pengguna + nama_pengguna + no_hp +

username + password

c. Tbl_pendaftaran = @id_pendaftaran + @@id_pengguna +

nama_calon + nik_calon + tempat_lahir + tanggal_lahir +

tgl_pendaftaran + gender + agama + hp_calon + email_calon +

alasan_bergabung + pas_photo + ktp_calon + status_calon

d. Tbl_pengumuman = @id_pengumuman + nama_pengumuman +

tgl_pengumuman + status_pengumuman

Diatas merupakan tabel-tabel yang digunakan dalam perancangan

website kamus data dari tabel diatas adalah sebagai berikut :

Karakter_valid = (A-Z| a-z |-|,| 0-9)

Id_user = 1 {karakter_valid} 9

Nama_user = {karakter_valid}

Username = {karakter_valid}

Password = {karakter_valid}

Id_pengguna = 1 {karakter_valid} 9

Nama_pengguna = {karakter_valid}
 No_hp = {karakter_valid}

Username_pengguna = {karakter_valid}

Password_pengguna = {karakter_valid}

Id_pendaftaran = 1 {karakter_valid} 9

Nama_calon = {karakter_valid}

Nik_calon = {karakter_valid}

Tempat_lahir = {karakter_valid}

Tanggal_lahir = Tahun + Bulan + Tanggal

Tgl_pendaftaran = Tahun + Bulan + Tanggal

Gender = {karakter_valid}

Agama = {karakter_valid}

Hp_calon = {karakter_valid}

Email_calon = {karakter_valid}

Alasan_bergabung = {karakter_valid}

Pas_photo = {karakter_valid}

Ktp_calon = {karakter_valid}

Status_calon = {karakter_valid}

Id_pengumuman = 1 {karakter_valid} 9

Nama_pengumuman = {karakter_valid}

Tgl_pengumuman = Tahun + Bulan + Tanggal

Status_pengumuman = {karakter_valid}

3.2.4.2 Spesifikasi Struktur Tabel Database

 Spesifikasi struktur tabel database yang digunakan dalam website

penerimaan anggota baru Laskar Anti Korupsi Indonesia Kabupaten Kubu Raya

sebagai berikut:

a. Tabel Admin

Tabel admin memiliki 4 (empat) field yaitu id_user, nama_user,

username dan password. Pada field id_user mempunyai type data

integer dengan panjang default yaitu 11 (sebelas) dan merupakan

primary key. Pada field nama_user mempunyai type data varchar

dengan panjang data 50 (lima puluh). Pada field username mempunyai

type data varchar dengan panjang data 50 (lima puluh). ). Pada field

password mempunyai type data varchar dengan panjang data 50 (lima

puluh). Berikut adalah bentuk tabel admin

Tabel 3.1 Tabel Admin

Nama Tabel Nama Field Tipe Data Length Key

tb_user id_user integer 11 Primary Key
nama_user varchar 50
username varchar 50
password varchar 50

b. Tabel Pengguna

Tabel Pengguna memiliki 5 (lima) field yaitu id_pengguna,

nama_pengguna, no_hp, username, dan password. Pada field

id_pengguna mempunyai type data integer dengan panjang default

yaitu 11 (sebelas) dan merupakan primary key. Pada field

nama_pengguna mempunyai type data varchar dengan panjang data

 100 (seratus). Pada field no_hp mempunyai type data varchar dengan

panjang data 15 (lima belas). Pada field username mempunyai type

data varchar dengan panjang data 50 (lima puluh). Pada field

password mempunyai type data varchar dengan panjang data 50 (lima

puluh). Berikut merupakan bentuk tabel pengguna.

Tabel 3.2 Tabel Pengguna

Nama Tabel Nama Field Tipe Data Length Key

tbl_pengguna id_pengguna integer 11 Primary Key
nama_pengguna varchar 100
no_hp varchar 15
username varchar 50
password varchar 50

c. Tabel Pendaftaran

Tabel Pendaftaran memiliki 15 (lima belas) field yaitu id_pendaftaran,

id_pegguna, nama_calon, nik_calon, tempat_lahir, tanggal_lahir,

tgl_pendaftaran, gender, agama, hp_calon, email_calon,

alasan_bergabung, pas_photo, ktp_calon, status_calon. Pada field

id_pendaftaran mempunyai type data integer dengan panjang default

yaitu 11 (sebelas) dan merupakan primary key. Pada field id_pengguna

mempunyai type data integer dengan panjang default yaitu 11

(sebelas) dan merupakan foreign key. Pada field nama_calon

mempunyai type data varchar dengan panjang data 100 (seratus). Pada

field nik_calon mempunyai type data varchar dengan panjang data 20

(dua puluh). Pada field tempat_lahir mempunyai type data varchar

dengan panjang data 50 (lima puluh). Pada field tanggal_lahir

 mempunyai type data date. Pada field tgl_pendaftaran mempunyai type

data date. Pada field gender mempunyai type data enum dengan

panjang datanya yaitu (‘L’,’P’). Pada field agama mempunyai type

data varchar dengan panjang data 50 (limapuluh). Pada field hp_calon

mempunyai type data varchar dengan panjang data 15 (limabelas).

Pada field email_calon mempunyai type data varchar dengan panjang

data 50 (lima puluh). Pada field alasan_bergabung mempunyai type

data text. Pada field pas_photo mempunyai type data varchar dengan

panjang data 100 (seratus). Pada field ktp_calon mempunyai type data

varchar dengan panjang data 100 (seratus). Pada field status_calon

mempunyai type data integer dengan panjang data 1 (satu).

Tabel 3.3 Tabel Pendaftaran

Nama Tabel Nama Field Tipe Data Length Key

tbl_pendaftara
id_pendaftaran integer 11 Primary Key
n
id_pengguna integer 11 Foreign Key
nama_calon varchar 100
nik_calon varchar 20
tempat_lahir varchar 50
tanggal_lahir date
tgl_pendaftaran date
gender enum ('L','P')
agama varchar 50
hp_calon varchar 15
email_calon varchar 50
alasan_bergabung text
pas_photo varchar 100
ktp_calon varchar 100
status_calon integer 1
 d. Tabel Pengumuman

Tabel Pengumuman memiliki 4 (empat) field yaitu id_pengumuman,

nama_pengumuman, tgl_pengumuman, dan status_pengumuman. Pada

field id_pengumuman mempunyai type data integer dengan panjang

default yaitu 11 (sebelas) dan merupakan primary key. Pada field

nama_pengumuman mempunyai type data varchar dengan panjang

data 100 (seratus). Pada field tgl_pengumuman mempunyai type data

date. Pada field status_pengumuman mempunyai type data integer

dengan panjang data 1 (satu).

Tabel 3.4 Tabel Pengumuman

Nama Tabel Nama Field Tipe Data Length Key

tbl_pengumuma
id_pengumuman integer 11 Primary Key
n
nama_pengumuma
varchar 100
n
tgl_pengumuman date
status_pengumuma
integer 1
n

3.2.4.3 Diagram Hubungan Entitas

Diagram hubungan entitas merupakan gambar hbuungan antar

komponen-komponen himpunan entitas dan himpunan relasi. Entitas pada website

penerimaan calon anggota baru Laskar Anti Korupsi Indonesia Kabupaten Kubu

Raya dapat dilihat dari diagram hubungan entitas di bawah ini :

 Gambar 3.13 Diagram Hubungan Entitas

Pada gambar diatas dapat dilihat bahwa entitas pada tbl_pendaftaran

memiliki hubungan dengan pada tbl_pengguna. Pada tbl_pengguna terdapat field

id_pengguna sebagai primary key, memiliki hubungan one to many dengan

id_pengguna sebagai foreign key pada tbl_pendaftaran.

3.2.5 Pemilihan Framework

Dalam pembuatan website ini, penulis menggunakan framework

Codeigniter. Alasan penggunaan adalah framework Codeigniter mendukung

penggunaan pola atau konsep MVC (Model View Controller), tujuan utamanya

adalah memungkinkan untuk mengembangkan proyek – proyek jauh lebih cepat

daripada menulis kode dari awal. Sedangkan MVC (Model View Controller), yang

mana model ini mempresentasikan struktur data. View digunakan untuk

menampilkan bagian user interface dan controller bekerja sebagai otak yang

menangani request dan mengikat semuanya dengan satu lainnya.

Selanjutnya Framework Codeigniter punya beberapa kelebihan dibandingkan

tanpa menggunakan framework, yaitu :

1. Performa Sangat Cepat

Aspek utama dan paling krusial yang membuat Framework Codeigniter

menjadi salah satu PHP framework terbaik adalah karena waktu eksekusi

yang sangat cepat. Pada framework ini, PHP akan merespon lebih cepat

dari sebelumnya. Belum ada PHP framework lainnya yang bisa

menandingi waktu eksekusi dari CodeIgniter. Hal ini yang menjadikan

alasan utama pengembang web dan programmer memilih framework ini.

2. Konfigurasi Sangat Minim

untuk menggunakan CodeIgniter dengan setting standard, hanya perlu

merubah sedikit saja file pada folder config, kemudian load database,

library, semua array akan tersimpan. Tidak perlu lagi menulis nama

database setiap waktu, cukup tulis sekali dan gunakan dimana saja.

3. Dokumentasi yang Lengkap

Setiap paket instalasi CodeIgniter sudah disertai user guide yang sangat

bagus dan lengkap untuk dijadikan permulaan, bahasanya pun mudah

dipahami.

4. Penanganan Error yang Lebih Mudah

Penanganan error pada pengembangan web selalu menjadi kekhawatiran

yang besar untuk programmer, karena akan menghabiskan banyak waktu.

Tetapi, CodeIgniter menjadikan penanganan error menjadi pekerjaan yang

mudah. Ketika ada error pada saat mengetik baris code, semua error akan

ditampilkan dilayar. Dengan hal ini, dapat dengan mudah mengetahui

error dengan sangat cepat dan bisa segera memperbaikinya.

Selanjutnya dengan mengunduh framework Codeigniter melalui browser pada

link: https://codeigniter.com/ seperti gambar dibawah ini :

Pada gambar 3.14 merupakan halaman utama website codeigniter , untuk

mengunduh framework tersebut dengan mengklik tombol download pada bagian

navbar website tersebut selanjutnya menampilkan halaman download seperti

gambar dibawah ini.

 Gambar 3.15 Halaman Download Website Codeigniter

Setelah mengunduh framework, selanjutnya dapat mengekstrak file tersebut akan

terlihat struktur dari kode framework codeigniter seperti gambar dibawah ini :

Gambar 3.16 File Ekstract Framework Codeigniter

3.2.6 MVC
 Mvc (Model View Controller) merupakan suatu konsep yang cukup

popular dalam pembangunan aplikasi web, berawal pada bahasa pemrograman

SmallTalk, yang memisahkan bisnis logic (alur piker), data logic (penyimpanan

data) dan presentation logic (antarmuka aplikasi) atau secara sederhana adalah

memisahkan antara desain, data dan proses. Ada 3 komponen yang membangun

suatu MVC yaitu :

1. Model, biasanya berhubungan dengan data dan interaksi ke database

atau webservice. Model juga merepresentasikan struktur data dari

aplikasi yang bisa berupa basis data maupun data lain, misalnya dalam

bentuk file teks, file XML maupun webservice. Biasanya di dalam

model akan berisi class dan fungsi untuk mengambil, melakukan update

dan menghapus data website. Sebuah aplikasi web biasanya

menggunakan basis data dalam menyimpan data, maka pada bagian

Model biasanya akan berhubugan dengan perintah-perintah query SQL.

2. View, merupakan bagian yang menangani presentation logic. Pada

suatu aplikasi web bagian ini biasanya berupa file template HTML,

yang diatur oleh controller. View berfungsi untuk menerima dan

mempresentasikan data hasil dari model dan controller kepada user.

View tidak memiliki akses langsung terhadap bagian model.

3. Controller, merupakan bagian yang mengatur hubungan antara bagian

model dan bagian view. Pada controller terdapat class-class dan fungsi-

fungsi yang memproses permintaan dari view ke dalam struktur data di

dalam model. Controller juga tidak boleh berisi kode untuk mengakses
 basis data karena tugas mengakses data telah diserahkan kepada model.

Tugas controller adalah menyediakan berbagai variable yang akan

ditampilkan di view, memanggil model untuk melakukan akses ke basis

data, menyediakan penanganan kesalahan atau error, mengerjakan

proses logika dari aplikasi serta melakukan validasi atau cek terhadap

input.

3.2.7 Perancangan Input

Dalam perancangan website penerimaan anggota baru Laskar Anti Korupsi

Indonesia Kabupaten Kubu Raya, terdapat beberapa halaman yang dirancang

untuk website, yaitu beranda, halaman langkah pendaftaran, halaman kotak,

halaman pendaftaran, halaman pengumuman, halaman login dan halaman register

calon anggota.

a. Hasil rancangan beranda

 Halaman beranda merupakan halaman yang pertama kali saat pengguna

mengakses website pertama kali.

Pada gambar 3.17 merupakan halaman beranda, terdapat sebuah banner

yang menginformasikan laskar anti korupsi.

b. Hasil rancangan langkah pendaftaran

Menu langkah pendaftaran merupakan prosedur atau panduan tata cara

penggunaan website serta tata cara mendaftar sebagai anggota Laskar

Anti Korupsi Indonesia.

c. Hasil rancangan kontak

Menu kontak merupakan menu yang menginformasikan alamat kantor

Laskar Anti Korupsi Indonesia Kabupaten Kubu Raya, no telpon, dan

gmap dari kantor tersebut.

 Gambar 3.19 Halaman Kontak

d. Hasil rancangan pengumuman

Pada menu ini berfungsi untuk memberitahukan pada semua calon

anggota yang telah mendaftar apakah lulus atau tidak lulus dalam tahap

seleksi anggota Laskar Anti Korupsi Indonesia.

e. Hasil rancangan register akun

Pada menu ini berfungsi untuk melakukan pembuatan akun calon anggota

sebelum mereka mendaftar serta melengkapi berkas calon anggota Laskar

Anti Korupsi, terdapat beberapa inputan yang wajib diisi, seperti nama

pengguna, no hp, username dan password.

f. Hasil rancangan login

Pada menu ini merupakan menu login untuk calon anggota yang sudah

melakukan pendaftaran akun, pada halaman login terdapat dua buah

inputan yaitu username dan password yang wajib diisi.

Berikutnya, ketika pengguna atau calon anggota memasukkan

username atau password tidak sesuai dengan data di dalam database

maka akan menampilkan notifikasi kesalahan seperti gambar 3.23

dibawah ini.
g. Hasil rancangan pendaftaran anggota

Setelah berhasil login, langkah berikutnya adalah calon anggota

melakukan pendaftaran menjadi anggota Laskar Anti Korupsi

Indonesia dengan mengisikan form pendaftaran yang tersedia seperti

gambar dibawah ini

Gambar 3.24 Halaman Pendaftaran Calon Anggota
 Kemudian setelah mengisikan form pendaftaran, maka akan diarahkan

ke halaman notifikasi pendaftaran berhasil seperti gambar dibawah ini

Gambar 3.25 Halaman Notifikasi Pendaftaran

h. Hasil rancangan seleksi anggota

Berikutnya merupakan menu yang berada pada panel admin, menu

seleksi anggota berfungsi untuk memverifikasi calon anggota dengan

melihat data pendaftaran yang telah dikirim calon anggota sebelumnya,

apakah calon anggota tersebut lulus atau dinyatakan tidak lulus. Seperti

gambar 3.26 dibawah ini.

Gambar 3.26 Halaman Verifikasi Calon Anggota

i. Hasil rancangan pengumuman

Pada menu panel admin terdapat menu pengumuman, yang berfungsi

untuk menginformasikan kepada calon anggota di website pengunjung

apakah diterima menjadi anggota atau tidak lulus. Calon anggota dapat

melihat hasil pengumuman pada akun mereka masing-masing.

Gambar 3.27 Halaman Pengumuman Panel Admin

Selanjutnya pada menu pengumuman yang terdapat pada panel admin,

admin dapat melakukan aksi untuk menampilkan hasil pengumuman

ataupun tidak, seperti gambar di bawah ini.

j. Hasil rancangan pengumuman kelulusan anggota

Gambar 3.28 Halaman Edit Pengumuman

 Pada akun calon anggota mereka dapat melihat hasil pengumuman pada

menu pengumuman anggota yang tertera pada menu navigasi seperti

gambar di bawah ini.

Gambar 3.29 Halaman Pengumuman Kelulusan

3.2.8 Penggunaan Prototype

3.2.8.1 Perangkat Keras

Spesifikasi perangkat keras yang digunakan sebagai berikut :

a. Procesor AMD Ryzen 3 3200U

b. RAM 8 GB DDR4

c. AMD Radeon Vega Graphic

d. SSD 512 GB

3.2.8.2 Perangkat Lunak

Perangkat lunak yang digunakan untuk mendukung jalannya website

yang dirancang adalah sebagai berikut :

a. Windows 11 Home Single Language 64-Bit Version 21H2

 b. Visual Studio Code sebagai Text Editor untuk mengembangkan

website

c. XAMPP sebagai paket perangkat lunak untuk konfigurasi ke

database

d. Clickchart sebagai aplikasi merancang database, dan flowchart

3.2.8.3 Pengoperasian Website

Berikut ini adalah penjelasan penggunaan website pada masing-masing

halaman. Langkah-langkah pengoperasian halaman login admin untuk masuk ke

halaman admin adalah sebagai berikut :

a. Isi username = “admin”

b. Isi password = “admin123”

c. Klik tombol login.

d. Untuk keluar dari halaman admin, klik “keluar”.

Langkah-langkah pengoperasian halaman admin adalah sebagai berikut:

a. Untuk menampilkan halaman data admin, pilih menu data admin.

b. Untuk menampilkan data seleksi dan pendaftaran, pilih menu data

pendaftaran.

c. Untuk menampilkan data pengumuman, pilih menu data

pengumuman.

Langkah-langkah pengoperasian halaman pendaftaran akun pengguna

ntuk login adalah sebagai berikut :

a. Pada halaman beranda, pilih menu login selanjutnya pilih link

“Belum punya akun? Klik disini” -> tampil halaman pendaftaran

akun pengguna -> isi semua textbox -> klik buat akun.

Langkah-langkah pengoperasian halaman login pengguna untuk masuk

ke halaman pengguna adalah sebagai berikut:

a. Isi username = “tes”

b. Isi password = “tes123”

c. Klik tombol masuk akun.

d. Untuk keluar dari halaman pengguna, klik “Logout”.

Langkah-langkah pengoperasian halaman pengguna adalah sebagai

berikut:

a. Untuk menampilkan halaman langkah pendaftaran, pilih menu

langkah pendaftaran

b. Untuk menampilkan halaman kontak, pilih menu kontak

c. Untuk menampilkan halaman pengumuman anggota, pilih menu

pengumuman anggota

d. Untuk menampilkan halaman pendaftaran anggota, pilih menu

pendaftaran anggota.

Langkah-langkah pengoperasian halaman pendaftaran anggota adalah

sebagai berikut:

a. Pada halaman pendaftaran anggota isi semua textbox dan radiobutton

kemudian klik daftar.

Langkah-langkah pengoperasian halaman pengumuman anggota adalah

sebagai berikut:

a. Pada halaman pengguna, pilih menu pengumuman anggota

selanjutnya akan menampilkan halaman pengumuman kelulusan

anggota.

Langkah-langkah pengoperasian halaman data pengguna atau admin

adalah sebagai berikut:

a. Klik menu data admin

b. Untuk melakukan pencarian data pengguna, isi textbox -> klik

tombol cari.

c. Untuk menghapus data pengguna, klik hapus pada baris tabel

pengguna.

Langkah-langkah pengoperasian halaman data seleksi adalah sebagai

berikut:

a. Klik menu data seleksi

b. Untuk melakukan pencarian data seleksi, isi textbox pencarian -> klik

tombol cari.

c. Untuk mengunduh data seleksi, klik download.

d. Untuk melakukan verifikasi calon anggota, klik tombol verifikasi.

Langkah-langkah pengoperasian halaman pengumuman adalah sebagai

berikut:

a. Klik menu pengumuman

 b. Untuk menampilkan pengumuman, klik tombol edit kemudian pilih

tanggal dan status pengumuman menjadi tampil.

3.3 Uji Coba

Tahap pengujian dilakukan untuk memastikan semua fungsi pada website

dapat berjalan sesuai dengan kebutuhan. Metode pengujian yang digunakan

adalah metode pengujian black-box. Hasil pengujian black-box pada masing-

masing halaman dapat dilihat pada tabel dibawah ini.

Skenario Kasus Hasil yang Hasil

Kesimpulan
Pengujian Pengujian diharapkan pengujian
Masuk ke Memasukkan
Menu admin Sesuai
dalam menu username dan valid
tampil harapan
admin passwordadmin
Tabel 3.5 Pengujian black-box pada halaman login admin

Tabel 3.6 Pengujian black-box pada halaman pendaftaran akun pengguna

Skenario Kasus Hasil yang Hasil

Kesimpulan
Pengujian Pengujian diharapkan pengujian
Masuk ke
dalam menu Mengisi data Berhasil Sesuai
valid
pendaftaran secara lengkap mendaftar harapan
anggota

Tabel 3.7 Pengujian black-box pada halaman login pengguna

Skenario Hasil yang Hasil

Kasus Pengujian Kesimpulan
Pengujian diharapkan pengujian
Memasukkan
Masuk ke Menu
usernamedan Sesuai
dalam menu pengguna valid
password harapan
pengguna tampil
pengguna
 Tabel 3.8 Pengujian black-box pada halaman pendaftaran anggota

Skenario Hasil yang Hasil

Kasus Pengujian Kesimpulan
Pengujian diharapkan pengujian
Masuk ke Berhasil
halaman Mengisikan form menambahkan Sesuai
valid
pendaftaran daftar anggota data harapan
anggota pendaftaran
Menambahkan Mengisikan form Gagal
menambahkan Sesuai
data daftar anggota valid
data harapan
pendaftaran tidak lengkap
pendaftaran

Tabel 3.9 Pengujian black-box pada halaman pengumuman anggota

Skenario Hasil yang Hasil

Kasus Pengujian Kesimpulan
Pengujian diharapkan pengujian
Menampilkan
Melihat Mengklik menu Sesuai
halaman valid
pengumuman pengumuman harapan
pengumuman

Tabel 3.10 Pengujian black-box pada halaman menu admin

Skenario Hasil yang Hasil

Kasus Pengujian Kesimpulan
Pengujian diharapkan pengujian
Menampilkan
Melihat data Mengklik menu Sesuai
halaman data valid
admin data admin harapan
admin

melihat data menampilkan

Mengklik menu Sesuai
seleksi data seleksi valid
data admin harapan
anggota (tabel seleksi)
Menampilkan
data
Melihat data Mengklik menu Sesuai
pengumuman valid
pengumuman pengumuman harapan
(tabel
pengumuman)
 Tabel 3.11 Pengujian black-box pada halaman seleksi anggota

Skenario Hasil yang Hasil

Kasus Pengujian Kesimpulan
Pengujian diharapkan pengujian
Mengisi data Berhasil
Mencari data yang ingin menampilkan Sesuai
valid
seleksi anggota dicari, lalu klik data yang harapan
cari dicari
Mengklik Berhasil
Memverifikasi
verifikasi pada melakukan Sesuai
data seleksi valid
baris tabel seleksi harapan
anggota
seleksi anggota
Berhasil
Menghapus Mengklik hapus
menghapus Sesuai
data seleksi pada baris tabel valid
data calon harapan
anggota seleksi
anggota

Tabel 3.12 Pengujian black-box pada pengumuman

Skenario Hasil yang Hasil

Kasus Pengujian Kesimpulan
Pengujian diharapkan pengujian
Mengubah Mengklik tombol Berhasil
data edit pada baris melakukan Sesuai
valid
pengumuman tabel edit harapan
anggota pengumuman pengumuman