Tutorial CRUD Laravel 6 Dengan Bootstrap 4 : Edit dan Update Data ke Database


Tutorial CRUD Laravel 6 Dengan Bootstrap 4 : Edit dan Update Data ke Database

Tutorial CRUD Laravel 6 Dengan Bootstrap 4 : Edit dan Update Data ke Database - Hallo teman-teman semuanya, jika sebelumnya kita sudah membahas tentang bagaimana cara input atau memasukkan Data ke Database. Maka pada kesempatan kali ini kita semua akan belajar bagaimana membuat sebuah edit dan update data dengan Framework Laravel 6.

Oke langsung saja kita mulai, Silahkan teman-teman semuanya buka file PostsController.php di dalam folder app/Http/Controllers. dan silahkan tambahkan 2 function dibawah ini :

public function edit(Request $request, Post $post)
{
    return view('posts.edit', compact('post'));
}

Kode diatas digunakan untuk menampilkan form edit dengan cara memanggil sebuah file view yang bernama edit.blade.php di dalam folder resources/views/posts.

public function update(Request $request, Post $post)
{
    $post = Post::whereId($post->id)->update([
        'title'     => $request->input('title'),
        'slug'      => Str::slug($request->input('title')),
        'content'   => $request->input('content')
    ]);


    return redirect(route('posts.index'));
}

Kode diatas digunakan untuk mengupdate Data berdasarkan ID Post.

Oke jika file PostsController.php ditulis dengan lengkap kurang lebih seperti berikut ini :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;
use Illuminate\Support\Str;

class PostsController extends Controller
{
    public function index()
    {
       $posts = Post::latest()->get();
       return view('posts.index', compact('posts'));
    }

    public function create()
    {
        return view('posts.create');
    }

    public function store(Request $request)
    {
        $post = Post::create([
            'title'     => $request->input('title'),
            'slug'      => Str::slug($request->input('title')),
            'content'   => $request->input('content')
        ]);


        return redirect(route('posts.index'));
    }

    public function edit(Request $request, Post $post)
    {
        return view('posts.edit', compact('post'));
    }

    public function update(Request $request, Post $post)
    {
        $post = Post::whereId($post->id)->update([
            'title'     => $request->input('title'),
            'slug'      => Str::slug($request->input('title')),
            'content'   => $request->input('content')
        ]);


        return redirect(route('posts.index'));
    }
}

Oke dan yang terakhir kita akan buat sebuah file View baru didalam folder resources/views/posts dengan nama edit.blade.php dan silahkan masukkan kode dibawah ini :

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <title>Edit Post</title>
</head>

<body>

<div class="container" style="margin-top: 80px">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header">
                    EDIT POST
                </div>
                <div class="card-body">
                    <form action="{{ route('posts.update', $post->id) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="form-group">
                            <label>TITLE</label>
                            <input type="text" name="title" placeholder="Masukkan Title" value="{{ $post->title }}" class="form-control">
                        </div>

                        <div class="form-group">
                            <label>CONTENT</label>
                            <textarea class="form-control" name="content" placeholder="Masukkan Content" rows="4">{{ $post->content }}</textarea>
                        </div>

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

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

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/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>

Oke sekarang kalian bisa klik tombol edit yang ada di Table, jika berhasil kurang lebih tapilannya seperti berikut ini :


Dan silahkan kalian coba untuk merubah data dan klik update. Maka jika berhasil kalian akan menemukan sebuah perubahan data.

Oke sampai disini pembahasan tentang bagaimana cara edit dan update data di Framework Laravel 6. Oke kita lanjutkan di artikel selanjutnya yaitu membuat hapus atau delete data dari Database. Terima Kasih


Fika Ridaul Maulayya
Full-Stack 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