13
Bab IV
Hasil Dan Pembahasan
Pada bab ini akan membahas bagaimana spesifikasi projek yang digunakan, bentuk akhir dari aplikasi dan juga implementasinya.
4.1 Pembuatan Projek Vue Js
Vue JS adalah salah satu framework atau library dari JavaScript yang digunakan untuk untuk membuat tampilan (interface) pada website agar tampak lebih interaktif. Fungsi lain dari Vue JS adalah membuat SPA (Single Page Application).
Berikut ini adalah spesifikasi project yang digunakan dalam membangun website untuk manajemen data kegiatan perusahaan:
Tabel 1. Spesifikasi Project
No. Spesifikasi Project Keterangan
1. Project Vue JS
2. Languange Javascript
3. Package Manager NPM
4. UI Framework Bootstrap
5. Linting Tools ESLint
6. Rendering Mode Single Page
App
7. Dependencies Firebase
14 4.2 User Manual
4.2.1 Halaman Login
Berikut ini adalah tampilan dari Halaman Login, dimana Login disini dapat dilakukan oleh admin, peserta kegiatan dan juga penyelenggara kegiatan.
Gambar 1. Tampilan From Login
Gambar 7 adalah tampilan from login, user dapat melakukan login melalui via google dan juga dapat memasukkan username dan password. Form login ini digunakan oleh user dengan role admin, calon peserta event dan penyelenggara event. Untuk role admin dilakukan dengan cara mengisi username dan password.
4.2.2 Halaman Dasboard Admin
Berikut ini adalah tampilan dari Dasboard Admin, dimana admin adalah karyawan PT. Kreasi Orang Muda (Kreasi X). Terdapat menu List User dan List Event.
Gambar 2. Tampilan Halaman Dasboard Admin
Gambar 8 adalah tampilan halaman dasboard admin, halaman ini hanya bisa dilakukan oleh role admin. Terdapat menu dasboard, list user, list event. Pada menu list user, admin dapat mengubah role user calon peserta menjadi penyelenggara.
4.2.3 Halaman Buat Event
Berikut ini adalah tampilan dari Halaman buat Event, dimana menu ini hanya bisa diakses oleh Penyelenggara Kegiatan.
15
Gambar 3. Halaman buat Event
Gambar 9 adalah halaman buat Event. Halaman ini dibuat untuk pada saat penyelenggara membuat sebuah kegiatan.
Kode Program 1 membuat Event.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
createPicker() {
if (this.pickerApiLoaded && this.oauthToken) { console.log('sampai dalam if');
var view = new google.picker.View (google.picker.ViewId.DOCS);
view.setMimeTypes("video/mp4,video/ogg,video/m4v,video/mkv");
var picker = new google.picker.PickerBuilder() .enableFeature(google.picker.Feature.NAV_HIDDEN)
.enableFeature(google.picker.Feature.MULTISELECT_ENABLED) .setAppId(this.appId.API_KEY)
.setOAuthToken(this.oauthToken) .addView(view)
.addView(new google.picker.DocsUploadView()) .setDeveloperKey(this.developerKey)
.setCallback(this.pickerCallback) .build();
picker.setVisible(true); } },
pickerCallback(data) {
if (data.action == google.picker.Action.PICKED) { this.form.videoEvent = data.docs[0].id; }
},
showPickerDialog(){
this.loadPicker();
},
Kode program 1 merupakan kode program untuk mengupload video kegiatan yang dibuat oleh penyenggara kegiatan melalui google drive agar nanti dapat ditampilkan di website.
16 4.2.4 Halaman Event
Berikut ini adalah tampilan menu Halaman Event, dimana disini terdapat berbagai kegiatan yang sudah dibuat oleh Penyelenggara Kegiatan.
Gambar 4. Halaman Event
Gambar 10 adalah halaman Event, dimana halaman ini untuk para peserta yang ingin mendaftarkan kegiatan yang mereka pilih.
17 4.2.5 Halaman Detail Event
Berikut ini adalah tampilan dari Halaman Detail Event, dimana setelah memilih Event yang tersedia Peserta Kegiatan dapat mendaftar.
Gambar 5. Halaman Detail Event
Pada Gambar 11 adalah tampilan dari Halaman Detail Event, halaman ini dapat diakses ketika Peserta Kegiatan Memilih Event yang dipilih sebelumnya. Ketika Peserta Kegiatan klik daftar maka akan dilanjutkan ke menu Join Event.
4.2.6 Halaman Join Event
Berikut ini adalah tampilan dari Join Event, dimana setelah mendaftar Event yang dipilih peserta akan ditampilkan halaman Join Event.
18
Gambar 6. Halaman Join Event
Pada Gambar 12 adalah tampilan dari Join Event, dihalaman Join Event kita dapat menonton kegiatan yang kita ikuti, peserta kegiatan juga bisa like jika menyukai kegiatan dan juga membagikan kegiatan dengan fitur “bagikan” yang berupa copy link. Kemudian ada fitur chat jika peserta kegiatan ingin bertanya dan juga terdapat fitur cetak sertifikat.
Kode Program 2 membuat fitur chat.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
import firebase from 'firebase' sendMessage(){
const message = { eventID: this.eventID, text: this.showMessage, nama_lengkap:
localStorage.getItem('namaLengkap'), profile_picture:
localStorage.getItem('profilePicture') }
firebase .database() .ref("messages") .push(message);
this.showMessage = "";
},
Kode Program 2 membuat fitur chat merupakan kode program untuk membuat fitur chat, dimana chat yang sudah dilakukan oleh Penyelenggara Kegiatan dan juga Peserta kegiatan tersimpan di dalam firebase.
Kode Program 3 membuat fitur cetak sertifikat.
19
1 2 3 4 5 6 7 8 9 10 11 12 13 14
import firebase from 'firebase' import jsPDF from 'jspdf' methods:{
generatePdf() {
let width = screen.width;
let height = screen.height;
var doc = new jsPDF("l", "px", [width,height]);
doc.html(document.querySelector('#sertif'), { callback: function(pdf){
pdf.save('test.pdf');
} }) } }
Kode Program 3 membuat fitur cetak sertifikat merupakan kode program untuk membuat fitur cetak sertifikat, dimana harus import jsPDF from ‘jspdf’ agar dapat membuat fitur cetak sertifikat.
4.3 Hasil Pengujian Sistem
Pengujian sistem dilakukan dengan 2 teknik pengujian alfa dan pengujian beta. Pengujian alfa dilakukan dengan cara menguji sistem menggunakan metode Black Box Testing. Pada metode ini, website diuji tiap-tiap fiturnya agar menampilkan hasil yang diharapkan. Untuk hasil pengujian Black Box Testing dapat dilihat di lampiran 1. Selain itu, pengujian beta dilakukanlah pengujian UAT (User Acceptance Testing). Pengujian UAT dilakukan dengan melakukan wawancara kepada karyawan PT Kreasi Orang Muda (KreasiX) guna mengetahui apakah website ini sudah mencapai standar perusahaan. Untuk dokumentasi pengujian UAT dapat dilihat di Lampiran 3. Dalam penelitian ini, dilakukanlah uji persepsi guna mengetahui apakah tujuan perusahaan dalam membuat website ini tepat sasaran. Kuisioner dibagikan kepada kaum muda usia 20-24 tahun karena berdasarkan survei Asosiasi Penyelenggara Jasa Internet Indonesia (APJII), penetrasi pengguna internet di Indonesia untuk kelompok usia 20-24 tahun mencapai 88,5 persen (Milana, R. 2021) yang bisa dibilang bahwa mayoritas pengguna internet di Indonesia adalah kaum muda. Hasil penyebaran kuisioner yang disebarkan kepada 20 responden dapat dilihat di lampiran 4.
20
DAFTAR PUSTAKA
Aditya Mahavira. (2020). Aplikasi Berbasis Web Marketplace Event Organizer Evoria (Online), (https://dspace.uii.ac.id/handle/123456789/30343, diakses pada 28 Oktober 2021 ).
Aswin Wibisurya. (2020). Analisis dan Perancangan Aplikasi FriendFinder Pemain Musik Berbasis Android (Online), (http://eprints.binus.ac.id/36418/, diakses pada 5 November 2021).
Dwi, T., Siahaan, A., & Murtako, A. (2021). Rancang Bangun Aplikasi Event Management Berbasis Web ( Studi Kasus PT . Jasamarga ( Persero ) Tbk .). vol. 2, no.1. hal. 1-2, 2021.
Febrian Bachri, H., Priyambadha, B., & Rusdianto, D. S. (2018). Pengembangan Aplikasi Manajemen Event Berbasis Web (Studi Kasus: Fakultas Ilmu Administrasi Universitas Brawijaya Malang). J- Ptiik.Ub.Ac.Id, vol. 2, no. 12, hal. 2548–2964, 2018.
Haryana, K. (2019). Penerapan Agile Development Methods Dengan Framework Scrum Pada Perancangan Perangkat Lunak Kehadiran Rapat Umum Berbasis Qr-Code. Jurnal Computech & Bisnis, vol. 13, no. 2, hal. 70–79, 2019.
Nabila, J. D., & Wijaksono, D. S. (2021). Analisis Proses Special Event Astra Daihatsu Dalam Customer Virtual Event Oleh PT. Maha Kreasi Indonesia. The Indonesian Journal of Communication Studies, vol. 14, no. 1, hal. 18, 2021.
Prakarsa, A. G., & Sujarwo, A. (2021). Pemanfaatan Vue Js Pada Fitur Pengaturan Tambak Dalam Aplikasi Budi Daya Tambak Jala. Automata, vol. 2, no. 1, hal. 1–5, 2021.
Safitri, D. K. (2020). Sistem Pendukung Keputusan Pemeliharaan Mesin untuk Industri Kecil dan Menengah Menggunakan Progressive Web Application Dengan Vue.Js. Endocrine, vol 9, hal. 6, 2020.
Samuel Ricko Perdana Putra, Pradana, F., & Amalia, F. (2019). Pembangunan Aplikasi Manajemen Event Gereja KGC Malang Berbasis Web. Jurnal Pengembangan Teknologi Informasi Dan Ilmu Komputer, vol. 3, no. 9, hal. 8382–8389, 2019.
Sonita, A., & Fardianitama, R. F. (2018). Aplikasi E-Order Menggunakan Firebase dan Algoritme Knuth Morris Pratt Berbasis Android. Pseudocode, vol. 5, no. 2, hal. 38–45, 2018.
Syafrida, S., & Hartati, R. (2020). Bersama Melawan Virus Covid 19 di Indonesia. SALAM: Jurnal Sosial Dan Budaya Syar-I, vol. 7 no. 6, hal. 495–508, 2020.
Umbu Dagha, W. C. (2021). Web Event, Spring Boot, Java Pembangunan Aplikasi Web Event menggunakan Framework Spring Boot di PT XYZ. JATISI (Jurnal Teknik Informatika Dan Sistem Informasi), vol. 8, no. 3, hal. 1457–1469, 2021.
Utama, R. S., Meileni, H., & Wahyuningrum, I. (2018). Pengembangan Aplikasi Monitoring Peralatan Pada PT Sucofindo Cabang Palembang, Lahat dan Bangka BerbasisWeb(Online), (https://onesearch.id/Record/IOS15200.5879?widget=1&library_id=795, diakses pada 20 November 2021).
Milana, R. 2021. Kaum Muda, Media Sosial dan Nasionalisme. Diambil dari Revolusi Mental:
https://revolusimental.go.id/kabar-revolusi-mental/detail-berita-dan-artikel?url=kaum-muda- media-sosial-dan-nasionalisme. Diakses pada 30 Januari 2022.
