Sebelumnya, saya sudah menulis artikel tentang pembahasan localStorage di link berikut ini https://www.sahretech.com/2022/04/pengertian-localstorage-cara.html, di artikel tersebut dibahas pengertian, fungsi, batasan dan cara menggunakannya. Tapi saya yakin masih banyak yang bingung bagaimana mengimplentasikannya ke dalam bentuk aplikasi CRUD.
Salah satu alasannya mungkin karena mekanisme manipulasi data di localStorage berbeda dengan DBMS lain seperti MySQL atau MongoDB. Apalagi localStorage hanya memiliki 5 perintah saja dan tidak memiliki perintah seperti update. Alasan lain mungkin karena masih banyak dari kita belum familiar dengan bahasa javascript.
LocalStorage sangat cocok digunakan oleh programmer front-end yang ingin belajar pemrograman tanpa harus mengerti server, back-end, dan database. Hal ini bisa kalian manfaatkan untuk membuat aplikasi catatan, aplikasi kontak, atau konfigurasi web.
| Baca Artikel Lain ✨ |
| 📰 1. Cara Paling Mudah Membuat Login Google di Flutter read more |
| 📰 2. CRUD Flutter + PHP + MySQL Part 2, Membuat Mobile App read more |
|
📰 3. Membuat Aplikasi CRUD dengan Flutter dan SQFlite read more |
Membuat Web CRUD Javascript dengan LocalStorage Tanpa Setup Backend dan Database
Ok, pada kesempatan kal ini kita akan membuat aplikasi kontak sederhana, terdapat form di sebelah kiri dan tabel list kontak di sebelah kanan. Kita hanya menggunakan satu form saja yang berfungsi untuk menambah atau mengedit data. Untuk melihat hasil akhirnya, kalian bisa langsung scroll ke bagian paling bawah artikel ini.1. Buatlah sebuah folder baru dengan nama crud_local_storage. Lalu buatlah sebuah file baru dengan nama index.html. Ikuti scriptnya di bawah ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="Description" content="Enter your description here" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
</head>
<body>
<div class="container mt-4">
<div class="row">
<div class="col-lg-12">
<h1 class="alert alert-primary text-center">
CRUD Practice With Javascript and Localstorage
</h1>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-body">
<form id="form">
<input type="hidden" name="id" id="id">
<label for="">Name</label>
<input type="text" placeholder="Name" class="form-control" name="name" id="name" required>
<br>
<label for="">Age</label>
<input type="number" placeholder="Age" class="form-control" name="age" id="age" required>
<br>
<label for="">Address</label>
<textarea name="address" placeholder="Address" id="address" cols="30" rows="5" required class="form-control"></textarea>
<br>
<label for="">Phone</label>
<input type="text" placeholder="Phone" class="form-control" id="phone" name="phone" required>
<br>
<button class="btn btn-sm btn-primary" type="button" onclick="save()">Save</button>
<button class="btn btn-sm btn-primary" type="button" onclick="clearData()">Reset</button>
</form>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table id="datatable" class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Phone</th>
<th>Edit</th>
<th>Hapus</th>
</tr>
</thead>
<tbody id="table">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
<script src="all_data.js"></script>
<script src="save.js"></script>
<script src="find.js"></script>
<script src="remove.js"></script>
<script>
allData()
</script>
<script>
function clearData(){
document.getElementById('form').reset()
document.getElementById('id').value = ""
}
</script>
</body>
</html>
2. Buatlah sebuah file baru dengan nama all_data.js. File ini berfungsi
untuk mengambil data dari localStorage dan menampilkannya ke tabel. Ikuti
scriptnya di bawah ini
3. Buatlah sebuah file baru dengan nama save.js. File ini berfungsi untuk menyimpan data baru atau mengupdate data yang sudah ada. Ikuti Scriptnya di bawah ini.
Semua step sudah kita lalui, jika ada permasalahan dicoba untuk copas script yang ada di atas. Sekarang saatnya kita melakukan uji coba. Silahkan jalankan dan jika berhasil maka hasilnya tampak seperti di bawah ini.
Nah, sekarang kalian sudah bisa memanfaatkan localStorage untuk menyimpan data secara local. Kalian bisa melakukan improvisasi dengan membuat aplikasi lain seperti note app, atau todolist, atau aplikasi lain yang tidak begitu berat tapi sangat produktif untuk kalian.
Sekian tutorial kali ini tentang cara Membuat Web CRUD Javascript dengan localStorage tanpa setup backend dan database. Semoga bermanfaat, Jika ada pertanyaan silahkan tanya di bawah atau langsung tanya di fanspage sahretech. Sekian dan terima kasih.
//method to get all data
function allData(){
table.innerHTML = ``
//get data from localstorage and store to contaclist array
//we must to use JSON.parse, because data as string, we need convert to array
contactList = JSON.parse(localStorage.getItem('listItem')) ?? []
//looping data and show data in table
contactList.forEach(function (value, i){
var table = document.getElementById('table')
table.innerHTML += `
<tr>
<td>${i+1}</td>
<td>${value.name}</td>
<td>${value.age}</td>
<td>${value.address}</td>
<td>${value.phone}</td>
<td>
<button class="btn btn-sm btn-success" onclick="find(${value.id})">
<i class="fa fa-edit"></i>
</button>
</td>
<td>
<button class="btn btn-sm btn-danger" onclick="removeData(${value.id})">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>`
})
}
3. Buatlah sebuah file baru dengan nama save.js. File ini berfungsi untuk menyimpan data baru atau mengupdate data yang sudah ada. Ikuti Scriptnya di bawah ini.
//method to save data into localstorage
function save(){
//get data from localstorage and store to contaclist array
//we must to use JSON.parse, because data as string, we need convert to array
contactList = JSON.parse(localStorage.getItem('listItem')) ?? []
//get last array to get last id
//and store it into variable id
var id
contactList.length != 0 ? contactList.findLast((item) => id = item.id) : id = 0
if(document.getElementById('id').value){
//edit contactlist array based on value
contactList.forEach(value => {
if(document.getElementById('id').value == value.id){
value.name = document.getElementById('name').value,
value.age = document.getElementById('age').value,
value.address = document.getElementById('address').value,
value.phone = document.getElementById('phone').value
}
});
//remove hidden input
document.getElementById('id').value = ''
}else{
//save
//get data from form
var item = {
id : id + 1,
name : document.getElementById('name').value,
age : document.getElementById('age').value,
address : document.getElementById('address').value,
phone : document.getElementById('phone').value
}
//add item data to array contactlist
contactList.push(item)
}
// save array into localstorage
localStorage.setItem('listItem', JSON.stringify(contactList))
//update table list
allData()
//remove form data
document.getElementById('form').reset()
}
4. Buatlah sebuah file baru dengan nama find.js. File ini
berfungsi untuk mengambil data dari localStorage sesuai id yang dipilih,
lalu data akan ditampilkan pada form. Ikuti scriptnya di bawah ini.
5. Buatlah sebuah file baru dengan nama remove.js. File ini berfungsi untuk menghapus data array lalu menyimpannya kembali ke localStorage. Ikuti scriptnya di bawah ini.
//method to get detail personal data based on id
function find(id){
//get data from localstorage and store to contaclist array
//we must to use JSON.parse, because data as string, we need convert to array
contactList = JSON.parse(localStorage.getItem('listItem')) ?? []
contactList.forEach(function (value){
if(value.id == id){
document.getElementById('id').value = value.id
document.getElementById('name').value = value.name
document.getElementById('age').value = value.age
document.getElementById('address').value = value.address
document.getElementById('phone').value = value.phone
}
})
}
5. Buatlah sebuah file baru dengan nama remove.js. File ini berfungsi untuk menghapus data array lalu menyimpannya kembali ke localStorage. Ikuti scriptnya di bawah ini.
function removeData(id){
//get data from localstorage and store to contaclist array
//we must to use JSON.parse, because data as string, we need convert to array
contactList = JSON.parse(localStorage.getItem('listItem')) ?? []
contactList = contactList.filter(function(value){
return value.id != id;
});
// save array into localstorage
localStorage.setItem('listItem', JSON.stringify(contactList))
//get data again
allData()
}
Semua step sudah kita lalui, jika ada permasalahan dicoba untuk copas script yang ada di atas. Sekarang saatnya kita melakukan uji coba. Silahkan jalankan dan jika berhasil maka hasilnya tampak seperti di bawah ini.
|
| Hasil Akhir LocalStorage |
Nah, sekarang kalian sudah bisa memanfaatkan localStorage untuk menyimpan data secara local. Kalian bisa melakukan improvisasi dengan membuat aplikasi lain seperti note app, atau todolist, atau aplikasi lain yang tidak begitu berat tapi sangat produktif untuk kalian.
Sekian tutorial kali ini tentang cara Membuat Web CRUD Javascript dengan localStorage tanpa setup backend dan database. Semoga bermanfaat, Jika ada pertanyaan silahkan tanya di bawah atau langsung tanya di fanspage sahretech. Sekian dan terima kasih.
untuk local storage ini kapasitasnya berapa?
ReplyDelete5 MB, tapi itu sudah cukup untuk penyimpanan teks dan digunakan sendiri
Delete