Tutorial Sebelumnya:

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

Pada Tutorial CRUD Laravel 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 bagian ketiga ini kita akan belajar Update atau Edit Data di Laravel.

Baca Juga:
Tutorial Laravel #17: Update atau Edit Data pada Laravel (Menggunakan Ajax)

Update Data pada Database dengan Laravel

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

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:

public function ubahsantri($id_santri)
{
   $santri = SantriModel::select('*')
             ->where('id_santri', $id_santri)
             ->get();

   return view('ubahsantri', ['santri' => $santri]);
}

public function updatesantri(Request $request)
{
   $santri = SantriModel::where('id_santri', $request->id_santri)
             ->update([
                    'nm_santri' => $request->nm_santri,
                    'tmp_lahir' => $request->tmp_lahir,
                    'tgl_lahir' => $request->tgl_lahir,
                    'alamat' => $request->alamat,
                    'no_hp' => $request->no_hp,
             ]);

   return redirect()->route('tampilsantri');
}

Perhatikan kode controller di atas, data id_santri yang dikirimkan dari route tadi kita tangkap dalam parameter function ubahsantri seperti pada kode berikut function ubahsantri($id)

Selanjutnya kita ambil data santri dari database dengan menggunakan query builder yang di tunjukkan pada bagian kode berikut:

$santri = SantriModel::select('*')
          ->where('id_santri', $id_santri)
          ->get();

Pada bagian kode program where('id_santri', $id_santri) berfungsi untuk menyeleksi atau memfilter data santri sesuai id_santri.

Kemudian kita passing data nya ke view ubahsantri.blade.php yang ditunjuukan pada bagian kode program berikut:

return view('ubahsantri', ['santri' => $santri]);

Seperti pada saat membuat proses input data ke database, data yang dikirim dari form kita tangkap dengan mendeklarasi kan Request dalam parameter function updatesantri ini. Kemudian data-data yang dikirim dari form edit akan tersimpan didalam variabel $request, ditunjukkan pada kode program berikut function updatesantri(Request $request)

Untuk proses update datanya ke database kita menggunakan query builder seperti pada bagian kode program berikut:

$santri = SantriModel::where('id_santri', $request->id_santri)
          ->update([
             'nm_santri' => $request->nm_santri,
             'tmp_lahir' => $request->tmp_lahir,
             'tgl_lahir' => $request->tgl_lahir,
             'alamat' => $request->alamat,
             'no_hp' => $request->no_hp,
          ]);

Dan terakhir pada bagian kode program return redirect()->route('tampilsantri'); kita alihkan kembali halaman nya ke route tampilsantri yang menampilkan semua data santri.

5. Sekarang buat view baru dengan nama ubahsantri.blade.php karena kita akan menampilkan data santri yang ingin di edit tadi di dalam form edit.

Berikut isi dari file ubahsantri.blade.php:

@extends('master')

@section('konten')
<h3>Ubah Data Santri</h3>
  @foreach($santri as $s)
    <form method="post" action="{{route('updatesantri')}}">
      @csrf
      <input type="hidden" name="id_santri" value="{{$s->id_santri}}">
      <div class="form-group">
        <label>Nama Santri</label>
        <input type="text" name="nm_santri" value="{{$s->nm_santri}}" class="form-control" placeholder="Nama Santri" required="">
      </div>
      <div class="form-group">
        <label>Tempat Lahir</label>
        <input type="text" name="tmp_lahir" value="{{$s->tmp_lahir}}" class="form-control" placeholder="Tempat Lahir" required="">
      </div>
      <div class="form-group">
        <label>Tanggal Lahir</label>
        <input type="date" name="tgl_lahir" value="{{$s->tgl_lahir}}" class="form-control" placeholder="Tanggal Lahir" required="">
      </div>
      <div class="form-group">
        <label>Alamat</label>
        <textarea name="alamat" rows="3" class="form-control" placeholder="Alamat" required="">{{$s->alamat}}</textarea>
      </div>
      <div class="form-group">
        <label>No. Hp</label>
        <input type="text" name="no_hp" value="{{$s->no_hp}}" class="form-control" placeholder="No. Hp" required="">
      </div>
      <div class="form-group text-right">
        <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Update Data</button>
      </div>
    </form>
  @endforeach
@endsection

Perhatikan kode view di atas, kita menampilkan data santri yang ingin di edit ke dalam form edit menggunakan perulangan foreach. seperti pada bagian kode berikut:

@foreach($santri as $s)
    <form method="post" action="{{route('updatesantri')}}">
      ...
    </form>
@endforeach

Jangan lupa untuk menggunakan fungsi csrf protection yang sudah dijelaskan juga pada tutorial sebelumnya tentang kegunaannya. hanya dengan menambahkan kode @csrf

Pada form edit ini kita menetapkan action nya ke route updatesantri dengan menggunakan method post.

Sekarang coba kita jalankan dengan mengakses localhost:8000/santri maka akan ditampilkan daftar santri, silahkan klik tombol edit sesuai dengan data santri yang ingin di lakukan perubahan data.

Data santri yang akan diubah akan masuk ke dalam isian form update:

Setelah melakukan perubahan data klik tombol Update Data untuk dieksekusi update ke database.

Maka sekarang data berhasil di update.

Sampai di sini kita telah berhasil membuat Update Data pada Database dengan Laravel. Untuk proses penghapusan data dari database akan kita lanjutkan pada Tutorial CRUD Laravel Part 4.

Tutorial Selanjutnya:

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