DEV Community 👩‍💻👨‍💻

Faris Han
Faris Han

Posted on

Gabut Mode On: Bikin Aplikasi Inventaris Kosan (Bagian 6 - Delete Item)

Heyooo.

  1. Mencatat barang-barang
  2. Menampilkan daftarnya
  3. Menghapus data barang

Sudah dua dari tiga fitur yang saya inginkan dari MVP ini. Sekarang saatnya merampungkan fitur ketiga.

Seperti biasa, yang tidak ingin basa-basi boleh langsung ke bagian paling bawah. Scroll terus~


Untuk bisa menghapus barang, user butuh interface. Bentuk umum yang paling sederhana mungkin tombol dengan huruf "X". Hmm, coba saya pasang di list item ya.

...
<li v-for="(item, index) in items" class="w-full">
  <div class="border p-2 flex w-full justify-between">
    <div class="flex">
      <div class="border px-2 mr-2">
        {{ index+1 }}
      </div>
      <div>
        <p class="text-xs text-gray-600">name:</p>
        <p class="font-bold">{{ item.name }}</p>
        <p class="text-xs text-gray-600">description: "</p>"
        <p>{{ item.description }}</p>
      </div>
    </div>
    <div>
      <button class="cursor-pointer">X</button>
    </div>
  </div>
</li>
...
Enter fullscreen mode Exit fullscreen mode

OK, lumayan. Sekarang pasang pendengar acara alias event listenernya. Hehe.

...
  <button class="cursor-pointer" @click="remove(index)">X</button>
...
Enter fullscreen mode Exit fullscreen mode
...
  methods: {
    add(){
      ...
    },

    // ini method untuk delete itemnya nanti
    remove(index){
      console.log(index)
    }
  }
...
Enter fullscreen mode Exit fullscreen mode

Sekarang saya bisa tahu mana item yang terpilih untuk di-delete, dengan menggunakan index sebagai pembeda atau identitas si item.

Kalau user masukin item yang sama dua atau berkali-kali, misalnya dia punya dua meja yang sama-sama beli di Jepara, pasti indexnya beda. Meja Jepara 1 atau Meja Jepara 2, sesuai index item-nya.

Langkah berikutnya, saya hapus item dengan index yang terpilih.

...
    remove(index){
      this.items.splice(index, 1)
    }
...
Enter fullscreen mode Exit fullscreen mode

Yasss, fungsi delete-nya sudah jadi!


User story ketiga sudah terpenuhi, harusnya user sudah bisa memakai aplikasinya, dong?

Mencatat barang: bisa ✔️
Menampilkan daftar barang: bisa ✔️
Menghapus barang: bisa ✔️

Terus? Bungkus?


Ada masalah yang belum terpikirkan sejak bagian satu: kalau aplikasinya di-refresh atau ke-refresh, catatan barangnya hilang. Kalau begini kan MVP-nya jadi tidak mantap. Bayangin udah nginput puluhan item, tiba-tiba browsernya ga sengaja kerefresh. Duh...

Maka dengan tempo yang sesingkat-singkatnya, saya akan memasang fungsi save/simpan ke storage. Lebih tepatnya storage yang ada di browser saya alias localStorage. Mari kita coba integrasinya. Buat method save:

...
methods: {
  add(){...},
  remove(){...},

  // ini dia methodnya
  save(){
    localStorage.setItem('inkos_data', JSON.stringify(this.items))
  }
}
...
Enter fullscreen mode Exit fullscreen mode

Saya akan panggil fungsi save setiap kali catatan kita this.items mengalami perubahan.

...
  methods: {
    add(){
      let item = {
        name: this.name,
        description: this.description
      }

      this.items.push(item)

      // ada penambahan ke "this.items", berarti disini pasang
      this.save()

      this.name = ''
      this.description = ''

      console.log(this.items)
    },
    remove(index){
      this.items.splice(index, 1)

      // ada pengurangan ke "this.items", berarti disini juga pasang
      this.save()
    },
    save(){
      localStorage.setItem('inkos_data', JSON.stringify(this.items))
    }
  }
...
Enter fullscreen mode Exit fullscreen mode

OK, coba dites dulu.

...

Hmm, masih belum nge-save kalau direfresh? Tapi ada di local storage?

Setiap kali kita refresh, aplikasinya selalu kosong padahal ada data yang harus ditampilkan dari local storage. Artinya kita harus ambil data itu dan bilang ke aplikasinya untuk menampilkan data itu, jika ada.

  • Refresh
  • Ada datanya? Tampilin
  • Ga ada datanya? Yaudah kasih yang ada apa

Kita akan cek data setelah aplikasi di-refresh. Bisa kita tulis kodenya di mountednya Vue. Jadi setiap kali aplikasi Vue kita terpasang di browser, kita cek ada data di storage atau tidak.

...
  data(){ ... },

  mounted() {
    let data = localStorage.getItem('inkos_data')
    if (data) this.items = JSON.parse(data)
  },

  methods: { ... }
...
Enter fullscreen mode Exit fullscreen mode

Setelah dicoba, hasilnya... mantap!

Ini baru minimun viable product yang saya inginkan. Untuk sementara inventarisasi barang kosan sudah bisa dimulai. Hehe.

Terima kasih sudah menyimak sampai bagian ini. Sampai jumpa di artikel yang lain!

  1. Mencatat barang-barang
  2. Menampilkan daftarnya
  3. Menghapus data barang 🎉

Mau coba juga? Atau mau lihat source code nya?
Mampir kesini:

Top comments (0)

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.