Tutorial Edit dan Update Data Ke Database Di Laravel Splade 

Tutorial Edit dan Update Data Ke Database Di Laravel Splade 

Laravel Splade adalah sebuah framework PHP yang memudahkan Anda untuk membuat aplikasi web yang dinamis, elegan, dan cepat. Laravel Splade menggabungkan fitur-fitur Laravel yang populer, seperti Eloquent, Blade, dan Artisan, dengan fitur-fitur Splade yang unik, seperti splade table, splade form, dan splade validation. Dengan Laravel Splade, Anda dapat membuat aplikasi web yang responsif, interaktif, dan mudah dikelola.

Pada artikel ini, Anda akan belajar cara melakukan edit dan update data ke dalam database menggunakan Laravel Splade. Anda akan mempelajari cara menambahkan method edit dan update pada controller, membuat view edit dengan splade form, dan melakukan uji coba update data dengan splade validation. Artikel ini adalah bagian dari seri tutorial Laravel Splade yang akan membimbing Anda untuk membuat aplikasi web CRUD (Create, Read, Update, Delete) dengan Laravel Splade.

Untuk mengikuti tutorial ini, Anda harus memiliki pengetahuan dasar tentang PHP, Laravel, dan database. Anda juga harus sudah menginstal Laravel Splade pada komputer Anda, atau Anda dapat mengikuti tutorial Laravel Splade #1 - Instalasi dan Konfigurasi untuk memulai. Selain itu, Anda harus sudah memiliki tabel posts pada database Anda, atau Anda dapat mengikuti tutorial Laravel Splade #2 - Membuat Tabel dengan Splade Table untuk membuatnya.

Jika Anda sudah siap, mari kita mulai Tutorial Edit dan Update Data ke Dalam Database Di Laravel Splade.

Baik, saya akan membantu Anda dengan membuat tulisan berdasarkan outline di bawah. Berikut adalah tulisan yang saya buat:

Langkah 1 - Tahap Persiapan

Sebuah pemahaman mendalam tentang data yang akan diubah menjadi kunci keberhasilan saat menggunakan Splade di Laravel. Oleh karena itu, langkah-langkah persiapan awal menjadi fondasi penting sebelum kita melibatkan diri dalam proses edit dan update data di dalam database.

Pada tahap ini, penting untuk secara teliti memeriksa data yang akan mengalami perubahan. Ini melibatkan peninjauan yang cermat terhadap data saat ini dalam database, memastikan bahwa kita memiliki pemahaman menyeluruh tentang struktur dan konten informasi yang akan diubah. Pemeriksaan ini memastikan bahwa kita memiliki wawasan yang akurat sebelum melangkah ke langkah berikutnya.

Selain itu, inilah saatnya untuk memvalidasi ketersediaan hak akses yang diperlukan untuk melakukan perubahan pada data. Pastikan bahwa operasi edit akan berjalan lancar tanpa kendala izin yang tidak mencukupi.

Setelah memiliki pemahaman yang kokoh tentang data yang akan diubah, langkah selanjutnya adalah menciptakan antarmuka pengguna yang efisien untuk melakukan proses edit. Pada tingkat tampilan (view) aplikasi, formulir edit menjadi komponen kunci. Formulir ini tidak hanya harus intuitif bagi pengguna tetapi juga harus mencerminkan elemen-elemen yang akan diubah dengan jelas.

Dalam pembuatan formulir, pertimbangkan untuk menambahkan validasi di tingkat tampilan untuk memastikan bahwa input yang dimasukkan pengguna sesuai dengan persyaratan yang ditetapkan. Langkah ini tidak hanya meningkatkan pengalaman pengguna tetapi juga membantu melindungi integritas data.

Dengan langkah-langkah persiapan ini, kita dapat memastikan bahwa kita telah melibatkan diri dengan baik dalam tahap awal menuju proses edit dan update data yang sukses menggunakan Laravel Splade. Tahap selanjutnya akan membahas proses edit data secara mendalam.

Langkah 2 - Menambahkan Method Edit dan Update

Pada langkah ini, kita akan menambahkan method edit dan update pada PostController.php, yang bertugas untuk menampilkan form edit dan memproses data yang akan diupdate. Method edit dan update ini akan menggunakan fitur route model binding, yang memungkinkan kita untuk mengambil data post berdasarkan id yang dikirimkan melalui URL. Selain itu, kita juga akan menggunakan fitur validation, yang memungkinkan kita untuk memvalidasi data yang dikirimkan melalui form edit.

Berikut adalah kode lengkap dari method edit dan update pada PostController.php, serta penjelasan fungsi dari setiap baris kode:

 

```php

<?php




namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
class PostController extends Controller
{
    // ...
    // Method edit untuk menampilkan form edit data post
    public function edit(Post $post)
    {
        // Mengirimkan data post ke view edit
        return view('posts.edit', compact('post'));
    }
    // Method update untuk memproses data yang akan diupdate
    public function update(Request $request, Post $post)
    {
        // Membuat aturan validasi data
        $request->validate([
            'title' => 'required|max:255',
            'content' => 'required',
            'image' => 'nullable|image|max:2048'
        ]);
        // Menyimpan data yang diupdate ke dalam array
        $data = [
            'title' => $request->title,
            'content' => $request->content
        ];
        // Jika ada file image yang diupload
        if ($request->hasFile('image')) {
            // Menghapus file image lama dari storage
            Storage::delete($post->image);
            // Menyimpan file image baru ke storage
            $image = $request->file('image')->store('images');
            // Menambahkan data image ke array
            $data['image'] = $image;
        }
        // Mengupdate data post ke database
        $post->update($data);
        // Mengarahkan ke halaman index dengan pesan sukses
        return redirect()->route('posts.index')->with('success', 'Post updated successfully');
    }
    // ...
}
```

Penjelasan

• Pada baris 13, kita membuat method edit yang menerima parameter `$post` bertipe `Post`. Parameter ini akan diisi dengan data post yang sesuai dengan id yang dikirimkan melalui URL, berkat fitur route model binding.
• Pada baris 15, kita mengirimkan data post ke view edit dengan menggunakan fungsi `compact`, yang membuat array asosiatif dari variabel yang diberikan.
• Pada baris 19, kita membuat method update yang menerima parameter `$request` bertipe `Request` dan `$post` bertipe `Post`. Parameter `$request` akan berisi data yang dikirimkan melalui form edit, sedangkan parameter `$post` akan berisi data post yang akan diupdate, berkat fitur route model binding.
• Pada baris 21, kita membuat aturan validasi data dengan menggunakan method `validate` dari objek `$request`. Aturan validasi ini berisi:

    - `title` harus diisi dan tidak boleh lebih dari 255 karakter.

    - `content` harus diisi.

    - `image` boleh kosong, tapi harus berupa file gambar dan tidak boleh lebih dari 2048 KB.

• Pada baris 28, kita menyimpan data yang diupdate ke dalam array `$data`, yang berisi `title` dan `content` dari `$request`.
• Pada baris 31, kita mengecek apakah ada file image yang diupload dengan menggunakan method `hasFile` dari objek `$request`.
• Pada baris 33, kita menghapus file image lama dari storage dengan menggunakan fasad `Storage` dan method `delete`, yang menerima nama file image dari `$post`.
• Pada baris 36, kita menyimpan file image baru ke storage dengan menggunakan method `store` dari objek `$request`, yang menerima nama folder tujuan dan mengembalikan nama file image yang disimpan.
• Pada baris 39, kita menambahkan data image ke array `$data`, yang berisi nama file image yang disimpan.
• Pada baris 42, kita mengupdate data post ke database dengan menggunakan method `update` dari objek `$post`, yang menerima array `$data` sebagai parameter.
• Pada baris 45, kita mengarahkan ke halaman index dengan menggunakan method `redirect` dan `route`, yang menerima nama route tujuan. Kita juga mengirimkan pesan sukses dengan menggunakan method `with`, yang menerima nama dan isi pesan.

Langkah 3 - Membuat View Edit

Pada langkah ini, kita akan membuat view edit pada resources/views/posts/edit.blade.php, yang bertugas untuk menampilkan form edit data post. View edit ini akan menggunakan fitur splade form, yang memudahkan kita untuk membuat form dengan berbagai jenis input, seperti text, textarea, file, dan lainnya. Splade form juga dapat menampilkan pesan error validasi dan mengisi nilai input dengan data lama secara otomatis.

Berikut adalah kode lengkap dari view edit, serta penjelasan fungsi dari setiap baris kode:

```php
@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Edit Post</div>
                <div class="card-body">
                    <!-- Membuat form edit dengan method PUT dan action ke route posts.update -->
                    <form action="{{ route('posts.update', $post->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <!-- Membuat input title dengan tipe text dan nama title -->
                        <div class="form-group">
                            <label for="title">Title</label>
                            <input type="text" name="title" id="title" class="form-control @error('title') is-invalid @enderror" value="{{ old('title', $post->title) }}">
                            <!-- Menampilkan pesan error validasi untuk input title -->
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <!-- Membuat input content dengan tipe textarea dan nama content -->
                        <div class="form-group">
                            <label for="content">Content</label>
                            <textarea name="content" id="content" rows="10" class="form-control @error('content') is-invalid @enderror">{{ old('content', $post->content) }}</textarea>
                            <!-- Menampilkan pesan error validasi untuk input content -->
                            @error('content')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <!-- Membuat input image dengan tipe file dan nama image -->
                        <div class="form-group">
                            <label for="image">Image</label>
                            <input type="file" name="image" id="image" class="form-control @error('image') is-invalid @enderror">
                            <!-- Menampilkan pesan error validasi untuk input image -->
                            @error('image')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <!-- Membuat tombol update dengan tipe submit -->
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
```

 

Penjelasan

• Pada baris 1, kita menggunakan direktif `@extends` untuk menurunkan layout dari file app.blade.php, yang berisi struktur HTML dasar dan bootstrap.
• Pada baris 3, kita menggunakan direktif `@section` untuk menentukan isi dari bagian content, yang akan ditampilkan di dalam layout.
• Pada baris 5, kita membuat div dengan class container, yang akan membuat konten berada di tengah halaman.
• Pada baris 6, kita membuat div dengan class row, yang akan membuat konten berada dalam satu baris.
• Pada baris 7, kita membuat div dengan class col-md-8, yang akan membuat konten memiliki lebar 8 kolom dari 12 kolom yang tersedia.
• Pada baris 8, kita membuat div dengan class card, yang akan membuat konten memiliki tampilan seperti kartu.
• Pada baris 9, kita membuat div dengan class card-header, yang akan menampilkan judul dari kartu.
• Pada baris 10, kita membuat div dengan class card-body, yang akan menampilkan isi dari kartu.
• Pada baris 12, kita membuat form dengan atribut action, method, dan enctype. Atribut action berisi route posts.update, yang akan mengarahkan ke method update pada PostController. Atribut method berisi POST, yang akan mengirimkan data melalui metode POST. Atribut enctype berisi multipart/form-data, yang akan mengizinkan kita untuk mengirimkan file melalui form.
• Pada baris 13, kita menggunakan direktif `@csrf` untuk menambahkan token CSRF, yang akan melindungi form dari serangan CSRF
• Pada baris 14, kita menggunakan direktif `@method` untuk menambahkan method spoofing, yang akan mengubah metode POST menjadi metode PUT, sesuai dengan route posts.update. Metode PUT digunakan untuk mengupdate data ke database.
• Pada baris 16, kita membuat div dengan class form-group, yang akan membuat input memiliki margin dan padding yang sesuai.
• Pada baris 17, kita membuat label dengan atribut for, yang berisi id dari input yang terkait. Label ini akan menampilkan teks Title di atas input.
• Pada baris 18, kita membuat input dengan atribut type, name, id, class, dan value. Atribut type berisi text, yang akan membuat input berupa kotak teks. Atribut name berisi title, yang akan menjadi kunci dari data yang dikirimkan. Atribut id berisi title, yang akan menjadi penghubung dengan label. Atribut class berisi form-control, yang akan membuat input memiliki tampilan yang sesuai dengan bootstrap, dan @error('title') is-invalid @enderror, yang akan menambahkan class is-invalid jika ada error validasi untuk input title. Atribut value berisi {{ old('title', $post->title) }}, yang akan mengisi input dengan data lama yang dikirimkan melalui form atau data title dari $post.
• Pada baris 20, kita menggunakan direktif `@error` untuk mengecek apakah ada error validasi untuk input title.
• Pada baris 21, kita membuat div dengan class invalid-feedback, yang akan menampilkan pesan error validasi untuk input title dengan menggunakan variabel $message.
• Pada baris 24, kita membuat div dengan class form-group, yang akan membuat input memiliki margin dan padding yang sesuai.
• Pada baris 25, kita membuat label dengan atribut for, yang berisi id dari input yang terkait. Label ini akan menampilkan teks Content di atas input.
• Pada baris 26, kita membuat textarea dengan atribut name, id, rows, class, dan value. Atribut name berisi content, yang akan menjadi kunci dari data yang dikirimkan. Atribut id berisi content, yang akan menjadi penghubung dengan label. Atribut rows berisi 10, yang akan menentukan tinggi dari textarea. Atribut class berisi form-control, yang akan membuat textarea memiliki tampilan yang sesuai dengan bootstrap, dan @error('content') is-invalid @enderror, yang akan menambahkan class is-invalid jika ada error validasi untuk input content. Atribut value berisi {{ old('content', $post->content) }}, yang akan mengisi textarea dengan data lama yang dikirimkan melalui form atau data content dari $post.
• Pada baris 28, kita menggunakan direktif `@error` untuk mengecek apakah ada error validasi untuk input content.
• Pada baris 29, kita membuat div dengan class invalid-feedback, yang akan menampilkan pesan error validasi untuk input content dengan menggunakan variabel $message.
• Pada baris 32, kita membuat div dengan class form-group, yang akan membuat input memiliki margin dan padding yang sesuai.
• Pada baris 33, kita membuat label dengan atribut for, yang berisi id dari input yang terkait. Label ini akan menampilkan teks Image di atas input.
• Pada baris 34, kita membuat input dengan atribut type, name, id, class, dan value. Atribut type berisi file, yang akan membuat input berupa tombol pilih file. Atribut name berisi image, yang akan menjadi kunci dari data yang dikirimkan. Atribut id berisi image, yang akan menjadi penghubung dengan label. Atribut class berisi form-control, yang akan membuat input memiliki tampilan yang sesuai dengan bootstrap, dan @error('image') is-invalid @enderror, yang akan menambahkan class is-invalid jika ada error validasi untuk input image.
• Pada baris 36, kita menggunakan direktif `@error` untuk mengecek apakah ada error validasi untuk input image.
• Pada baris 37, kita membuat div dengan class invalid-feedback, yang akan menampilkan pesan error validasi untuk input image dengan menggunakan variabel $message.
• Pada baris 40, kita membuat div dengan class form-group, yang akan membuat tombol memiliki margin dan padding yang sesuai.
• Pada baris 41, kita membuat tombol dengan atribut type dan class. Atribut type berisi submit, yang akan membuat tombol dapat mengirimkan data

 

Penutup

Dalam perjalanan ini, kita telah menjelajahi langkah-langkah penting untuk melakukan edit dan update data ke dalam database menggunakan Laravel Splade. Dari persiapan awal hingga tahap implementasi, proses ini membuka pintu bagi pengembangan aplikasi yang tangguh dan responsif.

 

 

 

 

 

 

Published on February 01, 2024
Last updated on June 03, 2026