Head of Software Department HMTI

Membuat Create Read Update Delete

Selanjutnya kita akan belajar bagaimana cara Menambahkan data, Menampilkan data, Meng-update data, Menghapus data dari database di dalam Laravel. Dan untuk UI atau User Interface yang akan kita gunakan adalah Bootstrap, sehingga tampilan nya bisa lebih bagus dan cepat dibandingkan kita harus membuat nya secara manual.

Langkah 1 - Membuat Controller Post

Hal pertama yang harus kita lakukan adalah membuat Controller-nya terlebih dahulu. Controller digunakan untuk menghubungkan antara Model dengan View dan biasanya Controller akan berisi logika-logika dari aplikasi yang dibangun.

Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project Laravel-nya.

php artisan make:controller PostController

Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan file controller baru yang ada berada di dalam folder

app/Http/Controllers/ PostController.php

Silahkan buka file tersebut dan ubah kode-nya menjadi seperti berikut ini.

<?php

namespace App\Http\Controllers;

//import Model "Post
use App\Models\Post;

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

use Illuminate\Http\Request;

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

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

Dari perubahan kode di atas, pertama kita import Model Post di dalam controller.

//import Model "Post
use App\Models\Post;

Kemudian kita import return Type View.

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

Setelah itu, di dalam PostController kita membuat method baru dengan nama index.

public function index(): View
{

    //...
    
}

Di dalam method tersebut, pertama kita membuat variable baru dengan nama $posts dan berisi Model Post yang mengambil data dari database.

Kemudian kita memanggil method latest yang berfungsi untuk mengurutkan data yang akan di tampilkan berdasarkan yang paling terbaru dan membatasi data yang akan ditampilkan menggunakan method paginate sejumlah 5.

//get posts
$posts = Post::latest()->paginate(5);

Setelah data berhasil ditampung dalam di dalam variable tersebut ke dalam view menggunakan method compact,

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

Di atas kita melakukan render ke dalam view resources/posts/index.blade.php dengan mengirimkan variable $posts. Jika teman-teman cek sekarang, file view tersebut masih belum ada, karena kita akan membuatnya setelah ini.

Langkah 2 - Membuat Route Post

Agar bisa mengakses controller melalui URL browser, maka kita perlu membuatkan route-nya terlebih dahulu. Jadi konsepnya kita akan memanggil route, kemudian route memanggil controller dan controller memanggil view.

Kurang lebih nya alur nya seperti berikut ini.

Untuk membuat Route, silahkan buka file routes/web.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.

<?php

use Illuminate\Support\Facades\Route;

//route resource
Route::resource('/posts', \App\Http\Controllers\PostController::class);

Dari perubahan kode di atas, kita menambahkan route baru dengan path /posts dan jika di perhatikan, kita menggunakan route dengan jenis resource. Artinya apa? yaitu route-route untuk proses CRUD akan di generate secara otomatis oleh Laravel, seperti index, create, store, show, edit, update, dan destroy. dibandingkan kita harus membuatnya secara manual satu-persatu.

Untuk memastikan apakah penambahan route kita berhasil, kita bisa menjalankan perintah berikut ini dalam terminal/CMD dan pastikan sudah berada di dalam project Laravel-nya.

php artisan route:list

Langkah 3 - Membuat View dan Menampilkan Data

Setelah controller dan route berhasil dibuat, maka sekarang kita akan lanjutkan belajar membuat view yang digunakan untuk menampilkan data.

Silahkan buat folder baru dengan nama posts di dalam folder resources/views , kemudian di dalam folder posts tersebut buatlah file baru dengan nama index.blade.php dan masukan 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>Code Jam Academy</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
</head>
<body style="background: lightgray">

<div class="container mt-5">
    <div class="row">
            <div class="col-md-12">
                <div>
                    <h3 class="text-center my-4">Code Jam Academy - Laravel 10</h3>      
                    <hr>
                </div>
                <div class="card border-0 shadow-sm rounded">
                    <div class="card-body">
                        <a href="{{ route('posts.create') }}" class="btn btn-md btn-success mb-3">TAMBAH POST</a>
                        <table class="table table-bordered">
                            <thead>
                              <tr>
                                <th scope="col">GAMBAR</th>
                                <th scope="col">JUDUL</th>
                                <th scope="col">CONTENT</th>
                                <th scope="col">AKSI</th>
                              </tr>
                            </thead>
                            <tbody>
                              @forelse ($posts as $post)
                                <tr>
                                    <td class="text-center">
                                        <img src="{{ asset('/storage/posts/'.$post->image) }}" class="rounded" style="width: 150px">
                                    </td>
                                    <td>{{ $post->title }}</td>
                                    <td>{!! $post->content !!}</td>
                                    <td class="text-center">
                                        <form onsubmit="return confirm('Apakah Anda Yakin ?');" action="{{ route('posts.destroy', $post->id) }}" method="POST">
                                            <a href="{{ route('posts.show', $post->id) }}" class="btn btn-sm btn-dark">SHOW</a>
                                            <a href="{{ route('posts.edit', $post->id) }}" class="btn btn-sm btn-primary">EDIT</a>
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-danger">HAPUS</button>
                                        </form>
                                    </td>
                                </tr>
                              @empty
                                  <div class="alert alert-danger">
                                      Data Post belum Tersedia.
                                  </div>
                              @endforelse
                            </tbody>
                          </table>  
                          {{ $posts->links() }}
                    </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="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

    <script>
        @if(session()->has('success'))
                
            toastr.success('{{ session('success') }}', 'BERHASIL!'); 

        @elseif(session()->has('error'))

            toastr.error('{{ session('error') }}', 'GAGAL!'); 
                
        @endif
    </script>

</body>
</html>

Dari penambahan kode di atas, untuk menampilkan data kita bisa menggunakan sintaks @forelse.

@forelse ($posts as $post)

//tampilkan data
 	
@empty

	//Data Post belum Tersedia.
	
@endforelse

Kemudian untuk menampilkan pagination, kita bisa memanggil method links, Kurang lebih seperti ini.

{{ $posts->links() }}

Pada bagian JavaScript, kita menambahkan kondisi untuk memeriksa sebuah session flash, yang nantinya difungsikan untuk menampilkan alert atau notifikasi setelah berhasil melakukan proses insert, update, dan delete data. Dan library yang kita gunakan adalah toast.js .

<script>>
    @if(session()->has('success'))

        toastr.success('{{ session('success') }}', 'BERHASIL!'); 

    @elseif(session()->has('error'))

        toastr.error('{{ session('error') }}', 'GAGAL!'); 

    @endif
<script>

Langkah 4 - Uji Coba Menampilkan Data

Sekarang silahkan jalankan projectnya dengan mengakses http://127.0.0.1:8000/posts di dalam browser, jika berhasil maka hasilnya kurang lebih akan seperti ini

Di atas masih menampilkan pesan Data Posts belum Tersedia , itu karena memang kita masih belum memiliki data apapun di tableposts.

Langkah 5 - Membuat Method Create dan Store

Selanjutnya kita akan membuat 2 method di dalam controller, apa saja method tersebut? yaitu :

function create - method yang digunakan untuk menampilkan halaman form tambah data.
function store - method yang digunakan untuk memproses data ke dalam database dan juga melakukan upload gambar.

Sekarang, silahkan buka file app/Http/Controller/PostController.php , kemudian ubah kode-nya menjadi seperti berikut ini.

<?php

namespace App\Http\Controllers;

//import Model "Post
use App\Models\Post;

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

//return type redirectResponse
use Illuminate\Http\RedirectResponse;

use Illuminate\Http\Request;

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

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

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

    /**
     * store
     *
     * @param  mixed $request
     * @return RedirectResponse
     */
    public function store(Request $request): RedirectResponse
    {
        //validate form
        $this->validate($request, [
            'image'     => 'required|image|mimes:jpeg,jpg,png|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!']);
    }
}

Dari perubahan kode di atas, pertama kita import return type redirectResponse

//return type redirectResponse
use Illuminate\Http\RedirectResponse;

Kemudian kita menambahkan method baru yang bernama create.

Di dalam method tersebut kita melakukan return dengan mengarahkan ke dalam sebuah view yang nanti akan kita buat, yaitu resources/views/posts/create.blade.php. Jika dicari, file tersebut tidak ada. Karena kita akan membuatnya nanti.

return view('posts.create');

Setelah itu, kita buat method yang bernama store. method ini akan kita gunakan untuk memproses data dan memasukan-nya ke dalam database dan sekaligus membuat fungsi untuk melakukan upload gambar

Di dalam method tersebut, pertama tama kita membuat validasi terlebih dahulu. Fungsinya untuk memastikan data yang dikirimkan sudah sesuai dengan yang diharapkan.

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

Dari validasi di atas, kurang lebih penjelasannya seperti berikut ini.

KEY	VALIDATION	KETERANGAN
Image	required	field wajib diisi
	image	field harus berupa gambar
	mimes:jpeg,jpg,png	files harus memiliki extensi jpeg,jpg,png
	max:2048	files maksimal berukuran 2048 Kb / 2Mb
title	required	files wajib diisi
	min:5	files minimal memiliki 5 huruf/karakter
content	required	files wajib diisi
	min:10	files minimal memiliki 10 huruf/karakter

Jika data yang dikirimkan sudah sesuai dengan validasi di atas, maka langkah selanjutnya adalah melakukan upload gambar

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

Di atas, kita membuat variable baru dengan nama $image dan berisi request dengan jenis file yang bernama image . Request tersebut merupakan file yang dikirim dari form.

Setelah itu, kita upload gambar tersebut menggunakan method storeAs bawaan dari Laravel dan kita akan menyimpannya ke dalam folder storage/app/public/postsdan nama dari file tersebut akan di random menggunakan method hashName().

Jika gambar sudah berhasil diupload, langkah selanjutnya adalah melakukan insert data ke dalam database, yaitu ke dalam table posts dan disini kita memanfaatkan Eloquent dan Model untuk proses insert data-nya

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

Jika proses insert data berhasil dilakukan, maka kita akan redirect atau arahkan ke dalam route yang bernama posts.index dengan memberikan session flash yang memiliki key success dan isinya adalah Data Berhasil Disimpan!

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

Langkah 6 - Membuat View Form Create

Setelah berhasil membuat 2 method, di dalam controller, maka kita bisa lanjutkan membuat view untuk menampilkan halaman tambah data post.

Silahkan buat file baru dengan nama create.blade.php di dalam folder resources/views/posts, kemudian masukan 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>Tambah 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-sm rounded">
                    <div class="card-body">
                        <form action="{{ route('posts.store') }}" method="POST" enctype="multipart/form-data">
                        
                            @csrf

                            <div class="form-group">
                                <label class="font-weight-bold">GAMBAR</label>
                                <input type="file" class="form-control @error('image') is-invalid @enderror" name="image">

                                @error('image')
                                    <div class="alert alert-danger mt-2">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </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') }}" placeholder="Masukkan Judul Post">
                            
                                @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') }}</textarea>
                            
                                @error('content')
                                    <div class="alert alert-danger mt-2">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <button type="submit" class="btn btn-md btn-primary">SIMPAN</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, kita membuat sebuah form yang mana untuk action-nya kita arahkan ke route yang bernama posts.store . Route tersebut akan memanggil method di controller yang bernama store.

<form action="{{ route('posts.store') }}" method="POST" enctype="multipart/form-data">

	//...
	
<form>

Jika di perhatikan, pada bagian form terdapat attribute enctype="multipart/form-data". Atrritbute tersebut wajib kita tambahkan jika ada sebuah upload file di dalam form-nya.

Kemudian di dalam JavaScript, bisa di perhatikan kita melakukan inisisalisasi Rich Text Editor menggunakan CKEditor. Dan kita akan terapkan ke dalam textarea yang memiliki name content.

<script>
    CKEDITOR.replace( 'content' );
<script>

Langkah 7 - Uji Coba Insert Data Post

Silahkan klik button TAMBAH POST pada halaman posts index atau bisa juga ke URL berikut ini http://127.0.0.1:8000/posts/create , jika berhasil maka akan menampilkan hasil berikut ini

Silahkan masukan data-data yang diinginkan, kemudian klik button SIMPAN. Jika berhasil maka kita akan diarahkan ke halaman posts index dengan menampilkan alert/notifikasi sukses tambah data.

Langkah 8 - Menambahkan Method Show

Jadi kita akan membuat method baru di dalam controller, method ini kita gunakan untuk mencari data berdasarkan ID

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

<?php

namespace App\Http\Controllers;

//import Model "Post
use App\Models\Post;

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

//return type redirectResponse
use Illuminate\Http\RedirectResponse;

use Illuminate\Http\Request;

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

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

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

    /**
     * store
     *
     * @param  mixed $request
     * @return RedirectResponse
     */
    public function store(Request $request): RedirectResponse
    {
        //validate form
        $this->validate($request, [
            'image'     => 'required|image|mimes:jpeg,jpg,png|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!']);
    }
    
    /**
     * show
     *
     * @param  mixed $id
     * @return View
     */
    public function show(string $id): View
    {
        //get post by ID
        $post = Post::findOrFail($id);

        //render view with post
        return view('posts.show', compact('post'));
    }
}

Dari penambahan kode di atas, kita menambahkan method baru dengan nama show dan di dalamnya kita berikan parameter $id. Parameter tersebut akan bernilai dinamis, yaitu sesuai ID data yang di panggil.

public function show(string $id): View
{

	//...
	
}

Di dalam method di atas, kita melakukan get data post berdasarkan variable $id yang ada di dalam parameter.

//get post by ID
$post = Post::findOrFail($id);

Jika data berhasil ditemukan, maka kita akan kirimkan ke dalam view menggunakan fungsi compact.

//render view with post
return view('posts.show', compact('post'));

Langkah 9 - Membuat View Detail Post

Sekarang kita lanjut menampilkan data yang dikirimkan oleh controller di dalam view. Silahkan teman-teman buat file baru dengan nama show.blade.php di dalam folder resources/view/posts , kemudian masukan kode 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>Detail 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 justify-content-center">
            <div class="col-md-8">
                <div class="card border-0 shadow-sm rounded">
                    <div class="card-body">
                        <img src="{{ asset('storage/posts/'.$post->image) }}" class="w-100 rounded">
                        <hr>
                        <h4>{{ $post->title }}</h4>
                        <p class="tmt-3">
                            {!! $post->content !!}
                        </p>
                    </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>
</body>
</html>

Karena data yang dikirimkan oleh controller dalam bentuk object, maka kita tinggal memanggil nama field-nya saja.

Contohnya, untuk memanggil gambar kita bisa seperti ini.

<img src="{{ asset('storage/posts/'.$post->image) }}" class="w-100 rounded">

Atau untuk memanggil title kita bisa menggunakan kode seperti berikut ini.

<h4>{{ $post->title }}</h4>

Dan terakhir, untuk content karena isinya mengandung sintaks HTML, maka kita perlu menampilkannya dengan sintaks khusus, yaitu seperti ini

{!! $post->content !!}

Langkah 10 - Uji Coba Menampilkan Detail Data Post

Silahkan klik button SHOW di salah satu data yang ada pada halaman posts index, jika berhasil maka akan menampilkan hasil seperti berikut ini.

Langkah 11 - Menambahkan Method Edit dan Update

Kali ini kita akan menambahkan 2 method di dalam controller, method tersebut adalah :

function edit - method yang digunakan untuk menampilkan halaman form edit data.
function update - method yang digunakan untuk memproses data yang akan di update ke dalam database.

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

<?php

namespace App\Http\Controllers;

//import Model "Post
use App\Models\Post;

use Illuminate\Http\Request;

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

//return type redirectResponse
use Illuminate\Http\RedirectResponse;

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

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

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

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

    /**
     * store
     *
     * @param  mixed $request
     * @return RedirectResponse
     */
    public function store(Request $request): RedirectResponse
    {
        //validate form
        $this->validate($request, [
            'image'     => 'required|image|mimes:jpeg,jpg,png|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!']);
    }
    
    /**
     * show
     *
     * @param  mixed $id
     * @return View
     */
    public function show(string $id): View
    {
        //get post by ID
        $post = Post::findOrFail($id);

        //render view with post
        return view('posts.show', compact('post'));
    }
  
    /**
     * edit
     *
     * @param  mixed $id
     * @return View
     */
    public function edit(string $id): View
    {
        //get post by ID
        $post = Post::findOrFail($id);

        //render view with post
        return view('posts.edit', compact('post'));
    }
    
    /**
     * update
     *
     * @param  mixed $request
     * @param  mixed $id
     * @return RedirectResponse
     */
    public function update(Request $request, $id): RedirectResponse
    {
        //validate form
        $this->validate($request, [
            'image'     => 'image|mimes:jpeg,jpg,png|max:2048',
            'title'     => 'required|min:5',
            'content'   => 'required|min:10'
        ]);

        //get post by ID
        $post = Post::findOrFail($id);

        //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-tama kita import dulu Facade Storage dari Laravel. Ini akan kita gunakan nantinya untuk menghapus file gambar yang ada di dalam Laravel.

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

Kemudian kita buat method baru dengan nama edit dan di dalamnya kita berikan parameter $id. Method ini kode-nya hampir sama dengan method show, karena tujuannya sama-sama untuk menampilkan detail data berdasarkan ID.

public function edit(string $id): View
{

	//...
	
}

Di dalam method tersebut, kita lakukan get data post berdasarkan ID yang diambil dari parameter atau variable $id

//get post by ID
$post = Post::findOrFail($id);

Jika data ditemukan, maka kita kirimkan ke dalam view menggunakan fungsi compact.

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

Setelah itu, kita buat method lagi dengan nama update. Method inilah yang digunakan untuk memproses data yang akan diupdate ke dalam database.

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

	//...
	
}

Di dalam method tersebut, pertama-tama kita buat validasi terlebih dahulu, sama seperti yang ada di dalam method store. Beda-nya hanya pada validasi image kita tidak memberikan rule required, karena image disini tidak wajib di-update data-nya.

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

Dari penambahan validasi di atas, kurang lebih seperti berikut ini penjelasannya.

KEY	VALIDATION	KETERANGAN
image	image	field harus berupa gambar
	mimes:jpeg,jpg,png	files harus memiliki extensi jpeg,jpg,png
	max:2048	files maksimal berukuran 2048 Kb / 2Mb
title	required	files wajib diisi
	min:5	files minimal memiliki 5 huruf/karakter
content	required	files wajib diisi
	min:10	files minimal memiliki 10 huruf/karakter

Jika data yang dikirimkan sudah sesuai dengan validasi di atas, maka kita lanjutkan dengan mencari data berdasarkan ID yang diambil dari parameter.

//get post by ID
$post = Post::findOrFail($id);

Tujuannya, agar nanti kita bisa mengambil object dari data di atas dan bisa digunakan untuk melakukan proses update data.

Setelah itu, kita membuat kondisi untuk memastikan apakah ada sebuah request file yang bernama image.

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

	//upload gambar baru
	
	//hapus gambar lama
	
	//update data ke database
	
} else {

	//update data ke database

}

Dari kode diatas, jika ada file dengan nama image, Artinya kita akan melakukan upload gambar baru.

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

Kemudian kita hapus gambar yang lama di dalam Laravel menggunakan storage::delete.

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

Dan kita lakukan update data ke dalam database dengan menyertakan gambar yang baru.

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

Tapi jika tidak ada request file dengan nama image, maka kita cukup melakukan update data ke dalam database untuk title dan content saja.

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

Setelah itu kita redirect atau arahkan ke route yang bernama posts.index dengan menambahkan session flash data dengan key success dan memiliki value Data Berhasil Diubah!.

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

Langkah 12 - Membuat View From Edit

Setelah berhasil menambahkan 2 method di dalam controller, maka sekarang kita akan lanjutkan membuat view yang digunakan untuk menampilkan halaman form edit

Silahkan buat file baru dengan nama edit.blade.php di dalam folder resources/views/posts, kemudian masukan 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-sm 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('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('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>

Pada penambahan kode di atas, untuk menampilkan data pada form, kita cukup memanggil object-nya dan menaruh di dalam attribute value dan helper old. Contohnya seperti berikut ini

value="{{ old('title', $post->title) }}"

Dan karena content berada di dalam textarea, maka kita perlu menggunakan attribute value untuk menampilkan-nya.

{{ old('content', $post->content) }}

Kemudian untuk form action kita arahkan ke dalam route yang bernama posts.update dan kita berikan parameter ID.

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

	//...
	
</form>

Route posts.update akan otomatis mengarah ke dalam method update yang ada di dalam controller.

Dan jangan lupa, untuk form edit kita wajib menambahkan @method('PUT'). Itu bertujuan untuk memberitahu bahwa method yang akan digunakan adalah PUT.

Langkah 13 - Uji Coba Edit dan Update Data

Silahkan klik button EDIT yang ada pada halaman posts.index, jika berhasil maka akan menampilkan halaman form edit yang kurang lebih seperti berikut ini.

Silahkan coba update isi di dalamnya sesuai dengan keinginan dan klik button Update, jika berhasil maka kurang lebih seperti berikut ini.

Langkah 14 - Menambahkan Method Destroy

Disini kita akan menambahkan method baru di dalam controller post, method ini nanti kita gunakan untuk menghapus data dari database melalui model dan juga menghapus gambar dari folder storage Laravel.

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

<?php

namespace App\Http\Controllers;

//import Model "Post
use App\Models\Post;

use Illuminate\Http\Request;

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

//return type redirectResponse
use Illuminate\Http\RedirectResponse;

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

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

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

    /**
     * create
     *
     * @return View
     */
    public function create(): View
    {
        return view('posts.create');
    }
 
    /**
     * store
     *
     * @param  mixed $request
     * @return RedirectResponse
     */
    public function store(Request $request): RedirectResponse
    {
        //validate form
        $this->validate($request, [
            'image'     => 'required|image|mimes:jpeg,jpg,png|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!']);
    }
    
    /**
     * show
     *
     * @param  mixed $id
     * @return View
     */
    public function show(string $id): View
    {
        //get post by ID
        $post = Post::findOrFail($id);

        //render view with post
        return view('posts.show', compact('post'));
    }

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

        //render view with post
        return view('posts.edit', compact('post'));
    }
        
    /**
     * update
     *
     * @param  mixed $request
     * @param  mixed $id
     * @return RedirectResponse
     */
    public function update(Request $request, $id): RedirectResponse
    {
        //validate form
        $this->validate($request, [
            'image'     => 'image|mimes:jpeg,jpg,png|max:2048',
            'title'     => 'required|min:5',
            'content'   => 'required|min:10'
        ]);

        //get post by ID
        $post = Post::findOrFail($id);

        //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!']);
    }

    /**
     * destroy
     *
     * @param  mixed $post
     * @return void
     */
    public function destroy($id): RedirectResponse
    {
        //get post by ID
        $post = Post::findOrFail($id);

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

        //delete post
        $post->delete();

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

Dari perubahan kode di atas, kita menambahkan method baru dengan nama destroy dan pada parameternya kita berikan $id.

public function destroy($id): RedirectResponse
{

	//...
	
}

Di dalam method tersebut, pertama-tama kita melakukan get data post berdasarkan ID yang ada di parameter atau $id

//get post by ID
$post = Post::findOrFail($id);

Jika data ditemukan, maka kita lanjutkan melakukan delete gambar yang ada di dalam folder storage/app/public/posts.

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

Setelah gambar berhasil di delete, kita lanjutkan melakukan delete data di dalam database.

//delete post
$post->delete();

Jika data sudah berhasil didelete, maka kita akan redirect atau arahkan ke dalam route yang bernama posts.index dengan memberikan session flash dengan key success dan berisi value Data Berhasil Dihapus!.

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

Langkah 15 - Uji Coba Delete Data

Silahkan klik button DELETE disalah satu data, jika berhasil maka akan menampilkan sebuah alert konfirmasi.

Silahkan klik OK, maka data akan berhasil dihapus data database.

Sampai disini untuk materi Code Jam Academy Sesi 1 jika ada yang kurang paham/masih bingung bisa chat whatsapp

Source Code : github.com/RickyPrima30/cja-lar10-crud