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>
  
coding diatas adalah layout yang terdiri dari sebuah input dan sebuah tombol ketika melakukan simpan data dan edit data, selain itu ada tag html order list untuk menampilkan list data yang telah diinput.

<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 :

  • isEditing, berguna untuk megetahui kondisi apakah penyimpanan data atau update data
  • todo, adalah variabel yang digunakan untuk menampung data yang akan disimpan atau diupdate
  • todos, adalah array yang digunakan untuk menampung semua data yang tersimpan
  • selectedTodo, digunakan untuk menampung data yang dipilih ketika update data atau hapus data.
  • Selain itu memiliki beberapa method yaitu :
    1. storeTodo, digunakan untuk menyimpan data,
    2. updateTodo, digunakan untuk mengupdate data,
    3. removeTodo, digunakan untuk menghapus data,
    4. editTodo, digunakan untuk memilih dan menampilkan data yang akan diupdate pada input text.

    Demo Program

    Menampilkan data yang sudah tersimpan :
    Edit data :

    Sekian Belajar CRUD Vue.js Todo List Menggunakan Array semoga bermanfaat dan dapat dipraktekan dengan lancar. terimakasih.