Laravel - Create, Read, Update dan Delete

 

Create, Read, Update dan Delete

Store Data Via Form Builder

kali ini kita akan membuat fitur CRUD, dimana pada fitur ini kita bisa melakukan management data post  Pertama kita akan membuat halaman baru untuk melakukan input data baru Post. Buat file baru resources/views/posts/create.blade.php, code nya seperti dibawah ini. Untuk sementara styling kita lewati terlebih dahulu

@extends('layouts.app')

 

@section('title''Create Post')

 

@section('content')

    <form action="{{ route('posts.store') }}" method="POST">

        @csrf

        <div>

            <input type="text" name="title">

        </div>

        <div>

            <textarea name="content"></textarea>

        </div>

        <div>

            <input type="submit" value="Create">

        </div>

    </form>

@endsection

 

Lalu kita akan tampilkan file blade yang telah dibuat kedalam website melalui controller PostController pada fungsi create

public function create()

{

    return view('posts.create');

}

 

Lalu kita coba buka pada browser, sebelumnya tinggal jalankan php artisan serve untuk menjalankan aplikasi laravelnya


Jika kita melakukan inspect elemen pada webnya makan akan terlihat seperti gambar dibawah

Kalau di perhatikan ada input dengan type hidden yang berfungsi sebagai token yang nantinya membantu untuk validasi form tersebut agar bisa di teruskan kepada controller posts dengan method post untuk lebih lengkapnya bisa melihat pada dokumentasi laravelnya CSRF

Lalu setelah itu kita akan coba menyimpannya pada database. Kali ini buka PostsController dan tambahkan pada fungsi store

public function store(Request $request)

{

    $post = new BlogPost();        

    $post->title = $request->input('title');

    $post->content = $request->input('content');

    $post->save();

 

    return redirect()->route('posts.show', ['post'=> $post->id]);

}

 Lalu kita akan coba menginput menggunakan form yang telah dibuat tadi


Lalu setelah itu kita coba untuk menginputnya , dan bisa dilihat ketika kita melakukan create post maka setelah terinput kita akan dialihkan menuju dari isi post tersebut

 


Form Validation

Setelah berhasil melakukan store data kita akan coba untuk memvalidasi form tersebut. untuk lebih lengkapnya Validation Rules, lalu kembali pada fungsi store.

public function store(Request $request)

{

    $request->validate([

        'title' => 'required|min:5|max:100',

        'content' => 'required|min:5'

    ]);

 

    $post = new BlogPost();

 

    $post->title = $request->input('title');

    $post->content = $request->input('content');

 

    $post->save();

 

    return redirect()->route('posts.show', ['post'=> $post->id]);

}

 

Dan tak lupa tambahkan fungsi yang akan menambahkan tampilan error

@extends('layouts.app')

 

@section('title''Create Post')

 

@section('content')

    <form action="{{ route('posts.store') }}" method="POST">

        @csrf

        <div>

            <input type="text" name="title">

        </div>

        <div>

            <textarea name="content"></textarea>

        </div>

        @if($errors->any())

            <div>

                <ul>

                    @foreach ($errors->all() as $error )

                        <li> {{ $error }}</li>

                    @endforeach

                </ul>

            </div>

        @endif

        <div>

            <input type="submit" value="Create">

        </div>

    </form>

 

@endsection

 

Lalu kita akan mencobanya pada browser dengan menginput data kosong dan juga data yang tidak sesuai inputan, maka akan muncul error seperti gambar dibawah ini

 

Custom Form Request Class

 Terkadang dalam mendevelop aplikasi kita membutuhkan form validation yang lebih komplek. Untuk menghandle validation yang komplek dan implementasi DRY Principle, kita bisa membuat custom request class. Jalan command dibawah ini.

php artisan make:request StorePost


Command tersebut akan membuat file app/Http/Requests/StorePost.php. Sekarang kita akan memindahkan logic validation yang ada pada function store() ke file app/Http/Requests/StorePost.php

 

<?php

namespace App\Http\Requests;

 

use Illuminate\Foundation\Http\FormRequest;

 

class StorePost extends FormRequest

{

    /**

     * Determine if the user is authorized to make this request.

     *

     * @return bool

     */

    public function authorize()

    {

        return true;

    }

 

    /**

     * Get the validation rules that apply to the request.

     *

     * @return array

     */

    public function rules()

    {

        return [

            'title' => 'required|min:5|max:100',

            'content' => 'required|min:5'

        ];

    }

}

 

 

Lalu buka kembali PostController dan tambahkan fungsi StorePost dan disini saya menambahkan alisas

<?php

 

namespace App\Http\Controllers;

 

use App\Http\Requests\StorePost as RequestsStorePost;

use App\Models\BlogPost;

use Illuminate\Http\Request;

 

Lalu setelah itu edit fungsi store pada PostController untuk menambahkan fungsi StorePost

public function store(RequestsStorePost $request)

{

    $validated = $request->validated();

 

    $post = new BlogPost();

 

    $post->title = $validated['title'];

    $post->content = $validated['content'];

 

    $post->save();

 

    return redirect()->route('posts.show', ['post'=> $post->id]);

}

 

Kalau berhasil dalam melakukan testing akan muncul error seperti gambar dibawah ini

 

Flash Message

Flash message adalah one time message yang berguna untuk memberikan info ketika pindah dari satu page ke page lain. Misalkan kita akan memberi tahu kalau blog post telah berhasil disimpan. Untuk lebih detail mengenai flash message bisa kunjungi halaman ini Session Flash Data.

Pada function store(), tambahkan code dibawah ini.

public function store(RequestsStorePost $request)

{

    $validated = $request->validated();

 

    $post = new BlogPost();

 

    $post->title = $validated['title'];

    $post->content = $validated['content'];

 

    $post->save();

 

    $request->session()->flash('Status''Blog Post Telah Berhasil disimpan !');

 

    return redirect()->route('posts.show', ['post'=> $post->id]);

}

 

Untuk memunculkan flash message ini, kita perlu menambahkan code pada file resources/views/layouts/app.blade.php

<body>

    <div class="container">

        @if(session('status'))

            <div style="background: green; color:#fff;">

                {{ session('status') }}

            </div>

        @endif

        @yield('content')

    </div>

</body>

 

Kita akan menambahkan post baru , maka setelah berhasil tersimpan maka akan muncul seperti ini. Kalau di refresh maka flash message berwarna hijau akan hilang.


Get Current Input When Validation Failed

Sekarang kalau kita submit form yang tidak valid, maka value dari input yang sudah kita type akan hilang. Alangkah lebih baiknya jika kita masih bisa memunculkan value tersebut. Ini akan sangat berguna ketika input form nya banyak. Untuk menghandle masalah tersebut kita akan menggunakan old() helper yang sudah disediakan oleh laravel

@extends('layouts.app')

 

@section('title''Create Post')

@section('content')

    <form action="{{ route('posts.store') }}" method="POST">

        @csrf

        <div>

            <input type="text" name="title" value="{{ old('title') }}">

        </div>

        <div>

            @error('title')

                {{ $message }}

            @enderror

        </div>

        <div>

            <textarea name="content">{{ old('content') }}</textarea>

        </div>

        <div>

            @error('content')

                {{ $message }}

            @enderror

        </div>

        @if($errors->any())

            <div>

                <ul>

                    @foreach ($errors->all() as $error )

                        <li> {{ $error }}</li>

                    @endforeach

                </ul>

            </div>

        @endif

        <div>

            <input type="submit" value="Create">

        </div>

    </form>

 

@endsection

Sekarang kita coba submit form yang tidak valid, maka hasilnya seperti ini


Model Mass Assignment

Model mass assignment berguna untuk men-set value dari field yang akan kita simpan tanpa harus type code satu per satu setting field secara explicit. Untuk lebih detail bisa kunjungi halaman ini Laravel Mass Assignment. Pada file model app/Models/BlogPost.php,

<?php

 

namespace App\Models;

 

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

 

class BlogPost extends Model

{

    protected $fillable = ['title''content'];

    use HasFactory;

}

 

 

Pada file app/Http/Controllers/PostsController.php function store(), ubah menjadi seperti ini.

public function store(RequestsStorePost $request)

{

    $validated = $request->validated();

 

    $post = BlogPost::create($validated);

 

    // $post = new BlogPost();

 

    // $post->title = $validated['title'];

    // $post->content = $validated['content'];

 

    // $post->save();

 

    $request->session()->flash('status''Blog Post Telah Berhasil disimpan !');

 

    return redirect()->route('posts.show', ['post'=> $post->id]);

}

 

Setelah itu coba menggunakan data yang valid maka akan berhasil



Edit Form

Form untuk edit dan create blog post bisa menggunakan form yang sama. Ini adalah implementasi DRY principle.  Buat file baru resources/views/posts/partials/form.blade.php, code nya seperti dibawah

<div class="form-group">

    <label for="title"> Title </label>

    <input id="title" type="text" name="title" class="form-control" value="{{ old('title', optional($post ?? null)->title ) }}">

</div>

@error('title')

    <div class="alert alert-danger"> {{ $message }}</div>

@enderror

<div class="form-group">

    <label for="content"> Title </label>

    <textarea id="content" name="content" class="form-control" >{{ old('content', optional($post ?? null)->content ) }}</textarea>

</div>

@error('content')

    <div class="alert alert-danger"> {{ $message }}</div>

@enderror

 

@if($errors->any())

    <div>

        <ul>

            @foreach ($errors->all() as $error )

                <li> {{ $error }}</li>

            @endforeach

        </ul>

    </div>

@endif

 

 

Ubah file resources/views/posts/create.blade.php menjadi seperti ini

@extends('layouts.app')

 

@section('title''Create Post')

 

@section('content')

    <form action="{{ route('posts.store') }}" method="POST">

        @csrf

        @include('posts.partials.form')

        <div>

            <input type="submit" value="Create">

        </div>

    </form>

 

@endsection

 

 

Buat file baru resources/views/posts/edit.blade.php, code nya seperti dibawah ini

@extends('layouts.app')

 

@section('title''Update Post')

 

@section('content')

    <form action="{{ route('posts.update', ['post'=> $post->id]) }}" method="POST">

        @csrf

        @method('PUT')

        @include('posts.partials.form')

        <div>

            <input type="submit" value="Create">

        </div>

    </form>

@endsection

 

 

Pada file app/Http/Controllers/PostsController.php function edit(), ubah menjadi seperti ini

public function edit($id)

{

    return view('posts.edit', ['post'=> BlogPost::findOrFail($id)]);

}

 

Sekarang kita coba buka form edit misalkan untuk blog post id = 7, http://localhost:8000/posts/7/edit. Kasus disya tampilannya seperti ini, jadi value dari form nya usah diisi oleh data yang kita ambil dari database.


Update Action

Pada file app/Http/Controllers/PostsController.php function update(), ubah menjadi seperti ini

public function update(RequestsStorePost $request, $id)

{

    $post = BlogPost::findOrFail($id);

    $validated = $request->validated();

    $post->fill($validated);

    $post->save();

 

    $request->session()->flash('status''Blog Post Telah Berhasil diupdate !');

 

    return redirect()->route('posts.show', ['post'=> $post->id]);

}

 

Sekarang kita coba update blog post dengan id = 7, http://localhost:8000/posts/7/edit. Maka ketika di submit hasilnya seperti ini

Delete Action

Untuk implementasikan delete action, kita akan mengubah file resources/views/posts/index.blade.php menjadi seperti ini.

@extends('layouts.app')

 

@section('title''Blog Posts')

 

@section('content')

    @forelse ($posts as $key => $post)

        <p>

            <h3> {{ $post['title'] }}</h3>

            {{ $post['content'] }}

 

            <form action="{{ route('posts.destroy', ['post'=> $post->id] ) }}" method="post">

                @csrf

                @method('DELETE')

                <input type="submit" value="Delete!" class="btn btn-primary">

            </form>

        </p>

    @empty

 

    @endforelse

@endsection

 

Pada file app/Http/Controllers/PostsController.php function destroy(), ubah menjadi seperti ini

public function destroy($id)

{

    $post = BlogPost::findOrFail($id);

    $post->delete();

 

    session()->flash('status''Blog Post Telah Berhasil dihapus !');

 

    return redirect()->route('posts.index');

}

 

Sekarang kita buka halaman http://localhost:8000/posts



Sekarang kita coba delete salah satu row nya



Sekian Artikel mengenai Laravel, mohon maaf apabila banyak sekali kekurangan


Terima kasih
Next Post Previous Post
1 Comments
  • Dika Prasetya Darmawan
    Dika Prasetya Darmawan 21 April 2021 pukul 12.37

    Terima Kasih bang,berkat abang saya bisa mengumpulkan tugas dengan baik dan benar. semoga abang semangat membuat blog nya !

Add Comment
comment url