LARAVEL CRUD #4 - Mengedit data di database dengan Laravel 8

LARAVEL CRUD #4 - Mengedit data di database dengan Laravel 8

Dalam tutorial kali ini kita akan bahas tentang Cara Mengedit data di database dengan Laravel 8. Bagi teman-teman yang belum ikuti tutorial lainnya dari part 1, saya sarankan untuk kalian ikuti dulu langkah-langkahnya agar kalian dapat mengikuti part ini dengan baik.


Sebelumnya kita sudah menambah dan menampilkan data dari database dengan laravel. Nah sekarang kita akan masuk ke part selanjutnya, sesuai dengan judul dari postingan ini.


Silahkan teman-teman ikuti langkah-langkah dibawah ini :


  1. Untuk langkah ini kita akan membuat halaman form untuk mengedit data, kita hanya perlu meng-copy halaman Create yang sudah kita buat lalu mengedit isinya sedikit. Untuk kode lengkapnya sudah saya taruh dibawah ini, silahkan copy lalu buat file edit.blade.php pada folder Product lalu paste semua kode dibawah ini ke dalamnya.

    <!doctype html>
    <html lang="en">
    
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
            integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400&display=swap" rel="stylesheet">
    
    
        <style>
            body {
                font-family: 'Montserrat', sans-serif;
            }
    
        </style>
    
        <title>Hello, world!</title>
    </head>
    
    <body>
    
        <div class="container mt-5">
            <h1 class="text-center mb-5">List Produk</h1>
            @if(Session::has('success'))
    
            <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{Session::get('success')}}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
    
            @endif
            <a href="{{ route('product.create') }}" class="btn btn-primary mb-3">Tambah Produk</a>
            <div class="card shadow-sm">
                <div class="card-body">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th scope="col">NO</th>
                                <th scope="col">Name</th>
                                <th scope="col">Details</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- untuk penomoran -->
                            @php
                                $no = 1;
                            @endphp
    
                            <!-- untuk menampilkan data -->
                            @foreach ($product as $hasil)
                            <tr>
                                <th scope="row">{{ $no++ }}</th>
                                <td>{{ $hasil->name }}</td>
                                <td>{{ $hasil->details }}</td>
                                <td>
                                    <a href="{{ route('product.edit', $hasil->id) }}" class="btn btn-success btn-sm">Edit</a>
                                    <button class="btn btn-danger btn-sm">Hapus</button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    
    
        <!-- Optional JavaScript; choose one of the two! -->
    
        <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
        </script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous">
        </script>
    
        <!-- Option 2: Separate Popper and Bootstrap JS -->
        <!--
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
        -->
    </body>
    
    </html>
    

  2. Langkah berikutnya kita akan pergi ke file ProductController lalu kita akan membuat sedikit koding di bagian public function edit untuk mengarahkan route edit ke halaman yang sudah kita buat di langkah satu. Tidak hanya itu kita akan membuat satu variable yang berisi $id yang ditangkap ketika kita klik button edit. Untuk kodenya seperti dibawah ini :

    public function edit($id)
        {
            //disini kita akan mencari id berdasarkan data yang di kirim pada parameter $id lalu kita kirimkan ke halaman edit untuk di panggil 
            $product = Product::findorfail($id);
    
            return view('product.edit', compact('product'));
        }

  3. Disini kita masih di file ProductController hanya saja kita akan pergi bagian public function update, pada bagian inilah kita akan koding untuk mengeksekusi data yang akan kita edit. Silahkan copy kode dibawah ini :

    public function update(Request $request, $id)
        {
            // Kode dibawah ini untuk memvalidasi data yang akan di input
            $validate = $request->validate([
                'name' => 'required|max:255|min:3',
                'details' => 'required',
            ]);
    
            //disini kita menangkap id yang dikirim 
            $product = Product::find($id);
    
            //disini kita akan memanggil data sesuai namanya lalu kita isi dengan request dari file edit
            $product->name = $request->name;
            $product->details = $request->details;
            $product->save();
    
            // Kembalikan ke halaman index dan berikan pesan success "Data berhasil di Edit"
            return redirect()->route('product.index')->with('success', 'Data berhasil di Edit');
        }

  4. Jika sudah ikuti semua langkah-langkah diatas dengan benar maka hasilnya akan seperti gambar dibawah ini :

    mengedit data dari databse dengan laravel
Nah kurang lebih untuk tutorial part 4 tentang Mengedit data di database dengan Laravel 8 seperti ini, jika teman-teman masih bingung lansung bertanya pada kolom komentar dibawah.

Untuk part selanjutnya kita akan membuat fungsi untuk hapus data, jadi ikuti terus langkah-langkah dibawah dengan seksama.

Load comments