Hai, Sobat Risereaders!
Pada artikel sebelumnya, kita telah mempelajari proses menambahkan data baru ke dalam aplikasi kita. Dan juga, cara menyimpan gambar ketika melakukan penambahan data di Laravel.
Sekarang, kita akan melanjutkan pembuatan aplikasi CRUD Laravel dan Bootstrap, yaitu pada tahap mengupdate data aplikasi kita.
Cara Mengupdate Data Aplikasi CRUD
Langkah-langkah cara mengupdate data CRUD yang sudah ada di dalam database:
- Membuat Method Edit dan Update
Langkah pertama dalam proses mengupdate data adalah dengan membuat method edit dan update di dalam controller BookController.
Method edit akan bertanggung jawab menampilkan form untuk mengedit data, sementara method update akan digunakan untuk memperbarui data di database.
// app/Http/Controllers/BookController.php
public function edit(Book $book)
{
// Menampilkan halaman form edit data
return view('books.edit', compact('book'));
}
public function update(Request $request, Book $book)
{
// Validasi data input
$validatedData = $request->validate([
'cover' => 'nullable|image|mimes:jpg,png,jpeg,gif|max:2048',
'title' => 'required|string|max:255',
'description' => 'required|string',
]);
// Jika mengunggah gambar cover baru
if ($request->hasFile('cover')) {
// Hapus gambar cover lama
Storage::delete("public/books/$book->cover");
// Upload gambar cover baru
$cover = $request->file('cover');
$cover->storeAs('public/books', $cover->hashName());
// Simpan nama file gambar cover baru ke database
$validatedData['cover'] = $cover->hashName();
}
// Update data di database
$book->update($validatedData);
// Mengalihkan halaman ke index dengan pesan sukses
return redirect()->route('books.index')->with('success', 'Data buku berhasil diperbarui!');
}
Dalam method edit, kita menggunakan route model binding untuk langsung mengambil data buku yang akan diedit dari database.
Sedangkan dalam method update, kita melakukan validasi terhadap data input yang diterima sebelum memperbarui data di database.
Ketika kita melakukan update data, jika ada gambar cover baru yang ditambahkan, maka akan menghapus gambar cover yang lama menggunakan Storage::delete. Jangan lupa untuk mengimport Storage.
use Illuminate\Support\Facades\Storage;
2. Membuat View Edit Data
Setelah membuat method di controller, langkah berikutnya adalah membuat tampilan untuk form edit data.
Buatlah file edit.blade.php di dalam folder resources/views/books/ dan tambahkan kode berikut:
<!-- resources/views/books/edit.blade.php -->
<!-- Meng-extend layout dari 'layouts.app' -->
@extends('layouts.app')
<!-- Judul halaman -->
@section('title', 'Edit Buku')
@section('content')
<div class="row justify-content-center">
<div class="col-md-8">
<!-- Menampilkan judul halaman yang telah diset -->
<h2>@yield('title')</h2>
<div class="card mt-3">
<div class="card-body">
<form action="{{ route('books.update', $book->id) }}" method="POST" enctype="multipart/form-data">
@csrf
@method('PUT')
<div class="row justify-content-center">
<div class="col-6 col-sm-4 mb-3 order-sm-last">
<img src="{{ asset('storage/books/' . $book->cover) }}" alt=""
class="img-fluid border rounded">
</div>
<div class="col-sm-8">
<div class="mb-3">
<label class="form-label" for="cover">Cover</label>
<input type="file" class="form-control @error('cover') is-invalid @enderror"
id="cover" name="cover">
@error('cover')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="mb-3">
<label class="form-label" for="title">Judul</label>
<input type="text" class="form-control @error('title') is-invalid @enderror"
id="title" name="title" value="{{ old('title', $book->title) }}">
@error('title')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="mb-3">
<label class="form-label" for="description">Deskripsi</label>
<textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description"
rows="3">{{ old('description', $book->description) }}</textarea>
@error('description')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div>
</div>
<a href="{{ route('books.index') }}" class="btn btn-outline-primary me-2">Kembali</a>
<button type="submit" class="btn btn-primary">Simpan</button>
</form>
</div>
</div>
</div>
</div>
@endsection
Dalam tampilan ini, kita menggunakan layout layouts.app yang sudah kita buat pada tahap persiapan awal aplikasi CRUD.
Form ini diproteksi dengan CSRF token dan method PUT, sesuai dengan standar RESTful untuk proses update data.
3. Menjalankan Aplikasi
Terakhir, mari kita uji coba aksi update data yang telah kita tambahkan. Jalankan aplikasi Laravel terlebih dahulu:
php artisan serve
Buka browser kamu, dan kunjungi http://localhost:8000/books. Setelah itu, cari data buku yang ingin kamu ubah datanya.
Penutup
Dalam artikel ini, kita telah mempelajari langkah-langkah untuk mengupdate data di dalam aplikasi CRUD kita. Belajar cara membuat method edit dan update, serta membuat halaman books.edit untuk menampilkan form edit data.
Pada artikel berikutnya dan juga terakhir, kita akan mempelajari cara menghapus data dari aplikasi CRUD kita. Jadi, tetap semangat belajar dan jangan lewatkan artikel selanjutnya!
Top comments (0)