Source Code Aplikasi Laundry menggunakan Laravel 5.8 Vue.js Siap pakai

Salah satu modul pertama yang akan dikerjakan adalah modul dengan tabel yang tidak bergantung pada tabel lain, jadi pada seri ke-3 ini kita akan melengkapi outlet manajemen modul, yang dalam modul ini berfungsi untuk mengumpulkan semua outlet data yang dimiliki oleh perusahaan binatu itu adalah.

Dalam seri ini kita akan bermain di sekitar konsep CRUD menggunakan Laravel sebagai backend dan Vue.js untuk menangani dari sisi klien dengan bantuan aksioma untuk berkomunikasi antara keduanya.

//[.. CODE SEBELUMNYA ..]

{ path: '/login', name: 'login', component: Login }, //TAMBAHKAN CODE BARU INI { path: '/outlets', component: IndexOutlet, children: [ { path: '', name: 'outlets.data', component: DataOutlet, meta: { title: 'Manage Outlets' } }, { path: 'add', name: 'outlets.add', component: AddOutlet, meta: { title: 'Add New Outlet' } }, { path: 'edit/:id', name: 'outlets.edit', component: EditOutlet, meta: { title: 'Edit Outlet' } } ] } //TAMBAHKAN CODE INI //

[.. CODE SETELAHNYA ..]

Penejelasan: Kita memiliki rute / outlet dimana rute ini memiliki 3 anak sehingga rute dari anak ini akan memiliki awalan / outlet dan masing-masing rute ini menggunakan komponen-nya sendiri. Sebagai contoh, rute add path-nya akan menjadi / outlet / add.

Masih dengan file yang sama, komponen impor yang dibutuhkan:

import IndexOutlet from './pages/outlets/Index.vue' import DataOutlet from './pages/outlets/Outlet.vue' import AddOutlet from './pages/outlets/Add.vue' import EditOutlet from './pages/outlets/Edit.vue'

Terakhir dari file router.js adalah dengan menambahkan sebaric scrypt

//[.. CODE SEBELUMNYA ..] router.beforeEach((to, from, next) => { store.commit('CLEAR_ERRORS') //TAMBAHKAN BARIS INI if (to.matched.some(record => record.meta.requiresAuth)) { let auth = store.getters.isAuth if (!auth) { next({ name: 'login' }) } else { next() } } else { next() } }) //[.. CODE SETELAHNYA ..]

Penjelasan Kode baris diatas berfungsi untuk memperbaiki status kesalahan setiap kali halaman di-load.

Source Code Aplikasi Laundry menggunakan Laravel 5.8 Vue.js Siap pakai

Tinggalkan file routers.j, lalu pindah ke tugas selanjutnya yaitu membuat 4 buah file yaitu: Index.vue, Outlet.vue, Add.vue dan Edit.vue. Buat ke 4 file tersebut di dalam halaman folder / outlet.

Tujuan awal kita adalah mengeluarkan daftar data outlet, sehingga kita hanya akan bergantung pada file Index.vue, buka file tersebut dan tambahkan kode berikut

Penjelasan: Tag kustom yang digunakan untuk komponen Breadcrumb.vue membuat dinamis breadcrumb tergantung dari halaman yang sedan diakses. Ternyata file Index.vue ini hanya berfungsi sebagai tampilan orang tua yang akan saya buat anak-anak yang dimilikinya pada tag .

Lalu file apa yang meng-handle daftar data outlet? Benar sekali, ajukan Outlet.vue. Akan tetapi sebelum berpindahkan ke file ini, kita buat terlebih dahulu komponen Breadcrumb.vue di dalam komponen folder dan tambahkan kode berikut:

Pada metode edit () hanya dapat digunakan untuk mengambil data tunggal berdasarkan kode dan dikirimkannya kembali ke klien. Pada metode pembaruan () kita melakukan validasi dan mengambil data berdasarkan kode kemudian mengubah data tersebut dengan mengeluarkan kode yang tidak diubah.

Source Code Aplikasi Laundry menggunakan Laravel 5.8 Vue.js

Delete Outlet

Kita tidak akan melakukan perubahan pada sisi client dalam hal ini adalah Vue.js, karena fungsi untuk mengirimkan permintaan hapus data sudah dikerjakan pada bagian Manage Outlets. Hal yang akan dilakukan pada bagian ini adalah membuat API-nya untuk memproses permintaan tersebut. Buka file OutletController.php dan tambahkan method:

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

Penjelasan: Baris pertama mengambil data berdasarkan id dan kemudian pada baris selanjutnya mengambil data ini menggunakan metode delete ().

untuk yang ingin mendapatkan Source code gratis secara Full klik aja disini dan jangan lupa Share ketemen-temen kamu agar admib selalu update Source Code Project Web dan Aplikasi Mobile Android / IOS