Tutorial CRUD CodeIgniter 4 & Vue JS #5 - Membuat Components di Vue Js

• Langkah 1 - Membuat Component
• Langkah 2 - Component Index Posts
• Langkah 3 - Component Create Post
• Langkah 4 - Component Edit Post
• Source Code

Halo teman-teman semuanya pada kesempatan kali ini kita akan membuat beberapa component yang akan kita gunakan di dalam project Vue Js kita, component ini merupakan sebuah template yang bisa kita gunakan berulang kali tanpa harus menuliskannya lagi.

Langkah 1 - Membuat Component

Sekarang silahkan teman-teman buat sebuah folder baru dengan nama posts di dalam folder src/components/ kemudian di dalam folder posts tersebut silahkan buat 3 file berikut ini :

• Index.vue
• Create.vue
• Edit.vue

Jadi jika kita perhatikan structure folder project Vue Js kita akan menjadi seperti berikut ini :

node_modules/ 
public/ 
src/ 
    ├── assets/ 
    ├── components/ 
            ├── posts/ 
                  ├── Index.vue 
                  ├── Create.vue 
                  ├── Edit.vue 
    ├── App.vue 
    ├── main.js 
.gitignore 
babel.config.js 
package-lock.json 
package.json 
README.md

Sekarang kita lanjutkan untuk menambahkan sample template di dalam component kita. Langsung saja kita mulai.

Langkah 2 - Component Index Posts

Jadi disini kita akan menambahkan beberapa template sample di dalam component yang sudah kita buat sebelumnya, siilahkan buka file src/components/posts/Index.vue kemudian masukkan kode berikut ini :

<template> 
    <div class="index-posts"> 
        ini adalah component Index Posts 
    </div>
</template> 

<script> 
    export default {
    
    } 
</script>

Langkah 3 - Component Create Post

Sekarang kita lanjutkan untuk memberikan beberapa sample untuk template di dalam component create post, silahkan buka file src/components/posts/Create.vue dan masukkan kode berikut ini :

<template> 
    <div class="add-posts"> 
        ini adalah component Tambah Posts 
    </div>
</template> 

<script> 
    export default {
    
    } 
</script>

Langkah 4 - Component Edit Post

Selanjutnya yang terakhir kita juga akan menambahkan template sample untuk component edit post, silahkan buka file src/components/posts/Edit.vue dan masukkan kode berikut ini :

<template> 
    <div class="edit-posts"> 
        ini adalah component Edit Posts 
    </div>
</template> 

<script> 
    export default {
    
    } 
</script>

Di tutorial selanjutnya kita akan belajar bagaimana cara menambahkan beberapa dependensi untuk project Vue Js kita seperti Vue Router, Axios dan yang lain-lain.

Source Code

CodeIgniter Restful API : https://github.com/SantriKoding-com/CodeIgniter4-Restful-API

Vue Js : https://github.com/SantriKoding-com/Vue-Js-CodeIgniter

Terima Kasih