[Belajar JS] Aplikasi Sederhana dengan Javascript

Halo programmer masa depan? masih dalam seri Belajar Javascript. Kali ini kita akan membuat aplikasi pendataan barang dengan memanfaatkan fungsi dan array dalam javascript.

Oke langsung saja. Kita buat dulu file html sebagai berikut ini

<!DOCTYPE html>
<html>
<head>
	<title>Penerapan Fungsi</title>
</head>
<body>
	<h2>Aplikasi Pendataan Barang</h2>

	<fieldset>
		<label>Masukan Nama Barang</label>
		<input type="text" id="nama">
		<button onclick="AddData();">Simpan</button> 
	</fieldset>

	<ul id="list-barang">
		
	</ul>

	<script type="text/javascript" src="fungsi.js"></script>

</body>
</html>

Diatas saya membuat form untuk input nama barang dengan coding <input type=”text” id=”nama”> dimana form input tersebut memiliki ID, demikian pula untuk <ul id=”list-barang”> ada ID list-barang yang nantinya digunakan untuk tempat data.

Kemudian pada coding <button onclick=”AddData();”>Simpan</button> ada inline javascript untuk memanggil fungsi AddData() untuk menambah data dalam array.

Selanjutnya kita buat file fungsi.js dengan coding sebagai berikut

var barang = ['pensil', 'buku', 'penggaris'];

// menampilkan data
function ShowData() {
	var listBarang=document.getElementById('list-barang');

	listBarang.innerHTML = '';

	for (var i=0; i<barang.length; i++) {
		var linkHapus='<a href="#" onclick="DelData('+i+')">Hapus</a>';
		listBarang.innerHTML+='<li>'+barang[i]+' '+linkHapus+'</li>';
	};	
}

// menambahkan data
function AddData() {
	var input=document.getElementById('nama');
	//memasukan data ke array
	barang.push(input.value);
	ShowData();
}

// menghapus data
function DelData(id) {
	// menghapus elemen dari indeks array
	barang.splice(id,1);
	ShowData();
}

//menjalankan fungsi tampil data
ShowData();

coding var barang = [‘pensil’, ‘buku’, ‘penggaris’]; adalah pembuatan array untuk menyimpan data.

Pada fungsi ShowData() digunakan untuk menampilkan isi data array barang yang akan ditampilkan pada element html dengan ID list-barang. Pada fungsi tersebut terdapat coding <a href=”#” onclick=”DelData(‘+i+’)”> yang berfungsi untuk memanggil fungsi DelData(i) dimana i adalah index dari element array barang. Fungsi tersebut dipanggil pada baris akhir yang bertujuan untuk saat file dijalankan browser maka fungsi ini otomatis berjalan.

Fungsi AddData() digunakan untuk menambahkan data pada array barang sesuai dengan isi dari element html input dengan ID nama

Fungsi DelData(id) digunakan untuk menghapus data dari list-barang yang dipilih.

Berikut adalah hasilnya