CRUD Laravel 10 dan Bootstrap 5 #4: Mengupdate Data
Tags: laravel, bootstrap, webdev
Published: 2024-05-03 00:00:00

**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_:

1. 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_.

```php
// 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:

```php
<!-- 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](http://localhost:8000/books). Setelah itu, cari data buku yang ingin kamu ubah datanya.

![Tampilan halaman books.edit](https://blog.riseku.com/content/images/size/w1000/2024/03/crud-laravel-10-dan-bootstrap-5-halaman-edit.webp)

## 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!