![Page 1: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/1.jpg)
BAB III
METODE PENELITIAN
3.1. Tempat dan Waktu Penelitian
Penelitian ini dilakukan di Laboratorium Skripsi dan Tugas Akhir Jurusan Ilmu
Komputer Fakultas Matematika dan Ilmu Pengetahuan Alam (FMIPA) dan
Sekretariat Badan Pelaksana Kuliah Kerja Nyata (BP-KKN). Waktu penelitian
dilaksanakan pada bulan April – September 2015.
3.2. Alat Pendukung Penelitian
Penelitian ini dilakukan dengan menggunakan alat untuk mendukung dan
menunjang pelaksanaan penelitian.
1. Perangkat Keras (Hardware)
Perangkat keras yang digunakan dalam pengembangan sistem informasi ini
adalah 1 unit Netbook dengan spesifikasi:
Processor : Intel (R) Core (TM) i7 3537U CPU
@2.00 GHz 2.50 GHz
Installed memory (RAM) : 4,00 GB
System type : 64 bit Operating System
2. Perangkat Lunak (Software)
Perangkat lunak yang digunakan dalam pengembangan sistem ini adalah:
![Page 2: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/2.jpg)
16
a. Sistem Operasi Windows 7 Ultimate
b. Adobe Dreamweaver
c. MySQL
d. PHP
e. XAMPP
f. Web Browser (Mozilla Firefox dan Google Chrome)
3.3. Tahapan Penelitian
Tahapan penelitian ini dilakukan dengan beberapa langkah yaitu studi literatur,
perancangan sistem, pengembangan sistem, pengujian sistem, dan penulisan
laporan. Adapun alur langkah tersebut dapat dilihat pada diagram di bawah ini:
MulaiMulai
Studi LiteraturStudi Literatur
Pengumpulan dataPengumpulan data
Perancangan Sistem
Perancangan Sistem
Kebutuhan Tersedia
Kebutuhan Tersedia
Pengembangan Sistem
Pengembangan Sistem
Pengujian SistemPengujian Sistem
Fungsi Sistem bekerja
Fungsi Sistem bekerja
Penulisan Laporan
Penulisan Laporan
SelesaiSelesai
Ya
Tidak
Tidak
Ya
Gambar 3. Diagram alur penelitian
![Page 3: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/3.jpg)
17
3.3.1. Studi Literatur
Studi literatur yang dilakukan pada penelitian ini berupa pengumpulan data yang
dibutuhkan oleh sistem. Data-data yang dibutuhkan tersebut diperoleh dari hasil
wawancara dengan Badan Pelaksana Kuliah Kerja Nyata (BP-KKN) Universitas
Lampung.
Melalui wawancara dengan BP-KKN Universitas Lampung, data-data yang
diperoleh digunakan untuk menganalisis alur pelaksanaan kegiatan KKN mulai
dari proses pendaftaran sampai pengelompokan, mengetahui kinerja sistem yang
sudah ada, mengetahui kelemahan sistem yang masih belum bisa ditangani, dan
menemukan solusi dalam menangani kelemahan itu.
3.3.2. Perancangan Sistem
Perancangan sistem merupakan tahapan rencana pengembangan sistem ke dalam
bentuk desain yang digunakan untuk memudahkan pengguna melihat rancangan
sistem yang dibuat. Langkah-langkah yang digunakan untuk merancang sistem
yaitu merancang desain context diagram, Data Flow Diagram (DFD) level 1 dan
2, Entity Relationship Diagram (ERD), dan antar muka (interface) sistem.
3.3.2.1. Context Diagram
Context diagram merupakan bentuk dari Data Flow Diagram (DFD) level 0 yang
menggambarkan ruang lingkup sistem secara keseluruhan. Context diagram
digunakan hanya untuk menampilkan pengguna utama dalam sistem dan
informasi yang dipakai antara sistem dan pengguna tersebut.
![Page 4: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/4.jpg)
18
Dari hasil analisis sistem, context diagram yang dirancang seperti gambar di
bawah ini:
MahasiswaMahasiswaAdminAdmin
PeriodeKKN
Lokasi KKN
Verifikasi NPMPeserta Informasi
Peserta
InformasiKelompok
Tgl Pembukaan/Penutupan
Token, identitasmahasiswa
Infopembukaan
PengumumanKKN
Dosen Pembimbing
Lapangan (DPL)
Dosen Pembimbing
Lapangan (DPL)
SISTEM INFORMASI KULIAH KERJA NYATA
(KKN) TEMATIK UNIVERSITAS LAMPUNG
SISTEM INFORMASI KULIAH KERJA NYATA
(KKN) TEMATIK UNIVERSITAS LAMPUNG
Pengumuman
Informasi Kelompok
Informasi DPL
Info kelompok,Identitas peserta
Nilai KKN
Acak kelompok
Gambar 4. Rancangan context diagram sistem
Pada context diagram di atas, terdapat tiga eksternal entitas yaitu mahasiswa,
Dosen Pembimbing Lapangan (DPL), dan admin. Dari sistem informasi tersebut
dapat dilihat bahwa mahasiswa menerima informasi berupa informasi pembukaan
pendaftaran KKN, pengumuman seputar KKN, dan informasi kelompok KKN
dari sistem informasi. Informasi-informasi tersebut merupakan output dari sistem
yang diberikan kepada mahasiswa. Sedangkan token dan identitas mahasiswa
merupakan informasi yang diberikan mahasiswa kepada sistem yang digunakan
sebagai input bagi sistem.
Sedangkan DPL merupakan eksternal entitas yang diberikan akses untuk
mendapatkan informasi lengkap mengenai biodata mahasiswa yang menjadi
tanggungjawabnya. Selain itu, DPL juga memperoleh akses untuk memberikan
hasil penilaiannya mengenai kinerja mahasiswa selama KKN.
![Page 5: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/5.jpg)
19
Di sisi lain, pengguna admin juga memiliki peran untuk memberikan informasi
sebagai input sistem. Informasi yang diberikan oleh admin antara lain periode
KKN, lokasi KKN, pengumuman seputar pelaksanaan KKN, tanggal pembukaan
dan penutupan pendaftaran, serta informasi DPL (Dosen Pembimbing Lapangan)
yang bertugas. Hasil (output) yang diberikan sistem kepada admin yaitu berupa
informasi mahasiswa yang mengikuti KKN dan hasil pengelompokan mahasiswa
KKN yang telah diproses oleh sistem informasi KKN.
3.3.2.2. Data Flow Diagram (DFD) Level 1 dan 2
Data Flow Diagram (DFD) level 1 merupakan pengembangan lanjutan dari
context diagram yang lebih terperinci. Pada DFD level 1 yang direpresentasikan
tidak hanya pengguna dan informasi yang dibutuhkan, namun juga proses dan
data strore dari sistem secara keseluruhan.
Hasil perancangan DFD level 1 dapat dilihat pada gambar berikut:
![Page 6: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/6.jpg)
20
MahasiswaMahasiswa AdminAdminPeriode
KKN
Lokasi KKN
Pengumuman
Verifikasi NPM
Peserta
Informasi
Peserta
Informasi
DPL
Informasi
Kelompok
Informasi
Kelompok
Periode
KKN
Lokasi
KKN
Pengumuman
Kode
Token
Peserta
Informasi
Peserta
Info
DPL
Info Peserta
Info DPL
Informasi
Kelompok
Info Kelompok
12.12.
Menerima informasi
kelompok, lokasi, dan
DPL
Menerima informasi
kelompok, lokasi, dan
DPL
1.1.
Memasukkan
informasi lokasi
KKN
Memasukkan
informasi lokasi
KKN
2.2.
Memasukkan
informasi lokasi KKN
Memasukkan
informasi lokasi KKN
3.3.
Memasukkan informasi
pengumuman KKN
Memasukkan informasi
pengumuman KKN
5.5.
Melakukan verifikasi
login mahasiswa
Melakukan verifikasi
login mahasiswa
6.6.
Menerima informasi
peserta
Menerima informasi
peserta
7.7.
Memasukkan
informasi DPL
Memasukkan
informasi DPL
8.8.
Membagi kelompok,
lokasi, dan DPL
Membagi kelompok,
lokasi, dan DPLData
Kelompok
Data
DPL
Data
Peserta
Data
Token
Data
Pengumuman
Data
Lokasi
Data
Lokasi
Data
Periode
Data
Pembukaan
4.4.
Memasukkan
Pembukaan/Penutupan
Pendaftaran KKN
Memasukkan
Pembukaan/Penutupan
Pendaftaran KKN
Tgl Pembukaan/
Penutupan
Tgl buka/
tutup
Info Lokasi
10.10.
Melakukan
Pendaftaran
Melakukan
Pendaftaran
Token, identitas
mahasiswa
Token
Identitas
mahasiswa
9.9.
Menerima info
pembukaan
pendaftaran KKN
Menerima info
pembukaan
pendaftaran KKN
Info
pembukaan
11.11.
Menerima
pengumuman
seputar KKN
Menerima
pengumuman
seputar KKN
Pengumuman
KKN
Pengumuman
KKN
Dosen
Pembimbing
Lapangan
(DPL)
Dosen
Pembimbing
Lapangan
(DPL)
13.13.
Melihat informasi
kelompok dan
identitas
mahasiswa
Melihat informasi
kelompok dan
identitas
mahasiswa
Info
kelompok
Identitas
mahasiswaIdentitas mahasiwa
Info kelompok
14.14.
Melakukan
pengisian nilai
Melakukan
pengisian nilai
Data nilai
Info kelompokNilai KKN
Nilai KKNAcak
Kelompok
Gambar 5. DFD level 1 sistem informasi KKN
Pada gambar desain di atas terdapat tiga eksternal entitas, beberapa proses yang
dilakukan, data store, dan informasi yang mengalir. Eksternal entitas pertama
yaitu admin melakukan beberapa proses pada sistem seperti memasukkan periode
KKN, informasi lokasi KKN, berbagai informasi mengenai pengumuman
pelaksanaan KKN, dan seterusnya. Secara garis besar, admin terlibat sebanyak
delapan proses yaitu proses 1 sampai 8 selama menggunakan sistem.
Pada proses pengelompokan yaitu proses nomor 8, admin menekan tombol untuk
memulai proses acak kelompok. Proses ini melibatkan beberapa komponen, antara
![Page 7: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/7.jpg)
21
lain peserta, lokasi, dan DPL. Berikut adalah flowchart dari kerangka pikir
pembagian kelompok peserta KKN:
AcakKelompok
AcakKelompok
AlgoritmaGreedy
AlgoritmaGreedy
Input PesertaInput Desa
Input KecamatanInput Kabupaten
Input DPL
Input PesertaInput Desa
Input KecamatanInput Kabupaten
Input DPL
MulaiMulai
AcakUlang
AcakUlang
Cetak hasil pengelompokkan
Cetak hasil pengelompokkan
SelesaiSelesai
Ya
Tidak
Tidak
Ya
Gambar 6. Kerangka pikir pengelompokan peserta KKN
Proses pengelompokan dilakukan menggunakan algoritma greedy. Algoritma ini
bekerja apabila perintah acak kelompok dilakukan dan kemudian menghasilkan
cetakan hasil pengelompokan yang diinginkan.
Pada proses 5 yaitu verifikasi login mahasiswa, terdapat beberapa rincian proses
yang lebih jelas. Sebelum melakukan verifikasi login mahasiswa, terlebih dahulu
admin melakukan login kembali kedalam sistem. Hal ini dilakukan untuk
meningkatkan keamanan akses sistem. Apabila sudah masuk ke halaman
verifikasi, admin memasukkan NPM mahasiswa kemudian sistem memberikan
keluaran berupa kode token. Kode token ini nantinya digunakan peserta untuk
![Page 8: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/8.jpg)
22
melakukan pendaftaran ke sistem informasi KKN. Gambar 7 adalah DFD level 2
dari proses nomor 5.
MahasiswaMahasiswa
5.35.3
Menerima tokenMenerima token
Data token
5.1.5.1.
Login untuk mengisi token
Login untuk mengisi token
AdminAdmin
5.25.2
Melakukan pembangkitan (generate) token
Melakukan pembangkitan (generate) token
Data Admin
Username+passwordUsername+
password
npmnpm
Npm+token
NPM +token
token
Gambar 7. DFD level 2 sistem informasi KKN
Pada ekternal entitas kedua yaitu mahasiswa terlibat pada empat proses yakni
proses 9 sampai 12 selama menggunakan sistem. Proses-proses tersebut secara
garis besar terbagi menjadi dua yaitu proses pendaftaran dan proses menerima
informasi. Pada sistem, mahasiswa akan yang mengikuti KKN harus melakukan
pendaftaran dengan mengisi identitas pribadinya. Apabila sudah melakukan
pendaftaran, mahasiswa akan menerima beberapa informasi yang berkaitan
dengan pelaksanaan KKN melalui sistem informasi tersebut seperti pengumuman
dan informasi hasil pengelompokan kelompok, lokasi, dan DPL.
Selain kedua ekternal entitas di atas, terdapat pula eksternal entitas ketiga yaitu
Dosen Pembimbing Lapangan (DPL). DPL memiliki hak mengakses sistem
informasi KKN untuk mengetahui identitas mahasiswa yang menjadi
tanggungjawabnya dan mengisi nilai hasil kinerja mahasiswa.
Selama proses berlangsung, informasi yang telah diinputkan dan diproses akan
masuk ke beberapa data store yang tersedia. Sebagai contoh, admin memiliki
kewenangan memasukkan informasi lokasi KKN, data tersebut akan menjadi
input (masukan) pada data store yang bernama data lokasi dan seterusnya.
![Page 9: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/9.jpg)
23
3.3.2.3. Entity Relationship Diagram (ERD)
Entity Relationship Diagram (ERD) merupakan tahap mendesain rancangan basis
data yang digunakan pada pengembangan sistem informasi KKN. Beberapa tabel
yang didesain merupakan hasil pengembangan tabel-tabel sistem informasi KKN
sebelumnya yang telah dimodifikasi dan dinormalisasikan. Berikut adalah
rancangan ERD untuk pengembangan sistem informasi KKN:
mahasiswa
NpmNama_mhs
Jenis_kelaminId_jurusanTotal_sks
IpkTempat_lahir
Tgl_lahirAlamat
HobiKk
Telpon/HpFoto
Nama_ayahId_pk_ayahNama_ibuId_pk_ibu
Alamat_ortuNama_hb
Alamat_hbTelp_hp
Hubung_mhsUkuran_kaos
mahasiswa
NpmNama_mhs
Jenis_kelaminId_jurusanTotal_sks
IpkTempat_lahir
Tgl_lahirAlamat
HobiKk
Telpon/HpFoto
Nama_ayahId_pk_ayahNama_ibuId_pk_ibu
Alamat_ortuNama_hb
Alamat_hbTelp_hp
Hubung_mhsUkuran_kaos
pendaftaran
npmId_periode
Id_kab
pendaftaran
npmId_periode
Id_kab
Desa
Id_desaId_kecamatan
Nama_desa
Desa
Id_desaId_kecamatan
Nama_desa
Kecamatan
Id_kecamatanId_kabupaten
Nama_kecamatan
Kecamatan
Id_kecamatanId_kabupaten
Nama_kecamatan
Kabupaten
Id_kabupatenNama_kabupaten
tema
Kabupaten
Id_kabupatenNama_kabupaten
tema
Jurusan
Id_jurusanId_fakultas
Nama_jurusan
Jurusan
Id_jurusanId_fakultas
Nama_jurusan
Fakultas
Id_fakultasNama_fakultasKode_fakultas
Fakultas
Id_fakultasNama_fakultasKode_fakultas
bank
Usernamepassword
bank
Usernamepassword
login
Id_loginUsernamePassword
status
login
Id_loginUsernamePassword
status
verifikasi
NpmToken
Id_periode
verifikasi
NpmToken
Id_periode
Set_dpl
Id_set_dplNip
Id_kecamatanId_periode
Set_dpl
Id_set_dplNip
Id_kecamatanId_periode
dpl
NipNama_dplId_jurusan
Id_golonganhp
dpl
NipNama_dplId_jurusan
Id_golonganhp
Golongan_dpl
Id_golonganNama_golongan
Golongan_dpl
Id_golonganNama_golongan
1 1m 1 m 1
1 m m
1
1
1
Desa_terdaftar
Id_desa_terdaftarId_periode
Id_desa
Desa_terdaftar
Id_desa_terdaftarId_periode
Id_desa
11Lokasi_kkn
Id_desa terdaftarNpm
Id_periode
Lokasi_kkn
Id_desa terdaftarNpm
Id_periodeperiode
Id_periodePeriodetahun
periode
Id_periodePeriodetahun
Berita
Id_periodeBerita
GambarLink
Berita
Id_periodeBerita
GambarLink
Gambar
Id_periodeGambar
Link
Gambar
Id_periodeGambar
Link
Pekerjaan_ortu
Id_pekerjaanPekerjaan
Pekerjaan_ortu
Id_pekerjaanPekerjaan
Jadwal KKN
Id_periodeTgl_bukaTgl_tutup
Jadwal KKN
Id_periodeTgl_bukaTgl_tutup
m
1
m 1
m
1
m 11 m
1
m
1
m
1 m
1
1
1
m
1
m
1 1
1
m
1
nilai
NpmNilai
Nip_dplperiode
nilai
NpmNilai
Nip_dplperiode
1
1 1m
Penempatan
Id_penempatanNpm
kelompokId_desa
Id_periode
Penempatan
Id_penempatanNpm
kelompokId_desa
Id_periode
1 1 1
m
1
1
Output_image
Image_IdImage_typeImage_data
Output_image
Image_IdImage_typeImage_data
1
1
Gambar 8. ERD sistem informasi KKN
Selain perubahan tersebut, terdapat pula penambahan atribut baru di entitas
mahasiswa yaitu ukuran_kaos. Atribut ini digunakan untuk menyimpan informasi
ukuran pakaian setiap mahasiswa.
![Page 10: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/10.jpg)
24
3.3.2.4. Rancangan Antar Muka (Interface Design)
Rancangan antar muka atau interface dari pengembangan sistem informasi ini
terbagi atas tiga rancangan yaitu rancangan antar muka halaman pengguna atau
peserta, rancangan antar muka DPL, dan rancangan antar muka admin.
1. Rancangan Antar Muka Pengguna atau Peserta
Rancangan antar muka peserta atau pengguna sistem informasi ini ditunjukkan
pada gambar-gambar sebagai berikut:
a. Interface log in
Gambar 9 adalah rancangan tampilan halaman log in sistem informasi
KKN Universitas Lampung. Halaman ini digunakan oleh peserta KKN
untuk mendaftar ke dalam sistem dengan memasukan NPM dan kode
token yang diperoleh dari admin.
Gambar 9. Rancangan interface log in peserta
![Page 11: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/11.jpg)
25
b. Interface halaman pendaftaran
Gambar 10 menunjukkan rancangan tampilan halaman pendaftaran.
Setelah peserta melakukan login, maka peserta diharuskan mendaftarkan
diri dengan memasukan identitas pribadi sebagai syarat pendaftaran.
Gambar 10. Rancangan interface halaman pendaftaran
![Page 12: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/12.jpg)
26
c. Interface beranda
Gambar 11 merupakan rancangan tampilan yang muncul apabila
mahasiswa sudah melakukan proses pendaftaran dan log in ke dalam
sistem. Pada rancangan terdapat tiga menu utama yaitu beranda, info
pengelompokan, dan pengumuman. Beranda ini hanya berisi informasi
umum mengenai pelaksanaan KKN.
Gambar 11. Rancangan interface beranda peserta
d. Interface halaman info pengelompokan
Menu info pengelompokan digunakan untuk memberitahukan mahasiswa
mengenai informasi kelompok, penempatan, dan Dosen Pembimbing
Lapangan (DPL) mahasiswa selama KKN. Informasi-informasi tersebut
hanya muncul setelah masa aktif pembukaan tanggal pengumuman oleh
admin. Tampilan dari rancangan interface tersebut dapat dilihat pada
Gambar 12.
![Page 13: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/13.jpg)
27
Gambar 12. Rancangan interface info kelompok
e. Interface halaman pengumuman
Rancangan halaman pengumuman digunakan untuk menampilkan
pengumuman yang terkait dengan pelaksanaan KKN dari pihak DPL.
Gambar 13 menunjukkan rancangan halaman pengumuman tersebut.
Gambar 13. Rancangan interface pengumuman
![Page 14: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/14.jpg)
28
f. Interface halaman profil
Menu profil merupakan menu tambahan dimana peserta KKN dapat
melihat data pribadi yang telah dimasukan sebelumnya pada saat
pendaftaran. Gambar 14 menunjukkan rancangan halaman profil tersebut.
Gambar 14. Rancangan interface profil
![Page 15: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/15.jpg)
29
2. Rancangan Antar Muka Admin
Rancangan antar muka admin sistem informasi ini ditunjukkan pada gambar-
gambar sebagai berikut:
a. Interface log in
Rancangan halaman ini digunakan oleh admin untuk masuk ke dalam
sistem informasi sebelum melakukan tugasnya.
Gambar 15. Rancangan interface log in admin
b. Interface halaman utama
Halaman utama yang dirancang memuat beberapa menu yaitu beranda,
generate token, daftar peserta, set lokasi, daftar DPL, dan daftar
kelompok, pengumuman dan galeri.
Gambar 16. Rancangan interface halaman utama
![Page 16: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/16.jpg)
30
Pada Gambar 16, halaman beranda terdiri atas beberapa informasi awal
mengenai periode, tahun, tanggal pembukaan pendaftaran dan penutupan
pendaftaran KKN, tanggal pembukaan dan penutupan pengumuman saat
ini. Admin dapat mengatur ulang waktu pendaftaran yang diinginkan.
c. Interface atur tanggal pendaftaran
Gambar 17 menunjukkan tampilan admin saat mengatur tanggal
pendaftaran KKN. Terdapat pula beberapa menu seperti tahun, periode,
tanggal pembukaan, dan tanggal penutupan yang harus diisi oleh admin.
Gambar 17. Rancangan interface atur tanggal pendaftaran
d. Interface atur tanggal pengumuman
Rancangan yang ditunjukkan oleh Gambar 18 merupakan rancangan
tampilan untuk submenu atur tanggal pengumuman. Rancangan yang
dibuat mirip dengan rancangan pada submenu atur tanggal pendaftaran.
![Page 17: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/17.jpg)
31
Gambar 18. Rancangan interface atur tanggal pengumuman
e. Interface generate token mahasiswa
Pada menu selanjutnya yaitu Generate Token, admin disediakan untuk log
in terlebih dahulu. Menu generate ini digunakan untuk mendapatkan token
berupa kode-kode khusus yang digunakan mahasiswa untuk log in
sebelum mengisi identitas pribadinya. Adapun tampilan log in tersebut
seperti pada Gambar 19 di bawah ini.
Gambar 19. Rancangan interface login generate token
![Page 18: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/18.jpg)
32
Pada saat melakukan proses generate, admin harus memasukkan NPM ke
area yang telah disediakan seperti Gambar 20 di bawah ini.
Gambar 20. Rancangan input NPM mahasiswa untuk generate
Hasil dari proses generate mengeluarkan kode-kode token. Kode token ini
digunakan mahasiswa sebagai password untuk masuk ke dalam sistem.
Gambar 21. Rancangan interface hasil generate token
![Page 19: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/19.jpg)
33
f. Interface daftar peserta KKN
Gambar 22 di bawah ini menunjukkan rancangan tampilan awal menu
daftar peserta. Admin dapat melihat peserta-peserta yang telah mendaftar
KKN sesuai dengan periode, tahun, fakultas, dan jurusan yang diinginkan.
Gambar 22. Rancangan interface lihat daftar peserta
Jika sudah memilih tahun dan periode, maka tampilan daftar-daftar peserta
dapat keluar seperti rancangan Gambar 23 berikut.
Gambar 23. Rancangan interface hasil daftar peserta
![Page 20: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/20.jpg)
34
g. Interface set lokasi KKN (kabupaten, kecamatan, dan desa)
Rancangan seperti Gambar 24 merupakan rancangan dari menu daftar
lokasi. Pada gambar terdapat beberapa submenu lagi yaitu pilih lokasi,
lihat lokasi, dan tambah lokasi. Submenu pilih lokasi disediakan tahun,
periode, kabupaten, kecamatan, dan desa yang dipilih oleh admin. Berikut
adalah rancangan interface dari submenu pilih lokasi.
Gambar 24. Rancangan interface pilih lokasi
Pada submenu lihat lokasi, admin dapat memilih lokasi yang diinginkan
sesuai dengan tahun dan periodenya. Berikut adalah rancangan interface
submenu lihat lokasi KKN.
![Page 21: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/21.jpg)
35
Gambar 25. Rancangan interface lihat lokasi
Submenu selanjutnya yaitu tambah lokasi. Fasilitas ini disediakan untuk
mengatasi jika sewaktu-waktu ada penambahan lokasi KKN. Berikut
adalah rancangan dari submenu tambah lokasi. Pada submenu ini terdapat
pilihan untuk menambah lokasi berdasarkan kabupaten, kecamatan, atau
desa. Gambar 26 menunjukkan rancangan interface untuk menambahkan
kabupaten.
Gambar 26. Rancangan interface tambah kabupaten
![Page 22: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/22.jpg)
36
Gambar 27 merupakan rancangan interface untuk menambah kecamatan.
Gambar 27. Rancangan interface tambah kecamatan
Sedangkan Gambar 28 merupakan rancangan interface untuk menambah
desa.
Gambar 28. Rancangan interface tambah desa
![Page 23: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/23.jpg)
37
h. Interface daftar DPL
Rancangan menu daftar DPL menyediakan submenu lihat daftar DPL, set
DPL, lihat set DPL. Pada submenu lihat daftar DPL, admin disediakan
fasilitas untuk memilih berdasarkan fakultas dan jurusan yang diinginkan.
Rancangan submenu lihat daftar DPL ditunjukkan pada Gambar 29.
Gambar 29. Rancangan interface lihat daftar DPL
Pada Gambar 29 di atas terdapat tombol tambah DPL. Tombol tersebut
digunakan untuk masuk ke halaman tambah DPL. Fasilitias tambah DPL
digunakan jika sewaktu-waktu terjadi penambahan dosen pembimbing
lapangan. Gambar 30 menunjukkan rancangan tampilan tambah DPL
tersebut.
Gambar 30. Rancangan interface tambah DPL
![Page 24: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/24.jpg)
38
Submenu set DPL digunakan untuk mengatur penempatan DPL sesuai
dengan keinginan pada periode tertentu. Rancangan dari submenu tersebut
ditunjukkan pada Gambar 31.
Gambar 31. Rancangan interface set DPL
Submenu selanjutnya yaitu lihat set DPL. Submenu ini digunakan untuk
menampilkan daftar DPL yang telah diatur penempatannya. Rancangan
seperti Gambar 32 merupakan rancangan dari submenu tersebut.
Gambar 32. Rancangan interface lihat set DPL
Sedangkan hasil dari lihat set DPL dirancangan seperti pada Gambar 33.
![Page 25: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/25.jpg)
39
Gambar 33. Rancangan interface hasil lihat set DPL
i. Interface daftar kelompok
Pada rancangan menu daftar kelompok, terdapat beberapa submenu yaitu
acak kelompok, lihat kelompok, dan ubah kelompok. Gambar 34
merupakan rancangan tampilan awal dari menu daftar kelompok.
Gambar 34. Rancangan interface acak kelompok
Gambar di atas merupakan rancangan antar muka acak kelompok, dimana
terdapat fasilitas ikon “proses” yang dapat digunakan admin untuk
![Page 26: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/26.jpg)
40
memulai proses pengelompokan. Hasil dari pengelompokan tersedia pada
tampilan di bawahnya berupa nama, NPM, jurusan, fakultas, kabupaten,
kecamatan, dan desa lokasi KKN.
Gambar 35 dibawah ini merupakan rancangan lihat kelompok, dimana
admin dapat melihat kelompok KKN berdasarkan periode, tahun,
kabupaten, dan kecamatan yang diinginkan.
Gambar 35. Rancangan interface lihat kelompok
Hasil dari lihat kelompok dapat dilihat pada rancangan tampilan seperti
Gambar 36 berikut.
Gambar 36. Rancangan interface hasil lihat kelompok
![Page 27: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/27.jpg)
41
Sedangkan untuk submenu terakhir yaitu ubah kelompok, admin
disediakan fasilitas untuk memilih kabupaten, kecamatan, desa, dan
peserta KKN yang akan diubah. Rancangan dari submenu ubah kelompok
ditunjukkan oleh Gambar 37.
Gambar 37. Rancangan interface ubah kelompok
j. Interface pengumuman
Rancangan selanjutnya yaitu rancangan menu pengumuman. Pengumuman
memuat berita yang digunakan untuk menampilkan informasi yang dinilai
penting kepada mahasiswa. Rancangan dari menu tersebut ditunjukkan
pada Gambar 38.
![Page 28: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/28.jpg)
42
Gambar 38. Rancangan interface pengumuman
Apabila ingin menambah pengumuman, admin dapat menekan tombol
“tambah pengumuman”. Tombol tersebut mengacu ke halaman tambah
pengumuman. Pada submenu ini, admin diberi fasilitas untuk memasukkan
judul, isi, gambar, dan file dari berita yang dimasukkan. Rancangan dari
tambah pengumuman diperlihatkan seperti Gambar 39.
Gambar 39. Rancangan interface tambah pengumuman
![Page 29: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/29.jpg)
43
3. Rancangan Antar Muka DPL
Dosen Pembimbing Lapangan (DPL) juga diberi akses untuk masuk ke dalam
sistem informasi KKN. DPL akan log in ke dalam sistem kemudian dapat melihat
daftar mahasiswa yang dibimbingnya. Berikut adalah rancangan interface dari
halaman DPL:
a. Interface beranda
Pada menu beranda, DPL diberikan informasi awal mengenai
penempatannya sebagai Dosen Pembimbing Lapangan saat ini. Gambar 40
merupakan rancangan menu beranda.
Gambar 40. Rancangan interface beranda DPL
b. Interface lihat daftar mahasiswa
Pada rancangan halaman ini terdapat beberapa daftar mahasiswa yang
ditampilkan, daftar mahasiswa tersebut merupakan mahasiswa yang
menjadi tanggung jawab DPL periode terakhir.
![Page 30: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/30.jpg)
44
Gambar 41. Rancangan interface lihat mahasiswa oleh DPL
c. Interface masukkan nilai mahasiswa
Rancangan di bawah ini merupakan tampilan dimana DPL dapat
memasukkan nilai mahasiswa dari hasil pelaksanaan KKN. Rancangan
dari tampilan masukkan nilai dapat dilihat pada Gambar 43.
Gambar 42. Rancangan interface masukkan nilai oleh DPL
![Page 31: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/31.jpg)
45
3.3.3. Pengembangan Sistem
Tahap pengembangan sistem merupakan tahap untuk merealisasikan seluruh
rancangan yang telah dibuat. Proses pengembangan sistem ini dilakukan dengan
menggunakan metodologi pengembangan perangkat lunak Extreme Programming
(XP). Pada metode ini terdapat empat tahapan dalam pengerjaannya, yaitu
planning, design, coding, dan testing. Penerapan keempat tahapan tersebut pada
pengembangan sistem informasi KKN ini dijelaskan sebagai berikut:
1. Planning
Pada tahap ini dikumpulkan kebutuhan awal pengguna atau user stories.
Dalam pengembangan sistem informasi KKN ini, pengguna utama adalah
pihak BP-KKN. Tahap planning ini dilakukan pada saat proses studi literatur
dalam tahapan penelitian.
2. Design
Design merupakan tahapan selanjutnya yang dilakukan setelah planning. Pada
tahap ini, user stories yang diperoleh dikembangkan ke dalam rancangan
sistem berupa context diagram, Data Flow Diagram (DFD) level 1, Data
Flow Diagram (DFD) level 2, Entity Relationship Diagram (ERD), dan
rancangan antarmuka (interface). Rancangan-rancangan tersebut digunakan
sebagai representasi sistem agar lebih mudah dikembangkan. Tahap design ini
dilakukan pada saat proses perancangan sistem dalam tahapan penelitian.
3. Coding
Pembangunan sistem informasi KKN ini dilakukan dengan menggunakan
bahasa pemrograman PHP, HTML, dan MySQL, serta didukung oleh software
![Page 32: BAB III METODE PENELITIAN 3.1. Tempat dan Waktu Penelitian ...digilib.unila.ac.id/15917/20/BAB III.pdf · Laporan Penulisan Laporan SSeelleessaaii a Tidak ... diperoleh digunakan](https://reader030.vdokumen.com/reader030/viewer/2022040122/5d444bd188c9932a398d8380/html5/thumbnails/32.jpg)
46
XAMPP. Selama proses pengkodingan dilakukan pula proses refactoring.
Tahap ini digunakan untuk memperbaiki sistem apabila terjadi kesalahan.
4. Testing
Pada tahap ini sistem yang telah dibangun dicoba apakah kebutuhan awal user
atau user stories sudah terpenuhi atau tidak. Apabila terpenuhi software akan
siap untuk dirilis.
3.3.4. Tahap Pengujian
Pengujian yang dilakukan pada pengembangan sistem informasi ini yaitu
pengujian dengan metode black box testing. Metode black box testing merupakan
salah satu metode pengujian perangkat lunak yang menguji aspek fundamental
sistem tanpa memperhatikan struktur logika perangkat lunak.
Apabila setelah pengujian masih terdapat kesalahan-kesalahan pada sistem, maka
sistem diperbaiki lagi untuk memenuhi kriteria yang ada. Oleh karena itu,
perilisan sistem dilakukan jika sistem sudah memenuhi kriteria yang diinginkan.
3.3.5. Penulisan Laporan
Penulisan laporan dilakukan untuk mendokumentasi seluruh kegiatan
pengembangan sistem dari awal sampai akhir. Penulisan ini menjelaskan
bagaimana pengembangan sistem terjadi dan seluruh penerapan yang diterapkan
pada pengembangan sistem.