Membuat Blog dengan Laravel & VueJS - # 23 | Slug

Kita akan lanjutnya dengan membuat slug, dimana saat kita membaca postingan blog kita tidak menggunakan id sebagai parameter, tetapi kita gunakan slug.

Menambahkan Kolom di Database

Langkah pertama yang kita kerjakan adalah terlebih dahulu kita menambahkan sebuah kolom pada table posts untuk diisi data slugnya.

Kita membuat file migrasi untuk menambahkan kolomnya.

php artisan make:migration add_slug_to_table_posts --table=posts

Kemudian buka file migrasinya dan tambahkan kolom dan jalankan perintah migrate.

...
public function up()
{
   Schema::table('posts', function (Blueprint $table) {
     $table->string('slug')->after('image');
   });
}
...

php artisan migrate

PostController.php

Kemudian buka postcontroller.php dan tambahkan store untuk data slug.

//postcontroller.php
...
  $post = new Post;
  $post->slug = str_slug($request->title);
...

Jika kita lihat, kita akan isi data slug dengan data dari title.

Sampai disini silahkan mencoba untuk membuat pos baru, jika berhasil maka data slug akan terisi secara otomatis.

Merubah Parameter

etelah kita memiliki data slug di database pada table posts, selanjutnya kita akan merubah parameter untuk dapat memanggil slug.

Pada PostController silahkan ubah method show seperti berikut:

public function show($slug)
{
   return Post::with('category', 'user')
              ->where('slug', $slug)
              ->firstOrFail();
}

Router Params

Langkah selanjutnya kita buka app.js dan ubah parameter router menjadi :slug.

//app.js
...
{
   path: '/read/:slug',
   name: 'readpost',
   component: ReadPost
},
...

Selanjutnya buka komponen HomepagePosts.vue dan ubah params pada router-link.

//HomepagePosts.vue
<router-link :to="{name: 'readpost', params: {slug: post.slug} }">
    <button type="button" class="btn btn-secondary btn-sm float-right">Read More..</button> 
</router-link>

Langkah terakhir kita buka komponen ReadPost.vue dan ubah parameternya pada url.

//ReadPost.vue
let id = this.$route.params.slug;
axios.get("/api/posts/" + id)

Sampai disini kita sudah bisa menggunakan slug sebagai parameter untuk membaca postingan blog.

Urutan part / bagian dari tutorial ini bisa dilihat paga bagian pertama: Membuat Blog Menggunakan Framework Laravel-Vue.js.