Belajar CRUD Vue.js Todo List Menggunakan Array
Belajar CRUD Vue.js Todo List dengan Miligram CSS Framewrok
CRUD Todo List - belajar crud merupakan salah satu dasar yang perlu diketahui ketika
belajar suatu bahasa pemrograman, dengan belajar crud maka kita akan
mengetahui pola bagaimana pemrograman bekerja, Todo List merupakan sebuah
project sederhana yang terdiri dari sebuah input dan sebuah tombol simpan.
pada studi kasus ini CRUD Todo List tidak menggunakan database namun data
tersimpan dalam bentuk array, pada intinya diharapkan anda dapat mengetahui
bagaimana memanipulasi array agar dapat ditambah, diubah dan dihapus.
Miligram CSS Framework
Milligram CSS merupakan salah saru framework CSS yang didesain secara khusus
untuk meningkatkan performa dan produktivitas dengan property yang lebih
sedikit jika dibanding dengan framework laiinya untuk menghasilkan kode yang
lebih terstrukur.
Browser modern saat ini seperti Chrome, Firefox, IE, Opera, dan Safari secara
resmi didukung oleh Milligram dan dapat berjalan degan baik.ukuran file
relatif sangat kecil hanya memiliki ukuran 2KB namun memiliki fitur yang cukup
lengkap. Tipografi, button, list, form, table, dan grid telah dimiliki
oleh Milligram. Panduan menggunakan Milligram tersedia lewat dokumentasinya
yang cukup lengkap yang dapat diakses
disini.
Coding CRUD Vue.js Todo List
Kembali lagi ke CRUD Vue.js Todo List untuk membuat coding akan
dijelaskan melalui langkah-langkah sebagai berikut :
Pembuatan Coding
Buat sebuah file baru dengan nama crud.html setelah itu masukan coding berikut
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CRUD TodoList</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"/>
<style>
.container {
max-width: 960px;
margin: 0 auto;
}
h1 {
padding-top: 40px;
}
</style>
</head>
<body>
<div id="app" class="container">
<h1>Todo List</h1>
<div v-if="!isEditing">
<input type="text" v-model="todo" />
<input type="submit" value="Add" @click="storeTodo" />
</div>
<div v-else>
<input type="text" v-model="todo" />
<input type="submit" value="Update" @click="updateTodo" />
</div>
<ol>
<li v-for="(todo, index) in todos">
{{ todo }}
<button @click="editTodo(index, todo)">Edit</button>
<button @click="removeTodo(index)">Delete</button>
</li>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
new Vue({
el: "#app",
data: {
isEditing: false,
todo: "",
todos: [],
selectedTodo: null,
},
methods: {
storeTodo() {
this.todos.push(this.todo);
this.todo = "";
},
removeTodo(index) {
this.todos.splice(index, 1);
},
updateTodo() {
this.todos.splice(this.selectedIndex, 1, this.todo);
this.todo = "";
this.isEditing = false;
},
editTodo(index, todo) {
this.isEditing = true;
this.todo = todo;
this.selectedIndex = index;
},
},
});
</script>
</body>
</html>
Penjelasan Coding
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"/>
coding diatas berguna untuk mendeklarasikan Font serta Miligram CSS Framework
agar dapat digunakan pada project.
<style>
.container {
max-width: 960px;
margin: 0 auto;
}
h1 {
padding-top: 40px;
}
</style>
Coding CSS diatas digunakan untuk mengatur layout.
<div id="app" class="container">
<h1>Todo List</h1>
<div v-if="!isEditing">
<input type="text" v-model="todo" />
<input type="submit" value="Add" @click="storeTodo" />
</div>
<div v-else>
<input type="text" v-model="todo" />
<input type="submit" value="Update" @click="updateTodo" />
</div>
<ol>
<li v-for="(todo, index) in todos">
{{ todo }}
<button @click="editTodo(index, todo)">Edit</button>
<button @click="removeTodo(index)">Delete</button>
</li>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
new Vue({
el: "#app",
data: {
isEditing: false,
todo: "",
todos: [],
selectedTodo: null,
},
methods: {
storeTodo() {
this.todos.push(this.todo);
this.todo = "";
},
removeTodo(index) {
this.todos.splice(index, 1);
},
updateTodo() {
this.todos.splice(this.selectedIndex, 1, this.todo);
this.todo = "";
this.isEditing = false;
},
editTodo(index, todo) {
this.isEditing = true;
this.todo = todo;
this.selectedIndex = index;
},
},
});
</script>
Coding diatas merupakan coding javascript vue.js pada bagian atas memuat deklarasi Vue.js, project ini memiliki beberapa variabel diantaranya adalah :
- storeTodo, digunakan untuk menyimpan data,
- updateTodo, digunakan untuk mengupdate data,
- removeTodo, digunakan untuk menghapus data,
- editTodo, digunakan untuk memilih dan menampilkan data yang akan diupdate pada input text.
Demo Program
Menampilkan data yang sudah tersimpan :
Sekian Belajar CRUD Vue.js Todo List Menggunakan Array semoga bermanfaat
dan dapat dipraktekan dengan lancar. terimakasih.
Posting Komentar untuk "Belajar CRUD Vue.js Todo List Menggunakan Array "