Belajar Vue Js: Membuat Aplikasi Todolist Sederhana

  bcscoder
17 Oct 2017 at 1:01 am

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

Apa saja yang perlu kalian siapkan sebelum melanjutkan tutorial ini?

  1. Download Vue js library untuk yang internetnya lambar dan yang kenceng bisa pakai CDN
  2. Texteditor kesukaan kamu seperti Sublime.
  3. Niat belajar

Jika bahan diatas sudah siap, kita akan lanjutkan membuat sebuah todolist yang kira-kira tampilan akhirnya nanti akan seperti berikut ini.

Contoh Vue Todolist

1. Buat file index.html

Pertama kita membuat sebuah file baru dengan nama index.html kemudian sisipkan file Vue melalui script tag seperti kode di bawah ini:

<!DOCTYPE html>
<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>

Kita juga menambahkan boostrap framework untuk mempercantik tampilan dari todolist yang kita buat.

2. Buat file app.js

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 

var app = new Vue({
	el: '#app',
	data: {
		'message': 'Hello world'
	},
});

Sisipkan file app.js di index.html dengan menambahkan kode di bawah ini:

<script type="text/javascript" src="app.js"></script>

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

3. Membuat component todo

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

Tambahkan kode di bawah ini di dalam file app.js

Vue.component('todo',{
	template: '<div class="container">'+
		'<div class="row justify-content-center">'+
			'<div class="col-md-6">'+
				'<h1 class="text-center">Todolist</h1>'+
				'<hr>'+
				'<input type="text" class="form-control" placeholder="Input todolist & enter" v-model="todo.name" >'+
				'<hr>'+
				'<ul class="list-group">'+
					'<li class="list-item" v-for="item in todos">{{ item.name }}</li>'+
				'</ul>'+
			'</div>'+
		'</div>'+
	'</div>',
	data: function(){
		return {
			todos: [
				{
					name: 'Todo 1',
					done: true,
				},
				{
					name: 'Todo 2',
					done: false,
				},
				{
					name: 'Todo 3',
					done: false,
				},	
			],
			todo: {
				name: '',
				done: false
			}
		}
	},
});

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

...
<div id="app">
	<todo></todo>
</div
...

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

Todolist Vue js

Sedikit penjelasan dari component todo diatas adalah aplikasi todolist ini memiliki sebuah data todos yang berfungsi untuk menampung data dari item todolist tersebut. Kemudian kita menggunakan directive v-for untuk melakukan perulangan dan menampilkan masing-masing item todolist ke dalam view.

4. Menambah item todolist

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:

<input type="text" class="form-control" placeholder="Input todolist & enter" v-model="todo.name" v-on:keyup.enter="addTodo">

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

methods: {
		addTodo(){
			if(this.todo.name != ''){
				this.todos.push(this.todo)
				this.todo = {
					name: '',
					done: false
				}
			}
		},

	}

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.

vue js todolist tutorial

5. Membuat component todolist item.

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:

Vue.component('todo-item',{
	props: ['item'],
	template: '<li class="list-group-item" v-bind:style="isActive">{{ item.name }}'+
		'<button type="button" class="btn btn-success float-right">'+
		  '&or;'+
		'</button>'+
		'<button type="button" class="btn btn-danger float-right" aria-label="Close"'+
		  '<span aria-hidden="true">&times;</span>'+
		'</button>'+
	'</li>',
	methods: {
		
	},
	computed: {
		isActive(){
			if(this.item.done){
				return 'text-decoration:line-through'
			}
		}
	}
});
....

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

...
'<todo-item v-for="item,index in todos" v-bind:item="item" v-bind:key="index" ></todo-item>'+
...

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

6. Mengupdate dan menghapus Todolist Item

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.

method: {
  toggleTodo(todo){
			let index = this.todos.indexOf(todo);
			this.todos[index].done = !this.todos[index].done
		},
  deleteTodo(todo){

			let index = this.todos.indexOf(todo);
			this.todos.splice(index,1)

		},
}

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.

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.

<todo-item v-for="item,index in todos" v-bind:item="item" v-bind:key="index" v-on:toggleTodo="toggleTodo" v-on:deleteTodo="deleteTodo"></todo-item>

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:

  • Mendengarkan event yang dikirim dari parent component dengan $on(eventName)
  • Memanggil parent event dari child component dengan $emit(eventName)

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

methods: {
		toggleTodo(){
			this.$emit('toggleTodo',this.item)
		},
		deleteTodo(){
			this.$emit('deleteTodo',this.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.

...
template: '<li class="list-group-item" v-bind:style="isActive">{{ item.name }}'+
		'<button type="button" class="btn btn-success float-right" v-on:click="toggleTodo">'+
		  '&or;'+
		'</button>'+
		'<button type="button" class="btn btn-danger float-right" aria-label="Close" v-on:click="deleteTodo">'+
		  '<span aria-hidden="true">&times;</span>'+
		'</button>'+
	'</li>',
...

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.

7. Kesimpulan

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 untuk teman ngide semua. Jika ada kendala saat kalian mencoba tutorial ini silakan tanyakan lewat kolom komentar di bawah.


Share Yuk:

Rekomendasi untuk di baca!


Tips simple untuk simple code: part 1. Hindari penggunaan singkatan.

06 Apr 2016

Like our facebook page


Around Web