Aplikasi Kontak dengan Javascript dan Localstorage Mudah dan Cepat

Share:
Aplikasi Kontak dengan Javascript dan Localstorage Mudah dan Cepat

Dalam era digital ini, mengelola kontak dengan cara yang efisien menjadi kebutuhan penting bagi banyak orang. Apakah Anda pernah berpikir untuk membuat aplikasi kontak sendiri? Dengan menggunakan JavaScript dan LocalStorage, Anda dapat membuat aplikasi kontak sederhana namun fungsional yang dapat menyimpan, menampilkan, dan menghapus informasi kontak dengan mudah. LocalStorage memungkinkan data disimpan secara lokal di peramban pengguna tanpa memerlukan basis data eksternal, membuatnya ideal untuk aplikasi kecil atau prototipe. Pada tutorial ini, kita akan belajar langkah demi langkah cara membuat aplikasi kontak dengan menggunakan JavaScript dan LocalStorage. 


Source Code Aplikasi Kontak

1. Buat folder baru dengan nama kontak.
2. Buat file baru dengan nama index.html lalu copy dan paste script di bawah ini


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Contact</title> <!-- import bootstrap css --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <!-- css untuk datatable --> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.datatables.net/2.1.4/css/dataTables.bootstrap5.css" rel="stylesheet"> </head> <body> <div class="container mt-4"> <div class="card"> <div class="card-header"> <h4>Daftar Kontak</h4> </div> <div class="card-body"> <a href="add.html" class="btn btn-primary btn-sm mb-3"> Tambah Kontak </a> <table id="myTable" class="table table-striped"> <thead> <tr> <th>#</th> <th>Nama</th> <th>Email</th> <th>Telepon</th> <th>Alamat</th> <th>Aksi</th> </tr> </thead> <tbody id="contactList"></tbody> </table> </div> </div> </div> <!-- javascript untuk datatable --> <script src="https://code.jquery.com/jquery-3.7.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.datatables.net/2.1.4/js/dataTables.js"></script> <script src="https://cdn.datatables.net/2.1.4/js/dataTables.bootstrap5.js"></script> <script> //ambil elemen html yang memiliki id contactList let contactList = document.getElementById('contactList'); //ambil data dari local storage, nama keynya adalah contacts //contacts bisa kita anggap sebagai databasenya let contacts = JSON.parse(localStorage.getItem('contacts')) || []; //buat fungsi untuk perulangan data contacts function getContacts() { //kosongkan variabel contactList contactList.innerHTML = '' //lakukan perulangan dari data contacts contacts.forEach((contact, index) => { const row = ` <tr> <td>${index + 1}</td> <td>${contact.name}</td> <td>${contact.email}</td> <td>${contact.phone}</td> <td>${contact.address}</td> <td> <a href="edit.html?index=${index}" class="btn btn-warning">edit</a> <button onclick="deleteContact(${index})" class="btn btn-danger">Hapus</button> </td> </tr> ` //tambahkan variabel row ke contactList //untuk menampilkan tabel contactList.innerHTML += row; }); //kita perlu menginisialisasi datatable disini $('#myTable').DataTable(); } //fungsi untuk menghapus data function deleteContact(index) { contacts.splice(index, 1); localStorage.setItem('contacts', JSON.stringify(contacts)) getContacts(); } //jalankan fungsi getContacts pertama kali //saat dokumen selesai dimuat document.addEventListener('DOMContentLoaded', function () { getContacts(); }) </script> </body> </html>

3. Buat file baru dengan nama add.html lalu copy dan paste script di bawah ini.


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Add New Contact</title> <!-- import bootstrap css --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body> <div class="container mt-4"> <div class="card"> <div class="card-header"> <h4>Add New Contact</h4> </div> <div class="card-body"> <form id="contactForm"> <div class="form-group mt-4"> <label for="name">Nama</label> <input type="text" class="form-control" id="name" placeholder="Nama" required> </div> <div class="form-group mt-4"> <label for="email">Email</label> <input type="email" class="form-control" id="email" placeholder="Email" required> </div> <div class="form-group mt-4"> <label for="phone">Phone</label> <input type="text" class="form-control" id="phone" placeholder="Phone" required> </div> <div class="form-group mt-4"> <label for="address">Address</label> <textarea id="address" class="form-control" required placeholder="Alamat"></textarea> </div> <button type="submit" class="btn btn-primary">Simpan</button> <a href="index.html" class="btn btn-danger">Kembali</a> </form> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function(){ //mengambil elemen form const form = document.getElementById('contactForm'); //aksi saat tombol simpan diklik form.addEventListener('submit', function(e){ //mencegah form direload e.preventDefault(); //mengambil data dari form yang diisi const name = document.getElementById('name').value; const email = document.getElementById('email').value; const phone = document.getElementById('phone').value; const address = document.getElementById('address').value; //mengambil data dari local storage const contacts = JSON.parse(localStorage.getItem('contacts')) || []; //menyimpan data ke local storage contacts.push({name, email, phone, address}); localStorage.setItem('contacts', JSON.stringify(contacts)); //kembali ke halaman index window.location.href = 'index.html' }) }) </script> </body> </html>

4. Buat file baru dengan nama edit.html lalu copy dan paste script di bawah ini.


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Edit Contact</title> <!-- import bootstrap css --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body> <div class="container mt-4"> <div class="card"> <div class="card-header"> <h4>Edit Contact</h4> </div> <div class="card-body"> <form id="editcontactForm"> <input type="hidden" id="editindex"> <div class="form-group mt-4"> <label for="name">Nama</label> <input type="text" class="form-control" id="editname" placeholder="Nama" required> </div> <div class="form-group mt-4"> <label for="email">Email</label> <input type="email" class="form-control" id="editemail" placeholder="Email" required> </div> <div class="form-group mt-4"> <label for="phone">Phone</label> <input type="text" class="form-control" id="editphone" placeholder="Phone" required> </div> <div class="form-group mt-4"> <label for="address">Address</label> <textarea id="editaddress" class="form-control" required placeholder="Alamat"></textarea> </div> <button type="submit" class="btn btn-primary">Simpan</button> <a href="index.html" class="btn btn-danger">Kembali</a> </form> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function(){ const form = document.getElementById('editcontactForm'); const urlParams = new URLSearchParams(window.location.search); const index = urlParams.get('index'); const contacts = JSON.parse(localStorage.getItem('contacts')) || []; //ini berfungsi untuk mengisi data ke dalam form saat tombol edit diklik dari index.html if(index !== null){ const contact = contacts[index]; document.getElementById('editname').value = contact.name; document.getElementById('editemail').value = contact.email; document.getElementById('editphone').value = contact.phone; document.getElementById('editaddress').value = contact.address; document.getElementById('editindex').value = index; } //dibawah ini adalah aksi jika tombol simpan diklik form.addEventListener('submit', function(e){ //mencegah form direload e.preventDefault(); //mengambil data dari form yang diinput const name = document.getElementById('editname').value const email = document.getElementById('editemail').value const phone = document.getElementById('editphone').value const address = document.getElementById('editaddress').value //menyimpan data ke localstorage contacts[index] = { name, email, phone, address }; localStorage.setItem('contacts', JSON.stringify(contacts)); //kembali ke halaman index.html window.location.href = 'index.html' }) }) </script> </body> </html>


Hasil Akhir





Sekarang Anda telah berhasil membuat aplikasi kontak sederhana menggunakan JavaScript dan LocalStorage! Dengan pengetahuan ini, Anda bisa memperluas aplikasi Anda lebih jauh, misalnya dengan menambahkan fitur pencarian, pengeditan kontak, atau bahkan integrasi dengan API eksternal untuk sinkronisasi data. LocalStorage menawarkan cara yang mudah dan cepat untuk menyimpan data di sisi klien, yang menjadikannya pilihan ideal untuk aplikasi yang tidak memerlukan penyimpanan data yang kompleks. Terus eksplorasi dan kembangkan kemampuan Anda dalam membangun aplikasi web, karena selalu ada ruang untuk inovasi dan kreativitas. Selamat mencoba!

No comments

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

Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi