Membuat Blog dengan Laravel & VueJS - #16 | Membuat Kategori Baru

wahyunanangwidodo

wahyunanangwidodo Rabu, 09 Oktober 2019

Membuat Blog dengan Laravel & VueJS - #16 | Membuat Kategori Baru

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&nbsp 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>
Membuat Blog dengan Laravel & VueJS - #16 | Membuat Kategori Baru

Setelah semua dikerjakan, silahkan coba untuk membuat kategori baru.

Urutan part / bagian dari tutorial ini bisa dilihat disini.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Berlangganan

Berlangganan untuk mendapat pemberitahuan artikel terbaru via email.