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
38 Comments
  1. Avatar
    Luciana Harder 17 January 2021, at 17:56
    It is with sad regret to inform you StarDataGroup.com is shutting down. It has been a tough year all round and we decided to go out with a bang! Any group of databases listed below is $49 or $149 for all 16 databases in this one time offer. You can purchase it at www.StarDataGroup.com and view samples. - LinkedIn Database 43,535,433 LinkedIn Records - USA B2B Companies Database 28,147,835 Companies - Forex Forex South Africa 113,550 Forex Traders Forex Australia 135,696 Forex Traders Forex UK 779,674 Forex Traders - UK Companies Database 521,303 Companies - German Databases German Companies Database: 2,209,191 Companies German Executives Database: 985,048 Executives - Australian Companies Database 1,806,596 Companies - UAE Companies Database 950,652 Companies - Affiliate Marketers Database 494,909 records - South African Databases B2B Companies Database: 1,462,227 Companies Directors Database: 758,834 Directors Healthcare Database: 376,599 Medical Professionals Wholesalers Database: 106,932 Wholesalers Real Estate Agent Database: 257,980 Estate Agents Forex South Africa: 113,550 Forex Traders Visit www.stardatagroup.com or contact us with any queries. Kind Regards, StarDataGroup.com
  2. Avatar
    Jenny Sanches 02 February 2021, at 06:46
    Use SendBulkMails.com to run email campaigns from your own private dashboard. Cold emails are allowed and won't get you blocked :) Starter Package 50% off sale - 1Mil emails / mo @ $99 USD - Dedicated IP and Domain Included - Detailed statistical reports (delivery, bounce, clicks etc.) - Quick and easy setup with extended support at no extra cost. - Cancel anytime! Regards, www.SendBulkMails.com
  3. Avatar
    Jasper Seitz 03 February 2021, at 21:07
    It is with sad regret to inform you StarDataGroup.com is shutting down. Fire sale till the 7th of Feb. Any group of databases listed below is $49 or $149 for all 16 databases in this one time offer. You can purchase it at www.StarDataGroup.com and view samples. - LinkedIn Database 43,535,433 LinkedIn Records - USA B2B Companies Database 28,147,835 Companies - Forex Forex South Africa 113,550 Forex Traders Forex Australia 135,696 Forex Traders Forex UK 779,674 Forex Traders - UK Companies Database 521,303 Companies - German Databases German Companies Database: 2,209,191 Companies German Executives Database: 985,048 Executives - Australian Companies Database 1,806,596 Companies - UAE Companies Database 950,652 Companies - Affiliate Marketers Database 494,909 records - South African Databases B2B Companies Database: 1,462,227 Companies Directors Database: 758,834 Directors Healthcare Database: 376,599 Medical Professionals Wholesalers Database: 106,932 Wholesalers Real Estate Agent Database: 257,980 Estate Agents Forex South Africa: 113,550 Forex Traders Visit www.stardatagroup.com or contact us with any queries. Kind Regards, StarDataGroup.com
  4. Avatar
    Jacques Felder 15 February 2021, at 23:35
    Use SendBulkMails.com to run email campaigns from your own private dashboard. Cold emails are allowed and won't get you blocked :) - 1Mil emails / mo @ $99 USD - Dedicated IP and Domain Included - Detailed statistical reports (delivery, bounce, clicks etc.) - Quick and easy setup with extended support at no extra cost. - Cancel anytime! Regards, www.SendBulkMails.com
  5. Avatar
    Caitlyn Elphinstone 20 February 2021, at 04:22
    Get your own Covid-19 test results in 15 minutes on Buy-Rapid-Tests.com Simple 3 step process - anyone can do it. We have FDA Authorized Covid-19 Rapid Test Kits - Most orders ship standard within 48 hours. Order minimum is only - 1 Box Each Box includes: - 25 individual Covid-19 tests cassettes - 25 blood droppers - 1 bottle of buffer/testing solution Buy as many boxes as you would like. These tests are perfect for your organization, business, restuarant or group. Price is $36 per test (25 tests per box) and that includes shipping to any location for $50 We offer 10% wholesale price breaks for quantities of 5 boxes or more. Regards, Buy-Rapid-Tests.com
  6. Avatar
    Sammy Gallagher 23 February 2021, at 12:07
    Do you need more clients? We have amazing databases starting at $9.99 until the end of the Month! Visit us at StarDataGroup.com
  7. Avatar
    SendBulkMails.com 25 February 2021, at 22:53
    SendBulkMails.com allows you to reach out to clients via cold email marketing. - 1Mil emails starter package - Dedicated IP and Domain Included - Detailed statistical reports (delivery, bounce, clicks etc.) - Quick and easy setup with extended support at no extra cost. - Cancel anytime! SendBulkMails.com
  8. Avatar
    Edwin Castleton 08 March 2021, at 17:22
    Hi, I'm always asked what is the quickest way to make money online, when you are just starting out? Well here's the definitive answer that question: ==> https://sesforyou.com New Book Reveals How I Built A 7-Figure Online Business Using Nothing But Ethical Email Marketing To Drive Revenue, Sales and Commissions... ==> https://sesforyou.com Regards, SesForYou.com
  9. Avatar
    Pearl Manns 25 March 2021, at 02:35
    Hello, BestLocalData.com has a special package you get any group of databases for $49 or $249 for all 16 databases and unlimited emails for a year(Domain, IP, Dashboard included). You can purchase it on BestLocalData.com and see samples if you are interested.
  10. Avatar
    Andra Noack 28 March 2021, at 03:08
    Your All In One Solution For Creating All The Content You'll Ever Need. Proprietary AI Turns YouTube Videos Into Traffic Getting Articles At The Press Of A Button! We’ve Been Getting Free Autopilot Traffic From Google Without SEO Experience For Over 2 Years By Converting Others YouTube Videos Into Articles… https://warriorplus.com/o2/a/gmvfs/0
  11. Avatar
    Eli Poirier 29 March 2021, at 18:43
    Need extra income? A fully hosted, done for you content + monetisation and a stunning design web based software that creates a fully automated done for you cryptocurrency affiliate site, Visit us: https://warriorplus.com/o2/a/f5s4y/0
  12. Avatar
    Micheline Llanes 01 April 2021, at 03:45
    What is Link Bypass? Link Bypass allows you to easily bypass any sales page and generate a new buy link with no coding required and just a few clicks of your mouse. How does Link Bypass work? Step #1 - Choose any sales page you want to bypass and link bypass with automatically create a custom payment link Step #2 - Add your new link to any landing page, sales page, or email with a few clicks of your mouse (Use your favorite page-building software or simply ‘copy and paste’) Step #3 - Boost conversions and make more money on affiliate promotions Visit us: https://warriorplus.com/o2/a/q8rmt/0
  13. Avatar
    Sheri Camfield 08 April 2021, at 03:34
    Hey, It was nice speaking to you the other day, this is the service I was telling you about that helped us boost our ROI almost 2000% Its a company called Lifemail.studio sorry it took so long to get back to you. They allow you to send any email doesn't matter what. We dealt with a guy named Michael, he was friendly and got us setup really quickly. Regards, Sheri
  14. Avatar
    Dorthy Crittenden 09 April 2021, at 00:59
    For Anyone Looking To Start, Scale and Grow A Digital Business In 2021 New Book Reveals How I Built A 7-Figure Online Business Using Nothing But Ethical Email Marketing To Drive Revenue, Sales and Commissions... $4.99 to access the secret email system. Sesforyou.com!
  15. Avatar
    Juan Montoya 13 April 2021, at 20:14
    Hello, Send unlimited emails to unlimited lists with one click and no monthly fees! $99 once off! LifeMailNow.com
  16. Avatar
    Jacquelyn Mahlum 17 April 2021, at 08:17
    Do you need clients? We compiled some of the world's top databases for you at ridiculous low prices. $49 for any of our databases or $99 for all 16 databases! Visit BestLocalData.com Regards, Jacquelyn
  17. Avatar
    Mildred Tolliver 28 April 2021, at 06:46
    Hey! BestLocalData has an amazing special. 16 databases for $99. LinkedIn(43million records) USA B2B (28 million companies), Australia, South Africa, UK, Germany and all of that included. Instant delivery! https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=7S34LZQSKKQHG Or check out more on our website! Regards, Mildred
  18. Avatar
    Milan Rudall 11 May 2021, at 11:57
    Hello from SendBulkMails.com, We have a special limited offer for you to send unlimited emails. We allow non-permission based emails and you won't ever get blocked. We also buy your domain for you and give you a clean IP and setup your DNS records. Check us out on SendBulkMails.com
  19. Avatar
    Hulda David 12 May 2021, at 02:41
    Hello from BestLocalData.com Due to the pandemic BestLocalData.com is shutting down on the 14th of May. We have more than a 100 million records of Key Executives all over the world. We hope that this Data will serve other companies to succeed in their marketing efforts. We have reduced all the prices to next to nothing on our website BestLocalData.com We wish you the best in your future endeavours.
Leave a Comment