├── tailwind.config.js
├── readme.md
├── assets
    └── box.svg
└── index.html


/tailwind.config.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # Nama dan Fitur
 2 | 
 3 | Aplikasi ini bernama BARANGKU => Manajemen Barang Sederhana di Lokal Tanpa Database.
 4 | Fitur: edit username, edit foto profile/avatar, tambah barang, edit barang, hapus barang, cari barang.
 5 | 
 6 | # Latar Belakang
 7 | 
 8 | Sebagai anak kost yang apatis, saya tidak terlalu memperdulikan barang-barang apa saja yang saya miliki. Sampai suatu hari saya me-laundry pakaian lalu mau mengambil laundryan. Sialnya, pegawai laundry tak kunjung menemukan pakaian saya karena keliru memasang struk/tanda terima. Pegawainya menanyakan pakaian apa saja yang saya laundry? agar dicari secara manual. Saya tidak bisa menjawab karena lupa dan tidak mendatanya. Dari sana lah saya terpikirkan untuk membuat aplikasi untuk mendata barang-barang yang dimiliki. BTW, laundry cucianku akhirnya ketemu berkat ingatan samarku kepada sarung berwarna ungu :hehe:
 9 | 
10 | # Teknologi yang digunakan
11 | 
12 | 1. HTML
13 | 1. TailwindCSS: framework css
14 | 1. AlpineJS: framework js
15 | 1. Persist: plugin AlpineJS untuk bekerja dengan localStorage
16 | 1. Heroicons: icons untuk fungsionalitas website
17 | 1. Icons8.com: icons untuk logo dan ilustrasi kategori barang
18 | 1. dicebear.com: Avatar untur profile
19 | 
20 | # Repo & Demo
21 | 
22 | Repo: https://github.com/sejutaimpian/barangku-alpine
23 | Demo: https://barangku.kid.my.id
24 | 
25 | # Terima Kasih
26 | 


--------------------------------------------------------------------------------
/assets/box.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 64 64" width="64px" height="64px"><path d="M 7 10.058594 C 5.347656 10.058594 4 11.402344 4 13.058594 L 4 19.058594 C 4 19.859375 4.3125 20.613281 4.878906 21.179688 C 5.199219 21.5 5.582031 21.742188 6 21.890625 L 6 53.058594 C 6 54.710938 7.347656 56.058594 9 56.058594 L 57 56.058594 C 58.652344 56.058594 60 54.710938 60 53.058594 L 60 21.890625 C 60.417969 21.742188 60.800781 21.5 61.121094 21.179688 C 61.6875 20.613281 62 19.859375 62 19.058594 L 62 13.058594 C 62 11.402344 60.652344 10.058594 59 10.058594 Z M 7 12.058594 L 59 12.058594 C 59.550781 12.058594 60 12.503906 60 13.058594 L 60 19.058594 C 60 19.324219 59.894531 19.578125 59.707031 19.765625 C 59.519531 19.953125 59.269531 20.058594 59 20.058594 L 55 20.058594 C 54.449219 20.058594 54 20.503906 54 21.058594 C 54 21.609375 54.449219 22.058594 55 22.058594 L 58 22.058594 L 58 53.058594 C 58 53.609375 57.550781 54.058594 57 54.058594 L 9 54.058594 C 8.449219 54.058594 8 53.609375 8 53.058594 L 8 22.058594 L 43 22.058594 C 43.550781 22.058594 44 21.609375 44 21.058594 C 44 20.503906 43.550781 20.058594 43 20.058594 L 7 20.058594 C 6.730469 20.058594 6.480469 19.953125 6.292969 19.765625 C 6.105469 19.578125 6 19.324219 6 19.058594 L 6 13.058594 C 6 12.503906 6.449219 12.058594 7 12.058594 Z M 47 20.058594 C 46.449219 20.058594 46 20.503906 46 21.058594 C 46 21.609375 46.449219 22.058594 47 22.058594 L 51 22.058594 C 51.550781 22.058594 52 21.609375 52 21.058594 C 52 20.503906 51.550781 20.058594 51 20.058594 Z M 26 26 C 23.792969 26 22 27.792969 22 30 C 22 32.207031 23.792969 34 26 34 L 40 34 C 42.207031 34 44 32.207031 44 30 C 44 27.792969 42.207031 26 40 26 Z M 26 28 L 40 28 C 41.101563 28 42 28.898438 42 30 C 42 31.101563 41.101563 32 40 32 L 26 32 C 24.898438 32 24 31.101563 24 30 C 24 28.898438 24.898438 28 26 28 Z M 13 48.058594 C 12.449219 48.058594 12 48.503906 12 49.058594 L 12 51.058594 C 12 51.609375 12.449219 52.058594 13 52.058594 C 13.550781 52.058594 14 51.609375 14 51.058594 L 14 49.058594 C 14 48.503906 13.550781 48.058594 13 48.058594 Z M 18 48.058594 C 17.449219 48.058594 17 48.503906 17 49.058594 L 17 51.058594 C 17 51.609375 17.449219 52.058594 18 52.058594 C 18.550781 52.058594 19 51.609375 19 51.058594 L 19 49.058594 C 19 48.503906 18.550781 48.058594 18 48.058594 Z M 23 48.058594 C 22.449219 48.058594 22 48.503906 22 49.058594 L 22 51.058594 C 22 51.609375 22.449219 52.058594 23 52.058594 C 23.550781 52.058594 24 51.609375 24 51.058594 L 24 49.058594 C 24 48.503906 23.550781 48.058594 23 48.058594 Z M 28 48.058594 C 27.449219 48.058594 27 48.503906 27 49.058594 L 27 51.058594 C 27 51.609375 27.449219 52.058594 28 52.058594 C 28.550781 52.058594 29 51.609375 29 51.058594 L 29 49.058594 C 29 48.503906 28.550781 48.058594 28 48.058594 Z M 33 48.058594 C 32.449219 48.058594 32 48.503906 32 49.058594 L 32 51.058594 C 32 51.609375 32.449219 52.058594 33 52.058594 C 33.550781 52.058594 34 51.609375 34 51.058594 L 34 49.058594 C 34 48.503906 33.550781 48.058594 33 48.058594 Z M 38 48.058594 C 37.449219 48.058594 37 48.503906 37 49.058594 L 37 51.058594 C 37 51.609375 37.449219 52.058594 38 52.058594 C 38.550781 52.058594 39 51.609375 39 51.058594 L 39 49.058594 C 39 48.503906 38.550781 48.058594 38 48.058594 Z M 43 48.058594 C 42.449219 48.058594 42 48.503906 42 49.058594 L 42 51.058594 C 42 51.609375 42.449219 52.058594 43 52.058594 C 43.550781 52.058594 44 51.609375 44 51.058594 L 44 49.058594 C 44 48.503906 43.550781 48.058594 43 48.058594 Z M 48 48.058594 C 47.449219 48.058594 47 48.503906 47 49.058594 L 47 51.058594 C 47 51.609375 47.449219 52.058594 48 52.058594 C 48.550781 52.058594 49 51.609375 49 51.058594 L 49 49.058594 C 49 48.503906 48.550781 48.058594 48 48.058594 Z M 53 48.058594 C 52.449219 48.058594 52 48.503906 52 49.058594 L 52 51.058594 C 52 51.609375 52.449219 52.058594 53 52.058594 C 53.550781 52.058594 54 51.609375 54 51.058594 L 54 49.058594 C 54 48.503906 53.550781 48.058594 53 48.058594 Z"/></svg>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <title>Barangku - AlpineJS</title>
  9 |     <link rel="shortcut icon" href="assets/box.svg" type="image/x-icon">
 10 |     <script src="https://cdn.tailwindcss.com"></script>
 11 |     <script src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
 12 |     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.0/dist/cdn.min.js"></script>
 13 |     <style>
 14 |         [x-cloak] {
 15 |             display: none !important;
 16 |         }
 17 |     </style>
 18 | </head>
 19 | 
 20 | <body class="bg-slate-50">
 21 |     <!-- Modal -->
 22 |     <div x-data x-cloak x-show="$store.barangku.modal"
 23 |         class="fixed top-0 left-0 right-0 z-50 flex items-center justify-center w-full h-screen bg-slate-800/80 md:mx-auto">
 24 |         <div class="flex items-center px-4">
 25 |             <div class="flex flex-wrap items-center justify-center bg-sky-950">
 26 |                 <!-- setPilihAvatar -->
 27 |                 <div x-show="$store.barangku.pilihAvatar" x-on:click.outside="$store.barangku.setPilihAvatar()">
 28 |                     <h2
 29 |                         class="w-full px-2 py-2 text-xl font-bold text-center border bg-slate-950 md:text-3xl text-sky-300 border-sky-300">
 30 |                         Pilih
 31 |                         Avatarmu
 32 |                     </h2>
 33 |                     <div class="flex flex-wrap items-center px-2 my-10 justify-evenly">
 34 |                         <template x-for="avatar in $store.barangku.avatars">
 35 |                             <img x-on:click="$store.barangku.setAvatar(avatar)" :src="avatar" alt="avatar"
 36 |                                 class="w-20 h-20 mx-2 my-2 rounded-full cursor-pointer bg-sky-300">
 37 |                         </template>
 38 |                     </div>
 39 |                 </div>
 40 |                 <!-- setUsername -->
 41 |                 <div x-show="$store.barangku.pilihUsername" x-on:click.outside="$store.barangku.setPilihUsername()">
 42 |                     <h2
 43 |                         class="w-full px-2 py-2 text-xl font-bold text-center border bg-slate-950 md:text-3xl text-sky-300 border-sky-300">
 44 |                         Edit Username
 45 |                     </h2>
 46 |                     <form x-on:submit.prevent="$store.barangku.setPilihUsername()" class="flex gap-2 mx-4 my-4">
 47 |                         <input class="px-1 mx-auto rounded" type="text" x-model="$store.barangku.username">
 48 |                         <button
 49 |                             class="px-4 py-1 border rounded-md border-sky-300 text-slate-800 hover:bg-sky-200 hover:text-slate-950 bg-sky-100">Update</button>
 50 |                     </form>
 51 |                 </div>
 52 |                 <!-- setBarang -->
 53 |                 <div x-show="$store.barangku.pilihBarang" x-on:click.outside="$store.barangku.setPilihBarang()">
 54 |                     <h2
 55 |                         class="w-full px-2 py-2 text-xl font-bold text-center border bg-slate-950 md:text-3xl text-sky-300 border-sky-300">
 56 |                         Tambah Barang
 57 |                     </h2>
 58 |                     <form x-on:submit.prevent="$store.barangku.setBarang()"
 59 |                         class="flex flex-wrap gap-2 mx-4 my-4 md:w-96">
 60 |                         <div class="flex flex-wrap w-full my-1">
 61 |                             <label for="namaBarang" class="w-full text-white md:w-1/3">Nama Barang</label>
 62 |                             <input id="namaBarang" class="w-full px-1 rounded md:w-2/3" type="text"
 63 |                                 x-model="$store.barangku.namaBarang" placeholder="Nama Barang ....">
 64 |                         </div>
 65 |                         <div class="flex flex-wrap w-full my-1">
 66 |                             <label for="banyak" class="w-full text-white md:w-1/3">Banyak</label>
 67 |                             <input id="banyak" class="w-full px-1 rounded md:w-2/3" type="number"
 68 |                                 x-model="$store.barangku.banyak" placeholder="Banyak Barang ....">
 69 |                         </div>
 70 |                         <div class="flex flex-wrap w-full my-1">
 71 |                             <label for="kategori" class="w-full text-white md:w-1/3">Kategori</label>
 72 |                             <select class="flex-1" id="kategori" x-model="$store.barangku.kategori">
 73 |                                 <option value="" disabled selected>Pilih Kategori ...</option>
 74 |                                 <template x-for="(item, index) in $store.barangku.listKategori" x-init="">
 75 |                                     <option :value="index" x-text="item.namaKategori">
 76 |                                     </option>
 77 |                                 </template>
 78 |                             </select>
 79 |                         </div>
 80 |                         <button
 81 |                             class="px-4 py-1 ml-auto border rounded-md border-sky-300 text-slate-800 hover:bg-sky-200 hover:text-slate-950 bg-sky-100">Update</button>
 82 |                     </form>
 83 |                 </div>
 84 |                 <!-- setEdit -->
 85 |                 <div x-show="$store.barangku.pilihEdit" x-on:click.outside="$store.barangku.setPilihEdit()">
 86 |                     <h2
 87 |                         class="w-full px-2 py-2 text-xl font-bold text-center border bg-slate-950 md:text-3xl text-sky-300 border-sky-300">
 88 |                         Edit Barang
 89 |                     </h2>
 90 |                     <form x-on:submit.prevent="$store.barangku.updateBarang()"
 91 |                         class="flex flex-wrap gap-2 mx-4 my-4 md:w-96">
 92 |                         <div class="flex flex-wrap w-full my-1">
 93 |                             <label for="namaBarang" class="w-full text-white md:w-1/3">Nama Barang</label>
 94 |                             <input id="namaBarang" class="w-full px-1 rounded md:w-2/3" type="text"
 95 |                                 x-model="$store.barangku.namaBarang" placeholder="Nama Barang ....">
 96 |                         </div>
 97 |                         <div class="flex flex-wrap w-full my-1">
 98 |                             <label for="banyak" class="w-full text-white md:w-1/3">Banyak</label>
 99 |                             <input id="banyak" class="w-full px-1 rounded md:w-2/3" type="number"
100 |                                 x-model="$store.barangku.banyak" placeholder="Banyak Barang ....">
101 |                         </div>
102 |                         <div class="flex flex-wrap w-full my-1">
103 |                             <label for="kategori" class="w-full text-white md:w-1/3">Kategori</label>
104 |                             <select class="flex-1" id="kategori" x-model="$store.barangku.kategori">
105 |                                 <template x-for="(item, index) in $store.barangku.listKategori">
106 |                                     <option :value="index" x-text="item.namaKategori">
107 |                                     </option>
108 |                                 </template>
109 |                             </select>
110 |                         </div>
111 |                         <button
112 |                             class="px-4 py-1 ml-auto border rounded-md border-sky-300 text-slate-800 hover:bg-sky-200 hover:text-slate-950 bg-sky-100">Update</button>
113 |                     </form>
114 |                 </div>
115 |             </div>
116 |         </div>
117 |     </div>
118 | 
119 |     <!-- hero -->
120 |     <div class="px-5 py-10 text-center bg-slate-900 text-slate-100">
121 |         <svg class="block mx-auto" fill="white" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="64"
122 |             height="64" viewBox="0 0 64 64">
123 |             <path
124 |                 d="M 7 10.058594 C 5.347656 10.058594 4 11.402344 4 13.058594 L 4 19.058594 C 4 19.859375 4.3125 20.613281 4.878906 21.179688 C 5.199219 21.5 5.582031 21.742188 6 21.890625 L 6 53.058594 C 6 54.710938 7.347656 56.058594 9 56.058594 L 57 56.058594 C 58.652344 56.058594 60 54.710938 60 53.058594 L 60 21.890625 C 60.417969 21.742188 60.800781 21.5 61.121094 21.179688 C 61.6875 20.613281 62 19.859375 62 19.058594 L 62 13.058594 C 62 11.402344 60.652344 10.058594 59 10.058594 Z M 7 12.058594 L 59 12.058594 C 59.550781 12.058594 60 12.503906 60 13.058594 L 60 19.058594 C 60 19.324219 59.894531 19.578125 59.707031 19.765625 C 59.519531 19.953125 59.269531 20.058594 59 20.058594 L 55 20.058594 C 54.449219 20.058594 54 20.503906 54 21.058594 C 54 21.609375 54.449219 22.058594 55 22.058594 L 58 22.058594 L 58 53.058594 C 58 53.609375 57.550781 54.058594 57 54.058594 L 9 54.058594 C 8.449219 54.058594 8 53.609375 8 53.058594 L 8 22.058594 L 43 22.058594 C 43.550781 22.058594 44 21.609375 44 21.058594 C 44 20.503906 43.550781 20.058594 43 20.058594 L 7 20.058594 C 6.730469 20.058594 6.480469 19.953125 6.292969 19.765625 C 6.105469 19.578125 6 19.324219 6 19.058594 L 6 13.058594 C 6 12.503906 6.449219 12.058594 7 12.058594 Z M 47 20.058594 C 46.449219 20.058594 46 20.503906 46 21.058594 C 46 21.609375 46.449219 22.058594 47 22.058594 L 51 22.058594 C 51.550781 22.058594 52 21.609375 52 21.058594 C 52 20.503906 51.550781 20.058594 51 20.058594 Z M 26 26 C 23.792969 26 22 27.792969 22 30 C 22 32.207031 23.792969 34 26 34 L 40 34 C 42.207031 34 44 32.207031 44 30 C 44 27.792969 42.207031 26 40 26 Z M 26 28 L 40 28 C 41.101563 28 42 28.898438 42 30 C 42 31.101563 41.101563 32 40 32 L 26 32 C 24.898438 32 24 31.101563 24 30 C 24 28.898438 24.898438 28 26 28 Z M 13 48.058594 C 12.449219 48.058594 12 48.503906 12 49.058594 L 12 51.058594 C 12 51.609375 12.449219 52.058594 13 52.058594 C 13.550781 52.058594 14 51.609375 14 51.058594 L 14 49.058594 C 14 48.503906 13.550781 48.058594 13 48.058594 Z M 18 48.058594 C 17.449219 48.058594 17 48.503906 17 49.058594 L 17 51.058594 C 17 51.609375 17.449219 52.058594 18 52.058594 C 18.550781 52.058594 19 51.609375 19 51.058594 L 19 49.058594 C 19 48.503906 18.550781 48.058594 18 48.058594 Z M 23 48.058594 C 22.449219 48.058594 22 48.503906 22 49.058594 L 22 51.058594 C 22 51.609375 22.449219 52.058594 23 52.058594 C 23.550781 52.058594 24 51.609375 24 51.058594 L 24 49.058594 C 24 48.503906 23.550781 48.058594 23 48.058594 Z M 28 48.058594 C 27.449219 48.058594 27 48.503906 27 49.058594 L 27 51.058594 C 27 51.609375 27.449219 52.058594 28 52.058594 C 28.550781 52.058594 29 51.609375 29 51.058594 L 29 49.058594 C 29 48.503906 28.550781 48.058594 28 48.058594 Z M 33 48.058594 C 32.449219 48.058594 32 48.503906 32 49.058594 L 32 51.058594 C 32 51.609375 32.449219 52.058594 33 52.058594 C 33.550781 52.058594 34 51.609375 34 51.058594 L 34 49.058594 C 34 48.503906 33.550781 48.058594 33 48.058594 Z M 38 48.058594 C 37.449219 48.058594 37 48.503906 37 49.058594 L 37 51.058594 C 37 51.609375 37.449219 52.058594 38 52.058594 C 38.550781 52.058594 39 51.609375 39 51.058594 L 39 49.058594 C 39 48.503906 38.550781 48.058594 38 48.058594 Z M 43 48.058594 C 42.449219 48.058594 42 48.503906 42 49.058594 L 42 51.058594 C 42 51.609375 42.449219 52.058594 43 52.058594 C 43.550781 52.058594 44 51.609375 44 51.058594 L 44 49.058594 C 44 48.503906 43.550781 48.058594 43 48.058594 Z M 48 48.058594 C 47.449219 48.058594 47 48.503906 47 49.058594 L 47 51.058594 C 47 51.609375 47.449219 52.058594 48 52.058594 C 48.550781 52.058594 49 51.609375 49 51.058594 L 49 49.058594 C 49 48.503906 48.550781 48.058594 48 48.058594 Z M 53 48.058594 C 52.449219 48.058594 52 48.503906 52 49.058594 L 52 51.058594 C 52 51.609375 52.449219 52.058594 53 52.058594 C 53.550781 52.058594 54 51.609375 54 51.058594 L 54 49.058594 C 54 48.503906 53.550781 48.058594 53 48.058594 Z">
125 |             </path>
126 |         </svg>
127 |         <h1 class="my-4 text-4xl tracking-widest text-sky-300">BARANGKU</h1>
128 |         <p>Manajemen Barang Sederhana di Lokal Tanpa Database</p>
129 |     </div>
130 |     <div x-data class="container px-4 mx-auto my-10">
131 | 
132 |         <!-- Profile -->
133 |         <div class="flex my-6">
134 |             <div class="w-2/3">
135 |                 <h2 class="mb-2 text-xl leading-none md:text-4xl">Hello,
136 |                     <span class="font-bold leading-6 break-words cursor-pointer bg-slate-50"
137 |                         x-text="$store.barangku.username" x-on:click="$store.barangku.setPilihUsername()"></span>
138 |                 </h2>
139 |                 <p class="leading-5">Barangmu beres bersama <span class="underline decoration-sky-300">Barangku</span>
140 |                 </p>
141 |             </div>
142 |             <div class="w-1/3">
143 |                 <img x-on:click="$store.barangku.setPilihAvatar()"
144 |                     class="w-20 h-20 ml-auto rounded-full cursor-pointer bg-sky-300" :src="$store.barangku.img"
145 |                     alt="Profile Picture">
146 |             </div>
147 |         </div>
148 | 
149 |         <!-- Cari Barang-barang -->
150 |         <div class="my-10">
151 |             <div class="flex gap-2">
152 |                 <form x-on:submit.prevent="$store.barangku.cariBarang()"
153 |                     class="flex items-center flex-1 px-2 bg-white border rounded-xl">
154 |                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
155 |                         stroke="currentColor" class="w-6 h-6">
156 |                         <path stroke-linecap="round" stroke-linejoin="round"
157 |                             d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
158 |                     </svg>
159 |                     <input x-model="$store.barangku.keywordCari" type="text" class="w-full px-2 py-1 outline-none"
160 |                         placeholder="Cari barang berdasarkan nama ...">
161 |                 </form>
162 |                 <button
163 |                     class="flex items-center justify-center gap-2 px-4 py-1 border rounded-md border-sky-300 text-sky-900 hover:bg-sky-200 hover:text-sky-950 bg-sky-100"
164 |                     title="Tambah Barang" x-on:click="$store.barangku.setPilihBarang()">
165 |                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
166 |                         stroke="currentColor" class="w-6 h-6">
167 |                         <path stroke-linecap="round" stroke-linejoin="round"
168 |                             d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
169 |                     </svg>
170 |                     <span class="hidden md:inline">Tambah Barang</span>
171 |                 </button>
172 |                 <button
173 |                     class="flex items-center justify-center gap-2 px-4 py-1 text-red-900 bg-red-100 border border-red-300 rounded-md hover:bg-red-200 hover:text-red-950"
174 |                     title="Reset Barang" x-on:click="$store.barangku.resetBarang()">
175 |                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
176 |                         stroke="currentColor" class="w-6 h-6">
177 |                         <path stroke-linecap="round" stroke-linejoin="round"
178 |                             d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
179 |                     </svg>
180 |                     <span class="hidden md:inline">Reset Barang</span>
181 |                 </button>
182 |             </div>
183 |         </div>
184 | 
185 |         <!-- List Barang -->
186 |         <div class="min-h-[80vh]">
187 |             <!-- Aslina -->
188 |             <template x-if="!$store.barangku.keywordCari">
189 |                 <div>
190 |                     <template x-if="!$store.barangku.barang.length">
191 |                         <div class="flex flex-wrap justify-center gap-4">
192 |                             <div class="flex items-center justify-center w-full gap-2 px-4 py-1">
193 |                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
194 |                                     stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
195 |                                     <path stroke-linecap="round" stroke-linejoin="round"
196 |                                         d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
197 |                                 </svg>
198 |                                 <div>Barang Masih Kosong!</div>
199 |                             </div>
200 |                             <img width="64" height="64"
201 |                                 src="https://img.icons8.com/external-outline-andi-nur-abdillah/64/external-Empty-empty-state-(outline)-outline-andi-nur-abdillah.png"
202 |                                 alt="external-Empty-empty-state-(outline)-outline-andi-nur-abdillah" />
203 |                         </div>
204 |                     </template>
205 |                     <template x-if="$store.barangku.barang.length">
206 |                         <template :key="item.id" x-for="(item, index) in $store.barangku.barang">
207 |                             <div
208 |                                 class="flex flex-wrap items-center justify-between px-4 py-1 my-4 border-2 border-sky-300 rounded-2xl">
209 |                                 <div>
210 |                                     <img :src="item.category.icon" :alt="item.category.namaKategori">
211 |                                 </div>
212 |                                 <div class="flex-1 pl-4">
213 |                                     <div class="text-3xl" x-text="item.nama"></div>
214 |                                     <div class="flex gap-3">
215 |                                         <div class="flex items-center gap-1">
216 |                                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
217 |                                                 stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
218 |                                                 <path stroke-linecap="round" stroke-linejoin="round"
219 |                                                     d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" />
220 |                                                 <path stroke-linecap="round" stroke-linejoin="round"
221 |                                                     d="M6 6h.008v.008H6V6z" />
222 |                                             </svg>
223 |                                             <span x-text="item.category.namaKategori"></span>
224 |                                         </div>
225 |                                         <div class="flex items-center gap-1">
226 |                                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
227 |                                                 stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
228 |                                                 <path stroke-linecap="round" stroke-linejoin="round"
229 |                                                     d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3" />
230 |                                             </svg>
231 |                                             <span x-text="item.banyak"></span>
232 |                                         </div>
233 |                                     </div>
234 |                                 </div>
235 |                                 <div
236 |                                     class="relative flex flex-row w-full gap-2 pt-2 mt-2 border-t-2 md:border-t-0 md:mt-0 md:pt-0 justify-evenly md:flex-col md:w-auto border-t-sky-300">
237 |                                     <div class="absolute right-0 flex items-center justify-center h-full px-4 text-lg rounded-full md:text-3xl text-slate-800 bg-sky-300 opacity-20 -top-16 md:top-0 aspect-square -z-10 md:-left-14"
238 |                                         x-text="index+1">
239 |                                     </div>
240 |                                     <button x-on:click="$store.barangku.setPilihEdit(item.id, index)" class=" min-w-[6rem] px-4 py-1 border rounded-md hover:bg-amber-200
241 |                                 hover:text-amber-950 bg-amber-100 text-amber-900 border-amber-300">Edit</button>
242 |                                     <button x-on:click="$store.barangku.deleteBarang(item.id)"
243 |                                         class="min-w-[6rem] px-4 py-1 border rounded-md hover:bg-red-200 hover:text-red-950 bg-red-100 text-red-900 border-red-300">Delete</button>
244 |                                 </div>
245 |                             </div>
246 |                         </template>
247 |                     </template>
248 |                 </div>
249 |             </template>
250 |             <!-- Filterna -->
251 |             <template x-if="$store.barangku.keywordCari">
252 |                 <div>
253 |                     <template x-if="!$store.barangku.filteredBarang().length">
254 |                         <div class="flex flex-wrap justify-center gap-4">
255 |                             <div class="flex items-center justify-center w-full gap-2 px-4 py-1">
256 |                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
257 |                                     stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
258 |                                     <path stroke-linecap="round" stroke-linejoin="round"
259 |                                         d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
260 |                                 </svg>
261 |                                 <div>Barang Tidak Ditemukan!</div>
262 |                             </div>
263 |                             <img width="64" height="64"
264 |                                 src="https://img.icons8.com/external-outline-andi-nur-abdillah/64/external-404-Page-cyber-security-(outline)-outline-andi-nur-abdillah.png"
265 |                                 alt="external-404-Page-cyber-security-(outline)-outline-andi-nur-abdillah" />
266 |                         </div>
267 |                     </template>
268 |                     <template x-if="$store.barangku.filteredBarang().length">
269 |                         <template :key="item.id" x-for="(item, index) in $store.barangku.filteredBarang()">
270 |                             <div
271 |                                 class="flex flex-wrap items-center justify-between px-4 py-1 my-4 border-2 border-sky-300 rounded-2xl">
272 |                                 <div>
273 |                                     <img :src="item.category.icon" :alt="item.category.namaKategori">
274 |                                 </div>
275 |                                 <div class="flex-1 pl-4">
276 |                                     <div class="text-3xl" x-text="item.nama"></div>
277 |                                     <div class="flex gap-3">
278 |                                         <div class="flex items-center gap-1">
279 |                                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
280 |                                                 stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
281 |                                                 <path stroke-linecap="round" stroke-linejoin="round"
282 |                                                     d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" />
283 |                                                 <path stroke-linecap="round" stroke-linejoin="round"
284 |                                                     d="M6 6h.008v.008H6V6z" />
285 |                                             </svg>
286 |                                             <span x-text="item.category.namaKategori"></span>
287 |                                         </div>
288 |                                         <div class="flex items-center gap-1">
289 |                                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
290 |                                                 stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
291 |                                                 <path stroke-linecap="round" stroke-linejoin="round"
292 |                                                     d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3" />
293 |                                             </svg>
294 |                                             <span x-text="item.banyak"></span>
295 |                                         </div>
296 |                                     </div>
297 |                                 </div>
298 |                                 <div
299 |                                     class="relative flex flex-row w-full gap-2 pt-2 mt-2 border-t-2 md:border-t-0 md:mt-0 md:pt-0 justify-evenly md:flex-col md:w-auto border-t-sky-300">
300 |                                     <div class="absolute right-0 flex items-center justify-center h-full px-4 text-lg rounded-full md:text-3xl text-slate-800 bg-sky-300 opacity-20 -top-16 md:top-0 aspect-square -z-10 md:-left-14"
301 |                                         x-text="index+1">
302 |                                     </div>
303 |                                     <button x-on:click="$store.barangku.setPilihEdit(item.id, index)" class=" min-w-[6rem] px-4 py-1 border rounded-md hover:bg-amber-200
304 |                                 hover:text-amber-950 bg-amber-100 text-amber-900 border-amber-300">Edit</button>
305 |                                     <button x-on:click="$store.barangku.deleteBarang(item.id)"
306 |                                         class="min-w-[6rem] px-4 py-1 border rounded-md hover:bg-red-200 hover:text-red-950 bg-red-100 text-red-900 border-red-300">Delete</button>
307 |                                 </div>
308 |                             </div>
309 |                         </template>
310 |                     </template>
311 |                 </div>
312 |             </template>
313 |         </div>
314 |     </div>
315 |     <script>
316 |         document.addEventListener('alpine:init', () => {
317 |             Alpine.store('barangku', {
318 |                 // Modal
319 |                 modal: false,
320 | 
321 |                 // List Avatar
322 |                 avatars: [
323 |                     'https://api.dicebear.com/6.x/lorelei/svg?seed=Peanut',
324 |                     'https://api.dicebear.com/6.x/lorelei/svg?seed=Oreo',
325 |                     'https://api.dicebear.com/6.x/lorelei/svg?seed=Zoey',
326 |                     'https://api.dicebear.com/6.x/lorelei/svg?seed=Sheba',
327 |                     'https://api.dicebear.com/6.x/lorelei/svg?seed=Mimi',
328 |                     'https://api.dicebear.com/6.x/lorelei/svg?seed=Kitty'
329 |                 ],
330 |                 // Avatar
331 |                 img: Alpine.$persist('https://api.dicebear.com/6.x/lorelei/svg?seed=Peanut'),
332 |                 pilihAvatar: false,
333 |                 setPilihAvatar() {
334 |                     this.modal = !this.modal;
335 |                     this.pilihAvatar = !this.pilihAvatar;
336 |                 },
337 |                 setAvatar(avatar) {
338 |                     this.img = avatar;
339 |                     this.setPilihAvatar();
340 |                 },
341 | 
342 |                 // Username
343 |                 username: Alpine.$persist('Username'),
344 |                 pilihUsername: false,
345 |                 setPilihUsername() {
346 |                     this.modal = !this.modal;
347 |                     this.pilihUsername = !this.pilihUsername;
348 |                 },
349 | 
350 |                 // BARANG
351 |                 // List Kategori Barang
352 |                 listKategori: [
353 |                     {
354 |                         index: 0,
355 |                         namaKategori: 'Topi',
356 |                         icon: 'https://img.icons8.com/wired/64/detective-hat.png',
357 |                     },
358 |                     {
359 |                         index: 1,
360 |                         namaKategori: 'Baju',
361 |                         icon: 'https://img.icons8.com/wired/64/t-shirt.png',
362 |                     },
363 |                     {
364 |                         index: 2,
365 |                         namaKategori: 'Celana',
366 |                         icon: 'https://img.icons8.com/wired/64/jeans.png',
367 |                     },
368 |                     {
369 |                         index: 3,
370 |                         namaKategori: 'Alas Kaki',
371 |                         icon: 'https://img.icons8.com/wired/64/flip-flops.png',
372 |                     },
373 |                     {
374 |                         index: 4,
375 |                         namaKategori: 'Pakaian Lainnya',
376 |                         icon: 'https://img.icons8.com/wired/64/hanger.png',
377 |                     },
378 |                     {
379 |                         index: 5,
380 |                         namaKategori: 'Perhiasan',
381 |                         icon: 'https://img.icons8.com/wired/64/diamond-ring.png',
382 |                     },
383 |                     {
384 |                         index: 6,
385 |                         namaKategori: 'Kecantikan',
386 |                         icon: 'https://img.icons8.com/wired/64/barbershop.png',
387 |                     },
388 |                     {
389 |                         index: 7,
390 |                         namaKategori: 'Perabotan',
391 |                         icon: 'https://img.icons8.com/wired/64/wardrobe.png',
392 |                     },
393 |                     {
394 |                         index: 8,
395 |                         namaKategori: 'Kendaraan',
396 |                         icon: 'https://img.icons8.com/wired/64/fiat-500.png',
397 |                     },
398 |                     {
399 |                         index: 9,
400 |                         namaKategori: 'Makanan',
401 |                         icon: 'https://img.icons8.com/wired/64/cupcake.png',
402 |                     },
403 |                     {
404 |                         index: 10,
405 |                         namaKategori: 'Minuman',
406 |                         icon: 'https://img.icons8.com/wired/64/iced-coffee.png',
407 |                     },
408 |                     {
409 |                         index: 11,
410 |                         namaKategori: 'Perkakas',
411 |                         icon: 'https://img.icons8.com/wired/64/hammer.png',
412 |                     },
413 |                     {
414 |                         index: 12,
415 |                         namaKategori: 'Gadget',
416 |                         icon: 'https://img.icons8.com/wired/64/cell-phone.png',
417 |                     }
418 |                 ],
419 |                 // Form Barang
420 |                 namaBarang: '',
421 |                 kategori: '',
422 |                 banyak: '',
423 |                 validasiFormBarang() {
424 |                     if (!this.namaBarang) {
425 |                         alert("Nama Barang harus diisi");
426 |                         return false;
427 |                     }
428 |                     if (!this.banyak || this.banyak == 0) {
429 |                         alert("Banyak harus diisi");
430 |                         return false;
431 |                     }
432 |                     if (!this.kategori) {
433 |                         alert("Kategori harus diisi");
434 |                         return false;
435 |                     }
436 |                     return true;
437 |                 },
438 |                 resetFormBarang() {
439 |                     this.namaBarang = '';
440 |                     this.kategori = '';
441 |                     this.banyak = '';
442 |                 },
443 |                 // Persist Barang
444 |                 barang: Alpine.$persist([]),
445 |                 // Tambah Barang
446 |                 pilihBarang: false,
447 |                 setPilihBarang() {
448 |                     this.modal = !this.modal;
449 |                     this.pilihBarang = !this.pilihBarang;
450 |                 },
451 |                 setBarang() {
452 |                     if (this.validasiFormBarang()) {
453 |                         this.barang.push({
454 |                             id: Date.now(),
455 |                             nama: this.namaBarang,
456 |                             category: this.listKategori[this.kategori],
457 |                             banyak: this.banyak
458 |                         });
459 |                         this.resetFormBarang();
460 |                         this.setPilihBarang();
461 |                     }
462 |                 },
463 |                 // Edit Barang
464 |                 pilihEdit: false,
465 |                 idBarang: '',
466 |                 setPilihEdit(id, index) {
467 |                     if (!this.namaBarang) {
468 |                         this.namaBarang = this.barang.filter(item => item.id == id)[0].nama;
469 |                         this.kategori = this.listKategori.filter((item) => item.namaKategori == this.barang.filter(item => item.id == id)[0].category.namaKategori)[0].index;
470 |                         this.banyak = this.barang.filter(item => item.id == id)[0].banyak;
471 |                         this.idBarang = id;
472 |                     } else {
473 |                         this.resetFormBarang();
474 |                         this.idBarang = '';
475 |                     }
476 |                     this.modal = !this.modal;
477 |                     this.pilihEdit = !this.pilihEdit;
478 |                 },
479 |                 updateBarang() {
480 |                     if (this.validasiFormBarang()) {
481 |                         let index = this.barang.findIndex(item => item.id == this.idBarang);
482 |                         this.barang.splice(index, 1, {
483 |                             id: this.idBarang,
484 |                             nama: this.namaBarang,
485 |                             category: this.listKategori[this.kategori],
486 |                             banyak: this.banyak
487 |                         });
488 |                         this.setPilihEdit();
489 |                     }
490 |                 },
491 |                 // Hapus Barang
492 |                 deleteBarang(id) {
493 |                     if (confirm('Yakin mau hapus barangmu?')) {
494 |                         this.barang = this.barang.filter((item) => item.id != id);
495 |                     }
496 |                 },
497 |                 // Reset Barang
498 |                 resetBarang() {
499 |                     if (confirm('Yakin mau reset barangmu?')) {
500 |                         this.barang = [];
501 |                     }
502 |                 },
503 |                 // Cari Barang
504 |                 keywordCari: '',
505 |                 filteredBarang() {
506 |                     return this.barang.filter((item) => item.nama.startsWith(this.keywordCari));
507 |                 },
508 |                 cariBarang() {
509 |                     console.log(this.barang.filter((item) => item.nama.startsWith(this.keywordCari)));
510 |                 },
511 | 
512 |                 // Development
513 |                 addBarang() {
514 |                     // Pilih Salah Satu
515 |                     // Push 
516 |                     this.barang.push({
517 |                         id: 3,
518 |                         nama: 'Sepatu Aerostreet',
519 |                         category: {
520 |                             namaKategori: 'Alas Kaki',
521 |                             icon: 'https://img.icons8.com/wired/64/flip-flops.png',
522 |                         },
523 |                         banyak: 2
524 |                     });
525 |                     // Assignment
526 |                     this.barang = [
527 |                         {
528 |                             id: 1,
529 |                             nama: 'Celana Formal',
530 |                             category: {
531 |                                 namaKategori: 'Celana',
532 |                                 icon: 'https://img.icons8.com/wired/64/jeans.png',
533 |                             },
534 |                             banyak: 1
535 |                         },
536 |                         {
537 |                             id: 2,
538 |                             nama: 'Baju Batik',
539 |                             category: {
540 |                                 namaKategori: 'Baju',
541 |                                 icon: 'https://img.icons8.com/wired/64/t-shirt.png',
542 |                             },
543 |                             banyak: 10
544 |                         }
545 |                     ];
546 |                 },
547 |             })
548 |         })
549 |     </script>
550 | </body>
551 | 
552 | </html>


--------------------------------------------------------------------------------