Web CRUD Javascript dengan LocalStorage Tanpa Setup Backend dan Database

Share:
Web CRUD Javascript dengan LocalStorage Tanpa Setup Backend dan Database
Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara membuat aplikasi CRUD sederhana dengan menggunakan localStorage pada browser chrome. Penasaran?, ayo ikuti selengkapnya di bawah ini.



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
    
    //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.
    
//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.
CRUD LocalStorage
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.

2 comments:

  1. untuk local storage ini kapasitasnya berapa?

    ReplyDelete
    Replies
    1. 5 MB, tapi itu sudah cukup untuk penyimpanan teks dan digunakan sendiri

      Delete

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik