Update Data

Seperti pada namanya, fungsi ini bertujuan untuk mengupdate data berdasarkan id. Silakan teman-teman buka file ImageController.php yang terletak didalam folder app/Http/Controller/ kemudian pada function edit, masukan kode berikut ini:

public function edit(Image $image)
    {
        return view('images.edit', compact('image'));
    }

Ketika fungsi ini dipanggil didalam rute, maka otomatis akan memanggil view yang terletak didalam folder resources/views/images/edit.blade.php.

Edit View

Silakan tambahkan file baru didlam folder resources/views/images/, buat dengan nama edit.blade.php.

resources/
│── views/
│   │── images/
│   │   │── edit.blade.php

Buka file edit.blade.php kemudian masukkan kode berikut ini:

@extends('layouts.app')

@section('content')
<div class="max-w-lg mx-auto bg-white p-6 shadow rounded">
    <h2 class="text-2xl font-bold mb-4">Edit Image</h2>

    <form action="{{ route('images.update', $image->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="mb-4">
            <label class="block text-gray-700">Title</label>
            <input type="text" name="title" value="{{ $image->title }}" class="w-full border rounded p-2">
        </div>

        <div class="mb-4">
            <label class="block text-gray-700 mb-2">Current Image</label>
            <img src="{{ asset('storage/'.$image->image) }}" alt="{{ $image->title }}" class="w-full h-auto rounded">
        </div>

        <div class="mb-4">
            <label class="block text-gray-700">Change Image</label>
            <input type="file" name="image" class="w-full border rounded p-2">
        </div>

        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">Update</button>
    </form>
</div>
@endsection

script diatas merupakan contoh kecil halaman untuk mengunggah gambar dengan Laravel, mencakup input untuk judul dan gambar, serta pengamanan menggunakan CSRF.

Update Data

Seperti pada namanya, fungsi ini bertujuan untuk mengupdate data yang diinput dari form edit sebelumnya yang sudah kita buat. Silakan teman-teman buka file ImageController.php yang terletak didalam folder app/Http/Controller/ kemudian pada function update, masukan kode berikut ini:

public function update(Request $request, Image $image)
    {
        $request->validate(['title' => 'required']);

        if ($request->hasFile('image')) {
            $imagePath = $request->file('image')->store('images', 'public');
            $image->update(['title' => $request->title, 'image' => $imagePath]);
        } else {
            $image->update(['title' => $request->title]);
        }

        return redirect()->route('images.index')->with('success', 'Image updated successfully');
    }

Fungsi diatas berfungsi untuk menangani pembaruan data gambar dengan validasi bahwa title harus diisi. Jika ada gambar baru yang diunggah, gambar tersebut disimpan, dan data diperbarui di database. Jika tidak, hanya title yang diperbarui. Setelah berhasil, pengguna dialihkan ke halaman daftar gambar dengan pesan sukses Image updated successfully

Start the app

Pastikan apache dan mysql didalam XAMPP sudah dijalankan, kemudian jalankan aplikasi dengan cara menjalankan perintah

php artisan serve

Kemudian klik button edit pada salah satu data. Maka akan terlihat seperti berikut ini:

Terlihat kita sudah berhasil membuat halaman edit data dan fungsi update data dengan laravel 12, pada materi berikutnya, kita akan membuat fitur delete data terhadap image dan title yang berhasil kita upload berdasarkan id nya masing-masing.