Belajar Membuat CRUD Dengan Laravel Vue JS

Belajar Membuat CRUD Dengan Laravel Vue JS – Haloo semuanya, Assalaamualaikum wr wb..

Sebelum nya kita sudah pernah belajar membuat CRUD dari 0 sampai mahir dengan Laravel..

Kemudian pernah juga membuat CRUD dalam 1 halaman dengan Livewire..

Nah sekarang kita akan belajar membuat CRUD dengan Laravel dan Vue Js..

Daftar Isi

Toggle

Persiapan

Ada beberapa hal yang perlu kita persiapkan, kita mulai dari instalasi laravel nya terlebih dahulu..

Instalasi Laravel

Untuk versi laravel yang akan kita gunakan yaitu versi 8, yang mana versi 8 tersebut adalah versi terbaru untuk saat ini..

Untuk cara instalasi nya, kalian bisa kunjungi halaman resmi nya disini..

Konfigurasi Database

Setelah instalasi Laravel nya sudah berhasil dilakukan, maka selanjutnya yaitu kita perlu melakukan konfigurasi pada bagian database nya..

Pertama kita buat database nya terlebih dahulu, untuk nama database nya bebas, boleh apa saja, saya sendiri menamai nya dengan crud_laravel_vuejs..

Kemudian, kalian hubungkan database tersebut dengan folder project kita didalam file .env nya, kalian sesuaikan sendiri untuk username dan password nya..

Buat Model dan file Migration table Siswa

Setelah database nya terhubung, sekarang kita buat table siswa nya terlebih dahulu, tapi melalui file migration, sekaligus kita buatkan juga model nya.. Jalankan perintah seperti berikut:

php artisan make:model Siswa -m

Dengan perintah tersebut, akan menciptakan 2 file baru, yaitu “../app/Models/Siswa.php”, dan juga file migration nya yang berada didalam folder “../database/migrations/….create_siswas_table.php”..

Buka file migration nya, dan isi seperti berikut:

<?php

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

class CreateSiswasTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('siswas', function (Blueprint $table) {
            $table->id();
            $table->text('nama')->nullable();
            $table->text('alamat')->nullable();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('siswas');
    }
}

Diatas, kita membuat table siswa dengan spesifikasi seperti berikut:

• id, auto increment..
• nama
• alamat
• created_at
• updated_at

Setelah itu jalankan perintah:

php artisan migrate

maka nanti akan termigrate beberapa table, salah satunya adalah table siswas yang barusan kita buat..

Kalo kamu cek didalam database nya, maka akan muncul beberapa table seperti berikut:

Menampilkan list data siswa dengan Vue

Setelah persiapan nya sudah matang, sekarang kita akan coba untuk menampilkan list data siswa dengan vue js..

Pertama, kita buat 3 data dummy terlebih dahulu didalam table siswas nya, sebagai contoh seperti berikut:

Kemudian kita buat route nya didalam file “../routes/web.php” seperti berikut:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SiswaController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::get('list/siswa', [SiswaController::class, 'index']);

Script diatas, kita membuat sebuah route yang url nya mengarah ke “../list/siswa”, menggunakan SiswaController, dan mengarahkan nya ke function index..

Karena kita belum punya SiswaController, maka kita buat terlebih dahulu dengan menjalankan perintah:

php artisan make:controller SiswaController

Setelah perintah diatas dijalankan, maka akan tercipta sebuah file baru yang berada di “../app/Http/Controllers/SiswaController”..

Kita buka aja, dan didalam nya tambahkan sebuah function baru dengan nama index seperti berikut:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SiswaController extends Controller
{
    //
    public function index()
    {
        //
        return view('siswa.index');
    }
}

Perhatikan script diatas, kita membuat sebuah function baru dengan nama index, yang mana didalam nya kita langsung mengarahkan nya ke halaman view “siswa.index”..

Karena kita belum punya file view nya, sekarang kita buat dulu didalam folder “../resources/views/siswa/index.blade.php”.. Dan isi seperti berikut:

<!DOCTYPE html>
<html>

<head>
    <title>sangcahaya.id</title>
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">

                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>Alamat</th>
                                <th>Created At</th>
                                <th>Updated At</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>

                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

</body>

</html>

Coba kalian perhatikan script diatas:

• Pada baris ke-7, kita memanggil css bootstrap menggunakan file CDN..
• Pada baris ke-15 kita membuat table untuk list data siswa nya..
• Pada baris ke-36 kita memanggil file CDN Jquery..
• Pada baris ke-39, memanggil file CDN bootstrap js..
• Dan yang paling penting, pada baris ke-41, kita memanggil file Vue js nya dengan menggunakan CDN..
• Dan juga memanggil file CDN axios nya pada baris ke-43..

Sekarang kalo kalian akses url ../list/siswa, maka akan tampil halaman seperti diatas..

Get Data dengan Vue JS

Sekarang kita buat component nya terlebih dahulu, di file view nya, pada baris ke-11, kita tambahkan atribut ID dengan nilai appVue seperti berikut:

Sekarang component tersebut kita panggil melalui vue js seperti berikut:

Kita buat file script baru seperti berikut, kita taruh dibawah pemanggilan script axios..

....
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        var vue = new Vue({
            el: "#appVue",
            data: {
                data_siswa: []
            },
            mounted() {

            },
            methods: {

            }
        })
    </script>
....

Coba kalian perhatikan script diatas:

• Pada baris ke-7 adalah inisialisasi vue js nya..
• Baris ke-8 yaitu pemanggilan component nya dengan menggunakan perintah el, yang mana kita mengarahkan nya ke id appVue yang sebelum nya sudah kita buat..
• Kemudian pada baris ke-9 terdapat perintah property data, yaitu untuk menampung setiap atribut yang akan kita gunakan.. didalam nya saya sudah membuat 1 atribut bernama data_siswa dengan tipe data array yang nantinya akan digunakan untuk menampung list data siswa..
• Kemudian pada baris ke-12 terdapat perintah mounted(), yang mana itu sama seperti perintah __construct() di php, yaitu akan dieksekusi pertama kali saat halaman baru di reload..
• Dan terakhir pada baris ke-15, terdapat perintah methods yang mana nanti setiap aksi yang akan kita jalankan akan kita taruh didalam methods tersebut..

Buat API Get Data Siswa

Sekarang kita buat API nya terlebih dahulu yaa, untuk get data siswa nya..

Kita buat route baru terlebih dahulu seperti berikut:

Route::get('/', function () {
    return view('welcome');
});

Route::get('list/siswa', [SiswaController::class, 'index']);

Route::get('get-siswa', [SiswaController::class, 'get_data']);

Kita membuat route baru dengan url nya yaitu “../get-siswa”, kemudian mengarahkan nya ke SiswaController, function get_data..

Oleh karena itu, sekarang kita buka kembali file SiswaController nya, dan buat sebuah function baru dengan nama get_data seperti berikut:

<?php

namespace App\Http\Controllers;

use App\Models\Siswa;
use Illuminate\Http\Request;

class SiswaController extends Controller
{
    //
    public function index()
    {
        //
        return view('siswa.index');
    }

    public function get_data()
    {
        $data = Siswa::orderBy('id', 'desc')->get();

        return response()->json($data);
    }
}

Perhatikan script diatas:

• Pada baris ke-17 kita membuat function get_data()..
• Pada baris ke-19, kita membuat sebuah query untuk get data siswa nya yang kita sort by id secara descending, dan kita tampung kedalam variable data..
• Kemudian pada baris ke-21, kita return variable data nya berupa json..

Akses API nya didalam Vue dengan Axios..

Nah setelah API nya sudah terbentuk, sekarang kita akses endpoint nya menggunakan axios..

Pada script vue nya, kalian tambahkan sebuah method baru, misalkan dengan nama getData seperti berikut:

<script>
    var vue = new Vue({
        el: "#appVue",
        data: {
            data_siswa: []
        },
        mounted() {

        },
        methods: {
            getData: function() {
                var url = "{{ url('get-siswa') }}";

                axios.get(url)
                    .then(resp => {
                        console.log(resp);
                    })
                    .catch(err => {
                        console.log(err);
                    })
                    .finally(() => {

                    })
            }
        }
    })
</script>

Perhatikan pada script diatas:

• Pada baris ke-11, kita membuat sebuah method baru dengan nama getData..
• Kemudian didalam nya pada baris ke-12, kita mendeklarasikan sebuah variable baru dengan nama url, yang isi nya adalah endpoint API get data siswa yang barusan sudah kita buat sebelumnya..
• Kemudian pada baris ke-14, kita akses endpoint tersebut menggunakan axios..

Pada axios, terdapat 3 function, yaitu then(), catch(), dan finally()..

Ketika response yang dihasilkan sukses, maka sistem akan mengakses function then(), jika terdapat error saat mengakses endpoint api nya, maka sistem akan menjalankan perintah yang ada didalam function catch()..

Tetapi kalo function finally(), apapun hasil response nya, mau sukses atau gagal, function ini akan tetap dijalankan..

Didalam function then(), kita menjalankan perintah console.log(resp), yang mana perintah tersebut adalah untuk mencetak hasil response nya kedalam tab console..

Kemudian karena method getData() ini akan langsung kita jalankan pada saat pertama kali halaman web nya baru dibuka, maka kita daftarkan method getData() ini kedalam property mounted() seperti berikut:

<script>
    var vue = new Vue({
        el: "#appVue",
        data: {
            data_siswa: []
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData: function() {
                var url = "{{ url('get-siswa') }}";

                axios.get(url)
                    .then(resp => {
                        console.log(resp);
                    })
                    .catch(err => {
                        console.log(err);
                    })
                    .finally(() => {

                    })
            }
        }
    })
</script>

Sekarang coba kalian refresh halaman “../list/siswa” nya, kemudian coba cek tab console, untuk membuka tab console, bisa dengan cara menekan tombol f12, atau klik kanan, kemudian klik inspect..

Maka nanti response dari axios akan muncul di tab tersebut, seperti pada gambar dibawah ini:

Di response nya akan ada beberapa object, tapi kita cukup fokus ke object data saja, karena didalam object data inilah hasil dari response json API nya di letakkan.. sisa nya, object-object yang lain adalah bawaan dari axios nya..

Kalo kalian buka object data tersebut, maka akan terdapat list-list data siswa hasil dari response API nya..

Nah sekarang kita masukkan object data tersebut kedalam atribut data_siswa yang sebelumnya sudah kita buat.. Gunakan perintah seperti berikut:

....
<script>
        var vue = new Vue({
            el: "#appVue",
            data: {
                data_siswa: []
            },
            mounted() {
                this.getData();
            },
            methods: {
                getData: function() {
                    var url = "{{ url('get-siswa') }}";

                    axios.get(url)
                        .then(resp => {
                            console.log(resp);
                            this.data_siswa = resp.data;
                        })
                        .catch(err => {
                            console.log(err);
                        })
                        .finally(() => {

                        })
                }
            }
        })
    </script>
....

Sekarang coba kalian script diatas,

Pada baris ke-6 adalah atribut data_siswa dengan tipe data array yang sebelumnya sudah kita buat..

Kemudian pada baris ke-18, atribut tersebut kita isi dengan data-data hasil dari response json API nya..

Foreach pada vue js

Sekarang variable data_siswa nya kita foreach didalam file view nya, caranya sangat mudah sekali, kita tinggal jalankan aja perintah v-for seperti pada contoh berikut:

....
<div class="table-responsive">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Nama</th>
                <th>Alamat</th>
                <th>Created At</th>
                <th>Updated At</th>
            </tr>
        </thead>
        <tbody>
            <template v-for="item in data_siswa">
                <tr>
                    <td>@{{ item . nama }}</td>
                    <td>@{{ item . alamat }}</td>
                    <td>@{{ item . created_at }}</td>
                    <td>@{{ item . updated_at }}</td>
                </tr>
            </template>
        </tbody>
    </table>
</div>
....

Coba kalian perhatikan script diatas..

Pada baris ke-13 kita menjalankan perintah v-for dengan menggunakan element <template></template>, element ini hanya sebagai penanda saja..

Kemudian didalam v-for terdapat perintah “item in data_siswa”, item ini adalah initial variable yang nanti kita panggil di view nya, dan data_siswa adalah atribut yang sebelum nya sudah kita isi dengan list data siswa nya..

Untuk pemanggilan object/variable pada vue js, kita menggunakan kurung kurawal, akan tetapi pada laravel, kita menambahkan @ didepan nya agar tidak terbaca oleh sistem sebagai templating blade template.. Contoh nya bisa kalian lihat pada baris ke-15 sampai ke-18..

Kalo kalian refresh halaman list siswa nya, maka seharus nya sudah muncul untuk list2 datra siswa nya..

Tambah Data Dengan Vue JS

Setelah kita sudah berhasil menampilkan list data dengan vue js, sekarang kita buat modul untuk tambah data nya..

Buat Button Tambah Data Nya

Langkah pertama yang perlu kita lakukan yaitu membuat button untuk tambah data nya terlebih dahulu..

Kita buka kembali file view index.blade.php nya, kemudian tambahkan sebuah button seperti berikut:

....
<div class="container" id="appVue">
    <div class="row">
        <div class="col-md-12">

            <br>
            <br>
            <button class="btn btn-lg btn-primary" v-on:click.prevent="tambahData">Tambah Data</button>

            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Nama</th>
                            <th>Alamat</th>
                            <th>Created At</th>
                            <th>Updated At</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template v-for="item in data_siswa">
                            <tr>
                                <td>@{{ item . nama }}</td>
                                <td>@{{ item . alamat }}</td>
                                <td>@{{ item . created_at }}</td>
                                <td>@{{ item . updated_at }}</td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
....

Diatas, kalian coba perhatikan pada baris ke-8, kita membuat sebuah button untuk tambah data siswa nya, button ini nanti akan kita gunakan untuk memanggil sebuah modal form tambah data nya..

Di button tersebut juga terdapat perintah:

v-on:click.prevent="tambahData"

Yang artinya setiap kali kita mengklik button tersebut, sistem akan mengeksekusi method tambahData yang ada didalam vue js nya..

v-on:click adalah salah satu direktif event yanga ada pada vue js, nanti akan kita bahas di bab selanjutnya.. dan perintah .prevent sama seperti preventDefault() yang ada pada javascript native..

Kita buat method tambahData nya terlebih dahulu..

Sekarang di vue js nya kita tambahkan method baru, nama method nya sesuai dengan yang kita define pada button tambah data, yaitu method tambahData().. kalian tambahkan script seperti berikut:

....
methods: {
    getData: function() {
        var url = "{{ url('get-siswa') }}";

        axios.get(url)
            .then(resp => {
                console.log(resp);
                this.data_siswa = resp.data;
            })
            .catch(err => {
                console.log(err);
            })
            .finally(() => {

            })
    },
    tambahData: function() {
        $('#modalTambahData').modal('show');
    }
}
....

Coba kalian perhatikan pada baris ke-18, kita membuat method baru dengan nama tambahData..

Didalam method tersebut kita menjalankan perintah jquery untuk memanggil “#modalTambahData“..

Karena kita belum punya modal nya, sekarang kita tambahkan dulu didalam file view nya..

Membuat Modal Form Tambah Data

Sekarang kalian tambahkan modal form data nya seperti berikut, bisa kalian taruh dimana saja, setelah element table list data siswa atau dimanapun, selama masih didalam container id=”appVue”..

....
    <div class="modal fade" id="modalTambahData" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title">Warning</h4>
                </div>

                <div class="modal-body">
                    <form role="form">
                        <div class="box-body">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Nama</label>
                                <input type="text" class="form-control" placeholder="Nama">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Alamat</label>
                                <textarea class="form-control" rows="5"></textarea>
                            </div>
                        </div>
                        <!-- /.box-body -->

                        <div class="box-footer">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
....

Maka nanti setiap kali kalian mengklik button tambah data nya, maka akan muncul modal form data seperti pada gambar berikut:

Direktif pada Vue Js

Kemudian selanjut nya, kamu juga harus mengerti tentang Direktif pada vue js, saya sendiri punya referensi untuk kalian yang ingin lebih memahami tentang Direktif / data binding pada vue js, silahkan klik Disini..

Terdapat beberapa direktif pada vue js, salah satunya yaitu direktif data binding.. Nanti kita akan menggunakan perintah v-model pada setiap inputan untuk menghubungkan value dari inputan tersebut terhadap atribut yang ada di vue js nya..

Sebelumnya kita juga sudah mempelajari direktif yang lainnya, yaitu direktif perulangan v-for untuk melakukan perulangan data terhadap variable array..

Sekarang pada file view nya “../index.blade.php”, kita buatkan atribut baru terlebih dahulu didalam property data nya..

....
<script>
    var vue = new Vue({
        el: "#appVue",
        data: {
            data_siswa: [],
            nama: null,
            alamat: null
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData: function() {
                var url = "{{ url('get-siswa') }}";

                axios.get(url)
                    .then(resp => {
                        console.log(resp);
                        this.data_siswa = resp.data;
                    })
                    .catch(err => {
                        console.log(err);
                    })
                    .finally(() => {

                    })
            },
            tambahData: function() {
                // alert('asd');
                $('#modalTambahData').modal('show');
            }
        }
    })
</script>
....

Coba kalian perhatikan script diatas..

Pada baris ke-7 dan ke-8 kita membuat sebuah atribut baru, yaitu nama dan alamat..

Kemudian pada modal form nya, kita hubungkan setiap inputan nya dengan data tersebut menggunakan direktif v-model, maka nanti bentuk modal form tambah data nya akan menjadi seperti berikut:

Maka nanti ketika setiap kali kita melakukan perubahan pada inputan nya, maka variable nama dan alamat yang ada didalam vue js ny juga akan berubah mengikuti nilai dari setiap inputan nya, begitu pun sebaliknya..

Direktif event on click

Direktif event on click ini sebetulnya sudah kita terapkan pada saat kita melakukan klik pada button tambah data..

Nah sekarang hal tersebut kita akan terapkan lagi didalam button submit form nya, menjadi seperti berikut:

Maka nanti setiap kali kita mengklik button submit yang berada di dalam modal form tambah data nya, akan mengakses method storeSiswa didalam vue js nya..

Membuat method storeSiswa di vue js nya

Selanjutnya kita buat method storeSiswa nya seperti berikut:

....
tambahData: function() {
    // alert('asd');
    $('#modalTambahData').modal('show');
},
storeSiswa: function() {
    var form_data = new FormData();
    form_data.append("nama", this.nama);
    form_data.append("alamat", this.alamat);

    var url = "{{ url('store-siswa') }}";

    axios.post(url, form_data)
        .then(resp => {
            $('#modalTambahData').modal('hide');
            alert('Success');
            this.nama = null;
            this.alamat = null;

            this.getData();
        })
        .catch(err => {
            alert('error');
            console.log(err);
        })

}
....

Coba kalian perhatikan script diatas..

Pada baris ke-6 sampai ke-27 kita membuat method baru dengan nama storeSiswa..

Pada baris ke-7 sampai ke-9 adalah perintah untuk membuat formData nya, agar nanti di controller nya bisa kita ambil nilai nya dengan perintah request()..

Pada baris ke-11 nya adalah url untuk store data siswa nya, nanti akan kita buat juga di routes dan controller nya..

Kemudian jika store data nya sukses, maka akan mengeksekusi perintah yang ada didalam function then()..

$(‘#modalTambahData’).modal(‘hide’); adalah perintah untuk mengclose modal form data nya..

Kemudian memunculkan alert sukses alert(‘Success’);..

Pada baris ke-17 dan ke-18 kita me reset atribut nama dan alamat agar ketika kita mengklik kembali button tambah data nya, isi form modal tambah data nya menjadi bersih kembali, tidak ada history bekas inputan sebelumnya..

Kemudian pada baris ke-20, kita mengakses ulang method getData dengan perintah:

this.getData();

Maka nanti sistem akan merender ulang halaman list data siswa, dan data yang baru akan otomatis muncul tanpa kita perlu melakukan refresh halaman nya..

Tapi jika storeSiswa nya error, maka sistem akan menjalankan perintah yang ada didalam function catch()..

Buat route baru untuk store siswa

Kita buat route baru seperti berikut didalam file “../routes/web.php” sesuai dengan yang sudah kita define didalam method storeSiswa nya..

....
Route::get('get-siswa', [SiswaController::class, 'get_data']);
Route::post('store-siswa', [SiswaController::class, 'store_siswa']);

Kemudian didalam SiswaController nya tambahkan function baru dengan nama store_siswa seperti berikut:

....
public function store_siswa()
{
    $data = new Siswa;
    $data->nama = request('nama');
    $data->alamat = request('alamat');
    $data->save();

    return response()->json('sukses', 200);
}
....

Didalam function tersebut kita membuat perintah untuk insert data siswa nya..

Edit Data Siswa

Sekarang kita mulai untuk membuat modul edit data siswa nya..

Pertama kita buatkan atribut baru terlebih dahulu didalam vue js nya, kita beri nama id_edit seperti berikut:

....
el: "#appVue",
data: {
    data_siswa: [],
    nama: null,
    alamat: null,
    id_edit: null
},
mounted() {
    this.getData();
},
....

Kemudian didalam file view index.blade.php nya, kita buatkan button edit seperti berikut:

....
<div class="table-responsive">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Nama</th>
                <th>Alamat</th>
                <th>Created At</th>
                <th>Updated At</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <template v-for="item in data_siswa">
                <tr>
                    <td>@{{ item . nama }}</td>
                    <td>@{{ item . alamat }}</td>
                    <td>@{{ item . created_at }}</td>
                    <td>@{{ item . updated_at }}</td>
                    <td>
                        <button v-on:click.prevent="editData(item.id)"
                            class="btn btn-xs btn-warning">Edit Data</button>
                    </td>
                </tr>
            </template>
        </tbody>
    </table>
</div>
....

Diatas, kita membuat sebuah kolom baru di dalam table nya untuk menambahkan button edit data..

Kemudian di baris ke-21, pada button edit nya, terdapat direktif event v-on:click yang mengarahkan kita ke method editData dengan membawa parameter id siswa nya..

Sekarang di vue js nya kita buat method baru dengan nama editData seperti berikut:

....
editData: function(id) {
    this.id_edit = id;

    var url = "{{ url('get-siswa') }}" + '/' + id;

    axios.get(url)
        .then(resp => {
            var siswa = resp.data;
            this.nama = siswa.nama;
            this.alamat = siswa.alamat;

            this.tambahData();
        })
        .catch(err => {
            alert('error');
            console.log(err);
        })
        .finally(() => {

        })
}
....

Di script diatas, pada baris ke-5 adalah url untuk get detail dari data siswa nya berdasarkan parameter id siswa nya, nanti akan kita coba buat route dan controller nya..

Kemudian pada baris ke-10 dan ke-11, hasil dari response nya kita masukkan ke masing-masing data nama dan alamat..

Kemudian pada baris ke-13, kita memanggil method tambahData(), tujuan nya yaitu untuk memanggil kembali modal form data nya..

Sekarang kalo kalian klik button tambah data nya, maka seharusnya inputan pada modal form nya akan otomatis terisi nilai nya sesuai dengan data yang mau di edit..

Sekarang buka kembali routes/web.php nya, dan tambahkan route baru seperti berikut:

Route::get('get-siswa/{id}', [SiswaController::class, 'get_detail']);

Kemudian di controller juga tambah function baru dengan nama get_detail seperti berikut:

....
public function get_detail($id)
{
    $dt = Siswa::find($id);

    return response()->json($dt, 200);
}
....

Selanjutnya, kita juga melakukan sedikit perubahan pada method storeSiswa nya, menjadi seperti berikut:

....
storeSiswa: function() {
    var form_data = new FormData();
    form_data.append("nama", this.nama);
    form_data.append("alamat", this.alamat);
    form_data.append("id_edit", this.id_edit);

    var url = "{{ url('store-siswa') }}";

    axios.post(url, form_data)
        .then(resp => {
            $('#modalTambahData').modal('hide');
            alert('Success');
            this.nama = null;
            this.alamat = null;
            this.id_edit = null;

            this.getData();
        })
        .catch(err => {
            alert('error');
            console.log(err);
        })

},
....

Pada baris ke-6, kita menambahkan atribut id_edit kedalam formData append..

Kemudian, pada baris ke-16, jika response nya sukses, maka atribut id_edit ini juga akan ikut kita reset menjadi null..

Kemudian kita juga melakukan perubah pada function store_siswa() di controller nya, menjadi seperti berikut:

....
public function store_siswa()
{
    $id_edit = request('id_edit');

    if ($id_edit != "null") {
        $data = Siswa::find($id_edit);
        $data->nama = request('nama');
        $data->alamat = request('alamat');
        $data->save();
    } else {
        $data = new Siswa;
        $data->nama = request('nama');
        $data->alamat = request('alamat');
        $data->save();
    }

    return response()->json('sukses', 200);
}
....

Didalam function store_siswa, kita memberikan sebuah kondisi, dimana jika variabel id_edit berisikan nilai, maka akan menjalankan proses update data, tetapi jika tidak, maka akan menjalankan proses tambah data..

Hapus Data

Sekarang kita akan membuat modul untuk hapus data..

Langkah pertama yaitu membuat button hapus nya terlebih dahulu, silahkan modifikasi file index.blade.php nya seperti berikut pada bagian table nya:

....
<table class="table table-hover">
    <thead>
        <tr>
            <th>Nama</th>
            <th>Alamat</th>
            <th>Created At</th>
            <th>Updated At</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <template v-for="item in data_siswa">
            <tr>
                <td>@{{ item . nama }}</td>
                <td>@{{ item . alamat }}</td>
                <td>@{{ item . created_at }}</td>
                <td>@{{ item . updated_at }}</td>
                <td>
                    <button v-on:click.prevent="editData(item.id)"
                        class="btn btn-xs btn-warning">Edit Data</button>

                    <button v-on:click.prevent="hapusData(item.id)" class="btn btn-xs btn-danger">Hapus
                        Data</button>
                </td>
            </tr>
        </template>
    </tbody>
</table>
....

Coba kalian perhatikan script diatas, pada baris ke-23 kita membuat sebuah button baru, dimana button tersebut terdapat direktif event nya yang mengarah ke method hapusData dengan membawa parameter id siswa nya..

Kalo kalian refresh halaman list siswa nya, maka akan menjadi seperti berikut:

Sekarang di vue js nya kita buat method baru dengan nama hapusData seperti berikut:

....
hapusData: function(id) {
    var url = "{{ url('hapus-siswa') }}" + '/' + id;

    axios.get(url)
        .then(resp => {
            console.log(resp);
            this.getData();
        })
        .catch(err => {
            alert('error');
            console.log(err);
        })
        .finally(() => {

        })
}
....

Kemudian kita buatkan juga route untuk hapus data nya:

Route::get('hapus-siswa/{id}', [SiswaController::class, 'hapus_siswa']);

Dan juga tambahkan function baru di controller nya dengan nama hapus_siswa() seperti berikut:

....
public function hapus_siswa($id)
{
    Siswa::where('id', $id)->delete();

    return response()->json('sukses', 200);
}
....

Sekarang coba kalian refresh halaman list siswa, kemudian coba klik button hapus data nya, maka seharusnya data nya akan terhapus..

Upload Photo Dengan Vue JS

Untuk cara upload photo dengan Laravel Vue Js sudah saya buatkan artikel terpisah, silahkan kalian kunjungi disini..

Membuat Validasi Input

Ternyata kita melewatkan sesuatu yang cukup penting, yaitu form validasi..

Untuk membuat nya cukup mudah, kita hanya perlu melakukan sedikit modifikasi pada method storeSiswa nya seperti berikut:

....
storeSiswa: function() {

    let error = 0;

    if (this.nama.length === 0) {
        error++;
        alert('nama wajib diisi');
    }
    elseif(this.alamat === 0) {
        error++;
        alert('alamat wajib diisi');
    }

    if (error === 0) {
        var form_data = new FormData();
        form_data.append("nama", this.nama);
        form_data.append("alamat", this.alamat);
        form_data.append("id_edit", this.id_edit);
        form_data.append("file", this.file);

        var url = "{{ url('store-siswa') }}";

        axios.post(url, form_data)
            .then(resp => {
                console.log(resp);
                $('#modalTambahData').modal('hide');
                alert('Success');
                this.nama = null;
                this.alamat = null;
                this.id_edit = null;

                this.getData();
            })
            .catch(err => {
                alert('error');
                console.log(err);
            })
    }



},
....

Coba kalian perhatikan script diatas, pada baris ke-4 kita mendefine variable error sebagai penghitung apakah ada yang error atau tidak..

Kemudian pada baris ke-6 sampai ke-13 kita membuat validasi nya, jika ada yang tidak sesuai kondisi maka variable error nya akan kita tambahkan nilai nya 1..

Pada baris ke-15, jika perhitungan akhir variable error sama dengan 0, maka sistem akan lanjut melakukan submit data..

Oh iya, jangan lupa pula bahwa setiap atribut yang ada didalam property data juga diubah nilai awal nya yang semula adalah null menjadi ”..

Get All Form Data

Sedikit informasi tambahan lagi nih untuk temen-temen semua.. ketika kita ingin submit data melalui form, biasanya kita akan mengambil nilai-nilai dari setiap inputan form nya menggunakan FormData secara manual.. contoh  nya seperti pada gambar berikut:

Bayangkan jika kita memiliki banyak inputan didalam form nya, anggap saja misalkan terdapat 20 inputan, jika kita melakukan nya seperti pada gambar diatas, pasti akan sangat melelahkan..

Nah untuk cara cepet nya, kalian bisa gunakan perintah seperti berikut untuk meng-get semua nilai data yang ada pada form tersebut, seperti ini:

let myForm = document.getElementById('myForm');
formData = new FormData(myForm);

Tapi ada syarat nya, yaitu yang pertama, kalian perlu menambahkan id unik pada element form nya..

Kemudian yang kedua, pada setiap inputan nya juga harus terdapat atribut name yang kalian define seperti biasa..

Dengan cara diatas, kalian tidak perlu lagi meng-get satu-satu setiap nilai pada inputan form nya..

Membuat Pagination

Ketika database kita sudah memiliki ribuan atau bahkan jutaan data, maka kita perlu melakukan pagination saat penarikan datanya..

Tujuan nya agar proses penarikan datanya dipecah menjadi beberapa bagian halaman, agar tidak terlalu memberatkan server dan client..

Untuk cara pembuatan nya, kalian bisa kunjungi halaman berikut: Panduan lengkap membuat pagination Laravel VueJS..

Terima kasih, semoga bermanfaat..

Support Us

Jika artikel ini bermanfaat untuk kamu, membantu menyelesaikan masalah yang sedang kamu hadapi, kamu juga bisa dukung kami dengan mengunjungi halaman berikut: https://saweria.co/sangcahayaid

Terima kasih..