MEMBUAT WEB PAGE DENGAN Vue.

js

A. TUJUAN KEGIATAN
1. Memahami bagaimana membuat halaman web static
2. Memahami penggunaan router
3. Memahami penggunaan class yang di miliki bootstrap di vue.js
B. ALAT DAN BAHAN
1. Computer
2. Internet
3. Visual code
4. Node.js
C. LANGKAH/PROSEDUR KERJA

Install vue.js dan Router

1. Pada bagian ini pastikan install node.js terlebih dahulu

2. Jalankan command promt lalu ketikan perintah berikut

3. Selanjut untuk membuat project dari vue.js ketikan perintah berikut

4. Pilih manually select features

5. Samakan pilihan nya seperti pada gambar di bawah ini menggunakan tombol space

6. Ketikan y untuk pilihan yang muncul pada gambar di bawah ini

7. Kita pilih dedicated

8. Ketikan n pada pilihan selanjutnya

9. Tahap terakhir tunggu proses nya sampai selesai

10. Ketika pembuatan project telah selesai, ketikan perintah cd crud-vue-3

11. Untuk menjalan kan projectnya ketikan perintah npm run serve

12. Tunggu proses nya sampai selesai

13. Jalan browser, di address bar ketikan http://localhost:8080/

14. Lalu akan muncul tampilan seperti gambar di bawah ini
Install bootstrap, popper.js dan jquery
15. Buka project vue.js yang sudah buat menggunakan vs code
16. Jalan kan new terminal yang terdapat pada menu terminal
17. Ketikan perintah berikut untuk install boostrap popper.js dan jquery

18. Tunggu sampai proses nya selesai

Konfigurasi Bootstrap di Vue Js

19. Ketikan perintah yang di tandai dengan titik merah di main.js

Membuat halaman web static di Vue Js

20. Buat file baru di folder components dengan nama NavBar.vue
21. Pada file tersebut copy paste syntac di bawah ini

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarColor01"
aria-controls="navbarColor01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarColor01">

<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">List Product</a>
</li>
</ul>

</div>
</div>
</nav>
22. Buka file App.vue

23. Hapus hampir semua perintah yang terdapat pada file App.vue seperti di tunjukan
gambar di bawah ini

24. Selanjutnya tambahkan perintah berikut

25. Jalan project dengan mengetik perintah npm run serve di terminal
26. Amati apa yang muncul di browser
27. Hapus semua file yang terdapat di folder views

28. Lalu buat 2 buah file baru dengan nama

1.HomePage.vue
2.ListPage.vue
29. Sehingga folder views seperti pada gambar di bawah ini

30. Pada file HomePage.vue ketikan perintah berikut

31. Lakukan hal yang sama di file ListPage.vue

32. Sekarang buka file index.js yang terdapat pada folder router, dan ubahlah perintah nya
menjadi seperti pada gambar di bawah ini
33. Lihatlah perubahan nya di browser
34. Buka Kembali file NavBar.vue, lakukan perubahan seperti di tunjukan pada gambar
di bawah ini yg di beri titik warna merah

35. Lalu lihat lah perubahan nya di browser

Membuat form input di file HomePage.vue
36. Buka Kembali file HomePage.vue, copy paste syntak di bawah ini

<template>
<div class="container">
<div class="row">
<div class="col">
<form class="bs-component">
<div class="form-group">
<label
class="col-form-label col-form-label-sm mt-4"
for="inputSmall"
>Small input</label
>
<input
class="form-control form-control-md"
type="text"
placeholder=".form-control-sm"
id="inputSmall"
/>
</div>
<div class="form-group">
<label
class="col-form-label col-form-label-sm mt-4"
for="inputSmall"
>Small input</label
>
<input
class="form-control form-control-md"
type="text"
placeholder=".form-control-sm"
id="inputSmall"
/>
</div>
<div class="form-group">
<label class="form-label mt-4">Input addons</label>
<div class="input-group mb-3">
<input
type="text"
class="form-control"
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="button-addon2"
/>
<button
class="btn btn-primary" type="button">
Button
</button>
 </div>
<button class="btn btn-primary" type="submit">
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</template>

37. Lihatlah perubahan di browser

38. Dan buka file ListPage.vue, copy paste syntak di bawah ini

<template>
<div class="container">
<div class="row">
<div class="col">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Type</th>
<th scope="col">Column heading</th>
<th scope="col">Column heading</th>
<th scope="col">Column heading</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<th scope="row">Active</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">Default</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-secondary">
<th scope="row">Secondary</th>
 <td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-success">
<th scope="row">Success</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-danger">
<th scope="row">Danger</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-warning">
<th scope="row">Warning</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-info">
<th scope="row">Info</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-light">
<th scope="row">Light</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-dark">
<th scope="row">Dark</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
39. Lihatlah perubahannya di browser