TUGAS AKHIR

RANCANG BANGUN APLIKASI PENDAFTARAN CALON

ANGGOTA PADA DOJO 86 KOTA PONTIANAK BERBASIS
WEB

Diajukan Sebagai Persyaratan Untuk Menyelesaikan Pendidikan Diploma Tiga

Pada Program Studi Teknik Informatika Jurusan Teknik Elektro
Politeknik Negeri Pontianak

OLEH:
LUSIANA
NIM : 3201916063

PROGRAM STUDI D3 TEKNIK INFORMATIKA

JURUSAN TEKNIK ELEKTRO
POLITEKNIK NEGERI PONTIANAK
2022
 HALAMAN PENGESAHAN

RANCANG BANGUN APLIKASI PENDAFTARAN CALON

ANGGOTA PADA DOJO 86 KOTA PONTIANAK BERBASIS
WEB

Oleh:
Lusiana
3201916063

Tugas akhir ini telah diterima dan disahkan sebagai salah satu syarat untuk
menyelesaikan Program Pendidikan Diploma Tiga pada Program Studi
Teknik Informatika Jurusan Teknik Elektro Politeknik Negeri Pontianak.

Disahkan oleh :

Ketua Jurusan Teknik Elektro Ketua Program Studi

D-III Teknik Informatika

Hasan, S.T., M.T. Suheri, S.T., M.Cs.

NIP. 197108201999031003 NIP. 198307172008121005

Mengetahui,
Direktur Politeknik Negeri Pontianak

Dr. Ir. H. Muhammad. Toasin Asha, M.Si

NIP. 196112251990111001

ii
 HALAMAN PERNYATAAN

RANCANG BANGUN APLIKASI PENDAFTARAN CALON

ANGGOTA PADA DOJO 86 KOTA PONTIANAK BERBASIS WEB

Oleh:
Lusiana
(3201916063)
Dosen Pembimbing:

Muhammad Diponegoro, S.Kom., M.Cs.

NIP. 19870208 201903 1 005

Telah dipertahankan di depan penguji pada tanggal 31 Agustus 2022 dan

dinyatakan memenuhi syarat sebagai Tugas Akhir.

Dosen Penguji:
Penguji I Penguji II

Yasir Arafat, S.ST., M.T. Pausta Yugianus, S.Kom., M.T.

NIP. 19720304 199501 1 001 NIP. 19880920 201504 1 003

iii
 HALAMAN PERNYATAAN ORISINALITAS

Saya yang bertanda tangan dibawah ini :

Nama                   : Lusiana
NIM                    : 3201916063
Jurusan / Program Studi : Teknik Elektro / Teknik Informatika
Judul Tugas Akhir        : Rancang Bangun Aplikasi Pendaftaran Calon
Anggota Pada Dojo 86 Kota Pontianak Berbasis
Web

Menyatakan dengan sebenar-benarnya bahwa penulisan Tugas Akhir ini

berdasarkan hasil penelitian, pemikiran dan pemaparan asli dari saya sendiri, baik
untuk naskah tugas akhir maupun kegiatan yang tercantum sebagai bagian dari
Tugas Akhir ini. Jika terdapat karya orang lain, saya akan mencantumkan sumber
yang jelas.
Demikian pernyataan ini saya buat dengan sesungguhnya dan apabila
dikemudian hari terdapat penyimpangan dan ketidakbenaran dalam pernyataan ini,
maka saya bersedia menerima sanksi akademik berupa pencabutan gelar yang
telah diperoleh karena karya tulis ini dan sanksi lain sesuai dengan peraturan yang
berlaku di Politeknik Negeri Pontianak.
Demikian pernyataan ini saya buat dalam  keadaan sadar tanpa paksaan dari
pihak manapun.  

Pontianak, 31 Agustus 2022

Yang membuat pernyataan,

Materai
10000

Lusiana
NIM. 3201916063

iv
 RIWAYAT HIDUP

Biodata Mahasiswa :
Nama Mahasiswa : Lusiana
NIM : 3201916063
Tempat / Tanggal Lahir : Landau Banjang,13 September 2000
Jenis Kelamin : Perempuan
Agama : Kristen
Alamat : Landau Banjang, Kec. Belitang Hulu,
Sekadau
No. Telpon Rumah / Handphone : 087788909754
Email : lusia4993@gmail.com

v
 ABSTRAK

Dojo merupakan suatu tempat atau sarana penunjang latihan seni beladiri
khususnya beladiri yang berasal dari Jepang. Terdapat berbagai macam seni
beladiri yang berasal dari negara Jepang yaitu Jujutsu, Judo, Aikido, Karate,
Sumo dan lain sebagainya. Karate adalah olahraga beladiri yang menggunakan
tangan dan kaki sebagai alat untuk melepaskan kekuatan pukulan, serangan, dan
tendangan. Dojo 86 merupakan sebuah tempat untuk berlatih beladiri terutama
karate yang berlokasi di Jalan Nusa Indah, Kelurahan Sekip Darat, Kota
Pontianak. Permasalahan yang terjadi pada Dojo 86 yaitu sistem pendaftaran
calon anggota yang masih menggunakan metode manual menggunakan kertas
formulir pendaftaran. Kesulitan dalam pengolahan data menyebabkan sering
terjadinya kesalahan pencatatan data serta sering terjadinya kehilangan berkas
dokumen calon anggota. Untuk membantu mengatasi masalah tersebut, diperlukan
suatu aplikasi pendaftaran calon anggota karate pada Dojo 86 ini yang dapat
membantu proses pendaftaran calon anggota, mempermudah pengelolaan data
pendaftaran calon anggota serta menyimpan berkas dokumen calon anggota pada
Dojo 86, sehingga proses pendaftaran calon anggota dapat lebih efektif dan
efisien. Dalam membangun aplikasi berbasis web ini digunakan framework
Codeigniter sebagai back-end dan Boostrap sebagai front-end dari website
tersebut. Adapun untuk database menggunakan Mysql serta Xampp sebagai
server local dalam proses pengembangan website. Metodologi pengembangan
sistem yang digunakan dalam Tugas Akhir ini dengan menggunakan metode
Waterfall, sedangkan untuk pengumpulan data menggunakan metode observasi,
wawancara dan studi pustaka. Dengan adanya pembuatan aplikasi pendaftaran
calon anggota karate pada Dojo 86 ini diharapkan dapat mempermudah dalam
mengolah data pendaftaran calon anggota sehingga dapat menghindari kesalahan
pencatatan data, kehilangan data calon anggota dan lain sebagainya.
Kata Kunci : Website, Codeigniter, Pengolahan Data, Pendaftaran Calon Anggota.

vi
 ABSTRACT

Dojo is a place or means of supporting martial arts training, especially martial

arts originating from Japan. There are various kinds of martial arts originating
from Japan, namely Jujutsu, Judo, Aikido, Karate, Sumo and so on. Karate is a
martial sport that uses the hands and feet as a tool to release the power of
punches, attacks, and kicks. Dojo 86 is a place to practice martial arts, especially
karate, which is located on Jalan Nusa Indah, Sekip Darat Village, Pontianak
City. The problem that occurs in Dojo 86 is the registration system for
prospective members which still uses the manual method using registration form
paper. Difficulties in data processing cause frequent data recording errors and
frequent loss of document files for prospective members. To help overcome this
problem, we need an application for registration of prospective karate members
at Dojo 86 which can assist the registration process for prospective members,
simplify the management of registration data for prospective members and store
document files for prospective members at Dojo 86, so that the registration
process for prospective members can be more effective and efficient. efficient. In
building this web-based application, the Codeigniter framework is used as the
back-end and Boostrap as the front-end of the website. As for the database using
Mysql and Xampp as a local server in the website development process. The
system development methodology used in this final project uses the Waterfall
method, while the data collection uses the methods of observation, interviews and
literature study. With the creation of an application for registration of prospective
karate members at Dojo 86, it is expected to make it easier to process registration
data for prospective members so that they can avoid data recording errors, losing
prospective member data and others.

Keywords : Website, Codeigniter, data processing, member registration

vii
 PRAKATA

Puji syukur kepada Tuhan Yang Maha Esa yang telah melimpahkan segala rahmat
dan hidayah-Nya sehingga penulis dapat menyelesaikan penulisan tugas akhir
yang berjudul “Rancang Bangun Aplikasi Pendaftaran Calon Anggota Pada Dojo
86 Kota Pontianak Berbasis Web”. Tujuan penulisan tugas akhir ini adalah
memenuhi persyaratan untuk menyelesaikan Pendidikan Diploma Tiga pada
Program Studi Teknik Informatika Jurusan Teknik Elektro Politeknik Negeri
Pontianak. Dengan segala kerendahan hati, penulis menyadari bahwa dalam
menyelesaikan penulisan tugas akhir ini tidak lepas dari peran berbagai pihak
yang telah banyak memberikan saran, bimbingan, doa, serta motivasi. Dalam
kesempatan ini, penulis ini mengucapkan terima kasih khususnya kepada :
1. Orang tua yang selalu memberikan nasihat dan dukungan selama
berjalannya proses penyusunan Tugas Akhir.
2. Bapak Dr. Ir. H. Muhammad Toasin Asha, M. SSi selaku Direktur Politeknik
Negeri Pontianak.
3. Bapak Hasan, ST., M.T. selaku Ketua Jurusan Teknik Elektro
4. Bapak Suheri, S.T., M.Cs. selaku Ketua Program Studi Teknik Informatika
5. Bapak Muhammad Diponegoro, S.Kom., M.Cs. selaku Koordinator Tugas
Akhir Program Studi Teknik Informatika dan selaku Dosen Pembimbing
yang tiada henti memberikan bimbingan, dorongan, saran, kritik dan
motivasi kepada penulis.
6. Bapak Yasir Arafat, S.ST., M.T. selaku Dosen Penguji 1 yang juga telah
memberikan saran dan kritik selama proses penyusunan Tugas Akhir ini.
7. Bapak Pausta Yugianus, S.Kom., M.T. selaku Dosen Penguji 2 yang juga
telah memberikan saran dan kritik selama proses penyusunan Tugas Akhir.
8. Seluruh staf pengajar dan administrasi Politeknik Negeri Pontianak,
khususnya di Jurusan Teknik Elektro Program Studi Teknik Informatika
Penulis menyadari bahwa dalam penyusunan laporan Tugas Akhir ini
masih jauh dari sempurna, untuk itu kritik dan saran dari pembaca yang
membangun sangat penulis harapkan untuk menjadi pelajaran di kemudian hari.
Penulis berharap semoga laporan Tugas Akhir ini dapat memberikan manfaat bagi
kita semua. Terima kasih .

viii
 Pontianak, 31 Agustus 2022

Penulis

ix
 DAFTAR ISI

TUGAS AKHIR
HALAMAN PENGESAHAN
HALAMAN PERNYATAAN
HALAMAN PERNYATAAN ORISINALITAS
RIWAYAT HIDUP
ABSTRAK
ABSTRACT
KATA PENGANTAR
DAFTAR ISI
DAFTAR GAMBAR
DAFTAR TABEL
BAB I PENDAHULUAN
1.1 Latar Belakang
1.2 Rumusan Masalah2
1.3 Batasan Masalah
1.4 Tujuan Penelitian3
1.5 Manfaat Penelitian3
1.5.1 Bagi Mahasiswa3
1.5.2 Bagi Dojo 86 Kota Pontianak
1.6 Metodologi Penelitian
1.6.1 Metode Observasi
1.6.2 Metode Wawancara
1.6.3 Metode Literatur4
1.6.4 Metode Pengembangan Sistem
BAB II DASAR TEORI7
2.1 Tinjauan Pustaka7
2.2 Dasar Teori7
2.2.1 Web7
2.2.2 HTML8
2.2.3 PHP9
2.2.4 XAMPP9

x
 2.2.5 MySQL0
2.2.6 Framework Boostrap11
2.2.7 Framework Codeigntier1
BAB III RANCANGAN SISTEM3
3.1 Gambaran Umum3
3.2 Analisis Kebutuhan3
3.2.1 Kebutuhan Perangkat Keras3
3.2.2 Kebutuhan Perangkat Lunak3
3.3 Perancangan Proses4
3.3.1 Use Case Diagram4
3.3.2 Definisi Aktor5
3.3.3 Use Case Scenario16
3.3.4 Diagram Navigasi27
3.3.5 Activity Diagram27
3.4 Rancangan Database28
3.4.1 Relasi Tabel29
3.4.2 Struktur Tabel29
3.5 Rancangan User Interface33
3.5.1 Tampilan Rancangan Halaman Beranda34
3.5.2 Tampilan Rancangan Halaman Profil34
3.5.3 Tampilan Rancangan Halaman Berita35
3.5.4 Tampilan Rancangan Halaman Anggota36
3.5.5 Tampilan Rancangan Halaman Prestasi37
3.5.6 Tampilan Rancangan Halaman Kegiatan38
3.5.7 Tampilan Rancangan Halaman Masuk38
3.5.8 Tampilan Rancangan Halaman Daftar39
BAB IV HASIL DAN PEMBAHASAN0
4.1 Implementasi Aplikasi0
4.1.1 Tampilan Halaman Beranda40
4.1.2 Tampilan Halaman Berita41
4.1.3 Tampilan Halaman Detail Berita41
4.1.4 Tampilan Halaman Galeri42

xi
 4.1.5 Tampilan Halaman Detail Galeri42
4.1.6 Tampilan Halaman Jadwal Latihan42
4.1.7Tampilan Halaman Anggota43
4.1.8 Tampilan Halaman Kontak Kami43
4.1.9 Tampilan Halaman Login Anggota44
4.1.10 Tampilan Halaman Registrasi Anggota45
4.1.11 Tampilan Halaman Login Admin46
4.1.12 Tampilan Halaman Dashboard Admin46
4.1.13 Tampilan Halaman Kelola Admin47
4.1.14 Tampilan Halaman Kelola Profil47
4.1.15 Tampilan Halaman Kelola Berita48
4.1.16 Tampilan Halaman Kelola Galeri48
4.1.17 Tampilan Halaman Kelola Tambah Galeri48
4.1.18 Tampilan Halaman Kelola Jadwal Latihan49
4.1.19 Tampilan Halaman Kelola Tingkatan Sabuk49
4.1.20 Tampilan Halaman Kelola Anggota50
4.1.21 Tampilan Halaman Kelola Screening50
4.1.22 Tampilan Halaman Kelola Prestasi51
4.1.23 Tampilan Halaman Saran51
4.1.24 Tampilan Halaman Dashboard Anggota52
4.1.25 Tampilan Halaman Profil Anggota52
4.1.26 Tampilan Halaman Prestasi Anggota53
4.2 Pengujian Sistem54
BAB V PENUTUP
5.1 Kesimpulan
5.2 Saran
DAFTAR PUSTAKA

xii
 DAFTAR GAMBAR

Gambar 1. Tahapan Pengembangan Metode Prototyping5

Gambar 2. Use Case Diagram14
Gambar 3. Diagram Navigasi27
Gambar 4. Activity Diagram Pendaftaran28
Gambar 5. Relasi Tabel
Gambar 6. Halaman Beranda
Gambar 7. Halaman Profil
Gambar 8. Halaman Berita
Gambar 9. Halaman Anggota
Gambar 10. Halaman Prestasi
Gambar 11. Halaman Kegiatan
Gambar 12. Halaman Login
Gambar 13. Halaman Pendaftaran
Gambar 14. Tampilan Halaman Beranda40
Gambar 15. Tampilan Halaman Berita41
Gambar 16. Tampilan Halaman Detail Berita41
Gambar 17. Tampilan Halaman Galeri42
Gambar 18. Tampilan Halaman Detail Galeri42
Gambar 19. Tampilan Halaman Jadwal Latihan43
Gambar 20. Tampilan Halaman Anggota43
Gambar 21. Tampilan Halaman Kontak Kami44
Gambar 22. Tampilan Halaman Login Anggota44
Gambar 23. Tampilan Halaman Registrasi anggota45
Gambar 24. Tampilan Halaman Login Admin46
Gambar 25. Tampilan Halaman Dashboard admin46
Gambar 26. Tampilan Halaman Kelola Admin47
Gambar 27. Tampilan Halaman Kelola Profil47
Gambar 28. Tampilan Halaman Kelola Berita48
Gambar 29. Tampilan Halaman Kelola Galeri48
Gambar 30. Tampilan Halaman Kelola Tambah Galeri49

xiii
Gambar 31. Tampilan Halaman Kelola Jadwal Latihan49
Gambar 32. Tampilan Halaman Kelola Tingkatan Sabuk50
Gambar 33. Tampilan Halaman Kelola Anggota50
Gambar 34. Tampilan Halaman Kelola Screening 51
Gambar 35. Tampilan Halaman Kelola Prestasi51
Gambar 36. Tampilan Halaman Saran52
Gambar 37. Tampilan Halaman Dashboard Anggota52
Gambar 38. Tampilan Halaman Profil Anggota53
Gambar 39. Tampilan Halaman Prestasi Anggota53

xiv
 DAFTAR TABEL
Tabel 3.1. Use Case Scenario Login16
Tabel 3.2. Use Case Scenario Mengelola Data Admin17
Tabel 3.3. Use Case Scenario Mengelola Profil Dojo17
Tabel 3.4. Use Case Scenario Data Berita18
Tabel 3.5. Use Case Scenario Mengelola Data Galeri18
Tabel 3.6. Use Case Scenario Jadwal Latihan19
Tabel 3.7. Use Case Scenario Tingkatan Sabuk19
Tabel 3.8. Use Case Scenario Anggota20
Tabel 3.9. Use Case Scenario Screening21
Tabel 3.10. Use Case Scenario Beranda21
Tabel 3.11. Use Case Scenario Berita Pengunjung22
Tabel 3.12. Use Case Scenario Galeri Pengunjung22
Tabel 3.13. Use Case Scenario Jadwal Latihan23
Tabel 3.14. Use Case Scenario Anggota23
Tabel 3.15. Use Case Scenario Kontak23
Tabel 3.16. Use Case Scenario Login Anggota24
Tabel 3.17. Use Case Scenario Registrasi Anggota25
Tabel 3.18. Use Case Scenario Edit Profil25
Tabel 3.19. Use Case Scenario Prestasi Anggota26
Tabel 3.20. Struktur Tabel Admin29
Tabel 3.21. Struktur Tabel Berita30
Tabel 3.22. Struktur Tabel Foto30
Tabel 3.23. Struktur Tabel Galeri30
Tabel 3.24. Struktur Tabel Jadwal31
Tabel 3.25. Struktur Tabel Prestasi31
Tabel 3.26. Struktur Tabel profil31
Tabel 3.27. Struktur Tabel Registrasi31
Tabel 3.28. Struktur Tabel Sabuk32
Tabel 3.29. Struktur Tabel Saran32
Tabel 3.30. Struktur Tabel Screening32
Tabel 4.1. Pengujian Metode Blackbox54

xv
 BAB I
PENDAHULUAN
1.1 Latar Belakang
Dojo merupakan suatu tempat atau sarana penunjang latihan seni beladiri
khususnya beladiri yang berasal dari Jepang. Terdapat berbagai macam seni
beladiri yang berasal dari negara Jepang yaitu Jujutsu, Judo, Aikido, Karate,
Sumo dan lain sebagainya. Karate adalah olahraga beladiri yang menggunakan
tangan dan kaki sebagai alat untuk melepaskan kekuatan pukulan, serangan, dan
tendangan. Dojo 86 merupakan sebuah tempat untuk berlatih beladiri terutama
karate berdiri pada tahun 1986 yang berlokasi di Jalan Nusa Indah, Kelurahan
Sekip Darat, Kota Pontianak.
Setiap bulannya, pada Dojo 86 Kota Pontianak membuka pendaftaran calon
anggota baru. Akan tetapi penyampaian informasi pendaftaran mengenai calon
anggota baru ini dilakukan secara manual, yaitu melalui mulut ke mulut, serta
melalui status sosial media anggota dari Dojo tersebut. Untuk mendapatkan
anggota baru Dojo 86 bekerja sama dengan pihak sekolah yaitu dengan MTs
Hidayatul Muslimin 1 Kubu Raya. Untuk proses pendaftaran calon anggota Dojo
86 saat ini masih menggunakan proses manual yaitu pendaftar mengisikan
formulir yang disediakan oleh panitia. Setelah itu formulir dan berkas diberikan
ke panitia untuk dilakukan pengecekan apakah data calon anggota sudah benar.
Dalam mendapatkan calon anggota di MTs Hidayatul Muslimin 1 Kubu Raya
sedikitnya kurang lebih 20 orang sampai 30 orang per kelas, hal ini dibuktikan
dengan lampiran atau jurnal yang diperoleh penulis dalam melakukan penelitian
di Dojo 86 Kota Pontianak.
Dalam mengelola data pendaftaran calon anggota Dojo 86 masih
menggunakan cara konvensional atau cara lama. Hal ini menyebabkan kinerja
pihak administrasi Dojo 86 tidak efisien. Kesulitan dalam pengolahan data
menyebabkan sering terjadinya kesalahan pencatatan data dan sering terjadinya
kehilangan berkas dokumen calon anggota Dojo 86. Sehingga untuk membantu
mengatasi masalah tersebut, diperlukan sebuah sistem yang dapat mempermudah
pekerjaan panitia penerimaan calon anggota baru dalam melakukan pengolahan
data pendaftar.

1
 2

Berdasarkan penelitian terdahulu yang ditulis oleh Nurafni berjudul

“Membangun Website Sekolah Dengan Fitur Pendaftaran Siswa Baru Pada
Madrasah Tsanawiyah (MTS) Negeri 3 Mempawah”[1]. Penelitian ini bertujuan
untuk menghasilkan sistem yang dapat menyederhanakan proses dan memperoleh
informasi tentang data pendaftaran siswa baru. Kekurangan dari penelitian ini
adalah tidak adanya aktor calon siswa, yang dimana pada penelitian ini calon
siswa yang mendaftar ke website tersebut tidak memerlukan login. Hal ini
berdampak ketika ada pengunjung ataupun calon siswa yang iseng memasukkan
data secara tidak benar ke dalam website. Selanjutnya penelitian yang dilakukan
oleh Yusuf Ali Akbar Rambe dengan judul “Rancang Bangun Aplikasi
Pendaftaran Anggota Perpustakaan Daerah Kabupaten Sanggau”[2]. Penelitian ini
bertujuan menghasilkan aplikasi pendaftaran anggota perpustakaan kemudian
dapat dicetak kartu anggota untuk digunakan sebagaimana mestinya. Kekurangan
dari penelitian ini adalah aplikasi ini memiliki fitur sedikit hanya memproses data
serta mengelola data anggota perpustakaan, dan tidak adanya fitur pencatatan
peminjaman oleh anggota melalui aplikasi. Untuk itu setelah melakukan analisa
terkait aplikasi yang dibangun, maka kelebihan dari aplikasi yang dibuat penulis
adalah calon pendaftar diwajibkan terlebih dahulu mendaftar akun untuk
menghindari terjadinya duplikasi data dan serangan lainnya, pada website Dojo 86
nantinya terdapat fitur menampilkan event yang akan dilaksanakan, menampilkan
berita terkini, serta terdapat fitur prestasi untuk mempromosikan betapa hebatnya
Dojo 86.
Berdasarkan latar belakang masalah diatas, maka penulis akan membangun
serta melakukan penelitian dengan judul “Rancang Bangun Aplikasi Pendaftaran
Calon Anggota Karate Pada Dojo 86 Kota Pontianak Berbasis Web”. Sehingga
aplikasi tersebut dapat mempermudah masyarakat khususnya calon anggota karate
dalam mendapatkan informasi mengenai Dojo 86 dan dipermudah dalam
melakukan pendaftaran.

1.2 Rumusan Masalah

Berdasarkan latar belakang diatas maka yang menjadi permasalahannya
yaitu:
 3

1) Sistem pendaftaran masih menggunakan manual yaitu pendaftar

diharuskan datang ke Dojo untuk melakukan pendaftaran menjadi
anggota.
2) Formulir pendaftaran rawan rusak, seperti kehilangan berkas, robek,
ataupun terduplikat.
3) Memakan biaya dalam mencetak formulir pendaftaran.

1.3 Batasan Masalah

Dalam penyusunan tugas akhir ini maka diperlukan pengertian atau definisi
pada pembahasan yang terfokus agar permasalahan tidak meluas. maka penulis
membatasi ruang lingkupnya antara lain :
1) Framework yang digunakan dalam website ini adalah Codeigniter.
2) Database yang digunakan pada pembuatan website ini yaitu MySQL.
3) Code Editor yang digunakan untuk membangun website ini adalah
Visual Studio Code.
4) Fitur-fitur yang ditampilkan pada website adalah Beranda, Profil, Berita,
Anggota, Prestasi, Jadwal Latihan, Event, Kontak dan pendaftaran
anggota baru.

1.4 Tujuan Penelitian

Berdasarkan rumusan masalah yang telah disebutkan maka tujuan dari
penulisan Tugas Akhir ini adalah menghasilkan website karate dengan fitur
pendaftaran calon anggota pada Dojo 86 Kota Pontianak.

1.5 Manfaat Penelitian

1.5.1 Bagi Mahasiswa
Menambah wawasan ilmu pengetahuan terkait aplikasi yang dibangun dan
melatih mahasiswa dalam menerapkan pengetahuan serta ilmu-ilmu mengenai
pembangunan dan perancangan aplikasi yang telah diperoleh selama masa
perkuliahan.
 4

1.5.2 Bagi Dojo 86

Mempermudah dalam pendaftaran dan pengelolaan data calon anggota
sehingga lebih efektif dan cepat dibandingkan dengan cara manual dan
memberikan kemudahan dalam mengelola dokumen secara online.

1.6 Metodologi Penelitian

Metodologi yang digunakan oleh penulis dalam penyusunan Proposal
Pengajuan Tugas Akhir ini adalah sebagai berikut:

1.6.1 Metode Observasi

Proses ini dilakukan untuk mengamati atau membaca suatu peristiwa atau
sekelompok fakta. Dalam banyak kasus, motivasi untuk pengamatan seperti ini
adalah mengidentifikasi penyebab dan efek hubungan antara item yang diamati
karena ini memerlukan suatu hasil yang dapat diramalkan.
Observasi yang dilakukan penulis dengan cara melakukan penelitian
langsung di Dojo 86 Kota Pontianak.
1.6.2 Metode Wawancara
Salah satu metode pengumpulan data adalah dengan jalan wawancara,
wawancara merupakan pertemuan dua orang untuk bertukar informasi dan ide
melalui tanya jawab, sehingga dapat dikonstruksikan makna dalam suatu topik
tertentu.
Wawancara yang dilakukan penulis adalah dengan menemui senpai yang
mengajar karate untuk membahas pembuatan website ini.
1.6.3 Metode Literatur
Metode ini melakukan pengumpulan data dengan mempergunakan modul-
modul, jurnal-jurnal, serta pengumpulan data-data berupa e-book (Electronic
Book), buku-buku referensi maupun informasi di berbagai situs yang terdapat di
internet dengan cara melakukan kegiatan yang disebut browsing pada aplikasi
browser yang ada disetiap sistem operasi komputer maupun PC (Personal
Computer) ataupun segala informasi yang dapat mendukung dan menjadi
landasan dalam penulisan proposal Tugas Akhir ini.
 5

Literatur yang diambil penulis antara lain menggunakan beberapa jurnal dan
artikel yang ada di internet serta Tugas Akhir senior terdahulu yang berfokus
membahas pembuatan website pendaftaran.
1.6.4 Metode Pengembangan Sistem
Metode pengembangan dalam pembuatan website karate dengan fiutr
pendaftaran calon anggota pada Dojo 86 Kota Pontianak adalah metode Prototype
atau Prototyping. Metode prototyping merupakan metode yang dapat menghemat
waktu dalam pengembangan sistem dan sistem yang dibuat sesuai dengan
kebutuhan dan keinginan pelanggan. Seperti gambar 1 dibawah ini :

Gambar 1. Tahapan Pengembangan Metode Prototyping

Berdasarkan Gambar 1, dalam model prototyping terdapat beberapa tahan yang

dijelaskan sebagai berikut :
1) Pengumpulan Kebutuhan
Pada tahap ini penulis melakukan identifikasi software dan semua kebutuhan
sistem yang akan dibuat yang didapat melalui metode wawancara, observasi dan
studi literatur yang telah dilakukan sebelumnya.
2) Membangun Prototyping
Setelah melakukan pengumpulan data, tahap selanjutnya adalah membangun
prototype dengan membuat perancangan sementara yang akan digunakan untuk
penyajian kepada klient. Pada tahap ini, dibuatlah use case diagram dan mockup
untuk interface user.
3) Evaluasi Prototyping
 6

Pada tahap evaluasi prototyping, klient melihat prototype yang dibangun dan
menilai apakah sudah sesuai dengan keinginan dan kebutuhan klient. Jika tidak
sesuai prototype akan diperbaiki dengan mengulangi langkah-langkah
sebelumnya. Tapi jika sudah, langkah selanjutnya akan dilaksanakan.
4) Mengkodekan Sistem
Pada tahap ini, prototype diterjemahkan ke dalam bahasa pemrograman.
Pengkodean sistem pada tahap ini dibuat dengan bahasa pemrograman PHP
dengan konsep framework.
5) Menguji sistem
Setelah sistem sudah menjadi suatu software yang siap digunakan, maka software
tersebut harus diuji. Pengujian software bertujuan untuk meminimalisir kesalahan
pada software yang dibangun. Pengujian dilakukan dengan menggunakan metode
blackbox testing. Blackbox testing atau disebut juga dengan pengujian fungsional
merupakan pengujian yang didasarkan pada detail aplikasi seperti tampilan
aplikasi, fungsi-fungsi yang ada pada website, dan kesesuaian alur fungsi dengan
proses yang diinginkan klient.
6) Evaluasi Sistem
Ditahap ini klient mengevaluasi sistem yang telah dibuat. Jika sistem belum sesuai
dengan yang diinginkan, maka pengembang mengulangi langkah ke 4 dan 5. Tapi
jika sudah sesuai, maka langkah selanjutnya akan dilakukan.
7) Menggunakan Sistem
Setelah melakukan tahap evaluasi sistem, software sudah dapat digunakan.
 BAB II
DASAR TEORI

2.1 Tinjauan Pustaka

Untuk mendukung penelitian Tugas akhir ini, Penulis mengambil beberapa
contoh penelitian yang telah dilakukan sebelumnya. Penelitian pertama yang
berjudul “Rancang Bangun Aplikasi Pendaftaran Siswa Baru Pada SMA Negeri 1
Pemangkat Kabupaten Sambas Berbasis Web” yang diajukan oleh Septian[3].
Penelitian ini membangun aplikasi pendaftaran yang digunakan untuk
mempermudah calon siswa dalam melakukan pendaftaran. Perbedaan yang
dimiliki oleh aplikasi yang akan dibangun adalah tidak adanya fitur berita untuk
menampilkan berita terbaru mengenai pendaftaran tersebut.
Adapun penelitian kedua oleh Afif Fathurrahman yang berjudul “Rancang
Bangun Aplikasi Pendaftaran Calon Jama’ah Haji Berbasis Website Pada KBIH
AL-HIDAYAH SURABAYA”. Penelitian ini bertujuan melakukan pendaftaran
calon jamaah haji menggunakan website sehingga dapat mempermudah pendaftar.
Perbedaan yang dimiliki ialah website yang dibuat tanpa menggunakan
framework sehingga banyak memakan waktu yang sangat lama untuk
membuatnya, serta tidak ada fitur keamanan layaknya Codeigniter dan Laravel
yang mendeteksi dan mencegah serangan XSS, SQLi, ataupun CSRF[4].
Penelitian ketiga berjudul “Sistem Informasi Pendaftaran Siswa Baru
Berbasis Web pada SMA YISLAH” yang ditulis oleh Achmad Sidik, Nunung
Nurmaesah, dan Ikmaliyah[5]. Pada penelitian ini dibangun sebuah website
sekolah yang memiliki fitur pendaftaran siswa baru. Perbedaan yang dimiliki oleh
aplikasi yang akan dibangun adanya fitur print yang digunakan oleh pendaftar
untuk melihat data hasil pendaftaran.

2.2 Dasar Teori

2.2.1 Web
Menurut (Agus Hariyanto, 2015) : “Web dapat diartikan sebagai kumpulan
halaman yang menampilkan informasi data teks, data gambar, data animasi, suara,
video dan gabungan dari semuanya, baik yang bersifat statis maupun dinamis

7
 8

yang membentuk satu rangkaian bangunan yang saling terkait, di mana masing-
masing dihubungkan dengan jaringan-jaringan halaman (hyperlink)”. Website
adalah sebuah kumpulan halaman pada suatu domain di internet yang dibuat
dengan tujuan tertentu dan saling berhubungan serta dapat diakses secara luas
melalui halaman depan (home page) menggunakan sebuah browser menggunakan
URL website[6]. Berdasarkan uraian di atas, penulis menyimpulkan Website
adalah halaman informasi yang disediakan melalui jalur internet sehingga bisa
diakses seluruh dunia selama terkoneksi dengan jaringan internet.
2.2.2 HTML (HyperText Markup Language)
HyperText Markup Language atau yang lebih akrab dikenal HTML adalah
bahasa pemrograman atau komputer yang digunakan untuk membuat suatu
website. “HyperText” mengacu pada Hyperlink yang ada pada page HTML,
sedangkan “Markup Language” melambangkan cara suatu Tags digunakan untuk
mendefinisikan layout atau desain suatu page dan elemen-elemen di dalamnya. Di
bawah ini adalah contoh kecil dari bahasa HTML :
<!doctype html>
<html>
<head>
<title>Contoh.com</title>
</head>
<body>
<p>Contoh Paragraf dalam HTML</p>
</body>
<html>
Format yang benar pada HTML harus mengandung tags<html>, <head>,
<body>
seperti contoh di atas. Komponen Website seperti Page Title, metadata, dan
links diletakkan diantara tags , sedangkan untuk isinya diletakan di antara
tags<body>[7].
 9

2.2.3 PHP (Hypertext Preprocessor)

PHP merupakan bahasa skrip server dan tool yang ampuh untuk membuat
halaman Web yang dinamis dan interaktif. PHP alternatif yang banyak digunakan,
gratis dan efisien untuk pesaing seperti ASP Microsoft.
PHP adalah bahasa pemrograman script server-side yang didesain untuk
pengembangan web dan bersifat open source. PHP di kembangkan pada tahun
1995 oleh Rasmus Lerdorf dan sekarang dikelola oleh The PHP Group. PHP
disebut bahasa pemrograman server side karena PHP diproses pada komputer
server. Hal 10 ini berbeda dibandingkan dengan bahasa pemrograman client-side
seperti JavaScript yang diproses pada web browser (client). Pada awalnya PHP
merupakan singkatan dari Personal Home Page. Sesuai dengan namanya, PHP
digunakan untuk membuat website pribadi. Dalam beberapa tahun
perkembangannya, PHP menjelma menjadi bahasa pemrograman web yang
powerful dan tidak hanya digunakan untuk membuat halaman web sederhana,
tetapi juga website populer yang digunakan oleh jutaan orang seperti wikipedia,
wordpress, joomla, dll. Saat ini PHP adalah singkatan dari PHP: Hypertext
Preprocessor, sebuah kepanjangan rekursif, yakni permainan kata di mana
kepanjangannya terdiri dari singkatan itu sendiri: PHP: Hypertext Preprocessor.
PHP dapat digunakan dengan gratis (free) dan bersifat Open Source. PHP dirilis
dalam lisensi PHP License, sedikit berbeda dengan lisensi GNU General Public
License (GPL) yang biasa digunakan untuk proyek Open Source[7].
2.2.4 XAMPP
XAMPP adalah sebuah paket perangkat lunak (software) komputer yang
sistem penamaannya diambil dari akronim kata Apache, MySQL (dulu) /
MariaDB (sekarang), PHP, dan Perl. Sementara imbuhan huruf “X” yang terdapat
pada awal kata berasal dari istilah cross platform sebagai simbol bahwa aplikasi
ini bisa dijalankan di empat sistem operasi berbeda, seperti OS Linux, OS
Windows, Mac OS, dan juga Solaris. Sejarah mencatat, software XAMPP pertama
kali dikembangkan oleh tim proyek bernama Apache Friends dan sampai saat ini
sudah masuk dalam rilis versi 8.1.2 yang bisa didapatkan secara gratis dengan
label GNU (General Public License). Program aplikasi XAMPP berfungsi sebagai
server lokal untuk mengampu berbagai jenis data website yang sedang dalam
 10

proses pengembangan. Dalam praktiknya, XAMPP bisa digunakan untuk menguji

kinerja fitur ataupun menampilkan konten yang ada di dalam website kepada
orang lain tanpa harus terkoneksi dengan internet, cukup akses melalui Xampp
control panel, atau istilahnya website offline. XAMPP bekerja secara offline
layaknya web hosting biasa namun tidak bisa diakses oleh banyak orang. Maka
dari itu, XAMPP biasanya banyak digunakan oleh para mahasiswa maupun
pelajar untuk melihat hasil desain website sebelum akhirnya dibuat online
menggunakan web hosting yang biasa dijual di pasaran[8].
2.2.5 MySQL[9]
MySQL merupakan software yang tergolong sebagai DBMS (Database
Management System) yang bersifat Open Source”. Open Source menyatakan
bahwa software ini dilengkapi dengan source code (kode yang dibuat untuk
membuat MySQL), selain bentuk executable-nya atau kode yang dapat dijalankan
secara langsung dalam sistem operasi.
Berikut merupakan kelebihan dari MySQL :
1. Portabilitas. MySQL dapat berjalan stabil pada berbagai sistem operasi
seperti Windows, Linux, FreeBSD, Mac Os X Server, Solaris, Amiga,
dan masih banyak lagi.
2. Perangkat lunak sumber terbuka. MySQL didistribusikan sebagai
perangkat lunak sumber terbuka, dibawah lisensi GPL sehingga dapat
digunakan secara gratis.
3. Multi-user. MySQL dapat digunakan oleh beberapa pengguna dalam
waktu yang bersamaan tanpa mengalami masalah atau konflik.
4. Skalabilitas dan Pembatasan. MySQL mampu menangani basis data
dalam skala besar, dengan jumlah rekaman (records) lebih dari 50 juta
dan 60 ribu tabel serta 5 milyar baris. Selain itu batas indeks yang dapat
ditampung mencapai 32 indeks pada tiap tabelnya.
5. Antar Muka. MySQL memiliki antar muka (interface) terhadap berbagai
aplikasi dan bahasa pemrograman dengan menggunakan fungsi API
(Application Programming Interface).
 11

6. Klien dan Peralatan. MySQL dilengkapi dengan berbagai peralatan

(tool) yang dapat digunakan untuk administrasi basis data, dan pada
setiap peralatan yang ada disertakan petunjuk online.
7. Struktur tabel. MySQL memiliki struktur tabel yang lebih fleksibel
dalam menangani ALTER TABLE, dibandingkan basis data lainnya
seperti PostgreSQL ataupun Oracle.
2.2.6 Framework Boostrap
Bootstrap adalah framework open-source khusus front end yang awalnya
dibuat oleh Mark Otto dan Jacob Thornton untuk mempermudah dan
mempercepat pengembangan web di front end. Bootstrap memiliki semua jenis
HTML dan template desain berbasis CSS untuk berbagai fungsi dan komponen,
seperti navigasi, sistem grid, carousel gambar, dan tombol (button).
Framework ini memang menghemat waktu developer karena tidak perlu
mengelola template berkali-kali. Namun, fungsi utama dari Bootstrap adalah
untuk membuat situs yang responsif. Interface website akan bekerja secara
optimal di semua ukuran layar baik di layar smartphone maupun layar
komputer/laptop.
Developer tak perlu lagi mendesain situs khusus untuk perangkat tertentu.
Trafik dan jangkauan audiens versi desktop tidak akan hilang dan tetap diarahkan
ke website versi mobile. User dan komunitas Bootstrap semakin berkembang.
Developer dan designer website bisa bertukar informasi dan juga berdikusi
mengenai patch framework terbaru[10].
2.2.7 Framework Codeigniter[11]
Pengertian Codeigniter adalah sebuah framework yang dibuat dengan
berdasarkan rumus desain atau design pattern dengan model view controller atau
yang juga biasanya dinamakan sebagai MVC.
Design pattern sendiri merupakan sekumpulan penjelasan yang di dalamnya
memuat berbagai macam metode untuk menyelesaikan permasalahan yang umum
yang biasanya ditemukan ketika melakukan proses perancangan sotware atau
perangkat lunak.
Design pattern juga merupakan sebuah petunjuk mengenai langkah-langkah
yang perlu dilakukan untuk menyelesaikan permasalahan tersebut yang berkaitan
 12

dengan software design. Sementara itu, MVC merupakan metode pendekatan

yang berfungsi memisahkan sebuah aplikasi menjadi 3, yakni:
1. Model
Model digunakan untuk mempresentasikan data yang akan digunakan oleh
aplikasi. Contoh data tersebut misalnya seperti database, RSS, maupun
data yang didapatkan melalui sebuah pemanggilan API. Selain itu, model
juga bisa diperoleh melalui sebuah aksi yang melibatkan beberapa tugas
operasi, seperti Update, Create, maupun Delete data.
2. View
View merupakan sebuah tampilan yang akan ditampilkan oleh pengguna
melalui sebuah browser. Tampilan tersebut biasanya akan berbentuk file
HTML maupun juga berbagai kode PHP yang berperan di dalam
penyusunan template untuk sebuah website. Di dalam codeigniter, view
bisa berupa bagian-bagian yang ada di dalam suatu halaman, template,
maupun juga jenis lainnya yang berasal dari halaman maupun template
tersebut.
3. Controller
Controller merupakan sebuah business logic yang berperan sebagai
jembatan antara view dan model. Tugas dari controller yakni merespon
permintaan yang berasal dari HTTP yang berasal dari pengguna ketika
mengetikkan pencarian di browser. Dari request inilah nantinya controller
akan menentukan apa yang seharusnya dilakukan. Jika memang diperlukan,
controller akan melakukan pemanggilan pada model agar supaya dapat
mengolah data.
Selanjutnya, controller akan mulai memanggil view dengan berdasarkan
data yang diinput sehingga bisa menampilkan hasil yang sesuai dengan apa
yang dimaksud. Pada akhirnya, controller tersebut akan mengembalikan
kembali dan memunculkannya di browser sehingga user bisa mendapatkan
apa yang mereka inginkan.
13
 BAB III
PERANCANGAN SISTEM

3.1 Gambaran Umum

Website karate dengan fitur pendaftaran calon anggota baru pada Dojo 86
Kota Pontianak adalah website yang dibuat untuk mempermudah panitia
pendaftaran anggota baru dalam melakukan pengelolaan data pendaftar. Selain itu,
aplikasi ini juga mempermudah masyarakat dalam memperoleh informasi
mengenai Dojo 86 Kota Pontianak dan mempermudah dalam melakukan
pendaftaran secara online.

3.2 Analisis Kebutuhan

Analisis ini bertujuan untuk memperoleh semua kebutuhan sistem website
yang akan digunakan oleh Dojo 86 Kota Pontianak. Adapun analisis kebutuhan
dari website pendaftaran anggota Dojo 86 terdiri dari :
3.2.1 Kebutuhan Perangkat Keras
Beberapa penggunaan perangkat keras yang digunakan dalam kebutuhan
proses pembuatan aplikasi ini, yaitu :
ASUS VivoBook 14 A14DA, dengan spesifikasi sebagai berikut :
1. Procesor AMD Ryzen 3 3200U
2. RAM 8 GB DDR4
3. AMD Radeon Vega Graphic
4. SSD 512 GB
3.2.2 Kebutuhan Perangkat Lunak
Beberapa perangkat lunak yang diperlukan untuk pembuatan aplikasi ini,
yaitu :
1. Visual Studio Code
2. Xampp Version 7.4
3. Framework Codeigniter

13
 14

3.3 Perancangan Proses

Rancang bangun website pendaftaran calon anggota Dojo 86 Kota
Pontianak ini menggunakan diagram Use Case dan Activity Diagram.
3.3.1 Use Case Diagram
Use case diagram merupakan sebuah teknik yang digunakan dalam
pengembangan sebuah software atau sistem informasi untuk menangkap
kebutuhan fungsional dari sistem yang bersangkutan, Use Case menjelaskan
interaksi yang terjadi antara ‘aktor’-inisiator dari interaksi sistem itu sendiri
dengan sistem yang ada, sebuah Use Case direpresentasikan dengan urutan
langkah yang sederhana[12]. Berikut merupakan Use Case Diagram yang
ditunjukkan dengan gambar seperti dibawah ini.

Mengubah profil

Menambahkan
Prestasi

Anggota

Register
<<extend>>

Login

<<include>>
Input Biodata

Daftar Anggota
Pengunju Admin
ng
Input Dokumen
<<include>>

View/Delete user
Terdaftar

View Formulir
Pendaftar

Logout

Gambar 2. Use Case Diagram

 15

1) Admin
Pada website pendaftaran calon anggota Dojo 86, admin merupakan
aktor yang memiliki hak akses untuk mengelola data dan fitur yang ada
pada sistem tersebut. Pertama admin dapat mengelola data user yaitu data
calon anggota yang terdaftar pada website. Kedua, melihat data calon
anggota yang mendaftar dengan mengisikan form yang telah disediakan
pada website untuk menentukan apakah calon anggota lulus atau tidak.
Untuk dapat melakukan itu admin diwajibkan login terlebih dahulu
2) Pengunjung
Pengunjung merupakan aktor yang dapat mengakses halaman
website pengunjung,untuk mendaftar menjadi anggota. Pengunjung wajib
untuk membuat akun terlebih dahulu, dengan melakukan registrasi akun.
Setelah akun terdaftar pengunjung dapat mendaftar menjadi calon anggota
Dojo 86 dengan menginputkan biodata serta memasukkan dokumen yang
diperlukan pada form tersebut.
3) Anggota
Anggota merupakan aktor yang telah lulus menjadi anggota Dojo 86.
Aktor anggota hanya memiliki fitur mengubah profilnya serta
menambahkan prestasi yang diraih dari keberhasilan lomba atau event.
3.3.2 Definisi Aktor
1. Admin
Admin bertugas untuk mengelola data user atau calon anggota yang
melakukan pendaftaran online melalui website. Kemudian admin dapat melihat
formulir pendaftar untuk memverifikasi apakah data yang diinputkan calon
anggota sudah sesuai atau tidak, selanjutnya admin berhak menentukan apakah
calon anggota ini telah lulus administrasi berkas secara online dan ditetapkan
menjadi anggota sementara.
2. Pengunjung
Pengunjung dapat mengakses website seperti beranda, profil, berita, galeri,
prestasi, serta kontak, dan sebelum mendaftar menjadi anggota, dapat melakukan
pendaftaran akun terlebih dahulu selanjutnya calon anggota dapat login dengan
 16

menggunakan akun yang telah dibuat. Kemudian calon anggota dapat

menginputkan biodata serta menginputkan dokumen yang diperlukan seperti ktp
dan pas foto.
3. Anggota
Anggota merupakan hak akses yang diberikan kepada siapapun yang telah
menjadi anggota resmi pada Dojo 86, di dalam hak akses anggota dapat mengubah
profil serta anggota dapat menambahkan prestasi yang pernah diraihnya.

3.3.3 Use Case Scenario

Use Case Scenario merupakan alur jalannya proses dari segi aktor yaitu
admin, pengunjung, dan anggota. Adapun use case scenario pada website
pendaftaran calon anggota Dojo 86 adalah sebagai berikut :
Tabel 3.1 Use Case Scenario Login
No Skenario SK-01
Nama Use Case Login Admin
Ringkasan Admin Dojo masuk ke sistem dengan
menginputkan username dan password
Aktor Admin Dojo 86
Kondisi Awal Website menampilkan form login yang akan
diisi
Deskripsi 1 Admin Dojo 86 mengisi username dan
password
2 Admin mengklik tombol login atau masuk

3 Website mengecek apakah username dan

password benar, maka login berhasil
Website membuka halaman sesuai dengan hak
akses pengguna
4
Alternatif Jika username atau password yang diisikan
tidak terdaftar di basis data atau salah, maka
website tidak akan masuk ke halaman
Dashboard Admin.
Kondisi Akhir Admin Dojo 86 telah berhasil masuk ke website
dan menampilkan halaman sesuai dengan hak
 17

akses pengguna

Tabel 3.2 Use Case Scenario Mengelola Data Admin

No Skenario SK-02
Nama Use Case Mengelola Data Admin
Ringkasan Admin melihat data admin Dojo 86
Aktor Admin
Kondisi Awal Sistem menampilkan halaman data admin
Deskripsi 1 Admin menekan tombol data admin untuk
melihat data akun admin.
2 Admin menekan tombol tombol add untuk
menambahkan data admin.
Admin menekan tombol delete untuk
3 menghapus data admin.
4 Admin menekan tombol edit untuk mengubah
data admin.
Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman data
admin

Tabel 3.3 Use Case Scenario Mengelola Data Profil Dojo

No Skenario SK-03
Nama Use Case Mengelola Data Profil Dojo
Ringkasan Admin melihat data profil Dojo 86
Aktor Admin
Kondisi Awal Sistem menampilkan halaman data Profil
Dojo
Deskripsi 1 Admin menekan tombol profil Dojo untuk
melihat data Profil Dojo 86.
2 Admin menekan tombol tombol Update untuk
mengubah data Profil Dojo 86.
 18

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman data
Profil Dojo 86

Tabel 3.4 Use Case Scenario Mengelola Data Berita

No Skenario SK-04
Nama Use Case Mengelola Data Berita
Ringkasan Admin melihat data berita
Aktor Admin
Kondisi Awal Sistem menampilkan halaman data berita
Deskripsi 1 Admin menekan tombol berita untuk
melihat data berita.
2 Admin menekan tombol tombol add untuk
menambahkan data berita.
Admin menekan tombol delete untuk
3 menghapus data berita.
Admin menekan tombol edit untuk mengubah
4 data berita.

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman data
berita

Tabel 3.5 Use Case Scenario Mengelola Data Galeri

No Skenario SK-05
Nama Use Case Mengelola Data Galeri
Ringkasan Admin mengelola data galeri
Aktor Admin
Kondisi Awal Sistem menampilkan data galeri

Deskripsi 1 Admin menekan tombol add untuk

menambahkan galeri
2 Admin menekan tombol edit untuk mengubah
data galeri
Admin menekan tombol delete untuk
 19

menghapus data galeri

3
Admin menekan tombol tambah foto untuk
4 menambahkan data-data di dalam galeri

Alternatif -
Kondisi Akhir Sistem akan menampilkan data galeri

Tabel 3.6 Use Case Scenario Jadwal Latihan

No Skenario SK-06
Nama Use Case Mengelola Data Jadwal Latihan
Ringkasan Admin melihat data jadwal latihan
Aktor Admin
Kondisi Awal Sistem menampilkan halaman data jadwal
latihan
Deskripsi 1 Admin menekan tombol jadwal latihan
untuk melihat jadwal latihan.
2 Admin menekan tombol tombol update untuk
mengubah data jadwal latihan.

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman data
jadwal latihan.

Tabel 3.7 Use Case Scenario Tingkatan Sabuk

No Skenario SK-07
Nama Use Case Mengelola Data Tingkatan Sabuk
Ringkasan Admin melihat data tingkatan sabuk
Aktor Admin
Kondisi Awal Sistem menampilkan halaman tingkatan
 20

sabuk
Deskripsi 1 Admin menekan tombol tingkatan sabuk
untuk melihat data.
2 Admin menekan tombol tombol add untuk
menambahkan data tingkatan sabuk
3 Admin menekan tombol delete untuk
menghapus data tingkatan sabuk.
4 Admin menekan tombol edit untuk mengubah
data tingkatan sabuk.
Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman data
tingkatan sabuk

Tabel 3.8 Use Case Scenario Anggota

No Skenario SK-08
Nama Use Case Mengelola Data Anggota
Ringkasan Admin melihat data anggota
Aktor Admin
Kondisi Awal Sistem menampilkan halaman anggota
Deskripsi 1 Admin menekan tombol anggota untuk
melihat data anggota
2 Admin menekan tombol “ubah tingkat sabuk”
untuk mengubah tingkatan sabuk.

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman data
anggota

Tabel 3.9 Use Case Scenario Screening

No Skenario SK-09
Nama Use Case Mengelola Data Screening
Ringkasan Admin melihat data screening
 21

Aktor Admin
Kondisi Awal Sistem menampilkan halaman screening

Deskripsi 1 Admin menekan tombol screening untuk

melihat data.
2 Admin menekan tombol “tambah” untuk
menambahkan data screening anggota.
3 Admin menekan tombol “verifikasi” untuk
memverifikasi status anggota

4 Admin menekan tombol “buat akun” untuk

membuat akun anggota
Admin menekan tombol “delete” untuk
5
menghapus data screening anggota
Admin menekan tombol “reset” untuk
6
melakukan reset password akun anggota
Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman data
screening

Tabel 3.10 Use Case Scenario Beranda

No Skenario SK-10
Nama Use Case Beranda
Ringkasan Pengunjung mengakses beranda website

Aktor Pengunjung
Kondisi Awal Sistem menampilkan halaman beranda
Deskripsi 1 Pengunjung ketika pertama kali mengakses
website maka akan menampilkan halaman
beranda.

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman beranda

Tabel 3.11 Use Case Scenario Berita Pengunjung

No Skenario SK-11
 22

Nama Use Case Berita

Ringkasan Pengunjung mengakses berita
Aktor Pengunjung
Kondisi Awal Sistem menampilkan halaman beranda
Deskripsi 1 Pengunjung menekan tombol berita untuk
melihat berita.
2 Pengunjung menekan tombol “lihat
selengkapnya” untuk melihat detail dari
berita yang dipilih

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman berita

Tabel 3.12 Use Case Scenario Galeri Pengunjung

No Skenario SK-12
Nama Use Case Galeri
Ringkasan Pengunjung mengakses galeri
Aktor Pengunjung
Kondisi Awal Sistem menampilkan halaman galeri
Deskripsi 1 Pengunjung menekan tombol galeri untuk
melihat galeri.
2 Pengunjung menekan tulisan pada judul
galeri untuk melihat detail dari galeri
tersebut.

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman galeri
Tabel 3.13 Use Case Scenario Jadwal Latihan
No Skenario SK-13
Nama Use Case Jadwal Latihan
Ringkasan Pengunjung mengakses halaman Jadwal
Latihan
 23

Aktor Pengunjung
Kondisi Awal Sistem menampilkan halaman jadwal latihan
Deskripsi 1 Pengunjung menekan tombol jadwal latihan
untuk melihat jadwal latihan Dojo 86.

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman jadwal
latihan

Tabel 3.14 Use Case Scenario Anggota

No Skenario SK-14
Nama Use Case Anggota
Ringkasan Pengunjung mengakses halaman anggota
Aktor Pengunjung
Kondisi Awal Sistem menampilkan halaman anggota
Deskripsi 1 Pengunjung menekan tombol anggota untuk
melihat data atau informasi anggota Dojo
86.

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman anggota

Tabel 3.15 Use Case Scenario Kontak

No Skenario SK-15
Nama Use Case Kontak Kami
Ringkasan Pengunjung mengakses halaman Kontak
Kami
Aktor Pengunjung
Kondisi Awal Sistem menampilkan halaman kontak kami
Deskripsi 1 Pengunjung menekan tombol kontak kami
untuk melihat informasi kontak yang bisa
dihubungi dan lokasi dari Dojo 86
 24

2 Pengunjung menekan tombol “masukan &

kritik” untuk memberikan masukan yang
bersifat membangun bagi Dojo 86

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman kontak
kami

Tabel 3.16 Use Case Scenario Login Anggota

No Skenario SK-16
Nama Use Case Login Anggota
Ringkasan Anggota masuk ke sistem dengan menginputkan
username dan password
Aktor Anggota
Kondisi Awal Website menampilkan form login yang akan
diisi
Deskripsi 1 Anggota mengisi username dan password
Admin mengklik tombol login atau masuk
2 Website mengecek apakah username dan

3 password benar, maka login berhasil

Website membuka halaman sesuai dengan hak
akses pengguna

Alternatif Jika username atau password yang diisikan

tidak terdaftar di basis data atau salah, maka
website tidak akan masuk ke halaman
Dashboard Anggota
Kondisi Akhir Anggota Dojo 86 telah berhasil masuk ke
website dan menampilkan halaman sesuai
dengan hak akses pengguna

Tabel 3.17 Use Case Scenario Register Akun Anggota

No Skenario SK-17
 25

Nama Use Case Registrasi Anggota

Ringkasan Calon anggota melakukan registrasi akun untuk
dapat masuk ke dalam halaman anggota
Aktor Anggota
Kondisi Awal Website menampilkan form registrasi yang akan
diisi
Deskripsi 1 Anggota mengisi form Registrasi
2 Anggota mengklik tombol Registrasi untuk
mendaftar

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman
registrasi anggota.

Tabel 3.18 Use Case Scenario Edit Profil

No Skenario SK-18
Nama Use Case Edit Profil
Ringkasan Anggota melakukan Edit atau mengubah data
profilnya
Aktor Anggota
Kondisi Awal Sistem menampilkan halaman edit profil

Deskripsi 1 Anggota menekan tombol “Edit Profil” untuk

melihat edit Profil
2 Anggota menekan tombol “Update” untuk
mengubah data profil anggota tersebut.

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman edit profil.

Tabel 3.19 Use Case Scenario Prestasi Anggota

No Skenario SK-19
Nama Use Case Prestasi Anggota
Ringkasan Anggota mengakses halaman prestasi
 26

anggota
Aktor Anggota
Kondisi Awal Sistem menampilkan halaman prestasi
anggota
Deskripsi 1 Anggota menekan tombol “Prestasi” untuk
melihat Prestasi Anggota
2 Anggota menekan tombol “tambah” untuk
menambahkan data prestasi anggota
tersebut.
Anggota menekan tombol “Edit” untuk
3 mengubah prestasi anggota.
Anggota menekan tombol “hapus” untuk
menghapus data prestasi anggota tersebut.
Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman prestasi

3.3.4 Diagram Navigasi

Diagram Navigasi pada website ini dapat dilihat pada gambar
dibawah ini :

Beranda Profil Berita Anggota Prestasi Event Login

Login Daftar

Gambar 3. Diagram Navigasi

Seperti yang terlihat pada Gambar 3, navigasi pada website karate dengan
fitur pendaftaran calon anggota terdiri dari halaman beranda, profil, berita,
 27

anggota, prestasi, event, dan login. Sedangkan di dalam menu login terdapat
submenu login dan daftar akun.

3.3.5 Activity Diagram

Activity Diagram merupakan rancangan aliran aktivitas atau aliran kerja
dalam sebuah sistem yang akan dijalankan. Activity Diagram juga digunakan
untuk mendefinisikan atau mengelompokan aluran tampilan dari sistem tersebut.
Berikut merupakan hasil pemodelan activity diagram untuk aplikasi yang
dirancang, sebagai berikut:
1) Activity Diagram Pendaftaran
Aktivitas ini dilakukan oleh calon anggota / pendaftar untuk
mendaftar sebagai anggota karate pada Dojo 86 Kota Pontianak melalui
website. Berikut merupakan gambarnya
 28

Gambar 4. Activity Diagram Pendaftaran

3.4 Rancangan Database

Database merupakan sekumpulan data yang saling berhubungan dan
memiliki berbagai macam tipe maupun format yang bertujuan untuk memenuhi
kebutuhan pemakai. Adapun rancangan database untuk aplikasi pendaftaran calon
anggota Dojo 86 Kota Pontianak berbasis website ini adalah sebagai berikut:
 29

3.4.1 Relasi Tabel

Gambar 5. Relasi Tabel

Pada gambar diatas merupakan relasi tabel yang digunakan dalam website
pendaftaran calon anggota Dojo 86, yang dimana tbl_registrasi berelasi dengan
tbl_prestasi dengan ketentuan one to many yang berarti 1 anggota dapat
memberikan lebih dari 1 prestasi. Kemudian relasi antara tbl_registrasi dengan
tbl_screening yaitu many to many yang berarti banyaknya calon anggota dapat
melakukan screening. Berikutnya relasi antara tbl_screening dengan tbl_sabuk
yaitu 1 to many. Terakhir relasi antara tbl_galeri dengan tbl_foto yaitu 1 to many
yang berarti 1 galeri terdiri dari banyak foto.
3.4.2 Struktur Tabel
Adapun struktur tabel – tabel yang digunakan pada database dari website
adalah sebagai berikut :
1. Tbl_admin (Tabel Admin)
Tabel 3.20. struktur tabel admin
Nama Field Tipe Data
Id_admin(primary) int(11)
 30

nama_user varchar(50)
username varchar(50)
password varchar(50)

2. Tbl_berita (Tabel Berita)

Tabel 3.21. struktur tabel berita
Nama Field Tipe Data
Id_berita(primary) int(11)
judul_berita varchar(150)
slug_berita varchar(255)
isi_berita text
tgl_berita date
gambar_berita Varchar(100)

3. Tbl_foto (Tabel Foto)

Tabel 3.22. Struktur Tabel Foto
Nama Field Tipe Data
Id_foto(primary) int(11)
Id_galeri Int(11)
Ket_foto varchar(50)
foto Varchar(100)

4. Tbl_galeri (Tabel Galeri)

Tabel 3.23. Struktur Tabel Galeri
Nama Field Tipe Data
Id_galeri(primary) int(11)
Nama_galeri varchar(100)
 31

sampul varchar(100)

5. Tbl_jadwal (tbl_jadwal)
Tabel 3.24. Struktur Tabel Jadwal
Nama Field Tipe Data
Id_jadwal(primary) int(11)
hari varchar(100)
waktu varchar(100)
dresscode Varchar(100)

6. Tbl_prestasi (Tabel Prestasi)

Tabel 3.25. Struktur Tabel Prestasi
Nama Field Tipe Data
Id_prestasi(primary) int(11)
Id_registrasi int(11)
Jenis_prestasi varchar(50)
Tahun_prestasi Varchar(10)
Tingkat_prestasi Varchar(50)
Status_prestasi Int(1)

7. Tbl_profil (Tabel Profil)

Tabel 3.26. Struktur Tabel Profil
Nama Field Tipe Data
Id_profil(primary) int(11)
Sumpah_karateka varchar(200)
visi varchar(200)
misi text
8. Tbl_registrasi (Tabel Registrasi)
Tabel 3.27. Struktur Tabel Registrasi
Nama Field Tipe Data
 32

Id_registrasi(primary) int(11)
Tgl_registrasi date
Nama_lengkap varchar(100)
Nama_panggilan Varchar(50)
nik Varchar(16)
ttl Varchar(100)
Jenis_kelamin Varchar(5)
agama Varchar(50)
No_hp Varchar(15)
alamat Varchar(100)
Alasan_bergabung Varchar(150)
Pas_photo Varchar(100)
status Int(1)

9. Tbl_sabuk (Tabel Sabuk)

Tabel 3.28. Struktur Tabel Sabuk

Nama Field Tipe Data
Id_sabuk(primary) int(11)
Tingkatan_sabuk varchar(50)

10. Tbl_saran (Tabel Saran)

Tabel 3.29. Struktur Tabel Saran

Nama Field Tipe Data
Id_saran(primary) int(11)
nama varchar(50)
email varchar(100)
subjek Varchar(100)
Isi_pesan text
 33

11. Tbl_screening (Tabel Screening)

Tabel 3.30. Struktur Tabel Screening

Nama Field Tipe Data
Id_screening(primary) int(11)
Id_registrasi int(50)
Status_screening Int(1)
username Varchar(50)
password Varchar(50)
Id_sabuk Int(11)

3.5 Rancangan User Interface (Antarmuka)

Rancangan Antarmuka atau yang lebih dikenal sebagai interface adalah
sebuah penghubung secara langsung perangkat lunak dengan pengguna. Sebelum
merancang sebuah website maka untuk terlebih dahulu merancang antar muka
sebuah form pada website untuk memudahkan perancangan. Berikut ini penjelasan
struktur Aplikasi Pendaftaran Calon Anggota Dojo 86 Kota Pontianak Berbasis
Web.
3.5.1 Tampilan Rancangan Halaman Beranda
Halaman beranda adalah tampilan yang muncul saat mengakses alamat
website online Dojo 86 Kota Pontianak. Halaman ini memiliki tujuh buah menu
yaitu beranda, profil, berita, anggota, prestasi, event dan login. Halaman beranda
berisi slider, serta berisi informasi mengenai sejarah Dojo 86 Kota Pontianak.
 34

Gambar 6. Halaman Beranda

3.5.2 Tampilan Rancangan Halaman Profil

Halaman profil memuat informasi mengenai Dojo 86, Visi dan Misi, serta
Struktur Organisasi dari Dojo tersebut, seperti gambar dibawah ini.
 35

Gambar 7. Halaman Profil

3.5.3 Tampilan Rancangan Halaman Berita

Halaman berita menampilkan berita terkini mengenai Dojo 86 seperti berita
perlombaan, berita penggalangan dana, serta berita lainnya yang terkait dengan
Dojo. Berikut merupakan gambar dari mockup tersebut
 36

Gambar 8. Halaman Berita

3.5.4 Tampilan Rancangan Halaman Anggota
 37

Gambar 9. Halaman Anggota

Halaman anggota merupakan halaman yang menampilkan data anggota aktif
Dojo 86 Kota Pontianak. Rancang halaman anggota bisa dilihat pada gambar
dibawah ini.
3.5.5 Tampilan Rancangan Halaman Prestasi
Halaman prestasi merupakan halaman yang menampilkan prestasi dari
anggota yang telah memenangkan berbagai macam perlombaan. Seperti gambar
dibawah ini

Gambar 10. Halaman Prestasi

 38

3.5.6 Tampilan Rancangan Halaman Kegiatan

Halaman Kegiatan merupakan halaman yang memuat informasi mengenai
kegiatan yang diselenggarakan seperti gambar di bawah ini

Gambar 11. Halaman Kegiatan

3.5.7 Tampilan Rancangan Halaman Masuk

Halaman login berfungsi sebagai halaman awal calon anggota sebelum
melakukan pendaftaran menjadi anggota karate Dojo 86 Kota Pontianak. Berikut
merupakan halaman login seperti gambar dibawah ini.
 39

Gambar 12. Halaman Login

3.5.8 Tampilan Rancangan Halaman Daftar

Halaman Daftar merupakan halaman yang dimana calon anggota ketika
ingin melakukan pendaftaran harus membuat akun terlebih dahulu seperti gambar
di bawah ini
 40

Gambar 13. Halaman Pendaftaran

 BAB IV
HASIL DAN PEMBAHASAN

4.1 Implementasi Tampilan

Setelah melakukan perancangan dan pembuatan aplikasi, maka selanjutnya
masuk ke tahapan implementasi tampilan. Website pendaftaran calon anggota
Dojo 86 Kota Pontianak ini memiliki tampilan interface sebagai berikut:
4.1.1 Tampilan Halaman Beranda
Merupakan halaman pertama kali diakses oleh pengguna. Pada halaman ini
menampilkan carausel atau slider foto yang dijadikan sebagai foto utama.
Selanjutnya terdapat sumpah karateka, serta visi misi dari Dojo 86 yang tertuang
di website ini. Dan terakhir yaitu terdapat beberapa berita terbaru yang
ditampilkan di halaman beranda. Berikut merupakan tampilan halaman beranda di

bawah ini

40
 41

Gambar 14. Tampilan Halaman Beranda

4.1.2 Tampilan Halaman Berita
Tampilan halaman berita menampilkan berita seputar informasi mengenai
Dojo 86 Kota Pontianak. Adapun tampilan halaman berita sebagai berikut :

Gambar 15. Tampilan Halaman Berita

4.1.3 Tampilan Halaman Detail Berita
Tampilan halaman detail berita merupakan tampilan yang memuat informasi
detail dari berita yang dipilih oleh pengguna. Adapun tampilan halaman detail
berita seperti gambar di bawah ini.

Gambar 16. Tampilan Halaman Detail Berita

 42

4.1.4 Tampilan Halaman Galeri

Tampilan halaman galeri merupakan tampilan yang memuat informasi galeri
seputar Dojo 86 Kota Pontianak, seperti perlombaan, galeri latihan dan ceremony
kenaikan sabuk. Adapun tampilan halaman galeri seperti gambar di bawah ini.

Gambar 17. Tampilan Halaman Galeri

4.1.5 Tampilan Halaman Detail Galeri

Tampilan halaman detail galeri merupakan tampilan yang memuat informasi
detail dari galeri yang dipilih oleh pengguna. Adapun tampilan halaman detail
berita seperti gambar 18 di bawah ini.

Gambar 18. Tampilan Halaman Detail Galeri

4.1.6 Tampilan Halaman Jadwal Latihan

 43

Tampilan halaman jadwal latihan merupakan tampilan yang memuat

informasi jadwal latihan Dojo 86 meliputi hari, jam, dan dresscode yang
digunakan untuk latihan. Adapun tampilan halaman jadwal latihan seperti gambar
di bawah ini.

Gambar 19 Tampilan Halaman Jadwal Latihan

4.1.7 Tampilan Halaman Anggota

Tampilan halaman anggota merupakan tampilan yang memuat informasi
sekilas anggota Dojo 86 Kota Pontianak. Adapun tampilan halaman anggota
sebagai berikut.

Gambar 20 Tampilan Halaman Anggota

4.1.8 Tampilan Halaman Kontak Kami

 44

Tampilan halaman kontak kami merupakan tampilan yang memuat informasi

kontak Dojo 86 yaitu nomor telpon, email yang bisa dihubungi, dan lokasi tempat

Dojo 86 berada serta terdapat Google Maps yang menampilkan map untuk
mempermudah pengunjung mengetahui lokasi atau tempat Dojo 86 berada.
Terakhir yaitu tedapat form saran dan masukan yang berfungsi sebagai evaluasi
dari website Dojo 86 Kota Pontianak, pelayanan Dojo 86 dan lain sebagainya.
Adapun tampilan halaman kontak kami sebagai berikut.
Gambar 21. Tampilan Halaman Kontak Kami

4.1.9 Tampilan Halaman Login Anggota

Tampilan Halaman login anggota berfungsi sebagai akses masuk anggota
Dojo 86 untuk masuk ke dalam dashboard anggota. Pada halaman ini terdapat
sebuah form login yang berfungsi sebagai tempat untuk masuk kedalam halaman
akun pengguna. Masing-masing pengguna akan memasukkan username dan
password yang sudah diberikan oleh admin . Untuk masuk ke halaman berikutnya
pastikan saat login akun pengguna sudah di verifikasi oleh admin. Adapun
halaman login anggota sebagai berikut.
 45

Gambar 22. Tampilan Halaman Login Anggota

4.1.10 Tampilan Halaman Registrasi Anggota
Pada halaman ini terdapat sebuat form Registrasi yang berfungsi sebagai tempat
untuk penginputan data pengguna yang ingin menjadi anggota Dojo 86. Halaman
Registrasi anggota juga memiliki form seperti nama lengkap, nama panggilan,
tempat tanggal lahir, jenis kelamin, agama, no hp, alamat, alasan bergabung, dan
pas photo. Adapun halaman Registrasi anggota sebagai berikut.

Gambar 23. Tampilan Halaman Registrasi anggota

 46

4.1.11 Tampilan Halaman Login Admin

Tampilan halaman login admin berfungsi sebagai akses masuk sebagai admin,
untuk masuk ke halaman login admin pengguna harus memasukkan url link untuk
bisa mengakses halaman tersebut. Fungsinya adalah untuk menyembunyikan
halaman agar tidak diketahui pengguna atau pengunjung selain admin itu sendiri.
Adapun halaman login admin sebagai berikut.

Gambar 24. Tampilan Halaman Login Admin

4.1.12 Tampilan Halaman Dashboard Admin

Setelah admin melakukan login dan berhasil, maka akan diarahkan ke
halaman dashboard seperti gambar 4.12 di bawah ini.

Gambar 25. Tampilan Halaman Dashboard Admin

 47

4.1.13 Tampilan Halaman Kelola Admin

Halaman ini merupakan tampilan halaman kelola admin, yang dimana admin
dapat menambahkan, mengubah, menghapus akun admin lainnya. Adapun
tampilan halaman kelola admin seperti gambar 26. di bawah ini.

Gambar 26. Tampilan Halaman Kelola Admin

4.1.14 Tampilan Halaman Kelola Profil

Pada halaman ini admin dapat melakukan perubahan terhadap profil Dojo 86
meliputi sumpah karateka, visi dan misi dari Dojo 86 Kota Pontianak. Adapun
tampilan halaman kelola profil sebagai berikut.

Gambar 27. Tampilan Halaman Kelola Profil

 48

4.1.15 Tampilan Halaman Kelola Berita

Pada halaman kelola berita, admin dapat melakukan publish berita,
melakukan perubahan terhadap berita, serta dapat menghapus berita. Adapun
tampilan halaman kelola berita seperti gambar 28. di bawah ini.

Gambar 28. Tampilan Halaman Kelola Berita

4.1.16 Tampilan Halaman Kelola Galeri

Pada tampilan halaman kelola galeri, admin dapat menambahkan, mengubah
serta menghapus galeri. Adapun tampilan halaman galeri seperti di bawah ini.

Gambar 29. Tampilan Halaman Kelola Galeri

 49

4.1.17 Tampilan Halaman Kelola Tambah Galeri

Setelah admin menambahkan galeri seperti point 4.1.16, maka gambar galeri yang
ditambahkan otomatis menjadi thumbnail atau sampul gambar, yang dimana jika
diklik admin dapat memasukkan foto galeri lebih dari 1 seperti gambar di bawah
ini.

Gambar 30. Tampilan Halaman Kelola Tambah Galeri

4.1.18 Tampilan Halaman Kelola Jadwal Latihan

Pada halaman ini admin dapat melakukan perubahan terhadap jadwal latihan
Dojo 86 meliputi hari latihan, waktu latihan, serta dresscode dari Dojo 86 Kota
Pontianak. Adapun tampilan halaman kelola jadwal latihan sebagai berikut.

Gambar 31. Tampilan Halaman Kelola Jadwal Latihan

4.1.19 Tampilan Halaman Kelola Tingkatan Sabuk

 50

Pada halaman tingkatan sabuk, admin dapat menambahkan, mengubah serta

menghapus tingkatan sabuk. Adapun tampilan kelola tingkatan sabuk sebagai
berikut.

Gambar 32. Tampilan Halaman Kelola Tingkatan Sabuk

4.1.20 Tampilan Halaman Kelola Anggota

Pada halaman anggota, admin dapat mengubah tingkatan sabuk yang
dimiliki oleh anggota ketika anggota telah mampu mencapai tingkatan tersebut.
Pada halaman ini admin hanya bisa melihat data anggota dan mengubah tingkatan
sabuk. Adapun tampilan kelola anggota sebagai berikut.

Gambar 33. Tampilan Halaman Kelola Anggota

 51

4.1.21 Tampilan Halaman Kelola Screening

Pada tampilan ini admin melakukan proses screening yaitu menyaring calon
anggota Dojo 86, ketika anggota pertama kali melakukan registrasi data maka data

tersebut akan masuk ke dalam proses screening, ketika calon anggota tersebut
layak menjadi anggota Dojo 86 maka admin dapat memverifikasi bahwa calon
anggota lulus menjadi anggota Dojo 86 serta membuat akun untuk anggota
tersebut, sebaliknya jika calon anggota Dojo 86 tidak lulus maka tidak dapat
mengakses halaman dashboard anggota. Adapun tampilan halaman kelola
screening sebagai berikut.
Gambar 34. Tampilan Halaman Kelola Screening

4.1.22 Tampilan Halaman Kelola Prestasi

Pada halaman ini admin dapat memverifikasi prestasi yang telah diinputkan
oleh anggota, fungsinya adalah untuk mengetahui apakah data tersebut benar, jika
benar maka data prestasi anggota tersebut akan ditampilkan, jika salah maka data
tersebut tidak ditampilkan. Adapun tampilan halaman kelola prestasi sebagai
berikut.
 52

Gambar 35. Tampilan Halaman Kelola Prestasi

4.1.23 Tampilan Halaman Saran

Pada halaman ini admin hanya bisa melihat saran serta masukan dari
pengunjung, adapun tampilan halaman saran sebagai berikut.

Gambar 36. Tampilan Halaman Saran

4.1.24 Tampilan Halaman Dashboard Anggota

Pada halaman ini merupakan tampilan halaman dashboard anggota setelah
dinyatakan lulus dari proses screening. Adapun tampilan halaman dashboard
anggota sebagai berikut.
 53

Gambar 37. Tampilan Halaman Dashboard Anggota

4.1.25 Tampilan Halaman Profil Anggota

Pada halaman profil anggota, anggota dapat melakukan perubahan terhadap
biodata seperti nama, tempat lahir, foto profil, dan lain sebagainya. Adapun
tampilan halaman profil anggota seperti gambar 38 di bawah ini.

Gambar 38. Tampilan Halaman Profil Anggota

4.1.26 Tampilan Halaman Prestasi Anggota

Halaman ini merupakan halaman prestasi anggota, dimana anggota dapat
memasukkan prestasi yang pernah diraihnya selama membawa nama Dojo 86 Kota
Pontianak, setelah anggota memasukkan prestasi tersebut, maka datanya akan
diverifikasi admin untuk dilakukan pengecekan apakah data prestasi tersebut benar
atau tidak. Adapun gambar halaman prestasi sebagai berikut.
 54

Gambar 39. Tampilan Halaman Prestasi Anggota

4.2 Pengujian Sistem

Pengujian sistem dilakukan dengan membandingkan fungsi – fungsi atau
fasilitas yang dapat dilakukan atau keluaran yang dapat dihasilkan oleh sistem,
dibandingkan dengan kebutuhan yang telah ditetapkan. Hasil pengujian dapat
dilihat pada tabel di bawah ini.
Tabel 4.1 Pengujian Metode Blackbox

Hasil Yang Hasil

No Daftar Pengujian Skenario Uji
Diharapkan
B TB
Pengunjung
Menampilkan
Mengklik
1 Beranda Halaman √  
Tombol
Beranda
Beranda

Mengklik Menampilkan
√  
Tombol Berita Halaman Berita

2 Berita (Pengunjung) Mengklik Menampilkan

Tombol "Lihat Halaman Detail √  
Selengkapnya" Berita

Mengklik Menampilkan
√  
Tombol Galeri Halaman Galeri
3 Galeri(Pengunjung)
Mengklik Menampilkan
Tombol Halaman Album √  
"Nama Galeri" Galeri
Mengklik
Menampilkan
Jadwal Latihan Tombol
4 Halaman Jadwal √  
(Pengunjung) "Jadwal
Latihan
Latihan"
Menampilkan
Mengklik
Anggota(Pengunjung Halaman
5 Tombol √  
) Anggota
"Anggota"
(Pengunjung)
Mengklik Menampilkan
6 Kontak Kami √  
Tombol Halaman
 55

"Kontak Kontak Kami

Kami"
Menampilkan
pesan
"Masukan dan
Mengklik Saran sudah
Tombol Kami terima" √  
"Kirim Pesan" serta merefresh
kembali ke
halaman Kontak
Kami

Akun yang di
daftarkan akan
masuk ke
Mengklik
Registrasi Calon halaman admin
7 Tombol √  
Anggota untuk di
"Registrasi"
verifikasi agar
pengguna dapat
login

Login Berhasil
akan diarahkan
Mengklik ke Dashboard
8 Login Anggota Tombol Anggota, jika √  
"Login" gagal kembali
ke halaman
Login

Edit Profil
Anggota
Berhasil,
kemudian
Mengklik sistem
9 Profil Anggota Tombol merefresh √  
"Update" halaman edit
profil dengan
menampilkan
perubahan
terjadi
Data berhasil
ditambahkan,
Mengklik
kemudian
10 Prestasi Anggota Tombol √  
sistem
"Tambah"
merefresh
halaman
 56

Prestasi
Anggota dengan
menampilkan
Data Berhasil
diubah,
kemudian
sistem
merefresh
Mengklik
halaman √  
Tombol "Edit"
Prestasi
Anggota dengan
menampilkan
perubahan
terjadi
Data Berhasil
dihapus,
kemudian
sistem
Mengklik merefresh
Tombol halaman √  
"Delete" prestasi anggota
dengan
menampilkan
perubahan
terjadi

Login Berhasil
akan diarahkan
Mengklik ke Dashboard
11 Login Admin Tombol Anggota, jika √  
"Login" gagal kembali
ke halaman
Login

Data berhasil
ditambahkan,
kemudian
sistem
Mengklik
merefresh
Tombol √  
halaman Kelola
12 Kelola Admin "Tambah"
Admin dengan
menampilkan
perubahan
terjadi
Mengklik Data Berhasil
√  
Tombol "Edit" diubah,
 57

kemudian
sistem
merefresh
halaman Kelola
Data Berhasil
dihapus,
kemudian
sistem
Mengklik
merefresh
Tombol √  
halaman Kelola
"Delete"
Admin dengan
menampilkan
perubahan
terjadi
Data Berhasil
diubah,
kemudian
sistem
Mengklik
merefresh
13 Kelola Profile Tombol √  
halaman Kelola
"Update"
Profil dengan
menampilkan
perubahan
terjadi
Data berhasil
ditambahkan,
kemudian
sistem
Mengklik
merefresh
Tombol √  
halaman Kelola
"Tambah"
Berita dengan
menampilkan
perubahan
terjadi
14 Kelola Berita
Mengklik Data Berhasil √  
Tombol "Edit" diubah,
kemudian
sistem
merefresh
halaman Kelola
Berita dengan
menampilkan
perubahan
terjadi
 58

Data Berhasil
dihapus,
kemudian
sistem
Mengklik
merefresh
Tombol √  
halaman Kelola
"Delete"
Berita dengan
menampilkan
perubahan
terjadi
Data berhasil
ditambahkan,
kemudian
sistem
Mengklik
merefresh
Tombol √  
halaman Kelola
"Tambah"
Galeri dengan
menampilkan
perubahan
terjadi
Data Berhasil
diubah,
kemudian
sistem
Mengklik merefresh
15 Kelola Galeri √  
Tombol "Edit" halaman Kelola
Galeri dengan
menampilkan
perubahan
terjadi
Data Berhasil
dihapus,
kemudian
sistem
Mengklik
merefresh
Tombol √  
halaman Kelola
"Delete"
Galeri dengan
menampilkan
perubahan
terjadi
Data berhasil
diubah,
Mengklik kemudian
Jadwal Latihan
16 Tombol sistem √  
(Admin)
"update" merefresh
halaman Kelola
Jadwal Latihan
 59

dengan
menampilkan
Data berhasil
ditambahkan,
kemudian
sistem
Mengklik merefresh
Tombol halaman √  
"Tambah" Tingkatan
Sabuk dengan
menampilkan
perubahan
terjadi
Data Berhasil
diubah,
kemudian
sistem
merefresh
Mengklik
17 Tingkatan Sabuk halaman √  
Tombol "Edit"
Tingkatan
Sabuk dengan
menampilkan
perubahan
terjadi
Data Berhasil
dihapus,
kemudian
sistem
Mengklik merefresh
Tombol halaman √  
"Delete" Tingkatan
Sabuk dengan
menampilkan
perubahan
terjadi
Data Berhasil
diubah,
kemudian
sistem
Mengklik
merefresh
Tombol "Ubah
18 Anggota(Admin) halaman √  
Tingkatan
Anggota dengan
Sabuk"
menampilkan
perubahan
terjadi
 60

Data berhasil
ditambahkan,
kemudian
sistem
Mengklik merefresh
Tombol halaman √  
"Tambah" Screening
dengan
menampilkan
perubahan
terjadi
Mengklik Data Screening
"Tombol Berhasil
Verifikasi" diverifikasi,
sistem
melakukan √  
refresh dengan
menampilkan
perubahan
terjadi
Data Berhasil
19 Kelola Screening
dihapus,
kemudian
sistem
Mengklik merefresh
Tombol halaman √  
"Delete" Screening
dengan
menampilkan
perubahan
terjadi
Password
Anggota akan
direset menjadi
"123456",
Mengklik kemudian
Tombol sistem akan √  
"Reset" melakukan
refresh dengan
menampilkan
perubahan
terjadi
Data Prestasi
Berhasil
Mengklik
diverifikasi,
20 Prestasi (Admin) Tombol √  
sistem
"Verifikasi"
melakukan
refresh dengan
 61

menampilkan
perubahan
Data Berhasil
dihapus,
kemudian
sistem
Mengklik
merefresh
Tombol √  
halaman
"Delete"
Prestasi dengan
menampilkan
perubahan
terjadi

Keterangan :
B = Berhasil
TB = Tidak Berhasil
Berdasarkan hasil pengujian yang telah dilakukan, kesimpulannya adalah
fungsi-fungsi pada aplikasi ini sudah berhasil dan dapat berjalan dengan baik,
sehinigga secara fungsional sistem sudah dapat menghasilkan output yang
diharapkan.
 BAB V
PENUTUP
5.1 Kesimpulan
Kesimpulan yang dapat diambil dari hasil penelitian tugas akhir website
pendaftaran calon anggota Dojo 86 Kota Pontianak adalah sebagai berikut :
1. Website pendaftaran calon anggota dirancang sebagai media pendaftaran
dan promosi mengenai Dojo 86 Kota Pontianak
2. Menggunakan website ini calon anggota serta masyarakat dapat
mengetahui jadwal latihan Dojo 86 Kota Pontianak
3. Hasil pengujian blackbox menunjukkan bahwa seluruh fungsi telah
berjalan sesuai dengan sistem yang diusulkan.
4. Aplikasi ini dibangun dengan bahasa pemrograman PHP menggunakan
framework Codeigniter

5.2 Saran
Adapun saran – saran yang dapat diberikan penulis untuk pengembangan
dan perbaikan sistem ini selanjutnya adalah sebagai berikut :
1. Dalam pengembangan selanjutnya dapat menambahkan API Whatsapp
Gateway agar calon pengunjung dapat menerima notifikasi langsung yang
dikirimkan oleh admin melalui website.
2. Diharapkan untuk pengembangan selanjutnya dapat membuat desain di
bagian website pengunjung agar lebih menarik.
3. Aplikasi ini dapat dilakukan penelitian lebih lanjut agar dapat mencetak
laporan mengenai jumlah pendaftar yang mendaftar di Dojo 86 Kota
Pontianak berdasarkan tanggal, bulan dan tahun.

62
 DAFTAR PUSTAKA

[1] Nurafni, “MEMBANGUN WEBSITE SEKOLAH DENGAN FITUR

PENDAFTARAN SISWA BARU PADA MADRASAH TSANAWIYAH
(MTS) NEGERI 3 MEMPAWAH,” Politeknik Negeri Pontianak, 2021.
[2] R. G. Rafiansyah, “PERANCANGAN SISTEM INFORMASI DAN
SANKSI SANTRI BERBASIS WEB PADA PONDOK PESANTREN
DARUNNA’IM PONTIANAK,” Politeknik Negeri Pontianak, 2021.
[3] Septian, “Rancang Bangun Aplikasi Pendaftaran Siswa Baru Pada SMA
Negeri 1 Pemangkat Kabupaten Sambas Berbasis Web,” Politeknik Negeri
Pontianak, 2017.
[4] A. Fathurrahman, “RANCANG BANGUN APLIKASI PENDAFTARAN
CALON JAMAAH HAJI BERBASIS WEBSITE PADA KBIH AL
HIDAYAH SURABAYA,” p. 53, 2021.
[5] I. Achmad Sidik, Nunung Nurmaesah, “SISTEM INFORMASI
PENDAFTARAN SISWA BARU BERBASIS WEB PADA SMA
YISLAH,” Indones. J. Softw. Eng., vol. 5, no. 1, pp. 123–133, 2019, doi:
10.31294/ijse.v5i1.6549.
[6] T. Wulandari, “Pendahuluan (Definisi Website),” 2018.
[7] S. Priyanto and H. K. Siradjuddin, “Sistem Informasi Pendaftaran
Mahasiswa Baru Berbasis Web Pada Politeknik Sains & Teknologi
Wiratama Maluku Utara,” IJIS - Indones. J. Inf. Syst., vol. 3, no. 1, 2018,
doi: 10.36549/ijis.v3i1.38.
[8] S. Sarwindah, “Sistem Pendaftaran Siswa Baru Pada SMP N 1 Kelapa
Berbasis Web Menggunakan Model UML,” J. Sisfokom (Sistem Inf. dan
Komputer), vol. 7, no. 2, pp. 110–115, 2018, doi:
10.32736/sisfokom.v7i2.573.
[9] D. Guzmaliza, “perangkat lunak bantu administrasi keuangan sekolah
tinggi teknologi pagar alam dengan PHP dan MySQL,” J. Ilm. Betrik, vol.
10, no. 01, pp. 28–37, 2019, doi: 10.36050/betrik.v10i01.24.
[10] Ariata, “Apa Itu Bootstrap dan Fungsinya? Panduan Bagi Pemula,”
www.hostinger.co.id, 2021. https://www.hostinger.co.id/tutorial/apa-itu-

63
 64

bootstrap (accessed Mar. 13, 2021).

[11] M. Zakaria, “Pengertian CodeIgniter Beserta Kegunaan, Kelebihan, serta
Kekurangannya,” www.nesabamedia.com, 2020.
https://www.nesabamedia.com/pengertian-codeigniter/ (accessed Mar. 13,
2022).