Tutorial Laravel 9 #5 : Edit dan Update Data ke Database


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder SantriKoding.com
Tutorial Laravel 9 #5 : Edit dan Update Data ke Database

Halo teman-teman semuanya, di artikel sebelumnya kita telah belajar bagaimana cara membuat proses insert data ke dalam database dan melakukan upload gambar di Laravel 9. Pada artikel kali ini kita akan belajar bagaimana cara melakukan proses edit dan update data ke dalam database.

Dan Kita juga akan belajar bagaimana cara melakukan update gambar jika ada sebuah file baru yang diupload dan gambar yang lama akan dihapus dari server.

Langkah 1 - Menambahkan Method Edit dan Update

Untuk proses edit dan update data, kita akan menambahkan 2 method baru di dalam controller post, yaitu edit dan update. Untuk method edit akan kita gunakan untuk menampilkan halaman edit dan untuk method update akan digunakan untuk memproses data yang sudah di edit.

Silahkan buka file app/Http/Controllers/PostController.php, kemudian ubah semua kode-nya menjadi seperti berikut ini :

<?php

namespace App\Http\Controllers;

use App\Models\Post;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class PostController extends Controller
{    
    /**
     * index
     *
     * @return void
     */
    public function index()
    {
        //get posts
        $posts = Post::latest()->paginate(5);

        //render view with posts
        return view('posts.index', compact('posts'));
    }
    
    /**
     * create
     *
     * @return void
     */
    public function create()
    {
        return view('posts.create');
    }

    /**
     * store
     *
     * @param Request $request
     * @return void
     */
    public function store(Request $request)
    {
        //validate form
        $this->validate($request, [
            'image'     => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
            'title'     => 'required|min:5',
            'content'   => 'required|min:10'
        ]);

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

        //create post
        Post::create([
            'image'     => $image->hashName(),
            'title'     => $request->title,
            'content'   => $request->content
        ]);

        //redirect to index
        return redirect()->route('posts.index')->with(['success' => 'Data Berhasil Disimpan!']);
    }
    
    /**
     * edit
     *
     * @param  mixed $post
     * @return void
     */
    public function edit(Post $post)
    {
        return view('posts.edit', compact('post'));
    }
    
    /**
     * update
     *
     * @param  mixed $request
     * @param  mixed $post
     * @return void
     */
    public function update(Request $request, Post $post)
    {
        //validate form
        $this->validate($request, [
            'image'     => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048',
            'title'     => 'required|min:5',
            'content'   => 'required|min:10'
        ]);

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

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

            //delete old image
            Storage::delete('public/posts/'.$post->image);

            //update post with new image
            $post->update([
                'image'     => $image->hashName(),
                'title'     => $request->title,
                'content'   => $request->content
            ]);

        } else {

            //update post without image
            $post->update([
                'title'     => $request->title,
                'content'   => $request->content
            ]);
        }

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

Dari perubahan kode di atas, pertama kita import Facades Storage dari Laravel. Ini akan kita manfaatkan untuk proses mebghapus gambar dari server.

use Illuminate\Support\Facades\Storage;

Selanjutnya kita menambahkan 2 method baru, yaitu :

  • function edit
  • function update

Function Edit

Method digunakan untuk menampilkan data yang akan di edit ke dalam sebuah form, jika teman-teman perhatikan di dalam method ini kita memiliki sebuah parameter, yaitu Post $post, yang artinya parameter tersebut adalah model Post yang diambil datanya sesuai dengan ID yang di dapatkan dari URL, teknik ini biasa disebut dengan Model Injection atau Dependency Injection.

Setelah data tersebut di dapatkan, maka akan di parsing ke dalam view edit.blade.php di dalam folder posts dengan menggunakan helper compact.

return view('posts.edit', compact('post'));

Function Update

Method ini akan digunakan untuk memproses data yang akan diupdate. Di dalam method ini, pertama kita lakukan validasi terlebih dahulu, sama seperti yang ada di dalam method store.

//validate form
$this->validate($request, [
    'image'     => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048',
    'title'     => 'required|min:5',
    'content'   => 'required|min:10'
]);

Jika data yang dikirim sudah sesuai, maka kita akan melakukan pengecekan apakah ada sebuah request dengan jenis file.

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

} else {
	
	//...

}

Jika IYA, maka kita akan melakukan upload gambar baru.

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

Setelah gambar baru berhasil diupload, langkah selanjutnya yaitu menghapus gambar yang lama.

//delete old image
Storage::delete('public/posts/'.$post->image);

Kemudian, kita lakukan update data ke dalam database dengan gambar terbaru.

//update post with new image
$post->update([
   'image'     => $image->hashName(),
   'title'     => $request->title,
   'content'   => $request->content
]);

Jika tidak ada request dengan jenis file, maka kita cukup update field title dan content saja.

//update post without image
$post->update([
   'title'     => $request->title,
   'content'   => $request->content
]);

Dan kita redirect ke dalam route yang bernama posts.index dengan memberikan informasi data berhasil diupdate.

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

Langkah 2 - Membuat Halaman View / Form Edit

Setelah berhasil menambahkan 2 method, sekarang kita lanjutkan untuk menambahkan file view untuk proses edit data. Silahkan buat file baru dengan nama edit.blade.php di dalam folder resources/views/posts/, kemudian masukkan kode berikut ini di dalamnya.

<!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 Data Post - SantriKoding.com</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body style="background: lightgray">

    <div class="container mt-5 mb-5">
        <div class="row">
            <div class="col-md-12">
                <div class="card border-0 shadow rounded">
                    <div class="card-body">
                        <form action="{{ route('posts.update', $post->id) }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')

                            <div class="form-group">
                                <label class="font-weight-bold">GAMBAR</label>
                                <input type="file" class="form-control" name="image">
                            </div>

                            <div class="form-group">
                                <label class="font-weight-bold">JUDUL</label>
                                <input type="text" class="form-control @error('title') is-invalid @enderror" name="title" value="{{ old('title', $post->title) }}" placeholder="Masukkan Judul Post">
                            
                                <!-- error message untuk title -->
                                @error('title')
                                    <div class="alert alert-danger mt-2">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label class="font-weight-bold">KONTEN</label>
                                <textarea class="form-control @error('content') is-invalid @enderror" name="content" rows="5" placeholder="Masukkan Konten Post">{{ old('content', $post->content) }}</textarea>
                            
                                <!-- error message untuk content -->
                                @error('content')
                                    <div class="alert alert-danger mt-2">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <button type="submit" class="btn btn-md btn-primary">UPDATE</button>
                            <button type="reset" class="btn btn-md btn-warning">RESET</button>

                        </form> 
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>
<script>
    CKEDITOR.replace( 'content' );
</script>
</body>
</html>

Dari penambahan kode di atas, jika kita perhatikan pada bagian form action, kita arahkan ke dalam route yang bernama posts.update dengan menambahkan parameter ID posts.

<form action="{{ route('posts.update', $post->id) }}" method="POST" enctype="multipart/form-data">

Dan untuk update data, pastikan di dalam form ditambahkan kode berikut ini :

@method('PUT')

Kode di atas, digunakan untuk menandakan bahwa form ini menggunakan method PUT, karena method tersebut difungsikan untuk proses update data.

Langkah 3 - Uji Coba Proses Edit dan Update Data

Sekarang, silahkan klik button EDIT di data yang teman-teman punya dan jika berhasil, maka akan menampilkan halaman edit data post. Kurang lebih seperti berikut ini :

Silahkan sesuaikan data yang ingin diupdate, kemudian klik button UPDATE. Dan jika berhasil, maka kita akan diarahkan ke dalam route posts.index dengan data yang berhasil diperbarui.

Sampai disini pembahasan bagaimana cara membuat proses edit dan update data di Laravel 9. Di artikel selanjutnya kita akan belajar bagaimana cara membuat proses hapus data dari database.

Terima Kasih



Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami