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

Sebelum nya kita mutakadim pernah belajar

membuat CRUD berpokok 0 sampai mahir dengan Laravel
..

Kemudian sangkutan juga

menciptakan menjadikan CRUD dalam 1 pelataran dengan Livewire
..

Cukuplah sekarang kita akan belajar membentuk CRUD dengan Laravel dan Vue Js..

Daftar Isi

  • 1
    Persiapan

    • 1.1
      Instalasi Laravel
    • 1.2
      Konfigurasi Database
    • 1.3
      Buat Model dan file Migration table Pesuluh
  • 2
    Menampilkan list data siswa dengan Vue
  • 3
    Get Data dengan Vue JS

    • 3.1
      Buat Api Get Data Siswa
    • 3.2
      Akses API nya didalam Vue dengan Axios..
    • 3.3
      Foreach sreg vue js
  • 4
    Tambah Data Dengan Vue JS

    • 4.1
      Bakal Button Tambah Data Nya
    • 4.2
      Kita buat method tambahData nya bahkan dulu..
    • 4.3
      Membuat Modal Form Tambah Data
    • 4.4
      Direktif plong Vue Js
    • 4.5
      Direktif event on click
    • 4.6
      Membuat method storeSiswa di vue js nya
    • 4.7
      Buat route baru untuk store peserta
  • 5
    Edit Data Murid
  • 6
    Basmi Data
  • 7
    Upload Photo Dengan Vue JS
  • 8
    Membuat Validasi Input
  • 9
    Get All Form Data
  • 10
    Menciptakan menjadikan Pagination
  • 11
    Support Us

    • 11.1
      Share this:
    • 11.2
      Like this:
    • 11.3
      Related


Persiapan

Cak semau sejumlah hal yang perlu kita persiapkan, kita mulai berpokok instalasi laravel nya lebih-lebih lampau..


Instalasi Laravel

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

Untuk cara instalasi nya, kalian bisa kunjungi halaman resmi nya

disini
..


Konfigurasi Database

Setelah instalasi Laravel nya sudah berbuntut dilakukan, maka selanjutnya yaitu kita perlu mengamalkan konfigurasi pada fragmen database nya..

Mula-mula kita kerjakan database nya terlebih lewat, untuk nama database nya bebas, boleh segala saja, saya sendiri menamai nya dengan
crud_laravel_vuejs..

Kemudian, kalian hubungkan database tersebut dengan folder project kita didalam file .env nya, kalian sesuaikan seorang cak bagi username dan password nya..


Untuk Model dan file Migration table Siswa

Setelah database nya terhubung, saat ini kita untuk table murid nya terlebih dulu, tapi melalui file migration, sekaligus kita buatkan pun model nya.. Jalankan perintah sebagaimana berikut:

php artisan make:konseptual Petatar -m

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

Beber 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('mangsa')->nullable();             $table->timestamps();         });     }      /**      * Reverse the migrations.      *      * @return void      */     public function down()     {         Schema::dropIfExists('siswas');     } }
      

Diatas, kita menciptakan menjadikan table siswa dengan spesifikasi seperti berikut:

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

Pasca- itu jalankan perintah:

php artisan migrate

maka belakang hari akan termigrate sejumlah table, salah satunya adalah table
siswas
nan barusan kita kerjakan..

Kalo dia cek didalam database nya, maka akan unjuk beberapa table seperti berikut:

Belajar Membuat CRUD Dengan Laravel Vue JS


Mengutarakan list data siswa dengan Vue

Setelah persiapan nya sudah menguning, sekarang kita akan coba untuk mengutarakan list data murid dengan vue js..

Pertama, kita buat 3 data dummy lebih-lebih dahulu didalam table
siswas
nya, sebagai pola seperti berikut:

belajar membuat crud dengan laravel vue js

Kemudian kita bikin route nya didalam file
“../routes/web.php”
seperti mana 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”, menunggangi
SiswaController, dan mengarahkan nya ke function
index..

Karena kita belum punya SiswaController, maka kita cak bagi lebih-lebih 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 bau kencur 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 bagi lewat didalam folder
“../resources/views/peserta/index.blade.php”.. Dan isi seperti berikut:

<!DOCTYPE html> <html>  <head>     <title>sangcahaya.id</title>     <link landasan kereta api="stylesheet" type="text/css"         href="https://cdn.jsdelivr.jala/npm/[email protected]/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>Bulan-bulanan</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.sauk-sauk/npm/[email protected]/dist/js/bootstrap.min.js"></script>      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>      <script src="https://cdn.jsdelivr.jejala/npm/axios/dist/axios.min.js"></script>  </body>  </html>
      

Coba kalian perhatikan script diatas:

  • Pada baris ke-7, kita menegur css bootstrap menggunakan file CDN..
  • Pada ririt ke-15 kita menciptakan menjadikan table bikin list data siswa nya..
  • Puas larik ke-36 kita memanggil file CDN Jquery..
  • Pada jejer ke-39, memanggil file CDN bootstrap js..
  • Dan yang paling terdahulu, pada baris
    ke-41, kita memanggil file
    Vue js
    nya dengan menggunakan CDN..
  • Dan pun memanggil file CDN
    axios
    nya pada baris
    ke-43..

belajar membuat crud dengan laravel vue js

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


Get Data dengan Vue JS

Sekarang kita untuk component nya malah dahulu, di file view nya, lega baris
ke-11, kita tambahkan atribut
ID
dengan nilai
appVue
begitu juga berikut:

Belajar Membuat CRUD Dengan Laravel Vue JS

Sekarang component tersebut kita panggil melintasi vue js begitu juga berikut:

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

....     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>      <script src="https://cdn.jsdelivr.kisa/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:

  • Sreg lajur
    ke-7
    adalah inisialisasi vue js nya..
  • Derek
    ke-8
    yaitu pemanggilan component nya dengan menggunakan perintah
    el, nan mana kita mengarahkan nya ke
    id
    appVue
    nan sebelum nya sudah kita untuk..
  • Kemudian pada baris
    ke-9
    terwalak perintah property
    data, yaitu cak bagi memukul setiap
    atribut
    yang akan kita gunakan.. didalam nya saya sudah membuat 1 atribut bernama
    data_siswa
    dengan keberagaman data
    array
    nan nantinya akan digunakan cak bagi menampung list data siswa..
  • Kemudian pada leret
    ke-12
    terdapat perintah
    mounted(), yang mana itu separas sebagai halnya perintah
    __construct()
    di php, yaitu akan dieksekusi permulaan kali ketika halaman mentah di reload..
  • Dan bontot pada baris
    ke-15, terwalak perintah methods yang mana tulat setiap manuver yang akan kita jalankan akan kita taruh didalam methods tersebut..


Buat API Get Data Siswa

Sekarang kita buat Jago merah nya sampai-sampai dahulu yaa, bakal get data siswa nya..

Kita lakukan route baru terlebih dahulu sebagaimana berikut:

Route::get('/', function () {     return view('welcome'); });  Route::get('list/siswa', [SiswaController::class, 'index']);  Route::get('get-siswa', [SiswaController::class, 'get_data']);

Kita menciptakan menjadikan route plonco dengan url nya yaitu
“../get-siswa”, kemudian menyasarkan nya ke
SiswaController, function
get_data..

Maka itu karena itu, sekarang kita bentang pula file
SiswaController
nya, dan kerjakan sebuah function baru dengan nama
get_data
sama dengan berikut:

<?php  namespace App\Http\Controllers;  use App\Models\Pesuluh; use Illuminate\Http\Request;  class SiswaController extends Controller {     //     public function index()     {         //         return view('siswa.index');     }      public function get_data()     {         $data = Pelajar::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 mewujudkan sebuah query lakukan get data pelajar 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 Jago merah nya didalam Vue dengan Axios..

Nah setelah Jago merah nya sudah terasuh, sekarang kita akses endpoint nya memperalat
axios..

Sreg 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-pesuluh') }}";                  axios.get(url)                     .then(resp => {                         console.log(resp);                     })                     .catch(err => {                         console.gelondong(err);                     })                     .finally(() => {                      })             }         }     }) </script>

Perhatikan puas script diatas:

  • Sreg larik
    ke-11, kita membuat sebuah method baru dengan stempel
    getData..
  • Kemudian didalam nya lega baris
    ke-12, kita mendeklarasikan sebuah variable baru dengan nama
    url, nan isi nya adalah endpoint Jago merah get data murid yang barusan mutakadim kita cak bagi sebelumnya..
  • Kemudian pada ririt
    ke-14, kita akal masuk endpoint tersebut menggunakan
    axios..

Pada axios, terwalak 3 function, yakni
then(),
catch(), dan
finally()..

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

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

Didalam function
then(), kita menjalankan perintah
console.gelondong(resp), yang mana perintah tersebut ialah bakal mencetak hasil response nya kedalam tab console..

Kemudian karena method
getData()
ini akan langsung kita jalankan kapan mula-mula kali pelataran web nya plonco dibuka, maka kita daftarkan method
getData()
ini kedalam property
mounted()
seperti berikut:

axios vue js

<script>     var vue = new Vue({         el: "#appVue",         data: {             data_siswa: []         },         mounted() {             this.getData();         },         methods: {             getData: function() {                 var url = "{{ url('get-murid') }}";                  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, bakal membuka tab console, bisa dengan mandu menekan tombol
f12, maupun klik kanan, kemudian klik
inspect..

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

crud vue laravel

Di response nya akan suka-suka beberapa object, tapi kita cukup titik api ke object
data
cuma, karena didalam object data inilah hasil berusul response
json Api
nya di letakkan.. hajat nya, object-object yang lain adalah bawaan dari
axios
nya..

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

Belajar Membuat CRUD Dengan Laravel Vue JS axios get data

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

Belajar Membuat CRUD Dengan Laravel Vue JS

.... <script>         var vue = new Vue({             el: "#appVue",             data: {                 data_siswa: []             },             mounted() {                 this.getData();             },             methods: {                 getData: function() {                     var url = "{{ url('get-pesuluh') }}";                      axios.get(url)                         .then(resp => {                             console.gelondong(resp);                             this.data_siswa = resp.data;                         })                         .catch(err => {                             console.log(err);                         })                         .finally(() => {                          })                 }             }         })     </script> ....

Sekarang coba kalian script diatas,

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

Kemudian pada deret
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 lengkap berikut:

.... <div class="table-responsive">     <table class="table table-hover">         <thead>             <tr>                 <th>Etiket</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 perumpamaan 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
yaitu atribut yang sebelum nya sudah kita isi dengan list data pelajar nya..

Kerjakan pemanggilan object/variable pada vue js, kita menggunakan kurung kurawal, akan tetapi lega laravel, kita menambahkan @ didepan nya mudahmudahan tidak terbaca makanya sistem bak templating blade template.. Contoh nya dapat kalian lihat puas baris
ke-15
sebatas
ke-18..

Kalo kalian refresh halaman list siswa nya, maka seharus nya sudah unjuk cak bagi list2 datra siswa nya..

Belajar Membuat CRUD Dengan Laravel Vue JS


Tambah Data Dengan Vue JS

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


Bagi Button Tambah Data Nya

Ancang pertama yang teristiadat kita untuk yaitu membentuk button untuk tambah data nya terlebih dahulu..

Kita urai 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>Jenama</th>                             <th>Mangsa</th>                             <th>Created At</th>                             <th>Updated At</th>                         </tr>                     </thead>                     <tbody>                         <template v-for="item in data_siswa">                             <tr>                                 <td>@{{ item . cap }}</td>                                 <td>@{{ item . objek }}</td>                                 <td>@{{ item . created_at }}</td>                                 <td>@{{ item . updated_at }}</td>                             </tr>                         </template>                     </tbody>                 </table>             </div>         </div>     </div> </div> ....

Diatas, kalian coba perhatikan plong baris
ke-8, kita mewujudkan sebuah button kerjakan tambah data peserta nya, button ini nanti akan kita gunakan bakal menegur sebuah
modal form
tambah data nya..

Di button tersebut lagi terdapat perintah:

v-on:click.prevent="tambahData"

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

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


Kita untuk method tambahData nya tambahan pula habis..

Sekarang di vue js nya kita tambahkan method plonco, nama method nya sesuai dengan nan kita define puas button tambah data, ialah 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 lajur
ke-18, kita membuat method baru dengan logo
tambahData..

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

Karena kita belum punya modal nya, saat ini 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">                                 <keunggulan for="exampleInputEmail1">Tanda</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 besok setiap kali kalian mengklik button tambah data nya, maka akan muncul modal form data sama dengan plong gambar berikut:

vue js axios modal


Direktif puas Vue Js

Kemudian selanjut nya, ia juga harus mengerti tentang
Direktif
pada vue js, saya seorang punya referensi bagi kalian yang ingin lebih memahami adapun Direktif / data binding pada vue js, silahkan klik

Disini
..

Terdapat beberapa
direktif
pada vue js, salah satunya yaitu
direktif data binding.. Esok kita akan menggunakan perintah
v-model
pada setiap inputan bikin menghubungkan value dari inputan tersebut terhadap atribut nan terserah di vue js nya..

Sebelumnya kita juga telah mempelajari direktif yang lainnya, yakni direktif perulangan
v-for
untuk mengerjakan perulangan data terhadap variable array..

Kini sreg file view nya
“../index.blade.php”, kita buatkan atribut baru lebih-lebih lampau didalam property data nya..

Belajar Membuat CRUD Dengan Laravel Vue JS

.... <script>     var vue = new Vue({         el: "#appVue",         data: {             data_siswa: [],             nama: null,             mangsa: 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.gelondong(err);                     })                     .finally(() => {                      })             },             tambahData: function() {                 // alert('asd');                 $('#modalTambahData').modal('show');             }         }     }) </script> ....

Coba kalian perhatikan script diatas..

Pada larik
ke-7
dan
ke-8
kita membuat sebuah atribut bau kencur, merupakan
nama
dan
bahan..

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

vue js data binding

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


Direktif event on click

Direktif event on click ini sebetulnya mutakadim kita terapkan pron bila kita melakukan klik lega
button tambah data..

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

direktif event vue js

Maka lusa setiap kali kita mengklik button submit yang berkecukupan di n domestik modal form tambah data nya, akan mengakses method
storeSiswa
didalam vue js nya..


Takhlik 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("segel", this.cap);     form_data.append("alamat", this.alamat);      var url = "{{ url('store-pesuluh') }}";      axios.post(url, form_data)         .then(resp => {             $('#modalTambahData').modal('hide');             alert('Success');             this.etiket = null;             this.mangsa = null;              this.getData();         })         .catch(err => {             alert('error');             console.gelondong(err);         })  } ....

Coba kalian perhatikan script diatas..

Pada baris
ke-6
sampai
ke-27
kita membuat method plonco dengan jenama
storeSiswa..

Lega jajar
ke-7
sebatas
ke-9
adalah perintah lakukan membuat formData nya, agar nanti di controller nya bisa kita ambil ponten nya dengan perintah
request()..

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

Kemudian seandainya store data nya sukses, maka akan mengeksekusi perintah yang cak semau didalam function
then()..


$
(
‘#modalTambahData’
)
.
modal
(
‘hide’
)
;

adalah perintah buat mengclose modal form data nya..

Kemudian memunculkan alert sukses

alert
(
‘Success’
)
;
..

Sreg baris
ke-17
dan
ke-18
kita me reset atribut tanda dan alamat kiranya momen kita mengklik lagi button tambah data nya, isi form modal tambah data nya menjadi bersih kembali, tidak ada history kancah inputan sebelumnya..

Kemudian sreg 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 mentah akan faali muncul sonder kita perlu melakukan refresh halaman nya..

Tapi jikalau storeSiswa nya error, maka sistem akan menjalankan perintah nan suka-suka didalam function
catch()..


Bagi route mentah cak bagi store siswa

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

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

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

.... public function store_siswa() {     $data = new Siswa;     $data->nama = request('jenama');     $data->alamat = request('alamat');     $data->save();      return response()->json('sukses', 200); } ....

Didalam function tersebut kita membuat perintah cak bagi insert data siswa nya..


Edit Data Siswa

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

Pertama kita buatkan atribut hijau lebih-lebih dahulu didalam vue js nya, kita beri nama
id_edit
seperti berikut:

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

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

.... <div class="table-responsive">     <table class="table table-hover">         <thead>             <tr>                 <th>Merek</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 . tera }}</td>                     <td>@{{ item . sasaran }}</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 takhlik sebuah ruangan baru di privat table nya untuk menambahkan button edit data..

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

Sekarang di vue js nya kita bagi method yunior dengan nama
editData
sebagai halnya 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 = petatar.nama;             this.korban = siswa.alamat;              this.tambahData();         })         .catch(err => {             alert('error');             console.log(err);         })         .finally(() => {          }) } ....

Di script diatas, pada jejer
ke-5
yaitu url untuk get detail dari data siswa nya bersendikan parameter id murid nya, besok akan kita coba buat route dan controller nya..

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

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

Sekarang kalo kalian klik button tambah data nya, maka seharusnya inputan puas modal form nya akan kodrati terisi kredit nya sesuai dengan data yang mau di edit..

vue js edit data

Masa ini bentang lagi routes/web.php
nya, dan tambahkan route baru begitu juga berikut:

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

Kemudian di controller pun tambah function baru dengan segel
get_detail
seperti berikut:

.... public function get_detail($id) {     $dt = Siswa::find($id);      return response()->json($dt, 200); } ....

Lebih lanjut, kita juga melakukan sedikit peralihan pada method
storeSiswa
nya, menjadi begitu juga berikut:

.... storeSiswa: function() {     var form_data = new FormData();     form_data.append("nama", this.etiket);     form_data.append("alamat", this.korban);     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.bahan = null;             this.id_edit = null;              this.getData();         })         .catch(err => {             alert('error');             console.log(err);         })  }, ....

Lega deret ke-6, kita menambahkan atribut id_edit kedalam formData append..

Kemudian, puas baris
ke-16, jikalau response nya sukses, maka atribut
id_edit
ini juga akan turut kita reset menjadi
null..

Kemudian kita juga berbuat perubah puas function store_siswa() di controller nya, menjadi sebagaimana berikut:

.... public function store_siswa() {     $id_edit = request('id_edit');      if ($id_edit != "null") {         $data = Siswa::find($id_edit);         $data->segel = request('keunggulan');         $data->alamat = request('korban');         $data->save();     } else {         $data = new Pesuluh;         $data->segel = request('merek');         $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, sekadar jika bukan, maka akan menjalankan proses tambah data..


Berantas Data

Sekarang kita akan takhlik modul bagi hapus data..

Langkah pertama ialah membuat button hapus nya malar-malar dulu, silahkan modifikasi file index.blade.php nya seperti berikut puas babak 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 mengirimkan parameter id siswa nya..

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

laravel crud vue js

Sekarang di vue js nya kita buat method mentah dengan merek
hapusData
seperti berikut:

.... hapusData: function(id) {     var url = "{{ url('musnahkan-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 bakal hapus data nya:

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

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

.... public function hapus_siswa($id) {     Siswa::where('id', $id)->delete();      return response()->json('sukses', 200); } ....

Sekarang coba kalian refresh pekarangan 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 lalu saya buatkan artikel terpisah, silahkan kalian kunjungi

disini
..


Membuat Pemeriksaan ulang Input

Ternyata kita melewatkan sesuatu nan pas penting, yaitu form validasi..

Cak bagi membuat nya layak mudah, kita cuma teristiadat melakukan sedikit modifikasi lega method
storeSiswa
nya seperti berikut:

.... storeSiswa: function() {      let error = 0;      if (this.segel.length === 0) {         error++;         alert('tera mesti diisi');     }     elseif(this.alamat === 0) {         error++;         alert('alamat wajib diisi');     }      if (error === 0) {         var form_data = new FormData();         form_data.append("nama", this.tanda);         form_data.append("bulan-bulanan", this.alamat);         form_data.append("id_edit", this.id_edit);         form_data.append("file", this.file);          var url = "{{ url('store-murid') }}";          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 leret
ke-4
kita mendefine variable error sebagai penghitung apakah suka-suka nan error maupun bukan..

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

Puas larik
ke-15, jika perhitungan akhir variable
error
setolok dengan 0, maka sistem akan lanjut melakukan submit data..

Oh iya, jangan lupa kembali bahwa setiap atribut nan ada didalam property data juga diubah angka tadinya nya yang semula adalah
null
menjadi
..

laravel vue js


Get All Form Data

Sedikit informasi tambahan sekali lagi nih untuk temen-temen semua.. ketika kita ingin submit data menerobos form, galibnya kita akan cekut kredit-skor dari setiap inputan form nya memperalat FormData secara manual.. contoh  nya seperti plong rang berikut:

laravel vue js

Bayangkan jika kita memiliki banyak inputan didalam form nya, anggap saja misalkan terwalak 20 inputan, jika kita melakukan nya seperti puas gambar diatas, karuan akan sangat melelahkan..

Terimalah buat cara cepet nya, kalian bisa gunakan perintah seperti berikut untuk meng-get semua ponten data yang ada pada form tersebut, sebagai halnya ini:

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

Tapi ada syarat nya, yakni nan pertama, kalian teristiadat menambahkan id unik pada element form nya..

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

Dengan kaidah diatas, kalian lain perlu lagi meng-get satu-satu setiap biji sreg inputan form nya..

Ketika database kita mutakadim n kepunyaan ribuan ataupun bahkan jutaan data, maka kita perlu melakukan pagination momen penarikan datanya..

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

Untuk cara pembuatan nya, kalian bisa kunjungi jerambah berikut:

Panduan lengkap membentuk pagination Laravel VueJS
..

Syukur, semoga bermanfaat..


Support Us

Jikalau artikel ini bermanfaat bakal kamu, membantu mengatasi masalah nan sedang sira hadapi, dia juga bisa bawa kami dengan mengunjungi halaman berikut:

https://saweria.co/sangcahayaid

Peroleh hidayah..