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