4 BAB IV

IMPLEMENTASI DAN PEMBAHASAN SISTEM

4.1 Implementasi Sistem

Pada penelitian ini teknologi Vue js di terapkan pada bagian frontend

aplikasi manajemen pesanan berbasis web, Yii 2 Framework digunakan sebagai

backend data yang di sediakan oleh backend adalah JSON/XML. Berdasarkan

perancangan sistem dan analisis di bab 3 maka pada bab 4 merupakan

implementasi dimana tahap sistem siap di gunakanan dan di uji dalam keadaan

yang sebernarnya , dengan implementasi sebagai berikut :

4.1.1 Integerasi Yii 2 Framework dan Vue Js

Integerasi merupakan sebuah proses dimana menggabungkan atau

menghubungkan semua unit proses dalam sebuah rancangan sistem sehingga

mampu berkerja sesuai dengan fungsinya dan berdasarkan pada rancangan

arsitektur sistem, Langkah-langkah integerasi tersebut adalah sebagai berikut :

1. Instalasi Yii 2 sebagai kerangka dasar pembuatan aplikasi , instalasi dapat

menggunakan composer sebagai dependency manager. Template yang akan

digunakan adalah Yii 2 basic dapat di download dengan menjalankan

perintah composer create-project --prefer-dist yiisoft/yii2-app-basic basic

2. Kemudian install npm dan package-package yang dibutuhkan antara lain

adalah vue, laravel-mix,axios dan webpack.

3. fungsi laravel-mix disini adalah sebagai compiler project berbasis javascript

dan webpack akan berperan sebagai task-runner dari laravel-mi

37
 38

4. laravel-mix akan melakukan kompilasi javascript sehingga dapat di baca

oleh browser dan juga melakukan minify atau mengkrompres ukuran.

5. axios akan berperan sebagai library yang digunakan untuk melakukan http

request melalui view layer pada aplikasi.

6. Vue akan di letakan pada view layer sesuai dengan konsep Model, View ,

Controller yang ada pada Yii 2 Framework.

7. Hubungkan Yii 2 dengan basis data yang telah dibuat, dengan melakukan

konfigurasi pada file config\db.php

8. Generate model dengan menggunakan bantuan Gii Generator, setiap model

yang di generate akan melakukan extends dari ActiveRecord dan setiap satu

model akan mewakili satu tabel dari basis data.

9. Vue secara langsung tidak bisa membaca model yang di generate oleh Yii 2

oleh karena itu perlu merubah fungsi dari Controller agar mampu

menyediakan data dalam format yang bisa di olah oleh vue yaitu JSON/XML

10. Konfigurasi Controller dengan menggunakan kelas ActiveController,

ActiveController dengan melakukan ini Yii 2 akan berperan sebagai

RESTfull web service , ActiveController akan membaca data pada model dan

merubah format data menjadi JSON/XML. controller yang saat ini berperan

sebagai endpoint maka bisa dilakukan http request dan response.

11. Membuat sebuah sub direktori dengan nama app , di dalam folder app

dibuat sebuah file dengan nama app.js yang dan boostrap.js

12. Konfigurasi webpack dan laravel-mix

const { mix } = require('laravel-mix');

mix.js('app/app.js',
 39

'web/js/app.js').disableNotifications();
mix.setPublicPath('web/');

13. Import dependency yang dibutuhkan pada boostrap.js

window.Vue = require('vue');
window.VueRouter = require('vue-router').default;
window.VueAxios = require('vue-axios').default;
window.axios = require('axios').default;
Vue.use(VueRouter, VueAxios, axios);

14. Inialisai vue object dan denefinikan router dengan menggunakan vue-router

pada file app.js

const MenuIndex = Vue.component('MenuIndex',

require('./components/c_menu/MenuIndex.vue'));
const routes = [
{ path: '/pemesanan', component: Dashboard, name:
'pemesanan' },
]
const router = new VueRouter({ mode: 'history', routes:
routes });

new Vue({ router }).$mount('#app');

15. Inialisasi vue-router pada layout/view/content

<transition>
<router-view></router-view>
</transition>
<div v-if="this.$route.matched.length == 0">
<?= $content ?>
</div>

16. Aplikasi dapat di akses setelah melakukan kompilasi dengan cara

menjalankan perintah npm run dev dan menjalankan built-in server yii 2

yaitu yii serve.

 40

4.1.2 Konfigurasi OneSingal : Cloud Messaging

Untuk dapat menggunakan layanan dari OneSingal sebagai cloud

messaging, cara konfigurasi adalah sebagai berikut :

1. Melakukan registrasi pada alamat https://app.onesignal.com/signup

dengan menggunakan e-mail.

2. Daftarkan aplikasi pada dashboard OneSingal

Gambar 4.1 Dashboard OneSingal menabahkan aplikasi yang telah dibuat

3. Pilih platfrom yang akan digunakan , pada penelitian ini notifikasi akan

menggunakan fitur web push.

Gambar 4.2 Dashboard OneSingal pemilihan platfom yang akan digunakan

4. Dashboard Configure Web Push , terdapat tiga macam integerasi pada

yang digunakan adalah Typical Site di karenakan memiliki lebih banyak

pilihan termasuk konfigurasi prompt

 41

Gambar 4.3 Pemilihan metode integerasi

5. Site set up , pada bagian ini adalah memasukan domain website yang telah

di hosting dengan menggunakan SSL

Gambar 4.4 memasukan alamat url kedalam site set up

6. Prompt , secara umum merupakan dialog untuk meminta perijinan

notifikasi berdasarkan device yang mengakes aplikasi tersebut.

Gambar 4.5 Pemilihan Prompt

7. Welcome notification , notifikasi yang akan muncul ketika pengguna

menerima request perijinan atau melakukan allow.

 42

Gambar 4.6 Kofigurasi Welcome Notification

8. Setelah konfigurasi di simpan , Download OneSingal SDK dan letakan

pada root folder pada proyek website di penelitian ini.

Gambar 4.7 Link Download OneSingal SDK

9. Copy code dan paste pada bagian header website

Gambar 4.8 Kode Koneksi ke service worker SDK dan manifest

10. Mengkonfigurasi method yang digunakan sebagai trigger untuk terkoneksi

dengan api OneSignal, dokumentasi terdapat pada

https://documentation.onesignal.com/reference . dengan menggunakan

example code yang di sediakan seperti gambar , mekanisme pengiriman di

jelaskan pada gambar 4.17

 43

Gambar 4.9 Contoh Kode Create Notification

4.1.3 Dashboard Pemesanan Vue.js

Gambar 4.10 Dashboard Pemesanan Pada Sistem

Pada gambar 4.10 merupakan tampilan dashboard pemesan dengan login

sebagai kasir , dengan penjelasan alur program di bawah ini :

<div class="col-md-7"><label>Kategori Menu :</label>

<select v-model="kategori">
<option value disabled hidden>--Pilih Kategori Menu—
</option>
<option v-for="row in kategoriMenu" :key="row.id_ktmenu"
v-bind:value="row.nama_kategori"
>{{row.nama_kategori}}</option>
</select></div>
Gambar 4.11 Kode Filter Kategori Menu
 44

Pada Gambar 4.11 merupakan kode pada salah satu bagian pada menu

pemesanan yang digunakan untuk menampilkan data menu berdasarkan kategori

menu yang ada, dengan menggunakan dropdown list untuk menampilkan

perulangan data kategori menu dari backend. perulangan tersebut dilakukan

dengan cara yang pertama adalah melakukan inalisasi v-model=”kategori” pada

bagian dropdown list. Nilai dari “kategori” akan di deklarasikan pada bagian data

Gambar 4.6 dengan nilai awal adalah “Makanan” . Untuk menampilkan

perulangan data pada option digunakan v-for yang merupakan fungsi bawaan vue

js untuk melakukan list rendering dengan melakukan inialisasi v-for di ikuti

dengan data yang akan kita panggil yaitu kategorimenu, kategorimenu sendiri

kumpulan data berbentuk array yang di dapat dari response http request melalui

axios. Untuk menampilkan data yang ada dalam vue atau binding kedalam view

digunakan sintaks “{{ }}” mustache seperti gambar 4.11 maka akan di tampilkan

nama kategori pada bagian view .

<div class="col-md-4" v-for="(menu) in filterKategori"

:key="menu.id_menu">
<div class="box">
<div class="box-header with-border border-primary bg-blue">
<h5>{{menu.nama }}</h5>
</div>
<div class="box-body">
<strong>Rp. {{formatHarga(menu.harga) }}</strong>
<span v-if="menu.stok!=0">Stok : {{menu.stok}}</span>
<span class="label label-danger" v-else>Habis</span>
<button class="btn btn-xs btn-success pull-right"
@click="TambahKeranjang(menu.id_menu,menu.nama,menu.harga,me
nu.id_ktmenu,menu.stok,pesanan.id_pesan)"
v-if="menu.stok">+</button></div>
</div>
</div>
Gambar 4.12 Kode Menampilkan Menu
 45

Pada Gambar 4.12 merupakan baris kode yang digunakan untuk

menampilkan data menu dalam sebuah box , dengan menggunakan v-for akan

dilakukan perulangan berdasarkan data binding dari filterKategori. Perulangan

data menu tersebut di tempatkan pada divider dengan menampilkan

{{menu.nama}} yang berisi nama menu pada header divider tersebut. Sedangkan

pada bagian body divider akan disini oleh {{formatHarga(menu.harga}} yang

berisi harga menu di lakkan currecy formating menggunakan fungsi

formatHarga() , fungsi tersebut akan melakukan pemisanan dengan menggunakan

(.) titik . selanjutnya untuk memberikan informasi ketersedian stok menu akan di

tampilkan stok menu dengan sebuah kondisi yang di letakan pada sebuah span .

pengkondisian tersebut menggunakan fungsi v-if dimana jika menu.stok nilainya

tidak sama dengan 0 , maka span tersebut akan menampilkan jumlah stok menu.

Kondisi selanjutnya dalah jika kondisi pertama tidak terpenuhi atau nilai

menu.stok memiliki nilai sama dengan 0, maka akan di tampilkan span dengan

nilai “habis”. Kemudian terdapat sebuah button untuk melakukan sebuah event,

dengan menggunakan @click yang merupakan sorthand dari v-on:click . ketika

tombol tersebut menerima aksi yaitu click maka akan menjalankan sebuah fungsi

TambahKeranjang() dengan melewatkan beberapa paramater antara lain

id_menu,nama,id_ktmenu,harga,stok dan id_pesan. Pada button tersebut juga

memiliki fungsi kondisi v-if , jika menu.stok tidak memiliki nilai maka tombol

tersebut akan hilang.

<div class="col-md-5">
<div class="box">
<div class="box-header with-border bg-black-active">
<h5 class="box-title">DAFTAR PESANAN</h5>
 46

<h5 class="box-title pull-right">ID

:{{pesanan.id_pesan}}</h5>
</div>
<div class="box-body">
<label>
<strong>KATEGORI PEMESANAN :</strong>
</label>
<select v-model="pesanan.id_ktpesan"
@change="OnChange($event)" class="form-control">
<option value disabled hidden>--Pilih Kategori Pesanan--
</option>
<option v-for="ktpesan in kategoriPesan"
:key="ktpesan.id_ktpesan"v-bind:value="ktpesan.id_ktpesan"
>{{ktpesan.nama_kategori}}</option>
</select>
<br />
<label v-if="tampil">
<strong>MEJA :</strong>
</label>
<select v-model="pesanan.id_meja" class="form-control" v-
if="tampil">
<option value disabled hidden>--Pilih Pilih Nomor Meja--
</option>
<option v-for="meja in mejas" :key="meja.id_meja" v-
bind:value="meja.id_meja" >{{meja.nomor_meja}}</option>
</select>
<br />

<table class="table table-bordered table-striped">

<thead class="bg-primary">
<th>NO</th><th>NAMA ITEM</th><th>QTY</th><th>HARGA</th>
<th>AKSI</th></thead>
<tbody>

<tr v-if="!keranjang.length">
<td colspan="5">
<h4 class="text-center">Belum Ada Pesanan</h4>
</td>
</tr>

<tr v-for="(krj, number) in keranjang"

:key="krj.id_pesan">
<td>{{number+1}}</td>
<td>{{krj.nama}}</td>
<td>{{krj.jumlah}}</td>
<td>
<strong>Rp. {{formatHarga(krj.harga*krj.jumlah)}}</strong>
</td>
<td>

<button class="btn btn-xs btn-warning"

 47

@click="KurangiJumlah(krj.id_menu)"
v-if="krj.jumlah" >-</button>

<button class="btn btn-xs btn-primary"

@click="hapusCart(number,krj.id_menu)">X</button>
</td>
</tr>

<tr>
<td></td><td><strong>TOTAL</strong>:</td><td>
<strong>{{total_qty}}</strong>
</td>
<td>
<strong>Rp. {{formatHarga(total_harga)}}</strong>
</td>
</tr>

<tr><td colspan="5"><strong>KETERANGAN:</strong></td></tr>
<tr>
<td colspan="5">
<textarea v-model="pesanan.keterangan" class="form-
control" placeholder="Masukan Keterangan Tambahan">
</textarea>
</td>
</tr>
</tbody>
</table>
</div>

<div class="box-footer">
<button class="btn btn-primary btn-xs pull-left"
@click="ProsesPesanan()">PROSES</button>
</div>
</div>
</div>
Gambar 4.13 Kode Menampilkan Menu Pesanan Terpilih
Pada Gambar 4.13 merupakan baris kode dimana menu-menu yang terpilih

akan di tampilkan kepada pengguna sistem. Pada aturan bisnis terdapat kategori

pemesanan yang harus di tentukan sebelum pemesanan di proses , oleh karena itu

perlu di tampilan dalam view dalam bentuk dropdown list dengan mengambil data

dari data kategoriPesan , dengan menggunakan v-model seperti halnya pada filter

kategori menu pada Gambar 4.3. yang membedakan adalah pada dropdown list ini

di masukan sebuah event handling ketika terjadi perubahan nilai pada dropdown
 48

list. Dengan menggunakan @change dan method yang akan di panggil adalah

OnChange($event ) , $event bernilai indeks dari kategori pesan. Event ini di

maksudkan untuk menampilkan atau menyembunyikan pilihan nomor meja. Jika

pengguna sistem memilih “Makan di tempat” maka pilihan dropdown list nomor

meja akan di aktifkan, pada proses nya method OnChange akan mengganti nilai

data “tampil” akan menjadi true yaitu menampilkan pilihan nomor meja.

sedangkan ketika pengguna sistem memilih “Bungkus” maka akan

mengembalikan nilai data “tampil” menjadi nilai default yaitu false maka pilihan

meja akan nonaktif.

Selanjutnya merupakan tabel dimana daftar menu-menu yang di pilih akan di

tampilkan, menu-menu yang di pilih tersebut disimpan dalam sebuah array

dengan nama keranjang. Terdapat sebuah fungsi kondisi menggunakan v-if , jika

data keranjang tidak memiliki panjang atau nilai maka tampilkan sebuah tulisan

yang memberitahukan kepada pengguna sistem bahwa belum ada menu yang di

pilih.

Maka sebaliknya jika keranjang memiliki panjang atau nilai , maka

tampilkan menu yang terpilih di dalam data keranjang. Data yang di tampilkan

meliputi nama, jumlah dan harga menu yang dipilih.

Untuk memperoleh nilai sub total per items , dapat dilakukan dengan

menggunakan operator (*) asterik , nilai yang di kalikan adalah {{krj.jumlah}}

jumlah x {{krj.harga}} harga menu.

 49

Dalam tabel tersebut juga terdapat sebuah tombol untuk mengurangi

jumlah item terpilih satu demi satu atau menghapus item terpilih secara langsung.

Tombol yang pertama digunakan untuk mengurangi jumlah terdapat event

handling ketika tombol di klik yaitu memanggil method KurangiJumlah()

parameter yang di lewatkan akan id_menu dan sebuah kondisional v-if untuk

menonaktifkan tombol (-) jika nilai jumlah sudah bernilai 0, fungsi ini di buat agar

pengguna sistem tidak melakukan hingga stok menu menjadi minus.

Tombol selanjutnya digunakan untuk menghapus secara langsung menu tanpa

mengurangi satu per-satu. Terdapat sebuah event “click” yang akan memanggil

method hapusCart() dengan paramater yang di lewatkan adalah number yang

merupakan indeks array dari data keranjang dan id_menu dalam keranjang yang

menidentifikasikan menu mana yang akan di hapus.

Selanjutnya adalah pengggunan computed properties pada data total_qty dan

total_harga, computed properties sebuah data yang nilainya tergatung pada data

yang lain penjelasan mengenai proses penghitungan ada pada Gambar 4.15. Di

bagian bawah terdapat sebuah textarea yang digunakan untuk menyimpan

keterangan tambahan pada setiap pesanan masuk. Terkahir terdapat sebuah

tombol dengan sebuah event ketika di click yaitu memanggil method

Prosespesanan() yang di jelaskan pada Gambar 4.17

 50

Gambar 4.14 tampilan pemesanan konsumen

data() {
return {
menus: [],
mejas: [],
kategoriMenu: [],
kategoriPesan: [],
keranjang: [],
pesanan: {
id_pesan: this.rndStr(4),
id_ktpesan: "",
id_meja: "",
id_user: "",
keterangan: ""
},
tampil: false,
kategori: "Makanan"
};
},
Gambar 4.15 Kode Program Inialisasi Data
Pada Gambar 4.15 Merupakan baris kode untuk inialisasi data, secara

umum data disini merupakan kumpulan variabel-variabel yang dapat di olah atau

di manipulasi. Data hanya dapat di gunakan oleh halaman atau kompomen itu
 51

sendiri, sedangkan untuk pengiriman data antar kompomen pada penelitian ini

menggunakan vue router dengan melewatkan parameter yang akan di olah di

halam yang lain.

Pada Gambar 4.15 terdapat beberapa inialisasi data yang pertama adalah

data yang digunakan untuk menampung response dari http request pada bagian

method yang di jelaskan pada gambar 4.17 . data tersebut adalah data

menus,mejas,kategoriMenu dan kategoriPesan. Data-data tersebut di inialisasikan

dalam bentuk array yang di notasikan dengan simbol “[ ]”. Digunakan array

karena response yang di terima tidak hanya memiliki 1 data melainkan sebanyak

ada yang ada pada backend.

Selanjutnya adalah inialisai data keranjang yang digunakan untuk

menampung menu-menu yang di pilih oleh pelanggan. Dan data pesanan yang

digunakan untuk menampung data-data yang berhubungan dengan id_pesan,

kategori pesan, id_user , tanggal dan keterangan.

Yang terkahir adalah inialisasi data yang digunakan untuk menjalankan

fungsi kondisi pada dropdown list . data tampil yang memiliki nilai false

digunakan untuk menyembunyikan pilihan meja yang di jelaskan pada Gambar

4.15 , sehingga menu pilihan meja akan tampil ketika nilai data tampil bernilai

false.

Data kategori merupakan variabel yang digunakan untuk menampilkan

menu-menu berdasarkan kategori yang di pilih. Disni di berikan nilai default

 52

“makanan” sehingga menu yang akan tampil ketika halaman pertama kali di load

adalah menu yang memiliki kategori “makanan”.

computed: {
total_qty: function() {
return this.keranjang.reduce((total, keranjang) => {
return total + keranjang.jumlah;
}, 0);
},
total_harga: function() {
return this.keranjang.reduce((total, keranjang) => {
return total + keranjang.harga * keranjang.jumlah;
}, 0);
},
filterKategori() {
return this.menus.filter(row => row.id_ktmenu ===
this.kategori);
}
},
Gambar 4.16 Kode Program Computed Properties
Pada Gambar 4.16 merupakan baris kode yang digunakan untuk

menghitung total_qty, total_harga dan filterKategori. Computed propreties sendiri

adalah sebuah variabel yang nilai nya bergantung dari variabel lain. Pada bagian

total_qty , terdapat sebuah fungsi yang memiliki return value yaitu nilai dari

akumulasi jumlah atau quantity dalam array keranjang. Maka pada array

keranjang dengan nama field jumlah akan di akumulasikan nilainya menjasi

sebuah nilai tunggal.

Selanjutnya paga bagian total_harga , masih menggunakan fungsi reduce

disini sebelum di akumulasikan ada perkalian terlebih dahulu yaitu perkalian

harga dan jumlah dalam array keranjang. Sehingga nilai kembalian adalah hasil

harga x jumlah setelah itu baru dijumlahkan sebanyak data array.

 53

Yang terkahir adalah filterKategori, yang digunakan untuk memfilter

menu makanan. this.menu.filter() memiliki arti lakukanlah filter pada data menu

dengan kondisi id_ktmenu memiliki nilai yang sama dengan this.kategori atau

data kategori. Data kategori sudah di tentukan di awal yaitu memiliki nilai

“makanan” maka menu yang akan di tampilkan adalah menu makanan terlebih

dahulu.

ambilData(){
axios.get("/menu").then(response =>
{
this.menus = response.data;
});
},
AmbilKategoriPesan(){
axios.get("/kategori-pesan").then(response => {
this.kategoriPesan = response.data;
});
},
AmbilKategoriMenu(){
axios.get("/kategori-menu").then(response => {
this.kategoriMenu = response.data;
});
},
AmbilMeja() {
axios.get("/meja?sort=nomor_meja").then(response => {
this.mejas = response.data;
});
},
Gambar 4.17 Kode Pengambilan data dari Backend
Pada gambar 4.17 merupakan baris kode pada bagian method yang

digunakan untuk meminta data dari backend dengan memanfaatkan fungsi AJAX

menggunakan library axios. Penggunaan axios sendiri di sarankan dalam halaman

resmi vue js untuk melakukan http request pada web service. Pada setiap method-

method di atas meggunakan teknik yang sama yaitu axios akan melakukan http

request dengan pola axios.get() di ikuti endpoint web service atau url webservice.

Jika tidak terjadi error atau data yang diminta ada maka axios akan memberikan
 54

response berupa data. Namun data tersebut belum bisa di manipulasi , untuk bisa

mengelola data tersebut perlu disimpan dalam sebuah variabel maka dilakukan

inialisasi seperti this.menus=response.data . pada gambar 4.15 yang this.menus

sudah di dekalrasikan merupakan sebuah variabel dalam bentuk array dengan

nilai kosong. Setelah sintaks this.menu=response.data di eksekusi sekarang

this.menu sudah memiliki nilai yaitu kumpulan data yang di kirim dari backend.

Untuk mathod AmbilKategoriMenu(),AmbilKategoriPesan(), dan AmbilMeja()

memilki teknik yang ama seperti pengambilan data menu.

TambahKeranjang(id_menu, nama, harga, id_ktmenu, stok,

id_pesan) {
let stok_baru = stok - 1;

axios.patch("/menu/" + id_menu, {
stok: stok_baru })
.then(response => {
})
.catch(error => console.log(error.response.data));

let cari = this.keranjang.find(

keranjang => keranjang.id_menu === id_menu
);

if (cari){
cari.jumlah++;
} else {
this.keranjang.push({
id_menu: id_menu,
jenis_menu: id_ktmenu,
nama: nama,
harga: harga,
jumlah: 1,
status_order: 1
});
}
this.SetLocalStorage();
let value = this.menus.find(menu => menu.id_menu ===
id_menu);
if (value) {
value.stok--;}
}
Gambar 4.18 Kode Tambah Ke Keranjang
 55

Pada Gambar 4.18 merupakan method yang digunakan untuk mengelola

event ketika ada menu yang di pilih yang di jelaskan pada Gambar 4.4 . Parameter

yang dilewatkan ke dalam method ini adalah

id_menu,nama,harga,id_ktmenu,stok, dan id_pesan. algoritma penyelesaian kasus

yang digunakan pada method ini adalah ketika method TambahKeranjang() di

ekseskusi maka yang pertama akan terjadi pengurangan stok, dengan melakukan

patch request ke api menu sedangkan nilai yang dikirimkan adalah nilai dari

stok_baru. Nilai dari stok_baru ini di peroleh dari pengurangan stok lama

dikurangi 1. Sehingga ketika pengguna memilih menu A maka di backend

terupdate menu A berkurang 1 pada setiap kali kliknya.

Selanjutnya adalah penyelesaian kasus ketika sebuah menu yang sama di

klik lebih dari satu kali. Yang akan bertambah adalah variabel jumlah di dalam

keranjang. Sehingga di yang pertama dilakukan adalah mencari pada array

keranjang dengan this.keranjang.find() , jika id_menu dalam keranjang sama

dengan menu yang di pilih maka akan memiliki nilai kembalian “true” , setelah

itu gunakan nilai kembalian ini pada sebuah fungsi kondisi. Jika nilai “cari”

bernilai “true” maka lakukan incriment pada variabel jumlah dengan cara

jumlah++ maka akan bertambah 1 setiap kali dilik pada menu yang sama.

Kemudian jika menu yang dipilih bukan menu yang sama, akan di

masukan dalam fungsi else yang akan di eksekusi ketika kondisi awal tidak

terpenuhi.. Yaitu menambah menu tersebut dalam array keranjang sebagai indeks

baru.
 56

Setelah fungsi kondisi dijalankan yang dilakukan kemudian adalah

memanfaatkan fitur local storage pada browser untuk menyimpan data-data yang

ada pada variabel keranjang, metode ini digunakan untuk mengantisipasi ketika

pengguna sistem berpindah-pindah navigasi sehingga menu pesanan yang di pilih

tidak akan hilang baik ketika browser di refresh. Penjelasan tentang localstorage

terdapat pada Gambar 4.22.

Yang terkahir adalah mengurangi stok dari sisi view atau yang di lihat

langsung oleh user. dengan cara mencari dalam array menus yang memiliki

id_menu yang sama dengan menu terpilih. Jika bernilai true makan akan

dilakukan pengurangan dengan menggunakan decrement maka setiap menu

tersebut di klik akan berkurang 1.

hapusCart(number, id_menu) {
let cari = this.keranjang.find(
keranjang => keranjang.id_menu === id_menu);

let cari_stok = this.menus.find(menu => menu.id_menu ===

id_menu);

if (cari_stok)
{
axios.patch("/menu/" + id_menu, {
stok: cari_stok.stok + cari.jumlah
})
.then(response => {
console.log(response.data);
})
.catch(error => console.log(error.response.data));
}
let value = this.menus.find(menu => menu.id_menu ===
id_menu);
if (value) {
value.stok = value.stok + cari.jumlah;
}
this.keranjang.splice(number, 1);
this.SetLocalStorage();},
Gambar 4.19 Kode Hapus Dari Keranjang
 57

Pada gambar 4.19 adalah method yang digunakan untuk meng-hadle

ketika pengguna sistem ingin menghapus menu pesanan yang terpilih. Untuk

menjalankan fungsi tersebut di butuhkan parameter ya itu number yang

merupakan indeks array pada data keranjang dan id_menu di gunakan untuk

memberitahu kepada sistem menu mana yang akan di hapus.

Yang pertama adalah penyelesaian kasus ketika pelanggan membeli menu

A sebanyak 3 pcs. Maka stok menu A akan berkurang sebanyak 3 pcs, jika

ternyata sebelum pesanan di proses pelanggan mengganti menu A menjadi menu

B maka kasir/pelayan harus menghapus menu A. Untuk itu menu A yang

sebelumnya di ambil sebanyak 3 , maka setelah di hapus perlu mengembalikan

atau update nilai 3 tersebut pada data menu. Sehingga yang pertama dilakukan

adalah mencari data menu terpilih yang ada pada data keranjang dengan

this.keranjang.find() , jika nilai kembalianya bernilai true. Maka sistem akan

menjalankan fungsi yang kedua yaitu mencari data menu terpilih pada array

menus masih menggunakan fungsi find() pada javascript. setelah mendapat nilai

tersebut , maka dapat di masukan dalam fungsi kondisi jika . axios akan

melakukan http request yaitu patch untuk menambah data stok dalam array

menus di tambah dengan jumlah terpilih sehingga database ter-update kembali.

Yang kedua adalah melakukan update stok pada sisi view , dengan teknik

yang sama yaitu menambah stok lama dengan jumlah yang terpilih sebelumnya.

Selanjutnya adalah menghapus data pada data keranjang dengan cara melakukan

splice , dikuit indeks dan parameter “1” menandakan yang di hapus 1 data array.
 58

KurangiJumlah(id_menu, nama, harga)

{
let cari_stok = this.menus.find(menu => menu.id_menu ===
id_menu);
console.log(cari_stok);

if (cari_stok) {
axios.patch("/menu/" + id_menu, {
stok: cari_stok.stok + 1
})
.then(response => {
console.log(response.data);
})
.catch(error => console.log(error.response.data));
}

let cari = this.keranjang.find(

keranjang => keranjang.id_menu === id_menu
);

if (cari) {
cari.jumlah--;
}
this.SetLocalStorage();

let value = this.menus.find(menu => menu.id_menu ===

id_menu);

if (value) {
value.stok++;
}
}
Gambar 4.20 Kode Kurangi Jumlah Pesanan
Jika pada gambar 4.19 adalah metode yang dijalankan ketika pengguna

sistem menghapus menu terpilih, pada gambar 4.20 adalah metode yang

digunakan jika pada suatu kasus pelanggan ingin mengurangi jumlah pesananya

bukan membatalkan pesanan yang dipilih. Di contohkan pelanggan mimilih menu

A sebanyak 3 pcs , ternyata sebelum pesanan di proses pelangan hanya ingin

membeli menu A sebanyak 2 pcs oleh karena itu kasir/perlu mengurangi jumlah

pesanan sebanyak 1.
 59

Untuk melakukan langkah tersebut pada method KurangiJumlah()

membutuhkan parameter yang akan di manipulasi yaitu id_menu,nama dan harga.

Yang pertama masih menggunakan cara yang sama yaitu fungsi find() pada

javascript yaitu mencari data pada array menus yang memilik id_menu yang

sama dengan menu terpilih.

Jika nilai bernilai “true” makan akan di jalankan fungsi kondisi yaitu

melakukan update, menambah stok menu pada backend sebanyak 1 . selanjutnya

memperbarui data keranjang, yaitu mengurangi jumlah dengan melakukan

decrement. Yang terkahir memperbarui jumlah stok yang di tampilkan , dengan

menggunakan fungsi find() maka akan di cari pada data array menus jika bernilai

true makan stok pada array menus terpilih akan di tambah dengan 1.

ProsesPesanan() {
axios.post("/pesanan", this.pesanan).then(response => {
this.PesanBerhasil();
});
for (let i = 0; i < this.keranjang.length; i++) {
axios.post("/pesanan-detail", {
id_pesan: this.pesanan.id_pesan,
id_menu: this.keranjang[i].id_menu,
jenis_menu: this.keranjang[i].jenis_menu,
harga: this.keranjang[i].harga,
jumlah: this.keranjang[i].jumlah,
status_order: this.keranjang[i].status_order
})
.then(response => {
console.log(response.data);
})
.catch(error => console.log(error.response.data));
}

localStorage.clear("keranjang");
this.keranjang = [];
this.SetLocalStorage();
this.OneSingal()
},
Gambar 4.21 Kode Proses Pesanan
 60

Pada Gambar 4.21 merupakan method yang digunakan untuk memproses

pesanan, pada method ini di eksikusi secara umum akan menjalankan dua fungsi

yaitu menyimpan data header dan data detail. Data header terdapat pada tabel

pesanan meliputi id_pesan,tanggal,id_ktpesan,id_meja,id_user,keterangan dan

status pesan. Selanjutnya di data detail pada tabel pesanan_detail akan disimpan

id_pesan,id_menu,harga,jumlah dan status_order. Oleh karena itu terdapat dua

http request yang akan di jalankan yang pertama adalah post ke endpoint

“pesanan” yang di kirimkan adalah data pesanan. Setelah sukses sistem akan

mengeksekusi http request yang kedua yaitu post data kerajang yang berisi menu-

menu terpilih ke endpoint “pesanan-detail”.

Keranjang sebelumnya di deklarasikan sebangai array sehingga di dalam

keranjang tersebut memiliki banyak data, karena dalam sekali pemesanan seorang

pembeli bisa membeli lebih dari satu menu dalam satu nota. Maka perlu

menggunakan for untuk mengulang proses post sebanyak data yang ada dalam

array keranjang dengan sintaks for (let i = 0; i < this.keranjang.length; i++)

didalam for tersebut ada post request dengan this.keranjang[i]. Setelah data

header dan data detail disimpan yang perlu dilakukan adalah menghapus

localStorange dengan menggunakan localStorage.clear(“keranjang”) dan array

keranjang di set kembali menjadi array kosong sehingga sistem bisa menerima

pesananan selanjutnya.

Yang terkahir adalah menjalankan method OneSingal() yaitu mengirimkan

push notifiaksi pada user aktif penjelasan OneSingal terdapat pada Gambar 4.14
 61

SetLocalStorage() {
localStorage.setItem("keranjang",
JSON.stringify(this.keranjang));
},
GetLocalStorage() {
this.keranjang =
JSON.parse(localStorage.getItem("keranjang"));
},
Gambar 4.22 Kode Inialisasi Local Storage
Pada Gambar 4.22 merupakan potongan kode yang digunakan untuk

memanfaatkan local storage yang ada pada browser , localstorage sendiri adalah

merupakan teknologi HTML5 yang digunakan menyimpan data sementara dalam

browser. Pada method SetLocalStorage() , akan melakukan inialisasi localstorage

dengan nama “keranjang” yang di simpan adalah semua data yang ada pada

variabel keranjang. Sebelum di kirimkan perlu adanya konvert yang sebelumnya

object javascript menjadi JSON oleh karena itu fungsi JSON.stringify().

Yang selanjutnya adalah fungsi GetLocalStorange() , merupakan method

yang fungsinya kebalikan dari SetLocalStorage(). Yang digunakan untuk

mengambil data pada localstorage untuk disimpan dalam javascript object maka

perlu digunakan JSON.parse().

OneSingal() {
var sendNotification = function(data) {
var headers = {
"Content-Type": "application/json; charset=utf-8",
Authorization:
"Basic MjQ1NGNlMWYtZjI3Ni00ZGE5LTk1OGMtNWI1NzMyYTNhMDYw"
};

var options = {
host: "onesignal.com",
port: 443,
path: "/api/v1/notifications",
method: "POST",
headers: headers
};
 62

var https = require("https");

var req = https.request(options, function(res) {
res.on("data", function(data) {
console.log("Response:");
console.log(JSON.parse(data));
});
});

req.on("error", function(e) {
console.log("ERROR:");
console.log(e);
});

req.write(JSON.stringify(data));
.end();
};

var message = {
app_id: "1bd90289-0c1e-419a-bab2-bf400ec66778",
contents: { en: "HALO ! ADA PESANAN BARU SILAHKAN CEK DATA
PESANAN" },
included_segments: ["All"]
};
sendNotification(message);
}
Gambar 4.23 Kode Penggunan Push Notifikasi OneSignal
Pada Gambar 4.23 merupakan method yang digunakan untuk

mengirimkan notifikasi ke setiap user aktif sehingga user mengetahui adanya

pesanan baru. Pengiriman notifikasi ini menggunakan layanan dari sebuah

platfrom yang bernama OneSingal.com. kode diatas adalah kode yang bisa di

dapatkan pada dokumentasi One Singal , sebelumnya untuk dapat mengunakan

layanan tersebut harus mendaftarkan apliaksi terlebih dahulu sehingga

mendapatkan key sehingga ketika method tersebut di eksekusi maka bisa

mengirimkan notifiaksi ke setiap user aktif.

4.2 Pembahasan Sistem

Terkait dengan penelitian yang menggunakan vue js , selain hasil penelitian

menghasilkan sebuah aplikasi manajemen pesanan dan stok berbasih website

 63

dengan notifiaksi, penggunaan vue js juga diharapkan mampu meningkatkan

performa aplikasi oleh karena itu pengujian di fokuskan pada pengujian performa

pada aplikasi web yang telah di upload pada server , hasil pengujian dapat dilihat

pada tabel 4.1.

Sedangkan untuk alat pengujian dan hosting yang digunakan pada

penelitan ini adalah sebagai berikut :

1. Alat Pengujian : Google Lighthouse

2. Hosting Provider : https://www.niagahoster.co.id/
3. Tipe Hosting : Shared Hosting Paket Pelajar
4. Domain : https://camiles.online
5. Bandwith : Unlimited
6. Kapasitas : Unlimited
Tabel 4.1 Pengujian Performa
Tipe
No Perangkat Parameter Keceptan Skor
Pengujian
1 Desktop Peforma First Contentful 1.1 detik 100
Paint
Speed Index 1.7 detik
Time to 2.2 detik
Interactive
First Meaningful 1.1 detik
Paint
First CPU Idle 2.3 detik
Max Potential 760 mili
First Input Delay detik
2 Mobile Peforma First Contentful 1.1 detik 100
Paint
Speed Index 1.6 detik
Time to 2.0 detik
Interactive
First Meaningful 1.1 detik
Paint
First CPU Idle 2.0 detik
Max Potential 720 mili
First Input Delay detik