Dalam pembuatan kategori atau list nama-nama kategori sebelumnya dalam pembuatannya masih secara manual, yaitu membuatnya langsung melalui database.
Cara manual ini tentu akan merepotkan dan tentu kita perlu halaman khusus untuk pembuatan kategori baru.
Oleh karena itu, malanjutkan tutorial ini kita akan membuat halaman untuk pembuatan kategori baru.
Membuat Komponen
Langsung saja, hal pertama yang akan kita kerjakan adalah membuat komponen baru untuk halaman yang digunakan untuk membuat kategori baru.Mari kita buat file / komponen baru pada resources/js/components dan beri nama  CreateCategory.vue.
//CreateCategory.vue
<template>
<div class="_container">
<div class="admin-page-title">Create New Category</div>
<div class="_wrap-form">
<div class="h_wrap">
<form class="_bg-form">
<div class="form-group">
<input type="text" ref="name" class="form-control" id="name" placeholder="Name">
</div>
<button type="submit" class="btn btn-primary">
Submit
</button>
</form>
</div>
</div>
</div>
</template>
Lalu import komponen dan buat routenya pada file app.js.//app.js
import CreateCategory from './components/CreateCategory'
{
path: '/admin/createcategory',
name: 'createcategory',
component: CreateCategory,
props: true,
},
Setelah itu kita tambahkan menu pada komponen MenuAdmin.vue.//MenuAdmin.vue
<li>
<router-link :to="{ name: 'createcategory', params: {userId} }"><i class="fa fa-pencil-square-o"/>
<span class="text"> NEW CATEGORY </span></router-link>
</li>
Setelah halaman createcategory dibuat, selanjutnya kita akan membuat request mengirim formulir data kategori.CategoryController.php
Kita buka CategoryController.php dan kita buat request pada method store.//CategoryController.php
public function store(Request $request)
{
$this->validate($request, [
'name' => 'required'
]);
$category = new Category;
$category->name = $request->name;
$category->user_id = $request->user_id;
$category->save();
return $category;
}
CreateCategory.vue
Selanjutnya kita buka komponen CreateCategory.vue dan kita buat event data formulir.Hasil akhir komponen CreateCategory.vue:
//CreateCategory.vue
<template>
<div class="_container">
<div class="admin-page-title">Create New Category</div>
<span v-if="successful" class="label label-success">
<h4>Saved Successfully!</h4>
<small>(Kategori baru berhasil dibuat!)</small>
</span>
<div class="_wrap-form">
<form class="_bg-form">
<div class="form-group">
<span v-if="errors.name" class="badge badge-danger">{{errors.name[0]}}</span>
<input type="text" class="form-control" ref="name" id="name" placeholder="Name">
</div>
<button type="submit" @click.prevent="createCategory" class="btn btn-primary">
Submit
</button>
</form><br><br><br>
</div>
</div>
</template>
<script>
export default{
props:{
userId:{
type: Number,
required : true
}
},
data:function(){
return{
successful: false,
errors:[],
}
},
methods:{
createCategory(){
const formData = new FormData();
formData.append('name', this.$refs.name.value);
formData.append('user_id', this.userId);
axios.post('/api/categories', formData)
.then(response => {
console.log(response.data);
this.successful = true;
this.errors = false;
})
.catch(error => {
if((error.response.status = 422 )){
console.log(error.response.data);
this.errors = error.response.data.errors;
this.successful = false;
}
});
this.$refs.name.value = "";
},
}
}
</script>
<style scoped>
.label-success{
background-color: #4fca6b;
display: inline-block;
width: 100%;
color: #fff;
padding: 8px 15px;
margin-bottom: 8px;
}
.label-success h4{
margin-bottom: 0;
}
</style>
Setelah semua dikerjakan, silahkan coba untuk membuat kategori baru.
Urutan part / bagian dari tutorial ini bisa dilihat disini.