Anda di halaman 1dari 128

INSTITUT TEKNOLOGI INDONESIA

RANCANG BANGUN PLATFORM PEMBELAJARAN CYBERSECURITY


DENGAN METODE GAMIFIKASI CAPTURE THE FLAG (CTF) JEOPARDY
STYLE BERBASIS WEB.

TUGAS AKHIR

Revanza Zakly Juliansyah


1151900025

PROGRAM STUDI TEKNIK INFORMATIKA


INSTITUT TEKNOLOGI INDONESIA
2023
INSTITUT TEKNOLOGI INDONESIA

RANCANG BANGUN PLATFORM PEMBELAJARAN CYBERSECURITY


DENGAN METODE GAMIFIKASI CAPTURE THE FLAG (CTF) JEOPARDY
STYLE BERBASIS WEB.

TUGAS AKHIR
Diajukan sebagai salah satu syarat untuk memperoleh gelar Sarjana (S1).

Revanza Zakly Juliansyah


1151900025

PROGRAM STUDI TEKNIK INFORMATIKA


INSTITUT TEKNOLOGI INDONESIA
2023
HALAMAN PERNYATAAN ORISINALITAS

Skripsi ini adalah hasil karya saya sendiri,

dan semua sumber baik yang dikutip maupun dirujuk

telah saya nyatakan dengan benar

Nama : Revanza Zakly Juliansyah

Nim : 1151900025

Tanda Tangan :

Tanggal : 13/03/2024

i Teknik Informatika-ITI
ii Teknik Informatika-ITI
KATA PENGANTAR

Puji syukur atas kehadirat Allah SWT. yang telah memberikan rahmat serta
hidayah-Nya, sehingga penulis masih diberikan kesempatan untuk menyelesaikan
laporan Tugas Akhir ini. Penulis mengucapkan terimakasih yang sebesar-besarnya
kepada semua pihak yang telah memberikan dukungan, bimbingan, dan saran dalam
menyelesaikan laporan Tugas Akhir ini. Pada kesempatan ini penulis ingin
mengucapkan terimakasih khususnya kepada :

1. Bapak Muhammad Soleh, S.Si, M.Kom Selaku Ketua Program Studi Teknik
Informatika.
2. Ibu Dra. Sulistyowati, M.Kom, Selaku Dosen Pembimbing Akademik, yang selalu
membimbing dari awal perkuliahan hingga sampai saat ini.
3. Bapak Suryo Bramasto, M.Kom, Selaku Dosen Pembimbing yang membantu
dalam kelancaran proses Tugas Akhir ini.
4. Bapak Iwan Sahroni selaku ayah yang hebat dan Ibu Dwi Kurnia Apriani Selaku
Ibu yang hebat yang sangat penulis sayangi, yang selalu memberikan do’a, serta
semangat, kalau bukan karena nya saya tidak akan bisa seperti ini semoga kelak
saya bisa menjadi orang hebat dan membanggakan beliau.
5. Revianza Abiyan Selaku adik kandung saya yang sangat saya sayangi dan menjadi
motivasi serta semangat saya untuk menjadi seorang kakak dan contoh yang baik.
6. Guru dan Siswa SMK Angkasa 2 dan SMP Voctech yang selalu memberikan saya
semangat serta doa semoga tuhan membalas kebaikan mereka.
7. Ade Surya Dinata, Setiadjie Bhaskara dan Bagas Wahyu Kusuma, dan teman-teman
SMKN 6 Tangsel yang memberikan saya semangat dan dorongan untuk sukses
Bersama.
8. Teman-teman seperjuangan yang ada di Angkatan 2019 baik yang masih berjuang
Bersama sampai saat ini dan yang sudah keluar semoga suatu saat kita bisa menjadi
orang sukses dan orang hebat saat kita bertemu nanti.
9. Diri sendiri Revanza Zakly Juliansyah yang telah berjuang melawan rasa malas
semoga suatu saat bisa menjadi orang yang sukses dan bisa menjadi orang yang
berguna bagi masyarakat dan bangsa Indonesia.

iii Teknik Informatika-ITI


Penulis menyadari bahwa dalam penulisan laporan Tugas Akhir ini masih jauh dari
kata sempurna dan memiliki banyak kekurangan. Oleh karena itu, saran dan kritik yang
membangun dari para pembaca sangat dibutuhkan oleh penulis. Akhir kata, penulis
sangat berharap bahwa laporan Tugas Akhir ini akan berguna terutama dalam
menunjang kemajuan Program Studi Informatika Institut Teknologi Indonesia serta
untuk masyarakat dan bangsa Indonesia.

Tangerang Selatan, 1 Februari 2024

Revanza Zakly Juliansyah

iv Teknik Informatika-ITI
HALAMAN PERNYATAAN PERSETUJUAN PUBLIKASI

TUGAS AKHIR / SKRIPSI UNTUK KEPENTINGAN AKADEMIS

Sebagai sivitas akademika Institut Teknologi Indonesia, saya yang bertanda tangan di
bawah ini:

Nama : Revanza Zakly Juliansyah

NPM : 1151900025
Program Studi : Teknik Informatika

Jenis Karya : Tugas

Akhir/Skripsi

demi pengembagan ilmu pengetahuan, menyetujui untuk memberikan kepada Institut


Teknologi Indonesia Hak Bebas Royalti Non Eksklusif (Non-exclusive Royalty Free
Right) atas karya ilmiah saya yang berjudul:


beserta perangkat yang ada (jika diperlukan). Dengan Hak Bebas Royalti Non
Eksklusif ini Institut Teknologi Indonesia berhak menyimpan, mengalih
media/formatkan, mengelola dalam bentuk pangkalan data (database), merawat, dan
mempublikasikan Tugas Akhir/Skripsi saya selama tetap mencantumkan nama saya
sebagai penulis/pencipta dan sebagai pemilik Hak Cipta.

Demikian pernyataan ini saya buat dengan sebenarnya.

Dibuat di: Tangerang Selatan


Yang Menyatakan,

Revanza Zakly Juliansyah

v Teknik Informatika-ITI
ABSTRAK

Nama : Revanza Zakly Juliansyah


Program Studi : Teknik Informatika
Judul : Rancang Bangun Platform CyberSecurity
Dengan Metode Gamifikasi Capture The Flag
(CTF) Jeopardy Style Berbasis Web.
Dosen Pembimbing : Suryo Baramasto, S.T, M.T

Peningkatan kompleksitas ancaman keamanan siber menuntut solusi inovatif


dalam pembelajaran keamanan siber. Tugas akhir ini merancang dan membangun
sebuah platform pembelajaran keamanan siber berbasis web dengan pendekatan
metode penelitian yang sesuai untuk mengembangkan platform pembelajaran
keamanan siber yang di mulai dari tahap studi literatur sampai ke tahap akhir
deployment. Pada proses pengembangan platform pembelajaran CyberSecurity ini
menggunakan beberapa teknologi seperti penggunaan bahasa pemrograman PHP
dengan framework Laravel, penggunaan mysql sebagai databases, dan
penggunaan VScode sebagai text editor yang membantu dalam penyusunan
program hasil akhir dari tugas akhir ini menghasilkan platform cybersecurity
berbasis capture the flag (CTF) yang memiliki fitur practice, competition, dan
classroom, platform cybersecurity ini bersifat fleksibel dan dapat diakses melalui
web, memungkinkan pengguna untuk belajar secara mandiri dan mengembangkan
potensi di bidang cybersecurity. Dengan memanfaatkan teknologi web, pengguna
dapat mengakses platform ini kapan saja dan di mana saja, memfasilitasi
pembelajaran keamanan siber yang efektif dan dapat diakses oleh berbagai
kalangan.

Kata Kunci : capture the flag (CTF), CyberSecurity, pembelajaran


CyberSecurity, model view controller(MVC), jeopardy style

vi Teknik Informatika-ITI
ABSTRACT
The increasing complexity of cyber security threats demands innovative solutions in cyber
security learning. This final project designs and builds a web-based cyber security learning
platform with an appropriate research method approach to develop a cyber security learning
platform starting from the literature study stage to the final deployment stage. in the process of
developing the CyberSecurity learning platform, several technologies were used, such as the use
of the PHP programming language with the Laravel framework, the use of MySQL as
databases, and the use of VScode as a text editor which helped in preparing the program. The
final result of this final project was to produce a cybersecurity platform based on Capture the
Flag (CTF). ) which has practice, competition and classroom features, this cybersecurity
platform is flexible and can be accessed via the web, allowing users to learn independently and
develop potential in the field of cybersecurity. By utilizing web technology, users can access
this platform anytime and anywhere, facilitating effective and accessible cyber security learning
for various groups.

Keywords: capture the flag (CTF), CyberSecurity, CyberSecurity learning, model view
controller (MVC), jeopardy style

vii Teknik Informatika-ITI


DAFTAR ISI

HALAMAN PERNYATAAN ORISINALITAS.........................................................................i


HALAMAN PENGESAHAN......................................................................................................ii
KATA PENGANTAR.................................................................................................................iii
HALAMAN PERNYATAAN PERSETUJUAN PUBLIKASI.................................................v
ABSTRAK....................................................................................................................................vi
DAFTAR ISI..............................................................................................................................viii
DAFTAR GAMBAR....................................................................................................................x
DAFTAR TABLE.....................................................................................................................xiii
BAB 1.............................................................................................................................................1
PENDAHULUAN.........................................................................................................................1
1.1 Latar Belakang...............................................................................................................1
1.2 Rumusan Masalah..........................................................................................................3
1.3 Tujuan.............................................................................................................................3
1.4 Ruang Lingkup...............................................................................................................3
1.5 State Of The Art..............................................................................................................4
1.6 Sistematika Penulisan.....................................................................................................6
BAB 2.............................................................................................................................................8
LANDASAN TEORI....................................................................................................................8
2.1 CyberSecurity.................................................................................................................8
2.2 Pendidikan CyberSecurity..............................................................................................8
2.3 Gamifikasi......................................................................................................................9
2.4 Capture The Flag (CTF)..............................................................................................10
2.4.1 Attack - Defence..................................................................................................11
2.4.2 Jeopardy................................................................................................................12
2.5 Unified Modelling Languange (UML).........................................................................14
2.5.1 UseCase Diagram.................................................................................................15
2.5.2 Class Diagram......................................................................................................16
2.5.3 Sequence Diagram................................................................................................17
2.6 MVC (Model-View-Controller)...................................................................................18
2.7 Entity Relation Diagram (ERD)...................................................................................19
2.8 Flowchart.....................................................................................................................20

viii Teknik Informatika-ITI


BAB 3...........................................................................................................................................21
PENERAPAN TUGAS AKHIR................................................................................................21
3.1 Studi Literatur dan Pengumpulan Data........................................................................22
3.2 Perancangan Konsep....................................................................................................22
3.2.1 Perancangan Teknologi........................................................................................22
3.2.2 Perancangan Menu...............................................................................................24
3.2.3 Perancangan Tampilan.........................................................................................26
3.3 Pengembangan Sistem..................................................................................................43
3.3.1 MVC Diagram......................................................................................................43
3.3.2 Use Case Diagram................................................................................................45
3.3.3 Class Diagram......................................................................................................48
3.3.4 Sequence Diagram................................................................................................49
3.3.5 Deployment diagram............................................................................................52
3.3.6 Entity Relationship Diagram (ERD)....................................................................53
3.3.7 Perancangan Table...............................................................................................54
3.3.8 Pemrograman........................................................................................................58
3.4 Penambahan Tantangan................................................................................................65
3.5 Deployment..................................................................................................................67
BAB 4...........................................................................................................................................73
IMPLEMENTASI......................................................................................................................73
4.1 Implementasi Antarmuka.............................................................................................73
4.1.1 Implementasi Antarmuka Admin.........................................................................75
4.1.2 Implementasi Antarmuka User.............................................................................85
4.2 Capture The Flag (CTF) Challenge..............................................................................93
BAB 5...........................................................................................................................................98
PENUTUP...................................................................................................................................98
5.1 Kesimpulan...................................................................................................................98
5.2 Saran.............................................................................................................................98
DAFTAR REFERENSI.............................................................................................................99
LAMPIRAN..............................................................................................................................102

ix Teknik Informatika-ITI
DAFTAR GAMBAR

Gambar 2. 1 Attack Defend........................................................................................................11


Gambar 2. 2 Class Diagram.......................................................................................................16
Gambar 2. 3 Sequence Diagram.................................................................................................17
Gambar 2. 4 MVC Diagram.......................................................................................................18
Gambar 2. 5 Entity Relation Diagram (ERD).............................................................................20
Gambar 2. 6 Flowchart...............................................................................................................20

Gambar 3. 1 Flowchart Metodelogi 21

Gambar 3. 2 Struktur Menu Admin............................................................................................24


Gambar 3. 3 Struktur Menu Instruktur.......................................................................................25
Gambar 3. 4 Struktur Menu User...............................................................................................25
Gambar 3. 5 Halaman Login......................................................................................................26
Gambar 3. 6 Dashboard Admin..................................................................................................27
Gambar 3. 7 Account Management............................................................................................28
Gambar 3. 8 Add Practice..........................................................................................................29
Gambar 3. 9 Edit Practice...........................................................................................................29
Gambar 3. 10 Add Competition.................................................................................................30
Gambar 3. 11 Edit Competition..................................................................................................30
Gambar 3. 12 Add Challenges....................................................................................................31
Gambar 3. 13 Edit Challenges....................................................................................................31
Gambar 3. 14 Monitoring Competition......................................................................................32
Gambar 3. 15 Add Classroom....................................................................................................32
Gambar 3. 16 Classroom List.....................................................................................................33
Gambar 3. 17 Add Assignment..................................................................................................33
Gambar 3. 18 Sumbsission List..................................................................................................34
Gambar 3. 19 Practice................................................................................................................34
Gambar 3. 20 Prctice Modal.......................................................................................................35
Gambar 3. 21 Practice Scoreboard.............................................................................................35
Gambar 3. 22 Competition.........................................................................................................36
Gambar 3. 23 Registration..........................................................................................................36
Gambar 3. 24 Information Competition.....................................................................................37
Gambar 3. 25 Scoreboard Competition......................................................................................37
Gambar 3. 26 Challenge.............................................................................................................38
Gambar 3. 27Modal Challenge...................................................................................................38
Gambar 3. 28 Classroom List.....................................................................................................39
Gambar 3. 29 Enrollment Class..................................................................................................39
Gambar 3. 30 MyClassroom......................................................................................................40
Gambar 3. 31 Assignment List...................................................................................................40
Gambar 3. 32 Assignment Card.................................................................................................41
Gambar 3. 33 Profil User...........................................................................................................41

x Teknik Informatika-ITI
Gambar 3. 34 User Activity.......................................................................................................42
Gambar 3. 35 MVC Diagram.....................................................................................................43
Gambar 3. 36 Class Diagram......................................................................................................48
Gambar 3. 37 Sequence Diagram Admin...................................................................................49
Gambar 3. 38 Sequence Diagram Instruktur..............................................................................50
Gambar 3. 39 Sequence Diagram User.......................................................................................51
Gambar 3. 40 Deployment Diagram...........................................................................................52
Gambar 3. 41 Entity Relationship Diagram (ERD)....................................................................53
Gambar 3. 42 Source Code Practice...........................................................................................58
Gambar 3. 43 Source Code Save Practice..................................................................................59
Gambar 3. 44 Source Code Validasi Flag...................................................................................59
Gambar 3. 45 Source Code Scoreboard Practice........................................................................60
Gambar 3. 46 Source Code Registrasi Peserta............................................................................61
Gambar 3. 47 Competition.........................................................................................................61
Gambar 3. 48 Competition Scoreboard......................................................................................62
Gambar 3. 49 Dynamic Score....................................................................................................62
Gambar 3. 50 Show Classroom..................................................................................................63
Gambar 3. 51 Show Assignment................................................................................................63
Gambar 3. 52 Submission..........................................................................................................64
Gambar 3. 53 Dashboard DomaiNesia.......................................................................................67
Gambar 3. 54 MyServices..........................................................................................................67
Gambar 3. 55 cPanel Domainesia...............................................................................................68
Gambar 3. 56 Php Version.........................................................................................................68
Gambar 3. 57 FIle Manager.......................................................................................................69
Gambar 3. 58 Database..............................................................................................................69
Gambar 3. 59 MySql User..........................................................................................................70
Gambar 3. 60 Export Database...................................................................................................70
Gambar 3. 61 Import Database...................................................................................................71
Gambar 3. 62 Environment........................................................................................................71
Gambar 3. 63 Leanding Page.....................................................................................................72

Gambar 4. 1 Halaman Utama 73

Gambar 4. 2Halaman Registrasi.................................................................................................74


Gambar 4. 3 Halaman Login......................................................................................................74
Gambar 4. 4 Dashboard..............................................................................................................75
Gambar 4. 5 User Management..................................................................................................75
Gambar 4. 6 Edit User................................................................................................................76
Gambar 4. 7 Add Practice..........................................................................................................76
Gambar 4. 8 Add Practice..........................................................................................................77
Gambar 4. 9 Edit Practice...........................................................................................................77
Gambar 4. 10 Add Competition.................................................................................................78
Gambar 4. 11 Form Add Competition........................................................................................78
Gambar 4. 12 Edit Competition..................................................................................................79
Gambar 4. 13 Add Challenges....................................................................................................79
Gambar 4. 14 Add Challenges....................................................................................................80
Gambar 4. 15 Edit Challenges....................................................................................................80
Gambar 4. 16 Competition Statistic...........................................................................................81
Gambar 4. 17 Add Classroom....................................................................................................81

xi Teknik Informatika-ITI
Gambar 4. 18 Edit Classroom....................................................................................................82
Gambar 4. 19 Classroom List.....................................................................................................82
Gambar 4. 20 Add Assignment..................................................................................................83
Gambar 4. 21 Add Assignment..................................................................................................83
Gambar 4. 22 Edit Assignment..................................................................................................84
Gambar 4. 23 Submission List...................................................................................................84
Gambar 4. 24 Practice................................................................................................................85
Gambar 4. 25 Modal Practice.....................................................................................................85
Gambar 4. 26 Scoreboard User..................................................................................................86
Gambar 4. 27 Competition.........................................................................................................86
Gambar 4. 28 Registrasi.............................................................................................................87
Gambar 4. 29 Information Competition.....................................................................................87
Gambar 4. 30 Scoreboard...........................................................................................................89
Gambar 4. 31 Classroom List.....................................................................................................89
Gambar 4. 32 Enrollment Key....................................................................................................90
Gambar 4. 33 My Classroom.....................................................................................................90
Gambar 4. 34 Assignment..........................................................................................................91
Gambar 4. 35 MyProfile.............................................................................................................91
Gambar 4. 36 User Activity.......................................................................................................92
Gambar 4. 37 Practice Modal.....................................................................................................93
Gambar 4. 38 Web Expolitation.................................................................................................93
Gambar 4. 39 Page Source.........................................................................................................94
Gambar 4. 40 Brup Suite............................................................................................................94
Gambar 4. 41 Proxy Burp Suite.................................................................................................95
Gambar 4. 42 Http Request........................................................................................................95
Gambar 4. 43 Flag......................................................................................................................96
Gambar 4. 44 Input Flag............................................................................................................96
Gambar 4. 45 Modal Challenge..................................................................................................97

xii Teknik Informatika-ITI


DAFTAR TABLE

Tabel 3.1 Spesifikasi.......................................................................................................22


Tabel 3.2 Tabel Role.......................................................................................................49
Tabel 3.3 Tabel User.......................................................................................................49
Tabel 3.4 Tabel User Point.............................................................................................49
Tabel 3.5 Tabel Category................................................................................................50
Tabel 3.6 Tabel Challenges.............................................................................................50
Tabel 3.7 Tabel Registrations.........................................................................................50
Tabel 3.8 Tabel Competitions.........................................................................................51
Tabel 3.9 Tabel Class......................................................................................................51
Tabel 3.10 Tabel Member...............................................................................................51
Tabel 3.11 Tabel Assignment.........................................................................................52
Tabel 3.12 Tabel Submission..........................................................................................52

xiii Teknik Informatika-ITI


xiv Teknik Informatika-ITI
BAB 1

PENDAHULUAN

1.1 Latar Belakang


Dunia digital yang semakin maju, keamanan informasi telah menjadi isu krusial
yang memengaruhi individu, perusahaan, pemerintah, dan masyarakat pada umumnya.
Dengan pertumbuhan pesat teknologi informasi dan komunikasi, serangan siber dan
pelanggaran data telah menjadi ancaman nyata yang mengancam keamanan dan privasi
informasi sensitif. Penyadaran tentang pentingnya CyberSecurity telah tumbuh seiring
dengan meningkatnya insiden serangan siber yang merugikan. Oleh karena itu,
Pendidikan, pemahaman dan pelatihan tentang konsep keamanan informasi telah
menjadi sangat penting, Pendidikan CyberSecurity menjadi semakin penting karena
permintaan akan profesional CyberSecurity meningkat. Keterampilan langsung adalah
komponen penting dari pendidikan CyberSecurity, dan berbagai jenis latihan telah
dikembangkan untuk mengajarkan keterampilan ini. Dalam pendidikan ini, menerapkan
manfaat pembelajaran gamified ke kurikulum Pendidikan CyberSecurity pengantar
dalam bentuk serangkaian tantangan Capture the Flag (CTF) yang ditawarkan sebagai
latihan langsung. Untuk menciptakan 20 tantangan gaya bahaya dengan berbagai
kesulitan berdasarkan penelitian sebelumnya tentang penggunaan gamifikasi dalam
pendidikan, (Kaplan, Z., Zhang, N., & Cole, S. V., 2022)

Kursus pendidikan memerlukan kegiatan langsung untuk melengkapi analisis


teori dan prinsip. Salah satu cara pendidik memenuhi permintaan akan aktivitas praktis
adalah melalui gamifikasi. Gamifikasi mengimplementasikan konsep pembelajaran
sebagai elemen permainan untuk meningkatkan interaksi sosial, keterlibatan pengguna
dan meningkatkan pola pembelajaran positif. Gamifikasi, yang dimulai sebagai metode
untuk memahami pemasaran dan keterlibatan pelanggan, digunakan di berbagai disiplin
ilmu pendidikan. Tinjauan literatur tentang konsep pembelajaran game-ifying pada
tahun 2014 membuktikan penerimaan dan penggunaan di industri menghasilkan hasil
yang positif dalam retensi. Perlunya Pendidikan CyberSecurity Berbasis
GameKurikulum keamanan siber terus berkembang seiring dengan risiko yang terus-
menerus, yang menyebabkan kurangnya pelatihan teknis dan materi. Sumber daya

1 Teknik Informatika-ITI
pendidikan untuk mengajarkan CyberSecurity mempengaruhi generasi professional di
bidang CyberSecurity berikutnya yang akan membantu meneliti dan mengembangkan
tindakan pencegahan terhadap serangan pada jaringan. (Williams, T 2023),
Mempertahankan tingkat interaksi dalam pendidikan CyberSecurity sulit dilakukan
karena tidak adanya keterampilan dan pengalaman teknis peserta. Mencapai tingkat
motivasi yang tinggi dalam keamanan siber masih merupakan sebuah tantangan masalah
karena diperlukan latar belakang pengetahuan yang tinggi dan keterampilan tingkat
lanjut yang diperlukan untuk berpartisipasi program. Selama beberapa tahun terakhir,
kompetisi Capture the Flag (CTF) telah menarik banyak minat dari masyarakat
komunitas keamanan informasi (Chothia & Novakovic 2015). Menggunakan tantangan
CTF, keterampilan para kontestan diuji dalam berbagai topik keamanan seperti
Cryptography, Steganography, Web Expolitation, Binary Expolitation dan Reverse
enginering.

Sejumlah karya sebelumnya menyebutkan pentingnya mempertahankan latihan


langsung dan menggunakan tantangan CTF sebagai komponen penting dari kurikulum
CyberSecurity (Vigna,2003; Antonioli et al., 2017). Karya-karya seperti di atas
menguraikan tingkat kesulitan yang tinggi dan jebakan dalam implementasi dan
penyebaran pendekatan tersebut. Sebagian besar penelitian menyebutkan kurangnya
keakraban peserta dalam hal keterampilan dan mengusulkan CCTF (ClassroomCTFs),
sebagai metode alternatif dalam perkuliahan (Mirkovic & Peterson, 2014). Merancang
dan menanamkan tantangan CTF untuk meningkatkan proses pembelajaran telah
disebutkan sebagai pendekatan alternatif untuk memperoleh keterampilan dan
pengetahuan, yang bertentangan dengan metode pendidikan tradisional (Mirkovic &
Peterson, 2014; Werther et al., 2011). Secara lebih spesifik, tantangan CTF disajikan
sebagai metode untuk meningkatkan pengalaman belajar di bidang CyberSecurity,
dengan meningkatkan motivasi peserta dan memberikan hasil positif dalam hal
perolehan keterampilan (Dark & Mirkovic, 2015).

2 Teknik Informatika-ITI
1.2 Rumusan Masalah
Berdasarkan latar belakang yang telah di sebutkan, maka rumusan masalah yang dapat
diambil, adalah :
1. Bagaimana cara meningkatkan minat siswa di bidang cybersecurity
2. Bagaimana cara mengimplementasikan teori yang di iringi dengan praktik dalam
sebuah platform pembelajaran ?
3. Bagaimana konsep pembelajaran CyberSecurity dengan metode Capture The
Flag (CTF) Jeopardy Style dapat menarik perhatian siswa ?
4. Bagaimana mengembangkan platform pembelajaran gamifikasi berbasis web di
bidang CyberSecurity dengan metode Capture the flag (CTF) Jeopardy Style ?

1.3 Tujuan
a. Membuat pembelajaran CyberSecurity lebih menarik sehingga dapat menaikan minat
siswa pada cybersecurity.
b. Membuat Platform pembelajaran CyberSecurity dengan metode Gamifikasi Capture
The Flag (CTF) yang unik dan menarik.
c. Membuat Platform yang dapat menyediakan praktik dengan gamifikasi dan teori,
untuk melengkapkan pembelajaran di bidang CyberSecurity.
d. Membuat Platform yang dimana pengguna dapat melakukan pembelajaran melalui
tantangan yang disediakan.

1.4 Ruang Lingkup


a. Sitem yang dikembangkan adalah berbasis WEB.
b. Sistem menyediakan beberapa fitur seperti Practice, Competition and Classroom.
c. Sistem yang dikembangkan menggunakan metode gamifikasi yang dikembangkan
dengan pembelajaran CyberSecurity.
d. Sistem yang dikembangkan dengan metode gamifikasi dan Capture The Flag (CTF)
dengan gaya Jeopardy yang dimana dapat menampung berbagai macam tantangan
yang dapat diakses oleh user, dengan validasi system, memiliki tingkatan kesuliatan

3 Teknik Informatika-ITI
soal yang berbeda, pelacakan point peringkat dan kompetisi untuk memotivasi siswa
dalam mengerjakan tantangan CTF yang ada.

1.5 State Of The Art


Referensi Pembahasan

Rancang Bangun Aplikasi Hasil Penelitian


Gamifikasi Untuk Meningkatkan Pada Tulisan ini menjelaskan tentang pembuatan
Kesadaran Keamanan Siber. Aplikasi Gamifikasi CyberSecurity yang
bertujuan untuk meningkatkan kesadaran dan
Pengarang keamanan di bidang Siber, yang di landasi oleh
Raden Budiarto Hadiprakoso, Wian kenaikan penggunaan smartphone yang perlu di
Agus Satria. iringi dengan metode pembelajaran agar
pengguna smartphone dapat terhindar dari
Tahun kejahatan dan pencurian data.
2022
Alasan Menjadi Tinjauan Penelitian
Nama Jurnal Pada Aplikasi ini memiliki tujuan yang sama
Jurnal Ilmiah Ilmu Komputer yaitu untuk membuat pembelajaran
CyberSecurity menjadi lebih menarik dengan
menggunakan metode pembelajaran berbasis
gamifikasi CyberSecurity ke dalam sebuah
platform.
Towards Inclusive Cybersecurity Hasil Penelitian
Learning: A Novice-Friendly Pada Tulisan ini menjelaskan tentang platform
Capture-the-Flag Onboarding Capture The Flag (CTF), yang dapat berguna
Platform untuk menarik, melatih dan mempertahankan
talenta Cybescurity, yang dimana target nya
Pengarang adalah para pemula keamanan siber, selain itu di
Lik Ken Chen, Mohd Hanis Jenalis, dalam jurnal ini juga di jelaskan betapa penting
Julia Juremi nya gamifikasi seperti Capture The Flag (CTF),
terhadap peningkatan minat terhadap pendidikan
Tahun dan pembelajaran CyberSecurity.
2023

4 Teknik Informatika-ITI
Alasan Menjadi Tinjauan Penelitian
Nama Jurnal Pada jurnal ini menjelaskan tentang seberapa
Journal of Applied Technology and penting nya pengenalan platform pembelajaran
Innovation CyberSecurity berbasis gamifikasi kepada para
pemula Cyberscuirty, selain itu di dalam jurnal
ini juga memberikan informasi tentang dua
pendekatan pengajaran dalam mengajarkan
CyberSecurity.
Capture the Flag (CTF): Website Hasil Penelitian
Tutorial to Boost Cybersecurity Pada tulisan ini menjelaskan tentang
Training mengembangkan halaman web untuk mengajari
orang-orang tentang Competition Capture the
Pengarang flag(CTF) dengan berbagai tantangan
Santiago Lozada, Reinaldo E. CyberSecurity yang dapat menarik perhatian
para siswa untuk mempelajari keamanan siber
Tahun berbasis kompetisi.
2020
Alasan Menjadi Tinjauan
Pada tulisan ini di jelaskan tipe-tipe dalam
capture the flag (CTF), dan persoalan-persoalan
CyberSecurity yang dapat di angkat untuk
menjadi salah satu category di dalam permainan
Capture The Flag (CTF).
On the Other Side of the Table: Hasil Penelitian
Hosting Capture-the-Flag (CTF) Pada tulisan ini menjelaskan tentang bagaimana
Competitions An Investigation from cara menyelenggarakan kompetisi capture the
the CTF Organizer’s Perspective flag (CTF), dan juga impack atau timbal balik
dari hasil kompetiti tersebut ke pada peserta
Pengarang kompetisi.
Benjamin Carlisle, Michael Reininger,
Dylan Fox, Daniel Votipka, and Alasan Menjadi Tinjauan
Michelle L. Mazurek Alasan menjadi tinjauan karena pada tulisan ini
dapat menjadi referensi untuk mengembangkan
Tahun dan menyelenggarakan kompetisi ctf di dalam
2020 platform.

5 Teknik Informatika-ITI
Nama Jurnal
Security Information

An Analysis and Evaluation of Open Hasil Penelitian


Source Capture the Flag Platforms
Pada tulisan ini menjelaskan tentang platform
as Cybersecurity
Pembelajaran CyberSecurity yang ada dan sudah
Pengarang popular, dan pada tulisan ini juga di berikan
Stylianos Karagiannis ,Elpidoforos tentang kelebihan dan kekurangan di setiap
Maragkos-Belmpas, Emmanouil platform tersebut.
Magkos

Tahun Alasan Menjadi Tinjauan


2020 Alasan menjadi tinjauan karena pada tulisan ini
di berikan informasi beberapa platform

Nama Jurnal pembelajaran cybersecurity yang dimana akan

Information and Communication menjadi tolak ukur untuk mengembangkan

Technology platform capture the flag.

1.6 Sistematika Penulisan

Sistematika penulisan tugas akhir ini berdasarkan gambaran dari permasalahan dan
pemecahannya. Penyusunan ini diuraikan dalam pokok permasalahan yang terbagi
dalam beberapa bab. Sistematika penulisan tugas akhir ini adalah sebagai berikut :

BAB 1 : PENDAHULUAN
Pembahasan pada bab ini pembahasan berisikan penjelasan dari penelitian tugas akhir
dan sistematika penulisan tugas akhir yang terdiri dari: latar belakang, perumusan
masalah, tujuan penelitian, ruang lingkup, state of the art dan sistematika penulisan
tugas akhir.

BAB 2 : LANDASAN TEORI

6 Teknik Informatika-ITI
Pembahasan pada bab ini yaitu mengenai landasan teori yang menjelaskan penelitian
tentang pengembangan platform pembelajaran gamifikasi Capture The Flag (CTF),
Yang terdiri dari CyberSecurity, Pendidikan CyberSecurity, Gamifikasi, Capture The
Flag (CTF), Unified Modelling Languange (UML) Model View Controller (MVC), .

BAB 3 : METODE PENELITIAN


Pembahasan pada bab ini berisi tentang metode penelitian yang di gunakan untuk
membangun dan mengembangkan platform pembelajaran CyberSecurity dengan metode
gamifikasi Capture The Flag (CTF) Jeopardy berbasis web yang akan di buat.

BAB 4 : HASIL PENELITIAN DAN PEMBAHASAN


Pembahasan pada bab ini berisi tentang hasil perancangan dan implementasi dari
Rancang Bangun Platform Pembelajaran CyberSecurity Dengan Metode Gamifikasi
Capture The Flag (CTF) Berbasis Web.

BAB 5 : KESIMPULAN DAN SARAN


Pembahasan pada bab ini berisi tentang kesimpulan dari hasil perancangan Platform
Pembelajaran CyberSecurity Dengan Metode Gamifikasi Capture The Flag (CTF)
Berbasis Web yang telah di uraikan pada bab-bab sebelum nya.

7 Teknik Informatika-ITI
BAB 2

LANDASAN TEORI

2.1 CyberSecurity
CyberSecurity adalah praktik untuk melindungi sistem, jaringan, dan
program dari serangan digital. Serangan-serangan ini biasanya ditujukan untuk
mengakses, mengubah, atau menghancurkan informasi sensitive (Fadillah and
Indriyanti, 2020). Menerapkan langkah-langkah CyberSecurity yang efektif
sangat menantang hari ini karena ada lebih banyak perangkat daripada manusia,
dan penyerang menjadi lebih inovatif (Supriyanto, 2022), CyberSecurity mencakup
alat, kebijakan, dan konsep keamanan yang dapat digunakan untuk melindungi aset
organisasi dan pengguna. CyberSecurity dapat meminimalisir masuknya risiko
ancaman ke dalam sistem computer (Lestari, Neneng and Puspaningrum, 2021).
CyberSecurity merujuk pada praktik yang memastikan tiga poin penting yang
disebut dengan CIA Triad (Mindhari, Yasin and Isnaini, 2020).

2.2 Pendidikan CyberSecurity.


Pendidikan CyberSecurity sangatlah penting untuk membekali individu dengan
pengetahuan dan keterampilan CyberSecurity sehingga lebih sedikit orang yang
rentan terhadap ancaman dunia maya (Rahman et al., 2020) dan kedua, kekurangan
global profesional keamanan siber dapat dimitigasi (Vykopal & Bartak, 2016),
Menurut Švábenský dkk. (2019) ulasan makalah pendidikan CyberSecurity
mengungkapkan dua pendekatan utama untuk mengajarkan CyberSecurity. Pertama
Pendekatannya adalah melalui pengajaran berbasis ceramah konvensional dimana
metode pendidikan ini berfokus pada penyampaian instruktur pengetahuan kepada
siswa dan sebagian besar berbasis teori dengan sedikit elemen praktis. Persiapan
untuk mengajar akan memakan sedikit waktu dan materi kursus hanya perlu tersedia
disiapkan sekali. Namun, kemampuan dan kebutuhan peserta didik dapat diabaikan.

8 Teknik Informatika-ITI
Metode pengajaran ini umum dilakukan sebagian besar lembaga pendidikan di mana
buku pelajaran dan kasus studi akan digunakan sebagai bahan pengajaran (Mirkovic
&Peterson, 2014; Langner dkk., 2022).

Pendekatan kedua adalah dengan menggunakan latihan langsung. Ini metode


pendidikan memberikan pendidikan praktis dengan menggunakan pengajaran materi
seperti latihan peretasan online untuk memaparkan siswa konsep keamanan dan
kerentanan (Votipka et al., 2021), menggabungkan latihan langsung dalam
pendidikan CyberSecurity, pemahaman dan retensi siswa terhadap topik yang
diajarkan akan ditingkatkan (Kalyanam dkk., 2020). Hal ini juga diyakini siswa akan
mempunyai pengalaman belajar yang lebih menyenangkan memungkinkan mereka
menemukan cara menerapkan keamanan teoritis konsep di dunia nyata (McDaniel et
al., 2016; Vykopal etal., 2020), menyatakan bahwa tradisional ceramah bukanlah
metode yang baik untuk mengajarkan keamanan siber. Oleh karena itu, pendidikan
keamanan siber mulai bergerak beralih dari pembelajaran berbasis kelas tradisional
ke lebih banyak lagi pendekatan praktis, seperti pembelajaran langsung, simulasi,
dan khususnya gamifikasi (Workman et al., 2021).

2.3 Gamifikasi
Perkembangan teknologi memberikan metodologi pendidikan dan pelatihan
yang lebih inovatif, termasuk gamifikasi dan metode pelatihan terkait komputer
lainnya. Clark Abt (1970) menggambarkan gamifikasi sebagai permainan dengan
pembelajaran eksplisit tujuan daripada tujuan menghibur pengguna (Sørensen,
Meyer, & Egenfeldt-Nielsen, 2011; Tsekleves, Cosmas, & Aggoun, 2016), Hanya
dalam sepuluh tahun terakhir nilai ‘permainan serius’ telah diakui. Serius teknologi
gamifikasi sekarang digunakan oleh banyak organisasi, termasuk militer, layanan
kesehatan, dan pelatihan perusahaan lingkungan mengenai pendidikan keamanan
siber (Michael, 2006; Tsekleves, dkk., 2016). Gamifikasi dan lingkungan simulasi
memungkinkan pelajar untuk bereksperimen tanpa menimbulkan risiko bagi individu
lain, organisasi aset, atau situasi (Damewood, 2016; Koukopoulos & Koukopoulos,
2017).

9 Teknik Informatika-ITI
Gamifikasi mendukung pengalaman pembelajaran, yang menarik bagi pelajar
dewasa yang lebih memilih untuk langsung menerapkan pembelajaran mereka dan
mengarahkan pendidikan mereka sendiri (Damewood). Gamifikasi juga menarik
keinginan pelajar dewasa untuk berprestasi. Mendapatkan poin dan lencana langsung
melibatkan pembelajar dewasa saat mereka mencapai tujuan tambahan. Peserta didik
termotivasi untuk bertahan dalam gameplay saat mereka mencapainya tujuan
tambahan dan merasa termotivasi secara intrinsik. Selain itu, pelajar merasakan
motivasi ekstrinsik saat mereka melihatnya secara visual skor mereka, menerima
pengakuan dari rekan-rekan dan instruktur mereka saat mereka ditempatkan di papan
peringkat yang menunjukkan perbandingan hasil.

Gamifikasi yang efektif memberi peserta tujuan yang menantang namun dapat
dicapai secara bertahap dan mengarah pada kegigihan bermain (Fengfeng, Kui, &
Ying, 2016). CTF, sebagai implementasi gamifikasi, memungkinkan pembelajar
berpikir seperti seorang hacker saat berkompetisi di beberapa ajang CTF. Permainan
ini membutuhkan tim yang terdiri dari individu-individu dimana strategi serangan
dan pertahanan harus dirancang dan dilakukan pembuatannya permainan lebih
realistis (Harmon, 2016).

2.4 Capture The Flag (CTF)


Capture the Flag (CTF) adalah kompetisi berbasis tantangan untuk
mendapatkan dan melatih keterampilan terkait CyberSecurity dengan menerapkannya
secara aktif. Dalam CTF, sebuah tim (atau pemain tunggal) memecahkan masalah
yang berkaitan dengan CyberSecurity, dan jika jawaban mereka (juga sering disebut
sebagai bendera atau solusi) untuk masalah tersebut benar, mereka mendapatkan
poin. Tujuannya adalah untuk mencetak lebih banyak poin daripada peserta lain,
yang berkontribusi pada kompetisi, Capture The Flag (CTF) berasal dari kalangan
penggemar CyberSecurity pada konferensi peretas DEFCON pada tahun 1996
DEFCON (2020). Namun, CTF bukan lagi kelompok peretas eksklusif. Format
permainan pendidikan ini dengan cepat mendapatkan popularitas, dan sekarang, guru
di seluruh dunia menggunakannya untuk melengkapi pendidikan. CTF telah berhasil

10 Teknik Informatika-ITI
digunakan di kelas universitas Mirkovic dan Peterson (2014); Vykopal et al. (2020)
dan dalam kompetisi keamanan sarjana Backman (2016); Vigna et al. (2014).

Bahkan raksasa teknologi seperti Google dan Facebook menjadi tuan rumah
CTF Google (2020); Singh (2019) yang menarik ratusan peserta setiap tahun. Tidak
seperti format pengajaran tradisional, seperti kuliah dan tugas pekerjaan rumah, CTF
lebih kasual dan sering kali menyertakan elemen kompetitif atau permainan. Menurut
Raman dkk. (2014), ada 2 macam format CTF: Attack-defence and Jeopardy, dari
ketiga format CTF di atas Format gaya Jeopardy lebih umum dan digunakan,
serangkaian pertanyaan yang mengungkapkan petunjuk untuk memandu pesaing
dalam upaya mereka memecahkan tantangan. Tantangannya diatur sedemikian rupa
sehingga memberi petunjuk bantuan dengan tantangan lanjutan terungkap sambil
memecahkan tantangan awal, berikut ini adalah penjelasan-penjelasan dari format
CTF :

2.4.1 Attack - Defence


Di dalam CTF Attack -Defence, setiap tim yang berpartisipasi disediakan dengan
mesin identik yang dirancang untuk memiliki beberapa layanan yang rentan. Untuk
mendapatkan poin, tim perlu memanfaatkannya kerentanan di mesin tim lain,
dapatkan aksesnya layanan mereka untuk mengekstrak bendera dan
mengirimkannya. Mereka juga membutuhkan untuk menambal kerentanan layanan
mesin mereka sendiri menghindari kehilangan poin Biasanya, ada dua putaran
permainan tim mana yang menjadi tim penyerang dan tim lainnya tim adalah tim
yang bertahan di babak pertama dan kemudian mereka beralih untuk putaran kedua
(Reinaldo E, 2020).

11 Teknik Informatika-ITI
Gambar 2. 1 Attack Defend

2.4.2 Jeopardy
Dalam Capture The Flag (CTF) gaya Jeopardy, beragam tugas (tantangan)
terkait keamanan siber disediakan. Kapan pemain berhasil menyelesaikan
tantangan, mereka diberi imbalan dengan bendera. Para pemain kemudian dapat
menyerahkan bendera untuk mendapatkan poin. Terkadang, ada format untuk
benderanya, misalnya, “ABOH23{bendera}” (Nor Azlina Abd Rahman dkk.,
2023).

Persaingan dalam upaya mereka memecahkan tantangan,Tantangannya diatur


sedemikian rupa sehingga memberi petunjuk bantuan dengan tantangan lanjutan
terungkap sambil memecahkan tantangan awal. Tantangan dari berbagai tingkat
kesulitan disusun menjadi kategori terkait setiap kategori terdapat beberapa
tantangan yang berbeda tingkatannya kompleksitasnya, dan peserta harus
menemukan satu bendera tantangan yang tersembunyi untuk mendapatkan poin.
Jumlah poin yang diperoleh ketika sebuah peserta mengirimkan bendera
bergantung pada kompleksitasnya tantangan, Kategori tantangan utama dari
Jeopardy CTF adalah :
1. Cryptography
Cryptography adalah metode perlindungan informasi dan komunikasi
menggunakan kode-kode demikian bahwa hanya mereka yang menerima
informasi tersebut yang dituju dapat membaca dan mengolahnya. Pra-perbaikan
“crypto” berarti tersembunyi dan akhiran “graphy” singkatan dari menulis.
Dalam ilmu komputer, kriptografi mengacu pada informasi yang aman dan
teknik komunikasi berasal dari konsep matematika dan seperangkat aturan
berbasis perhitungan yang disebut algoritma untuk mentransformasikan pesan
dengan cara yang sulit diuraikan.

12 Teknik Informatika-ITI
2. Forensics
Forensics komputer, kadang-kadang dikenal sebagai ilmu komputer forensics,
merupakan salah satu cabang ilmu digital ilmu forensics yang berkaitan dengan
bukti-bukti yang ditemukan di komputer dan media penyimpanan digital. Tujuan
dari forensics komputer adalah memeriksa media digital dalam acara yang sehat
secara forensik dengan tujuan mengidentifikasi, melestarikan, memulihkan,
menganalisis dan menyajikan fakta dan opini tentang digital informasi. Meski
paling sering dikaitkan dengan penyelidikan berbagai macam komputer
kejahatan, forensics komputer juga dapat digunakan dalam perdata proses.
Disiplinnya melibatkan hal serupa teknik dan prinsip pemulihan data, tetapi
dengan pedoman dan praktik tambahan yang dirancang untuk membuat jejak
audit hukum. Bukti dari komputer investigasi Forensics biasanya tunduk pada
pedoman dan praktik yang sama dengan digital lainnya bukti. Ini telah
digunakan dalam sejumlah kasus penting dan diterima secara luas sebagai dapat
diandalkan dalam sistem pengadilan AS dan Eropa.

3. Web Expolitation
Web Exploitation (Eksploitasi Web) dalam konteks Capture The Flag (CTF) adalah
kategori tantangan yang berfokus pada eksploitasi keamanan pada aplikasi web. Peserta
CTF diminta untuk menemukan dan mengeksploitasi kerentanan atau celah keamanan
yang ada dalam situs web atau aplikasi web tertentu. Tujuan dari tantangan ini dapat
bervariasi, tetapi seringkali melibatkan pengambilalihan kendali, akses ilegal, atau
ekstraksi informasi rahasia dari aplikasi web.

4. Open Source Intelligence (OSINT)


Open Source Intelligence (OSINT) adalah pengumpulan dan analisis informasi
yaitu dikumpulkan dari sumber publik atau terbuka. proses pengumpulan, analisis,
dan pemanfaatan informasi yang bersumber dari sumber-sumber publik atau
terbuka secara bebas. Ini termasuk data dan informasi yang dapat diakses oleh
siapa saja tanpa memerlukan hak akses khusus. OSINT umumnya digunakan
untuk mendapatkan pemahaman yang lebih baik tentang berbagai aspek, seperti
individu, organisasi, atau kejadian tertentu.

13 Teknik Informatika-ITI
5. Steganography
Steganography adalah praktik pengiriman data dalam format tersembunyi sehingga
fakta pengiriman datanya disamarkan. Kata steganography adalah gabungan dari
kata “steganos” yang artinya tertutup, tersembunyi, atau dilindungi, dan “grafik”
berarti menulis. Berbeda dengan cryptography yang mana menyembunyikan isi
pesan rahasia, steganography menyembunyikan fakta bahwa sebuah pesan
dikomunikasikan. steganography semakin meningkat digunakan oleh aktor yang
membuat malware dan alat spionase dunia maya.

6. Reverse Engineering
Reverse Engineering (Rekayasa Balik) adalah proses analisis perangkat lunak atau
perangkat keras untuk memahami cara kerjanya atau merinci desainnya. Dalam
konteks Capture The Flag (CTF), tantangan Reverse Engineering dapat melibatkan
analisis file biner atau program yang dienkripsi atau diubah sedemikian rupa
sehingga peserta harus mencari tahu algoritma atau data asli yang tersembunyi.
Peserta biasanya harus memahami logika program tanpa memiliki akses ke kode
sumber asli.

7. Binary Exploitation
Binary Exploitation (Eksploitasi Biner) dalam CTF melibatkan eksploitasi
kelemahan atau kerentanan pada program biner atau perangkat lunak. Peserta
mencoba untuk memanfaatkan bug atau celah keamanan untuk mengambil kendali
atas eksekusi program atau bahkan mendapatkan akses yang tidak sah ke sistem. Ini
sering melibatkan pemahaman yang mendalam tentang bahasa assembly,
penanganan memori, dan keahlian dalam mengidentifikasi dan mengeksploitasi
kerentanan keamanan.

2.5 Unified Modelling Languange (UML)


Unified modelling languange atau UML adalah gambar untuk memvisualisasi,
menentukan, membangun, dan mendokumentasikan aplikasi pengembangan perangkat
lunak berbasis pemrograman berorientasi objek (OOP). Selain itu, UML adalah alat

14 Teknik Informatika-ITI
yang mendukung pengembangan aplikasi, pada UML itu sendiri sudah menyediakan
standar untuk membuat aplikasi blue print yang mencakup konsep proses bisnis,
penulisan bahasa program yang spesifik, skema database, dan komponen yang
diperlukan untuk aplikasi perangkat lunak (Suendri, 2018). Dalam UML terdapat
beberapa jenis diagram, antara lain:

2.5.1 UseCase Diagram


Usecase diagram adalah deskripsi dari fungsionalitas yang diharapkan dari sebuah
aplikasi dan mewakili interaksi antara aktor dan aplikasi. Didalam usecase memiliki
aktor yang merupakan deskripsi dari aplikasi yang berjalan pada entitas atau sistem dari
manusia (Prihandoyo, 2018).

15 Teknik Informatika-ITI

Gambar 2. 2 Use Case Digaram


2.5.2 Class Diagram
Class diagram atau diagram kelas merupakan gambaran struktur dan deskripsi dari
class, package, dan objek yang saling berhubungan seperti diantaranya pewarisan,
asosiasi dan lainnya (Prihandoyo, 2018).

2.5.3 Sequence Diagram

Gambar 2. 3 Class Diagram


Sequence diagram atau diagram urutan merupakan
suatu diagram yang menggambarkan interaksi antar objek didalam dan di sekitar
aplikasi yang berupa message yang digambarkan terhadap waktu (Prihandoyo, 2018).

16 Teknik Informatika-ITI
Gambar 2. 4 Sequence Diagram

2.6 MVC (Model-View-Controller)

17 Teknik Informatika-ITI
Model-View-controller atau disingkat menjadi MVC adalah cara membangun aplikasi
dengan memisahkan data (Model) tampilan (View) dan pemrosesannya (Controller).
Pengembangan website memungkinkan pemrogram untuk fokus pada aplikasi inti dan
perancang website untuk fokus pada tampilan. Sebagian besar implementasi
menggunakan kerangka kerja dalam aplikasi situs website berdasarkan pada arsitektur
MVC. MVC memisahkan pengembangan aplikasi berdasarkan komponen utama yang
membentuk aplikasi, seperti manipulasi data, antarmuka pengguna dan bagian kontrol
dari aplikasi website (Sowo, Arief, & Arfandy, 2018). Adapun alur program aplikasi
berbasis MVC di tunjukan pada gambar 2.2 dibawah ini :

Gambar 2. 5 MVC Diagram


Gambar 2.2 Menjelaskan bahwa ketika user membuat
permintaan pada halaman ke aplikasi, itu diproses oleh pengontrol dan pengontrol
model Ketika operasi basis data diperlukan. Hasil query yang dibuat oleh model
dikembalikan ke pengontrol yang memanggil tampilan yang sesuai untuk
menggabungkannya dengan hasil model query. Hasil akhir dari operasi ini akan
ditampilkan dibrowser anda. Dalam konteks Laravel dan aplikasi berbasis web,
penerapan konsep MVC membagi kode program menjadi tiga kategori:

1. Model, model mewakili struktur data, model biasanya berisi fitur yang berguna
untuk administrasi database, memasukan data ke dalam database, dan
memperbarui data.

18 Teknik Informatika-ITI
2. View, view adalah bagian yang mengatur tampilan web ke pengguna sesuai dengan
yang diarahkan oleh controller.
3. Controller, controller adalah bagian yang menghubungkan model, view dan
controller. Berisi perintah yang digunakan untuk memproses data dan
mengirimkan perintah ke halaman web.

2.7 Entity Relation Diagram (ERD)


Entity Relationship Diagram (ERD) atau diagram hubungan entitas adalah sebuah
visualisasi yang digunakan untuk merancang sebuah basis data. ERD menunjukkan
hubungan atau relasi antara entitas atau objek beserta atribut-atributnya secara
terperinci. Dengan menggunakan ERD, sistem basis data yang sedang dirancang dapat
diorganisir dengan lebih terstruktur dan rapi. (Rony Setiawan, 2021). Untuk
menggambarkan dibutuhkan :

1. Notasi, merujuk pada kumpulan simbol dan lambang yang digunakan dalam ERD.
Notasi ini digunakan untuk merepresentasikan entitas, atribut, relasi, dan elemen
lainnya dalam ERD.
2. Simbol, merupakan lambang visual yang digunakan untuk menandai entitas, atribut,
dan relasi dalam ERD. Setiap simbol memiliki arti dan makna tertentu yang
memudahkan pemahaman tentang elemen yang diwakili.
3. Bagan, merupakan rancangan atau skema yang digunakan untuk menggambarkan
struktur ERD secara visual. Bagan ini membantu dalam mempermudah interpretasi
dan penafsiran ERD secara keseluruhan.

19 Teknik Informatika-ITI
Gambar 2. 6 Entity Relation Diagram (ERD)

2.8 Flowchart
merupakan salah satu suatu teknik sistem yang paling umum digunakan. Flowchart
adalah diagram simbolik yang mengambarkan arus informasi dan langkah-langkah
aktivitas dalam sistem dan digunakan oleh editor dan personel sistem. (Ratumurun, 2019)

Gambar 2. 7 Flowchart

20 Teknik Informatika-ITI
BAB 3

PENERAPAN TUGAS AKHIR

Penerapan Tugas Akhir yang di gunakan sebagai acuan atau tahapan dalam melakukan
penelitian untuk Tugas Akhir ini, Adapun tahapan yang dilakukan pada tugas akhir ini
digambarkan pada flowchart pada gambar 3.1.

3.1
Studi

Literatur dan Gambar 3. 1 Flowchart Pengumpulan Data


Metodologi
Pada diagram alur diawali dengan Studi Literatur dan Pengumpulan data, Studi
Literatur dan pengumpulan data adalah tahap yang dilakukan untuk mencari informasi

21 Teknik Informatika-ITI
yang akan dijadikan sebagai referensi, seperti mencari artikel dan jurnal yang sesuai
dengan pengembangan sistem pada platform pembelajaran CyberSecurity dengan
metode gamifikasi Capture the flag (CTF).

Jurnal yang digunakan dalam pengembangan sistem ini didapatkan dari Halaman
Website Google Scolar, dengan kata kunci Pengembangan Platform gamifikasi,
Capture The Flag Laboratory, Capture the flag gamification, dan Capture the flag
Jeopardy, alasan menggunakan google scolar sebagai pencarian jurnal adalah karena
dihalaman website google scolar terdapat banyak sekali penelitian-penelitian tentang
pembelajaran CyberSecurity dan juga tentang Capture The Flag (CTF) selain
pencarian menggunakan jurnal pada Google Scolar, pencarian artikel juga sangat
membantu dalam mengembangkan platform.

3.2 Perancangan Konsep


Sebelum mengembangkan platform pembelajaran CyberSecurity dengan metode
gamifikasi Capture The Flag (CTF),memerlukan beberapa perencanaan dan
perancangan konsep yang memiliki tujuan agar nantinya sistem yang dikembangkan
dapat sesuai dengan apa yang di teliti nanti nya, berikut adalah perancangan yang
diperlukan untuk mengembangkan platform pembelajaran CyberSecurity dengan
metode gamifikasi Capture The Flag (CTF) ini :

3.2.1 Perancangan Teknologi


Perancangan Teknologi memiliki tujuan untuk memilih teknologi apa saja yang dapat
digunakan untuk mengembangkan platform pembelajaran CyberSecurity dengan
metode gamifikasi Capture The Flag (CTF), agar dapat berjalan dan bekerja dengan
maksimal dan didapatkan beberapa teknologi yang cocok adalah sebagai berikut :

1. Perangkat yang di gunakan dalam Pengembangan


a. Perangkat lunak

22 Teknik Informatika-ITI
Perangkat lunak yang digunakan dalam proses pembuatan dan pengembangan
platform platform pembelajaran CyberSecurity dengan metode gamifikasi Capture
The Flag (CTF) ini:
a. Visual Studio Code versi 1.87
b. Laragon Versi 11
c. Laravel 10
d. MySQL Workbanch Versi 12
e. Google Chrome Versi 122.0.6261.95

b. Perangkat keras
Perangkat keras yang digunakan dalam proses pembuatan platform pembelajaran
CyberSecurity dengan metode gamifikasi Capture The Flag (CTF) adalah :

No. Aspek Spesifikasi


1. OS Windows 10
2. Ram 8 GB
3. HDD 1 TB
4. Processor Intel Core I3 7th Gen
5. Merek Lenovo Idea Pad

Tabel 3. 1 Spesifikasi

2. Spesifikasi Minimum Perangkat Keras & Perangkat Lunak


a. Perangkat Keras
Kebutuhan Minimum Perangkat Keras yang di sarankan dalam platform
pembelajaran cybersecurity adalah sebagai berikut :
a. Processor : Intel Caleron
b. Storage : 4GB
c. Ram : 4GB

b. Perangkat Lunak

23 Teknik Informatika-ITI
Kebutuhan Minimum Perangkat Lunak yang di sarankan dalam platform
pembelajaran cybersecurity adalah sebagai berikut
a. PHP Version 8.2
b. Laravel 10
c. Goggle Chrome Versi 122.0.6261.95

3.2.2 Perancangan Menu


Perancangan menu bertujuan untuk menampilkan data mengalir pada program atau
aplikasi. Dengan demikian, pembuatan arsitektur tidak lepas dari analisis terhadap
objek data yang telah teridentifikasi di dalam perancangan.

1. Struktur Menu Admin


Struktur Menu Admin di gunakan untuk menjelaskan setiap alur menu pada tampilan
role admin, yang dimulai dari dashboard sampai dengan profile admin, untuk struktur
menu dijelaskan pada gambar 3.2

Gambar 3. 2 Struktur Menu Admin

24 Teknik Informatika-ITI
2. Struktur Menu Instruktur
Struktur Menu Instruktur di gunakan untuk menjelaskan setiap alur menu pada
tampilan role instruktur, yang dimulai dari menambahkan practice sampai dengan
instruktur logout untuk struktur menu instruktur dijelaskan pada gambar 3.3

Gambar 3. 3 Struktur Menu Instruktur

3. Struktur Menu User


Struktur Menu User di gunakan untuk menjelaskan setiap alur menu pada tampilan
role user, yang dimulai dari user menambahkan practice sampai dengan user logout
dari platform pembelajaran untuk struktur menu user di jelaskan pada gambar 3.4

Gambar 3. 4 Struktur Menu User

25 Teknik Informatika-ITI
3.2.3 Perancangan Tampilan
1. Perancangan Halaman Login
Perancangan Halaman Login yang nantinya akan di gunakan untuk merancang
setiap user agar bisa melakukan login, tampilan login di tunjukan pada gambar
3.5.

Gambar 3. 5 Halaman Login

26 Teknik Informatika-ITI
2. Perancangan Dashboard Admin
Perancangan Dashboard Admin, merancang bagaimana cara admin mengelola
setiap data dan sumber daya yang ada pada platform cybersecurity, untuk
perancangan dashboard ditunjukan pada gambar 3.36

Gambar 3. 6 Dashboard Admin

27 Teknik Informatika-ITI
3. Perancangan Account Management
Perancangan tampilan pada Account Management yang nantinya dirancang untuk
digunakan sebagai pengelolaan seperti menambahkan user, menghapus, mengedit
user dan role user, perancangan account management ditunjukan pada gambar 3.7

Gambar 3. 7 Account Management

28 Teknik Informatika-ITI
4. Perancangan Tampilan Add Practice
Perancangan Tampilan Add Practice digunakan untuk merancang bagaiaman cara
admin dan instruktur menambahkan practice ke dalam platform, ditunjukan pada
gambar3.8.

Gambar 3. 8 Add Practice

5. Perancangan Edit Practice


Perancangan Tampilan Edit Practice, digunakan untuk merancang bagaimana cara
melakukan edit pada practice, perancangan tampilan edit practice ditunjukan pada
gambar 3.9

29 Teknik Informatika-ITI
Gambar 3. 9 Edit Practice

6. Perancangan Add Competition


Perancangan Tampilan Add Competition digunakan untuk merancang bagaimana
cara menambahkan competition ke dalam platform, tampilan ditunjukan pada
gambar3.10

Gambar 3. 10 Add Competition


7. Perancangan Edit Competition
Perancangan Edit Competition, digunakan untuk melakukan edit pada competition,
perancangan edit competition ditunjukan pada gambar 3.11

30 Teknik Informatika-ITI
Gambar 3. 11 Edit Competition

8. Perancangan Add Challenges


Perancangan Add Challenges, digunakan untuk merancancang bagaimana cara
admin menambahkan Challenges atau tantangan untuk competition nantinya,
perancangan add challenges ditunjukan pada gambar 3.12

31 Teknik Informatika-ITI
Gambar 3. 12 Add Challenges

9. Perancangan Edit Challenges


Perancangan Edit Challenges digunakan untuk merubah Challenges yang sudah di
tambahkan sebelumnya perancangan Edit Challenges di tunjukan pada gambar
3.13

Gambar 3. 13 Edit Challenges

10. Perancangan Monitoring Competition


Perancangan Monitoring Competition digunakan untuk merancang bagaimana cara
memonitor setiap proses pada Competition yang ditunjukan pada gambar 3.14

32 Teknik Informatika-ITI
Gambar 3. 14 Monitoring Competition
11. Perancangan Add Classroom
Perancangan Add Classroom digunakan untuk merancang bagaimana cara admin
menambahkan Classroom, dan ditunjukan pada gambar 3.15

Gambar 3. 15 Add Classroom


12. Perancangan Classroom List
Perancangan Classroom List yang nantinya akan menampilkan list dari classroom
yang sudah di buat oleh admin, dan admin dapat melakukan Tindakan seperti
mengedit dan menghapus, perancangan classroom list ditunjukan pada gambar
3.16

33 Teknik Informatika-ITI
Gambar 3. 16 Classroom List

13. Perancangan Add Assignment


Perancangan Add Assigmnet digunakan untuk merancang tampilan Add
Assignment yang admin sudah tambahkan, perancangan ditunjukan pada gambar
3.17

14. Perancangan Gambar 3. 17 Add Assignment Submission List


Perancangan Submission List digunakan untuk merancang bagaimana cara agar
admin mengetahui user mana yang sudah mengumpulkan dan mengerjakan
Submission, Submission list ditunjukan pada gambar 3.18

34 Teknik Informatika-ITI
Gambar 3. 18 Sumbsission List

15. Perancangan Practice


Perancangan tampilan Practice, berfungsi untuk merancang tampilan Practice
yang sudah ditambahkan oleh admin ke user agar user bisa mengerjakan practice,
tampilan perancangan Practice di tunjukan pada gambar 3.19.

Gambar 3. 19 Practice
16. Perancangan tampilan Practice Modal
Tampilan Modal Practice, perancangan ini berguna untuk memberikan gambaran
user menginput dan memasukan flag, perancangan ditunjukan pada gambar 3.20

35 Teknik Informatika-ITI
Gambar 3. 20 Prctice Modal
17. Perancangan Tampilan Practice Scoreboard
Perancangan tampilan Practice Scoreboard, merancang bagaimana cara
menampilkan posisi score mereka bila dibandingkan dengan user lain,
perancangan ditunjukan pada gambar 3.21

Gambar 3. 21 Practice Scoreboard


18. Perancangan Competition
Perancangan Tampilan Competition, berfungsi untuk merancang tampilan
competition yang akan ditunjukan kepada user,perancangan digambarkan pada
gambar 3.22

36 Teknik Informatika-ITI
Gambar 3. 22 Competition
19. Perancangan Tampilan Registration
Perancangan Tampilan Registration yang berfungsi untuk merancang bagaimana
cara user mendaftarkan diri ke dalam competition, perancngan registration
ditunjukan pada gambar 3.23

Gambar 3. 23 Registration
20. Perancangan Tampilan Information Competition
Perancangan Tampilan Information Competition, merancang bagaimana cara
memberikan informasi seputar competition , perancangan ditunjukan pada gambar
3.24

37 Teknik Informatika-ITI
Gambar 3. 24 Information
Competition
21. Perancangan Tampilan Scoreboard
Competition
Perancangan Tampilan Scoreboard Competition, yang berfungsi untuk merancang
bagaimana cara menampilkan hasil score dari competition ditunjukan pada gambar
3.25

22. Gambar 3. 25 Scoreboard Competition Perancangan


Tampilan Challenge
Perancangan Tampilan Challenge yang nanti berfungsi menampilkan Challenge
yang sudah ditambahkan oleh admin dan yang akan di kerjakan oleh user, perancangan
ditampilkan
pada gambar 3.26.

38 Teknik Informatika-ITI
Gambar 3. 26 Challenge
23. Perancangan Tampilan Modal Challenge
Perancangan tampilan Modal Challenge, merancang bagaimana cara user
memasukan flag yang sudah didapatkan, perancangan ditunjukan pada gambar
3.27

Gambar 3. 27Modal Challenge


24. Perancangan Classroom List
Perancangan tampilan classroom list menampilkan classroom yang sudah
ditambahkan oleh admin, perancangan ditunjukan pada gambar berikut 3.28

39 Teknik Informatika-ITI
Gambar 3. 28 Classroom List
25. Perancangan Tampilan Enrollment Class
Perancangan Tampilan Enrollment Class, yang berfungsi untuk merancang
bagaimana cara user memasukan class agar bisa di akses nantinya, enrollment
class ditunjukan pada gambar berikut 3.29

Gambar 3. 29 Enrollment Class


26. Perancangan
MyClassroom
Perancangan MyClassroom ,digunakan untuk merancang tampilan class yang
sudah bisa diakses oleh user dan user sudah memasukan enrollment yang sesuai,
perancangan MyClassroom ditunjukan pada gambar 3.30

40 Teknik Informatika-ITI
Gambar 3. 30 MyClassroom

27. Perancangan Assignment list


Perancangan Assignment list, digunakan untuk merancang tampilan Assignment
yang sudah ditambahkan oleh admin, perancangan assignment list ditunjukan pada
gambar 3.31

Gambar 3. 31 Assignment List


28. Perancangan Assignment Card
Perancangan Assignment Card, yang digunakan untuk merancang tempat untuk
menampilkan Assignment dan memasukan submission, perancangan Assignment
Card ditunjukan pada gambar 3.32

41 Teknik Informatika-ITI
Gambar 3. 32 Assignment Card

29. Perancangan Tampilan Profil User


Perancangan tampiilan Profil User, digunakan untuk merancang tampilan profil
pada user, ditunjukan pada gambar 3.33

Gambar 3. 33 Profil User


30.
Perancangan Tampilan User Activity
Perancangan tampilan User Activity, digunakan untuk merancang bagaimana cara
menampilkan activity dari user, ditunjukan pada gambar 3.34

42 Teknik Informatika-ITI
Gambar 3. 34 User Activity

3.3 Pengembangan Sistem

43 Teknik Informatika-ITI
3.3.1 MVC Diagram

Gambar 3. 35 MVC Diagram

Pada gambar 3.35 MVC diagram menggambarkan bahwasanya untuk pembuatan


aplikasi ini menerapkan konsep MVC mengakibatkan kode program dapat dibagi
menjadi tiga kategori yaitu :

a. Model
Model mewakili struktur data, biasanya model berisi fungsi-fungsi yang membantu
seseorang dalam pengelolaan databases seperti create, read, update dan delete
(CRUD), pada gambar 3.35 terdapat beberapa model yang membangun platform
pembelajaran CyberSecurity.

44 Teknik Informatika-ITI
b. View
View adalah bagian yang mengatur tampilan ke pengguna, dalam diagram pada
gambar 3.35 ada beberapa view yang di gunakan seperti admin view, Assignment
view, practice view, competition view, dan classroom view.

c. Controller
Controller merupakan bagian yang menjembatani model dan view, controller biasa
nya berisi perintah atau business logic dari suatu sistem pada gambar 3.35 ada
beberapa controller yang di gunakan untuk membangun platform pembelajaran
CyberSecurity ini seperti ChallengeController, PracticeController,
CompetitionController, ClassroomController, dan Assignment Controller.

3.3.2 Use Case Diagram


1. Use Case Diagram Admin

45 Teknik Informatika-ITI
Gambar 3. 36 UseCase Diagram Admin

Pada gambar 3.36 use case diagram admin pada platform pembelajaran
CyberSecurity, dari use case diatas di gambarkan bagaimana cara admin
mengelola platform pembelajaran CyberSecurity , berikut adalah beberapa Basic
Flow Use Case diagram admin :
1. Admin Menambahkan data practice baru
2. Admin Merubah data practice yang sudah ada sebelum nya
3. Admin Menghapus data practice
4. Admin menambahkan dan mengadakan competition
5. Admin melakukan management pada competition, yang Dimana di dalam
menu competition terdapat 3 buah menu lain yaitu challenges, edit
competition dan hasil competition.
6. Admin menambahkan classroom.
7. Admin melakukan management pada classroom yang Dimana pada menu
management ini terdapat beberapa submenu seperti menambahkan
assignment dan juga edit classroom.
8. Admin dapat menghapus classroom

2. Use Case Instruktur

46 Teknik Informatika-ITI
Gambar 3. 37 UseCase diagram instruktur

Pada gambar 3.37 use case diagram instruktur pada platform pembelajaran
CyberSecurity, dari use case diatas di gambarkan setiap aktivitas yang dapat di
lakukan oleh instruktur di dalam platform pembelajaran, berikut adalah aktivitas
yang dapat di lakukan oleh instruktur sesuai dengan use case di atas :
1. Instruktur dapat menambahkan practice
2. Instruktur dapat merubah practice
3. Instruktur dapat menambahkan competition
4. Inasturktur dapat memanagement competition, dan di dalam menu
management competition ini instruktur dapat melakukan beberapa hal lain
seperti menambahkan challenges, mengedit competition dan melihat hasil
competition.
5. Instruktru dapat menambahkan classroom
6. Instruktur dapat memanagement classroom, di dalam menu management
classroom terdapat mebeberapa sub menu yang dapat di lakukan oleh
instruktur seperti menambahkan assignment dan mengedit classroom.

3. Use Case Siswa

47 Teknik Informatika-ITI
Gambar 3. 38 UseCase User
Pada gambar 3.38 use case diagram siswa pada platform pembelajaran
CyberSecurity, dari use case diatas digambarkan setiap aktivitas yang dapat di
lakukan oleh siswa didalam platform pembelajaran cybersecurity ini, berikut
adalah penjelasan aktivitas sesuai dengan yang digambarkan pada usecase
diatas:
1. Siswa dapat melakukan pelatihan di dalam fitur practice
2. Siswa dapat mengikuti competition, di dalam competition ini terdapat
beberapa sub menu yang dapat siswa akses seperti scoreboard yang
menampilkan hasil competition dan juga information competition yang dapat
menampilkan informasi dari competition.
3. Siswa dapat memasuki classroom, didalam classroom ada beberapa menu
lain yang dapat siswa akses seperti menu Classroom list yang menampilkan
list classroom yang tersedia, dan juga MyClassroom yang menampilkan
classroom yang sudah dapat diakses oleh siswa.

48 Teknik Informatika-ITI
3.3.3 Class Diagram

Gambar 3. 39 Class Diagram


Gambar 3.39 Class diagram menghasilkan 13 class yang memiliki atribut dan operasi
nya masing-masing, diantaranya ada class diagaram Role, User, Competition,
Practice, Category, Challenge, User_Point, Users_Score, class, Assignment,

49 Teknik Informatika-ITI
submission dan users_classroom_access, setiap class saring terhubung satu sama lain
yang menghasilkan sebuah sistem yang dapat bekerja dengan baik.

3.3.4 Sequence Diagram


a. Sequence Diagram Admin

Gambar 3. 40 Sequence Diagram Admin

Gambar 3.40 Sequence Diagram yang menjelaskan bagaimana proses yang dilakukan
oleh admin yang menggambarkan dalam pengelolaan semua sumber daya yang ada
didalam platform pembelajaran CyberSecurity, yang dimulai dari admin login,
menambahkan user dan mengelola user, menambahkan dan mengelola practice,
sampai ke mengelola data assignment.

50 Teknik Informatika-ITI
b. Sequence Diagram Instruktur

Gambar 3. 41 Sequence Diagram Instruktur

Gambar 3.41 Squence diagram instruktur, yang menggambarkan bagaimana cara


objek Instruktur menambahkan data pada platform CyberSecurity, mengelola data
seperti data practice, competition, classroom, dan assignment.

51 Teknik Informatika-ITI
c. Squence Diagram User

Gambar 3. 42 Sequence Diagram User

Gambar 3.42 Squence diagram user, yang menggambarkan bagaimana cara objek
user berinteraksi dengan sistem, mulai dari user mengerjakaan practice, user masuk
atau berpartisipasi ke dalam competition, user bergabung dengan classroom, sampai
dengan user mengerjakan Assignment.

52 Teknik Informatika-ITI
3.3.5 Deployment diagram

Gambar 3. 43 Deployment Diagram

Pada gambar 3.43 Deployment diagram menampilkan bagaimana melakukan


deployment terhadap platform pembelajaran cybersecurity, untuk melakukan
deployment terdapat beberapa entitas agar platform dapat di deploy dengan baik, berikut
adalah beberapa entitas yang tergabung dalam tahap deployment :
1. Client PC
Client PC adalah perangkat yang digunakan oleh user untuk mengakses platform
pembelajaran cybersecurity.
2. Browser
Karena platform pembelajaran cybersecurity berbasis website, maka diperlukan
browser untuk mengakses platform ini.
3. Server
Server digunakan untuk menyimpan semua sumber daya yang diperlukan dalam
mendeploy platform cybersecurity.
4. Database
Database digunakan sebagai wadah untuk menyimpan semua data yang ada
didalam platform
5. Web Server
Web Server berfungsi sebagai perantara antara pengguna dan situs web, agar
website bisa diakses oleh pengguna.

53 Teknik Informatika-ITI
3.3.6 Entity Relationship Diagram (ERD)

Gambar 3. 44 Entity Relationship Diagram (ERD)

54 Teknik Informatika-ITI
3.3.7 Perancangan Table
1. Tabel Role
Field Type Length Atribut
id_role BIGINT 20 PRIMARY KEY
Name VARCHAR 10
created_at TIMESTAMP
updated_at TIMESTAMP

2. Tabel User

Tabel 3. 2 Table Role


Field Type Length Attribut
id_user BIGINT 20 PRIMARY KEY
Name VARCHAR 25
Email VARCHAR 25
role_id BIGINT 25 FOREIGN KEY
Password VARCHAR 25
created_at TIMESTAMP
updated_at TIMESTAMP

3. Tabel User_Point

Tabel 3. 3 Tabel User


Field Type Length Atribut
id_Point BIGINT 20 PRIMARY KEY
Point VARCHAR 100
user_id BIGINT 20
challenge_id BIGINT 20

55 Teknik Informatika-ITI
created_at TIMESTAMP
updated_at TTIMESTAMP
Tabel 3. 4 Tabel User Point

4. Tabel Category

Field Type Length Atribut


id_category BIG INT 20 PRIMARY KEY
Name VARCHAR 10
created_at TIMESTAMP
updated_at TIMESTAMP
Tabel 3. 5 Tabel Category

5. Tabel Challenges

Field Type Length Atribut


id_challenges BIGINT 20 PRIMARY KEY
Name VARCHAR 10
category_id BIGINT 10 FOREIGN KEY
Description VARCHAR 200
Value INT 10
Flag VARCHAR 30
user_id BIGINT 10
created_at TIMESTAMP
updated_at TIMESTAMP
Tabel 3. 6 Tabel Challenges

6. Tabel Registrations

Field Type Length Atribut


id_registration BIGINT 20 PRIMARY KEY

56 Teknik Informatika-ITI
Name VARCHAR 10
Gender ENUM ‘M’,’F’
Email VARCHAR 25
Username VARCHAR 25
phone_number BIGINT 19
user_id BIGINT 20 FOREIGN KEY
competition_id BIGINT 20 FOREIGN KEY
created_at TIMESTAMP
updated_at TIMESTAMP
Tabel 3. 7 Tabel Registrations

7. Tabel Competition

Field Type Length Atribut


id_competition BIGINT 20 PRIMARY KEY
Name VARCHAR 50
Description VARCHAR 200
Start DATETIME
End DATETIME
Image VARCHAR 100
created_at TIMESTAMP
updated_at TIMESTAMP
Tabel 3. 8 Tabel Competitions

8. Tabel Class

Field Type Length Atribut


id_Class BIGINT 20 PRIMARY KEY
Name VARCHAR 50
Description VARCHAR 200
Key DATETIME
created_at TIMESTAMP
updated_at TIMESTAMP
Tabel 3. 9 Tabel Class

9. Tabel Member

57 Teknik Informatika-ITI
Field Type Length Atribut
id_member BIGINT 20 PRIMARY KEY

user_id VARCHAR 50 FOREIGN KEY

class_id VARCHAR 200 FOREIGN KEY

Role DATETIME

created_at TIMESTAMP

updated_at TIMESTAMP

Tabel 3. 10 Tabel Member

10. Tabel Assignment

Field Type Length Atribut

id_assigment BIGINT 20 PRIMARY KEY

class_id BIGINT 20 FOREIGN KEY

Title VARCHAR 20

Description VARCHAR 50

Deadline DATETIME

Tabel 3. 11 Tabel Assignment


11. Tabel Submission

Field Type Length Atribut


id_Submission BIGINT 20 PRIMARY KEY
assigment_id BIGINT 20 FOREIGN KEY
user_id BIGINT 20 FOREIGN
submission_time DATETIME
File VARCHAR 20
Tabel 3. 12 Tabel Submission

58 Teknik Informatika-ITI
3.3.8 Pemrograman
1. Menampilkan Practice
Source Code yang digunakan untuk menampilkan data Practice kepada user
ditunjukan pada code ditampilkan pada gambar 3.45

59 Teknik Informatika-ITI
Gambar 3. 45 Source Code Practice
2. Save Practice
Untuk menyimpan data practice ditunjukan pada code yang di tunjukan pada 3.46

Gambar 3. 46 Source Code Save Practice

60 Teknik Informatika-ITI
3. Validasi Flag
Untuk melakukan validasi flag, yang sudah di masukan oleh admin dan user akan
di bandingkan dijelaskan pada code yang di tunjukan pada Gambar 3.47

Gambar 3. 47 Source Code Validasi Flag

4. Scoreboard Practice

61 Teknik Informatika-ITI
Untuk menampilkan scoreboard practice, mengurutkan peringkat berdasarkan
point yang sudah di proleh di jelaskan pada code program yang ditunjukan pada
gambar 3.48

Gambar 3. 48 Source Code Scoreboard Practice

62 Teknik Informatika-ITI
5. Registrasi Peserta
Untuk melakukan Registrasi pada Kompetisi dijelaskan pada code yang ditunjukan
pada gambar 3.49

Gambar 3. 49 Source Code Registrasi Peserta


6.
Menampilkan Competition
Untuk menampilkan competition dijelaskan pada code yang ditunjukan pada 3.50

Gambar 3. 50 Competition

63 Teknik Informatika-ITI
7. Scoreboard
Untuk menampilkan scoreboard pada competition dijelaskan pada code yang
ditunjukan pada gambar 3.51

Gambar 3. 51 Competition Scoreboard


8. Dynamic Score
Untuk mengatur pengaturan score Dynamic dijelaskan pada gambar 3.52

Gambar 3. 52 Dynamic Score

64 Teknik Informatika-ITI
9. Menampilkan Classroom
Untuk menampilkan Classroom dan my Classroom dijelaskan pada code yang
ditunjukan pada gambar 3.53

Gambar 3. 53 Show Classroom

10. Menampilkan Assignment


Untuk menampilkan Assignment yang sudah dibuat oleh instruktur dijelaskan pada
gambar 3.54

Gambar 3. 54 Show Assignment

65 Teknik Informatika-ITI
11. Menampilkan dan menyimpan submission
Untuk menampilkan dan menyimpan submission ditunjukan dan dijelaskan pada
gambar 3.55

66 Teknik Informatika-ITI
Gambar 3. 55 Submission

67 Teknik Informatika-ITI
3.4 Penambahan Tantangan
Penambahan tantangan merupakan tahapan yang terjadi setelah tahap
pengembangan sistem, penambahan tantangan memerlukan beberapa hal yang harus di
pertimbangkan yang berguna agar nantinya tantangan dapat menjadi pembelajaran dan
penyesuaian bagi peserta, pertimbangan dalam penambahan tantangan di antaranya
adalah :

1. Identifikasi Kategori Tantangan


Tentukan kategori atau jenis tantangan yang ingin di sertakan. Beberapa kategori
umum meliputi kriptografi, pwn (penetration), forensik, reverse engineering,
steganografi, dan web.

2. Rancang Skenario dan Cerita:


Berikan tantangan dengan skenario atau cerita yang menarik. Ini dapat
meningkatkan minat peserta dan memberikan konteks pada tantangan. Sebagai
contoh, tantangan dapat diberikan dalam konteks "penyerangan keamanan siber
pada perusahaan X.

3. Pilih Kesulitan yang Bervariasi:

68 Teknik Informatika-ITI
Sertakan tantangan dengan tingkat kesulitan yang bervariasi, mulai dari yang
mudah hingga yang sulit. Ini memungkinkan peserta dengan berbagai tingkat
keahlian untuk berpartisipasi.

4. Bangun Tantangan dengan Dasar Teori yang Kuat:


Pastikan setiap tantangan didasarkan pada konsep atau teori keamanan yang kuat.
Hal ini membantu peserta untuk memahami dan belajar dari setiap tantangan.

5. Uji Tantangan Secara Mendalam:


Uji setiap tantangan secara menyeluruh sebelum meluncurkannya. Pastikan tidak
ada kelemahan atau bug yang dapat dimanfaatkan untuk mencapai flag tanpa
menjalani proses yang benar.

6. Berikan Poin atau Bobot untuk Setiap Tantangan:


Atur sistem penilaian dengan memberikan poin atau bobot untuk setiap tantangan.
Tantangan yang lebih sulit dapat memberikan poin lebih tinggi untuk
meningkatkan daya tarik dan persaingan.

7. Sertakan Flag atau Token Unik:


Setiap tantangan harus memiliki flag atau token unik yang dapat dicari dan
ditemukan oleh peserta sebagai bukti keberhasilan menyelesaikan tantangan.

8. Sertakan Petunjuk Jika Perlu:


Jika tantangan bersifat sulit atau rumit, pertimbangkan untuk menyertakan
petunjuk atau hint yang membantu peserta memahami langkah-langkah yang
diperlukan.

69 Teknik Informatika-ITI
3.5 Deployment
1. Dashboard DomaiNesia
Dashboard Domainesia menampilkan menu yang berfungsi untuk memulai
melakukan deployment, dashboard domainesia ditunjukan pada gambar 3.56

Gambar 3. 56 Dashboard DomaiNesia

70 Teknik Informatika-ITI
2. Halaman MyServices
Setelah masuk ke halaman dashboard lalu pilih halman MyServices dan pilih menu
Hosting 3.0 dan klik Hosting Super 3.0 -ID, Yang ditunjukan pada gambar 3.57.

Gambar 3. 57 MyServices

3. Halaman cPanel Domainesia


Setelah memilih menu MyServices dan memilih Hosting Super 3.0 -ID, maka akan
menampilkan menu cPanel Domainesia pada menu ini berfungsi untuk melakukan
sistem control, pada halaman ini pilih Select Php Version Yang di tunjukan pada
gambar 3.58
4.

Gambar 3. 58 cPanel Domainesia

Halaman Select Php Version

71 Teknik Informatika-ITI
Pada halaman Select Php Version, Menampilkan menu untuk memilih versi php,
karena pada Platform Pembelajaran CyberSecurity memakai Laravel 10 yang
berjalan di php 8.1 maka php version setting di php 8.1, yang ditunjukan pada
gambar 3.59

Gambar 3. 59 Php Version

5. File Manager
Setelah Melakukan Seting terhadap PHP version, Langkah selanjutnya adalah
mengupload file pada menu File Manager, pada halaman file manager upload
semua struktur file website yang akan di hosting pada halaman public_html,seperti
yang ditunjukan pada gambar 3.60

Gambar 3. 60 FIle Manager

72 Teknik Informatika-ITI
6. Database
Langkah selanjutnya setelah mengupload semua file adalah melakukan seting
terhadap Database, pada halaman Databases menampilkan menu untuk membuat
databases pada web, masukan database baru dan klik create database seperti yang
ditunjukan pada gambar 3.61

Gambar 3. 61 Database
7. MySql User
pada halaman ini menampilkan 2 form untuk menginputkan username dan
password, seperti yang ditunjukan pada gambar 3.62

Gambar 3. 62 MySql User


8. Halaman Export Database

73 Teknik Informatika-ITI
Setelah melakukan setingan terhadap database, Langkah selanjut nya adalah export
table database dari database local,proses export ditunjukan pada gambar 3.63

Gambar 3. 63 Export Database

9. Halaman Import Database


Setelah melakukan export pada database local, maka import database ke dalam
phpMyAdmin yang sudah di sediakan oleh domainesia. Seperti yang ditunjukan
pada gambar 3.64

Gambar 3. 64 Import Database

74 Teknik Informatika-ITI
10. Pengaturan Environment
Setelah melakukan import databases, Langkah selanjut nya adalah
menghubungkan program ke database dengan mengatur environment ,Pada
pengaturan environtment ini rubah DB_USERNAME, DB_PASSWORD, DAN
DB_NAME, sesuai dengan data yang sudah dimasukan pada halaman databases
sebelumnya, tampilan Environment ditunjukan pada gambar 3.65

11.

Gambar 3. 65 Environment

Tampilan Leanding Page


Setelah semua selesai di seting dan databases sudah di import maka platform
CyberSecurity siap digunakan dan dapat diakases melalui URL https://iti-ctf.xyz/.
Leanding Page di tunjukan pada gambar 3.66

75 Teknik Informatika-ITI
Gambar 3. 66 Leanding Page

BAB 4

IMPLEMENTASI

76 Teknik Informatika-ITI
Aplikasi yang dibangun dapat langsung di jalankan dengan mengakses URL https://iti-
ctf.xyz/ Aplikasi ini dapat diakses dengan menggunakan menggunakan browser yang
umum digunakan, seperti: Google Chrome, Microsoft Edge, Mozilla Firefox, Opera,
Safari.

4.1 Implementasi Antarmuka


Berikut adalah implementasi tampilan aplikasi yang ditunjukan saat pengguna mengakses
laman URL https://iti-ctf.xyz/.

1. Halaman Utama
Halaman utama menampilkan judul website, logo website dan background website,
dibagian atas halaman utama menampilkan navbar yang berfungsi untuk mengarahkan user
ke halaman login atau register. Halaman utama ditunjukan pada gambar 4.1

Gambar 4. 1 Halaman Utama

2. Halaman Registrasi

77 Teknik Informatika-ITI
Halaman registrasi menampilkan form registrasi yang dimana user dapat mendaftarkan
diri terlebih dahulu agar bisa masuk ke dalam platform pembelajaran CyberSecurity.
ditunjukan pada gambar 4.2
3.

Gambar 4. 2Halaman Registrasi

Halaman Login
Halaman login page menampilkan halaman yang dimana user dapat masuk ke dalam
platform pembelajaran CyberSecurity dengan username dan password yang sudah user
registrasikan sebelum nya, ditunjukan pada gambar 4.3

Gambar 4. 3 Halaman Login

78 Teknik Informatika-ITI
4.1.1 Implementasi Antarmuka Admin
a. Halaman Dashboard
Tampilan Dashboard Admin menampilkan menu yang dapat admin kelola, dan
menampilkan statistic yang dimana admin dapat melihat perkembangan setiap user di
statistic tersebut. Dashboard di tunjukan pada gambar 4.4
b.

Gambar 4. 4 Dashboard
Tampilan User Management
Tampilan user management menampilkan data user yang sudah masuk dan sudah
registrasi, melakukan management terhadap user seperti mengedit dan menghapus user

Gambar 4. 5 User Management

79 Teknik Informatika-ITI
c. Tampilan Edit User
Tampilan Edit user, menampilkan user data user yang sudah dipilih oleh admin dan
akan dirubah oleh admin, admin dapat merubah Name, Role, Password dan kata sandi.
Seperti yang ditunjukan pada gambar 4.6

Gambar 4. 6 Edit User

d. Tampilan Add Practice


Tampilan Add Practice, menampilkan data practice yang sudah ditambahkan oleh
admin, didalam menu ini admin dapat mengelola data practice yang sudah admin

Gambar 4. 7 Add Practice


80 Teknik Informatika-ITI
tambahkan seperti mengedit atau menghapus practice seperti yang di tunjukan pada
gambar 4.7
e. Tampilan Form Add Practice
Tampilan Form Add Practice, menampilkan form yang nanti nya digunakan oleh
admin atau instruktur dalam memasukan data practice, ditunjukan pada gambar 4.8
f.

Gambar 4. 8 Add Practice


Tampilan Edit Practice
Tampilan Edit Practice, Menampilkan Form Edit Practice, yang sudah ditambahkan
oleh admin, ditunjukan pada gambar 4.9

Gambar 4. 9 Edit Practice


81 Teknik Informatika-ITI
g. Tampilan Add Competition
Tampilan Add Competition, Menampilkan data kompetisi yang sudah ditambahkan
oleh admin, seperti yang ditunjukan pada gambar 4.10

Gambar 4. 10 Add Competition

h. Tampilan Form Add Competition


Tampilan Form Add Competition, Menampilkan Form untuk menambahkan data
competition Form menampilkan setingan penilaian competition yang dapat dipilih
oleh user apakah standard atau dynamic, seperti yang ditunjukan pada gambar 4.11.
i. Tampilan Form Edit Competition

Gambar 4. 11 Form Add Competition

82 Teknik Informatika-ITI
Tampilan Form Edit Competition, Menampilkan Form untuk mengedit data competition
yang sudah dibuat, form Edit Competition ditunjukan pada gambar 4.12

Gambar 4. 12 Edit Competition

j. Tampilan Add Challenges

Tampilan Add Challenges, Menampilkan data challenges yang sudah dipersiapkan


oleh admin untuk diselesaikan oleh user di dalam competition yang sudah dibuat oleh
admin, seperti yang ditunjukan pada gambar 4.13.

Gambar 4. 13 Add Challenges

83 Teknik Informatika-ITI
k. Tampilan Form Add Challenges

Tampilan Form Add Challenges, Menampilkan form untuk menambahkan data


Challenges ke dalam sebuah competition, seperti yang ditunjukan pada gambar 4.14

l.Tampilan Form Edit Challenges

Gambar 4. 14 Add Challenges

Gambar 4. 15 Edit Challenges

Tampilan Form Edit Challenges, Menampilkan form untuk mengedit data challenges
yang sudah ditambahkan oleh admin sebelumnya, halaman edit challenges d tunjukan
pada gambar 4.15

m. Tampilan Competition Statistic

84 Teknik Informatika-ITI
Tampilan Competition Statisctic, menampilkan statistic selama competition, dalam
halaman ini admin juga dapat melakukan pemantauan langsung terhadap sebuah
competition yang sudah berlangsung, seperti yang ditunjukan pada gambar 4.16

n. Tampilan form Add Classroom

Gambar 4. 16 Competition Statistic

Gambar 4. 17 Add Classroom


Tampilan form Add Classroom, Menampilkan form yang di gunakan untuk
menambahkan data Classroom ke dalam platform cybersecurity ini., seperti yang
ditunjukan pada gambar 4.17

o. Tampilan Form Edit Classroom

85 Teknik Informatika-ITI
Tampilan form Edit Classroom, Menampilkan form yang di gunakan untuk
mengedit data classroom yang sebelum nya sudah di tambahkan oleh admin, seperti
yang ditunjukan pada gambar 4.18

p. Tampilan Classroom List

Gambar 4. 18 Edit Classroom

Gambar 4. 19 Classroom List

Tampilan Classroom List, Menampilkan data classroom yang Sudah di tambahkan


oleh admin sebelumnya, seperti yang ditunjukan pada gambar 4.19

q. Tampilan Add Assignment

86 Teknik Informatika-ITI
Tampilan Add Assignment, Menampilkan semua data assignment yang sudah admin
tambahkan sebelum nya, seperti yang ditunjukan pada gambar 4.20

Gambar 4. 20 Add Assignment

r. Tampilan Form Add Assignment

Tampilan Form Add Assignment, Menampilkan form untuk menambahkan data


Assignment ke dalam data classroom, seperti yang ditunjukan pada gambar 4.21

Gambar 4. 21 Add Assignment

s. Tampilan Edit Assignment

87 Teknik Informatika-ITI
Tampilan Edit Assignmet , Menampilkan form Edit Assignment, yang digunakan untuk
merubah data assignment yang Sudah ditambahkan sebelum nya.seperti yang
ditunjukan pada gambar 4.22

t.

Gambar 4. 22 Edit Assignment

Tampilan Submission List

Tampilan Submission List, Menampilkan data submission yang sudah di kumpulkan


oleh user berdasarkan pada assignment, di sini admin dapat mendownload hasil
pekerjaan dari user, seperti yang di tunjukan pada gambar 4.23

Gambar 4. 23 Submission List

88 Teknik Informatika-ITI
4.1.2 Implementasi Antarmuka User
a. Tampilan Halaman Practice

Tampilan halaman practice, Menampilkan data dari semua practice yang sudah di
tambahkan oleh admin atau instruktur yang nantinya dapat dikerjakan oleh user,
Ketika user mengerjakan practice dan practice yang di kerjakan user benar maka user
akan mendapatkan point, seperti yang ditunjukan pada gambar 4.24

b. Tampilan Halaman Modal Practice

Gambar 4. 24 Practice

89 Teknik Informatika-ITI
Tampilan Halaman Modal Practice, Menampilkan modal yang nantinya akan
memberikan petunjuk kepada user apa isi dari data practice, dan di dalam modal juga
ada form input flag yang berguna sebagai tempat user memasukan flag, serta tombol
hints untuk memberikan petunjuk kepada user, yang ditunjukan pada gambar 4.25
c.

Gambar 4. 25 Modal Practice

Tampilan Halaman Scoreboard User


Tampilan Halaman Scoreboard, menampilkan data score semua user yang sudah
tergabung ke dalam platform cybersecurity, pada halaman ini menampilkan
peringkat score user dan history pengerjaan practice dari setiap user, yang
ditunjukan pada gambar 4.26
d.

Gambar 4. 26 Scoreboard User

Tampilan Halaman Competition

90 Teknik Informatika-ITI
Tampilan Halaman Competition, menampilkan data competition yang sudah di buat
oleh admin atau instruktur, masing-masing warna dalam competition
melambangkan status competition, biru berarti status competition up coming, hijau
status competition on going dan merah status competition finished, yang ditunjukan
pada gambar 4.27
e. Tampilan form registrasi

Gambar 4. 27 Competition

Tampilan form registrasi, menampilkan form yang dimana berfungsi sebagai tempat
user untuk mendaftarkan diri kedalam competition. Yang di tunjukan pada gambar
4.28

f. Tampilan Halaman Information Competition

91 Teknik Informatika-ITI
Gambar 4. 28 Registrasi
Tampilan Halaman Information Competition, menampilkan data informasi tentang
competition yang nantinya akan didaftarkan oleh user, data informasi terdiri, event
type, format, location, jumlah player yang sudah bergabung, dan jumlah challenges
yang tersedia, yang ditunjukan pada gambar 4.29
g.

Gambar 4. 29 Information Competition


Tampilan Halaman Challenges

Tampilan Halaman Challenges, berisi halaman cahallenges yang ada didalam


masing-masing competition yang nantinya akan dikerjakan oleh user dan jika
benar akan mendapatkan score, seperti yang di tunjukan pada gambar 4.30

h.

Gambar 4. 30 Challenges
Tampilan Halaman modal pada challenges

92 Teknik Informatika-ITI
Tampilan Halaman modal challenges, berisi tentang informasi dari challenges yang
akan di kerjakan oleh user dan tempat user menginput flag atau jawaban. seperti
yang ditunjukan pada gambar 4.31

Gambar 4. 31 Modal Challenges

i. Tampilan Halaman Scoreboard


Tampilan Halaman Scoreboard, menampilkan score akhir dan peringkat yang
diperoleh oleh user, scoreboard akan tampil Ketika competition sudah memiliki
status finished, seperti yang di tunjukan pada gambar 4.32
j. Tampilah Halaman Classroom list

Gambar 4. 32 Scoreboard

93 Teknik Informatika-ITI
Tampilan Halaman Classroom list, menampilkan list classroom yang tersedia dan
belum user masukan enrollment key ke dalam nya. halaman classroom list
ditunjukan pada gambar 4.33

k.

Gambar 4. 33 Classroom List


Tampilan halaman Enrollment key
Tampilan halaman Enrollment key, adalah halaman yang dimana berisi tentang
description dari masing-masing classroom pada halaman ini juga berisi enrollment
key yang dimana user harus memasukan enrollment yang sesuai agar bisa mengakses
class.Halaman Enrollment Key ditunjukan pada gambar 4.34
l.

Gambar 4. 34 Enrollment Key


Tampilan Halaman MyClassroom

94 Teknik Informatika-ITI
Tampilan Halaman MyClassroom, halaman ini berisi tentang classroom yang sudah
bisa di akses oleh user dan enrollment key nya sudah sesuai. Yang ditunjukan pada
gambar 4.35

Gambar 4. 35 My Classroom

m. Tampilan halaman Assignment


Tampillan halaman Assignment, halaman assignment berisi tentang semua data
assignment yang sudah ditambahkan oleh admin atau instruktur ke dalam
classtersebut, seperti yang ditunjukan pada gambar 4.36.
n. Tampilan MyProfil

Gambar 4. 36 Assignment

95 Teknik Informatika-ITI
Tampilan Halaman Myprofil, halaman ini menampilkan data profile dari user, pada
halaman ini user dapat merubah data mereka sesuai dengan keinginan user seperti
yang ditunjukan pada gambar 4.37

Gambar 4. 37 MyProfile

o. User Activity
Tampilan User Activity menampilkan statistic user, yang dimana statistic ini
berasal dari category practice yang sering user kerjakan, user Activity berfungsi
untuk mengetahui potensi user di bidang cybersecurity, seperti yang ditunjukan
pada gambar 4.38

Gambar 4. 38 User Activity

96 Teknik Informatika-ITI
4.2 Capture The Flag (CTF) Challenge
a. Halaman Practice Modal
Halaman Modal Practice menampilkan deskripsi dari practice, dan di sini
menyediakan form untuk memasukan flag yang sudah di temukan, untuk modal
practice di tunjukan pada gambar 4.39
b. Halaman link Web Expolitation

Gambar 4. 39 Practice Modal

Gambar 4. 40 Web Expolitation

Halaman link web exploitation menampilkan web yang dapat di exploitation untuk
mendapatkan sebuah flag yang nantinya akan di masukan ke dalam modal flag,
pada halaman web ini hanya menampilkan warna red dan blue, di tunjukan pada
gambar 4.40

c. Halaman Page Source

97 Teknik Informatika-ITI
Pada halaman ini menampilkan source code practice Web Expolitation, di sini di
tunjukan untuk http request bila kita memilik warna merah akan menghasilkan Get dan
warna biru akan menghasilkan Post, untuk Page Source di tunjukan pada gambar 4.41

Gambar 4. 41 Page Source

d. Burp Suite
Untuk merubah http request get menjadi head kita akan menggunakan tools yang
Bernama burp suite, tampilan burp suite ditampilkan pada gambar 4.42

Gambar 4. 42 Brup Suite

98 Teknik Informatika-ITI
e. Halaman Proxy Burp suite

Pada halama proxy burp suite ini, klik tombol intercpt on lalu open browser yang di
miliki oleh burp suite, dengan menekan intercept on maka semua lalulintas jaringan
akan terpantau. Seperti yang di tunjukan pada gambar 4.43

Gambar 4. 43 Proxy Burp Suite

f. Tampilan Http Request Brup Suite

pada tampilan http request brup suite menampilkan hasil transmisi saat
melakukan request ke dalam server, pada hasil request di tunjukan halaman
website berwarna merah yang berarti memiliki http request GET, ganti method
request GET dengan HEAD untuk dapat langsung membaca method header, lalu
kirim response ke server, maka flag akan muncul. Seperti yang di tunjukan pada
gambar 4.44

g. Tampilan Flag

Gambar 4. 44 Http Request


99 Teknik Informatika-ITI
Saat request Get sudah di ganti dengan Head maka secara otomatis kita dapat
membaca header yang ada di dalam challenge tersebut. Gambar tampilan flag di
tunjukan pada gambar 4.45

Gambar 4. 45 Flag
h.
Input Flag

Setelah mendapatkan flag dari challenge, input flag ke dalam form flag yang
ada di modal, untuk tampilan modal di tunjukan pada gambar 4.46

Gambar 4. 46 Input Flag

100 Teknik Informatika-ITI


i. Tampilan modal challenge benar
Tampilan modal challenge benar akan muncul jika flag yang di masukan benar .
jika flag yang di masukan salah maka akan muncul modal Challenge Salah
untuk Input Flag di tunjukan pada gambar 4.47

Gambar 4. 47 Modal Challenge

101 Teknik Informatika-ITI


BAB 5

PENUTUP

5.1 Kesimpulan
Berdasarkan hasil implementasi dari rangkaian proses pengembangan platform
pembelajaran cybersecurity dengan metode gamifikasi capture the flag (CTF), berhasil
mendapatkan kesimpulan antara lain adalah sebagai berikut :
1. Dalam pengerjaan tugas akhir ini telah berhasil membuat platform pembelajaran
cybersecurity dengan metode gamifikasi capture the flag (CTF), berbasis website.
2. Diharapkan platform pembelajaran berbasis web ini dapat membantu dalam
pembelajaran cybersecurity.

5.2 Saran
Penelitian tugas akhir ini masih belum sempurna, ada beberapa hal yang masih dapat
di kembangkan dan diperbaiki dari penelitian ini agar menjadi lebih sempurna dan
lebih maksimal, saran yang dapat di kembangkan dari platform ini adalah :
1. Platform pembelajaran CyberSecurity yang telah di kembangkan dapat di perbaiki
dari sisi FrontEnd.
2. Platform pembelajaran Cyberscurity memerlukan server yang aman sebagai tempat
implementasi setiap tantangan yang ada pada platform.

102 Teknik Informatika-ITI


DAFTAR REFERENSI

Hadiprakoso, R. B., & Satria, W. A. (2022). Rancang Bangun Aplikasi Gamifikasi


Untuk Meningkatkan Kesadaran Keamanan Siber. Jurnal Ilmiah Ilmu Komputer
Fakultas Ilmu Komputer Universitas Al Asyariah Mandar, 8(2), 94-100.

Putra, M. D. (2022). KAJIAN SISTEMATIS TERHADAP PENERAPAN APLIKASI


CAPTURE THE FLAG UNTUK PEMBELAJARAN CYBERSECURITY
MENGGUNAKAN CLOUD BASED VIRTUAL LAB.

Rohman, A. N. (2022). Evaluasi Terhadap Media Pembelajaran Cybersecurity Daring


Berbasis Capture the Flag Ditinjau dari Aspek Ethical Hacking dan Aspek
Gamifikasi.

Gerysena, M. A. (2022). Rancang Bangun Sistem Kompetisi Keamanan Jaringan


Online Berbasis Web pada UKM Protek Divisi Keamanan Jaringan. Jurnal
Teknologi Terkini, 2(5).

Chen, L. K., Jenalis, M. H., & Juremi, J. (2023). Towards Inclusive Cybersecurity
Learning: A Novice-Friendly Capture-the-Flag Onboarding Platform. Journal of
Applied Technology and Innovation (e-ISSN: 2600-7304), 7(4), 60.

Santiago Lozada, R. E. (2019). Capture the flag (ctf): Website tutorial to boost
cybersecurity training. Computer Science;.

Carlisle, B., Reininger, M., Fox, D., Votipka, D., & Mazurek, M. L. (2020). On the
other side of the table: Hosting capture the flag (ctf) competitions.
In Proceedings of the 6th Workshop on Security Information Workers, ser.
WSIW (Vol. 20).

Karagiannis, S., Maragkos-Belmpas, E., & Magkos, E. (2020, September). An analysis


and evaluation of open source capture the flag platforms as cybersecurity e-
learning tools. In IFIP World Conference on Information Security
Education (pp. 61-77). Cham: Springer International Publishing.

103 Teknik Informatika-ITI


Kaplan, Z., Zhang, N., & Cole, S. V. (2022, July). A Capture The Flag (CTF) Platform
and Exercises for an Intro to Computer Security Class. In Proceedings of the
27th ACM Conference on on Innovation and Technology in Computer Science
Education Vol. 2 (pp. 597-598).

Tann, W., Liu, Y., Sim, J. H., Seah, C. M., & Chang, E. C. (2023). Using large language
models for cybersecurity capture-the-flag challenges and certification
questions. arXiv preprint arXiv:2308.10443.

Švábenský, V., Čeleda, P., Vykopal, J., & Brišáková, S. (2021). Cybersecurity
knowledge and skills taught in capture the flag challenges. Computers &
Security, 102, 102154.

Khoo, L. J. (2019). Design and develop a cybersecurity education framework using


capture the flag (CTF). In Design, Motivation, and Frameworks in Game-Based
Learning (pp. 123-153). IGI Global.

Fisk, N. (2023). Developmental Challenges: Capture the Flag and the


Professionalization of Cybersecurity. Human Organization, 82(1), 61-72.

Cole, S. V. (2022, July). Impact of Capture The Flag (CTF)-style vs. Traditional
Exercises in an Introductory Computer Security Class. In Proceedings of the
27th ACM Conference on on Innovation and Technology in Computer Science
Education Vol. 1 (pp. 470-476).

Chen, L. K., Jenalis, M. H., & Juremi, J. (2023). Towards Inclusive Cybersecurity
Learning: A Novice-Friendly Capture-the-Flag Onboarding Platform. Journal of
Applied Technology and Innovation (e-ISSN: 2600-7304), 7(4), 60.

Colón Pérez, J. A. (2018). Capture-The-Flag Framework and Virtual Environment for


Cyber Security Education. Computer Science;.

Ortiz-Garces, I., Gutierrez, R., Guerra, D., Sanchez-Viteri, S., & Villegas-Ch, W.
(2023). Development of a Platform for Learning Cybersecurity Using Capturing
the Flag Competitions. Electronics, 12(7), 1753.

104 Teknik Informatika-ITI


Vykopal, J., Švábenský, V., & Chang, E. C. (2020, February). Benefits and pitfalls of
using capture the flag games in university courses. In Proceedings of the 51st
ACM Technical Symposium on Computer Science Education (pp. 752-758).

Kartasasmita, D. G., Timur, F. C., & Reksoprodjo, A. H. (2023). Enhancing


Competency of Cybersecurity Through Implementation of the “CAPTURE THE
FLAG” On College in Indonesia. International Journal Of Humanities
Education and Social Sciences, 3(2).

Holmi, J. H. (2020). Advantages and challenges of using capture-the-flag games in


cyber security education (Bachelor's thesis, J.-H. Holmi).

105 Teknik Informatika-ITI


LAMPIRAN

106 Teknik Informatika-ITI


107 Teknik Informatika-ITI
108 Teknik Informatika-ITI
109 Teknik Informatika-ITI
110 Teknik Informatika-ITI
111 Teknik Informatika-ITI
112 Teknik Informatika-ITI

Anda mungkin juga menyukai