Case Study : Membuat Aplikasi ToDo List dengan Vue Js

Case Study : Membuat Aplikasi ToDo List dengan Vue Js, Assalamualaikum, halo semuanya kembali lagi di sahretech. Kali ini saya akan membagikan tutorial vue js dasar, dalam studi kasus membuat aplikasi todo list sederhana tanpa menggunakan database. Todo list adalah aplikasi catatan kegiatan, kegiatan yang akan dilakukan dapat dicatat atau diedit, sedangkan kegiatan yang sudah selesai dilakukan dapat dihapus.

Aplikasi ToDo List sederhana

Buatlah sebuah file baru dengan nama todolist.html, lalu copy dan pastekan script di bawah ini, save lalu jalankan di browser kalian masing-masing

<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">
    <todo></todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
   Vue.component('todo',{
        template : `
            <div class="container">
                <h1 class="text-center">Vue ToDo List</h1>
                <div class="form-group">
                    <input class="form-control" type="text" v-model="baru"
                    @keyup.enter="tambah">
                </div>
                <table class="table table-bordered">
                    <tr v-for='(t, index) in tugas'>
                        <td>
                            <button class="btn btn-info" 
                            @click='selesai(index, t.status)'
                            :value='t.cek'> {{t.status}}
                            </button>
                        </td>
                        <td>
                            <input type="text" class="form-control"
                            :disabled='t.dis' :value="t.kegiatan" 
                            v-model="t.kegiatan"/> 
                        </td>
                        <td>
                            <button class="btn btn-success"
                            @click='edit(index, t.dis)'>
                                Edit
                            </button>
                        </td>
                        <td>
                            <button class="btn btn-danger"
                            @click='hapus(index)'>Hapus</button>
                        </td>
                    </tr>
                </table>
                <div class='row'>
                    <div class="col-6">
                        <button class="btn btn-block btn-danger"
                        @click="hapusselesai" >Hapus Selesai</button>
                    </div>
                    <div class="col-6">
                        <button class="btn btn-block btn-danger"
                        @click="hapussemua">Hapus Semua</button>
                    </div>
                </dvi>
            </div>
        `,
        data() {
           return {
               baru : '',
               tugas : [
                    {kegiatan: 'membuat aplikasi point of sale', cek : false, status : 'belum selesai',dis : true}
                ],
               garis : [],
               baru : ''
           }
       },
       methods: {
           tambah(){
               if(this.baru == ''){
                   alert('silahkan isi terlebih dahulu')
               }else{
                   this.tugas.push({
                       kegiatan : this.baru,
                       cek : false,
                       status : 'belum selesai',
                       dis : true
                   })
               }
               this.baru = ''
           },
           selesai(index, nilai){
               if(nilai == 'belum selesai'){
                   this.tugas[index].cek = true,
                   this.garis[index] = 'V',
                   this.tugas[index].status = 'selesai'
               }else{
                this.tugas[index].cek = false,
                   this.garis[index] = 'X',
                   this.tugas[index].status = 'belum selesai'
               }
           },
           edit(index, val){
               if(val == true){
                   this.tugas[index].dis = false
               }else{
                   this.tugas[index].dis = true
               }
           },
           hapus(index){
               Vue.delete(this.tugas, index)
           },
           hapusselesai(){
                for(i=this.tugas.length - 1; i >=0; i--){
                    if(this.tugas[i].status === 'selesai'){
                        Vue.delete(this.tugas, i)
                    }
                }
           },
           hapussemua(){
                this.tugas = []
           }
       },
   }),
   new Vue({
       el : '#app',
    
   })
</script>

Hasil akhir Aplikasi ToDo List

 Baris 7 : Vue.component('todo',{(template : ..... )} 
untuk membuat komponen dengan nama todo, jika diperhatikan tag <todo></todo> yang ada di dalam html adalah vue komponen yang dibuat pada baris ke-7

 Baris 12 : <input class="form-control" type="text" v-model="baru" @keyup.enter="tambah" 
Membuat form input text, v-model digunakan untuk menangkap data yang diinput ke dalam variabel baru. @keyup.enter="tambah" ,memberikan event saat tombol enter ditekan, dan tambah adalah method yang akan dipanggil saat tombol enter ditekan.

Baris 16 : <tr v-for='(t, index) in tugas'> ........ </td>
Membuat perulangan dengan v-for, dan tugas adalah data array yang akan dilakukan perulangan

Baris 18 - 21 : <button class="btn btn-info" @click='selesai(index, t.status)' :value='t.cek' {{t.status}} </button>
Membuat button untuk menceklis apakah list sudah dikerjakan atau belum, @click='selesai()' adalah method yang akan dieksekusi saat tombol diklik, {{t.status}} adalah tulisan yang menampilkan status selesai / belum selesai

Baris 24 - 26 : <input type="text" class="form-control" :disabled='t.dis' :value='t.kegiatan' v-model='t.kegiatan'>
Membuat form input text dengan menambahkan v-bind disabled dan value, jika disabled bernilai true maka form input tidak dapat diisi, sedangkan value adalah nilai yang akan ditampilkan di dalam form tersebut. v-model='t.kegiatan' adalah data yang akan disimpan kedalam t.kegiatan

Baris 29 - 32 : <button class="btn btn-success" @click='edit(indext.dis)'>Edit</button>
Membuat button edit, method edit() akan dieksekusi saat terjadi klik pada tombol

Baris 52 - 61 : data(){....}
Menampilkan seluruh data

Baris 76 : method selesai(index, nilai)
Method selesai menerima 2 paramter, jika nilai sama dengan 'belum selesai' maka nilai status dibuat selesai dan begitu sebaliknya

Baris 87 : method edit(index, nilai)
Method edit membutuhkan 2 parameter yaitu index dan nilai, pada method ini hanya akan merubah t.dis menjadi true atau false. tujuannya adalah untuk mebuka atau menutup disabled editing pada form inputan

Baris 94 : method hapus(index)
Hannya membutuhkan satu parameter yaitu index, method hapus akan menghapus data tugas dengan index yang dipilih

Ada beberapa bagian yang saya tidak jelaskan, seperti penggunaan class untuk memanggil komponen-komponen bootstrap. Untuk bootstrap silahkan kalian eksplorasi sendiri. Tapi untuk penjelasan yang lain mudah-mudahan mudah diapahami.

Ok sekian tutorial kali ini, mudah-mudahan tulisan singkat ini dapat membantu kalian yang ingin belajar vue js lebih dalam lagi. Lebih dan kurangnya saya mohon maaf, dan apabila ada hal yang belum jelas, atau ada kritik dan saran silahkan tinggalkan di kolom komentar di bawah ini. Sampai jumpa di tutorial berikut nya. Happy Coding :)