Belajar Laravel - Cara Menampilkan Data di Database dengan VueJS

Sebelumnya saya telah membagikan tutorial bagaimana menyimpan data ke database di laravel dengan vuejs, dan pada kesempatan ini kembali saya membagikan tutorial bagaimana menampilkan data yang ada di database dengan vuejs.

Untuk data yang akan ditampilkan, disini saya mengambil data yang ada di database dari tutorial sebelumnya. Jadi tinggal melanjutkan project / aplikasi yang sudah ada dan tinggal membuat fungsi untuk mengambil data dan ditampilkan.

Mengambil Data di Controller

Langkah pertama kita akan mengerjakan dari bagian controller. Kita membuat fungsi untuk pengambilan data / retrieving data.

Pada NoteController.php kita membuat fungsi yang mereturn model yaitu Note di method index.

//NoteController.php
public function index()
{
  return Note::all();
}

Bisa juga seperti dibawah ini:

//NoteController.php
public function index()
{
  return Note::latest()->get();
}

Silahkan pilih salah satu.

List Rendering

Selanjutnya kita akan membuat fungsi yaitu list rendering pada komponen, dan kita buat di komponen MyNotes.vue.

//MyNotes.vue
<template>
  <div> 
    <div class="list-group" v-for="note in notes"> 
      <a href="" class="list-group-item">
        <h5>{{ note.title }}</h5>
      </a>  
  </div> 
</div>
</template>

<script>
  export default {  
    data:function() {
      return {
        notes: [], 
      }
    }, 
    created () { 
        axios.get('/api/notes') 
          .then(response => { 
            
            //console.log(JSON.stringify(response.data));
            //console.log(response.data);
            
            this.notes = response.data;   
          
          })
          .catch(error => {
              console.log(error.response.data);
          }); 
      }
  };
</script>

<style scoped>
  .list-group a{ 
    margin: 4px 0px;
  }
  .list-group a:hover{
    background: #666;
    color: #fff;
    text-decoration: none;
    margin: 4px 0px;
  }
</style>

Penjelasan singkat:
*Kita tampilkan data note dengan membuat list group.
*Kita gunakan directive v-for untuk menampilkan data note dalam bentuk array.
*Pada directive terdapat syntax note in notes, dimana note merupakan suatu alias yang memetakan array dari properti notes sebagi sumber data array.
*Kita hanya merender satu data dari array yaitu title pada komponen.

Disini komponennya tidak perlu di import dan membuat route komponen lagi, karena sudah dibuat sebelumnya. Begitu juga dengan menu serta route controller juga telah dibuat sebelumnya.

Jadi sampai disini kita tinggal coba untuk melihat hasilnya pada browser.

Jika tidak ada kesalahan maka akan terlihat seperti gambar dibawah ini.


Pada komponen MyNotes.vue kita hanya menampilkan title dari note, dan kita akan membuat fungsi lagi untuk membaca konten keseluruhan dari note seperti title dan body.

Data note seperti title dan body ini akan ditampilkan di halaman yang berbeda saat dibaca, dan hanya menampilkan note yang dipilih berdasarkan id sebagai parameternya.

Membuat Komponen

Mari kita membuat komponen baru dengan nama ReadNote.vue lalu copas template dibawah ini.

//ReadNote.vue
<template>
  <div class="read">
    <h1>{{title}}</h1><hr>
    <p>{{body}}</p>
  </div>
</template>

<script>
 export default {
   data:function() {
        return {
          title:'',
          body:'',
        };
      }, 
    mounted() {
        axios.get('/api/notes/' + this.$route.params.id)
        .then(response=>{
          // console.log(response.data) 
          this.title=response.data.title;
          this.body=response.data.body; 
        });
    }
};
</script>

<style scoped>
 .read p{
  font-size: 15px;
 }
</style>

Kita menampilkan data object sesuai parameter id yang mengambil id dari note.

Selanjutnya kita import dan membuat route untuk komponen ReadNote.vue di file app.js.

//app.js
require('./bootstrap');

window.Vue = require('vue');
 
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import MyNotes from './components/MyNotes' 

import Linkmenu from './components/Linkmenu'

import CreateNote from './components/CreateNote'

import ReadNote from './components/ReadNote'

const router = new VueRouter({
    mode: 'history',
    routes: [ 
        {
            path: '/home',
            name: 'mynotes',
            component: MyNotes, 
            props: true,
        },
        {
            path: '/createnote',
            name: 'createnote',
            component: CreateNote, 
            props: true,
        },
        {
            path: '/read/:id',
            name: 'readnote',
            component: ReadNote,
            props: true,
        },
    ],
});

const app = new Vue({
    el: '#app',
    router, 
     components: { Linkmenu }
});

Kemudian buka komponen MyNote.vue dan kita buat route-link dengan parameter yang mengambil id dari note sebagai rujukan.

//MyNotes.vue
<template>
  <div> 
    <div class="list-group" v-for="note in notes"> 
     <router-link :to="{ name: 'readnote', params: { id : note.id } }" class="list-group-item">
     <h5>{{ note.title }}</h5>
     </router-link>  
  </div> 
</div>
</template>

<script>
  export default {  
    data:function() {
      return {
        notes: [], 
      }
    }, 
    created () { 
        axios.get('/api/notes') 
          .then(response => { 
            
            // console.log(JSON.stringify(response.data));
            // console.log(response.data);
            
            this.notes = response.data;   
          
          })
          .catch(error => {
              console.log(error.response.data);
          }); 
      }
  };
</script>

<style scoped>
  .list-group a{ 
    margin: 4px 0px;
  }
  .list-group a:hover{
    background: #666;
    color: #fff;
    text-decoration: none;
    margin: 4px 0px;
  }
</style>

Terakhir kita buka NoteController.php dan pada method show kita buat fungsi yang mengambil data note dengan parameter.

//NoteController.php
public function show($id)
{
  return Note::findOrFail($id);  
}

Sampai disini kita tinggal mencobanya. Pastikan php artisan serve dan npm run watch telah dijalankan dan tidak ada kesalahan.


Demikianlah bagaimana cara untuk menampilkan data yang ada di database dengan laravel dan vuejs, silahkan dicoba dan apabila ada pertanyaan silahakan tanyakan.