Manajemen Query & Ekstraksi Data Efisien Di Nuxt Js Di Crud Laravel Dan Nuxt Js — Part 4

Membangun aplikasi web di era modern memerlukan pondasi yang kokoh. Framework modern memberikan fleksibilitas luar biasa bagi developer untuk menghadirkan fitur kompleks secara cepat tanpa mengabaikan aspek keamanan dan keandalan sistem.

Tahapan Implementasi & Walkthrough Kode

Berikut adalah langkah demi langkah teknis yang dapat Anda ikuti langsung pada codebase Anda:

Tahap 1: Penulisan Kode & Konfigurasi

// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {},

Tahap 2: Penulisan Kode & Konfigurasi

// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
  baseURL: 'http://localhost:8000'
},

Tahap 3: Penulisan Kode & Konfigurasi

<template>
  <div>

    <div>
      <b-navbar toggleable="lg" type="light" variant="light" class="shadow-md" fixed="top">
        <b-navbar-brand to="/">NUXT CRUD</b-navbar-brand>

        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

        <b-collapse id="nav-collapse" is-nav>
          <b-navbar-nav>
            <b-nav-item to="/post">POST</b-nav-item>
            <b-nav-item href="https://santrikoding.com/ebook">EBOOK</b-nav-item>
            <b-nav-item href="https://santrikoding.com/kelas">COURSE</b-nav-item>
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>
    </div>

    <Nuxt />
  </div>
</template>

<style>
body{
  background-color: lightgray;
}
.mt-5 {
  margin-top: 100px!important;
}
</style>

Tahap 4: Penulisan Kode & Konfigurasi

<b-nav-item to="/post">POST</b-nav-item>

Tahap 5: Penulisan Kode & Konfigurasi

<template>
  <b-container fluid="md" class="mt-5 mb-5">
    <b-row>
      <b-col md="12">
        <b-card class="shadow-md border-0 rounded-lg">
          <h5>DATA POSTS</h5>
          <hr>
          <b-button :to="{name: 'post-create'}" variant="primary" class="mb-3">TAMBAH</b-button>
          <b-table striped bordered hover :items="items" :fields="fields" show-empty></b-table>
        </b-card>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
  export default {

    data() {
      return {
        //header table  
        fields: ['title', 'content', 'actions'],
        //posts data
        posts: [],
      }
    },

    mounted() {
      
      //fething ke Rest API 
      this.$axios.get('/api/posts')
        .then(response => {
          
          //assign response ke state "posts"
          this.posts = response.data.data

        })
        .catch(error => {
          console.log(error.response.data)
        })
    }

  }
</script>

<style>

</style>

Tahap 6: Penulisan Kode & Konfigurasi

data() {
  return {
    //header table  
    fields: ['title', 'content', 'actions'],
    //posts data
    posts: [],
  }
},

Tahap 7: Penulisan Kode & Konfigurasi

//fething ke Rest API 
this.$axios.get('/api/posts')

Tahap 8: Penulisan Kode & Konfigurasi

.then(response => {
          
  //assign response ke state "posts"
  this.posts = response.data.data

})

Tahap 9: Penulisan Kode & Konfigurasi

.catch(error => {
  console.log(error.response.data)
})

Tahap 10: Penulisan Kode & Konfigurasi

<b-table striped bordered hover :items="posts" :fields="fields" show-empty></b-table>

Kesimpulan

Dengan mengikuti langkah-langkah terstruktur di atas, implementasi modul Anda akan jauh lebih rapi, aman dari bug umum, serta siap diskalakan ke lingkungan produksi.

Nantikan artikel tutorial praktis lainnya seputar fullstack development, microservices, dan otomasi AI di Blog Engineering SiHubung. Selamat mencoba!