Study Case : Implementasi v-component Pada Aplikasi Name Extractor dengan Vue Js

Study Case : Implementasi v-component Pada Aplikasi Name Extractor dengan Vue Js,   Assalamualaikum, halo semua kembali lagi di sahretech, kali ini saya ingin membagikan tutorial vue js dasar, dalam pembahasan v-component. Selain v-component, dalam tutorial ini juga akan disertakan beberapa fungsi dasar vue js seperti v-model. methods dan filter.

Component Vue Js

Component adalah salah satu fitur andalan yang disediakan oleh vue untuk membantu programmer dalam mengolah element dasar html menjadi lebih luas dan fleksibel. tidak seperti v-html, v-component dapat dicustom jadi dapat berupa tag-tag html, data, method, computed, property, dll dan juga dapat digunakan sebagai template. Cara membuat component mudah sekali, caranya bisa dilihat pada script di bawah ini, coba kalian praktekkan script di bawah ini dan coba jalankan dibrowser

<div id="app">
    <isi></isi>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('isi', {
        template:`
            <div>
                <h2>Hello World</h2>
                <ol>
                    <li>hello 1</li>
                    <li>hello 2</li>
                </ol>
                <input type="text" v-model="pesan">
                <button>button</button> 
                <br>{{pesan}}
            </div>
        `,
        data() {
            return {
                pesan : " "
            }
        },
    }),
    new Vue({
        el : "#app"
    })
</script>

v-component ditulis diluar objek vue, namun untuk fungsi data, methods, dan yang lainnya harus ditulis di dalam v-component. Konsepnya sangat mudah sekali, semua tag-tag html dapat kita pindahkan ke dalam vue component, lalu membuat nama component baru di dalam lingkup elemen dengan id app.




Setelah berkenalan dengan v-component, kita lanjut ke implementasinya. Kita akan membuat sebuah program sederhana yang dapat mengekstrak sebuah nama, Aplikasi ini nanti dapat memecah nama menjadi 3 bagian yaitu nama depan, nama tengah dan nama belakang. Seperti yang telah saya singgung pada tulisan di atas, kita juga akan menggunakan beberapa fitur tambahan seperti :

• v-model, untuk menangkap data inputan
• v-if, untuk membuat kondisi
• v-on:click dan v-on:keyup, untuk menjalankan sebuah method saat diklik atau saat keyup
• method
• filter
• bootstrap

Membuat Name Extractor

• 1. Buat sebuah file baru dengan nama nameextractor.html, lalu pastekan script di bawah ini

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div id="app">
    <extractor></extractor>
    <!-- <input type="text" v-model="nama">{{nama}} -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('extractor', {
        template : `
            <div class="container">
                <h1 class="text-center">Name Extractor</h1>
                <p class="text-center">Name Etractor adalah program pengekstrak nama otomatis</p>
                <div class="input-group">
                    <input class="form-control" type="text" v-model='nama' placeholder="ketik nama lengkap" 
                    @keyup.enter='proses'>
                    <button class="btn btn-primary" @click='proses'>SUBMIT</button>
                </div>
                <br>
                <h2 class="alert alert-success text-center" v-if='hasil'>
                    Selamat Datang Mr./ Mrs.
                    {{akhir | capitalize}},
                    Senang Anda Dapat Bergabung
                </h2>
                <b v-if="hasil" class="text-warning badge badge-dark">
                    Hasil Ekstrak Nama Anda : 
                </b>
                <br>
                <br>
                <div v-if="hasil" class="rounded border border-danger p-2 ">
                    <p>Nama Depan : {{depan}} </p>
                    <p>Nama Tengah : {{tengah}} </p>
                    <p>Nama Akhir : {{akhir}} </p>
                </div>
            </div>
        `,
        data() {
            return {
                nama: '',
                hasil : true,
                akhir : '',
                tengah : '',
                depan : '',
            }
        },
        methods: {
            proses(){
                var lengkap = this.nama.split(' ')
                this.depan = lengkap[0];
                for(i=1; i<lengkap.length-1; i++){
                    this.tengah += lengkap[i] + ' '
                }
                this.akhir = lengkap[lengkap.length-1]
                this.hasil = true
            }
        },
        filters: {
            capitalize(value){
                value = value.toString()
                return value.charAt(0).toUpperCase()+value.slice(1)
            }
        },
    });
    new Vue({
        el: "#app",
    })
</script>

• 2. Pembahasan :
• baris 1 : import resource file bootstrap
• baris 2 - 5: tag div dengan id app digunakan untuk menampung semua data di dalam id app
• baris 3 : nama komponen yang akan ditampilkan
• baris 6 : import resource file vue js
• baris  8 : membuat vue component dengan nama komponen extractor
• baris 14 : v-model='nama' digunakan untuk menampung data yang diinputkan di dalam nama
• baris 15 : @keyup.enter='proses' adalah event yang terjadi saat key enter diangkat, proses adalah method yang terjadi saat ada event
• baris 16 : @click='proses' adalah event yang terjadi saat tombol diklik
• baris 19 : v-if digunakan dalam pengkondisian, saat kondisi bernilai true maka elemen h2 dan seluruh elemen di dalamnya akan di tampilkan
• baris 21 : {{akhir | capitalize}} akhir adalah data yang ingin ditampilkan dan capitalize adalah filter
• baris 36 - 44 : adalah data 
• baris 46 -54 : method proses, pertama variabel nama akan digabungkan menjadi array dengan fungsi split lalu variabel depan diisi dengan nama depan, kemudian menggunakan for untuk melakukan perulangan dan mendapatkan nama tengah, kemudian variabel akhir diisi dengan nama lengkap dikurang satu index, kemudian variabel hasil dibuat true agar dapat ditampilkan pada v-if
• baris 57 : adalah filter yang digunakan untuk variabel akhir, filter ini membuat huruf pertama menjadi huruf besar
• 3. Jalankan dibrowser, maka hasilnya akan terlihat seperti gambar di bawah ini

aplikasi name extractor

Konsepnya sangat mudah sekali, tapi jika kalian masih bingung, kalian bisa membaca kembali dokuemntasinya di link berikut ini https://vuejs.org/v2/guide/components.html. Contoh script di atas adalah sekilas tentang bagaimana cara penggunaan component dengan tambahan beberapa fitur vue js di dalamnya, jadi sedikit ribet apalagi yang belum tahu.

Ok sekian tutorial kali ini. Mudah-mudahan bermanfaat bagi para pembaca. Lebih dan kurangnnya saya mohon maaf, apabila ada kritik dan saran silahkan tinggalkan di kolom komentar di bawah ini. Happy Coding :)