Membuat Blog dengan Laravel & VueJS - #6 | Menyimpan data

Setelah halaman untuk pembuatan postingan telah kita buat di sebelumnya, sekarang kita lanjutkan dengan membuat fungsi untuk store data menyimpannya ke database.

Membuat Controller

Kita mulai dengan membuat sebuah controller baru dan kita beri nama PostController.php.

php artisan make:controller PostController -r

Keterangan:
Perintah diatas kita menambahkan opsi 'r' atau  --resource  dalam pembuatan PostController.php. Dimana opsi ini memberi kemudan bagi kita dalam pembuatan CRUD. Karena controller yang terbuat secara otomatis akan memiliki method-method untuk membantu kita dalam membuat fungsi untuk setiap proses CRUD. Meskipun bisa tidak semua method kita gunakan dan atau kita bisa menambahkan method lainnya.

Selanjutnya kita buka file  PostController.php  yang letaknya di  app/Http/controllers. Kita akan membuat action, membuat request untuk store data di method Store.

    
public function store(Request $request)
{ 
    $post = new Post;
    $post->user_id = $request->user_id;
    $post->title = $request->title; 
    $post->body = $request->body; 
    $post->save();

    return $post;
}

Setelah itu kita perlu menghubungkannya dengan model post. Tambahkan class berikut:

use App\Post;

//PostController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;

...

Membuat Route

Langkah selanjutnya kita akan membuat route. Silahkan buka file  api.php  di direktori  routes.

//api.php
Route::resource('posts', 'PostController');

Event Handling

//CreatePost.vue        
<form class="_bg-form">         
  <div class="form-group">
    <input type="text" ref="title" class="form-control" id="title" placeholder="Title">
</div> 
  <div class="form-group">
    <textarea class="form-control" ref="body" id="body" placeholder="Body" rows="8"></textarea>
</div>
  <button type="submit" @click.prevent="create" class="btn btn-primary">
  Submit
   </button>
</form>

Penjelasan:
Pada form diatas, kita tambahkan atribut  ref  di 2 elemen input dan textarea dengan memberi nama filed title dan body. Juga kita buat event handler  @click  pada elemen  <button> .

Selanjutnya, masih di komponen  CreaetPost.vue , tambahkan syntax berikut:

//CreatePost.vue
<script>
    export default {
      props: {
        userId: {
          type: Number,
          required: true
        }
      },
      methods: { 
        create() {
          const formData = new FormData();
          formData.append("title", this.$refs.title.value);
          formData.append("body", this.$refs.body.value); 
          formData.append("user_id", this.userId); 

          axios.post("/api/posts", formData)
            .then(response => {
              console.log('ok');
            }) 

          this.$refs.title.value = "";
          this.$refs.body.value = ""; 
        }
      }
    };
</script>

Penjelasan:

• Kita mengambil id dari user dengan membuat props  userId. Kita juga memberikan validasi dengan membuat object dan mengatur veluenya.
• Pada method  create() kita menggunakan  FormData untuk mengumpulkan nilai / value sebagai formulir yang akan dikirim. Kita membuat objek  formdata baru menggunakan konstruktor  FormData(), dan kita menambahkan nilai / velue menggunakan  formData.append().
• Properti  $refs mengambil nilai / value dari element pada form yang kita tambahkan atribut  ref.
• Kita kirim data pada formData menggunakan axios dengan  POST request dan url dari route yang kita buat di api.php.
• Jika berhasil kita membuat response yang dapat kita lihat di console browser. 
• Setelah data dikirim maka value pada element form akan dikosongkan. 

Hasil akhir komponen CreatePost.vue:

//CreatePost.vue
<template>
  <div class="_container">
    <div class="admin-page-title">Create New Post</div>
      <div class="_wrap-form">
        <form class="_bg-form">         
          <div class="form-group">
            <input type="text" ref="title" class="form-control" id="title" placeholder="Title">
          </div> 
          <div class="form-group">
            <textarea class="form-control" ref="body" id="body" placeholder="Body" rows="8"></textarea>
          </div>
            <button type="submit" @click.prevent="create" class="btn btn-primary">
            Submit
          </button>
        </form><br><br><br>
      </div>
    </div>
</template>

<script>
  export default {
    props: {
      userId: {
        type: Number,
        required: true
      }
    },  
    methods: { 
      create() {
        const formData = new FormData();
        formData.append("title", this.$refs.title.value);
        formData.append("body", this.$refs.body.value); 
        formData.append("user_id", this.userId); 

        axios.post("/api/posts", formData)
          .then(response => { 
            console.log(response.data);
          }) 

        this.$refs.title.value = "";
        this.$refs.body.value = ""; 
      }
    }
  };
</script>

Selanjutnya setelah komponen CreaetPost.vue selesai dikerjakan, kita buka file index.blade.php di direktori views/admin.

Pada file index.blade.php kita memiliki komponen  <Menuadmin></Menuadmin>, disini kita akan membuat props pada komponen yang mengambil id dari user.

//index.blade.php
...
<div class="side-menu">
  <div class="logo">
    <h1 class="ch1"> Teluk Coding</h1>
    <p class="cp">Admin Panel | Dashboard</p>     
  </div>
<Menuadmin :user-id='@json(auth()->user()->id)'></Menuadmin>
</div>
...

Lalu buka komponen Menuadmin.vue dan copas template dibawah ini:

//Menuadmin.vue
<template>
  <div>
    <div class="menu">
      <ul>
        <li>
        <router-link :to="{ name: 'dashboard'}"><i class="fa fa-home"/>
          <span class="text"> DASHBOARD </span>
       </router-link>
        </li>
        <li>
        <router-link :to="{ name: 'createpost', params: {userId}  }"><i class="fa fa-pencil-square-o"/> 
          <span class="text"> NEW POST </span></router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
 
 <script>
   export default{
    props:{
      userId:{}
    }
   }
 </script>

Kita tambahkan props userId pada router-link yang akan diteruskan ke komponen  CreatePost.vue  untuk dapat menyimpan id dari user saat membuat pos baru.

Terakhir kita buka file  app.js. Kita tambahkan opsi  props: true di router untuk mengaktifkan props pada komponen.

//app.js
...
const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/admin/dashboard',
            name: 'Dashboard',
            component: WelcomeAdmin
        },
        {
            path: '/admin/CreatePost',
            name: 'CreatePost',
            component: CreatePost, 
            props: true,
        },

    ],
});
...

Setelah semua dikerjakan, selanjutnya silahkan coba untuk membuat post baru pada halaman createpost.