Membuat Blog dengan Laravel & VueJS - #22 | Paginasi - /homepage

Kita akan kembali menambahkan paginasi, dan kita buat untuk halaman homepage.

PostController.php

Pertama kita buka PostController.php dan buat fungsi di method getHomepagePosts.

//PostController.php
public function getHomepagePosts()
{ 
  $posts = Post::orderBy('id', 'asc')->paginate(3);

  $response = [
    'pagination' => [
      'total' => $posts->total(),
      'per_page' => $posts->perPage(),
      'current_page' => $posts->currentPage(),
      'last_page' => $posts->lastPage(),
      'from' => $posts->firstItem(),
      'to' => $posts->lastItem()
      ],
    'data' => $posts
  ];
      
  return response()->json($response);
}

Kita gunakan 'orderBy' untuk mensortir atau mengurutkan query/pos dari yang terkecil ke terbesar berdasarkan id pos, dan perhalaman kita tampilkan 3 postingan.

HomepagePosts.vue

Setelah dari controller selanjutnya kita buka komponen HomepagePosts.vue untuk kita tambahkan paginasi.

Silahkan replace / ubah template yang ada dengan template dibawah ini.

//HomepagePosts.vue
<template>
<div>
  <div class="jumbotron">
    <h1 class="display-4">Hello, world!</h1>
    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <hr class="my-4"> 
  </div>
    <h2 id="titlepage">Blog</h2>
    <hr>
  <div class="row">
    <div class="form-group col-md-12">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
    </div>  
  </div>
    <hr>      
  <div class="row">
    <div class="col-md-4" v-for="post in posts" style="padding-bottom: 25px;">          
      <div class="card rounded-0 p-0 shadow-sm">
        <img :src="'/images/' + post.image" class="card-img-top rounded-0" alt=""/> 
          <div class="card-body">
            <h6 class="card-title">{{ post.title }}</h6>
            <a href="#" target="_blank" class="btn btn-light btn-sm float-left"><i class="fa fa-share"></i></a> 
            <router-link :to="{ name: 'readpost', params: { id : post.id } }">
                <button type="button" class="btn btn-secondary btn-sm float-right">
                       Read More..
                </button>
            </router-link>  
        </div>
      </div>          
    </div> 
   </div> 
   <pagination v-if="pagination.last_page > 1" :pagination="pagination" :offset="5" @paginate="getPosts()"></pagination>
  </div> 
</template>
<script>  
import pagination from './Pagination.vue';

export default { 
   components: {
    pagination
  },
  
  data() {
      return {
        posts: {},
        pagination: {
            'current_page': 1
        },   
      };
    },
    created: function () {
      this.getPosts();
    },
    methods: {
      getPosts() {
        axios.get('/api/getHomepagePosts?page=' + this.pagination.current_page)
        // axios.get('/api/getHomepagePosts')
        .then(response => {
          console.log(response.data)
          // this.posts = response.data;  
          this.posts = response.data.data.data;  
          this.pagination = response.data.pagination;
        })
        .catch(error => {
          console.log(error.response.data);
        });
      }, 
    }
  };
</script>

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