Update atau Edit Data pada Laravel dengan Ajax

Tutorial Sebelumnya:

Tutorial Laravel #14: Menampilkan Data pada Laravel
Tutorial Laravel #15: Menampilkan Data pada Laravel (Menggunakan Ajax)

Pada Tutorial CRUD Laravel Menggunakan Ajax bagian pertama kita sudah membahas Insert atau Add Data. Di tutorial bagian kedua kita juga sudah belajar cara Menampilkan Data di Laravel.

Pada Tutorial CRUD Laravel Menggunakan Ajax bagian ketiga ini kita akan belajar Update atau Edit Data di Laravel Menggunakan Ajax.

Baca Juga:
Tutorial Laravel #16: Update atau Edit Data pada Laravel (Tanpa Ajax)

Update Data pada Laravel Menggunakan Ajax

Tutorial ini adalah lanjutan dari tutorial sebelumnya Menampilkan Data pada Laravel Menggunakan Ajax.

Pada tutorial sebelumnya kita sudah berhasil menampilkan data santri dari database ke view Laravel. Pada view tersebut kita menyediakan tombol edit data ditunjukkan bagian kode program berikut:

<a href="/santri/ubah/{{$s->id_santri}}" class="btn btn-warning btn-sm"><i class="fa fa-pencil"></i></a>

Selanjutnya di tutorial ini kita akan melakukan Update Data Santri tersebut pada Database di project ANISA kita.

1. Tabel yang digunakan adalah tabel santri.

2. Model untuk tabel User dengan nama SantriModel.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Santri extends Model
{
    use HasFactory;

    protected $table = 'santri';
    protected $primaryKey = 'id_santri';
    protected $fillable = ['nm_santri', 'tmp_lahir', 'tgl_lahir', 'alamat', 'no_hp'];
}

3. Kita butuhkan route seperti berikut:

Route::get('santri/ubah/{id_santri}', [SantriController::class, 'ubahsantri'])->name('ubahsantri')->middleware('auth');
Route::post('santri/update', [SantriController::class, 'updatesantri'])->name('updatesantri')->middleware('auth');

Perhatikan kode Routes di atas, pada bagian kode program Route::get('santri/ubah/{id_santri}',... data id_santri yang dikirimkan pada url tombol edit kita istilahkan dengan {id_santri}, dan kita perintahkan untuk menjalankan function ubahsantri pada controller SantriController.php.

Pada bagian route Route::post('santri/update',... kita menggunakan method post, pada route ini kita perintahkan untuk menjalankan function updatesantri dalam controller SantriController.php

Sehingga kode full route kita menjadi seperti berikut ini:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\LoginController;
use App\Http\Controllers\HomeController;
use App\Http\Controllers\SantriController;

/*
|--------------------------------------------------------------------------
| 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('/', [LoginController::class, 'login'])->name('login');
Route::post('actionlogin', [LoginController::class, 'actionlogin'])->name('actionlogin');
Route::get('actionlogout', [LoginController::class, 'actionlogout'])->name('actionlogout');

Route::get('home', [HomeController::class, 'index'])->name('home')->middleware('auth');

Route::get('santri/tampil', [SantriController::class, 'tampilsantri'])->name('tampilsantri')->middleware('auth');
Route::get('santri/tambah', [SantriController::class, 'tambahsantri'])->name('tambahsantri')->middleware('auth');
Route::post('santri/simpan', [SantriController::class, 'simpansantri'])->name('simpansantri')->middleware('auth');
Route::get('santri/ubah/{id_santri}', [SantriController::class, 'ubahsantri'])->name('ubahsantri')->middleware('auth');
Route::post('santri/update', [SantriController::class, 'updatesantri'])->name('updatesantri')->middleware('auth');

4. Selanjutnya pada controller SantriController.php tambahkan kode berikut ini:

Tutorial Selanjutnya:

Tutorial Laravel #18: Delete atau Remove Data pada Laravel
Tutorial Laravel #19: Delete atau Remove Data pada Laravel (Menggunakan Ajax)