Frontend - Buku

MODUL #3
FRONTEND – BUKU
Pada modul ini, kita akan belajar membangun frontend untuk pengelolaan data buku. Di antaranya yang
akan dibuat adalah tampilan untuk menampilkan tabel, form tambah data, form edit, dan detail
informasi.
1. Dengan command prompt, navigasi menuju direktori project perpustakaan
2. Jalankan perintah berikut di command prompt untuk memulai proses compiling

npm run watch
 Jika muncul hasil seperti gambar, artinya proses compile berhasil
3. Di dalam folder components (resources/js/components), buat folder baru dengan nama buku. Di
dalam folder tersebut, buat beberapa file sebagai berikut:
- Index.vue
- Tambah.vue
- Edit.vue
- Detail.vue
Index Data Buku

4. Buka file Index.vue, kemudian tambahkan kode berikut.
<template>
<div>
<navbar-component></navbar-component>
<sidebar-component active="active"></sidebar-component>
<div class="content-wrapper">
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0">Data Buku</h1>
</div>
</div>
</div>
</div>

<div class="content">
<div class="row">
<div class="col-md-10">
<div class="card card-primary card-outline">
<div class="card-body">
<router-link class="btn btn-info mb-2" to="">
<i class="fas fa-plus"></i> Tambah
</router-link>
<table class="table table-bordered">
<thead>
<tr>
<th style="width: 10px">#</th>
<th>Judul</th>
<th>Pengarang</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<tr v-for="(b, index) in buku"
:key="index">
<td>{{ index + 1 }}</td>
<td>{{ b.judul }}</td>
<td>{{ b.pengarang }}</td>
<td>
<div class="btn-group">
<router-link class="btn btn-
success" :to="{ name : 'detailbuku' , params : { id : b.id } }">Detail</router-link>

<router-link class="btn btn-
warning" :to="{ name : 'editbuku' , params : { id : b.id } }">Edit</router-link>
<button type="button" @click
="hapus(b.id)" class="btn btn-danger">Hapus</button>

</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
buku : {},
}
},
created() {
},
methods : {
}
}
</script>
 Seperti dilihat di kode, pada komponen Index untuk data buku juga ditambahkan komponen
Navbar.vue dan Sidebar.vue
 Komponen ini memiliki object data bernama buku yang akan menampung data buku dari
database jika nanti sudah dilakukan request ke API
5. Masih di dalam Index.vue, tambahkan baris kode berikut di dalam created()
this.axios.get('http://localhost:8000/api/buku')
.then( res => {
this.buku = res.data
})
6. Tambahkan baris kode berikut ke dalam methods
hapus(id) {
this.axios.delete(`http://localhost:8000/api/buku/${id}`)
.then( res => {
let i = this.buku.map(item => item.id).indexOf(id);
this.buku.splice(i, 1);
});
}
7. Buka file routes.js, kemudian tambahkan baris kode untuk import component Index sekaligus kode
untuk membuat routenya
import IndexBuku from './components/buku/Index.vue';
{
name : 'indexbuku',
path : '/buku',
component : IndexBuku
},
8. Buka file Sidebar.vue, kemudian modifikasi item navigasi Anggota dengan rute yang baru saja
dibuat.
9. Simpan hasil kerja, kemudian jalankan service laravel (php artisan serve) dan MySQL. Selain itu
pastikan juga hasil compile berhasil (npm run watch)
10. Buka browser, masukkan alamat http://localhost:8000/buku
Hasil:
 Lakukan tes pada tombol Hapus data untuk memastikan fitur hapus berjalan dengan benar
Tambah Data Buku
11. Buka file Tambah.vue, kemudian tambahkan baris kode berikut.
<template>
<div>
<sidebar-component></sidebar-component>
<h1 class="m-0">Form Tambah Data</h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="card card-info">
<div class="card-header">
<h3 class="card-title">Buku Baru</h3>
</div>
<form @submit.prevent="tambah">
<div class="form-group">
<label>Judul</label>
<input type="text" class="form
-control" v-model="buku.judul">
</div>

<label>Pengarang</label>
<input type="text" class="form
-control" v-model="buku.pengarang">
</div>
<label>Deskripsi</label>
<textarea rows="4" class="form
-control" v-model="buku.deskripsi"></textarea>
</div>

</div>
<div class="card-footer">
<button type="submit" class="btn b
tn-primary">Simpan</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
buku : {}
}
},
methods : {

}
}
</script>
 Di dalam komponen ini, dibuat form tambah dengan kolom isian judul, pengarang, dan
deskripsi
 Di dalamnya, terdapat object buku untuk menampung sementara isian form sebelum dikirim
melalui request POST ke API.
12. Di dalam methods, tambahkan method tambah() yang akan memproses tambah data
tambah() {
this.axios.post('http://localhost:8000/api/buku', this.buku)
.then( res => {
this.$router.push('/buku');
})
.catch( err => console.log(err))
}
 Jika request POST ke API untuk menambah data siswa sukses, maka router akan melakukan
direct ke path “/siswa” sehingga tampil komponen Index dari siswa
13. Buka routes.js, tambahkan baris kode untuk import komponen Tambah
import TambahBuku from './components/buku/Tambah.vue';
14. Masih di routes.js, tambahkan juga baris kode berikut untuk membuat route ke form tambah yang
telah dibuat.
{
name : 'tambahbuku',
path : '/buku/tambah',
component : TambahBuku
},
 Tambahkan route ini tepat di bawah route untuk DetailSiswa
15. Buka file Index.vue, modifikasi tombol Tambah menjadi seperti berikut.
16. Simpan hasil kerja, dan muat ulang halaman aplikasi di browser. Buka halaman Index, kemudian klik
tombol Tambah di atas tabel.
 Lakukan tes tambah data
Edit Data Buku

17. Buka file Edit.vue, kemudian tambahkan baris kode berikut:
<template>
<div>
<h1 class="m-0">Form Edit Data</h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="card card-info">
<h3 class="card-title">Edit Buku</h3>
</div>
<form @submit.prevent="edit">
<label>Judul</label>
<input type="text" class="form-
control" v-model="buku.judul">
</div>

<label>Pengarang</label>
<input type="text" class="form-
control" v-model="buku.pengarang">
</div>
<label>Deskripsi</label>
<textarea rows="4" class="form-
control" v-model="buku.deskripsi"></textarea>
</div>

</div>
<div class="card-footer">
<button type="submit" class="btn bt
n-primary">Simpan</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
buku : {}
}
},
created() {
},
methods : {
}
}
</script>
18. Di dalam created(), tambahkan baris kode berikut:
this.axios.get(`http://localhost:8000/api/buku/${this.$route.params.id}`)
.then((res) => {
})
.catch(err => console.log(err));
 Request GET ke API digunakan untuk mengambil data buku yang akan diedit. Data ini nantinya
akan dimasukkan ke dalam form edit ketika ditampilkan.
19. Di dalam methods, tambahkan baris kode berikut untuk membuat method edit() yang akan
memproses edit data
edit() {
this.axios.patch(`http://localhost:8000/api/buku/${this.
$route.params.id}`, this.buku, { headers: { 'Authorization': `Bearer ` + t
his.$store.state.token } })
.then( res => {
this.$router.push('/buku');
})
.catch( err => console.log(err))
}
20. Buka file routes.js, tambahkan baris kode untuk import komponen edit dan route-nya
import EditBuku from './components/buku/Edit.vue';
{
name : 'editbuku',
path : '/buku/edit/:id',
component : EditBuku
},
21. Simpan hasil kerja, kemudian muat ulang halaman aplikasi di browser. Buka halaman Index,
kemudian tekan tombol Edit pada salah satu baris data buku.
 Lakukan uji coba ubah data melalui form edit
Detail Data Buku

22. Buka file Detail.vue, kemudian tambahkan baris kode berikut.
<template>
<div>
<h1 class="m-0">Detail</h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="card">
<h4 class="m-0">Detail Buku</h4>
</div>
<div class="card-body text-justify">
<h5 class="mb-3">{{buku.judul}}</h5>
<h6>Pengarang</h6>
<p class="card-
text">{{buku.pengarang}}</p>
<h6>Deskripsi</h6>
<p class="card-
text">{{buku.deskripsi}}</p>
<router-link class="btn btn-primary" t
o="/siswa">Kembali</router-link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
buku : {}
}
},
created() {
}
}
</script>
 Kode ini akan menampilkan detail informasi dari satu buku yang dipilih
 Terdapat object data buku yang akan menampung sementara data yang akan ditampilkan di
komponen Detail
23. Di dalam created(), tambahkan baris kode berikut
this.axios.get(`http://localhost:8000/api/buku/${this.$route.params.id}`)
.then(res => {
})
.catch(err => console.log(err))
24. Buka file routes.js, kemudian tambahkan baris kode untuk import komponen Detail.vue dan route-
nya
import DetailBuku from './components/buku/Detail.vue';
{
name : 'detailbuku',
path : '/buku/detail/:id',
component : DetailBuku
},
25. Simpan hasil kerja, kemudian muat ulang. Buka halaman Index, tekan salah satu tombol Detail dari
barisan data buku yang ada

Frontend - Buku

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Frontend - Buku

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL #3

1. Dengan command prompt, navigasi menuju direktori project perpustakaan

2. Jalankan perintah berikut di command prompt untuk memulai proses compiling

 Jika muncul hasil seperti gambar, artinya proses compile berhasil

Index Data Buku

5. Masih di dalam Index.vue, tambahkan baris kode berikut di dalam created()

6. Tambahkan baris kode berikut ke dalam methods

10. Buka browser, masukkan alamat http://localhost:8000/buku

Tambah Data Buku

11. Buka file Tambah.vue, kemudian tambahkan baris kode berikut.

 Lakukan tes tambah data

Edit Data Buku

18. Di dalam created(), tambahkan baris kode berikut:

 Lakukan uji coba ubah data melalui form edit

Detail Data Buku

23. Di dalam created(), tambahkan baris kode berikut

Anda mungkin juga menyukai