DESAIN FITUR APLIKASI SISTEM PENDAFTARAN

KAMPUS (SIPENKA) BERBASIS WEBSITE MENGGUNAKAN

METODE PROTOTYPE DAN WATERFALL

METODOLOGI PENELITIAN TEKNOLOGI INFORMASI

Dosen Pengampu
Prof. Dr. Iskandar Fitri, S.T., M.T.

Disusun Oleh
Fhizyel Nazareta
183112706450116

PROGRAM STUDI INFORMATIKA

FAKULTAS TEKNOLOGI KOMUNIKASI DAN INFORMATIKA
UNIVERSITAS NASIONAL
JAKARTA
2021
 KATA PENGANTAR

Dengan menyebut nama Allah SWT yang Maha Pengasih lagi Maha
Panyayang, Saya panjatkan puja dan puji syukur atas kehadirat-Nya, yang telah
melimpahkan rahmat, hidayah, dan inayah-Nya kepada saya, sehingga saya dapat
menyelesaikan makalah Metodologi Penelitian Teknologi Informasi yang diberi
judul dengan “Desain Fitur Aplikasi Sistem Pendaftaran Kampus (Sipenka)
Menggunakan Metode Prototype dan Waterfall”.
Makalah tersebut telah saya susun dengan maksimal dan mendapatkan
bantuan dari berbagai pihak serta berbagai sumber bacaan sehingga dapat
memperlancar pembuatan makalah ini. Untuk itu saya menyampaikan banyak
terima kasih kepada semua pihak yang telah berkontribusi dalam pembuatan
makalah ini.
Semoga makalah ini dapat memberikan pengetahuan yang lebih luas
kepada pembaca. Walaupun makalah ini memiliki kelebihan dan kekurangan.
Penulis membutuhkan kritik dan saran dari pembaca yang membangun, Terima
kasih.

Jakarta, 02 Juni 2021

Fhizyel Nazareta

i
 DAFTAR ISI

KATA PENGANTAR..............................................................................................i
DAFTAR ISI............................................................................................................ii
DAFTAR GAMBAR..............................................................................................iii
DAFTAR TABEL...................................................................................................iv
BAB 1 PENDAHULUAN.......................................................................................1
1.1 Latar Belakang....................................................................................1
1.2 Rumusan Masalah...............................................................................1
1.3 Tujuan.................................................................................................1
BAB 2 PEMBAHASAN..........................................................................................2
2.1 Definisi...............................................................................................2
2.1.1 Desain Sistem..........................................................................2
2.1.2 Prototype.................................................................................3
2.1.3 Metode Waterfall....................................................................4
2.1.4 Laragon Web Server...............................................................4
2.2 Penggunaan Aplikasi PMB.................................................................5
2.3 Hasil Desain Sistem Aplikasi PMB....................................................6
BAB 3 PENUTUP.................................................................................................10
3.1 Kesimpulan.......................................................................................10
3.2 Saran.................................................................................................10
DAFTAR PUSTAKA............................................................................................11

ii
 DAFTAR GAMBAR

Gambar 1. Tampilan awal laragon...........................................................................5

Gambar 2. desain aplikasi penerimaan mahasiswa baru..........................................6
Gambar 3. Desain Aplikasi Tampilan Awal............................................................7
Gambar 4. Desain halaman login admin..................................................................8
Gambar 5. Desain tampilan halaman dasboard admin.............................................8
Gambar 6. Desain halaman verifikasi......................................................................9

iii
 DAFTAR TABEL

Tabel 1. Tools yang digunakan dalam pembuatan aplikasi.....................................5

iv
 BAB 1
PENDAHULUAN

1.1 Latar Belakang

Perkembangan teknologi pada masa ini sangatlah berkembang, dalam
melakukan perkembangan suatu teknologi sistem tentunya sangat
dibutuhkan suatu proses perencanaan guna mendapatkan hasil yang sesuai
dengan yang diinginkan, salah satunya yaitu desain sistem.
Menurut John Burch dan Garry Grudnitski dalam bukunya yang
bejudul “Analisa Dan Desain” desain sistem dapat didefinisikan sebagai
penggambaran dan pembuatan sketsa atau pengaturan dari beberapa elemen
yang terpisah ke dalam satu kesatuan yang utuh dan berfungsi[1].
Dalam perancangan desain aplikasi akan menggunakan software
Figma, sebab software tersebut dapat digunakan untuk mendesain dan
kemudian dapat menampilkan prototype, sehingga desain aplikasi akan
dibuat dengan lebih praktis karena hanya menggunakan satu software.

1.1

1.2 Rumusan Masalah

Sesuai dengan topik yang telah diuraikan di atas, maka terdapat
rumusan masalah dalam makalah desain aplikasi ini, diantaranya:
(1) Mengapa desain sistem sangat dibutuhkan?
(2) Software apa yang digunakan dalam pembuatan desain aplikasi?
(3) Apa saja tools yang digunakan dalam pembuatan desain aplikasi?

1.3 Tujuan
Tujuan dari penulisan makalah desain aplikasi ini, sebagai berikut:
(1) Pembaca akan mengetahui pentingnya melakukan desain sistem
(2) Pembaca akan mengetahui software apa yang digunakan dalam
pembuatan desain aplikasi tersebut.
(3) Pembaca akan mengetahui tools yang digunakan dalam pembuatan
desain aplikasi.

1
2
 BAB 2
PEMBAHASAN

2.1 Definisi
2.1.1 Desain Sistem
Desain sistem adalah proses mendefinisikan arsitektur , modul,
antarmuka, dan data untuk suatu sistem untuk memenuhi persyaratan
yang ditentukan. Perancangan sistem dapat dilihat sebagai penerapan
teori sistem untuk pengembangan produk . Ada beberapa tumpang
tindih dengan disiplin analisis sistem , arsitektur sistem dan rekayasa
sistem[2].

Tahapan desain sistem mempunyai 2 tujuan utama, yaitu [2]:

1. Untuk memenuhi kebutuhan kepada pengguna sistem.

2. Untuk memberikan gambaran yang jelas dan rancang bangun
yang lengkap.

Pada desain sistem dibutuhkan langkah – langkah dalam

prosesnya, menurut Tavri D. Mahyuzir beberapa langkah yang perlu
dilakukan pada proses desain sistem adalah[3]:

1. Menganalisa masalah dari pemakai (user), sasarannya adalah

mendapatkan pengertian yang mendalam tentang kebutuhan-
kebutuhan pemakai.
2. Studi kelayakan, membandingkan alternatif-alternatif
pemecahan masalah untuk menentukan jalan keluar yang paling
tepat.
3. Rancang sistem, membuat usulan pemecahan masalah secara
logika.
4. Detail desain, melakukan desain sistem pemecahan masalah
secara terperinci.
5. Penerapannya yaitu memindahkan logika program yang telah
dibuat dalam bahasa yang dipilih, menguji program, menguji
data dan outputnya.

3
 6. Pemeliharaan dan evaluasi terhadap sistem yang telah
diterapkan.

Dalam pembuatan suatu sistem tentunya sangat penting

melakukan proses mendesain sistem yang akan dibangun, dengan
tujuan sebagai prototype. Dalam melakukan desain sistem tentunya
tidak bisa dilakukan dengan sembarang, Adapun langkah-langkah
dalam mendesain sistem[3]:

1. Tahap Perencanaan
2. Mendefinisikan Masalah ,Sistem yang berjalan dan Sistem yang
diusulkan
3. Menentukan tujuan sistem
4. Mengidentifikasikan kendala sistem
5. Membuat studi kelayakan (TELOS)
6. Keputusan ditolak/diterima

2.1.2 Prototype
Model Prototyping merupakan model pengembangan sistem
yang kompleks pihak pengembang akan melakukan identifikasi
kebutuhan pemakai dan Pengembang akan mengerjakan bersama-
sama dengan pengguna dan hanya mendefinisikan objektif umum
dari perangkat lunak tanpa merinci kebutuhan input, pemrosesan dan
outputnya[4].

Berikut Tahapan Pengembangan metode prototype[4]:

1. Tahap Pengumpulan Kebutuhan

Pelanggan dan pengembang saling berinteraksi dalam
mendefinisikan kebutuhan sistem garis besar dari sistem yang
akan dirancang
2. Tahap Quick design
Membangun rancangan umum contoh acuan atau contoh
yang diberikan kepada user
3. Tahap Pembangunan Prototype

4
 Proses perancangan sementara di fokuskan kepada user
atau pelanggan termasuk pengujian dan penyempurnaan
4. Tahap Evaluasi Pelanggan (User)
Pemakai atau user melakukan pengujian terhadap prototipe
yang sudah dibuat sehingga pengembang dapat menganalisis
kembali kebutuhan user atau pemakai

2.1.3 Metode Waterfall

Penelitian yang terkait dengan sistem layanan ini yaitu
metode waterfall. Metode waterfall merupakan proses desain secara
berurutan yang sering digunakan dalam proses pengembangan
perangkat lunak, dimana kemajuan dipandang sebagai alur yang
mengalir ke bawah (seperti air terjun). Salah satu keunggulannya
yaitu pengerjaan sistem projeknya yang mudah dikontrol. Dan ada
juga kelemahan dari metode ini yaitu rincian proses harus benar-
benar jelas dan tidak boleh berubah-ubah. Sebab akan sulit untuk
mengadaptasi jika terjadi perubahan spesifikasi pada suatu tahapan
pengembangan [7].

2.1.4 Laragon Web Server

Laragon adalah universal development environment untuk
PHP, Node.js, Python, Java, Go, Ruby, yang portable, terisolasi,
cepat, ringan, dan mudah dipakai. Laragon bisa dipakai sebagai
pengganti XAMPP.[5].
Pengertian PHP, PHP Adalah bahasa scripting server-side,
Bahasa pemrograman yang digunakan untuk mengembangkan situs
web statis atau situs web dinamis atau aplikasi Web. PHP singkatan
dari Hypertext Pre-processor, yang sebelumnya disebut Personal
Home Pages.
Script sendiri merupakan sekumpulan instruksi
pemrograman yang ditafsirkan pada saat runtime. Sedangkan Bahasa
scripting adalah bahasa yang menafsirkan skrip saat runtime. Dan
biasanya tertanam ke dalam lingkungan perangkat lunak lain.[6].

5
2.2 Penggunaan Aplikasi PMB
Dalam perancangan desain aplikasi menggunakan tools yang telah
tersedia dalam laragon Web Server, untuk memulai design pertama yang
dilakukan konfigurasi pada setingan laragon untuk mengaktifkan apache
server dan DBMS MySQL. Setelah berhasil akan muncul tampilan port data
akfif pada layar laragon seperti berikut:

Gambar 1. Tampilan awal Laragon

Pada tahap ini akan diperlihatkan tools yang digunakan untuk

membuat desain aplikasi pendaftaran mahasiswa baru, sebagai berikut:

Tabel 1. Tools yang digunakan dalam pembuatan aplikasi

No Tool Keterangan
1 Apache Server Untuk Local web serve
2 MySQL Untuk Penyimpanan data pada website
Bahasa yang digunakan untuk Server Script
3 Bahasa PHP
atau back-end
Bahasa Untuk membuat web dinamis dengan
4
Javascritp tambahan triger pada tombol button
Tools yang mencakup semua keperluan
5 Laragon
server
6 Bootstrap 4 Framework CSS untuk mendesain Halaman
Framework PHP yang digunakan untuk
7 Codeigniter 3
model MVC

6
 Total tools yang digunakan dalam pembuatan project sebanyak 7
macam. Dari tools yang telah dipilih, maka didesain sehingga tampilan
seperti pada gambar berikut:

Gambar 2. desain aplikasi penerimaan mahasiswa baru

2.3 Hasil Desain Sistem Aplikasi PMB

Setelah malakukan desain sistem dengan GUI NetBeans, didapatkan
hasil sebagai berikut:

1. Tampilan Awal

7
 Gambar 3. Desain Aplikasi Tampilan Awal

Pada dasarnya tampilan awal akan menampilkan berupa informasi-

informasi terkait dengan pemberitahuan atau petunjuk untuk melakukan
pendaftaran. Namun, proses desain dilakukan baru pada intinya yaitu proses
pendaftaran saja.

2. Tampilan halaman login untuk admin

8
 Gambar 4. Desain halaman login admin

Didalam halaman ini akan ditunjukan untuk admin yang mengurus

pendaftaran dan menindaklanjuti calon mahasiswa yang didaftar akan
dilanjutkan ketahap seleksi masuk atau tidak setelah admin melihat dan
memverifikasi berkas pendaftar.

3. Tampilan Dasboard Admin

Gambar 5. Desain tampilan dasboard admin

Pada tampilan ini akan menampilkan sebuah halaman yang dikelola

oleh admin yang berisikan data para pendaftar dan jadwal kegiatan yang
dilakukan setelah pendaftaran, kegunaan dari halaman ini untuk mencarinya
data pendaftar, memverifikasi dan mensetting pengaturan umum website,
juga dapat mengatur jadwal seleksi, print kartu peserta dan pengaturan untuk
formulir pendaftaran online dan para peserta hanya tinggal menunggu
tanggal dan pengumuman lolos seleksi akan menampilkan pada halaman
awal ditampikan dan jadwal kegiatan selanjutnya.

9
4. Tampilan halaman Verifikasi dan Kartu Ujian yang telah diverifikasi

Gambar 6. Desain halaman verifikasi

Gambar 7. Desain kartu pendaftaran

Pada tampilan ini, akan menampilkan halaman verifikasi yang dapat

digunakan untuk melihat data pendaftar untuk diverifikasi yang ada pada
halaman ini. Dengan memberikan verifikasi terhadap peserta selanjutnya
bisa melakukan cetak kartu ujian yaitu klik tombol cetak kartu ujian dan
print maka halaman akan menampilkan halaman blank/baru untuk print
kartu ujian masuk.

10
 BAB 3
PENUTUP

3.1 Kesimpulan
Dari penjelasan makalah diatas, maka dapat disimpulkan bahwa:

1. Setiap jenis perangkat yang digunakan telah berfungsi sesuai dengan

perintah kebutuhan pembuatan dari sisi desain tampilan, bagian depan
atau front-end dan bagian proses pengolah data atau back-end.
2. Desain aplikasi yang dirancang belum semuanya selesai namun sudah
sesuai dengan metode Prototype yang digunakan, sehingga
menghasilkan hasil yang diharapkan.

3.2 Saran
Penulis menyadari akan kekurangan dalam pembuatan makalah ini,
maka dari itu penulis mengharapkan kritik serta saran untuk meningkatkan
kualitas dalam penyusunan guna dapat lebih baik untuk penulisan
selanjutnya.

11
 DAFTAR PUSTAKA

[1] J. Burch and G. Grudnitski, Analisa dan Desain, Edisi 1. Yogyakarta: Andi
Offset, 1995.
[2] K. Ulrich and S. Eppinger, Product Design and Development, 2nd Editio.
Cambridge: McGraw-Hill/Irwin, 1999.
[3] T. D. Mahyuzir, Analisa dan Perancangan Sistem Pengolahan Data,
Cetakan 3. Jakarta, 1992.
[4] T. Hastie, The elements of statistical learning : data mining, inference, and
prediction, Edisi 2. New York: Tibshirani, Robert ,, Friedman, JH (Jerome
H.).
[5] “Laragon, Alternatif XAMPP Terbaik di Windows,” himatif uin.
http://himatif.uinsgd.ac.id/2018/05/04/laragon-alternatif-xampp-terbaik-di-
windows/ (accessed Jun. 03, 2021).
[6] V. Oktorian Halim W., “Pengenalan Bahasa PHP,” School of Information
System, 2020. https://www.jagoanhosting.com/blog/pengertian-php/
(accessed Jun. 03, 2021).
[7] L. Mutmainnah, “Model Waterfall,” SlideShare, 2013.
https://www.slideshare.net/27071993/model-waterfall (accessed Jun. 02,
2021).

12