28 Juni - LaporanKP (v9)

LAPORAN KERJA PRAKTEK
Perancangan Website Forum Group Discussion

Menggunakan Metode Waterfall di
Alterra Academy
Dipersiapkan oleh:
Fatkur Rizal Rochmadian Putra 123190130
PROGRAM STUDI INFORMATIKA

FAKULTAS TEKNIK INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”
YOGYAKARTA
2022
HALAMAN PENGESAHAN
LAPORAN KERJA PRAKTIK
Perancangan Website Forum Group

Discussion Menggunakan Metode Waterfall di
Alterra Academy
Disusun Oleh :
Fatkur Rizal Rochmadian Putra 123190130
Telah diperiksa dan disetujui oleh Dosen Pembimbing Kerja Praktik
Pada Tanggal : 28 Juni 2022
Pembimbing Lapangan Pembimbing Kerja Praktik
Abdurrachman Kamil Dhermawan Sylvert Prian Tahalea, S.Si., M.Cs

NIP. 1710240134 NIP. 19920414 2019031019
Mengetahui
Koordinator Kerja Praktik JIF
Simon Pulung Nugroho, S.Kom., M.Cs.

NIP. 19840218 2018031001
i
KATA PENGANTAR
Puji syukur kepada Tuhan Yang Maha Esa atas berkat dan penyertaan-
Nya sehingga pelaksanaan kerja praktik dari bulan Agustus sampai Januari dapat
berjalan dengan lancar. Puji Syukur pula kepada Tuhan Yang Maha Esa karena
penulis dapat menyelesaikan laporan kerja praktik di Perusahaan Alterra Academy
dengan baik dan lancar serta tepat pada waktunya.
Kerja praktik merupakan salah satu dari mata kuliah wajib yang harus
ditempuh oleh setiap mahasiswa Program Studi Informatika Universitas
Pembangunana Veteran Yogyakarta. Penyusunan laporan kerja praktik ini
dilakukan untuk memenuhi mata kuliah wajib dan merupakan salah satu syarat
kelulusan akademik pada Program Studi Informatika Fakultas Teknologi Industri
Universitas Pembangunan Veteran Yogyakarta.
Melalui kerja praktik ini penulis banyak mendapatkan pengalaman,
bantuan, serta bimbingan baik dari pihak perusahaan maupun bimbingan dari
pihak kampus. Pada kesempatan ini penulis ingin mengucapkan terima kasih
kepada:
1. Bapak Nadiem Anwar Makarim, B.A., M.B.A selaku Menteri Pendidikan dan
pencetusnya program kampus merdeka
2. Dr. Awang Hendrianto Pratomo., S.T., M.T. selaku Ketua Jurusan Teknik
Informatika Universitas Pembangunan Nasional “Veteran” Yogyakarta
3. Dr. Heriyanto, A.Md., S.Kom., M.Cs selaku Koordinator Program Studi
Informatika Universitas Pembangunan Nasional “Veteran” Yogyakarta
4. Bapak Sylvert Prian Tahalea, S.Si., M.Cs. selaku Dosen Pembimbing yang telah
memberikan bimbingan dan dukungan dalam pelaksanaan kerja praktik serta
memberikan bimbingan dalam menyelesaikan laporan sehingga bisa berjalan
dengan baik.
5. Bapak Abdurrachman Kamil Dhermawan selaku mentor Back-end yang telah
membimbing serta memberikan dukungan terhadap kerja praktik Back-end
6. Bapak Muchson selaku mentor Front-end yang telah membimbing serta
memberikan dukungan terhadap kerja praktik Front-end
ii
7. Tim IT Alterra Academy, yang telah ikut serta membimbing dan memberi
pengarahan pengerjaan proyek untuk kerja praktik
8. Orang tua tercinta, yang selalu mendoakan dan mendukung penulis baik secara
moral maupun material selama kurang lebih lima bulan untuk melaksanakan
kerja praktik di Alterra Academy
9. Semua pihak yang tidak dapat disebutkan satu persatu yang selalu
memberikan doa, dukungan dan semangat
Penulis menyadari bahwa dalam pengerjaan laporan kerja praktik ini
masih banyak kekurangan dan kesalahan, oleh karena itu penulis mengharapkan
saran dan kritik yang sifatnya membangun. Akhir kata, semoga laporan kerja
praktik ini dapat bermanfaat bagi penulis sendiri dan pembaca laporan kerja
praktik ini.
Yogyakarta, 28 Juni 2022

Penulis
iii
ABSTRAK
Berawal dari dimulainya program baru yang diadakan oleh Kemetrian

Pendidikan, Yaitu studi independent merupakan sebuah program dari Kampus
Merdeka yang memberikan berbagai program yang dapat memberikan pelajaran
baru yang berguna bagi mahasiswa. Salah satu program yang terdapat pada studi
independent adalah Program Fullstack Stack Engineering. Program Full stack
Engineering adalah sebuah media pembelajaran yang mempelajari berbagai bahasa
programming dan pengalaman, membangun keterampilan yang dibutuhkan untuk
menjadi full stack engineer
Pada program kali ini peserta akan mendapatkan pembelajaran melalui
learning management system (LMS) dan live session menggunakan zoom. Dengan
adanya dua jenis pembelajaran peserta difokuskan untuk mempelajari algoritma,
struktur data, CLI, git, pemrograman berorientasi objek, HTML, CSS, database
relasional. Lalu pada program ini akan mendapat pembelajaran mengenai
penggunaan Bahasa pemrograman Golang menggunakan framework echo dan
Javascript menggunakan library ReactJS.
Dengan adanya LMS yang digunakan, muncul lah sebuah permasalahan
ketika peserta mengalami kesulitan dalam memahami dan mendalami materi yang
tersedia pada LMS. Dengan adanya live session tentu akan membantu peserta
dalam memudahkan untuk melakukan diskusi. Akan tetapi dengan jumlah peserta
dan waktu yang tersedia belum cukup untuk menjawab semua pertanyaan peserta
tersebut. Oleh karena itu dengan menggunakan metode analisis SWOT (strengths,
weaknesses, opportunities, threats) muncul lah sebuah solusi dengan dilakukan
perancangan sebuah website FGD (Forum Group Discusiion) yang diberi nama
Diskusiin.
Dengan dirancangnya website diskusiin, peserta studi independent di
Alterra Academy akan memiliki sebuah wadah diskusi untuk melakukan diskusi
terkait permasalahan yang dihadapi ketika sedang melakukan pembelajaran di LMS
Alterra Academy.
iv
DAFTAR ISI
HALAMAN PENGESAHAN ............................................................................... ii
KATA PENGANTAR .......................................................................................... iii
DAFTAR ISI .......................................................................................................... v
DAFTAR GAMBAR ............................................................................................ vi
DAFTAR TABEL............................................................................................... viii
BAB I PENDAHULUAN ...................................................................................... 1

1.1. Latar Belakang.......................................................................................... 1
1.2. Rumusan Masalah .................................................................................... 2
1.3. Tujuan ....................................................................................................... 3
1.4. Manfaat ..................................................................................................... 3
BAB II PROFIL LOKASI KERJA PRAKTEK ................................................4
2.1. Profil Instansi............................................................................................ 4
2.1.1 Sejarah ............................................................................................ 4
2.1.2 Visi Misi ......................................................................................... 4
2.1.2 Alamat ............................................................................................ 5
2.2. Struktur Organisasi ................................................................................... 5
2.3. Job Description .........................................................................................6
2.4. Jadwal Kerja ..............................................................................................7
BAB III METODOLOGI ..................................................................................... 8
3.1. Analisis Permasalahan ...............................................................................8
3.2. Diagram Alur Perancangan Solusi ..........................................................10
3.2.1. Metode Pengembangan Sistem.................................................... 10
3.2.2 Spesifikasi Hardware dan Software ............................................. 12
3.3. Perancangan Solusi..................................................................................15
3.3.1. Implentasi Perancangan Website Diskusiin ................................ 15
3.3.2. Metode Pengujian .........................................................................17
3.3.3. Skenario Pengujian Menggunakan Metode Black Box ................18
BAB IV HASIL DAN PEMBAHASAN .......................................................... 21
4.1. Implementasi User Interface (UI) User ..................................................19
4.2. Implementasi User Interface (UI) Administrator ....................................28
v
4.3. Implementasi Fitur pada User .................................................................30
4.4. Implementasi Fitur pada Administrator ..................................................38
4.5. Implementasi API pada Website Diskusiin .............................................44
4.6. Hasil Pengujian Sistem ............................................................................48
BAB V PENUTUP ............................................................................................... 64
5.1 Kesimpulan ..............................................................................................64
5.2 Saran ........................................................................................................64
5.3 Keberlanjutan ..........................................................................................64
DAFTAR PUSTAKA ...........................................................................................65
LAMPIRAN..........................................................................................................66
vi
DAFTAR GAMBAR
Gambar 2.2 Struktur Organisasi .............................................................................. 5

Gambar 3.2.1.1 Metode Pengembangan Sistem Waterfall ................................... 10
Gambar 3.3.1.1 Perancangan Database ................................................................ 16
Gambar 3.3.1.2 Perancangan UI Menu Login....................................................... 16
Gambar 3.3.1.3 Perancangan UI Halaman Beranda.............................................. 17
Gambar 4.1.1 Implementasi UI Halaman Landing Page User ............................. 19
Gambar 4.1.2 Implementasi UI Halaman Register ............................................... 20
Gambar 4.1.3 Implementasi UI Halaman Login ................................................... 20
Gambar 4.1.4 Implementasi UI Halaman Beranda ............................................... 21
Gambar 4.1.5 Implementasi UI Halaman Mengikuti Thread ............................... 21
Gambar 4.1.6 Implementasi UI Halaman Thread Kategori .................................. 22
Gambar 4.1.7 Implementasi UI Halaman Rangking ............................................. 22
Gambar 4.1.8 Implementasi UI Halaman Halaman Profile .................................. 23
Gambar 4.1.9 Implementasi UI Halaman Lihat Profile ........................................ 23
Gambar 4.1.10 Implementasi UI Halaman Mengikuti .......................................... 24
Gambar 4.1.11 Implementasi UI Halaman Pengikut ............................................ 24
Gambar 4.1.12 Implementasi UI Halaman Favorite............................................. 24
Gambar 4.1.13 Implementasi UI Halaman Input Komentar ................................. 25
Gambar 4.1.14 Implementasi UI Halaman Beranda dengan Komentar................ 25
Gambar 4.1.15 Implementasi UI Halaman Send Message oleh moderator .......... 26
Gambar 4.2.1 Implementasi UI Halaman Login Administrator ............................ 26
Gambar 4.2.2 Implementasi UI Halaman Dashboard........................................... 27
Gambar 4.2.3 Implementasi UI Halaman User ..................................................... 27
Gambar 4.2.4 Implementasi UI Halaman Diskusi ................................................ 28
Gambar 4.2.5 Implementasi UI Halaman Message............................................... 28
Gambar 4.3.1 Implementasi Fitur Register ........................................................... 29
Gambar 4.3.2 Implementasi Fitur Login ............................................................... 30
Gambar 4.3.3 Implementasi Fitur Like Thread ..................................................... 30
Gambar 4.3.4 Implementasi Fitur Unlike Thread ................................................. 31
Gambar 4.3.5 Implementasi Fitur Follow User .................................................... 31
vii
Gambar 4.3.6 Implementasi Fitur Unfollow User................................................. 32
Gambar 4.3.7 Implementasi Fitur Unfollow User................................................. 32
Gambar 4.3.8 Implementasi Fitur Lihat Thread dari User yang Diikuti .............. 33
Gambar 4.3.9 Implementasi Fitur Save Thread .................................................... 33
Gambar 4.3.10 Implementasi Fitur Delete Thread ............................................... 34
Gambar 4.3.11 Implementasi Fitur Input Thread ................................................. 34
Gambar 4.3.12 Implementasi Fitur Input Thread Langkah 2 ............................... 35
Gambar 4.3.13 Implementasi Fitur Input Thread Berhasil ................................... 35
Gambar 4.3.14 Implementasi Fitur Send Message to Administrator .................... 36
Gambar 4.4.1 Implementasi Fitur Login Administrator ....................................... 37
Gambar 4.4.2 Implementasi Fitur Delete User ..................................................... 37
Gambar 4.4.3 Implementasi Fitur Update User .................................................... 38
Gambar 4.4.4 Implementasi Fitur Tambah Kategori ............................................ 39
Gambar 4.4.5 Implementasi Fitur Delete Kategori ............................................... 39
Gambar 4.4.6 Implementasi Fitur Update Kategori.............................................. 39
Gambar 4.4.7 Implementasi Fitur Delete Thread ................................................. 41
Gambar 4.4.8 Implementasi Fitur Delete Message ............................................... 41
viii
DAFTAR TABEL
Tabel 2.4.1. Jadwal Kerja........................................................................................ 7

Tabel 3.1.1. Tabel SWOT ....................................................................................... 9
Tabel 3.3.3.1. Skenario Pengujian ........................................................................ 18
Tabel 3.3.3.1. Skenario Pengujian Lanjtuan 1 ...................................................... 19
Tabel 3.3.3.1. Skenario Pengujian Lanjtuan 2 ...................................................... 20
Tabel 4.5.1. Tabel API .......................................................................................... 44
Tabel 4.5.2. Tabel API Lanjutan 1 ........................................................................ 45
Tabel 4.6.1. Dokumentasi User Acceptance Test (UAT)...................................... 48
Tabel 4.6.2. Hasil Uji UAT ................................................................................... 49
Tabel 4.6.3. Hasil Uji UAT Lanjutan 1................................................................. 50
Tabel 4.6.10. Hasil Uji UAT Lanjutan 8............................................................... 57
Tabel 4.6.11. Hasil Uji UAT Lanjutan 9............................................................... 58
Tabel 4.6.12. Hasil Uji UAT Lanjutan 10............................................................. 59
ix
BAB I
PENDAHULUAN
1.1. Latar Belakang
Kampus merdeka merupakan bagian dari kebijakan Merdeka Belajar

yang di gagas oleh Kementerian Pendidikan, Kebudayaan, Riset dan
Teknologi Republik Indonesia dimana mahasiswa diberikan kesempatan
untuk mengasah dan belajar berdasarkan minat dan bakat masing-masing
untuk persiapan terjun langsung di dunia kerja.
Program Kampus Merdeka terdapat beberapa program diantaranya
Studi Independen, Magang, Kampus Mengajar, Pertukaran Mahasiswa,
Proyek Kemanusiaan, Pertukaran Mahasiswa Internasional, Membangun
Desa, Riset dan Wirausaha. Dalam hal ini Alterra Academy bergabung
dalam kegiatan MSIB atau magang studi independent bersertifikat. Alterra
Academy menyediakan pembelajaran mengenai Full Stack Engineering
melalui Learning Management System (LMS). Dimana mahasiswa akan
mendapatkan pembelajaran melalui materi yang sudah disiapkan pada LMS,
serta melakukan praktik knowledge dari mentor-mentor professional yang
telah berkecimpung di industri IT.
Dengan digunakannya LMS sebagai salah satu media pembelajaran,
serta bentuk upaya dalam mengikuti perkembangan teknologi, khususnya
dalam bidang Pendidikan. LMS sendiri merupakan aplikasi web yang
bekerja dalam melakukan pengolaan proses belajar menjadi lebih terstruktur
dan lebih mudah dipahami. Akan tetapi LMS yang sudah tersedia di Alterra
Academy saat ini memiliki kekurangan, yaitu belum adanya wadah yang
optimal untuk melakukan diskusi atau bertukar pikiran antara pengguna
yang menggunakan LMS tersebut.
Oleh karena itu untuk mengatasi permasalahan tersebut, website
Forum Group Discussion (FGD) akan dibangun dan diberi nama Diskusiin.
FGD sendiri merupakan salah satu metode yang digunakan dalam diskusi
dengan menentukan topik yang akan dibahas. Penggalian informasi dengan
FGD terkadang mengahadapi masalah apabila dilakukan face to face.
1
Di samping membutuhkan biaya untuk perjalanan dan menghabiskan
waktu yang lebih banyak. FGD yang dilakukan secara face to face tidak
dapat mengatasi permasalahan karakteristik seseorang. Misalnya seorang
introvert, penyendiri dan pemalu cenderung kehilangan suara mereka dalam
diskusi karena beberapa alasan seperti malu untuk berbagi
pendapat/perasaan di depan banyak orang secara tatap muka.
Ada tiga alasan utama FGD harus dibangun. Pertama, untuk
mendukung kebutuhan sistem pembelajaran. Kedua, untuk mempertajam
kemampuan perserta atau pengguna LMS dalam berbicara dengan lebih
terarah. Ketiga, attitude dalam mengutarakan pendapat sangat diperhatikan,
karena pada website Diskusiin ini terdapat moderator yang dapat
mengkontrol diskusi yang dilakukan oleh pengguna.
Selain itu, user yang membutuhkan pemahaman materi lebih dalam
dapat melemparkan pertanyaan atau bahan diskusi kedalam website
Diskusiin. Yang nantinya bahan diskusi yang dibuat akan dinamakan
thread. Pada thread yang telah dibuat harapannya pengguna yang lainnya
dapat melakukan interaksi serta diskusi yang memberikan jawaban bagi
pembuat thread.
1.2. Rumusan Masalah

1. Bagaimana merancang dan membangun website Forum Group
discussion untuk menyediakan wadah bertukar pendapat.
2. Bagaimana cara untuk mengatasi permasalahan yang muncul ketika

pengguna / peserta didik sedang mempelajari materi di LMS Alterra
Academy.
3. Bagaimana cara pengguna melakukan diskusi atau memiliki pertanyaan

ketika ingin lebih mendalami materi yang telah dipelajari di LMS
Alterra Academy.
4. Bagaimana cara agar pengguna LMS Alterra Academy mendapatkan

porsi yang seimbang dalam melakukan diskusi.
5. Bagaimana cara agar pengguna LMS Alterra Academy dapat

melakukan diskusi dengan attitude yang baik dan benar.
2
1.3. Tujuan
1. Dapat memberikan wadah diskusi yang dapat menyelesaikan masalah
2. Mempermudah peserta didik / pengguna untuk bertanya saat

menghadapi permasalahan yang didapat ketika melakukan
pembelajaran di LMS Alterra Academy
3. Meningkatkan attitude ketika melakukan diskusi
4. Dapat memberikan porsi yang seimbang antar individu dalam

melakukan diskusi
5. Memberikan kesempatan bagi pengguna untuk mendapatkan relasi

lebih banyak
1.4. Manfaat
1. Mendapatkan jawaban dari permasalahan yang didapat
2. Mendapatkan informasi tambahan ketika sedang melakukan

pendalaman materi di LMS Alterra Academy
3. Bertambahnya relasi setelah menggunakan website diskusiin
3
BAB II
PROFIL LOKASI KERJA PRAKTEK
2.1. Profil Instansi
2.1.1. Sejarah
Alterra Academy merupakan sebuah anak perusahaan dari alterra
Group yang telah berdiri sejak tahun 2018. Alterra Academy dulunya
bernama Alpha Tech Academy. Sebuah coding bootcamp dengan beasiswa
penuh yang memberikan pelatihan bagi pemula, baik dengan latar belakang
IT maupun non-IT, untuk menjadi talenta IT professional dalam waktu 3
bulan. Alpha Tech Academy dibuat sebagai salah satu bentuk konstribusi
dari alterra sebagai perusahaan teknologi untuk masyarakat luas.
Selama hampir 1 tahun, Alpha Tech Academy sudah berjalan dalam
2 batch dengan program Full Stack Engineer dan Qualiy Engineer. Dari
2.000 lebih orang yang antusias dan mendaftar pada program ini, per batch
hanya diambil 30 peserta untuk mengikuti pelatihan yang diadakan oleh
Apha Tech Academy
Sejalan dengan rebranding yang dilakukan oleh Alterra Group
sebagai perusahaan holding, per bulan April 2019, Aplha tech Academy
resmi berubah nama menjadi Alterra Academy dan efektif berjalan mulai
batch 3. Hingga saat ini, Alterra Academy terus melakukan pengembangan
dan inovasi terkait dengan program pelatihan IT yang diadakan. Salah
satunya dengan merilis Advancing Career Program yang dikhususkan bagi
talenta IT berpengalaman yang ingin membuat lompatan pada jenjang
karirnya. Alterra Academy juga telah bermitra dengan banyak perusahaan
ternama sebagai hiring partners yang siap merekrut alumni Alterra Academy
sesuai kebutuhannya.
2.1.2. Visi Misi
a) Visi
Melihat lebih banyak putra-putri indonesia menjadi tech professional
atau tech entrepreneur bertaraf global
b) Misi
1. Memberikan pendidikan tech yang berkualitas bagi siapapun orang
4
indonesia tanpa mempedulikan latar belakang mereka (lokasi, sosio
ekonomi, Pendidikan)
2. mencetak lulusan-lulusan terbaik yang dihormati di bidangnya
3. menjadi salah satu sumber referensi untuk perkembangan dan
pembelajaran teknologi di indonesia
2.1.3. Alamat
Kantor utama dari Alterra Academy berada di Jalan Raya Tidar,
Nomor 23, Karangbesuki, Kota Malang, Jawa Timur. 65146.
2.2. Struktur Organisasi
Gambar 2.2 Struktur organisasi
A. Academic
Bertanggung jawab untuk membuat kurikulum dan memberikan
pembelajaran pada program Advancing Career Preparation (ACP)
B. Immersive Program
Bertanggung jawab untuk membuat kurikulum dan memberikan
pembelajaran pada Immersive Program. Immersive Program merupakan
tech incubator untuk menciptakan Software Engineer yang berkualitas dan
siap kerja
C. Business Development
Divisi yang bertanggungjawab terhadap pendapatan untuk Alterra
Academy melalui berbagai macam inisiatif bisnis, serta membangun
kerjasama dengan berbagai macam pemangku kepentingan.
D. Engineer
Divisi yang berfokus untuk memberikan solusi kepada pengguna atau
pelanggan atau stakeholder. Prosesnya mulai dari identifikasi masalah
untuk menemukan akar permasalahan, hingga pembuatan dan pemberian
solusi kepada pengguna atau pelanggan atau stakeholder.
5
E. Project Management
Bertanggung jawab untuk mengkoordinasikan suatu proyek kerja sama
antara Alterra Academy dengan berbagai rekan bisnis dari berbagai sektor
F. POPS
Bertanggung jawab atas segala hal yang berkaitan dengan kepegawaian,
termasuk diantaranya Rekrutmen dan Seleksi, Budaya Organisasi, serta
Pelatihan dan Pengembangan diri karyawan
2.3. Job Description
Pada kerja praktek kali ini penulis mendapat tugas untuk membangun
Front-End website Forum Group Discussion serta membuat rancangan Entity
Relational Database (ERD) dan Swagger untuk menentukan Endpoint yang
akan dibuat. Dalam dibuatnya website tersebut, penulis melakukan rancangan
dimulai dari perencanaan penyusunan Minimum Viable Product (MVP),
perancangan wireframe, pembuatan User Interface (UI) sehingga dari UI
yang didapat penulis mengubahnya kedalam bentuk Bahasa pemrograman
Javascript dengan penggunaan library ReactJs dan CSS yang berfungsi untuk
mengatur tampilan pada website. Setelah selesai mengubah kedalam bentuk
bahasa pemograman. Penulis diminta untuk melakukan integrasi Application
Programing Interface (API) yang telah dibuat oleh tim Back-End Developer
yang nantinya dari API tersebut, user dapat melakukan Create, Read, Update,
Delete (CRUD) untuk menggunakan Website Forum Group Discussion yang
telah dibuat.
2.4. Jadwal Kerja

Kegiatan Studi Independent Bersertifikat Kampus merdeka
dilaksanakan dari tanggal 23 Agustus 2021 hingga 31 Januari 2022. Akan
tetapi untuk pembekalan materi Front-End menggunakan ReactJS hingga
pengerjaan Capstone Project dimulai dari 18 Oktober hingga 28 Januari
2022. Berikut adalah jadwal kerja serta kegiatan yang dilakukan selama
proses kegiatan Studi Independent berlangsung.
6
Tabel 2.4.1 Jadwal Kerja
Wkt Class Mentor Senin Selasa Rabu Kamis Jumat
Week Backend
1-5 Service
Week Mini
Rachman 15.15- 15.15- 15.15- 15.15- 15.15-
6-7 Project
Kamil 18.40 18.40 18.40 18.40 18.40
Frontend
Week Professio - 15.15- 15.15- 15.15- 15.15- 15.15-

nal Skill 18.30 18.30 18.30 18.30 18.30
8
Develop
ment
Week Frontend Muham

9-15 Web mad 15.15- 15.15- 15.15- 15.15- 15.15-
Develop Muchson 18.40 18.40 18.40 18.40 18.40
ment
Week Capstone Rachman

15.15- 15.15- 15.15- 15.15- 15.15-
16-24 Project Kamil &
18.40 18.40 18.40 18.40 18.40
Nada
7
BAB III
METODOLOGI
3.1. Analisi Permasalahan
Perkembangan teknologi yang sangat pesat di era globalisasi saat ini

telah memberikan manfaat dalam kemajuan di berbagai aspek pendidikan.
Salah satu manfaat yang dapat dirasakan dari kemajuan teknologi yang pesat
adalah kemudahan dalam melakukan pembelajaran melalui LMS. Dengan
berkembangnya teknologi dalam mencari sumber pengetahuan yang terjadi di
era globalisasi ini, akan muncul banyak permasalahan terkait pembelajaran
yang sedang ditempuh. Oleh karena itu dibutuhkan wadah penunjang agar
pengguna LMS dapat mudah melakukan diskusi atau mendapatkan informasi
terkait masalah yang dilalui ketika sedang melakukan pembelajaran.
Tentu sudah cukup banyak website yang bisa digunakan oleh
masyarakat untuk melakukan diskusi dan mencari informasi terkait, seperti
stackoverflow dan qoura. Akan tetapi masih banyak website yang belum bisa
memberikan pelayanan terhadap yang baik terhadap pengguna pengguna.
Dalam beberapa kasus, masih ada website yang belum bisa memberikan
response yang cepat bagi user selaku pengguna website tersebut. Hal ini bisa
dikarenakan salah dalam pemilihan bahasa pemograman serta salah dalam
pemilihan framework untuk response serta request yang dilakukan oleh website
tersebut.
Untuk mengatasi permasalahan tersebut maka kelompok saya
merancang sebuah website Forum Group Discussion yang nantinya website ini
bernama Diskusiin. Website Diskusiin di bangun agar dapat memberikan
wadah untuk masyarakat dalam melakukan diskusi dan mencari informasi
secara update. Diskusiin ini. Tentu hal yang perlu di perhatikan adalah
pelayanan yang bisa diberikan dari website Diskusiin. Kelompok kami
menggunakan Bahasa pemograman Golang sebagai Back-End dan Bahasa
pemograman Javascript dengan penggunaan library ReactJS agar dapat
memberikan respon yang cepat terhadap user. Sehingga user atau masyarakat
dapat menggunakan website ini dengan nyaman tanpa adanya banyak kendala
yang dapat dirasakan.
8
Untuk analisa lebih lanjut, diperlukan analisis yang dapat membantu
dan memperjelas permasalah pokok yang dihadapi, oleh karena itu kelompok
kami menggunakan analisis SWOT (Strengths, Opportunities, Weakness, dan
Treats) untuk menganalisa permasalahan tersebut. Analisis SWOT ini dibuat
oleh Albert Humphrey pada tahun 1960-an. Analisi SWOT didasarkan pada
logika yang dapat memaksimalkan Strengths (kekuatan), Opportunities
(Peluang) dan dengan waktu secara bersamaan dapat meminimalisir
Weaknesses (kelemahan) serta Threats (ancaman). Proses yang kelompok kami
lakukan untuk mengambil keputusan didasari dengan visi, misi, tujuan serta
strategi dalam mengembangkan sebuah produk. Berikut adalah analisis SWOT
terkait produk website Diskusiin
Tabel 3.1.1 Tabel SWOT

Membantu Menghambat
Website Forum Group Discussion Website diskusiin ini belum
memiliki fitur untuk melakukan memiliki moderator yang
sebuah diskusi dan pengguna bisa cukup atau system keamanan
Dari mendapatkan informasi terbaru, yang bisa mendeteksi
Dalam serta website Diskusiin memiliki otomatis terhadap
response yang cepat. pelanggaran yang dilakukan
oleh user terkait thread serta
kata kata yang tidak baik
yang telah dicantumkan
kedalam website.
Dari website Diskusiin memiliki Website Diskusiin ini
Luar kesempatan untuk menjadi website memiliki banyak pesaing
yang mewadahi pengguna LMS serupa yang menyediakan
Alterra Academy untuk dapat fitur yang tidak jauh berbeda
bertukar infomasi, serta di website dengan response yang cukup
diskusiin ini user bisa bertukar baik terhadap user.
pendapat mengenai informasi
terbaru yang ada.
9
3.2. Diagram Alur Perancangan Solusi
Dalam memberikan sebuah hasil yang maksimal diperlukan sebuah
perancangan sistem yang baik agar website Diskusiin dapat digunakan oleh
masyarakat secara efektif dan efisien. Untuk mewujudkan hal tersebut terdapat
beberapa metode solusi yang dilakukan untuk menyelesaikan produk.
3.2.1. Metode Pengembangan Sistem

Metode yang digunakan dalam mengembakan produk ini adalah
metode Waterfall. Waterfall merupakan salah satu jenis pengembangan
system secara keseluruhan dilakukan melalui beberapa tahapan / langkah.
Metode pengembangan perangkat lunak dikenal juga dengan istilah Software
Development Life Cycle (SLDC). Metode Waterfall merupakan metode
pengembangan perangkat lunak tertua sebab sifatnya yang natural. Metode
Waterfall merupakan pendekatan SLDC paling awal yang digunakan untuk
pengembangan perangkat lunak. Urutan dalam metode Waterfall bersifat
serial yang dimulai dari proses perencanaan, analisa, desain dan
implementasi pada sistem.
Gambar 3.2.1.1 Metode Pengembangan Sistem Waterfall
Menurut Ian Summeville (2011) menjelaskan bahwa ada lima

tahapan pada metode Waterfall, yakni Requirement Analysis and Definition,
System and Software Design, Implementation and Unit Testing Integration
and System Testing dan Operation and Maintenance.
a. Requirement analysis dan definition
Layanan system, kendala, dan tujuan ditetapkan oleh hasil
10
konsultasi dengan pengguna yang kemudian didefinisikan secara
rinci dan berfungis sebagai spesifikasi sistem (Sasmito, 2017)
Requirement analysis yang dilakukan adalah dengan melakukan
video conference dengan kelompok serta mentor untuk dilakukan
diskusi agar menghasilkan cara terbaik untuk menghasilkan
produk.
b. System and software design
Tahapan perancangan sistem mengalokasikan
kebutuhankebutuhan sistem baik perangkat keras maupun
perangkat lunak dengan membentuk arsitektur sistem secara
keseluruhan (Sasmito, 2017). Perancangan perangkat lunak
melibatkan identifikasi dan penggambaran abstraksi sistem dasar
perangkat lunak dan hubungannya (Sasmito, 2017).
Pada tahap ini dilakukan proses perancangan wireframe
menggunakan Whimsical untuk mengetahui alur serta cara kerja
dari website Diskusiin. Selanjutnya dengan mendapatkan hasil
tersebut kelompok kami membuat Entity Relationship Diagram
(ERD) serta Relasi Antar Tabel (RAT). Selajutnya kelompok
kami membuat Swagger untuk menentukan endpoint yang akan
dibuat oleh tim Back-End developer. Endpoint ini nantinya akan
di gunakan oleh tim Front-End developer untuk mendapatkan
respon dari database. Selanjutnya kelompok kami
menyempurnakan wireframe kedalam bentuk user interface yang
dikerjakan di aplikasi figma.
c. Implementation and unit testing
Pada tahap ini, perancangan perangkat lunak direalisasikan
sebagai serangkaian program atau unit program (Sasmito, 2017).
Pengujian melibatkan verifikasi bahwa setiap unit memenuhi
spesifikasinya (Sasmito, 2017)
Pada tahap ini dilakukan proses implementasi dalam bentuk
website dari rancangan-rancangan yang sudah dilakukan pada
proses sebelumnya
d. Integration and system testing
Unit-unit individu program atau program digabung dan diuji
11
sebagai sebuah sistem lengkap untuk memastikan apakah sesuai
dengan kebutuhan perangkat lunak atau tidak (Sasmito, 2017).
Setelah pengujian, perangkat lunak dapat dikirimkan ke customer
(Sasmito, 2017)
Setelah Sebagian fitur selesai dibangun, maka dilakukan
proses testing pada sistem menggunakan mockery yang
digunakan pada bahasa pemrograman Golang. Testing ini
digunakan untuk mengetahui berapa angka keberhasilan dari
sistem yang telah dibangun, serta untuk mengetahui apakah
terdapat bug terhadap sistem yang telah dibuat.
e. Operation and maintenance
Biasanya (walaupun tidak selalu), tahapan ini merupakan
tahapan yang paling panjang. Sistem dipasang dan digunakan
secara nyata (Sasmito, 2017). Maintenance melibatkan
pembetulan kesalahan yang tidak ditemukan pada tahapan-
tahapan sebelumnya, meningkatkan implementasi dari unit
sistem, dan meningkatkan layanan sistem sebagai kebutuhan
baru (Sasmito, 2017).
Pada tahap ini, dilakukan presentasi kepada tim penilaian
yang telah disediakan oleh Alterra Academy, untuk di review
apakah terdapat kekurangan pada website yang telah dibangun.
3.2.2. Spesifikasi Hardware & Software

Pada tahap ini, kelompok kami harus mengetahui kebutuhan
software (perangkat lunak) dan hardware (perangkat keras) untuk
melakukan pengembangan yang akan dilakukan.
1. PC atau Laptop
Untuk mengembangkan website yang menggunakan 2 bahasa
pemrograman utama yaitu Golang dengan framework echo dan
Javascript dengan framework ReactJs dibutuhkan spesifikasi PC
atau Laptop sebagai berikut
- Random Access Memory (RAM) Minimal 4GB
- Operation System : Windows, linux, or MAC OS X
- Processor: 32/64 – bit
12
- Web browser: Chrome
2. Text Editor
Text editor merupakan suatu software yang memungkinkan
programmer untuk melakukan edit dan hanya fokus pada mengolah
teks biasa. Software ini sangat berguna bagi programmer atau
developer untuk membaca Bahasa pemrograman. Pada kelompok
ini digunakan text editor Visual Studio Code. Dengan menggunakan
Visual Studio Code akan lebih mudah menggunakan extension yang
telah disediakan oleh Visual Studio Code ini sendiri. Selain itu text
editor ini gratis untuk digunakan. Sehingga dapat menghemat biaya
pengembangan website Diskusiin
3. Database
Dalam pembuatan sistem informasi kali ini, database yang
digunakan adalah MySQL. MySQL merupakan Database
Management System (DBMS) relasional yang bersifat open source
(Schram & Anderson, 2012). MySQL banyak digunakan diseluruh
dunia termasuk dipakai oleh perusahaan besar seperti Facebook
(Schram & Anderson, 2012). MySQL digunakan sebagai database
utama dalam sistem kali ini, karena database yang cukup familiar
serta mudah diintegariskan dengan framework Echo.
4. React-Bootstrap
React-Bootsrap digunakan dalam sistem kali ini sebagai
framework utama dalam tampilan atau User Interface. Framework
ini digunakan karena memiliki dokumentasi yang lengkap serta
mudah didapatkan.
5. Echo
Echo merupakan salah satu framework terbaik serta efektif
dalam pengembangan web di sisi Back-End dengan Bahasa
pemograman Golang. Echo dikembangkan untuk meningkatkan
kualitas software, mempermudah proses autentifikasi serta
memberikan respon yang baik dalam pengolahan data yang terdapat
pada database.
6. Figma
Figma adalah aplikasi desain berbasis cloud yang banyak
13
digunakan sebagai alat prototyping proyek digital (Pramudita et al.,
2021). Figma didesain untuk mempermudah penggunanya dalam
berkolaborasi untuk suatu proyek (Pramudita et al., 2021).
Figma digunakan untuk membuat sebuah desain user
interface yang bagus serta menarik minat dari pengguna untuk
menggunakan website Diskusiin
7. Whimsical
Whimsical merupakan aplikasi desain untuk membuat flow
diagram serta wireframe untuk produk yang akan dihasilkan
8. Telegram
Telegram merupakan salah satu aplikasi yang digunakan
untuk berkomunikasi antar individu yang terdapat di kelompok ini.
Telegram juga digunakan untuk berkomunikasi dengan mentor
apabila dalam pengembangan produk website diskusiin terdapat
kendala
9. Zoom
Zoom merupakan salah satu aplikasi untuk melakukan
meeting atau video conference. Dikarenakan pengembangan ini
dilakukan secara remote maka, diperlukan sebuah wadah atau
aplikasi untuk melakukan video conference
10. Github
Github merupakan salah satu platform cloud yang berada di
internet. Platform ini sering digunakan oleh programmer untuk
melakukan kegiatan pengembangan secara berkelompok. Platform
ini sangat membantu sebagai wadah penyimpanan code yang dapat
di akses oleh seluruh tim. Github juga berguna sebagai work
management dari sebuah kelompok ketika proses pengembangan
sedang berlangsung.
14
3.3. Perancangan Solusi
Setelah Perancangan produk menggunakan metode Waterfall telah
ditentukan proses pengerjaan dapat dilakukan pada tahap pembuatan serta
produksi. Berikut merupakan penjelasan secara detail terkait implementasi serta
pengujian terhadap website Diskusiin
3.3.1. Implementasi Perancangan Website Diskusiin

Adapun terdapat 4 perancangan yang dilakukan pada sistem ini yaitu,
perancangan Minimum Viable Product (MVP), perancangan wireframe,
perancangan database dan perancangan user interface
1. Perancangan MVP
Pada tahap awal yang dilakukan untuk ke tahap selanjutnya adalah
perancangan MVP. Perancangan ini dilakukan untuk mengetahui apa
saja kebutuhan sistem yang perlu dibuat agar website Diskusiin dapat
digunakan oleh user ketika pertama kali di deploy ke dalam internet.
2. Perancangan Wirefame
Setelah MVP sudah di tentukan, maka pada tahap ini adalah
perancangan wireframe yang nantinya akan menjadi flow dari sistem
website yang akan dibangun. Selain itu, berdasarkan wireframe yang
telah dibuat, wireframe akan menjadi acuan untuk pembuatan database
yang diawali dengan pembuatan Entity Relationship Diagram (ERD)
3. Perancangan Database
Pada tahap perancangan database ini dilakukan berdasarkan melihat
rancangan wireframe yang telah dibuat pada tahap sebelumnya. Untuk
langkah pertama pembuatan database, diawali dengan pembuatan Entity
Relationship Diagram (ERD). ERD merupakan model untuk desain,
perancangan dan analisis database dari suatu sistem yang paling banyak
digunakan. Pada ERD sistem ini terdapat sepuluh entitas utama yaitu
users, likes, messages, followers, favorites, comments, threads,
categories, detail_threads, tags
15
Gambar 3.3.1.1 Perancangan Database
4. Perancangan User Interface (UI)

Perancangan UI dilakukan setelah mengetahui alur sistem yang
akan dibuat. Perancangan UI dibangun menggunakan platform Figma.
Gambar 3.3.1.2 Perancangan UI Menu Login
Gambar 3.3.1.2 merupakan rancangan awal menu login. Pada

halaman ini nantinya user akan memasukan email dan password untuk
menggunakan hak akses yang terdapat pada website tersebut.
Ketika proses login berhasil, maka user akan langsung diarahkan pada
halaman beranda. Yang dimana halaman beranda memuat thread yang
telah di input oleh user lain yang telah menggunakan website ini.
16
Gambar 3.3.1.3 Perancangan UI Halaman Beranda
Gambar 3.3.1.3 diatas merupakan rancangan awal halaman

beranda dari website Diskusiin yang akan dibuat. Rancangan tersebut
memuat beberapa menu dan fitur yang bisa diakses oleh user.
3.3.2. Metode Pengujian

Pengujian perangkat lunak bertujuan untuk memastikan, bahwa
perangkat lunak yang telah dikembangkan sudah berjalan sesuai dengan
fungsionalitas yang diharapkan pengguna akhir (Setiyani, 2019).
Pengujian perangkat lunak menjamin kualitas software dan merupakan
bagian dari daur hidup pengembangan perangkat lunak (Setiyani, 2019).
Pengujian software dapat dibagi menjadi white box testing dan
black box testing (Setiyani, 2019). White box testing dikenal juga
dengan structural testing yang menguji fungsi internal dari sebuah
perangkat lunak dan struktur dari kode, sehingga memungkinkan untuk
menguji setiap cabang dan keputusan dari jalannya program (Nidhra &
Dondeti, 2012). White box testing dilakukan ketika programmer dari
software memiliki teknik dan pengetahuan yang cukup mumpuni
tentang struktur program. Black box testing disebut juga dengan
functional testing yang menguji fungsionalitas dari sistem apakah sudah
17
sesuai dengan permintaan atau kebutuhan dari user (Nidhra & Dondeti,
2012) (Setiyani, 2019).
Salah satu metode dari black box testing adalah user acceptance
testing (UAT). UAT merupakan salah satu pengujian yang sangat
penting sebagai garis terakhir verifikasi untuk memeriksa kesiapan
perangkat lunak terhadap harapan dari pengguna (Jeong et al., 2015).
Kriteria dari UAT terdiri dari atribut kualitas dari requirement, atribut
kualitas sistem, fungsionalitas dan non-fungsionalitas dari sistem, dan
kesiapan operasional sistem. Metode UAT ini akan digunakan dalam
pengujian sistem ini.
3.3.3. Skenario Pengujian Menggunakan Metode Black Box

Metode yang akan digunakan untuk membuat skenario pengujian
fungsionalitas adalah metode black box. Metode ini berfokus pada nilai
output yang akan diberikan oleh input, maupun terhadap proses yang
terjadi. Berikut merupakan skenario pengujian fungsionalitas dapat
dilihat pada tabel berikut.
Tabel 3.3.3.1. Skenario Pengujian
No Fungsional Rencana Pengujian Jenis
yang diuji Pengujian
1 Register Melakukan proses register dengan Black Box
user melakukan input data berupa username,
password, email, address, phone, gender
2 Login user Melakukan proses login user dengan Black Box
melakukan input data berupa email dan
password
3 Like thread Melakukan proses like thread, serta Black Box
menampilkan jumlah like thread terbaru
4 Unlike Melakukan proses unlike thread, serta Black Box
thread menampilkan jumlah like thread terbaru
5 Follow user Melakukan proses follow user dan Black Box
melakukan pengecekan pada halaman
following dan halaman mengikuti thread
18
Tabel 3.3.3.2. Skenario Pengujian Lanjutan 1
6 Unfollow Melakukan proses unfollow user, Black Box
user dilanjutkan melakukan pengecekan
pada halaman following dan halaman
mengikuti thread
7 Lihat thread Melakukan pengecekan dari list thread Black Box
dari user yang muncul pada halaman mengikuti
yang diikuti thread
8 Save thread Melakukan proses save thread, Black Box
dilanjutkan dengan melakukan
pengecekan pada halaman profile
9 Delete Melakukan proses delete thread, Black Box
thread dilanjutkan dengan melakukan
10 Input thread Melakukan proses input thread Black Box
11 Send Melakukan proses send message to Black Box
Message to administrator
administrator
12 Login Melakukan proses login administrator Black box
administrator dengan melakukan input data berupa
email dan password
13 Delete user Melakukan proses detele user dan Black box
pengecekan pada halaman user
14 Update user Melakukan proses update user dan Black box
pengecekan pada halaman user
15 Tambah Melakukan proses input kategori dan Black box
kategori dilanjutkan dengan melakukan
pengecekan pada halaman kategori
19
Tabel 3.3.3.3. Skenario Pengujian Lanjutan 3
16 Delete Melakukan proses delete kategori dan Black box
kategori dilanjutkan dengan melakukan
17 Update Melakukan proses update kategori dan Black box
Kategori dilanjutkan dengan melakukan
18 Delete Melakukan proses delete thread dan Black box
Thread dilanjutkan dengan melakukan
pengecekan pada halaman diskusi
19 Delete Melakukan proses delete message dan Black box
Message dilanjutkan dengan melakukan
pengecekan pada halaman message
20
BAB IV
HASIL DAN PEMBAHASAN
4.1. Implementasi User Interface (UI) User

a. Halaman Landing Page User
Halaman landing page user ini digunakan sebagai halaman awal
untuk user ketika akan menggunakan website Diskusiin untuk melakukan
diskusi. Setelah itu jika user sudah memiliki akun, user dapat menekan
button login agar bisa melakukan proses login untuk masuk kedalam
website. Akan tetapi jika user belum memiliki akun, maka user bisa
melakukan registrasi terlebih dahulu.
Gambar 4.1.1. Implementasi UI Halaman Landing Page User
b. Halaman Register
Pada Halaman ini user dapat melakukan proses registrasi dengan
memasukkan data diri berupa username, password, email, phone dan
gender.
21
Gambar 4.1.2. Implementasi UI Halaman Register
c. Halaman Login
Pada halaman login ini, user diminta untuk memasukan email dan
juga password agar dapat menggunakan hak akses serta dapat
menggunakan halaman selanjutnya. Setelah proses login berhasil, maka
user akan langsung diarahkan ke halaman beranda, yang dimana pada
halaman ini terdapat thread dari user lainnya.
Gambar 4.1.3. Implementasi UI Halaman Login

d. Halaman Beranda
Pada halaman beranda ditampilkan semua thread yang telah di input
oleh user lainnya. Selain itu pada halaman beranda ini dapat berkomentar,
like dan unlike pada thread yang telah di input oleh user lainnya, Selain itu
pada halaman ini dapat melakukan follow dan unfollow antara satu user
dengan user lainnya.
22
Gambar 4.1.4. Implementasi UI Halaman Beranda
e. Halaman Mengikuti Thread

Pada halaman ini ditampilkan semua thread yang terdapat pada
database berdasarkan dari user yang telah diikuti.
Gambar 4.1.5. Implementasi UI Halaman Mengikuti Thread
f. Halaman Thread Kategori

Pada halaman thread kategori ditampilkan thread berdasarkan
kategori yang di klik pada setiap thread atau kategori yang tersedia berada
dibawah fitur search
23
Gambar 4.1.6. Implementasi UI Halaman Thread Kategori
g. Halaman Ranking
Pada halaman ranking akan ditampilkan daftar user berdasarkan dari
jumlah like dan jumlah diskusi yang telah di input kedalam website
Diskusiin.
Gambar 4.1.7. Implementasi UI Halaman Ranking
h. Halaman Profile
Pada halaman profile akan ditampilkan jumlah followers, jumlah
following dan jumlah diskusi yang telah di input serta detail dari thread
yang telah di input kedalam website Diskusiin.
24
Gambar 4.1.8. Implementasi UI Halaman Profile
i. Halaman Lihat Profile

Pada halaman ini ditampilkan data pribadi dari user, serta di halaman
ini user dapat menghapus profile atau melakukan edit pada data diri user.
Gambar 4.1.9. Implementasi UI Halaman Lihat Profile
j. Halaman Mengikuti
Pada halaman mengikuti ini, dapat di akses dengan melakukan klik
pada tulisan mengikuti di halaman profile, pada halaman ini user dapat
melihat siapa saja user lain yang telah diikuti.
25
Gambar 4.1.10. Implementasi UI Halaman Mengikuti
k. Halaman Pengikut
Pada halaman pengikut ini, dapat di akses dengan melakukan klik
pada tulisan pengikut di halaman profile, user dapat melihat siapa saja user
lain yang telah menjadi followers.
Gambar 4.1.11. Implementasi UI Halaman Pengikut
l. Halaman Favorite
Pada halaman ini akan ditampilkan thread yang telah dijadikan thread
favorite oleh user. Agar dapat menjadi thread favorite user hanya perlu
melakukan klik pada salah satu button yang terdapat di thread yang muncul pada
halaman beranda.
Gambar 4.1.12. Implementasi UI Halaman Favorite
26
m. Halaman Input Komentar
Pada halaman input komentar, user bisa memasukkan komentar
terkait thread yang muncul di halaman beranda. User dapat memberikan
pendapat yang nantinya dapat ditampilkan di halaman beranda.
Gambar 4.1.13. Implementasi UI Halaman Input Komentar
n. Halaman Beranda dengan Komentar

Pada halaman beranda dengan komentar, user dapat melihat semua
komentar terkait thread yang ingin dikomentari. Semua komentar yang
dimunculkan tidak hanya komentar pribadi, akan tetapi semua komentar
yang diberikan oleh user lainnya.
Gambar 4.1.14. Implementasi UI Halaman Beranda dengan Komentar
o. Halaman Send Message oleh Moderator

Pada halaman ini, user yang menjadi moderator dapat mengirim
pesan kepada administrator terkait pelanggaran yang dilakukan user
dalam melakukan input di sebuah thread.
27
Gambar 4.1.1.15. Implementasi UI Halaman Send Message oleh Moderator
4.2. Implementasi User Interface (UI) administrator

a. Halaman Login Administrator
Pada halaman login administrator, administrator diminta untuk
memasukkan email dan password untuk login agar dapat menggunakan hak
akses serta mengakses halaman selanjutnya. Setelah melakukan proses
login, maka administrator akan diteruskan ke dalam dashboard sesuai
dengan hak akses dari administrator.
Gambar 4.2.1. Implementasi UI Halaman Login Administrator
b. Halaman Dashboard
Halaman dashboard ini merupakan halaman yang muncul pertama
ketika proses login pada halaman login berhasil dilakukan. Pada halaman
28
dashboard administrator memiliki 4 halaman, yaitu halaman user, halaman
kategori, halaman diskusi dan halaman message.
Gambar 4.2.2. Implementasi UI Halaman Dashboard
c. Halaman User
Pada halaman user yang di akses melalui akun administrator, akan
ditampilkan seluruh pengguna baik user biasa, moderator maupun
administrator. Sedikit perbedaan dari moderator dengan user adalah,
seorang moderator bisa mengirimkan sebuah pesan kepada administrator
terkait pelanggaran yang dilakukan user dalam melakukan input sebuah
thread atau komentar.
Gambar 4.2.3. Implementasi UI Halaman User
d. Halaman Diskusi
Pada halaman diskusi ini akan ditampilkan seluruh thread yang telah
di input kedalam website Diskusiin. Pada halaman ini administrator dapat
menghapus thread yang memiliki unsur sara atau unsur yang dapat
menyinggung orang lain.
29
Gambar 4.2.4. Implementasi UI Halaman Diskusi
e. Halaman Message
Pada halaman message ini menampilkan seluruh pesan yang
dikirimkan oleh moderator, halaman ini dibuat untuk mempermudah
administrator mendapatkan report atau pesan yang telah dikirimkan oleh
moderator.
Gambar 4.2.5. Implementasi UI Halaman Message
4.3. Implemntasi Fitur pada User

a. Register
Pada fitur Register, user dapat melakukan proses register untuk
menjadi user di website Diskusiin. Untuk data yang dibutuhkan dalam
melakukan proses register adalah username, password, email, address,
phone, dan gender. Ketika data telah lengkap diisi, maka user dapat
30
menekan button bertuliskan daftar agar dapat melanjutkan proses
registrasi.
Gambar 4.3.1. Implementasi Fitur Register
b. Login
Pada fitur login, user menggunakan email dan password yang telah di
daftarkan pada proses register yang telah dilakukan. Setelah data email dan
password telah di masukan, maka langkah selanjutnya user dapat menekan
button yang bertuliskan masuk. Setelah itu server akan melakukan proses
pengecekan dengan data yang terdapat pada database. Ketika data cocok
dengan email dan password yang di masukan. Maka server akan
mengembalikan data berupa tsebuah token. Token ini merupakan salah satu
bentuk otentikasi yang digunakan pada website Diskusiin.
31
Gambar 4.3.2. Implementasi Fitur Login
c. Like Thread
Pada fitur like, user dapat melakukan like di setiap thread yang
muncul di beranda. User hanya perlu melakukan klik pada button love
berwarna merah sesuai dengan tanda biru yang telah terlihat pada gambar
4.3.3, ketika user sudah melakukan klik pada button love berwarna merah
maka user sudah berhasil melakukan like pada thread.
Gambar 4.3.3. Implementasi Fitur Like Thread
d. Unlike Thread
Pada fitur unlike thread, user dapat melakukan unlike di setiap thread
yang muncul di beranda. User hanya perlu melakukan klik pada button
32
tidak bewarna sesuai dengan tanda biru yang telah terlihat pada gambar
4.3.4, maka user sudah berhasil melakukan unlike pada thread yang tidak
disukai.
Gambar 4.3.4. Implementasi Fitur Unlike Thread
e. Follow User
Pada fitur follow, user dapat mengikuti user lain. Dengan adanya fitur
ini user dapat melihat thread sesuai dengan pengguna yang telah diikuti
pada halaman mengikuti. Untuk halaman mengikuti ini bisa diakses dengan
melakukan klik pada navbar yang bertuliskan mengikuti.
Gambar 4.3.5. Implementasi Fitur Follow User
33
f. Unfollow User
Pada fitur unfollow, user dapat melakukan unfollow terhadap user
yang sudah pernah diikuti, Untuk melakukannya user bisa melakukan klik
pada lingkaran hitam pada gambar 4.3.6. untuk melakukan unfollow pada
user yang pernah diikuti atau dapat klik tulisan mengikuti pada profile.
Setelah dilakukan klik halaman akan berpindah kepada list user yang telah
diikuti.
Gambar 4.3.6. Implementasi Fitur Unfollow User
Lalu untuk melakukan unfollow user dapat melakukan klik pada

lingkaran hitam di gambar 4.3.7. untuk melakukan unfollow
Gambar 4.3.7. Implementasi Fitur Unfollow User
g. Lihat Thread dari User yang Diikuti
Pada gambar 4.3.8. user dapat melihat thread berdasarkan user yang
telah diikuti, sehingga user bisa lebih fokus dan lebih mudah membaca
thread pada user yang telah diikuti.
34
Gambar 4.3.8. Implementasi Fitur Lihat Thread dari User yang Diikuti
h. Save Thread
User dapat menyimpan beberapa thread yang telah di input oleh user
lain. Untuk melakukan save thread, user dapat melakukan klik pada tulisan
save diatas kanan dari thread.
Gambar 4.3.9. Implementasi Fitur Save Thread
i. Delete Thread
Pada fitur ini, user dapat melakukan hapus pada thread yang telah
disimpan dengan cara pergi ke halaman profile, lalu klik pada tulisan
favorite, pada halaman ini akan ada daftar thread yang telah disimpan. Lalu
user dapat melakukan hapus dengan cara klik button hapus yang terletak di
sebelah username dari pengguna yang telah membuat thread tersebut.
35
Gambar 4.3.10. Implementasi Fitur Delete Thread Favorite
j. Input Thread
Pada fitur ini user dapat melakukan input Thread dengan cara
mengisi textarea form pada halaman beranda. Langkah ini merupakan
langkah awal bagi user agar dapat melakukan input pada website Diskusiin.
Gambar 4.3.11. Implementasi Fitur Input Thread Langkah 1
Setelah itu user akan mendapat pemberitahuan konfirmasi terkait

thread yang akan di input kedalam website. pemberitahuan ini berfungsi
sebagai bentuk salah satu konfirmasi apakah thread yang akan di input
sudah benar serta sesuai keinginan dari user.
36
Gambar 4.3.12. Implementasi Fitur Input Thread Langkah 2
Setelah melakukan klik pada button upload thread di gambar 4.2.11,

Langkah terakhir adalah akan muncul sebuah pemberitahuan ketika thread
telah berhasil masuk kedalam database website Diskusiin.
Gambar 4.3.13. Hasil respon input Thread Berhasil
k. Send Message to Administrator

Pada fitur Send Message to Administrator. Seorang user dapat
mengirim sebuah pesan kepada administrator terkait thread yang telah di
input kedalam website. Untuk melakukan fitur ini seorang moderator dapat
melakukan klik pada icon setting lalu klik dropdown bertuliskan send
message. Setelah itu moderator akan dialihkan ke halaman send message.
Langkah selanjutnya adalah moderator dapat melakukan pengisian mulai
37
dari judul thread, pesan yang disampaikan dan kategori dari thread
tersebut. Setelah selesai melakukan pengisian data tersebut, moderator
dapat melakukan klik button upload untuk mengirimkan pesan tersebut
kepada administrator.
Gambar 4.3.14. Implementasi Fitur Send Message to Administrator
4.4. Implemntasi Fitur pada Administrator

a. Login
Pada fitur login, administrator memasukan data email dan password
agar dapat mengakses fitur fitur yang tedapat pada halaman administrator.
Ketika email dan password administrator telah sesuai dengan database,
maka server akan mengembalikan data token untuk digunakan sebagai
otentikasi
38
Gambar 4.4.1. Implementasi Fitur Login Administrator
b. Delete User
Pada fitur delete user, administrator dapat menghapus user ketika
user tersebut banyak melakukan pelanggaran. Dengan Melakukan klik pada
button hapus, maka user akan terhapus dari database.
Gambar 4.4.2. Implementasi Fitur Delete User
c. Update User
Pada fitur Update user, administrator dapat menghapus update
terhadap user yang ingin diubah menjadi moderator pada sebuah kategori.
Dengan melakukan klik pada button update, maka akan muncul sebuah
modal untuk melakukan pengisian data user dan pemilihan kategori. Ketika
data tersebut sudah diisi, maka Langkah selanjutnya adalah melakukan klik
39
pada button update berwarna biru. Setelah itu maka user akan berubah
menjadi moderator pada kategori yang telah ditentukan.
Gambar 4.4.3. Implementasi Fitur Update User
d. Tambah Kategori
Pada fitur ini administrator dapat menambahkan kategori baru yang
nantinya dapat di gunakan oleh seluruh user. Cara menambahkan kategori
adalah dengan melakukan input pada textbox disebelah kanan. Setelah
mengisi kategori yang akan ditambahkan, selajutnya lakukan klik pada
button bertuliskan tambah. Ketika sudah berhasil maka kategori akan
muncul dan dapat digunakan oleh seluruh user yang menggunakan website
Diskusiin
40
Gambar 4.4.4. Implementasi Fitur Tambah Kategori
e. Delete Kategori
Pada fitur ini administrator dapat menghapus kategori yang ingin
dihapus. Untuk melakukan Delete kategori, administrator dapat melakukan
klik pada button bertuliskan hapus untuk menghapus kategori tersebut.
Gambar 4.4.5. Implementasi Fitur Delete Kategori
f. Update Kategori
Pada fitur ini administrator dapat melakukan update pada kategori.
Untuk melakukan update administrator dapat melakukan klik pada button
bertuliskan edit lalu mengisi textbox yang muncul. Setelah selesai dalam
mengisi textbox yang muncul. Langkah selanjutnya adalah dengan
melakukan klik pada button bertuliskan save untuk mengubah kategori
tersebut. Setelah langkah - langkah tersebut berhasil dilakukan, maka
kategori akan berubah.
41
Gambar 4.4.6. Implementasi Fitur Update Kategori
g. Delete Thread
Pada fitur Delete Thread, administrator dapat melakukan hapus pada
sebuah thread. Fitur ini disiapkan sebagai salah satu bentuk penyaringan
untuk thread yang di input oleh user. Untuk melakukan delete pada thread
user, administrator dapat melakukan klik pada button hapus diatas thread
pada halaman diskusi.
42
Gambar 4.4.7. Implementasi Fitur Delete Thread
h. Delete Message
Pada fitur Delete message, administrator dapat melakukan hapus
pada message yang telah dikirim oleh moderator. Untuk melakukan hapus
pada message, administrator dapat melakukan klik pada button bertuliskan
delete dibawah message
Gambar 4.4.8. Implementasi Fitur Delete Message
43
4.5. Implementasi API pada Website Diskusiin
Application Programing Interface (API) merupakan output dari team
backend. API yang dihasilkan ini nantinya akan digunakan untuk melakukan
komunikasi dengan database. API kali ini digunakan sebagai jembatan antara
Front-End dengan database. Berikut daftar-daftar API yang digunakan.
Tabel 4.5.1 Tabel API

No Method Nama Method Endpoint Keterangan
1 Get Get Following http://localhost: Endpoint ini digunakan
1234/user/follo untuk mengambil data
wing following dari seorang user
2 Get Get HomePage http://localhost: Endpoint ini digunakan
Thread 1234/thread/ho untuk mengambil data
mepage thread yang telah di input
oleh seluruh user
3 Get Get ProfileData http://localhost: Endpoint ini digunakan
1234/user untuk mengambil data
pengguna dari seluruh user
4 Get Get UserId http://localhost: Endpoint ini digunakan
1234/user/:id untuk mengambil data
pengguna dari seorang user
5 Get Get Thread http://localhost: Endpoint ini digunakan
1234/thread/:id untuk mengambil data
thread berdasarkan id user
6 Get Get Comment http://localhost: Endpoint ini digunakan
Thread 1234/thread/:id/ untuk mengambil data
comment komentar dari sebuah
thread
7 Get Get Balasan localhost:1234/t Endpoint ini digunakan
Comment hread/comment/ untuk mengambil data
:id/balasan balasan dari sebuah
komentar
44
Tabel 4.5.2 Tabel API Lanjutan 1
8 Get Get localhost:1234/c Endpoint ini digunakan
AllCategory ategory untuk mengambil seluruh
data kategori
9 Get Seach Category localhost:1234/t Endpoint ini digunakan
hread/search untuk mengambil data
melalui search
10 Get Get AllThread localhost:1234/t Endpoint ini digunakan
hread untuk mengambil seluruh
data thread
11 Get Get ThreadUser localhost:1234/u Endpoint ini digunakan
ser/:id/threads untuk mengambil seluruh
data thread berdasarkan
user
12 Get Get Followed localhost:1234/u Endpoint ini digunakan
ser/followed untuk mengambil data
followed user
13 Get Get localhost:1234/ Endpoint ini digunakan
MessagesBy message/admin untuk mengambil data
Admin message yang dikirimkan
oleh moderator
14 Get Get AllUser localhost:1234/a Endpoint ini digunakan
ll_user untuk mengambil data
seluruh user
15 Get Ranking localhost:1234/u Endpoint ini digunakan
ser/ranking untuk mengambil data
terkait ranking dari user
16 Get Get All localhost:1234/u Endpoint ini digunakan
FavoriteUser ser/favorite untuk mengambil data
favorite thread
berdasarkan user
17 Post Register localhost:1234/u Endpoint ini digunakan
ser untuk melakukan input
data dalam proses register
oleh user
45
18 Post Login localhost:1234/u Endpoint ini digunakan
ser/login untuk melakukan input
data dalam proses login
oleh user
19 Post Follow localhost:1234/u Endpoint ini digunakan
ser/follow untuk melakukan follow
antara user
20 Post Insert Thread localhost:1234/t Endpoint ini digunakan
hread untuk melakukan input
data dalam proses input
thread oleh user
21 Post Liking Thread localhost:1234/li Endpoint ini digunakan
ke untuk melakukan like
pada thread user
22 Post Thread localhost:1234/t Endpoint ini digunakan
Comment hread/comment untuk melakukan input
data comment pada
sebuah thread
23 Post Insert Category localhost:1234/c Endpoint ini digunakan
ategory untuk melakukan input
data kategori thread
24 Post Send Message localhost:1234/ Endpoint ini digunakan
To Admin message untuk melakukan input
data message yang akan
dikirimkan kepada
administrator
25 Post Upload Image localhost:1234/u Endpoint ini digunakan
ser/picture untuk melakukan input
data image
26 Post Insert Favorite localhost:1234/u Endpoint ini digunakan
ser/thread/follo untuk melakukan add
w favorite thread
46
27 Delete Unfollow http://localhost: Endpoint ini digunakan

1234/user/follo untuk melakukan hapus
w terkait user yang telah di
follow
28 Delete Unliking http://localhost: Endpoint ini digunakan
Thread 1234/like untuk melakukan hapus
suka terhadap thread yang
pernah disukai
29 Delete Delete http://localhost: Endpoint ini digunakan
Comment 1234/thread/co untuk melakukan hapus
mment comment pada sebuah
thread
30 Delete Delete Thread http://localhost: Endpoint ini digunakan
1234/thread/:id untuk melakukan hapus
thread oleh user
31 Delete Delete User http://localhost: Endpoint ini digunakan
With Admin 1234/user/:id untuk melakukan hapus
user oleh administrator
32 Delete Delete Account http://localhost: Endpoint ini digunakan
from User 1234/user/:id untuk melakukan hapus
user oleh user
33 Delete Delete http://localhost: Endpoint ini digunakan
Category by Id 1234/category/:i untuk melakukan hapus
d kategori oleh
administrator
34 Delete Delete http://localhost Endpoint ini digunakan
Message By Id :1234/message untuk melakukan hapus
/:id message oleh
administrator
47
35 Delete Delete Favorite http://localhost: Endpoint ini digunakan
1234/user/thread untuk melakukan hapus
/follow favorite thread
36 Put Edit Data user http://localhost: Endpoint ini digunakan
1234/user untuk melakukan update
data dari user
37 Put Edit Category http://localhost: Endpoint ini digunakan
1234/category/:i untuk melakukan update
d data kategori oleh
administrator
38 Put Upgrade User http://localhost: Endpoint ini digunakan
to moderator 1234/user/upgra untuk melakukan update
de user menjadi moderator
4.6. Hasil Pengujian Sistem

Pengujian pada system ini akan dilakukan dengan black box testing
dengan metode User Acceptance Test (UAT). Berikut hasil pengujian
berdasarkan dari skenario yang telah disusun.
Tabel 4.6.1 Dokumentasi User Acceptance Test (UAT)
DOKUMENTASI USER ACCEPTANCE TEST
Nama Proyek Perancangan Website Forum Group Discussion
Menggunakan Metode Waterfall di Alterra Academy
Studi Kasus Alterra Academy
Penyedia Layanan Fatkur Rizal Rochmadian Putra
Tanggal Dokumen 27 Januari 2021
48
Tabel 4.6.2. Hasil Uji UAT
No Use Case/Proses Berhasil / Penguji Tanggal
Gagal Test
Nama Uji :
Register User
Deskripsi Pengujian:
Melakukan pengujian register
user dengan memasukkan
username, password, email,
address, phone dan gender
Kasus Uji :
- username : Fikryar
- password : fikry123
1 - email : fikryar@gmail.com Berhasil Fatkur Rizal 27 Januari
- address : jl. Kacer belimbing Rochmadian Putra 2022
Yogyakarta no 222
- phone : 082377392264
- gender : Laki-Laki
Hasil yang diharapkan :

- Jika berhasil maka halaman akan
berpindah ke halaman login
- Jika gagal maka pada halaman
register akan muncul pop-up
dengan pesan, proses register
telah gagal
49
Tabel 4.6.3. Hasil Uji UAT Lanjutan 1
Gagal Test
Nama Uji :
Login User
Melakukan pengujian login user
dengan memasukkan password
dan email
Kasus Uji :
2 - email : fikryar@gmail.com Berhasil Fatkur Rizal 27 Januari
- password : fikry123 Rochmadian Putra 2022

- Jika berhasil maka halaman akan
berpindah ke halaman home
thread
- Jika gagal maka pada halaman
login akan muncul pop-up
dengan pesan, proses login
telah gagal
50
Gagal Test
Nama Uji :
Like Thread
Melakukan pengujian like thread
dengan melakukan klik pada
button love bewarna merah
dibawah thread
3 Kasus Uji : Berhasil Fatkur Rizal

- title thread : Bahas Tuntas Meta Rochmadian Putra 27 Januari
Blacklist 2022

- Jika berhasil maka jumlah like
pada thread akan bertambah
- Jika gagal maka jumlah like
pada thread tidak bertambah
Nama Uji :
Unlike Thread
Melakukan pengujian unlike
thread dengan melakukan klik
pada button love tidak bewarna
dibawah thread
4 Kasus Uji : Berhasil Fatkur Rizal 27 Januari

- title thread : Bahas Tuntas Meta Rochmadian Putra 2022
Blacklist
- Jika berhasil maka jumlah like
pada thread akan berkurang
- Jika gagal maka jumlah like
pada thread tidak berkurang
51
Gagal Test
Nama Uji :
Follow User
Melakukan pengujian follow user
button bertuliskan ikuti
Kasus Uji :
5 - username : Ivan Berhasil Fatkur Rizal 27 Januari
Rochmadian Putra 2022
- Jika berhasil maka jumlah
following akan bertambah,
tulisan pada button ikuti
disebelah username Ivan akan
berubah menjadi mengikuti dan
pada halaman thread mengikuti
akan menampilkan thread dari
user Ivan
- Jika gagal maka jumlah

following tidak akan
bertambah, tulisan pada button
ikuti disebelah username Ivan
tidak berubah dan pada
halaman thread mengikuti tidak
menampilkan thread dari user
Ivan
52
Gagal Test
Nama Uji :
Unfollow User
Melakukan pengujian unfollow
user dengan melakukan klik pada
button bertuliskan mengikuti
Kasus Uji :
6 - username : Ivan Berhasil Fatkur Rizal 27 Januari
- Jika berhasil maka jumlah
following akan berkurang,
tulisan pada button mengikuti
disebelah username Ivan akan
berubah menjadi ikuti dan pada
halaman thread mengikuti tidak
lagi menampilkan thread dari
user Ivan
- Jika gagal maka jumlah

following tidak akan berkurang,
tulisan pada button mengikuti
disebelah username Ivan tidak
berubah dan pada halaman
thread mengikuti tetap
menampilkan thread dari user
Ivan
53
Gagal Test
Nama Uji :
Lihat thread dari user yang diikuti
Melakukan pengecekan terhadap
thread yang muncul pada
halaman thread mengikuti.
Kasus Uji :
7 - Melakukan pengecekan Berhasil Fatkur Rizal 27 Januari
terhadap thread Rochmadian Putra 2022

- Jika berhasil maka seluruh
thread berdasarkan user yang
diikuti akan muncul pada
halaman thread mengikuti
- Jika gagal tidak akan muncul

thread dari user yang telah
diikuti pada halaman thread
mengikuti
54
Gagal Test
Nama Uji :
Save thread
Melakukan pengujian save thread
button bertuliskan save diatas
kanan dari thread.

- Title Thread : Mengapa Go Rochmadian Putra 2022
lebih baik

- Jika berhasil thread akan
muncul pada halaman favorite
di halaman profile
- Jika gagal maka thread tidak
muncul pada halaman favorite
di halaman profile
Nama Uji :
Delete Thread
Melakukan klik pada button
bertuliskan delete pada thread
Kasus Uji :
- Title Thread : Bahas tuntas
9 mega blacklist Berhasil Fatkur Rizal 27 Januari
- Jika berhasil maka thread tidak
lagi muncul di halaman home
dan halaman profile
- Jika gagal maka thread tetap
muncul di halaman home dan
halaman profile
55
Gagal Test
Nama Uji :
Input Thread
Melakukan pengujian input
Thread dengan melakukan input
judul, diskusi dan kategori
Kasus Uji :
10 - Title : Mengapa Go lebih baik Berhasil Fatkur Rizal 27 Januari
- Diskusi : Go merupakan Bahasa Rochmadian Putra 2022
yang dikembangkan oleh
google, oleh karena itu…
- Kategori : Gaming

- Jika berhasil thread akan
muncul pada halaman home dan
halaman profile
muncul pada halaman home dan
halaman profile
56
Gagal Test
Nama Uji :
Send Message to administrator
Melakukan pengujian input pesan
menggunakan akun moderator
Kasus Uji :
Title: Mengapa Go lebih baik?
11 Message : message 1 merupakan.. Berhasil Fatkur Rizal 27 Januari
Kategori : Komputer Rochmadian Putra 2022

- Jika berhasil maka akan muncul
pop-up bertuliskan pesan
berhasil dikirim dan pesan akan
masuk ke halaman message
administrator
- Jika gagal maka akan muncul
pop-up bertuliskan pesan tidak
berhasil dikirim dan pesan tidak
akan masuk ke halaman
message administrator
57
Gagal Test
Nama Uji :
Login Administrator
Melakukan pengujian login
menggunakan akun administrator
Kasus Uji :
- Email : admin@gmail.com
12 - Password : pass5 Berhasil Fatkur Rizal 27 Januari
- Jika berhasil maka akan
diarahkan ke halaman home
administrator
- Jika gagal maka akan mucul
pop-up bertuliskan bahwa login
gagal
58
Gagal Test
Nama Uji :
Delete User
Melakukan pengujian proses
delete user dengan melakukan
klik pada button bertuliskan hapus
Kasus Uji :
13 - username : faris Berhasil Fatkur Rizal 27 Januari
- Jika berhasil maka username
faris akan hilang dari halaman
user administrator
- Jika gagal maka username faris
tidak hilang dari halaman user
administrator
59
Gagal Test
Nama Uji :
Update User
delete user dengan melakukan
Kasus Uji :
14 - Id User : 1 Berhasil Fatkur Rizal 27 Januari
- Name : Zehan Rochmadian Putra 2022
- Kategori : 1
- Name Kategori : Politik

- Jika berhasil maka akan muncul
pop-up bertuliskan user telah
telah berhasil menjadi
moderator politik
- Jika gagal maka akan muncul
pop-up bertuliskan user gagal
diubah
60
Gagal Test
Nama Uji :
Tambah Kategori
Tambah Kategori dengan
melakukan input pada textfield
Kasus Uji :
15 - Kategori : Makanan Berhasil Fatkur Rizal 27 Januari
- Jika berhasil maka kategori
akan muncul pada halaman
kategori
- Jika gagal maka kategori baru
tidak muncul pada halaman
kategori
Nama Uji :
Delete Kategori
Delete Kategori dengan
melakukan klik pada button
bertuliskan delete

- Kategori : Politik Rochmadian Putra 2022

akan akan hilang dari halaman
kategori
- Jika gagal maka kategori baru
tidak hilang dari halaman
kategori
61
Gagal Test
Nama Uji :
Update Kategori
Update kategori.
Kasus Uji :
- Nama Kategori : Makanan
17 - Nama baru Kategori : Minuman Berhasil Fatkur Rizal 27 Januari
makanan akan berubah menjadi
minuman
- Jika gagal maka kategori
makanan akan tetap menjadi
kategori makanan
Nama Uji :
Delete Thread
Delete Thread.
Kasus Uji :
- Title Thread : Mengapa Go
18 lebih baik Berhasil Fatkur Rizal 27 Januari
- Jika berhasil maka thread akan
hilang dari halaman diskusi
akan hilang dari halaman
diskusi
62
Gagal Test
Nama Uji :
Delete Message
delete message dengan melakukan
Kasus Uji :
19 - title message : Mengapa Go Berhasil Fatkur Rizal 27 Januari
lebih baik Rochmadian Putra 2022
- message : message 1
merupakan..

- Jika berhasil maka message
dengan dengan title message
“mengapa GO lebih baik” akan
hilang dari halaman message
- Jika gagal maka message
dengan dengan title message
“mengapa GO lebih baik” tidak
hilang dari halaman message
63
BAB V
PENUTUP
5.1. Kesimpulan
Solusi yang diusulkan pada permasalahan yang muncul terkait belum
adanya wadah yang tepat untuk melakukan diskusi dan bertukar informasi bagi
pengguna LMS dari Alterra Academy adalah perancangan website forum group
discussion menggunakan metode waterfall. Perancangan website Diskusiin ini
berdasarkan pada analisis SWOT dan telah digunakan metode waterfall untuk
melakukan proses pengembangan. Dengan adanya website Disuksiin ini,
pengguna LMS Alterra Academy akan memiliki sebuah wadah untuk
melakukan diskusi terkait pembelajaran yang tersedia di LMS Alterra
Academy.
5.2. Saran
Website Diskusiin telah dibuat, akan tetapi website Diskusiin dapat
dikembangkan kearah yang lebih baik dengan beberapa hal ini
- Perbaikan tampilan / user interface (UI) agar lebih menarik dan lebih
responsive ketika digunakan dalam bentuk mobile
- Memperbaiki fungsi search agar bisa digunakan oleh pengguna secara

maksimal
- Perbaikan penggunaan fitur dari moderator agar dapat lebih maksimal

dalam melakukan filter terkait thread yang melanggar peraturan
5.2. Keberlanjutan
Website Diskusiin ini selanjutnya dapat dikembangkan untuk menjadi
sebuah wadah yang dapat digunakan dalam melakukan diskusi dari pengguna
LMS Alterra Academy atau dapat digunakan oleh masyarakat yang sedang
melakukan pembelajaran.
64
DAFTAR PUSTAKA
Nidhra, S., & Dondeti, J. (2012). Black Box and White Box Testing Techniques - A
Literature Review. International Journal of Embedded Systems and
Applications, 2(2), 29–50. https://doi.org/10.5121/ijesa.2012.2204
Sasmito, G. W. (2017). Penerapan Metode Waterfall Pada Desain Sistem Informasi
Geografis Industri Kabupaten Tegal. Jurnal Informatika:Jurnal
Pengembangan IT (JPIT), 2(1), 6–12.
Pramudita, R., Arifin, R. W., Alfian, A. N., Safitri, N., & Anwariya, S. D. (2021).
PENGGUNAAN APLIKASI FIGMA DALAM MEMBANGUN UI / UX
YANG INTERAKTIF PADA PROGRAM STUDI TEKNIK. Jurnal Buana
Pengabdian, 3(1), 149–154
Setiyani, L. (2019). Pengujian Sistem Informasi Inventory Pada Perusahaan Distributor
Farmasi Menggunakan Metode Black Box Testing. Techno Xplore : Jurnal Ilmu
Komputer Dan Teknologi Informasi, 4(1), 1–9.
https://doi.org/10.36805/technoxplore.v4i1.539
Velankar, S., & Mane, D. (2017). Comparative Analysis of Bootstrap and UIkit
framework. International Research Journal of Engineering and
Technology(IRJET), 4(6), 4–7.
https://irjet.net/archives/V4/i6/IRJET V4I6495.pd
65
LAMPIRAN
Lampiran 1 Surat Balasan Perusahaan
66
Lampiran 2 Surat Catatan Harian (LogBook)
No Tanggal Kegiatan
1 23 Agustus 2021 Pada pertemuan pertama dalam kelas Back-End
penulis mendapatkan bahan pembelajaran tentang
penggunaan dasar dari golang
2 24 Agustus 2021 Penulis mendapatkan pembelajaran mengenai dasar
dari penggunaan dari bahasa pemrograman golang
3 25 Agustus 2021 Penulis mendapatkan pembelajaran mengenai

penggunaan slice, array dan string
method, dan struct
interface, recursive, sorting dan searching
6 30 Agustus 2021 Penulis melakukan tes algoritma di hacker rank

menggunakan bahasa pemrograman golang
7 31 Agustus 2021 Penulis mendapatkan pembelajaran mengenai brute

force, greedy.
8 01 September 2021 Penulis mendapatkan pembelajaran mengenai

dynamic programming in Golang
9 02 September 2021 Penulis melakukan review mengenai hacker rank

yang telah dilaksanakan di hari senin
concurrency programming
11 06 September 2021 Penulis melakukan tes algoritma 2 di hacker rank
menggunakan Golang
12 07 September 2021 Penulis mendapatkan pembelajaran introducing into
SQL based database
13 08 September 2021 Penulis mendapatkan pembelajaran dalam
menggunakan fungsi pada database
14 09 September 2021 Penulis mendapatkan pembelajaran introduction into
NoSQL dan MongoDB
Advance Query, Array dan Aggregation
67
No Tanggal Kegiatan
16 13 September 2021 Penulis melakukan diskusi mengenai mini project
Back-End
17 14 September 2021 Penulis mendapatkan pembelajaran cara melakukan

configuration management

penggunaan github workflow
pengenalan terhadap Restfull API
20 17 September 2021 Penulis mendapatkan pembelajan dari penggunaan

object relational mapping (ORM) dan code structure
middleware
22 21 September 2021 Penulis mendapatkan pembelajaran mengenai unit
testing
23 22 September 2021 Penulis mendapatkan pembelajaran mengenai system

design
24 23 September 2021 Penulis mendapatkan pembelajaran mengenai clean

code dan best practice
code architecture
architecture advance

kubernetes
28 29 September 2021 Penulis mendapatkan pembelajaran mengenai docker
29 30 September 2021 Penulis mendapatkan pembelajaran mengenai docker

advance
30 01 Oktober 2021 Penulis mendapatkan pembelajaran mengenai
deployment
68
No Tanggal Kegiatan
31 04 Oktober 2021 Penulis melakukan implementasi dalam perancangan

restfull API
32 05 Oktober 2021 Penulis melakukan implementasi dalam perancangan

restfull API
33 06 Oktober 2021 Penulis melakukan implementasi dalam pembuatan
restfull API
34 07 Oktober 2021 Penulis melakukan implementasi dalam pembuatan

restfull API
35 08 Oktober 2021 Penulis melakukan presentaasi restfull API
36 11 Oktober 2021 Penulis mendapatkan materi soft skill mengenai

profesi software engineering

pembuatan cv yang baik
38 13 Oktober 2021 Penulis mendapatkan materi soft skill mengenai work

management
39 14 Oktober 2021 Penulis mendapatkan materi soft skill mengenai time
manegement
pembuatan become fresh graduate
41 18 Oktober 2021 Pada pertemuan pertama dalam kelas Front-End
penulis mendapatkan bahan pembelajaran tentang
pembuatan wireframe
pembuatan desain User Interface (UI) di website
figma
43 21 Oktober 2021 Penulis mendapatkan pembelajaran menggunakan
HTML
44 22 Oktober 2021 Penulis mendapatkan pembelajaran penggunaan CSS
untuk mengatur tampilan pada website
45 25 Oktober 2021 Penulis mendapatkan tugas untuk
mengimplementasikan materi pembelajaran pada
sebuah studi kasus
javascript dimulai dari value, tipe data dan
destrcucturing
javascript mulai dari method, perulangan dan function
69
No Tanggal Kegiatan
javascript mengenai control flow, promise, wait,
class dan DOM
49 29 Oktober 2021 Penulis mendapatkan pembelajaran mengenai materi
node js
50 1 November 2021 Penulis mendapatkan pengenalan mengenai ReactJS
51 2 November 2021 Penulis mendapatkan pembelajaran mengenai

fundamental ReactJS
52 3 November 2021 Penulis mendapatkan pembelajaran mengenai event
handler menggunakan class
53 4 November 2021 Penulis mendapatkan pembelajaran mengenai transisi

penggunaan class menjadi function
54 5 November 2021 Penulis mendapatakan pembelajaran mengenai

routing pada ReactJS

pembuatan form dengan adanya validasi yang bisa
digunakan pada form tersebut
56 9 November 2021 Penulis mendapatkan pembelajaran cara
menggunakan redux toolkit dan cara bagaimana
fetching data dari API
57 10 November 2021 Penulis mendapatkan pembelajaran materi mengenai
penggunaan axios pada ReactJS
58 11 November 2021 Penulis mendapatkan pembelajaran mengenai unit
testing yang dapat dilakukan pada Front-End
59 12 November 2021 Penulis mulai membahas tema mengenai mini project
60 15 November 2021 Penulis mendapatkan pembelajaran mengenai graph

ql, pembuatan tabel dan pembuatan database di
hasura
61 16 November 2021 Penulis mendapatkan pembelajaran bagaimana cara
menampilkan data yang terdapat pada database
70
No Tanggal Kegiatan
CRUD yang bisa dilakukan menggunakan hasura
63 18 November 2021 Penulis mendapatkan pembelajaran mengenai fitur

description yang bisa di manfaatkan ketika
menggunakan hasura
64 19 November 2021 Penulis melakukan pembahasan mengenai wireframe
yang telah dibuat
65 22 November 2021 Penulis mendapat tugas untuk membuat desain di
figma berdasarkan wireframe yang telah dibuat
66 23 November 2021 Penulis menyelesaikan desain yang belum selesai

pada pertemuan sebelumnya
67 24 November 2021 Penulis mulai masuk kedalam tahap pengubahan
desain yang telah dibuat ke dalam bentuk kodingan
68 25 November 2021 Penulis menyelesaikan bagian routing yang

digunakan untuk berpindah halaman pada ReactJS
69 26 November 2021 Penulis mencari data terkait detail yang akan

ditampilkan pada mini project
70 29 November 2021 Penulis telah mendapatkan data terkait serta

mengolah menjadi data yang dapat disajikan kepada
user
71 30 November 2021 Penulis menyelesaikan fitur pemilihan kursi
72 1 Desember 2021 Penulis menyelesaikan semua dynamic routing serta

penggunakan library useparams
73 2 Desember 2021 Penulis menyelesaikan salah satu fitur CRUD yaitu

read yang berguna untuk membaca dan menampilkan
data yang terdapat pada database
74 3 Desember 2021 Penulis melakukan review mengenai mini project
yang telah dikerjakan
75 6 Desember 2021 Penulis menambahkan fitur CRUD yaitu Create
Memasukkan input ke dalam database dan Delete
untuk menghapus data yang terdapat pada database
76 7 Desember 2021 Penulis mendapatkan kelompok serta pembagian
judul terkait capstone project yang dikerjakan secara
berkelompok.
71
No Tanggal Kegiatan
77 8 Desember 2021 Penulis mendapatkan tugas untuk mencari preferensi

terkait capstone project yang telah dibagikan
78 9 Desember 2021 Penulis dan kelompok melakukan perancangan terkait

MVP yang akan dikerjakan di capstone project
79 10 Desember 2021 Penulis membuat wireframe untuk tahap awal
pembuatan capstone project
80 13 Desember 2021 Penulis bersama kelompok melakukan presentasi

mengenai wireframe yang dibuat
82 14 Desember 2021 Penulis bersama kelompok melengkapi dan

menyempurnakan wireframe
83 15 Desember 2021 Penulis Bersama kelompok merancang swagger dan
Entity Relational Database (ERD) untuk keperluan
capstone project
84 16 Desember 2021 Penulis membuat desain di figma berdasarkan
wireframe yang telah disepakati
85 17 Desember 2021 Penulis melanjutkan pengerjaan desain web di figma
86 20 Desember 2021 Penulis membuat halaman login berdasarkan desain

figma yang telah dibuat
87 21 Desember 2021 Penulis membuat halaman register berdasarkan
desain figma yang telah dibuat
88 22 Desember 2021 Penulis membuat halaman setelah login berdasarkan
desain figma yang telah dibuat
89 23 Desember 2021 Penulis membuat halaman followers dan following
berdasarkan desain figma yang telah dibuat
90 24 Desember 2021 Penulis mengerjakan bagian routing untuk
perpindahan antara halaman
91 27 Desember 2021 Penulis membuat halaman profile berdasarkan desain
figma yang telah dibuat
92 28 Desember 2021 Penulis merapikan dan memperbaiki halaman yang
telah dibuat
93 29 Desember 2021 Penulis memasukkan data login yang akan diinputkan
kedalam usestate
94 30 Desember 2021 Penulis mengirim data login menggunakan global
state management/redux
72
No Tanggal Kegiatan
95 03 Januari 2022 Penulis mendapatkan review materi mengenai
penggunaan docker yang nantinya akan digunakan
untuk deploy pada final project
96 05 Januari 2022 Penulis mengerjakan proses login pada Front-End,
hal ini bertujuan agar data yang dimasukkan bisa
sesuai dengan data yang berada di database, sehingga
dari Back-End dapat mengirim kembali token untuk
digunakan pada proses validasi
97 06 Januari 2022 Penulis mengerjakan bagian registrasi untuk user
98 07 Januari 2022 Penulis memperbaiki bug yang terdapat pada proses

login dan proses register
99 10 Januari 2022 Penulis mulai mengerjakan bagian input thread,
untuk yang pertama kali penulis lakukan adalah
memasukkan data input kedalam usetate
100 11 Januari 2022 Penulis mengejakan pengerjaan pembuatan halaman
admin pada bagian home, user, kategori dan
moderator
101 12 Januari 2022 Penulis mengerjakan CRUD Delete kategori pada
halaman admin
102 13 Januari 2022 Penulis merapikan halaman admin
103 14 Januari 2022 Penulis mengerjakan integrasi dengan API yang telah
disediakan untuk proses input thread
104 17 Januari 2022 Penulis mengerjakan bagian input komentar
105 18 Januari 2022 Penulis mengerjakan login pada admin
106 19 Januari 2022 Penulis mengerjakan fitur follow dan unfollow,

sehingga dengan fitur ini user bisa melakukan follow
dan unfollow dengan user lainnya
107 20 Januari 2022 Penulis mulai integrasi dengan API dimulai dari get
all thread untuk menampilkan seluruh thread pada
halaman home, selanjutya penulis mengerjakan
dibagian get profile data pada user
108 21 Januari 2022 Penulis melakukan integrasi pada halaman admin,
mulai dari get all thread, get all user, get kategori,
input kategori, delete kategori, delete user, delete
thread, get message
73
No Tanggal Kegiatan
109 24 Januari 2022 Penulis menambahkan validasi login dan registrasi.
Selain itu penulis mengerjakan fitur like thread,
unlike thread, delete thread, get all thread dari user
yang diikuti
110 25 Januari 2022 Penulis melakukan integrasi dengan API yang telah
disediakan untuk proses user dapat menyimpan
thread dengan favorite, lalu unfavorite, input thread,
delete comment, send message, input komentar
111 26 Januari 2022 Penulis melengkapi kekurangan integrasi dengan API

dan memperbaiki bug yang muncul
112 27 Januari 2022 Penulis melakukan deploy dengan vercel
113 28 Januari 2022 Penulis bersama tim melakukan presentasi terhadap

tim penilaian terkait final project
74
Lampiran 3 Bukti Dokumentasi Bimbingan Pembimbing Lapangan
75
76
Lampiran 4 Screenshoot sistem bukti konsul bimbingan
77
Lampiran 5 Link Seminar / Vlog
https://drive.google.com/drive/folders/14yw5RattTbqTEn_BY7PXHHT77-
XBVr5s?usp=sharing
78
Lampiran 6 Daftar Relasi
Muhammad Ismail
Diana Yulinda
Abdurrachman Kamil Dhermawan
79
Nada Yasinta
Muchammad Muchson
80
Lampiran 7 Daftar Pengetahuan
No Kompetensi
SoftSkill:
1 Time & Task Management
2 Teamwork & Collaboration
3 Basic Leadership Skills
4 Basic Communication Skills
5 Public Speaking and Presentation Skills
6 Building Resume and CV
HardSkill:
1 Basic Programming
2 Big-O Time, Array, Slice & Function
3 String, Map, & Advance Function
4 String, Map, & Advance Function
5 Recursive, Number Theory, Sorting, Searching & Regex
6 Stack & Queue
7 Brute Force, Greedy and D&C
8 Dynamic Programming
9 Pointer, Method, Struct & Interface
10 Database Schema, DDL, DML
11 Join, Union, Agregasi, Subquery, Function (DBMS)
12 NoSQL & MongoDB
13 RESTful API & Echo Golang
14 ORM & Code Structure & Dependency Management
15 Middleware
16 Unit Testing
17 Hexagonal Architecture
18 Configuration Management
19 Clean Code & Code Review
20 Containerization Docker
21 Continuous Integration
22 Deployment
81
23 UI/UX
24 Prototype UI/UX using Figma
25 HTML/CSS
26 Javascript Refreshment
27 DOM & ES6
28 Node Js
29 React
30 React Fundamental - State, Props, Event Handling
31 React Fundamental - Router
32 React Fundamental - Form and Data Fetching
33 React Fundamental - Hook
34 Redux/Context
35 GraphQL, Mutation, Apollo, Subscription
36 Testing and Deployment
82
Lampiran 8 Sertifikat MSIB
83

28 Juni - LaporanKP (v9)

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

28 Juni - LaporanKP (v9)

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN KERJA PRAKTEK

Perancangan Website Forum Group Discussion

Fatkur Rizal Rochmadian Putra 123190130

PROGRAM STUDI INFORMATIKA

Perancangan Website Forum Group

Fatkur Rizal Rochmadian Putra 123190130

Telah diperiksa dan disetujui oleh Dosen Pembimbing Kerja Praktik

Pada Tanggal : 28 Juni 2022

Pembimbing Lapangan Pembimbing Kerja Praktik

Abdurrachman Kamil Dhermawan Sylvert Prian Tahalea, S.Si., M.Cs

Simon Pulung Nugroho, S.Kom., M.Cs.

Yogyakarta, 28 Juni 2022

Berawal dari dimulainya program baru yang diadakan oleh Kemetrian

HALAMAN PENGESAHAN ............................................................................... ii

KATA PENGANTAR .......................................................................................... iii

DAFTAR ISI .......................................................................................................... v

DAFTAR GAMBAR ............................................................................................ vi

DAFTAR TABEL............................................................................................... viii

BAB I PENDAHULUAN ...................................................................................... 1

Gambar 2.2 Struktur Organisasi .............................................................................. 5

Tabel 2.4.1. Jadwal Kerja........................................................................................ 7

Kampus merdeka merupakan bagian dari kebijakan Merdeka Belajar

1.2. Rumusan Masalah

2. Bagaimana cara untuk mengatasi permasalahan yang muncul ketika

3. Bagaimana cara pengguna melakukan diskusi atau memiliki pertanyaan

4. Bagaimana cara agar pengguna LMS Alterra Academy mendapatkan

5. Bagaimana cara agar pengguna LMS Alterra Academy dapat

2. Mempermudah peserta didik / pengguna untuk bertanya saat

3. Meningkatkan attitude ketika melakukan diskusi

4. Dapat memberikan porsi yang seimbang antar individu dalam

5. Memberikan kesempatan bagi pengguna untuk mendapatkan relasi

2. Mendapatkan informasi tambahan ketika sedang melakukan

3. Bertambahnya relasi setelah menggunakan website diskusiin

PROFIL LOKASI KERJA PRAKTEK

2.1. Profil Instansi

2.2. Struktur Organisasi

Gambar 2.2 Struktur organisasi

2.3. Job Description

2.4. Jadwal Kerja

Wkt Class Mentor Senin Selasa Rabu Kamis Jumat

Week Professio - 15.15- 15.15- 15.15- 15.15- 15.15-

Week Frontend Muham

Week Capstone Rachman

3.1. Analisi Permasalahan

Perkembangan teknologi yang sangat pesat di era globalisasi saat ini

Tabel 3.1.1 Tabel SWOT

3.2.1. Metode Pengembangan Sistem

Gambar 3.2.1.1 Metode Pengembangan Sistem Waterfall

Menurut Ian Summeville (2011) menjelaskan bahwa ada lima

3.2.2. Spesifikasi Hardware & Software

3.3.1. Implementasi Perancangan Website Diskusiin

4. Perancangan User Interface (UI)

Gambar 3.3.1.2 Perancangan UI Menu Login

Gambar 3.3.1.2 merupakan rancangan awal menu login. Pada

Gambar 3.3.1.3 diatas merupakan rancangan awal halaman

3.3.2. Metode Pengujian

3.3.3. Skenario Pengujian Menggunakan Metode Black Box

HASIL DAN PEMBAHASAN

4.1. Implementasi User Interface (UI) User

Gambar 4.1.1. Implementasi UI Halaman Landing Page User

Gambar 4.1.3. Implementasi UI Halaman Login

e. Halaman Mengikuti Thread

Gambar 4.1.5. Implementasi UI Halaman Mengikuti Thread