Membuat Single Page Menggunakan VueJS Dan Vue Router
Implementasi simpel single page application menggunakan vue.js
Pada artikel kali ini kita akan belajar bagaimana menerapkan dan membuat web sederhana yang berbasiskan single page application atau yang umum dipersingkat dengan panggilan SPA menggunakan vue.js dan vue-router.
Apa itu single Page Application ?
Untuk yang belum tahu apakah itu spa berikut ialah kutipan dari situs wikipedia mengenai pengertian spa :
A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server.
Jadi simpelnya pengguna tidak berpindah halaman saat melakukan proses request ke server tiap terjadi perubahan pada halaman, tetapi cuma akan lakukan load pada satu halaman dari server selanjutnya proses routingnya ditanggung pada segi klien.
Persiapan
Karena kita akan menggunakan vue-cli pada praktek ini kali karena itu silakan rekan-rekan siapkan fresh instalan vue-clinya lebih dulu, untuk yang belum tahu langkah instalnya dapat menuju ke link berikut
Catatan: Tentukan vue-router di saat proses instlalasi vue karena kita akan memakaiya untuk membuat aplikasi berbasiskan spa nanti dengan vuejs, untuk yang lainnya seperti testing, dan lain-lain semua opsional bisa tidak diputuskan.
Mulai membuat aplikasi
Pertama silahakan membuka file proyeknya pada text-editor masing-masing, selanjutnya editlah file App.vue jadi sebagai berikut ini:
<template>
<div id="app">
<div class="detail">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>Sedikit penjelasan, pada script di atas kita menambah kode router-view untuk nanti menampilkan data yang pas dengan data yang diputuskan oleh pengguna, untuk yang lainnya sama juga seperti sintaks vue secara umum.
Kemudian silakan membuka file index.js yang ada pada folder src/router/index.js
selanjutnya editlah file index.js jadi sebagai berikut ini :
import Vue from 'vue'
import Router from 'vue-router'
import User from "@/components/User"
import Home from "@/components/Home";
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: "/user/:id",
name: "User",
component: User
}
]
})Yang perlu diperhatikan pada script di atas ialah di bagian /penguuna/:id karena ini yang akan kita pakai kelak sebagai halaman detailnya, dan janganlah lupa untuk mengimport lebih dulu file Home dan pengguna.vue nya.
Cara selanjutnya ialah kita akan memasang axios untuk kepentingan consume data nanti, tuliskan perintah berikut pada terminal anda :
npm install axios --saveLalu setelah selesai langkah selanjutnya ialah buatlah file baru dengan nama Home.vue pada folder src/components/Home.vue, dan ketikan kode berikut ini :
<template>
<div id="container">
<header>
<h1> Daftar Nama User : </h1>
</header>
<div class="list">
<ul v-for="user in users" :key="user.id" style="list-style: none">
<li>
<router-link :to="{ name: 'User', params: { id: user.id } }">
{{ user.name }}
</router-link>
</li>
</ul>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
users: []
}
},
created() {
this.getAllUser()
},
methods: {
getAllUser() {
axios.get('https://jsonplaceholder.typicode.com/users')
.then((response) => {
this.users = response.data
console.log(response)
})
.catch((err) => {
console.log(err)
})
}
}
}
</script>
<style scoped>
.list {
margin-left: -50px;
}
</style>Pertama kita mengimport library axios supaya bisa kita pakai untuk konsumsi data apinya, kemudian membuat suatu metode namanya getAllUser() yang akan kita pakai untuk mengambil data dari service api yang kita pakai, kemudian kita memakai fungsi created untuk jalankan code kita sesudah sebuah instance dibuat, selanjutnya di bagian template nya kita tampilkan datanya dengan memakai v-for dan memakai fungsi dari vue-router yaitu router-link untuk navigasi.
Cara paling akhir tapi bukan paling akhir ialah silakan buat sebuah file namanya user.vue dalam folder /src/components/user.vue
selanjutnya isi dengan code berikut :
<template>
<div class="container">
<div class="user">
<h2> Data user dengan nama : {{ user.name }} </h2>
<ul>
<li> Username : {{ user.username }} </li>
<li> Email : {{ user.email }} </li>
</ul>
<router-link to="/"> Back </router-link>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
user: []
}
},
created() {
this.getUser()
},
methods: {
getUser() {
axios.get(`https://jsonplaceholder.typicode.com/users/${this.$route.params.id}`)
.then((response) => {
this.user = response.data
})
.catch((err) => {
console.log(err)
})
}
}
}
</script>
<style scoped>
ul li {
list-style: none;
}
</style>Code di atas hampir serupa dengan code pada file home.vue, perbedaannya ialah di bagian url endpointnya kita menambah code this.$route.params.id yang fungsinya untuk tangkap id parameters yang awalnya didapat pada halaman Home yang mana dipakai untuk tampilkan data detil masing-masing pengguna.
Sesudah semua usai cara paling akhir ialah coba jalankan aplikasi, tuliskan perintah berikut pada terminal untuk menjalankan program :
npm run devBila berjalan secara lancar karena itu lebih kurang tampilanya akan sebagai berikut :
Catatan: kalo tampilanya jelek maklumin aja hehe karena disini kita fokus pada implementasi SPA nya dengan vue, untuk styling css nya silahkan teman-teman edit sendiri sesuai dengan keinginan
Akhirnya selesai juga artikel kali ini, saya harap teman teman semua bisa mendapatkan banyak ilmu dari artikel yang sederhana dan masih banyak kekurangan ini, oh iya jika ada pertanyaan atau masih ada yg kurang jelas silahkan langsung meninggalkan pertanyaanya pada kolom komentar dibawah ya! Terimakasih.