~ We are changing the world with technology. ~

Matt Mullenweg

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #7: Push Notification Expenses

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #7: Push Notification Expenses

1343 Dilihat

Pendahuluan

Dalam setiap kegiatan berwirausaha pasti terdapat biaya biaya yang harus dikeluarkan untuk menjalankan operasional dari usaha tersebut, maka dalam aplikasi ini, kita tidak hanya akan mencatat transaksi yang masuk tapi juga memiliki fitur untuk mencatat pengeluaran yang telah dikeluarkan.

Adapun schema yang diinginkan adalah setiap user dapat melakukan request untuk setiap keperluan / biaya yang dibutuhkannya dan finance memiliki peran untuk menyetujui/menolak permintaan tersebut disertai dengan alasan sebagai feedback kepada user yang melakukan permintaan.

Pada fitur ini, selain berinteraksi dengan proses manipulasi database, juga kita akan belajar hal baru yakni push notifications secara real time. Jadi ketika user melakukan permintaan, maka secara otomatis notifikasi tersebut akan tampil pada user terkait tanpa harus melakukan reload browser.

Baca Juga: Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #6: Role & User Permissions

Manage Request Lists

Module ini akan membahas bagaimana membuat fitur untuk menampilkan data request yang telah dilakukan, dimana setiap kurir/admin hanya akan melihat data request-nya sendiri terkecuali finance dan superadmin. Sebelum melangkah lebih jauh, maka kita perlu menambahkan dua buah field kedalam table expanses, pada command line jalankan command:

php artisan make:migration add_field_status_to_expenses_table

Buka file migration tersebut dan modifikasi menjadi:

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class AddFieldStatusToExpensesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('expenses', function (Blueprint $table) {
            $table->char('status', 1)->comment('0:open, 1: approved, 2: canceled')->after('user_id')->nullable();
            $table->string('reason')->nullable()->after('status');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('expenses', function (Blueprint $table) {
            $table->dropColumn('status', 1);
            $table->dropColumn('reason');
        });
    }
}

Penjelasan: Code diatas akan menambahkan dua buah field, pertama status dengan tipe char dan yang kedua adalah reason untuk menampung alasan penolakan dari permintaan user.

Kemudian jalankan command:

php artisan migrate

Masih pada command line, buat controller dengan command:

php artisan make:controller API/ExpensesController

Kemudian buat juga resources collection:

php artisan make:resource ExpenseCollection

Buka file ExpenseCollection.php yang berada di dalam folder App/Http/Resources dan modifikasi menjadi:

<?php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\ResourceCollection;

class ExpenseCollection extends ResourceCollection
{
    /**
     * Transform the resource collection into an array.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function toArray($request)
    {
        return [
            'data' => $this->collection
        ];
    }
}

Saatnya kita mengerjakan API untuk menampilkan data expenses, buka file ExpensesController.php dan tambahkan method:

public function index()
{
    $user = request()->user(); //AMBIL DATA USER YANG SEDANG LOGIN
    $expenses = Expense::with(['user'])->orderBy('created_at', 'DESC'); //GET DATA EXPENSES YANG DIURUTKAN BERDASARKAN DATA TERBARU BESERTA SEBUAH EAGER LOADING UNTUK MENGAMBIL SIAPA PEMILIK DATA TERSEBUT

    //APABILA ADA PENCARIAN
    if (request()->q != '') {
        //MAKA AMBIL DATA BERDASARKAN PENCARIAN YANG DILAKUKAN
        $expenses = $expenses->where('description', 'LIKE', '%' . request()->q . '%');
    }

    //JIKA ROLE USER YANG LOGIN ADALAH 1 (ADMIN) & 3 (KURIR), MAKA AMBIL DATA KHUSUS DATA MEREKA SAJA
    if (in_array($user->role, [1, 3])) {
        $expenses = $expenses->where('user_id', $user->id);
    }
    return (new ExpenseCollection($expenses->paginate(10)));
}

Masih dengan file yang sama, tambahkan use statement:

use App\Http\Resources\ExpenseCollection;
use App\Expense;

Selanjutnya adalah membuat routing untuk API-nya, buka file routes/api.php dan tambahkan route dibawah ini:

Route::resource('expenses', 'API\ExpensesController')->except(['create', 'show']);

Sebelum berpindah pada sisi client, buka file app/Expense.php dan modifikasi menjadi:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Expense extends Model
{
    protected $guarded = [];

    public function user()
    {
        return $this->belongsTo(User::class);
    }
}

Satu hal lagi, agar nama user dimulai dengan huruf kapital maka kita perlu membuat Accessor. Buat file app/User.php dan tambahkan method:

public function getNameAttribute($value)
{
    return ucfirst($value);
}

API sudah selesai, maka saatnya untuk membuat halaman yang akan menggunakan API tersebut, buka file resources/js/router.js dan tambahkan route berikut:

{
    path: '/expenses',
    component: IndexExpenses,
    meta: { requiresAuth: true },
    children: [
        {
            path: '',
            name: 'expenses.data',
            component: DataExpenses,
            meta: { title: 'Manage Expenses' }
        }
    ]
}

Pada file yang sama tambahkan line berikut pada bagian import statement:

import IndexExpenses from './pages/expenses/Index.vue'
import DataExpenses from './pages/expenses/Expenses.vue'

Kemudian buat file Index.vue di dalam folder /pages/expenses dan tambahkan code:

<template>
    <div class="container">
        <section class="content-header">
            <h1>
                Manage Expenses
            </h1>
            <breadcrumb></breadcrumb>
        </section>

        <section class="content">
            <div class="row">
                <router-view></router-view>
            </div>
        </section>
    </div>
</template>
<script>
    import Breadcrumb from '../../components/Breadcrumb.vue'
    export default {
        name: 'IndexExpenses',
        components: {
            'breadcrumb': Breadcrumb
        }
    }
</script>

Note: Tidak ada yang perlu dijelaskan karena sama dengna artikel sebelumnya.

Lalu file selanjutnya adalah Expenses.vue didalam folder yang sama.

<template>
    <div class="col-md-12">
        <div class="panel">
            <div class="panel-heading">
                <router-link :to="{ name: 'expenses.create' }" class="btn btn-primary btn-sm btn-flat">Tambah</router-link>
                <div class="pull-right">
                    <input type="text" class="form-control" placeholder="Cari..." v-model="search">
                </div>
            </div>
            <div class="panel-body">
              
              	<!-- TABLE INI AKAN MENAMPILKAN DATA EXPENSES -->
                <b-table striped hover bordered :items="expenses.data" :fields="fields" show-empty>
                    <template slot="status" slot-scope="row">
                        <span class="label label-success" v-if="row.item.status == 1">Diterima</span>
                        <span class="label label-warning" v-else-if="row.item.status == 0">Diproses</span>
                        <span class="label label-default" v-else>Ditolak</span>
                    </template>
                    <template slot="user" slot-scope="row">
                        {{ row.item.user.name }}
                    </template>
                    <template slot="reason" slot-scope="row">
                        {{ row.item.reason == '' ? '-':row.item.reason }}
                    </template>
                    <template slot="actions" slot-scope="row">
                        <router-link :to="{ name: 'expenses.edit', params: {id: row.item.id} }" class="btn btn-warning btn-sm" v-if="row.item.status == 0"><i class="fa fa-pencil"></i></router-link>
                        <router-link :to="{ name: 'expenses.view', params: {id: row.item.id} }" class="btn btn-info btn-sm"><i class="fa fa-eye"></i></router-link>
                        <button class="btn btn-danger btn-sm" @click="deleteExpenses(row.item.id)" v-if="row.item.status == 0"><i class="fa fa-trash"></i></button>
                    </template>
                </b-table>
                <!-- TABLE INI AKAN MENAMPILKAN DATA EXPENSES -->

                <div class="row">
                  	<!-- BAGIAN INI AKAN MENAMPILKAN INFORMASI DATA DAN PAGINATION -->
                    <div class="col-md-6">
                        <p v-if="expenses.data"><i class="fa fa-bars"></i> {{ expenses.data.length }} item dari {{ expenses.meta.total }} total data</p>
                    </div>
                    <div class="col-md-6">
                        <div class="pull-right">
                            <b-pagination
                                v-model="page"
                                :total-rows="expenses.meta.total"
                                :per-page="expenses.meta.per_page"
                                aria-controls="expenses"
                                v-if="expenses.data && expenses.data.length > 0"
                                ></b-pagination>
                        </div>
                    </div>
                    <!-- BAGIAN INI AKAN MENAMPILKAN INFORMASI DATA DAN PAGINATION -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'

export default {
    name: 'DataExpenses',
    created() {
        this.getExpenses() //KETIKA HALAMAN DI-LOAD MAKA FUNGSI INI AKAN DIJALANKAN
    },
    data() {
        return {
            //UNTUK FIELD TABLE DIATAS YANG AKAN DITAMPILKAN
            fields: [
                { key: 'description', label: 'Permintaan' },
                { key: 'price', label: 'Biaya' },
                { key: 'note', label: 'Catatan' },
                { key: 'user', label: 'Kurir/Admin' },
                { key: 'status', label: 'Status' },
                { key: 'reason', label: 'Alasan' },
                { key: 'actions', label: 'Aksi' }
            ],
            search: '' //VARIABLE UNTUK SEARCH
        }
    },
    computed: {
        ...mapState('expenses', {
            expenses: state => state.expenses //AMBIL STATE DARI MODULE EXPENSES YANG AKAN DIBUAT KEMUDIAN
        }),
        //AMBIL DAN MODIFIKASI STATE PAGE JIKA TERJADI PERUBAHAN
        page: {
            get() {
                return this.$store.state.expenses.page
            },
            set(val) {
                this.$store.commit('expenses/SET_PAGE', val)
            }
        }
    },
    watch: {
        //KETIKA TERJADI PERUBAHAN VALUE STATE PAGE 
        page() {
            this.getExpenses() //MAKA JALANKAN FUNGSI INI
        },
        //KETIKA TERJADI PERUBAHAN VALUE VARIABLE SEARCH 
        search() {
            this.getExpenses(this.search) //MAKA JALANKAN FUNGSI INI DGN MENGIRIMKAN VALUE DARI SEARCH
        }
    },
    methods: {
        ...mapActions('expenses', ['getExpenses', 'removeExpenses']), //DEFINISIKAN ACTIONS DARI MODULE EXPENSES
        //FUNGSI INI SAMA DENGAN MODULE SEBELUMNYA UNTUK MENAMPILKAN ALERT KETIKA MENGHAPUS DATA
        deleteExpenses(id) {
            this.$swal({
                title: 'Kamu Yakin?',
                text: "Tindakan ini akan menghapus secara permanent!",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Iya, Lanjutkan!'
            }).then((result) => {
                if (result.value) {
                    //JIKA DISETUJUI MAKA FUNGSI INI DIJALANKAN
                    this.removeExpenses(id)
                }
            })
        }
    }
}
</script>

Untuk mengelola request ke backend, maka kita memerlukan bantuan vuex, buat file expenses.jsdi dalam folder resources/js/stores dan tambahkan code:

import $axios from '../api.js'

const state = () => ({
    expenses: [], //UNTUK MENAMPUNG DATA EXPENSES
    page: 1 //STATE UNTUK HALAMAN YANG SEDANG AKTIF
})

const mutations = {
    //ASSIGN DATA EXPENSES YANG DIDAPATKAN KE DALAM STATE
    ASSIGN_DATA(state, payload) {
        state.expenses = payload
    },
    //SET PAGE YANG AKTIF KE DALAM STATE PAGE
    SET_PAGE(state, payload) {
        state.page = payload
    }
}

const actions = {
    //FUNGSI UNTUK MENG-HANDLE REQUEST KE BACKEND
    getExpenses({ commit, state }, payload) {
        let search = typeof payload != 'undefined' ? payload:''
        return new Promise((resolve, reject) => {
            //KIRIM PERMINTAAN KE BACKEND 
            $axios.get(`/expenses?page=${state.page}&q=${search}`)
            .then((response) => {
                //KETIKA RESPONSE NYA DIDAPATKAN, MAKA ASSIGN DATA TERSEBUT KE STATE
                commit('ASSIGN_DATA', response.data)
                resolve(response.data)
            })
        })
    }
}

export default {
    namespaced: true,
    state,
    actions,
    mutations
}

Agar module vuex diatas dapat digunakan, daftar terlebih dahulu dengan membuka file store.js dan tambahkan bagian berikut:

modules: {
    auth,
    outlet,
    courier,
    product,
    user,
    expenses //TAMBAHKAN BAGIAN INI
},

Jangan lupa di import pada bagian import statement:

import expenses from './stores/expenses.js'

Terakhir dari bagian ini, buka file Header.vue untuk menambahkan link pada menu navigasi agar lebih mudah untuk mengaksesnya melakukan menu navigasi. Tambahkan code pada bagian tag html menu-nya:

<li><router-link :to="{ name: 'expenses.data' }">Expenses</router-link></li>

Add New Expenses

Hal yang menarik akan kita mulai dari module ini, dimana ketika admin/kurir menambahkan data permintaan biaya operasional maka secara otomatis akan mengirimkan notifikasi ke bagian finance dan superadmin. Pertama kita buat dulu form input-nya, buat file Add.vue di dalam folder /pages/expenses dan tambahkan code:

<template>
    <div class="col-md-12">
        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">Add New Expenses</h3>
            </div>
            <div class="panel-body">
              	<!-- TAMBAHKAN REF PADA CUSTOM TAG INI -->
                <expenses-form ref="formExpense"></expenses-form>
              
                <div class="form-group">
                    <button class="btn btn-primary btn-sm btn-flat" @click.prevent="submit">
                        <i class="fa fa-save"></i> Add New
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import FormExpenses from './Form.vue'
    export default {
        name: 'AddExpenses',
        methods: {
            //KETIKA TOMBOL ADD NEW DITEKAN MAKA FUNGSI INI AKAN DIJALANKAN
            submit() {
                //FUNGSI INI AKAN MEMICU METHOD YANG BERADA DIDALAM FILE FORM.VUE
                //DENGAN MEMANFAATKAN $refs MAKAN KITA DAPAT MENGAKSES PROPERTY YANG ADA DI FILE LAINNYA
                this.$refs.formExpense.submit()
            }
        },
        components: {
            'expenses-form': FormExpenses
        }
    }
</script>

Kemudian buat file Form.vue di dalam folder yang sama dan tambahkan code:

<template>
    <div>
        <div class="form-group" :class="{ 'has-error': errors.description }">
            <label for="">Permintaan</label>
            <input type="text" class="form-control" v-model="expenses.description">
            <p class="text-danger" v-if="errors.description">{{ errors.description[0] }}</p>
        </div>
        <div class="form-group" :class="{ 'has-error': errors.price }">
            <label for="">Biaya</label>
            <input type="number" class="form-control" v-model="expenses.price">
            <p class="text-danger" v-if="errors.price">{{ errors.price[0] }}</p>
        </div>
        <div class="form-group" :class="{ 'has-error': errors.note }">
            <label for="">Catatan</label>
            <textarea cols="5" rows="5" class="form-control" v-model="expenses.note"></textarea>
            <p class="text-danger" v-if="errors.note">{{ errors.note[0] }}</p>
        </div>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
    name: 'FormExpenses',
    created() {
        //KARENA FILE INI KITA BUAT REUSABLE, BISA DIGUNAKAN UNTUK ADD DAN EDIT
        //MAKA KETIKA COMPONENT INI DI-LOAD DARI HALAMAN EDIT EXPANSES
        if (this.$route.name == 'expenses.edit') {
            //FUNGSI UNTUK MENGAMBIL SINGLE DATA YANG AKAN DIEDIT DIJALANKAN
            //ADAPUN FUNGSINYA AKAN KITA BUAT SAAT MEMBAHAS FITUR EDIT
            this.editExpenses(this.$route.params.id).then((res) => {
                //RESPONSENYA KITA MASUKKAN KE DALAM VARIABLE YANG TELAH DIDEFINISIKAN
                this.expenses = {
                    description: res.data.description,
                    price: res.data.price,
                    note: res.data.note
                }
            })
        }
    },
    data() {
        return {
            expenses: {
                description: '',
                price: '',
                note: ''
            }
        }
    },
    computed: {
        ...mapState(['errors']) //MENGAMBIL STATE ERROR
    },
    methods: {
        //MENDEFINISIKAN ACTION DARI MODULE EXPENSES VUEX
        ...mapActions('expenses', ['submitExpense', 'editExpenses', 'updateExpenses']),
        submit() {
            //KETIKA FUNGSI INI BERJALAN (NOTE: DI PICU DARI FILE ADD TADI)
            //DI CEK DARI HALAMAN MANA
            if (this.$route.name == 'expenses.edit') {
                //JIKA DARI EDIT, MAKA KITA ASSIGN ID YANG AKAN DI EDIT KE DALAM 
                //OBJECT VARIABLE EXPENSES
                let data = Object.assign({id: this.$route.params.id}, this.expenses)
                //KEMUDIAN KIRIM PERMINTAAN UPDATE DATA KE BACKEND
                this.updateExpenses(data).then(() => this.$router.push({name: 'expenses.data'}))
            } else {
                //JIKA DARI HALAMAN ADD NEW EXPENSES
                //MAKA LANGSUNG MENGIRIMKAN PERMINTAAN UNTUK MENAMBAHKAN DATA
                this.submitExpense(this.expenses).then(() => this.$router.push({ name: 'expenses.data' }))
            }
        }
    },
    destroyed() {
        //KETIKA COMPONENT DITINGGALKAN, MAKA VARIABLENYA DI KOSONGKAN
        this.expenses = {
            description: '',
            price: '',
            note: ''
        }
    }
}
</script>

Karena fungsi untuk mengambil single data yang akan di-edit dan di-update telah disinggung diatas, maka kita definisikan juga fungsinya sekalian agar tidak terjadi error ketika halaman add new dibuka. Buka file stores/expenses.js dan tambahkan code berikut pada bagian actions:

submitExpense({ dispatch, commit }, payload) {
    return new Promise((resolve, reject) => {
        //KIRIM PERMINTAAN UNTUK MENAMBAHKAN DATA DENGAN METHOD POST
        $axios.post(`/expenses`, payload)
        .then((response) => {
            //AMBIL DATA YANG BARU
            dispatch('getExpenses').then(() => {
                resolve(response.data)
            })
        })
        .catch((error) => {
            //JIKA VALIDASI ERROR
            if (error.response.status == 422) {
                //MAKA ERRORNYA DI ASSIGN KE STATE ERRORS
                commit('SET_ERRORS', error.response.data.errors, { root: true })
            }
        })
    })
},
//FUNGSI INI UNTUK MENGAMBIL SINGLE DATA
editExpenses({ commit }, payload) {
    return new Promise((resolve, reject) => {
        //MENGIRIMKAN PERMINTAAN KE BACKEND UNTUK MENGAMBIL DATA BERDASARKAN ID
        $axios.get(`/expenses/${payload}/edit`)
        .then((response) => {
            resolve(response.data)
        })
    })
},
//FUNGSI INI UNTUK MENGUPDATE DATA
updateExpenses({ commit }, payload) {
    return new Promise((resolve, reject) => {
        //MENGIRIMKAN PERMINTAAN KE SERVER UNTUK MENGUBAH DATA BERDASARKAN ID
        $axios.put(`/expenses/${payload.id}`, payload)
        .then((response) => {
            resolve(response.data)
        })
    })
},

Ets jangan buru-buru, kita belum mendefinisikan route untuk halaman add data. Buka file router.js dan tambahkan code ini di dalam children dari path /expenses

{
    path: 'add',
    name: 'expenses.create',
    component: CreateExpenses,
    meta: { title: 'Add New Expenses' }
},

Pastikan kita juga menambahkan bagian ini pada import statement di dalam file yang sama:

import CreateExpenses from './pages/expenses/Add.vue'

Dari sisi client sudah selesai, saatnya untuk berpindah pada sisi backend. Buka file ExpensesController.php dan tambahkan method:

public function store(Request $request)
{
    //VALIDASI DATA YANG DIKIRIM
    $this->validate($request, [
        'description' => 'required|string|max:150',
        'price' => 'required|integer',
        'note' => 'nullable|string'
    ]);

    $user = $request->user(); //GET USER YANG SEDANG LOGIN
    //JIKA USER YANG SEDANG LOGIN ROLENYA SUPERADMIN/FINANCE
    //MAKA SECARA OTOMATIS DI APPROVE, SELAIN ITU STATUSNYA 0 BERARTI HARUS
    //MENUNGGU PERSETUJUAN
    $status = $user->role == 0 || $user->role == 2 ? 1:0; 
    //TAMBAHKAN USER_ID DAN STATUS KE DALAM REQUEST
    $request->request->add([
        'user_id' => $user->id,
        'status' => $status
    ]);

    //KEMUDIAN BUAT RECORD BARU KE DALAM DATABASE
    $expenses = Expense::create($request->all());

    //GET USER YANG ROLE-NYA SUPERADMIN DAN FINANCE
    //KENAPA? KARENA HANYA ROLE ITULAH YANG AKAN MENDAPATKAN NOTIFIKASI
    $users = User::whereIn('role', [0, 2])->get();
    //KIRIM NOTIFIKASINYA MENGGUNAKAN FACADE NOTIFICATION
    Notification::send($users, new ExpensesNotification($expenses, $user));

    return response()->json(['status' => 'success']);
}

Masih dengan file yang sama, tambahkan use statement:

use Illuminate\Support\Facades\Notification;
use App\Notifications\ExpensesNotification;
use App\User;

Tugas kita selanjutnya adalah men-generate file ExpensesNotification.php, pada command line jalankan command:

php artisan make:notification ExpensesNotification

Buka file tersebut yang berada di dalam folder app/Notifications dan modifikasi menjadi:

<?php

namespace App\Notifications;

use Illuminate\Bus\Queueable;
use Illuminate\Notifications\Notification;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Messages\MailMessage;
use Illuminate\Notifications\Messages\BroadcastMessage;


class ExpensesNotification extends Notification implements ShouldQueue
{
    use Queueable;

		//DEFINSIKAN GLOBAL VARIABLE
    protected $expenses;
    protected $user;
    public function __construct($expenses, $user)
    {
        //ASSIGN DATA YANG DITERIMA KE DALAM GLOBAL VARIABLE
        $this->expenses = $expenses;
        $this->user = $user;
    }

    /**
     * Get the notification's delivery channels.
     *
     * @param  mixed  $notifiable
     * @return array
     */
    public function via($notifiable)
    {
        //JADI KITA MENGGUNAKAN DUA METHOD, SIMPAN KE DATABASE DAN BROADCAST KE PUSHER
        //PUSHER ADALAH PIHAK KETIGA YANG AKAN DIGUNAKAN UNTUK REALTIME NOTIFICATION
        return ['database', 'broadcast'];
    }

    /**
     * Get the array representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return array
     */
  
    //FORM DATA YANG DISIMPAN KE DALAM DATABASE
    public function toDatabase($notifiable)
    {
        return [
            'sender_id' => $this->user->id,
            'sender_name' => $this->user->name,
            'expenses' => $this->expenses
        ];
    }

    //FORM DATA YANG AKAN DI BROADCAST
    public function toBroadcast($notifiable)
    {
        return new BroadcastMessage([
            'sender_id' => $this->user->id,
            'sender_name' => $this->user->name,
            'expenses' => $this->expenses
        ]);
    }
  
    //SEBENARNYA JIKA TIDAK ADA PERBEDAAN FORM DATA, KITA BISA LANGSUNG MENGGUNAKAN SATU METHOD SAJA YAKNI toArray()
}

Agar data broadcast hanya dapat diakses oleh user yang sudah login saja, maka buka file app/Providers/BroadcastServiceProvider dan modifikasi code ini:

Broadcast::routes();

//MEJADI

Broadcast::routes(['middleware' => 'auth:api']);

Kemudian buka file config/app.php dan uncomment code ini:

App\Providers\BroadcastServiceProvider::class,

Adapun konfigurasi sebelumnya bahwa kita juga akan menyimpan notifikasi yang di-broadcast ke dalam database, maka generate migration-nya terlebih dahulu dengan command:

php artisan notifications:table
php artisan migrate

Register an Account In Pusher

Sebelum melanjutkan codingan kita, hal yang harus dilakukan adalah membuat akun di Pusher karena kita membutuhkan pihak ketiga ini untuk membuat realtime notifications. Ada beberapa provider selain Pusher, tapi pada seri ini kita akan menggunakan provider tersebut.

  1. Buka halaman Registrasi.
  2. Kemudian signup akun baru / bisa menggunakan signup via sosmed/github.
  3. Kemudian login ke halaman dashboardnya.

Biasanya secara otomatis akan ada popup untuk membuat app, tapi jika popup-nya tidak auto, klik menu create new app pada sidebar menu. Kemudian masukkan nama app yang kamu inginkan, disini saya menggunakan name "Daengweb" dan pilih cluster-nya dimana saya memilih ap1 (Singpore) karena paling dekat. Terakhir klik tombol Create my app.

Secara otomatis kamu akan diarahkan ke halaman channel yang telah kamu buat dan jika tidak bisa dengan mengunjungi menu Channels apps pada sidebar menu. Setelah itu, kunjungi tab Getting started dan pada sisi kanan kita akan melihat channel credentials seperti berikut:

PUSHER_APP_ID=831xxx
PUSHER_APP_KEY=f6526f8fxxxxxxx
PUSHER_APP_SECRET=477d72e8exxxxxxx

Buka file .env dan masukkan key tersebut pada code dibawah:

BROADCAST_DRIVER=pusher

PUSHER_APP_ID=masukkan id kamu disini
PUSHER_APP_KEY=masukkan key kamu disini
PUSHER_APP_SECRET=masukkan secret kamu disini
PUSHER_APP_CLUSTER=ap1

Note: Semua variable diatas sudah tersedia, kita hanya perlu mengubah value-nya saja.

Create Listners Broadcasting

Backend telah menyelesaikan tugasnya untuk mengirimkan broadcast, maka selanjutnya kita akan membuat fungsi dari sisi client untuk meng-handle setiap ada broadcast yang diterima dari Pusher. Buka file app.js dan tambahkan methods:

computed: {
    ...mapGetters(['isAuth']),
    ...mapState(['token']), //GET TOKEN
    ...mapState('user', {
        user_authenticated: state => state.authenticated //MENGAMBIL STATE USER YANG SEDANG LOGIN
    })
},
methods: {
    ...mapActions('user', ['getUserLogin']),
    ...mapActions('notification', ['getNotifications']), //DEFINISIKAN FUNGSI UNTUK MENGAMBIL NOTIFIKASI DARI TABLE NOTIFICATIONS
    ...mapActions('expenses', ['getExpenses']), //FUNGSI UNTUK MENGAMBIL EXPENSES YANG BARU
      //METHOD INI UNTUK MENGISIASI LISTER MENGGUNAKAN LARAVEL ECHO
      initialLister() {
        //JIKA USER SUDAH LOGIN
        if (this.isAuth) {
            //MAKA INISIASI FUNGSI BROADCASTER DENGAN KONFIGURASI BERIKUT
            window.Echo = new Echo({
                broadcaster: 'pusher',
                key: process.env.MIX_PUSHER_APP_KEY, //VALUENYA DI AMBIL DARI FILE .ENV
                cluster: process.env.MIX_PUSHER_APP_CLUSTER,
                encrypted: false,
                auth: {
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    },
                },
            });

            if (typeof this.user_authenticated.id != 'undefined') {
                //KEMUDIAN KITA MENGAKSES CHANNEL BROADCAST SECARA PRIVATE
                window.Echo.private(`App.User.${this.user_authenticated.id}`)
                .notification(() => {
                    //APABILA DITEMUKAN, MAKA KITA MENJALANKAN KEDUA FUNGSI INI
                    //UNTUK MENGAMBIL DATA TERBARU
                    this.getNotifications()
                    this.getExpenses()
                })
            }
        }
    }
},
watch: {
    //KITA WATCH KETIKA VALUE TOKEN BERUBAH, MAKA 
    token() {
        this.initialLister() //KITA JALANKAN FUNGSI UNTUK MENGINISIASI LAGI
    },
    //KETIKA VALUE USER YANG SEDANG LOGIN BERUBAH
    user_authenticated() {
        this.initialLister() //KITA JALANKAN LAGI
    }
},
created() {
    if (this.isAuth) {
        this.getUserLogin()
        //TAMBAHKAN BAGIAN INI KETIKA COMPONENT DILOAD
        this.initialLister()
        this.getNotifications()
    }
}

Note: App.User.${this.user_authenticated.id} adalah channel yang dapat ditemukan pada file routes/channel.php, fungsinya untuk memastikan bahwa user yang login benar karena kita menggunakan private channel dimana hanya user yang memiliki akses yang dapat mengambil data broadcast.

Masih dengan file yang sama, pada bagian import statement tambahkan code berikut:

import { mapActions, mapGetters, mapState } from 'vuex'
import Echo from 'laravel-echo'
import Pusher from 'pusher-js'

Pada command line, install package ini:

composer require pusher/pusher-php-server
npm install --save laravel-echo pusher-js

Sebenarnya sampai pada tahap ini kita telah berhasil menyelesaikan persiapan untuk mengawasi broadcast yang dikirimkan oleh Laravel ke Pusher dan client sudah dapat mendeteksi ketika terdapat data yang baru pada channel Pusher. Akan tetapi terdapat beberapa bagian yang error karena module Vuex-nya belum kita buat, maka tugas selanjutnya akan dibahas pada sub-chapter berikutnya.

Show Notifications

Metode yang digunakan adalah via broadcast dan database, maka listening channel hanya kita gunakan untuk mengetahui apakah ada data yang diterima dari channel yang sedang di awasi atau tidak, dan dari informasi tersebut digunakan untuk melakukan request ke server guna mengambil data notifikasi yang telah disimpan ke database. Jika kita lihat codingan sebelumnya, kita melakukan dua buah request yakni menjalankan method getNotifications() dan getExpenses(), namun method kedua sudah dibuat sebelumnya dan diletakkan ke dalam module expenses dari Vuex.

Tugas kita kali ini adalah membuat module notifications guna menampung actions getNotifications(). Buat file notification.js dan tempatkan di dalam folder resources/js/stores.

import $axios from '../api.js'

const state = () => ({
    notifications: [] //MENAMPUNG DATA NOTIFIKASI
})

const mutations = {
    //ASSIGN DATA NOTIFIKASI KE DALAM STATE NOTIFICATIONS
    ASSIGN_DATA(state, payload) {
        state.notifications = payload
    }
}

const actions = {
    getNotifications({ commit }) {
        return new Promise((resolve, reject) => {
            //REQUEST KE SERVER UNTUK MENGAMBIL NOTIFIKASI
            $axios.get(`/notification`)
            .then((response) => {
                //DATA YANG DITERIMA DI COMMIT KE MUTATIONS ASSING_DATA
                commit('ASSIGN_DATA', response.data.data)
                resolve(response.data)
            })
        })
    },
    readNotification({ dispatch }, payload) {
        return new Promise((resolve, reject) => {
            //UNTUK MENGUPDATE DATA NOTIFIKASI BAHWA NOTIF TERSEBUT SUDAH DIBACA
            $axios.post(`/notification`, payload)
            .then((response) => {
                //AMBIL DATA NOTIFIKASI TERBARU
                dispatch('getNotifications').then(() => resolve(response.data))
            })
        })   
    }
}

export default {
    namespaced: true,
    state,
    actions,
    mutations
}

Agar file diatas dapat digunakan, daftarkan ke dalam file store.js:

modules: {
    auth,
    outlet,
    courier,
    product,
    user,
    expenses,
    notification //TAMBAHKAN BAGIAN INI
},

Jangan lupa import pada bagian import statement:

import notification from './stores/notification.js'

Pindah ke sisi Backend, buat sebuah controller baru dengan command:

php artisan make:controller API/NotificationController

Kemudian buka file NotificationController.php dan modifikasi menjadi:

<?php

namespace App\Http\Controllers\API;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class NotificationController extends Controller
{
    public function index()
    {
        $user = request()->user(); //AMBIL USER YANG SEDANG LOGIN
        //KEMUDIAN YANG DI READ ADALAH HANYA NOTIFIKASI YANG STATUSNYA BELUM DIREAD
        //SECARA LANGSUNG KITA DAPAT MENGAMBIL DATA NYA MELALUI USER DENGAN MENGAKSES PROPERTY unreadNotifications.
        return response()->json(['status' => 'success', 'data' => $user->unreadNotifications]);
    }

    public function store(Request $request)
    {
        $user = $request->user(); //AMBIL USER YANG SEDANG LOGIN
        //EDIT RECORD NOTIFIKASI BERDASARKAN ID YANG DITERIMA
        //NOTIFIKASI YANG SUDAH/BELUM DIREAD DITANDAI DENGAN read_at YANG MASIH NULL
        $user->unreadNotifications()->where('id', $request->id)->update(['read_at' => now()]);
        return response()->json(['status' => 'success']);
    }
}

Jangan lupa definisikan routing-nya, buka file routes/api.php dan tambahkan:

Route::resource('notification', 'API\NotificationController')->except(['create', 'destroy']);

Kembali lagi ke sisi Client, kita akan meng-handle data notifikasi tersebut dengan menampilkannya pada Header navbar. Buka file components/Header.vue dan modifikasi beberapa bagian berikut:

<li class="dropdown messages-menu">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <i class="fa fa-bell-o"></i>
        
        <!-- FUNGSI INI UNTUK MENGHITUNG JUMLAH DATA NOTIFIKASI YANG ADA -->
        <span class="label label-success">{{ notifications.length }}</span>
    </a>
    <ul class="dropdown-menu">
        <li class="header">You have {{ notifications.length }} messages</li>
        <li>
            <ul class="menu" v-if="notifications.length > 0">
                
                <!-- KITA MELAKUKAN LOOPING TERHADAP DATA NOTIFIKASI YANG DISIMPAN KE DALAM STATE NOTIFICATIONS -->
                <li v-for="(row, index) in notifications" :key="index">
                    <a href="javascript:void(0)" @click="readNotif(row)">
                        <div class="pull-left">
                            <img src="https://via.placeholder.com/160" class="img-circle" alt="User Image">
                        </div>
                        <h4>
                            <!-- TAMPILKAN NAMA PENGIRIM NOTIFIKASI -->
                            {{ row.data.sender_name }}
                            <!-- TAMPILKAN WAKTU NOTIFIKASI -->
                            <small><i class="fa fa-clock-o"></i> {{ row.created_at | formatDate }}</small>
                        </h4>
                        <!-- TAMPILKAN JENIS PERMINTAAN NOTIFIKASI -->
                        <p>{{ row.data.expenses.description.substr(0, 30) }}</p>
                    </a>
                </li>
            </ul>
        </li>
        <!-- <li class="footer"><a href="#">See All Messages</a></li> -->
    </ul>
</li>

Note: Adapun icon informasi lainnya kita disable saja, boleh dihapus / di-comment.

Masih dengan file yang sama, bergeser pada bagian javascript-nya, tambahkan code berikut:

computed: {
    ...mapState('user', {
        authenticated: state => state.authenticated
    }),
    
    //CUKUP TAMBAHKAN BAGIAN INI
    ...mapState('notification', {
        notifications: state => state.notifications //MENGAMBIL STATE NOTIFICATIONS
    })
},
//TAMBAHKAN JUGA BAGIAN INI
filters: {
    //UNTUK MENGUBAH FORMAT TANGGAL MENJADI TIME AGO
    formatDate(val) {
        return moment(new Date(val)).fromNow()
    }
},
methods: {
    ...mapActions('notification', ['readNotification']), //DEFINISIKAN FUNGSI UNTUK READ NOTIF
    
    //KETIKA NOTIFIKASI DI KLIK MAKA AKAN MENJALANKAN FUNGSI INI
    readNotif(row) {
        //MENGIRIMKAN REQUEST KE SERVER UNTUK MENANDAI BAHWA NOTIFIKASI TELAH DI BACA
        //KEMUDIAN SELANJUTNYA KITA REDIRECT KE HALAMAN VIEW EXPENSES
        this.readNotification({ id: row.id}).then(() => this.$router.push({ name: 'expenses.view', params: {id: row.data.expenses.id} }))
    },
    
    //[.. CODE SETELAHNYA ..]
}

Lagi lagi dengan file yang sama, tambahkan bagi ini pada import statement:

import { mapState, mapActions } from 'vuex'
import moment from 'moment'

Jangan lupa untuk meng-install momentJs

npm install moment --save

View Detail Expenses

Menampilkan detail expenses dimana terdapat fitur untuk menyetujui atau menolak permintaan tersebut akan menjadi tugas kita pada bagian ini. Buat file View.vue di dalam folder /pages/expenses dan tambahkan code:

<template>
    <div class="col-md-12">
        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">Detail Expenses</h3>
            </div>
            <div class="panel-body">
                <template>
                  	<!-- INFORMASI DETAIL EXPENSES -->
                    <dt>Permintaan Karyawan</dt>
                    <dd>- {{ description }}</dd>

                    <hr>
                    <dt>Biaya Yang Diperlukan</dt>
                    <dd>- Rp {{ price }}</dd>
                    <hr>

                    <dt>Catatan</dt>
                    <dd>- {{ note }}</dd>
                    <hr>

                    <dt>User/Kurir</dt>
                    <dd>- {{ user.name }}</dd>
                    <hr>

                    <dt>Status</dt>
                    <dd>
                        <span class="label label-success" v-if="status == 1">Diterima</span>
                        <span class="label label-warning" v-else-if="status == 0">Diproses</span>
                        <span class="label label-default" v-else>Ditolak</span>
                    </dd>
                    <hr>
                    <!-- INFORMASI DETAIL EXPENSES -->

                    <!-- JIKA STATUSNYA 2 = CANCEL, MAKA ALASANNYA DITAMPILKAN -->
                    <div v-if="status == 2">
                        <dt>Alasan Penolakan</dt>
                        <dd>- {{ reason }}</dd>
                        <hr>
                    </div>
                  
                    <!-- JIKA STATUS 0 = BARU ATAU BARU DAN formReason = false MAKA TOMBOL TOLAK DAN TERIMA DITAMPILKAN -->
                    <div class="pull-right" v-if="status == 0 || (status == 0 && !formReason)">
                        <!-- KETIKA TOMBOL INI DITEKAN MAKA AKAN MENGUBAH VALUE formReason JADI TRUE -->
                        <button class="btn btn-danger btn-sm" @click="formReason = true">Tolak</button>
                        <button class="btn btn-primary btn-sm" @click="accept">Terima</button>
                    </div>
                </template>

                <!-- JIKA formReason NILAINYA TRUE, MAKA FORM INI DITAMPILAKN UNTUK MENGISI ALASAN PENOLAKAN -->
                <div v-if="formReason">
                    <div class="form-group">
                        <label for="">Alasan Penolakan</label>
                        <input type="text" v-model="inputReason" class="form-control">
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary btn-sm pull-right" @click="cancelRequest">Respon Penolakan</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapActions } from 'vuex';
    export default {
        name: 'ViewEpenses',
        created() {
            //KETIKA COMPONENT INI DI-LOAD MAKA KITA MENGAMBIL SINGLE DATA YANG AKAN DI TAMPILKAN BERDASARKAN ID PADA URL
            this.editExpenses(this.$route.params.id).then((res) => {
                let row = res.data
                //ASSIGN SEMUA DATANYA KE DALAM VARIABLE YANG TELAH DIDEFINISIKAN
                this.description =  row.description
                this.price =  row.price
                this.note =  row.note
                this.status =  row.status
                this.reason =  row.reason
                this.user = row.user
            })
        },
        data() {
            return {
                description: '',
                price: '',
                note: '',
                status: '',
                reason: '',
                user: '',
                formReason: false,
                inputReason: ''
            }
        },
        methods: {
            ...mapActions('expenses', ['editExpenses', 'acceptExpenses', 'cancelExpenses']),
            //KETIKA TOMBOL TERIMA DITEKAN, MAKA AKAN MENJALANKAN FUNGSI accpet
            accept() {
                this.$swal({
                    title: 'Kamu Yakin?',
                    text: "Permintaan yang disetujui tidak dapat dikembalikan!",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Iya, Lanjutkan!'
                }).then((result) => {
                    if (result.value) {
                        //JIKA YES, MAKA KITA AKAN MENGIRIMKAN PERMINTAAN KE SERVER UNTUK MENYETUJUI PERMINTAAN TERSEBUT DAN REDIRECT KE HALAMAN LIST EXPENSES
                        this.acceptExpenses(this.$route.params.id).then(() => this.$router.push({ name: 'expenses.data' }))
                    }
                })
            },
          
            //KETIKA TOMBOL RESPON PENOLAK DITEKAN, MAKA FUNGSI INI AKAN DIJALANKAN
            cancelRequest() {
                this.$swal({
                    title: 'Kamu Yakin?',
                    text: "Permintaan yang ditolak tidak dapat dikembalikan!",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Iya, Lanjutkan!'
                }).then((result) => {
                    if (result.value) {
                        //JIKA IYA, MAKA KITA AKAN MENGIRIMKAN PERMINTAAN KE BACKEND UNTUK MENGUBAH STATUS EXPENSES MENJADI DITOLAK
                        this.cancelExpenses({id: this.$route.params.id, reason: this.inputReason}).then(() => {
                            this.formReason = false //FORMREASON DI SET KEMBALI JADI FALSE
                            this.$router.push({ name: 'expenses.data' }) //DAN REDIRECT KEMBALI KE HALAMAN LIST EXPENSES
                        })
                    }
                })
            }
        }
    }
</script>

Tugas selanjutnya adalah membuat actions pada module expenses.js, buka file tersebut dan tambahkan kedua method berikut pada bagian actions.

acceptExpenses({ commit }, payload) {
    return new Promise((resolve, reject) => {
        //KIRIM PERMINTAAN KE SERVER UNTUK MENGUBAH VALUE JADI ACCEPT
        $axios.post(`/expenses/accept`, { id: payload })
        .then((response) => {
            resolve(response.data)
        })
    })
},
cancelExpenses({ commit }, payload) {
    return new Promise((resolve, reject) => {
        //KIRIM PERMINTAAN KE SERVER UNTUK MENGUBAH VALUE JADI CANCEL
        $axios.post(`/expenses/cancel`, payload)
        .then((response) => {
            resolve(response.data)
        })
    })
}

Kemudian kita buat routing-nya dari sisi client, buka file router.js dan tambahkan code dibawah ini pada children dari expenses.

{
    path: 'view/:id',
    name: 'expenses.view',
    component: ViewExpenses,
    meta: { title: 'View Expenses' }
},

Jangan lupa tambahkan fungí untuk meng-import pada bagian import statement di dalam file router.js:

import ViewExpenses from './pages/expenses/View.vue'

Saatnya mengolah kembali dari sisi Backend, buka file ExpensesController.php dan tambahkan kedua method berikut:

public function accept(Request $request)
{
    $this->validate($request, ['id' => 'required|exists:expenses,id']); //VALIDASI DATA
    $expenses = Expense::with(['user'])->find($request->id); //AMBIL SINGLE DATA EXPENSES
    $expenses->update(['status' => 1]); //UBAH STATUSNYA JADI APPROVE
    Notification::send($expenses->user, new ExpensesNotification($expenses, $expenses->user)); //KIRIM NOTIFIKASI KE PEMBUAT REQUEST EXPENSES
    return response()->json(['status' => 'success']);
}

public function cancelRequest(Request $request)
{
    $this->validate($request, ['id' => 'required|exists:expenses,id', 'reason' => 'required|string']); //VALIDASI
    $expenses = Expense::with(['user'])->find($request->id); //AMBIL SINGLE DATA EXPENSES
    $expenses->update(['status' => 2, 'reason' => $request->reason]); //UBAH STATUS DAN TAMBAHKAN REASON
    Notification::send($expenses->user, new ExpensesNotification($expenses, $expenses->user)); //KIRIM NOTIFIKASI
    return response()->json(['status' => 'success']);
}

Terakhir buka file routes/api.php dan tambahkan kedua routing berikut:

Route::post('expenses/accept', 'API\[email protected]')->name('expenses.accept');
Route::post('expenses/cancel', 'API\[email protected]')->name('expenses.cancel');

Edit Data Expenses

Data Expenses hanya dapat di-edit apabila statusnya masih 0 (open) dan bagian ini sudah kita kerjakan pada sub-chapter Manage Request Lists (scroll ke atas), dimana kita menambahkan v-if="row.item.status == 0". Tugas kita disini adalah membuat halaman untuk menampilkan form edit data, buat file Edit.vue di dalam folder /pages/expenses dan tambahkan code:

<template>
    <div class="col-md-12">
        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">Edit Expenses</h3>
            </div>
            <div class="panel-body">
                <expenses-form ref="formExpense"></expenses-form>
                <div class="form-group">
                    <button class="btn btn-primary btn-sm btn-flat" @click.prevent="submit">
                        <i class="fa fa-save"></i> Update
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import FormExpenses from './Form.vue'
    export default {
        name: 'EditExpenses',
        methods: {
            submit() {
                this.$refs.formExpense.submit()
            }
        },
        components: {
            'expenses-form': FormExpenses
        }
    }
</script>

Note: Disini kita tidak lagi membuat fungsi, hanya sebuah parent yang me-load file Form.vue karena fungsi-nya sudah dibuat di dalam file tersebut.

Kemudian definisikan routing-nya, buka file router.js dan tambahkan code berikut pada children expenses:

{
    path: 'edit/:id',
    name: 'expenses.edit',
    component: EditExpenses,
    meta: { title: 'Edit Expenses' }
},

Jangan lupa pada bagian import statement tambahkan code:

import EditExpenses from './pages/expenses/Edit.vue'

Adapun actions-nya juga sudah kita buat pada sub-chapter Add New Expenses (scroll ke atas), sehingga yang perlu kita lakukan hanyalah membuat API-nya saja. Buka file ExpensesController dan tambahkan method:

public function edit($id)
{
    $expenses = Expense::with(['user'])->find($id); //AMBIL DATA BERDASARKAN ID
    return response()->json(['status' => 'success', 'data' => $expenses]);
}

public function update(Request $request, $id)
{
    //VALIDASI
    $this->validate($request, [
        'description' => 'required|string|max:150',
        'price' => 'required|integer',
        'note' => 'nullable|string'
    ]);
    $expenses = Expense::find($id); //AMBIL DATA BERDASARKAN ID
    $expenses->update($request->except('id')); //UPDATE DATA TERSEBUT
    return response()->json(['status' => 'success']);
}

Delete Data Expenses

Pada sub-chapter ini menjadi lebih ringan lagi karena fungsi dari sisi client-nya sudah dikerjakan pada bagian Manage Request Lists, sehingga tugas kita hanya melengkapi actions pada module expenses untuk melakukan request ke backend. Buka file expenses.js dan tambahkan code berikut pada bagian actions.

removeExpenses({ dispatch }, payload) {
    return new Promise((resolve, reject) => {
        //KIRIM PERMINTAAN UNTUK MENGHAPUS BERDASARKAN ID
        $axios.delete(`/expenses/${payload}`)
        .then((response) => {
            //AMBIL DATA TERBARU
            dispatch('getExpenses').then(() => resolve())
        })
    })
},

Berpindah pada sisi Backend, buka ExpensesController.php dan tambahkan method:

public function destroy($id)
{
    $expenses = Expense::find($id);
    $expenses->delete();
    return response()->json(['status' => 'success']);
}

Sampai disini semua bagian telah selesai kita kerjakan, tugas terakhir adalah menjalankan command:

npm run dev

atau command

npm run watch

Kemudian testing dengan menggunakan dua buah browser yang berbeda dan salah satu browser login sebagai kurir/admin dan browser lainnya login sebagai superadmin/finance (red: fitur add admin dan finance belum ada, sehingga kamu bisa menambahkannya secara langsung ke table users terlebih dahulu atau jika tidak gunakan kurir dan superadmin saja untuk proses testing).

Baca Juga: Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #5: Manage Laundry Products

Kesimpulan

Artikel ini cukup panjang tapi juga sebanding dengan hal hal baru yang kita pelajari. Tidak hanya berinteraksi dengan proses manipulasi database tapi juga kita belajar bagaimana mengirimkan dan menerima data secara realtime tanpa harus re-load browser.

Adapun documentasi codenya dapat kamu lihat di Github.

Backend Developer iTechShark, salah satu perusahaan asal Amerika. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #8: Manage Customers Laravel VueJS

Aplikasi Laundry (Laravel 5.8 - Vue.js -...

Pelanggan menjadi bagian yang penting dari sebuah perusahaan laundry, maka fitur yang akan dikerjakan pada serial ini adalah sebuah fitur untuk mengelola pelanggan. Adapun schema yang dirancang dimana...

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #6: Role & User Permissions Laravel VueJS

Aplikasi Laundry (Laravel 5.8 - Vue.js -...

Sambil menikmati secangkir kopi ini, kutuliskan serial lanjutan membuat Aplikasi Laundry menggunakan Laravel 5.8 & Vue.js dengan metode SPA (Single Page Application) yang telah memasuki serial ke-6 ny...

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #5: Manage Laundry Products Laravel VueJS

Aplikasi Laundry (Laravel 5.8 - Vue.js -...

Usaha laundry tak hanya mencakup satu bagian saja yakni laundry kiloan, akan tetapi telah memiliki banyak variant diantaranya, laundry jaket, selimut dan berbagai macam yang bersifat satu. Tidak cukup...

Komentar