PROJECT PEMBUATAN WEBSITE OFFICE BOOKING SYSTEM MENGGUNAKAN FRAMEWORK VUE JS

TUGAS AKHIR

OLEH:

MUHAMMAD MIFTAH HASIBUAN

1901052043

PROGRAM STUDI DIII TEKNIK TELEKOMUNIKASI

JURUSAN TEKNIK ELEKTRO
POLITEKNIK NEGERI PADANG
2022
PROJECT PEMBUATAN WEBSITE OFFICE BOOKING SYSTEM MENGGUNAKAN FRAMEWORK VUE JS
 TUGAS AKHIR Diajukan

Sebagai salah satu syarat

untuk memperoleh gelar Ahli Madya

Oleh
MUHAMMAD MIFTAH HASIBUAN
1901052043

PROGRAM STUDI DIII TEKNIK TELEKOMUNIKASI

JURUSAN TEKNIK ELEKTRO

POLITEKNIK NEGERI PADANG

2022
 LEMBAR PENGESAHAN

PROJECT PEMBUATAN WEBSITE OFFICE BOOKING SYSTEM MENGGUNAKANFRAMEWORK VUE JS

oleh :
MUHAMMAD MIFTAH HASIBUAN
190504013

Program Studi DIII Teknik Telekomunikasi

Jurusan Teknik Elektro
Politeknik Negeri Padang

Pembimbing I Pembimbing II

Lifwarda, S.T., M.Kom Rikki Vitria, S.S.T., M.Sc. Eng

NIP.19720222 200003 2 001 NIP.19761019 200212 1 002

Ketua Jurusan Koordinator Program Studi

Teknik Elektro Teknik Telekomunikasi

Rikki Vitria, S.S.T., M.Sc. Eng Lifwarda, S.T., M.Kom

NIP.19761019 200212 1 002 NIP.19720222 200003 2 001

LEMBAR PENGESAHAN
PROJECT PEMBUATAN WEBSITE OFFICE BOOKING

i
 SYSTEM MENGGUNAKANFRAMEWORK VUE JS

oleh :
MUHAMMAD MIFTAH HASIBUAN
(1901052043)

Tugas Akhir ini telah dipertanggungjawabkan di hadapan

Tim Penguji Tugas Akhir pada tanggal
8 September 2022

Tim Penguji

Ketua Sekretaris

Ramiati, S.T., SST., M.Kom Amelia Yolanda, S.T., M.T

NIP. 197604072003122001 NIP. 198105062006042004

Anggota Anggota

Uzma Septima, S.T., M.Eng Lifwarda, S.T., M.Kom

NIP. 1968092419933031004 NIP. 197202222000032001

Abstrak

Program Studi Independen Understanding Everything About Vue JsFront-End

Engineeringmerupakan adalahprogram yang dijalankan oleh Alterra Academy
dimana kita mempelajari cara penggunaan framework Vue Js dalam pembuatan
ii
desain UI/UX website dimana terdapat beberapa program seperti belajar dari via
web mengerjakan tugas yang disediakan, melakukan zoom pada malam hari serta
melakukan review tugas,mengejakan tugas mini project dan terakhir mengrjakan
tugas capstone final project.

Adapun Vue Js merupakan Framework yang akhir-akhir ini banyak dipakai dalam
mengembangkan project website. Vue Js, adapun kata Vue diambil dari kata vju
seperti view yang mana merupakan Framework nan progresif untuk membangun
antarmuka pengguna Tidak seperti beberapa kerangka kerja monolitik yang lain,
Vue dirancang dari dasar sekali agar dapat diadopsi secara bertahap. Pustaka
intinya difokuskan pada layer tampilan saja, dan sangat mudah untuk
diintegrasikan dengan pustaka yang lain atau dengan proyek yang sudah ada. Di
sisi lain, Vue sangat mampu memberikan dan mendukung Single Page
Application yang canggih ketika dikombinasikan dengan perkakas modern dan
dukungan pustaka.

Kata kunci (key words) : Vue Js, Understanding Everything About VUE JS

iii
 KATA PENGANTAR

Alhamdulillah, puji dan syukur penulis sampaikan atas kehadirat Allah

SWT yang telah memberikan Rahmat dan Karunia-Nya sehingga penulis dapat

menyelesaikan tugas akhir ini tepat pada waktunya. Tugas Akhir ini yang berjudul

“Project Pembuatan Website Office Booking System Menggunakan Framework

Vue Js” ini penulis buat sebagai salah satu syarat untuk memperoleh gelar Ahli

Madya dari Politeknik Negeri Padang khususnya Jurusan Teknik Elektro Program

Studi DIII Teknik Telekomunikasi.

Banyak hal dan pengalaman baru yang penulis dapatkan selama

pembuatan tugas akhir ini. Dalam menyelesaikan laporan ini, penulis banyak

mendapat bantuan, bimbingan dan dorongan berbagai pihak lainya. Oleh sebab itu

penulis mengucapkan terimakasih kepada:

1. Ibu Lifwarda, S.T., M.Kom selaku dosen pembimbing 1 yang selalu

memberikan waktu dan ilmunya untuk membimbing saya, sekaligus

sebagai Koordinator Program Studi DIII Teknik Telekomunikasi.

2. Bapak Rikki Vitria, S.S.T., M.Sc. Eng selaku dosen pembimbing 2

juga yang selalu memberikan waktu dan ilmunya untuk membimbing

saya, sekaligus sebagai Ketua Jurusan Teknik Elektro.

3. Bapak Moh Aufal Marom Arrozi selaku mentor program MSIB yang

mengajari materi tentang Framewrok Vue Js

4. Teman-teman kelas D Vue JS dan kelompok 48 yang telah membantu,

belajar, dan menghabiskan waktu bersama berjuang menyelesaikan

dari awal hingga akhir capstone project.

iv
 5. Seluruh pihak yang turut membantu dalam menyelesaikan laporan ini.

Semoga segala arahan, bantuan dan motivasi yang diberikan

mendapatkan balasan disisi Allah SWT.

Penulis menyadari bahwa laporan ini masih jauh dari kata sempurna. Oleh

karena itu saya mengharapkan kritik dan saran untuk membangun laporan ini lebih

baik ke depannya.

Akhir kata semoga laporan ini memberikan banyak manfaat bagi penulis

khususnya dan pembaca pada umumnya.

Padang, September 2022

Muhammad Miftah Hasibuan

v
 DAFTAR ISI
LEMBAR PENGESAHAN...........................................................................i
LEMBAR PENGESAHAN..........................................................................ii
Abstrak........................................................................................................iii
KATA PENGANTAR.................................................................................iv
DAFTAR ISI...............................................................................................vi
DAFTAR GAMBAR................................................................................viii
DAFTAR LAMPIRAN.............................................................................viii
BAB I PENDAHULUAN.............................................................................1
1.1 LatarBelakang....................................................................................1
1.2 Rumusan Masalah..............................................................................4
1.3 Batasan Masalah.................................................................................4
1.4 Tujuan................................................................................................4
1.5 Manfaat..............................................................................................5
1.6 Sistematika Penulisan Tugas Akhir...................................................5
BAB II LANDASAN TEORI.......................................................................7
2.1. Office Booking System.......................................................................7
2.2. Website...............................................................................................7
2.3. Hypertext Markup Language (HTML)..............................................8
2.4. Cascading Style Sheet (CSS).............................................................9
2.5. Javascript.........................................................................................10
2.6. Framework Vue Js...........................................................................12
BABIII PERANCANGAN DAN PEMBUATAN WEBSITE...................16
3.1 Minimum Viable Product(MVP)......................................................16
3.2 Flowchart.........................................................................................17
3.3 Tools yang digunakan......................................................................18
3.4 Instalasi Framework Vue Js Pada Visual Studio Code....................19
3.5 Instalasi Package Vue Js Pada Visual Studio Code.........................20
3.6 Kode Pemrograman Pembuatan Tampilan Website........................23

vi
BAB IV IMPLEMENTASI DAN PENGUJIAN.......................................53
4.1. Implentasi Website...........................................................................53
4.2. Pengujian Website............................................................................55
BAB V PENUTUP.....................................................................................60
5.1 Kesimpulan......................................................................................60
5.2 Saran.................................................................................................60
DAFTAR PUSTAKA.................................................................................61
LAMPIRAN...............................................................................................62

vii
 DAFTAR GAMBAR

Gambar 2. 1. Script HTML.............................................................................9

Gambar 2. 2. Logo CSS...................................................................................9
Gambar 2. 3. Selector, Property, dan Value.................................................10
Gambar 2. 4. Logo Javascript........................................................................10
Gambar 2. 5. Logo Vue Js.............................................................................12
Gambar 3. 1. Flowchart alur admin login.....................................................17
Gambar 3. 2. Flowchart alur admin manage office.......................................17
Gambar 3. 3. Flowchart alur admin manage transaction..............................17
Gambar 3. 4 Flowchart alur admin manage review.....................................17
Gambar 3. 5. Tampilan Visual Studio Code.................................................18
Gambar 3. 6. Tampilan Chrome Developer Tool..........................................19
Gambar 3. 7. Tampilan Terminal pada Visual Studio Code.........................20
Gambar 3. 8. Hasil instalasi Vue Js...............................................................20
Gambar 3. 9. Instal Vue Router.....................................................................21
Gambar 3. 10. Instal Vuex...............................................................................21
Gambar 3. 11. Instal JSON Server..................................................................22
Gambar 3. 12. Instal Axios..............................................................................22
Gambar 3. 13. Instal Vuetify...........................................................................23
Gambar 3. 14. Hasil seluruh Package Vue Js..................................................23
Gambar 3. 15. source code halaman admin login...........................................25
Gambar 3. 16. source code javascript admin login.........................................26
Gambar 3. 17. source code halaman manage office........................................31
Gambar 3. 18. source code javascript manage office......................................34
Gambar 3. 19. source code halaman manage transaction..............................42
Gambar 3. 20. source code javascript manage transaction............................47
Gambar 3. 21. source code halaman manage review......................................49
Gambar 3. 22. source code javascript manage review....................................52
Gambar 4. 1. Halaman Login........................................................................53
Gambar 4. 2. Halaman Manage Offices........................................................53
viii
Gambar 4. 3. Office Detail............................................................................54
Gambar 4. 4. Halaman Manage Review........................................................54
Gambar 4. 5. Halaman Manage Transaction................................................54
Gambar 4. 6. Input email dan password........................................................56
Gambar 4. 7. Letak Tombol Add Office........................................................57
Gambar 4. 8. Pop up tombol add office........................................................57
Gambar 4. 9. Letak tombol view detail dan status........................................58
Gambar 4. 10. Tampilan view detail...............................................................58
Gambar 4. 11. perubahan status publish ke hide.............................................58
Gambar 4. 12. Status pada manage transaction..............................................59

DAFTAR TABEL
Tabel 2. 1. Struktur Dasar HTML...............................................................8
Tabel 4. 1. Hasil Pengujian di Admin.......................................................29

DAFTAR LAMPIRAN

LAMPIRAN A LAMPIRAN LOA..................................................................62

LAMPIRAN B JADWAL PEMBELAJARAN...............................................63
LAMPIRAN C LOG ACTIVITY....................................................................65

ix
 BAB I
PENDAHULUAN
1.1 LatarBelakang

Dalam rangka menyiapkan mahasiswa menghadapi perubahan sosial,

budaya, dunia kerja dan kemajuan teknologi yang pesat, kompetensi

mahasiswa harus disiapkan untuk lebih relevan dengan kebutuhan zaman.

Link and Match tidak saja dengan dunia industri dan dunia kerja tetapi juga

dengan masa depan yang berubah dengan cepat. Perguruan tinggi dituntut

untuk dapat merancang dan melaksanakan proses pembelajaran yang inovatif

agar mahasiswa dapat meraih capaian pembelajaran mencakup aspek sikap,

pengetahuan, dan keterampilan secara optimal dan selalu relevan.

Kebijakan Merdeka Belajar - Kampus Merdeka diharapkan dapat

menjadi jawaban atas tuntutan tersebut. Kampus Merdeka merupakan wujud

pembelajaran di perguruan tinggi yang otonomi dan fleksibel sehingga

tercipta kultur belajar yang inovatif, tidak mengekang, dan sesuai dengan

kebutuhan mahasiswa. Program utama yaitu kemudahan pembukaan program

studi baru, perubahan sistem akreditasi perguruan tinggi, kemudahan

perguruan tinggi negeri menjadi PTN berbadan hukum, dan hak belajar tiga

semester di luar program studi. Mahasiswa diberikan kebebasan mengambil

SKS di luar program studi, tiga semester yang di maksud berupa 1 semester

kesempatan mengambil mata kuliah di luar program studi dan 2 semester

melaksanakan aktivitas pembelajaran di luar perguruan tinggi.

Alterra Academy merupakan salah satu mitra kegiatan Studi Independen

Bersertifikat (SIB) kampus merdeka. Alterra Academy (ALTA) adalah

1
sebuah platform akselerasi karir di bidang tech yang membantu talent

potensial untuk menjadi versi terbaik dari diri mereka dan membantu

organisasi di Indonesia untuk mendapatkan talenta yang terbaik untuk

organisasi mereka.

Alterra Academy telah melakukan riset bahwa kebutuhan perusahaan

terhadap programmer pada tahun 2019 – 2020 itu sangat tinggi dan

bertumbuh pesat khususnya pada Q4 2020. Data juga menunjukan bahwa

junior software engineer memiliki peluang karir yang tinggi dalam bidang

programmer. Maka dari itu, salah satu program yang diluncurkan dan bekerja

sama dengan kampus merdeka adalah Studi Independen Bersertifikat (SIB)

Understand Everythingabout Vue JS Front-End Engineer merupakan program

pelatihan Front-end Engineer (FE) secara online untuk para mahasiswa

dengan latar belakang jurusan apapun yang bertujuan bukan hanya untuk

memperkenalkan ilmu IT ke para mahasiswa, tapi juga untuk memungkinkan

mereka bisa membuat tampilan website yang menarik. Program Understand

Everything about Vue Js Front-end Engineer merupakan program pelatihan

bagi mahasiswa untuk dapat menjadi Front-End yang handal yang bisa

menguasai kemampuan teknis dalam membuat website seperti HTML, CSS,

JavaScript, Vue Js, Rest API, dan Database GraphQL. Program Understand

Everything about Vue Js Front-end Engineer di Alterra Academy ini

dilaksanakan sekitar 5 bulan yang mana dimulai pada pertengahan bulan

Februari dan berakhir pada bulan Juli. Ada beberapa timeline project di

program Understand Everything about Vue Js Front-end Engineer di Alterra

Academy ini yakni Technical Skills Class, Professional Skills Class, Mini

2
Project, dan Capstone Project. Dalam technical skills class, terdapat 27

sections modul pembelajaran yang harus dipelajari mahasiswa dalam waktu 2

bulan. Untuk Professional Skills Class, terdapat kelas malam yang selalu

diadakan pada hari selasa dan kamis selama 2 bulan. Untuk Mini Project,

dilaksanakan selama 2 minggu yang mana mahasiswa diminta untuk membuat

sebuah projek dari apa yang sudah dipelajari selama 2 bulan. Untuk Capstone

Project, dilaksanakan selama 2 bulan yang mana mahasiswa dikelompokan

untuk membuat projek besar sebuah website yang topiknya telah ditentukan

oleh Alterra Academy. Dikelompok tersebut terdapat 5 tim bagian yaitu:

1. UI/UX : Merancang desain untuk tampilan

website dan mobile

2. Front-End(Vue Js) : Merancang kode tampilan website

mengacu pada desain dari UI/UX.

3. Flutter Mobile : Merancang kode tampilan mobile

mengacu pada desain dari UI/UX.

4. Back-End(Golang) : Merancang database untuk front-end

dan mobile.

5. Quality Engineer(QE) : mengevaluasi kualitas codingan semua

role.

Berdasarkan latar belakang diatas, Capstone Project dari kampus

merdeka bisa dijadikan Tugas Akhir. Oleh karena itu, Tugas Akhir ini

berjudul “Project Pembuatan Website Office Booking System

Menggunakan Framework Vue Js.”

3
1.2 Rumusan Masalah

Adapun yang menjadi di rumusan masalah dalam tugas akhir ini adalah:

1. Bagaimana cara membuat dan mengimplementasikan tampilan

website Office Booking System dari sisi kerja Front-End?

2. Bagaimana cara melakukan pengujian websiteOffice Booking

System?

3. Bagaimana cara mengatasi kendala-kendala websiteOffice

Booking System?

1.3 Batasan Masalah

Adapun batasan masalah pada tugas akhir ini adalah:

1. Membuat tampilan websiteOffice Booking Systemmenggunakan

framework Vue Js.

2. Melakukan pengujian websiteOffice Booking System dari sisi

kerja admin.

3. Mengidentifikasi kendala-kendala websiteOffice Booking

Systemdari sisi kerja admin.

1.4 Tujuan

Adapun tujuan pembuatan tugas akhir ini adalah:

1. Dapat membuat dan mengimplementasikan tampilan website

Office Booking System dari fitur MVP dengan framework Vue Js.

2.Dapat melakukan pengujian website Office Booking System.

3.Dapat mengatasi kendala-kendala dalam implementasi dan

4
 pengujian website Office Booking System.

1.5 Manfaat

Dengan adanya Tugas Akhir ini diharapkan dapat memberikan informasi

unit seakurat mungkin sehingga semua User/pelanggan dapat memesan

kantor lebih efisien dan efektif.

1.6 Sistematika Penulisan Tugas Akhir

Dalam penyusunan dan penulisan Tugas Akhir ini, terdapat aturan dan

sistematika penulisan yang disusun dalam beberapa bab. Setiap bab terdiri

dari sub-sub bagian yang secara garis besar dapat dijelaskan sebagai berikut:

BAB I PENDAHULUAN

Pada bab ini menjelaskan tentang latar belakang, rumusan

masalah, batasan masalah, tujuan, manfaat, dan sistematika penulisan

laporan tugas akhir project pembuatan website Office Booking

System.

BAB II LANDASAN TEORI

Bab ini membahas tentang teori-teori yang menjadi acuan serta

mendukung pembuatan website Office Booking System.

BABIII PERANCANGAN DAN PEMBUATAN

Pada bab ini membahas tentang proses perancangan dan

pembuatan website Office Booking System.

BAB IV IMPLEMENTASI DAN PENGUJIAN

Pada bab ini membahas tentang hasil pembuatan dan pengujian

dari website Office Booking System.

5
BAB V PENUTUP

Bab ini berisikan kesimpulan dan saran.

6
 BAB II
LANDASAN TEORI

2.1. Office Booking System

Booking system, atau sistem pemesanan adalah sistem yang dipergunakan

untuk manajemen reservasi secara online. Sistem ini memungkinkan bisnis untuk

menerima pemesanan dengan cara yang lebih efektif dan efisien (Basir, Kasim,

& Hassan, 2018). Nama website Office Booking System pada capstone project ini

adalah KOBA SPACE.

Nama KOBA SPACE sendiri merupakan sisipan dari kata "Kolaborasi

Bersama" yang mana sesuai tujuan website ini untuk menyediakan layanan

penyewaan coworking space dan sewa kantor di lokasi-lokasi strategis. Setiap

ruang dirancang sesuai kebutuhan tumbuh kembang bisnis. KOBA SPACE

menyediakan solusi kantor cabang bagi enterprise yang memiliki rencana jangka

panjang untuk membangun kolaborasi dan pengembangan bisnis di lokasi

strategis.

2.2. Website

Website adalah kumpulan dari halaman web yang sudah dipublikasikan di

jaringan internet dan memiliki domain/URL (Uniform Resource Locator) yang

dapat diakses semua pengguna internet dengan cara mengetikan alamatnya. Hal

ini dimungkinkan dengan adanya teknologi World Wide Web (WWW).

(Arief, 2011)

Halaman website biasanya berupa dokumen yang tertulis dalam format

7
Hypertext Markup Language (HTML), yang bisa diakses melalui HTTPS,

HTTPS adalah suatu protokol yang menyampaikan berbagai informasi dari

server website untuk ditampilkan kepada para User atau pemakai melalui web

browser. (Nofyat, Ibrahim, & Ambarita, 2018)

2.3. Hypertext Markup Language (HTML)

2.3.1. Pengertian HTML

Hypertext Markup Language, atau HTML adalah bahasa markup

standar untuk membuat dan menyusun halaman dan aplikasi web, atau sebuah

standar yang digunakan secara luas untuk menampilkan halaman web. HTML

sendiri secara resmi lahir pada tahun 1989 oleh tim Berners Lee dan

dikembangkan oleh World Wide Web Consortium (W3C), yang kemudian

pada tahun 2004 dibentuklah Web Hypertext Application Technology Working

Group (WHATG) yang hingga kini bertanggung jawab akan perkembangan

bahasa HTML ini. Hingga kini telah mengembangkan HTML5, sebuah versi

terbaru dari HTML yang mendukung tidak hanya gambar dan teks, namun

juga menu interaktif, audio, video, dan lain sebagainya. (J. Enterpise, 2016)

2.3.2. Struktur Halaman HTML

HTML setidaknya memiliki struktur dasar yang terdiri dari 4 bagian,

lihat tabel 2.1 sebagai berikut:

Tabel 2. 1. Struktur Dasar HTML

<! DOCTYPE html> Mendefinisikan dokumen ini sebagai HTML5

8
 <html> Elemen root dari halaman HTML
<head> Berisi informasi meta tentang dokumen
<title> Menentukan judul untuk dokumen
<body> Berisi konten halaman yang terlihat

Struktur di atas merupakan struktur HTML paling dasar. Contoh

scriptnya, lihat pada gambar 2.1 sebagai berikut:

Gambar 2. 1. Script HTML

2.4. Cascading Style Sheet (CSS)

Gambar 2. 2. Logo CSS

Cascading Style Sheet (CSS) adalah salah satu bahasa untuk mengatur

tampilan dalam web yang berfungsi memisahkan antara desain dengan

content. CSS dapat ditulis untuk mendefinisikan ulang tag-tag HTML ataupun

dengan menambahkan atribut id dan class pada tag HTML (J. Enterpise,

2016).

Ada 3 elemen inti dari CSS yaitu Selector, Property, dan Value. Karena

9
kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML,

CSS membutuhkan suatu cara untuk ‘mereferensikan’ atau menghubungkan

kode CSS dengan tag HTML yang sesuai. Inilah yang dimaksud dengan

Selector dalam CSS. Property CSS adalah jenis style,atau elemen apa yang

akan diubah dari sebuah tag HTML. Value CSS adalah nilai dari property.

Misalkan untuk property background-color yang digunakan untuk mengubah

warna latar belakang dari sebuah selector, value atau nilainya dapat berupa

red,blue, black, atau white. Untuk lebih jelasnya tentang selector, property,

dan value pada CSS, dapat dilihat pada gambar dibawah ini:

Gambar 2. 3. Selector, Property, dan Value

2.5. Javascript

Gambar 2. 4. Logo Javascript

JavaScript merupakan bahasa pemrograman client-side sehingga seluruh

prosesnya berjalan pada sisi pengguna bukan server. Javascript diperlukan pada

10
pengembangan website ketika kita membutuhkan suatu interaksi dari pengguna.

Sesungguhnya website hanya menampilkan konten yang statis jika hanya

menggunakan HTML dan CSS.

Javascript merupakan satu-satunya bahasa pemrograman yang dapat

dipahami oleh browser untuk membantu website lebih interaktif dan dinamis.

Dengan Javascript, kita dapat memberikan fungsionalitas lebih pada website.

Javascript mampu mengubah fungsi dari website yang sebelumnya hanya

sebatas portal untuk menampilkan informasi statis(J. Enterpise, 2016).

Framework javascript adalah framework aplikasi yang ditulis dalam bahasa

pemrograman javascript dan dalam arah kontrolnya berbeda dengan javascript

library seperti:

a. Library menawarkan fungsi untuk dapat dipanggil oleh kode induknya,

sedangkan framework mendefinisikan keseluruhan desain aplikasi.

b. Pengembang tidak memanggil framework, tetapi framework yang

memanggil dan menggunakan kode dengan cara tertentu.

Bahasa pemrograman yang paling populer untuk browser saat ini adalah

javascript. Framework javascript telah dikembangkan untuk memfasilitasi

pekerjaan programmer web. Bagi programmer, sangat penting untuk memilih

framework yang lebih sesuai dengan kebutuhan mereka. Ada beberapa faktor

yang dapat mempengaruhi pilihan programmer web seperti perawatan dan

komunitas pendukung (Gizas, Christodoulou, & Papatheodorou, 2016).

Beberapa framework javascript mengikuti paradigma model-view-controller

11
yang dirancang untuk memisahkan aplikasi web ke dalam unit spesifik untuk

meningkatkan kualitas dari pemeliharaan dan pemrogramannya. Contoh

framework tersebut seperti: Vue.js dan Ember.js (Yudana, 2018).

2.6. Framework Vue Js

Gambar 2. 5. Logo 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). Apabila digunakan pada arsitektur MVC (Model – View –

Controller), maka Vue JS menempati pada posisi View yang berjalan di sisi

Front- End (Junhui Song,2019).

Jadi tugas utama dari framework ini adalah mengirim dan menerima data,

kemudian membuat tampilan UI (User Interface) yang menarik. Framework ini

juga sangat mudah untuk diintegrasikan dengan library yang lain. Jika

diimplementasikan pada komponen HTML, maka Vue JS menggunakan ID,

class, atau name untuk menginisialisasikannya (Pavllo, 2018)

Framework ini mengalami perkembangan yang pesat, bahkan beberapa

perusahaan besar menggunakannya, sebagai contoh Google dan Adobe. Terlepas

12
dari itu, Vue JS pertama kali dikembangkan pada tahun 2013 oleh Evan You

yang sebelumnya bekerja di Google dengan menggunakan Angular JS. Hal itulah

yang melatarbelakangi seorang Evan You mengembangkan sebuah library yang

lebih ringan daripada Angular JS (Gizas, Christodoulou, & Papatheodorou, 2016)

Terdapat beberapa features dalam Vue Js yakni:

1. Component

Fitur components digunakan untuk membuat berbagai elemen pada

HTML secara custom. Elemen custom ini juga dapat digunakan secara

berulang – ulang.

2. Computed Properties

Kedua, fitur computed properties digunakan untuk melihat setiap

perubahan yang terjadi dalam elemen user interface tanpa harus

melakukan penambahan kode di dalamnya.

3. Data Binding

Kemudian, data binding digunakan untuk memanipulasi dan

memberikan nilai (value) pada atribut HTML. Sebagai contoh, mengubah

style dengan menggunakan bantuan binding directives, yaitu V-Bind.

4. Directives

Fitur directives berfungsi untuk melakukan berbagai aksi (action)

pada antarmuka Front-End website. Contoh perintah bawaan yang

13
digunakan adalah v-if, v-else, v-model, dan lainnya.

5. Event Handling

Fitur yang kelima adalah, event handling atau v-on yang berfungsi

sebagai atribut yang dapat ditambahkan ke dalam suatu elemen DOM

untuk sebuah event pada Vue JS.

6. Light Weight

Keenam, terdapat fitur lightweight yang digunakan untuk membuat

menjadi lebih sederhana, akan tetapi masih tetap cepat dan powerful.

7. Routing

Fitur yang selanjutnya adalah routing, dimana mempunyai kegunaan

sebagai perantara atau penghubung antar setiap halaman. Fitur ini

memiliki kelebihan dalam membuat aplikasi single-page, cukup dengan

menggunakan satu file HTML saja.

8. Template

Fitur templates berfungsi untuk menghubungkan DOM dengan data

instance pada Vue JS, yang nantinya akan mengkompilasi template

menjadi fungsi DOM Render Virtual.

9. Virtual Dom

14
 DOM atau kependekan dari Document Object Model merupakan

suatu interface yang memudahkan dalam mengakses atau menambah

konten pada suatu dokumen. Fitur dari Virtual DOM berfungsi untuk

menyimpan perubahan dokumen pada replika DOM, sehingga dapat di

review lebih cepat setiap perubahannya.

10. Watcher
Fitur yang terakhir adalah watchers, dimana memiliki fungsi untuk

dapat menangani setiap perubahan data, sehingga mampu untuk membuat

kode menjadi sederhana dan cepat.

15
 BABIII
PERANCANGAN DAN PEMBUATAN WEBSITE

3.1 Minimum Viable Product(MVP)

Minimum Viable Product adalah sebuah prototyping atau sebuah

simulasi dengan fitur yang ingin dibuat untuk menguji dan memastikan

pengembangan aplikasi sudah sesuai dengan kita inginkan. Pada dasarnya

MVP ini dibuat oleh pihak pengembang agar mengetahui respon dari

User/pelanggan karena ketika meluncurkan sebuah produk belum tentu

akan selalu mendapat respon positif dari User.

a. Minimum Viable Product (MVP) di Admin

1. Fitur Login

Admin dapat melakukan login sesuai hak aksesnya.

2. CRUD Building

Admin dapat melakukan Create, Read, Update,dan Delete

building.

3. CRUD Review

Admin dapat melakukan Create, Read, Update,dan Delete

review yang masuk.

4. Konfirmasi Pembayaran

Admin dapat menolak atau menerima pembayaran yang

masuk.

5. Fitur Logout

Admin dapat logout dan akan dikembalikan ke halaman login

16
3.2 Flowchart

Adapun flowchart dari website Office Booking System sebagai

berikut:

a) Admin Login

Gambar 3. 1. flowchart alur admin login

b) Admin Manage Office

Gambar 3. 2. Flowchart alur admin manage office

c) Admin Manage transaction

Gambar 3. 3. Flowchart alur admin manage transaction

d) Admin Manage Review

Gambar 3. 4 Flowchart alur admin manage review

17
3.3 Tools yang digunakan

1. Visual Studio Code

Visual Studio Code adalah kode editor sumber yang

dikembangkan oleh Microsoft untuk Windows, Linux, dan

macOS. Ini termasuk dukungan debugging, kontrol git yang

tertanam dan GitHub, penyorotan sintaks, penyelesaian kode

cerdas, snippet, dan refactoring kode. Ini sangat dapat

disesuaikan, memungkinkan pengguna untuk mengubah tema,

puntasan keyboard, preferensi, dan menginstal ekstensi yang

menambah fungsionalitas tambahan.

Gambar 3. 5. Tampilan Visual Studio Code

2. Chrome Developer Tool

Chrome developer tool adalah tool yang ditujukan untuk

menganalisa struktur HTML, CSS, dan Javascript langsung dari

browser. Untuk mengaksesnya bisa dengan cara menekan tombol

[CTRL] + [Shift] + I, atau dari menu Option>>Tool>>Developer

tool di Chrome Browser. Maka tampilannya akan seperti pada

18
 gambar 3.2 berikut:

Gambar 3. 6. Tampilan Chrome Developer Tool

3. Node.Js

Node.js adalah runtime environment untuk Javascript yang

bersifat open-source dan cross-platform. Node.js dapat

menjalankan kode Javascript di manapun, tidak hanya terbatas

pada lingkungan browser.

Untuk menginisialisasi sebuah project, buka terminal pada

Visual Studio Code, kemudian menuliskan perintah: “npm init”

NPM atau Node Package Manager merupakan Javascript

package manager bawaan dari Node.js. Melalui NPM ini dapat

membuat Node.js package dan mengelola penggunaan package

eksternal yang digunakan.

3.4 Instalasi Framework Vue Js Pada Visual Studio Code

Adapun langkah-langkah untuk untuk menginstal framework Vue Js,

sebagai berikut:

19
 1. Membuka visual studio code, kemudian klik menu ‘terminal’,

pada sub menu ‘terminal’, klik ‘new terminal’. Maka hasilnya

seperti pada gambar berikut.

Gambar 3. 7. Tampilan Terminal pada Visual Studio Code

2. Kemudian menulis perintah ‘npm install –g @vue/cli’, tekan

Enter. Dan tunggu hingga proses instalasi selesai, seperti contoh

gambar berikut.

Gambar 3. 8. Hasil instalasi Vue Js

3.5 Instalasi Package Vue Js Pada Visual Studio Code

Setelah berhasil menginstal framework Vue Js pada visual studio

code maka kita perlu menginstal beberapa package Vue Js pada terminal

visual studio code. Adapun package Vue Js yang harus diinstal yaitu:

20
1. Vue Router

Vue router untuk routing di halaman satu ke halaman lainnya

pada website. Untuk menginisialisasinya pada visual studio code

dengan menuliskan perintah “npm install vue-router@2.6.14”

Gambar 3. 9. Instal Vue Router

2. Vuex

Vuex bertugas sebagai centralized store untuk semua

component, yang memastikan bahwa state hanya bisa diubah dengan

cara yang pasti. Dengan Vuex, komunikasi antar Componentmenjadi

lebih mudah.

Untuk menginstalnya pada visual studio code dengan

menuliskan perintah “npm install vuex@3.6.2”

Gambar 3. 10. Instal Vuex

3. JSON Server

Javascript Object Notation adalah sebuah format yang

digunakan untuk menyimpan, membaca, serta menukar informasi

dari web server sehingga dapat dibaca pengguna dan Untuk testing

21
 data dummy sambil menunggu API dari tim Backend.

Untuk menginstalnya pada visual studio code dengan menuliskan

perintah “npm install json-server” pada terminal.

Gambar 3. 11. Instal JSON Server

4. Axios

Axios merupakan library open source yang digunakan untuk

request data melalui http dan untuk fetch data API. Untuk

menginstalnya pada visual studio code dengan menuliskan perintah

“npm install axios” pada terminal.

Gambar 3. 12. Instal Axios

5. Vuetify

Framework CSS yang sudah mendukung responsive dan dimiliki

oleh Vue dimana terdapat banyak CSS bantuan yang dimiliki dan

termasuk lengkap untuk digunakan juga pada website. Untuk

menginstalnya pada visual studio code dengan menuliskan perintah

“vue add vuetify” pada terminal

22
 Gambar 3. 13. Instal Vuetify

Setelah semua package Vue Js terinstal, lihat pada file package.json untuk

mengecek apakah semua package telah terinstal.

Gambar 3. 14. Hasil seluruh Package Vue Js

3.6 Kode Pemrograman Pembuatan Tampilan Website

Setelah berhasil melakukan instalasi semua package Vue Js yang

diperlukan, selanjutnya penulis melakukan pembuatan kode pemrograman.

Dalam pembuatan kode pemrograman ini penulis membagi dalam

beberapa bagian, yang mana satu sama lain saling terkait yang nantinya

akan penulis gabungkan menjadi sebuah kode pemrograman yang utuh

pada tampilan website. Adapun bagian-bagian kode pemrograman tersebut

yaitu:

23
 1) Kode Pemrograman Halaman Admin Login

Adapun kode pemrogramannya sebagai berikut:

<template>
<v-app>
<v-row>
<v-col class="pr-0 pb-0">
<v-img height="100%" src="../../assets/Admin/login-
bg.png"/>
</v-col>
<v-col class="pl-0">

<template>
<v-form
class="pa-10"
@submit.prevent="submit"
>
<v-card class="mx-12 my-16" flat>
<v-card-text class="text-center
heading-1">
Hello Admin
</v-card-text>

<v-card-text class="pa-0 body-regular-

2">
Email
</v-card-text>
<v-text-field
outlined
placeholder="Masukan email anda"
class="body-regular-3"
v-model="email"
/>

<v-card-text class="pa-0 body-regular-

2">
Kata Sandi
</v-card-text>
<v-text-field
outlined
placeholder="Masukan kata sandi anda"
class="body-regular-3"
:append-icon="showPassword ? 'mdi-eye'
: 'mdi-eye-off'"
:type="showPassword ? 'text' :
'password'"
@click:append="showPassword = !
showPassword"
v-model="password"
/>

<v-row>
<v-col class="text-left py-0">
<v-checkbox
class="my-0 py-0"
color="#121950"
>

24
 <template v-slot:label>
<div class="body-
regular-3">
Simpan Kata Sandi
</div>
</template>
</v-checkbox>
</v-col>
<v-col class="text-right py-0">
<a class="body-regular-3 link-
forger-pass text-decoration-none" href="#">Lupa kata sandi ?</a>
</v-col>
</v-row>

<v-row>
<v-col class="text-center">
<v-btn
color="#606FAA"
dark
class="px-10"
type="submit"
>
Masuk
</v-btn>
</v-col>
</v-row>

<div v-if="showError" class="body-2

text-center mt-6 red--text">
Masukan Email / Password dengan
benar!
</div>

</v-card>

</v-form>
</template>
</v-col>
</v-row>
</v-app>
</template>
Gambar 3. 15. source code halaman admin login

Kode pemrograman diatas untuk tampilan admin login,

kemudian membuat fungsi input datanya

<script>
import axios from 'axios'
export default {
name: 'LoginAdmin',
data: () => ({
email: '',
password: '',
showPassword: false,

25
 showError: false,
}),
methods: {
async submit() {
const response = await
axios.get(`http://34.207.166.213/user/all?role_id=2`)
console.log(response.data.data)
for (let index = 0; index <
response.data.data.length; index++) {
if (response.data.data[index].email ==
this.email) {
if (response.data.data[index].password ==
this.password) {
index = response.data.data.length-1
this.$router.push({name:"Data
Offices"})
}
}else {
this.showError = true
}
}
}
},
}
</script>
Gambar 3. 16. source code javascript admin login

2) Kode Pemrograman Halaman Admin Manage Office

Adapun kode pemrogramannya sebagai berikut:

<template>
<v-app>
<Sidebar/>
<v-card width="75%" class="ml-auto mr-10 mb-4" flat>
<v-card-title class="headline font-weight-bold">
Manage Offices
<v-spacer></v-spacer>
<v-avatar color="orange darken-3">
<v-icon dark>
mdi-account
</v-icon>
</v-avatar>

</v-card-title>
</v-card>
<template>
<v-card width="75%" class="ml-auto mr-10 pt-2">
<v-data-table
:headers="headers"
:items="offices"
:search="search"
:footer-props="{
'items-per-page-options': [10, 15, 20]
}"

26
 sort-by="id"
class="elevation-0"
>
<template v-slot:top>
<v-toolbar
flat
>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search Office"
single-line
hide-details
dense
filled
></v-text-field>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-dialog
v-model="dialog"
max-width="700px"
>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="primary"
dark
class="mb-2"
v-bind="attrs"
v-on="on"
large
>
Add Office
</v-btn>
</template>
<v-card class="pa-4">
<v-card-title>
<span class="text-h5 font-weight-
bold">{{ formTitle }}</span>

</v-card-title>

<v-card-text>
<v-container>
<v-row>
<v-col
cols="12"

>
<v-text-field
v-model="editedItem.name"
label="Office name"
type="text"
></v-text-field>
</v-col>

<v-col
cols="6"

27
>
<v-text-field
v-model="editedItem.latitude"
label="Garis Lintang"
type="text"
></v-text-field>
</v-col>

<v-col
cols="6"

>
<v-text-field
v-model="editedItem.longitude"
label="Garis Bujur"
type="text"
></v-text-field>
</v-col>

<v-col
cols="12"

>
<v-text-field
v-model="editedItem.price"
label="Price"
type="number"
></v-text-field>
</v-col>
<v-col
cols="12"

>
<v-text-field
v-model="editedItem.chair_min"
label="Kursi Minimum"
type="number"
></v-text-field>
</v-col>
<v-col
cols="12"

>
<v-text-field
v-model="editedItem.chair_max"
label="Kursi Maximal"
type="number"
></v-text-field>
</v-col>
<v-col
cols="12"
>
<v-textarea

label="Description"
v-model="editedItem.description"
></v-textarea>
</v-col>

28
 </v-row>
</v-container>
</v-card-text>

<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="#121950"
outlined
@click="close"
width="150"
class="mr-4"
>
Cancel
</v-btn>
<v-btn
color="#121950"
dark
@click="save"
width="150"
>
Save
</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog v-model="dialogDelete" max-
width="500px">
<v-card>

<v-card-title>
Delete Office
</v-card-title>
<v-card-text class="subtitle-2 mt-4">
Are you sure to delete this office?
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary darken-4" width="150"
class="mr-4" outlined @click="closeDelete">Cancel</v-btn>
<v-btn color="primary darken-4" width="150"
dark @click="deleteItemConfirm">OK</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>

<v-dialog v-model="dialogView" max-width="800px">

<v-card>

<v-carousel
hide-delimiters
height="350"
>
<v-carousel-item
v-for="photo in editedItem.photo_urls"
:key="photo.id"
29
 :src="photo.url"
>

</v-carousel-item>
</v-carousel>

<v-card-title>{{ editedItem.name }}</v-card-

title>

<v-card-text>
<v-row
align="center"
class="mx-0"
>
<v-rating
:value="4.5"
color="amber"
dense
half-increments
readonly
size="14"
></v-rating>

<div class="grey--text ms-4">

4.5
</div>
</v-row>

</v-card-text>
<v-card-text>{{ editedItem.description }}</v-
card-text>

<v-divider class="mx-4"></v-divider>

<v-card-title>Rp. {{ editedItem.price }},- /

Jam</v-card-title>

<v-card-text>
Capacity : {{ editedItem.chair_min }} -
{{editedItem.chair_max}}
</v-card-text>

<!-- <v-card-text>
Created by: {{ editedItem.created_by }}
</v-card-text> -->

<v-card-actions>
<v-btn
block
color="primary"
@click="closeView"
>
Close
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
</template>
30
 <template v-slot:[`item.actions`]="{ item }">
<v-icon
@click="viewDetail(item)"
color="#E59B3A"
>
mdi-information
</v-icon>
<v-icon
class="mx-2"
@click="editItem(item)"
color="primary"
>
mdi-pencil-circle
</v-icon>
<v-icon
@click="deleteItem(item)"
color="red"
>
mdi-delete-circle
</v-icon>
</template>
</v-data-table>
<!-- <div class="mx-10 mb-6" v-for="item in
offices" :key="item.id">
{{ item }}
</div> -->
</v-card>
</template>
</v-app>
</template>
Gambar 3. 17. source code halaman manage office

Kode pemrograman diatas untuk tampilan admin manage office,

kemudian menambahkan fungsi CRUD building

<script>
import Sidebar from "@/components/SideBarAdmin.vue"
import axios from 'axios'
export default {
name: 'DataOffices',
components: {
Sidebar
},
data: () => ({
search: '',
dialog: false,
dialogDelete: false,
dialogView: false,
headers: [
{
text: 'Id',
align: 'start',
sortable: false,
filterable: false,
value: 'id',
},
31
 { text: 'Name', value: 'name' },
{ text: 'Price', value: 'price' },
{ text: 'Kursi Minimum', value: 'chair_min' },
{ text: 'Kursi Maximal', value: 'chair_max' },
{ text: 'Actions', value: 'actions', sortable: false },
],
offices: [],
editedIndex: -1,
editedItem: {
type_id: 1,
name: '',
description: '',
latitude: '',
longitude: '',
price: 0,
chair_min: '',
chair_max: '',
photo_url:
"https://ik.imagekit.io/yudha/practice_admin/pexels-pixabay-
271816_2b2Y2LzQ1.jpg?ik-sdk-version=javascript-
1.4.3&updatedAt=1656304427380",
id_facilitations: 1,
id_tags: 1
},
defaultItem: {
type_id: 1,
name: '',
description: '',
latitude: '',
longitude: '',
price: 0,
chair_min: '',
chair_max: '',
photo_url:
"https://ik.imagekit.io/yudha/practice_admin/pexels-pixabay-
271816_2b2Y2LzQ1.jpg?ik-sdk-version=javascript-
1.4.3&updatedAt=1656304427380",
id_facilitations: 1,
id_tags: 1
},

}),
computed: {
formTitle () {
return this.editedIndex === -1 ? 'Add Office' : 'Edit
Office'
},
},
watch: {
dialog (val) {
val || this.close()
},
dialogDelete (val) {
val || this.closeDelete()
},
dialogView (val) {
val || this.close()
}
},
32
 async mounted() {
this.initialize()
},
methods: {
async loadDataOffices() {
const response = await
axios.get(`http://34.207.166.213/office/all`)
this.offices = response.data.data
},

initialize () {
this.loadDataOffices()

},
viewDetail(item) {
this.editedIndex = this.offices.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialogView = true
},
editItem (item) {
this.editedIndex = this.offices.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialog = true

},
deleteItem (item) {
this.editedIndex = this.offices.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialogDelete = true
},
deleteItemConfirm () {
this.offices.splice(this.editedIndex, 1)

axios.delete(`http://34.207.166.213/office/`+this.editedItem.id
).then(response=>{
console.log(response)
})
this.closeDelete()
},
closeView() {
this.dialogView = false
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
})
this.initialize()
},
close () {
this.dialog = false
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
})
this.initialize()
},
closeDelete () {
this.dialogDelete = false
this.$nextTick(() => {

33
 this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
})
},
save () {
if (this.editedIndex > -1) {

axios.put(`http://34.207.166.213/office/`+this.editedItem.id, {
type_id: Number(this.editedItem.type_id),
name: this.editedItem.name,
description: this.editedItem.description,
latitude: this.editedItem.latitude,
longitude: this.editedItem.longitude,
price: Number(this.editedItem.price),
chair_min: Number(this.editedItem.chair_min),
chair_max: Number(this.editedItem.chair_max),
photo_urls: [{
url: this.editedItem.photo_url,
}],
facilitations: [{
id: Number(this.editedItem.id_facilitations)
}],
tags: [{
id: Number(this.editedItem.id_tags)
}]
}).then(response=>{
console.log(response)
})
Object.assign(this.offices[this.editedIndex],
this.editedItem)
} else {
axios.post(`http://34.207.166.213/office`, {
type_id: Number(this.editedItem.type_id),
name: this.editedItem.name,
description: this.editedItem.description,
latitude: this.editedItem.latitude,
longitude: this.editedItem.longitude,
price: Number(this.editedItem.price),
chair_min: Number(this.editedItem.chair_min),
chair_max: Number(this.editedItem.chair_max),
photo_urls: [
{
url: this.editedItem.photo_url,
}
],
facilitations: [{
id: Number(this.editedItem.id_facilitations)
}],
tags: [{
id: Number(this.editedItem.id_tags)
}]
}).then(response=>{
console.log(response)
})
this.offices.push(this.editedItem)
}
this.close()
},
},
34
 }
</script>
Gambar 3. 18. source code javascript manage office
3) Kode Pemrograman Halaman Admin Manage transaction

Adapun kode pemrogramannya sebagai berikut:

<template>
<v-app>
<Sidebar/>

<v-card width="75%" class="ml-auto mr-10 mb-4" flat>

<v-card-title class="headline font-weight-bold">
Manage Transactions
<v-spacer></v-spacer>

<v-avatar color="orange darken-3">

<v-icon dark>
mdi-account
</v-icon>
</v-avatar>

</v-card-title>
</v-card>

<template>
<v-card width="75%" class="ml-auto mr-10 pt-2">
<v-data-table
:headers="headers"
:items="transactions"
:search="search"
:footer-props="{
'items-per-page-options': [10, 15, 20]
}"
sort-by="id"
>
<template v-slot:top>
<v-toolbar
flat
>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search Transaction"
single-line
hide-details
dense
filled
></v-text-field>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>

<template>
<v-row justify="center">
<v-dialog
v-model="dialogNewTransaction"

35
 persistent
max-width="600px"
>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
New Transaction
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">New Transaction</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col
cols="6"
>
<v-text-field
v-model="user_id"
label="Id User"
required
type="number"
></v-text-field>
</v-col>
<v-col
cols="6"
>
<v-text-field
v-model="office_id"
label="Id Office"
required
type="number"
></v-text-field>
</v-col>
<v-col cols="6">
<v-menu
ref="menuDateStart"
v-model="menuDateStart"
:close-on-content-click="false"
:return-value.sync="start_date"
transition="scale-transition"
offset-y
max-width="290px"
min-width="290px"
>
<template v-slot:activator="{ on,
attrs }">
<v-text-field
v-model="start_date"
label="Pilih Tanggal"
readonly
v-bind="attrs"
v-on="on"
36
 solo
dark
background-color="#28304E"
></v-text-field>
</template>
<v-date-picker
v-if="menuDateStart"
v-model="start_date"
>
<v-spacer></v-spacer>
<v-btn
text
color="primary"
@click="menuDateStart = false"

>
Cancel
</v-btn>
<v-btn
text
color="primary"

@click="$refs.menuDateStart.save(start_date)"
>
OK
</v-btn>
</v-date-picker>
</v-menu>
</v-col>

<v-col cols="3">
<v-menu
ref="menuStart"
v-model="menuStart"
:close-on-content-click="false"
:nudge-right="40"
:return-value.sync="start_time"
transition="scale-transition"
offset-y
max-width="290px"
min-width="290px"
>
<template v-slot:activator="{ on,
attrs }">
<v-text-field
v-model="start_time"
label="Start"
readonly
v-bind="attrs"
v-on="on"
solo
dark
background-color="#28304E"
></v-text-field>
</template>
<v-time-picker
v-if="menuStart"
v-model="start_time"
:max="end_time"
37
 format="24hr"
use-seconds
full-width

@click:second="$refs.menuStart.save(start_time)"
></v-time-picker>

</v-menu>
</v-col>
<v-col cols="3">
<v-menu
ref="menuEnd"
v-model="menuEnd"
:close-on-content-click="false"
:nudge-right="40"
:return-value.sync="end_time"
transition="scale-transition"
offset-y
max-width="290px"
min-width="290px"
>
<template v-slot:activator="{ on,
attrs }">
<v-text-field
v-model="end_time"
label="End"
readonly
v-bind="attrs"
v-on="on"
solo
dark
background-color="#28304E"
></v-text-field>
</template>
<v-time-picker
v-if="menuEnd"
v-model="end_time"
:min="start_time"
format="24hr"
use-seconds
full-width

@click:second="$refs.menuEnd.save(end_time)"
></v-time-picker>

</v-menu>
</v-col>
</v-row>
</v-container>

</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="blue darken-1"
text
@click="dialogNewTransaction = false"
>

38
 Close
</v-btn>
<v-btn
color="blue darken-1"
text
@click="updateTransaction()"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>

<v-dialog
v-model="dialog"
max-width="600px"
>

<v-card class="pa-4">
<v-card-title>
<span class="headline font-weight-
medium">{{ formTitle }}</span>
</v-card-title>

<v-card-text>
<v-container>
<v-row>
<v-col
cols="12"
>
<v-text-field
v-model="user_name"
label="Customer name"
disabled
></v-text-field>
</v-col>
<v-col
cols="12"
>
<v-text-field
v-model="total_price"
label="Total Price"
disabled
></v-text-field>
</v-col>

<v-col
cols="6"
>
<v-select
v-model="editedItem.status"
:items="itemStatus"
label="Status"
solo
dark
background-color="primary"

39
 >
</v-select>
</v-col>

</v-row>
</v-container>
</v-card-text>

<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="#121950"
outlined
@click="close"
width="150"
class="mr-4"
>
Cancel
</v-btn>
<v-btn
color="#121950"
dark
@click="save"
width="150"
>
Save
</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>

<v-dialog v-model="dialogDelete" max-width="500px">

<v-card
class="pa-4"
>
<v-card-title>
Delete Transaction
</v-card-title>
<v-card-text class="subtitle-2 mt-4">
Are you sure to delete this transaction ?
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary darken-4" width="150"
class="mr-4" outlined @click="closeDelete">Cancel</v-btn>
<v-btn color="primary darken-4" width="150" dark
@click="deleteItemConfirm">OK</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
</template>

<template v-slot:[`item.status`]="{ item }">

<div v-if="item.status == 'Pending'">
<div class="statusPending text-center">
{{ item.status }}
40
 </div>
</div>
<div v-else-if="item.status == 'Success'">
<div class="statusSuccess text-center">
{{ item.status }}
</div>
</div>
<div v-if="item.status == 'Failed'">
<div class="statusFailed text-center">
{{ item.status }}
</div>
</div>
</template>

<template v-slot:[`item.status_id`]="{ item }">

<v-btn
v-if="item.status_id == 1"
outlined
small
width="90"
color="yellow"
>
Pending
</v-btn>
<v-btn
v-else-if="item.status_id == 2"
outlined
small
width="90"
color="green"
>
Success
</v-btn>
<v-btn
v-else
outlined
small
color="red"
width="90"
>
Fail
</v-btn>

</template>

<template v-slot:[`item.actions`]="{ item }">

<v-btn
icon
:href="'https://api.whatsapp.com/send?
phone='+item.user.number+'&text=Halo '+item.user.name+'^^
%0ABerikut merupakan invoice atas penyewaan '+item.office.name+',
dengan total harga '+item.total_price+'%0ATerima Kasih'"
target="_blank"
>
<v-icon
color="green"
>
mdi-send-circle
</v-icon>
41
 </v-btn>

<v-btn
icon
>
<v-icon
@click="editItem(item)"
color="primary"
>
mdi-pencil-circle
</v-icon>
</v-btn>

<v-btn
icon
>
<v-icon
@click="deleteItem(item)"
color="red"
>
mdi-delete-circle
</v-icon>
</v-btn>
</template>
</v-data-table>
</v-card>
</template>
</v-app>
</template>
Gambar 3. 19. source code halaman manage transaction

Kode pemrograman diatas untuk tampilan admin manage

transaction, kemudian membuat fungsi konfirmasi pembayaran

<script
>
import Sidebar from "@/components/SideBarAdmin.vue"
import axios from 'axios'
export default {
name: 'DataTransactions',
components: {
Sidebar
},
data() {
return {
user_name: "",
total_price: "",
// Tanggal
date_now: (new Date(Date.now() - (new
Date()).getTimezoneOffset() * 60000)).toISOString().substr(0,

42
10),
menuDateStart: false,
menuStart: false,
menuEnd: false,
menu: false,
// Input new transaction
dialogNewTransaction: false,
user_id: 0,
office_id: 0,
start_date: "",
start_time:"",
end_time:"",
search: '',
dialog: false,
dialogDelete: false,
headers: [
{
text: 'Id',
align: 'start',
filterable: false,
value: 'id',
},
{ text: 'Name', value: 'user.name', sortable:
false },
{ text: 'Price', value: 'total_price',
sortable: false },
// { text: 'Method', value: 'payment_method' },
{ text: 'Nama Gedung', value: 'office.name',
sortable: false },
{ text: 'Date', value: 'start_hour', sortable:
false },
{ text: 'Status', value: 'status_id', sortable:
false },
{ text: 'Actions', value: 'actions', sortable:
false },
],
transactions: [],
itemStatus: ['Pending', 'Success', 'Failed'],
itemMethod: ['BCA', 'BNI', 'BRI', 'CIMB',
'Panin'],
editedIndex: -1,
editedItem: {
id: 0,
status_id: ''

43
 },
defaultItem: {
id: 0,
status_id: ''
},
}
},
computed: {
formTitle () {
return this.editedIndex === -1 ? 'New Item' : 'Edit
Transaction'
},
},
watch: {
dialog (val) {
val || this.close()
},
dialogDelete (val) {
val || this.closeDelete()
},
dialogReview (val) {
val || this.close()
},
},
async mounted() {
this.initialize()
},
methods: {
async loadDataTransactions() {
const response = await
axios.get(`http://34.207.166.213/booking/all`)
this.transactions = response.data.data
},
initialize () {
this.loadDataTransactions()
},
editItem (item) {
this.editedIndex = this.transactions.indexOf(item)
this.editedItem = Object.assign({}, item)
this.user_name = item.user.name
this.total_price = item.total_price
this.dialog = true
},
deleteItem (item) {

44
 this.editedIndex = this.transactions.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialogDelete = true
},
deleteItemConfirm () {
this.transactions.splice(this.editedIndex, 1)

axios.delete(`http://34.207.166.213/booking/`+this.editedItem
.id
).then(response=>{
console.log(response)
})
this.closeDelete()
},
close () {
this.dialog = false
this.$nextTick(() => {
this.editedItem = Object.assign({},
this.defaultItem)
this.editedIndex = -1
})
this.initialize()
},
closeDelete () {
this.dialogDelete = false
this.$nextTick(() => {
this.editedItem = Object.assign({},
this.defaultItem)
this.editedIndex = -1
})
this.initialize()
},
updateTransaction() {
axios.post(`http://34.207.166.213/booking`, {
user_id: Number(this.user_id),
office_id: Number(this.office_id),
status_id: 1,
start_date: this.start_date+" 00:00:00 WIB",
end_date: this.start_date+" 00:00:00 WIB",
start_hour: this.start_date+" " +
this.start_time+ " WIB",
end_hour: this.start_date+" " +
this.end_time+ " WIB"
}).then(response=>{

45
 console.log(response)
})
this.dialogNewTransaction = false
this.initialize()
},
save () {
if (this.editedIndex > -1) {
if (this.editedItem.status == 'Pending') {

axios.put(`http://34.207.166.213/booking/`+this.editedItem.id
, {
status_id: 1
}).then(response=>{
console.log(response)
})
} if (this.editedItem.status == 'Success') {

axios.put(`http://34.207.166.213/booking/`+this.editedItem.id
, {
status_id: 2
}).then(response=>{
console.log(response)
})
} else {

axios.put(`http://34.207.166.213/booking/`+this.editedItem.id
, {
status_id: 3
}).then(response=>{
console.log(response)
})
}
Object.assign(this.transactions[this.editedIndex],
this.editedItem)
} else {
axios.post(`http://34.207.166.213/booking`, {
}).then(response=>{
console.log(response)
})
this.transactions.push(this.editedItem)
}
this.close()
},
},

46
 }
</script>
Gambar 3. 20. source code javascript manage transaction

4) Kode Pemrograman Halaman Admin Manage review

Adapun kode pemrogramannya sebagai berikut:

<template>
<v-app>
<Sidebar/>
<v-card width="75%" class="ml-auto mr-10 mb-4" flat>
<v-card-title class="headline font-weight-bold">
Manage Reviews
<v-spacer></v-spacer>

<v-avatar color="orange darken-3">

<v-icon dark>
mdi-account
</v-icon>
</v-avatar>

</v-card-title>
</v-card>

<template>
<v-card width="75%" class="ml-auto mr-10 pt-2">
<v-data-table
:headers="headers"
:items="reviews"
:search="search"
:footer-props="{
'items-per-page-options': [10, 15, 20]
}"
sort-by="id"
>
<template v-slot:top>
<v-toolbar
flat
>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search Office"
single-line
hide-details
dense
filled
></v-text-field>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>

<v-dialog v-model="dialogReview" max-width="500px">

<v-card
class="pa-4"
47
 >
<v-card-title>
Detail Review
</v-card-title>
<v-card-text>
<v-rating
:value="detailStar"
color="amber"
dense
half-increments
readonly
size="14"
></v-rating>
</v-card-text>
<v-card-text class="subtitle-2 mt-0">
{{ detailText }}
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary darken-4" width="150"
class="mr-4" outlined @click="closeDetailReview">Close</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>

<v-dialog v-model="dialogDelete" max-width="500px">

<v-card
class="pa-4"
>
<v-card-title>
Delete Review
</v-card-title>
<v-card-text class="subtitle-2 mt-4">
Are you sure to delete this review ?
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary darken-4" width="150"
class="mr-4" outlined @click="closeDelete">Cancel</v-btn>
<v-btn color="primary darken-4" width="150" dark
@click="deleteItemConfirm">OK</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
</template>

<template v-slot:[`item.star`]="{ item }">

<v-rating
:value="item.star"
color="amber"
dense
half-increments
readonly
size="14"
48
 ></v-rating>
</template>

<template v-slot:[`item.text`]="{ item }">

<v-btn
small
color="primary lighten-2"
@click="viewDetailReview(item)"
>
View Detail
</v-btn>
</template>

<template v-slot:[`item.status`]="{ item }">

<v-btn
v-if="item.hidden == 1"
outlined
small
color="green"
@click="changeStatusToHidden(item.id)"
>
Publish
</v-btn>
<v-btn
v-else
outlined
small
color="red"
@click="changeStatusToPublish(item.id)"
>
Hide
</v-btn>

</template>
</v-data-table>
</v-card>
</template>
</v-app>
</template>
Gambar 3. 21. source code halaman manage review

Kode pemrograman diatas untuk tampilan admin manage

review, kemudian membuat fungsi CRUD review

<script>
import Sidebar from "@/components/SideBarAdmin.vue"
import axios from 'axios'
export default {
name: 'DataReviews',
components: {
Sidebar
},
data() {
return {
search: '',
dialog: false,

49
 dialogDelete: false,
dialogReview: false,
detailText: '',
detailStar: 0,
customerName: '',
officeName: '',
headers: [
{
text: 'Id',
align: 'start',
filterable: false,
value: 'id',
},
{ text: 'Name', value: 'user.name', sortable:
false },
{ text: 'Building', value: 'office.name', sortable:
false },
{ text: 'Rating', value: 'star' },
{ text: 'Review', value: 'text', sortable: false },
{ text: 'Status', value: 'status', sortable:
false },
],
reviews: [],
offices: [],
editedIndex: -1,
editedItem: {
id: 0,
star: 0,
text: '',
},
defaultItem: {
id: 0,
rating: 0,
review: '',
},
}
},
computed: {
formTitle () {
return this.editedIndex === -1 ? 'New Item' : 'Edit
Review'
},
},
watch: {
dialog (val) {
val || this.close()
},
dialogDelete (val) {
val || this.closeDelete()
},
dialogReview (val) {
val || this.close()
},
},
async mounted() {
this.initialize()
},
methods: {
async loadDataReviews() {
50
 const response = await
axios.get(`http://34.207.166.213/review/all`)
this.reviews = response.data.data
console.log(response.data.data)
},
initialize () {
this.loadDataReviews()
},
editItem (item) {
this.editedIndex = this.reviews.indexOf(item)
this.editedItem = Object.assign({}, item)
this.customerName = item.user.name
this.officeName = item.office.name
this.dialog = true
},
viewDetailReview (item) {
this.editedIndex = this.reviews.indexOf(item)
this.editedItem = Object.assign({}, item)
this.detailText = item.text
this.detailStar = item.star
this.dialogReview = true
},
changeStatusToHidden(idReview) {
axios.put(`http://34.207.166.213/review/`+idReview, {
hidden: 2
}).then(response=>{
console.log(response)
})
this.initialize()
},
changeStatusToPublish(idReview) {
axios.put(`http://34.207.166.213/review/`+idReview, {
hidden: 1
}).then(response=>{
console.log(response)
})
this.initialize()
},
deleteItem (item) {
this.editedIndex = this.reviews.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialogDelete = true
},
deleteItemConfirm () {
this.reviews.splice(this.editedIndex, 1)

axios.delete(`http://34.207.166.213/review/`+this.editedItem.id
).then(response=>{
console.log(response)
})
this.closeDelete()
},
close () {
this.dialog = false
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
})
this.initialize()
51
 },
closeDelete () {
this.dialogDelete = false
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
})
},
closeDetailReview () {
this.dialogReview = false
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
})
},
save () {
if (this.editedIndex > -1) {

axios.put(`http://34.207.166.213/review/`+this.editedItem.id, {
star: Number(this.editedItem.star),
text: this.editedItem.text
}).then(response=>{
console.log(response)
})
Object.assign(this.reviews[this.editedIndex],
this.editedItem)
} else {
axios.post(`http://34.207.166.213/review`, {
hidden: 1,
office_id: 68,
user_id: 13,
star: Number(this.editedItem.star),
text: this.editedItem.text
}).then(response=>{
console.log(response)
})
this.reviews.push(this.editedItem)
}
this.close()
},
},
}
</script>
Gambar 3. 22. source code javascript manage review

52
 BAB IV

IMPLEMENTASI DAN PENGUJIAN

4.1. Implentasi Website

Implementasi website merupakan tahapan yang dilakukan setelah

perancangan dan pengkodean pemrograman yang sudah dibuat akan

diletakkan dan dilakukan pengujian. Berikut hasil pengkodean

pemrograman:

Gambar 4. 1. Halaman Login

Gambar 4. 2. Halaman Manage Offices

53
 Gambar 4. 3. Office Detail

Gambar 4. 4. Halaman Manage Review

Gambar 4. 5. Halaman Manage Transaction

54
4.2. Pengujian Website

Pada perekayasaan ini digunakan metode pengujian websiteOffice

Booking System. Pengujian dilakukan dengan menguji antarmuka

sistem apakah sudah berjalan sesuai dengan fungsi yang diinginkan.

Pengujian ini dilakukan selaku pengembang website. Tujuan dari

pengujian ini adalah untuk mengetahui kendala-kendala pada website

yang dibuat. Berikut ini adalah hasil pengujian yang dilakukan:

Tabel 4. 1. Hasil Pengujian di Admin

N Hasil
Kelas Uji
o Pengujian
1 Halaman Login
2 Manage Offices
3 Manage Review
4 Manage Transaction
5 Office Detail
Skenario Pengujian
admin dapat mengakses halaman Tidak
login,pada halaman login admin Sesuai
melakukan input data email dan password
yang sudah ada sebelumnya dan akan
ditujukan ke halaman dashboard.
admin dapat mengakses halaman manage Sesuai
office, pada halaman tersebut admin
melakukan CRUD building
admin dapat mengakses halaman manage Sesuai
review, pada halaman tersebut admin
dapat melakukan CRUD review
admin dapat mengakses halaman Sesuai
managetransaction, pada halaman
tersebut admin dapat mengkonfirmasi
pembayaran dari user.
admin dapat menambah, mengubah, dan Sesuai
menghapus tentang produk office.

Berdasarkan hasil pengujian diatas, terdapat 1 kendala pada website

Office Booking System yaitu pada halaman login. Admin dapat

mengakses halaman login, tetapi admin tidak bisa login walaupun

sudah meng-input data email dan password. Hal ini dikarenakan tim

dari back-end belum menyiapkan JSON Web Token (JWT). JWT

adalah token berbentuk string panjang random yang gunanya untuk

melakukan autenfikasi sistem dan pertukaran informasi (Salma,

55
2017).Di JWT tersebut data-data dari email dan password berada,

maka ketika menginputkan data respon dari sistem tidak tersedia.

Gambar 4. 6. Input email dan password

Untuk mengatasi hal tersebut, tim front-end menggunakan alternatif

autenfikasi yaitu firebase. Firebase merupakan sebuah layanan

infrastruktur Back-End as a Service (BaaS) yang diakuisisi oleh

Google pada oktober 2014 silam (Tamplin J, 2018). Oleh karena itu,

data-data dari email dan password dipindahkan ke webiste firebase.

Sehingga ketika memanggil data tersebut respon dari sistem akan

tersedia dan bisa melakukan login ke halaman dashboard.

Pada halaman manage office, terdapat tombol “+ add office”

dibagian atas kanan. Ditombol tersebut letaknya fitur MVP CRUD

Building dengan menginputkan data-data yaitu Office Name, Location,

Price, Kursi Minimum, dan Kursi Maksimal, contoh lihat pada

gambar 4.8.

56
 Gambar 4. 7. Letak Tombol Add Office

Gambar 4. 8. Pop up tombol add office

Pada halaman manage review, saat ada user yang mengupload review

dari sebuah product akan tampil di halaman manage review. Admin dapat

melakukan CRUD review yaitu view detail dan status. Pada view detail

admin dapat melihat review dari user. Dan pada status, admin dapat

mengatur apakah review tersebut dipublish atau disembunyikan.

57
Gambar 4. 9. Letak tombol view detail dan status

Gambar 4. 10. Tampilan view detail

Gambar 4. 11. perubahan status publish ke hide

58
 Pada halaman manage transaction, saat user telah mem-booking sebuah

kantor maka di halaman manage transaction akan terdapat konfirmasi

pembayaran. Terdapat 3 status pada manage transaction yaitu succeess,

pending, dan fail. Status succeess berarti pembayaran telah selasai dan

berhasil. Status pending berarti menunggu konfirmasi dari admin untuk

pembayaran. Status fail berarti pembayaran telah gagal.

Gambar 4. 12.Status pada manage transaction

59
 BAB V

PENUTUP

5.1 Kesimpulan

Berdasarkan pengujian dan pengimplementasi dari Office Booking

System yang telah dilakukan maka dapat ditarik kesimpulan:

1. Pembuatan dan pengimplentasian tampilan website Office Booking

System yang telah dilakukan yaitu halaman login, halaman manage

office, halaman manage review, dan halaman manage transaction.

2. Pengujian telah dilakukan pada website Office Booking System

yaitu pada halaman login, halaman manage office, halaman manage

review, dan halaman manage transaction. Dan terdapat kendala

pada halaman login.

3. Website Office Booking System terkendala di saat login oleh

Admin, dikerenakan tim Back-End belum menyiapkan JSON Web

Token (JWT). Untuk mengatasi hal tersebut dengan menggunakan

alternatif autenfikasi yaitu firebase.

5.2 Saran

Laporan ini masih banyak kekurangan baik segi penulisan,

pelaporan, maupun dari segi pengembangan perangkat lunak dan

pengujian sistem. Masa pengerjaan Capstone Project yang relatif singkat

menjadi kendala dalam pembuatan website ini, sehingga yang dihasilkan

belum sepenuhnya maksimal sesuai yang diharapkan. Oleh karena itu,

perlu adanya pengembangan lebih lanjut terhadap fitur-fitur yang ada

pada web ini.

60
 DAFTAR PUSTAKA

Junhui Song, M. Z. (2019). Design and Implementation of a Vue.js-Based.

iJET ‒Vol. 14, 58-59.

Leider, J. (2018). Vuetify Docs. Retrieved from

Vuetify:https://vuetifyjs.com/

Pavllo, A. (2018, 9 19). Choosing the Right Front-End Framework for

Your VueApp. Retrieved from Medium: https://medium.com
Sozo, D. (2018, March 20). 10 reasons to use Nuxt.js for your next
web application.Retrieved from Medium: https://medium.com/vue-
mastery/10-reasons-touse-nuxt-js-for-your-next-web-application-
522397c9366b

Enterprise, J. (2016), Pengenalan HTML, CSS, dan Javascript,

Jakarta : PT Elex Media Komputindo.

Gizas, A. B., Christodoulou, S. P.,& Papatheodorou, T. S. (2016).

Comparative evaluation of JavaScript frameworks Comparative
Evaluation of JavaScript Frameworks, (December).
https://doi.org/10.1145/2187980.2188103.

Yudana. (2018). Deretan Framewowk Javascript yang Paling Banyak

Digunakan. Diambil dari https://www.yudana.id/deretan-framework-
javascript-yang-paling-banyak-digunakan/

Arief, M. Rudianto. (2011). Pemrograman Web Dinamis menggunakan

PHP dan MyQGL. C.V ANDI OFFSET. Yogyakarta.

Nofyat., Ibrahim, A., & Ambarita, A. (2018). Sistem Informasi Pengaduan

Pelanggan Air Berbasis Website Pada PDAM Kota Ternate, (April).
https://doi.org/10.36549/ijis.v3i1.37

Salma, A. I. (n.d). Mengenal Konsep JSON Web Token (JWT). Retrieved

August 4, 2017, from https://www.dumetschool.com/blog/m engenal-
konsep-json-web-token-jwt.

Tamplin J. (2018, April 17). Firebase Expends To Become A Unified App

Platfrom. Retrieved from
https://firebase.googleblog.com/2016/05/firebase-expands-to-become-
a-unified-app-platform.html

61
 LAMPIRAN

A. LAMPIRAN LOA

62
 B. JADWAL PEMBELAJARAN
a. Expert class
Durat Durat
Quant ion ion
ity (minu (minu Time
Activity Activity Detailed (Day) te) te) (WIB)
Reading & Pre- 08.30-
Self-Study Activitias record Video 45 150 6750 11.00
Doing Quiz (multiple 11.00-
Post Learning choice) 45 60 2700 12.00
12.00-
Break 13.00
13.00-
Post Learning Doing Summary 45 60 2700 14.00
Doing homework & 14.00-
Post Learning practices 45 60 2700 15.00
15.00-
Break 15.20
Doing homework & 15.20-
Post Learning practices 45 60 2700 16.30
Coding Competence Flexible
Monthly Test Test 5 480 2400 Time
Flexible
Exploration Mini Project 15 390 5860 Time
18.00-
Break 18.30
Review & QnA
New Task 18.30-
In-Class Activity Explanation 36 150 5400 21.00
Monthly-In-Class Professional Skill 18.30-
Activity Development 24 150 3600 21.00
21.00-
Special Class 1on1 (additional) - 30 - 21.30
Total Duration 34810

63
 b. Project class
Durat
Quant Durat ion Time
Activity Activity Detailed ity ion Total (WIB)
Project Team 1260 08.30-
Capstone Project Collaboration 60 210 0 12.00
12.00-
Break 13.00
Project Team 13.00-
Capstone Project Collaboration 60 120 7200 15.00
Project Team
Collaboration (self 09.00-
Capstone Project activities) 24 150 3600 12.00
Review & QnA
New Task 18.30-
In-Class Activity Explanation 36 150 5400 21.00
Total Duration 28800

64
 C. LOG ACTIVITY
Minggu/Tanggal Kegiatan / Materi Keterangan
17 Februari Pembekalan untuk mengikuti Sosialisasi
2022 course dan konsolidasi
18 Februari Pembagian kelas dan mentor -
2022
21 Februari Acara Pembukaan dari mitra -
2022 Alterra
Mempelajari tentang git
dan github.com dimana
22 Februari Version Control and Branch
tempat pengumpulan
2022 Management
code-code pemrograman,
tugas-tugas, dan lain-lain
Pengenalan design-design
yang menarik, simple, dan
praktis agar terlihat
menarik oleh user.
23 Februari UX(user experience) ialah
Introduction UI/UX
2022 bagaimana pengalaman
user dalam penggunaanya.
UI(user interface) dimana
user berinteraksi dengan
design-desing website
24 Februari Figma merupakan sebuah
2022 software untuk mendesign
UI website atau mobile
25 Februari
Figma dan alat prototyping.
2022
26 Februari
2022
1 Maret 2022 HTML merupakan
Hypertext Markup Language kerangka dasar atau
2 Maret 2022 (HTML) struktur dasar sebuah
halaman website.
Cascading Style Sheets (CSS) CSS dapat menghias
halaman website, dan
4 Maret 2022
dapat mengatur posisi
pada halaman web.

65
5 Maret 2022 BOOTSTRAP adalah
framework CSS, yang
berfungsi untuk
BOOTSTRAP
8 Maret 2022 mendesain website
responsive dengan cepat
dan mudah.
9 Maret 2022 Javascript adalah Bahasa
pemrograman yang high-
Javascript Refreshment
10 Maret 2022 level , scripting, untyped,
dan interpreted.
Clean code adalah istilah
untuk code yang mudah
11 Maret 2022 Clean Code
dibaca, dipahami, dan
diubah oleh programmer.
12 Maret 2022 Frontend adalah sebuah
bagian dari website yang
membuat tampilan
menarik kepada user.
Dasar dari frontend yaitu
HTML, CSS, dan
Frontend Fundamental Javascript. Kalo kita
15 Maret 2022 samakan dengan anatomi
manusia, HTML itu
kerangka, CSS itu
bagaikan kulit & Pakaian,
dan Javascript itu
bagaikan otak.
16 Maret 2022 Vue adalah framework
dari javascript untuk
mengembangkan
Vue Fundamental
17 Maret 2022 tampilan website yang
lebih interaktif dan
dinamis
18 Maret 2022 Vue CLI (Command Line Vue CLI adalah perkakas
Interface) standar untuk
19 Maret 2022
memudahkan
penyetalan/pembuatan
aplikasi vue baru. Vue
mempunyai struktur
folder yaitu assets,
66
 component, router, store,
views, dan test.
22 Maret 2022 Sebuah komponen file
tunggal vue bertujuan
23 Maret 2022
untuk dapat digunakan
lebih dari satu kali
ditempat yang berbeda
Vue Component disebut Komponen Vue
yang dapat digunakan
24 Maret 2022
kembali. Cara kerja
komponen vue yaitu dari
anak(child) ke
induk(parent).
25 Maret 2022 Di vue helpers ada disebut
Navigasi, yatitu kegiatan
berpindah dari satu
halaman ke halaman lain.
Dan ada juga
Vue Helpers penyimpanan global, yaitu
26 Maret 2022 sebuah metode untuk
menyimpan variable yang
dapat diakses dengan
mudah diseluruh bagian
aplikasi.
29 Maret 2022 Data fetching adalah
pengambilan data oleh
perangkat lunak atau
skrip. Dan API singkatan
dari Application
Vue Data Programming Interface
30 Maret 2022 yaitu sebuah protocol
pada dasarnya
menyediakan Bahasa dan
kontran untuk bagaimana
dua system beriteraksi.
31 Maret 2022 Vue Quality Control Debugging adalah proses
mengidentifikasi dan
1 April 2022
menghilangkan kesalahan
dari perangkat lunak
computer. Cara kerja

67
 debugging yaitu
identifikasi debugging,
dan identifikasi
kesalahan/error.
2 April 2022 UI framework adalah
kumpulan elemen visual
5 April 2022
(seperti tombol, ikon, dll)
6 April 2022 dan fungsionalitas yang
Vue UI Framework bisa secara instan.
Macam-macam rangka
kerja UI yang tersedia
yaitu Vuetify,
Bootsrtapvue, dll.
7 April 2022 Siapa tim product? Ialah
sekolompok orang yang
mengawasi proses desain
Work Together With Product.
produk baru. Siapa tim
8 April 2022 Backend, And Devops
backend? Ialah yang
mengacu pada
pengembangan sisi server.
9 April 2022 Nuxt adalah kerangka
kerja yang dibangun
12 April 2022
diatas vue yang membuat
Vue With Nuxt
pengembangan web
menjadi sederhana dan
ampuh.
13 April 2022 Algoritma adalah
prosedur komputasi yang
14 April 2022
didefinisikan dengan baik
Introduction Algorithm yang mengambil beberapa
nilai sebagai input dan
menghasilkan beberapa
nilai sebagai output.
16 April 2022 Understanding GraphQL Basic GraphQL adalah bahasa
& Relational Database query untuk API, dan
runtime sisi server untuk
mengeksekusi kueri
dengan menggunakan
sistem tipe yang tetapkan

68
 untuk data.
19 April 2022 Relational Database
20 April 2022 Understanding GraphQL
Query
21 April 2022 Understanding GraphQL
22 April 2022 Mutation

23 April 2022 Understanding GraphQL

Subscribsion
25 April 2022 – Mini Project Vue Pengerjaan Mini Project
21 Mei 2022

23 Mei 2022 Mengerjakan sebuah

website secara
:
berkelompok. Dan
: Capstone Project diakhir,
: mempresentasikasikan
hasil akhit capstone
21 Juli 2022 project

69