Mengubah Input Data dengan Inline Form (laravel 5 + X-Editable)

Mengubah Input Data dengan Inline Form (laravel 5 + X-Editable)

Bagi seorang developer khususnya web, Penulis yakin bahwa terkadang membingungkan untuk menentukan cara saat pengisian form yang hanya membutuhkan satu inputan saja. Ada yang memilih memanfaatkan modal bawaan dari bootstrap guna mengatasinya. Ada pula yang melemparkan ke halaman baru hanya untuk mengisi form yang memerlukan satu inputan saja tersebut. Maka dari itu Penulis akan berbagi pengalaman mengenai masalah tersebut sesuai dengan pengalaman yang didapatkan.

Cara lain untuk mendapatkan solusinya adalah dengan menggunakan X-editable, librari yang dapat dikombinasikan dengan bootstrap, jquery-ui, atau jquery saja. Untuk lebih lengkap dapat mempelajarinya pada halaman situs yang link-nya sudah disertakan. Namun pada tutorial kali ini akan dibahas cara menggunakan X-editable dengan integrasi ke Laravel 5.5, yang dirasa menjadi salah satu pilihan terpopuler saat ini untuk kategori framework PHP. Berikut langkah-langkahnya:

  • Menambahkan file css dan javascript
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>

Tambahkan source code di atas untuk css pada element head di halaman web Anda. Selanjutnya tambahkan untuk javascript pada element body paling bawah (hal ini tergantung kebiasaan peletakan masing-masing) di bawah ini.

<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
  • Membuat form input untuk perubahan data
<h2>
    <a href=”javascript:void(null)” class=”inline-edit” data-type=”text” data-name=”name” data-pk=”{{ $user->id }}” data-url=”{{ route(’user.update’) }}”>
        {{ $user->name }}
    </a>
</h2>

Source code di atas diimplementasikan untuk menampilkan nama user dengan element <h2> untuk heading. Atribut class digunakan untuk menjalankan function javascript yang akan dibuat selanjutnya. Untuk atribut data-type digunakan untuk mendeskripsikan tipe input yang diinginkan saat pengisian, yang mirip dengan atribut type pada element input. Atribut data-name mendefinisikan nama field di tabel yang dikehendaki untuk dirubah. Pada kasus ini dicontohkan merubah field name pada tabel user.

Untuk atribut data-pk diisi id dari data user yang ingin dirubah. Sedangkan atribut data-url difungsikan untuk menjalankan perintah pengubahan data sesuai inputan. Semua variabel di atas sebelumnya telah didefinisikan untuk mengambil data user.

  • Membuat fungsi javascript untuk mengaktifkan x-editable
$(document).ready(function() {
    $(‘.inline-edit’).editable({
        model: ‘popup’,
        type: ‘POST’,
        dataType: ‘JSON’,
        params: function(params) {
            params._token = ‘{{ csrf_token }}’;
            params.name = $(this).editable().data(‘name’);
            return params;
        }
    });
});

Masukkan source code di atas pada element javascript yang diletakkan pada halaman yang sama dengan form input yang telah dibuat sebelumnya. Hal ini dimaksudkan agar saat dijalankan akan memunculkan form input milik x-editable. Atribut model digunakan untuk memilih output apa yang akan disajikan oleh x-editable, diantaranya ada popup dan inline. Tipe form input didefinisikan dengan method POST yang diatur pada atribut type pada fungsi di atas, dengan tipe data JSON yang diatur pula pada atribut dataType.

Untuk verifikasi token pada bawaan Laravel diatur pada fungsi params dengan atribut _token, dan atribut name untuk mengatur field pada tabel yang diambil dari input dengan atribut data-name. Lalu action form akan dijalankan oleh url yang telah ditulis pada input dengan atribut data-url.

  • Membuat route untuk mengelola fungsi x-editable

Tambahkan route dengan method POST yang menggunakan prefix /user, seperti berikut:

Route::post(‘user/update’, ‘UserController@update’)->name(‘user.update’);

Sebelumnya pastikan telah membuat controller untuk mengelola data user dengan nama UserController. Atribut name pada route digunakan untuk memberikan nama pada route, yang sebelumnya telah dipanggil pada form input pada atribut data-url.

  • Membuat fungsi pada controller untuk mengeksekusi perubahan data

Tambahkan fungsi dengan mengimplementasikan return response untuk data tipe JSON (Restful API). Berikut source code-nya:

public function update() {
    try {
        $id = request()->get(‘pk’);
        $key = request()->get(‘name’);
        $value = request()->get(‘value’);
                   
        $user = User::findOrFail($id);
        $user->update([$key => $value]);
   } catch(\Exception $e) {
       return response()->json(‘message’ => $e->getMessage(), 400);
   }
 
   return response()->json(‘message’ => ‘Berhasil’, 200);
}

Letakkan pada UserController, lalu jalankan pada halaman web yang telah ditambahkan beberapa source code seperti langkah-langkah di atas.

Sekian tahapan pengimplementasian X-editable dengan kolaborasi Laravel sebagai back end. Semoga dapat berjalan denga mulus. Jika ada pertanyaan silahkan berikan komentar di bawah ini. Good job Guys!


Author
Mohammad Anang23 posts

Remember to eat, sleep, and blink!



Related articles
0 Comments
  1. Tidak Ada Komentar.
Leave a Comment