Contoh aplikasi sederhana Vuejs : Membuat Todo List

Oleh Indrawati Oktober 15, 2021 Posting Komentar

Hallo teman ngide! Setelah sebelumnya kita membahas sedikit tentang belajar Vue JS, kali ini kita akan membuat tutorial aplikasi sederhana yaitu membuat todolist dengan menggunakan Vue js.

Apa saja yang perlu kalian siapkan sebelum melanjutkan tutorial ini?

Jika bahan diatas sudah siap, (kayak masak masak aja 😀 ) kita akan lanjutkan tutorial ini. Tampilan akhirnya nanti akan seperti gif di bawah ini ya.

Pertama kita membuat sebuah file baru dengan nama index.html kemudian sisipkan file Vuejs melalui script tag di akhir tag body.

Saya juga insert boostrap css, untuk mempercatik tampilannya.

Kode fullnya seperti di bawah ini.


<html>
<head>
	<title>Todo Aps</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>
<body>
	<div id="app">
      {{ message }}
	</div>
</body>
<script src="https://unpkg.com/vue"></script>
</html>

File app.js berfungsi untuk menampung semua script-script javascript yang akan kita pakai untuk membuat todolist. Pertama kita buat instance Vue di dalam app.js

Sisipkan file app.js di dalam index.html dengan menambahkan kode di setelah script VusJs:

Sekarang coba kalian buka file index.html di browser. Jika tidak ada masalah maka kamu akan mendapatkan tampilan sebuah text “Hello world”.

Selanjutnya kita akan membuat sebuah component baru untuk menampilkan todolist. Kita akan namai component tersebut dengan nama dengan todo.

Tambahkan kode di bawah ini di dalam file app.js

Edit file index.html, tambahkan component todo yang sudah dibuat sebelumnya di dalam div dengan id app

Simpan file index.html tersebut dan coba buka lagi di browser kamu. Jika tidak terjadi error, maka kamu akan mendapatkan tampilan seperti berikut ini:

Sedikit penjelasan dari component todo diatas adalah aplikasi todolist ini memiliki sebuah data todos yang berfungsi untuk menampung semua data dari item todolist tersebut.

Kemudian kita menggunakan directive v-for untuk melakukan perulangan dan menampilkan masing-masing item todolist ke dalam view.

Sampai disini ada pertanyan? 😀

Untuk menambah item ke dalam list todos, kita akan memanfaatkan sebuah text input yang menerima judul dari todolist item dan ketika user menekan enter maka item tersebut akan di simpan kedalam todolist dan di tampilkan ke dalam view.

Langkah pertama adalah menambahkan event saat user menekan enter.

Caranya edit template dari component todo di bagian text inputnya menjadi seperti berikut ini:

Jadi ada tambahan directive v-on:keyup.enter="addTodo", maksudnya adalah saat user menekan enter maka Vue akan memanggil fungsi addTodo.

Selanjutnya tambahkan sebuah method baru dengan nama addTodo di component todo

Sedikit penjelasan dari fungsi di atas adalah saat user menekan enter dan nama todo itemnya tidak kosong, maka item todo itu akan ditambahkan ke dalam array todos.

Coba kamu buka file index.html di browser dan coba tambahkan item baru ke dalam todolist yang sudah dibuat.

Jika tidak terdapat error maka kamu bisa mendapatkan tampilan seperti di bawah ini.

Kita akan membuat sebuah component baru dengan nama todo-item yang berfungsi untuk menampilkan masing-masing item dari todolist tersebut.

Buka file app.js dan tambahkan kode di bawah ini:

Edit component todo di bagian list item, kita ganti dengan component todo-item yang baru kita buat.

Coba buka lagi file index.html, seharusnya tampilannya masih seperti sebelumnya.

Fitur selanjutnya yang ingin kita tambahkan yaitu mengupdate dan menghapus masing-masing item todolist.

Pertama mari kita tambahkan dua buah fungsi baru dengan nama toggleTodo & deleteTodo di dalam methods pada component todo.

fungsi toggleTodo

Penjelasannya adalah fungsi toggleTodo akan menerima todo item sebagai parameternya, kemudian kita akan mencari posisi index item todo tersebut di dalam array todos.

Jika sudah ditemukan selanjutnya kita akan mengupdate status done dari item todo tersebut menjadi kebalikannya.

fungsi deleteTodo

Untuk menghapus item dari sebuah array, maka kita menggunakan fungsi javascript yaitu .splice untuk menghapus sebuah item array pada index yang ditentukan.

Edit template todo, tambahkan directive v-on di dalam pemanggilan item-todo seperti di bawah ini.

Agar parent & child component bisa bertukar event, maka kita bisa mengimplementasikan event interface dan sebuah directive v-on. Di child event kita bisa menggunakan event interface berupa:

Tambahkan fungsi baru di component todo-item untuk mengupdate dan menghapus todo item.

Jangan lupa edit juga template dari todo-item.

Kita akan memakai directive v-on:click untuk memanggil masing-masing method tersebut pada button yang sudah kita buat.

Penjelasan

Jadi saat tombol untuk mengupdate todo item di click, maka akan dipanggil method toggleTodo yang berisi this.$emit('toggleTodo',this.item) yang akan memanggil method toggleTodo di parent component yaitu todo. Begitu juga saat tombol hapus todo item di click.

Coba refresh file index.html dan aplikasi todolist yang sederhana dengan Vue sudah selesai kita buat.

Dengan menggunakan Vue, kita bisa membuat sebuah aplikasi atau single page application dengan lebih mudah dan cepat. Dalam tutorial kali ini kita sudah belajar beberapa fitur dari Vue seperti data binding, directive, event.

Untuk tutorial selanjutnya kita bisa mengimplementasikan local storage agar saat todolist ini direload, maka todolist item yang sudah dibuat sebelumnya tidak terhapus.

Sekian tutorial membuat todolist sedehana dengan Vue, semoga bisa bermanfaat.

Contoh Aplikasi

Contoh aplikasi sederhana Vuejs : Membuat Todo List

Posting Komentar untuk "Contoh aplikasi sederhana Vuejs : Membuat Todo List"

Posting Komentar