- Langkah 1 - Membuat Method Create dan Store
- Langkah 2 - Membuat View Tambah Data
- Langkah 3 - Uji Coba Insert Data
Halo teman-teman semuanya, di artikel sebelumnya kita sudah belajar bagaimana cara menampilkan data dari database dan pada kesempatan kali ini kita semua akan belajar bagaimana cara memasukkan atau insert data ke dalam database.
Dengan menggunakan Inertia.js kita tentu tidak perlu membuat sebuah Rest API untuk bertukar data antara controller dan frontend, kita cukup membuat kode yang sama seperti pada umunya dan kita tinggal render menggunakan adapter dari Inertia.js.
Langkah 1 - Membuat Method Create dan Store
Pertama, kita akan membuat 2 method baru di dalam controller PostController, yaitu :
function create- method ini akan kita gunakan untuk melakukan render sebuah form untuk proses insert data.function store- method ini akan digunakan untuk memperoses data yang dikirim dari form dan di akan di insert ke dalam database.
Silahkan buka file app/Http/Controllers/PostController.php dan ubah semua kode-nya menjadi seperti berikut ini :
<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Inertia\Inertia;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Redirect;
class PostController extends Controller
{
/**
* index
*
* @return void
*/
public function index()
{
//get all posts from database
$posts = Post::latest()->get();
//render with data "posts"
return Inertia::render('Post/Index', [
'posts' => $posts
]);
}
/**
* create
*
* @return void
*/
public function create()
{
return Inertia::render('Post/Create');
}
/**
* store
*
* @param mixed $request
* @return void
*/
public function store(Request $request)
{
//set validation
$request->validate([
'title' => 'required',
'content' => 'required',
]);
//create post
$post = Post::create([
'title' => $request->title,
'content' => $request->content
]);
if($post) {
return Redirect::route('posts.index')->with('message', 'Data Berhasil Disimpan!');
}
}
}
Dari perubahan kode di atas, pertama kita melakukan import Http Request dari Laravel, ini akan kita gunakan untuk menerima sebuah request yang dikirim dari form, url, cookie dan lain-lain.
use Illuminate\Http\Request;
Selanjutnya, kita juga melakukan import Facades Redirect, ini akan kita gunakan untuk melakukan redirect ke dalam sebuah route atau url tertentu.
use Illuminate\Support\Facades\Redirect;
Kemudian kita menambahkan 2 method baru, yaitu:
-
Function Create
Method ini akan digunakan untuk melakukan render sebuah halaman form untuk melakukan input data.
return Inertia::render('Post/Create'); -
Function Store
Method ini akan kita gunakan untuk melakukan proses insert data yang dikirim dari form ke dalam database, disini pertama kita lakukan sebuah pengecekan valiasi terlebih dahulu, dimana digunakan untuk memastikan apakah data yang akan di insert sudah benar-benar sesuai atau belum.
//set validation $request->validate([ 'title' => 'required', 'content' => 'required', ]);Jika data yang dikirim sudah sesuai, maka kita akan melakukan proses insert menggunakan Model Eloquent, kurang lebih seperti berikut ini :
//create post $post = Post::create([ 'title' => $request->title, 'content' => $request->content ]);Setelah itu, kita lakukan sebuah kondisi untuk memastikan apakah proses insert data di atas berhasil atau tidak, jika berhasil maka kita akan lakukan redirect ke dalam route yang bernama
posts.indexdan kita berikan sebuah flash message juga.if($post) { return Redirect::route('posts.index')->with('message', 'Data Berhasil Disimpan!'); }
Langkah 2 - Membuat View Tambah Data
Sekarang kita tinggal lanjutkan untuk menambahkan sebuah view baru untuk menampilkan halaman form, silahkan buat file baru dengan nama Create.vue di dalam folder resources/js/Pages/Post/ dan masukkan kode berikut ini :
<script setup>
// import layout app
import Layout from '../../Layouts/App.vue'
// get props "errors" dari controller
defineProps({
errors: Object
})
// import reactive
import { reactive } from 'vue'
// import router
import { router } from '@inertiajs/vue3'
//state posts
const post = reactive({
title: '',
content: ''
})
//function storePost
function storePost() {
//send data to server
router.post('/posts', post)
}
</script>
<template>
<Layout>
<div class="card border-0 rounded shadow">
<div class="card-body">
<h4>TAMBAH POST</h4>
<hr>
<form @submit.prevent="storePost">
<div class="mb-3">
<label class="form-label">TITLE POST</label>
<input type="text" class="form-control" v-model="post.title" placeholder="Masukkan Title Post">
<div v-if="errors.title" class="mt-2 alert alert-danger">
{{ errors.title }}
</div>
</div>
<div class="mb-3">
<label class="form-label">CONTENT</label>
<textarea class="form-control" rows="5" v-model="post.content"
placeholder="Masukkan Content Post"></textarea>
<div v-if="errors.content" class="mt-2 alert alert-danger">
{{ errors.content }}
</div>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-primary btn-md shadow-sm me-2">SIMPAN</button>
<button type="reset" class="btn btn-warning btn-md shadow-sm">RESET</button>
</div>
</form>
</div>
</div>
</Layout>
</template>
Dari penambahan kode di atas, pertama kita import Layout terlebih dahulu.
// import layout app
import Layout from '../../Layouts/App.vue'
Selanjutnya, untuk handle error validasi dari controller, kita melakukan definisi sebuah props dengan nama errors dan mempunyai jenis Object.
// get props "errors" dari controller
defineProps({
errors: Object
})
Kemudian kita import Reactivity API dari Vue.js yaitu reactive, ini akan digunakan untuk membuat sebuah state secara realtime di dalam Composition API.
// import reactive
import { reactive } from 'vue'
Setelah itu, kita import router dari Inertia.js, ini akan kita gunakan untuk melakukan http request ke route Laravel, jadi kita tidak perlu menggunakan library tambahan seperti Axios.
// import router
import { router } from '@inertiajs/vue3'
Dan di dalam Composition API, pertama kita membuat sebuah state yang bernama post dan state ini menggunakan Reactivity API yaitu reactive.
//state posts
const post = reactive({
title: '',
content: ''
})
Kemudian kita membuat sebuah function yang bernama storePost, fungsi ini akan dijalankan ketika pengguna melakukan submit form.
//function storePost
function storePost() {
//...
}
Di dalam function tersebut kita akan mengirimkan data ke dalam controller PostController dan method store untuk dilakukan proses insert data ke dalam database.
//send data to server
router.post('/posts', post)
Di atas kita menggunakan router dari Inertia untuk melakukan proses Http Request ke dalam controller.
Langkah 3 - Uji Coba Insert Data
Sekarang silahkan klik button TAMBAH DATA atau bisa klik link http://localhost:8000/posts/create dan jika berhasil maka kurang lebih tampilannya seperti berikut ini :
Silahkan klik SIMPAN tanpa perlu mengisi data apapun dan jika berhasil maka kita akan mendapatkan sebuah error validasi kurang lebih seperti berikut ini :
Dan sekarang silahkan isi data title dan content sesuai dengan keinginan masing-masing dan kemudian klik button SIMPAN, jika berhasil maka kita akan diarahkan ke halaman index post dan menampilkan pesan sukses.
Sampai disini pembahasan bagaimana cara membuat fitur insert data di dalam Inertia.js dan Laravel, di artikel selanjutnya kita semua akan belajar bagaimana cara membuat proses edit dan update data ke dalam database.
Terima Kasih
Artikel ini dibaca sebanyak 11.201 kali
SAWERIA
Memuat komentar...