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;
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.index dan 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 :
<template>
<div>
<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>
</div>
</template>
<script>
//import layout
import LayoutApp from '../../Layouts/App.vue'
import { reactive } from 'vue'
import { Inertia } from '@inertiajs/inertia'
export default {
//layout
layout: LayoutApp,
//props
props: {
errors: Object
},
//define Composition Api
setup() {
//state posts
const post = reactive({
title: '',
content: ''
})
//function storePost
function storePost() {
//define variable
let title = post.title
let content = post.content
//send data
Inertia.post('/posts/', {
title: title,
content: content
})
}
return {
post,
storePost
}
}
}
</script>
Dari penambahan kode di atas, pertama kita import Layout terlebih dahulu.
//import layout
import LayoutApp from '../../Layouts/App.vue
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 } from 'vue'
Setelah itu, kita import Inertia dari apater Inertia.js, ini akan kita gunakan untuk melakukan http request ke route Laravel, jadi kita tidak perlu menggunakan library tambahan seperti Axios.
import { Inertia } from '@inertiajs/inertia'
Kemudian kita register Layout di atas ke dalam properti layout.
//layout
layout: LayoutApp,
Dan untuk handle error validasi dari controller, kita melakukan definisi sebuah props dengan nama errors dan mempunyai jenis Object.
//props
props: {
errors: Object
},
Dan untuk mendefinisikan Composition API, maka kita perlu menggunakan method yang bernama setup.
setup() {
//...
}
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 mendefinisikan sebuah variable, yaitu title dan content. Dimana kedua variable tersebut berisi state yang sudah kita buat di atas, yaitu post.
//define variable
let title = post.title
let content = post.content
Kemudian kita akan kirim kedua variable tersebut ke dalam controller PostController dan method store untuk dilakukan proses insert data ke dalam database.
//send data
Inertia.post('/posts/', {
title: title,
content: content
})
Di atas kita menggunakan adapter dari Inertia untuk melakukan proses Http Request ke dalam controller.
Dan agar state dan function yang ada di dalam Composition API dapat digunakan di dalam template, maka kita perlu melakukan return terlebih dahulu.
return {
post, // <-- state "post"
storePost // <-- function "storePost"
}
Langkah 3 - Compiling Assets dan Menjalankan Project
Agar semua perubahan yang ada di dalam folder resources/js dapat diperbarui, maka kita perlu melakukan compiling assets lagi menggunakan Laravel MIX, silahkan jalankan perintah berikut ini di dalam terminal/CMD :
npm run dev
Silahkan di tunggu proses compiling sampai selesai, jika sudak 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