Tutorial Laravel 13 #7: Edit dan Update Data ke Database

Langkah 1 - Membuat Method Edit dan Update di Controller
- Function Edit
- Function Update
Langkah 2 - Membuat View Form Edit Data
Langkah 3 - Uji Coba Edit dan Update Product
Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita telah belajar bagaimana cara menampilkan detail data produk berdasarkan ID. Kali ini, kita akan mempelajari cara mengedit dan memperbarui (update) data produk yang ada di database menggunakan Laravel 13.

Dengan memahami materi ini, teman-teman akan mengetahui bagaimana cara mengambil data lama dari database, menampilkannya ke dalam form edit, melakukan validasi, serta menyimpan perubahan ke dalam database.

Langkah 1 - Membuat Method `Edit` dan `Update` di Controller

Untuk mengedit dan memperbarui data, kita perlu menambahkan dua method berikut di dalam ProductController.php.

METHOD	KETERANGAN
`edit`	Menampilkan form edit dengan data lama dari database
`update`	Memproses perubahan data dan menyimpannya ke dalam database

Silakan buka file app/Http/Controllers/ProductController.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.

app/Http/Controllers/ProductController.php

<?php

namespace App\Http\Controllers;

//import model product
use App\Models\Product;

//import return type View
use Illuminate\View\View;

//import return type redirectResponse
use Illuminate\Http\Request;

//import Http Request
use Illuminate\Http\RedirectResponse;

//import Facades Storage
use Illuminate\Support\Facades\Storage;

class ProductController extends Controller
{
    /**
     * index
     *
     * @return void
     */
    public function index() : View
    {
        //get all products
        $products = Product::latest()->paginate(10);

        //render view with products
        return view('products.index', compact('products'));
    }

    /**
     * create
     *
     * @return View
     */
    public function create(): View
    {
        return view('products.create');
    }

    /**
     * store
     *
     * @param  mixed $request
     * @return RedirectResponse
     */
    public function store(Request $request): RedirectResponse
    {
        //validate form
        $request->validate([
            'image'         => 'required|image|mimes:jpeg,jpg,png|max:2048',
            'title'         => 'required|min:5',
            'description'   => 'required|min:10',
            'price'         => 'required|numeric',
            'stock'         => 'required|numeric'
        ]);

        //upload image
        $image = $request->file('image');
        $image->storeAs('products', $image->hashName(), 'public');

        //create product
        Product::create([
            'image'         => $image->hashName(),
            'title'         => $request->title,
            'description'   => $request->description,
            'price'         => $request->price,
            'stock'         => $request->stock
        ]);

        //redirect to index
        return redirect()->route('products.index')->with(['success' => 'Data Berhasil Disimpan!']);
    }

    /**
     * show
     *
     * @param  mixed $id
     * @return View
     */
    public function show(string $id): View
    {
        //get product by ID
        $product = Product::findOrFail($id);

        //render view with product
        return view('products.show', compact('product'));
    }

    /**
     * edit
     *
     * @param  mixed $id
     * @return View
     */
    public function edit(string $id): View
    {
        //get product by ID
        $product = Product::findOrFail($id);

        //render view with product
        return view('products.edit', compact('product'));
    }

    /**
     * update
     *
     * @param  mixed $request
     * @param  mixed $id
     * @return RedirectResponse
     */
    public function update(Request $request, $id): RedirectResponse
    {
        //validate form
        $request->validate([
            'image'         => 'image|mimes:jpeg,jpg,png|max:2048',
            'title'         => 'required|min:5',
            'description'   => 'required|min:10',
            'price'         => 'required|numeric',
            'stock'         => 'required|numeric'
        ]);

        //get product by ID
        $product = Product::findOrFail($id);

        //check if image is uploaded
        if ($request->hasFile('image')) {

            //hapus gambar lama
            Storage::disk('public')->delete('products/'.$product->image);

            //upload gambar baru
            $image = $request->file('image');
            $image->storeAs('products', $image->hashName(), 'public');

            //update product with new image
            $product->update([
                'image'         => $image->hashName(),
                'title'         => $request->title,
                'description'   => $request->description,
                'price'         => $request->price,
                'stock'         => $request->stock
            ]);

        } else {

            //update product without image
            $product->update([
                'title'         => $request->title,
                'description'   => $request->description,
                'price'         => $request->price,
                'stock'         => $request->stock
            ]);
        }

        //redirect to index
        return redirect()->route('products.index')->with(['success' => 'Data Berhasil Diubah!']);
    }
}

Dari perubahan kode di atas, pertama kita import Facades Storage dari Laravel. Ini akan kita gunakan untuk menghapus file gambar product lama saat gambar diperbarui.

//import Facades Storage
use Illuminate\Support\Facades\Storage;

Kemudian, di dalam class ProductController, kita membuat 2 method baru, yaitu:

Function Edit

Method ini akan kita gunakan untuk menampilkan halaman form edit data product dan di dalam method tersebut terdapat parameter $id yang mana nilainya diambil dari ID yang ada di dalam URL browser.
```
public function edit(string $id): View
{
    //...
}
```
Di dalam method tersebut, kita melakukan get data ke dalam database menggunakan Model berdasarkan ID.
```
//get product by ID
$product = Product::findOrFail($id);
```
Setelah data didapatkan, kita kirimkan data tersebut ke dalam view menggunakan compact.
```
//render view with product
return view('products.edit', compact('product'));
```

Function Update

Method ini akan kita gunakan untuk proses update data product ke dalam database. Di dalam method ini terdapat 2 parameter, yaitu $request dan $id.

public function update(Request $request, $id): RedirectResponse
{
    //...
}

Di dalam method di atas, pertama-tama kita membuat validasi terlebih dahulu.

//validate form
$request->validate([
    'image'         => 'image|mimes:jpeg,jpg,png|max:2048',
    'title'         => 'required|min:5',
    'description'   => 'required|min:10',
    'price'         => 'required|numeric',
    'stock'         => 'required|numeric'
]);

Setelah membuat validasi, selanjutnya kita melakukan get data product ke dalam database menggunakan Model berdasarkan ID atau $id.

//get product by ID
$product = Product::findOrFail($id);

Kemudian kita membuat sebuah kondisi untuk gambar, jika ada request file dengan nama image, maka kita akan upload gambar baru dan hapus gambar lama.

//check if image is uploaded
if ($request->hasFile('image')) {

	//hapus gambar lama

	//upload gambar baru

	//update dengan gambar

} else {

	//update tanpa gambar

}

Di atas, jika ada sebuah request dengan nama image, maka kita akan melakukan beberapa aksi, yaitu:

Hapus gambar lama

//delete old image
Storage::delete('products/'.$product->image);

Upload gambar baru

//upload new image
$image = $request->file('image');
$image->storeAs('products', $image->hashName(), 'public');

Update data product

//update product with new image
$product->update([
    'image'         => $image->hashName(),
    'title'         => $request->title,
    'description'   => $request->description,
    'price'         => $request->price,
    'stock'         => $request->stock
]);

Tapi jika request image tidak ada, maka kita cukup update data product tanpa gambar.

//update product without image
$product->update([
    'title'         => $request->title,
    'description'   => $request->description,
    'price'         => $request->price,
    'stock'         => $request->stock
]);

Setelah itu, kita tinggal redirect ke dalam sebuah route dengan nama products.index dengan menambahkan flash data.

//redirect to index
return redirect()->route('products.index')->with(['success' => 'Data Berhasil Diubah!']);

Langkah 2 - Membuat View Form Edit Data

Setelah berhasil menambahkan 2 method baru di dalam controller, maka kita lanjutkan membuat sebuah view untuk menampilkan form edit data.

Silakan teman-teman buat file baru di dalam folder resources/views/products/ dengan nama edit.blade.php, kurang lebih struktur foldernya akan terlihat seperti ini:

resources
└── views
    └── products
        ├── index.blade.php
        ├── create.blade.php
        ├── show.blade.php
        └── edit.blade.php

Setelah itu, silakan buka file resources/views/products/edit.blade.php, kemudian masukkan kode berikut ini di dalamnya.

NOTE: UI-nya kita samakan seperti tutorial sebelumnya dan menggunakan Tailwind CSS via CDN.

resources/views/products/edit.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Edit Products - SantriKoding.com</title>

    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- CKEditor (opsional, untuk rich text description) -->
    <script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
</head>
<body class="bg-gray-100">

    <div class="max-w-6xl mx-auto px-4 py-10">
        <div class="text-center">
            <h3 class="text-2xl font-bold mb-2">Tutorial Laravel 13 untuk Pemula</h3>
            <h5 class="text-sm">
                <a href="https://santrikoding.com" class="text-blue-600 hover:underline">www.santrikoding.com</a>
            </h5>
            <hr class="my-6 border-gray-200">
        </div>

        <div class="bg-white rounded-2xl shadow-sm border border-gray-200">
            <div class="p-6">

                <div class="flex items-center justify-between mb-6">
                    <h4 class="text-lg font-semibold text-gray-900">Edit Product</h4>
                    <a href="{{ route('products.index') }}"
                       class="px-4 py-2 rounded-lg bg-gray-900 text-white text-sm font-semibold hover:bg-gray-800 transition">
                        BACK
                    </a>
                </div>

                <form action="{{ route('products.update', $product->id) }}" method="POST" enctype="multipart/form-data" class="space-y-5">
                    @csrf
                    @method('PUT')

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">IMAGE</label>

                        <div class="mb-3">
                            <img src="{{ asset('/storage/products/'.$product->image) }}"
                                 class="w-[200px] rounded-lg border border-gray-200"
                                 alt="{{ $product->title }}">
                        </div>

                        <input type="file" name="image"
                               class="block w-full text-sm
                                      file:mr-4 file:py-2 file:px-4
                                      file:rounded-lg file:border-0
                                      file:bg-gray-900 file:text-white
                                      hover:file:bg-gray-800
                                      border border-gray-200 rounded-lg bg-white">
                        @error('image')
                            <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">TITLE</label>
                        <input type="text" name="title" value="{{ old('title', $product->title) }}"
                               placeholder="Masukkan Title Product"
                               class="w-full border border-gray-200 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200">
                        @error('title')
                            <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">DESCRIPTION</label>
                        <textarea name="description" id="description" rows="6"
                                  class="w-full border border-gray-200 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
                                  placeholder="Masukkan Description Product">{{ old('description', $product->description) }}</textarea>
                        @error('description')
                            <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">PRICE</label>
                            <input type="number" name="price" value="{{ old('price', $product->price) }}"
                                   placeholder="Masukkan Harga Product"
                                   class="w-full border border-gray-200 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200">
                            @error('price')
                                <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                            @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">STOCK</label>
                            <input type="number" name="stock" value="{{ old('stock', $product->stock) }}"
                                   placeholder="Masukkan Stock Product"
                                   class="w-full border border-gray-200 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200">
                            @error('stock')
                                <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="flex items-center gap-2">
                        <button type="submit"
                                class="inline-flex items-center justify-center px-4 py-2 rounded-lg
                                       bg-blue-600 text-white text-sm font-semibold hover:bg-blue-700 transition">
                            UPDATE
                        </button>

                        <button type="reset"
                                class="inline-flex items-center justify-center px-4 py-2 rounded-lg
                                       bg-amber-500 text-white text-sm font-semibold hover:bg-amber-600 transition">
                            RESET
                        </button>
                    </div>

                </form>

            </div>
        </div>
    </div>

    <script>
        CKEDITOR.replace('description');
    </script>
</body>
</html>

Dan jangan lupa, untuk halaman form edit, pastikan teman-teman menambahkan method PUT di dalamnya. Ini menandakan bahwa form tersebut adalah form edit data.

@method('PUT')

Langkah 3 - Uji Coba Edit dan Update Product

Silahkan teman-teman klik button EDIT di salah satu data product yang dimiliki, jika berhasil maka akan menampilkan halaman edit data product.

Setelah itu, silakan teman-teman ubah beberapa field, lalu klik button UPDATE. Jika berhasil, maka data akan ter-update dan akan muncul notifikasi sukses dari flash session success.

Kesimpulan

Dalam artikel ini, kita telah mempelajari cara mengedit dan memperbarui (update) data product di Laravel. Kita telah membuat method edit dan update, menggunakan route resource, membuat form edit, serta menguji proses update data.

Pada artikel berikutnya, kita akan belajar bagaimana cara membuat proses delete data product dari database di Laravel 13.

Terima kasih

Artikel ini dibaca sebanyak 2.654 kali

Laravel

On This Page

Langkah 1 - Membuat Method `Edit` dan `Update` di Controller

Function Edit

Function Update

Langkah 2 - Membuat View Form Edit Data

Langkah 3 - Uji Coba Edit dan Update Product

Kesimpulan

KEBIJAKAN KOMENTAR

SERI ARTIKEL

COMPANY

BELAJAR

KOMUNITAS

SEARCH

On This Page

Tutorial Laravel 13 #7: Edit dan Update Data ke Database

Langkah 1 - Membuat Method Edit dan Update di Controller

Function Edit

Function Update

Langkah 2 - Membuat View Form Edit Data

Langkah 3 - Uji Coba Edit dan Update Product

Kesimpulan

KEBIJAKAN KOMENTAR

SERI ARTIKEL

SEARCH

Langkah 1 - Membuat Method `Edit` dan `Update` di Controller