Membuat Blog dengan Laravel & VueJS - #12 | Edit Pos

Kembali kita lanjutnya dalam mengerkan action button pada halaman AllPosts.vue, yang sebelumnya sudah kita kerjakan untuk button delete dan sekarang kita lanjutkan dengan mengerjakan button edit.

Berbeda dengan button delete dinama dalam pembuatan fungsi penghapusan pos kita buat di komponen allposts.vue, untuk button edit akan berbeda dimana kita akan membuat komponen baru sebagai halaman untuk mengedit data pos dan pada buttonnya hanya akan kita beri route yang diarahkan ke halaman edit.

Mari kita mulai mengerjakannya.

Membuat Komponen

Pertama mari kita buat komponen baru pada resources/js/components dengan nama EditPost.vue.

//EditPost.vue
<template>
  <div class="_container">
    <div class="admin-page-title">Edit Post</div>
      <div class="_wrap-form">
        <form class="_bg-form">
          <div class="form-group">
            <input type="title" ref="title" class="form-control" id="title" placeholder="Title">
          </div> 
          <div class="form-group">
            <select class="form-control" ref="category_id">
              <option value=" "> Select Category  </option> 
          </select>  
          </div> 
          <div class="form-group"> 
            <textarea class="form-control" ref="body" id="body" placeholder="Body" rows="8"></textarea>
          </div>
          <div class="form-group"> 
            <div class="custom-file mb-3">
              <input type="file" ref="image" name="image" class="custom-file-input" id="image" required>
              <label class="custom-file-label" >Choose file...</label>
            </div>
          </div>
          <button type="submit" class="btn btn-successs">Submit</button>

          <router-link :to="{ name: 'allPosts'}">
            <button type="submit" class="btn btn-primary">Back</button>
          </router-link>

      </form><br><br>
    </div>
  </div>
</template> 


<script>

export default {  
    
  data:function() {
      return { 
        //
      }
    },
    methods: { 
      //
    }
  };

</script>

Membuat Route

Setelah komponen dibuat, kita akan import dan membuat route'nya di app.js.

//app.js
import EditPost from './components/EditPost'

{
   path: '/admin/editpost/:postId/edit',
   name: 'editpost',
   component: EditPost,
   props: true, 
},

Jika dilihat pada router path'nya kita sesuaikan dengan route pada api.php . Dimana pada url'nya terdapat parameter dan slash ( / ) edit.

php artisan route:list

Router Link

Selanjutnya kita buat router-link pada button edit di komponen AllPosts.vue.

//AllPosts.vue
...
<router-link :to="{ name: 'editpost', params: { postId : post.id } }">
   <button type="button" class="btn btn-primary">Edit</button>
</router-link>
...

PostController.php

Kemudian buka PostController.php dan buat fungsi pada method edit.

public function edit($id)
{
  return Post::findOrFail($id);
}

Dengan parameter id kita me'return pos sesuai dengan id nya ke halaman edit.

Mari kita coba masuk ke halaman edit dengan menekan button edit pada pos dihalaman allposts.


Pada url terlihat kita masuk ke halaman editpost sesuai id dari pos.

Hasil akhir komponen EditPost.vue:

//EditPost.vue
<template>
  <div class="_container">
    <div class="admin-page-title">Edit Post</div>
  
    <span v-if="successful" class="label label-success">
      <h4>Updated!</h4>
      <small>(Post berhasil diperbaharui!)</small>
    </span>

      <div class="_wrap-form">
        <form class="_bg-form">         
          <div class="form-group">
            <span v-if="errors.title" class="badge badge-danger">{{errors.title[0]}}</span>
            <input type="title" v-model="title" class="form-control" ref="title" id="title" placeholder="Title">
          </div> 
          
          <div class="form-group"> 
            <span v-if="errors.category_id" class="badge badge-danger">{{errors.category_id[0]}}</span>
            <select class="form-control" v-model="old_category" ref="category_id">
              <option value=""> Select Category </option>
                <option v-for="category in categories" v-bind:value="category.id">
                    {{category.name}}
                </option> 
            </select>  
          </div>

          <div class="form-group">
            <span v-if="errors.body" class="badge badge-danger">{{errors.body[0]}}</span>
            <textarea class="form-control" v-model="body" id="body" ref="body" placeholder="Body" rows="8"></textarea>
          </div>

          <div class="form-group">
            <div class="col-4">
             <img :src="'/images/' + image" style="width: 100%">              
            </div>
          </div>

          
          <div class="form-group">
            <span v-if="errors.image" class="badge badge-danger">{{errors.image[0]}}</span>
            <div class="custom-file mb-3">
            <input type="file" ref="image" name="image" class="custom-file-input" id="image" required>
            <label class="custom-file-label" >Choose file...</label>
           </div>
          </div>

          <button type="submit" @click.prevent="updatePost" class="btn btn-primary">
            Submit
          </button>   
        </form><br><br><br>
      </div>
    </div>
</template>

<script>
  export default{
    props:{
      postId:{
        type: Number,
        required : true
      }
    },
    data:function(){
      return{
        successful: false,
        errors:[],
        categories: [],
        title: '',
        body: '',
        image: '',
        old_category: ''

      }
    },
    created:function(){
      this.getCategories();
      this.getPosts();
    },
    methods:{
      updatePost(){
        const formData = new FormData();
        formData.append('title', this.$refs.title.value);
        formData.append('body', this.$refs.body.value); 
        formData.append('image', this.$refs.image.files[0]);
        formData.append('category_id', this.$refs.category_id.value);
        formData.append('_method','PUT');

        axios.post('/api/posts/' + this.postId, 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;
            }
          }); 
      },
    getPosts(){
        axios.get("/api/posts/" + this.postId + '/edit')
          .then(response => {
            console.log(response.data);
            this.title = response.data.title;
            this.body = response.data.body;
            this.image = response.data.image;
            this.old_category = response.data.category_id;
        })
      },
      getCategories(){
        axios.get("/api/getCategories")
          .then(response => {
            console.log(response.data);
            this.categories = response.data;
        })
      }
    }

  }
</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>

Kemudian buka PostController.php dan buat request pada method update.

//PostController.php
    public function update(Request $request, $id)
    {
      $request->validate([
        'title' => 'required',
        'body' => 'required',
        'category_id' => 'required',
        // 'image' => 'required|mimes:png,jpg,jpeg'
      ]);

      $post = Post::find($id); 
      $post->title = $request->title;
      $post->body = $request->body;

      if($request->hasFile('image')){
      $image = $request->file('image');
      $name = str_slug($request->title).'.'.$image->getClientOriginalExtension();
      $location = public_path('/images/');
      $image->move($location, $name);
      $oldImage = $post->image;
      \Storage::delete($oldImage);
      $post->image = $name;
      }

      $post->category_id = $request->category_id;

      $post->save();

      return $post;
    }

Sampai disini kita sudah bisa mengedit data pos.