Penyempurnaan Aplikasi Menghitung Luas Pesegipanjang

Jumpa lagi dengan Agus Haryanto dalam seri tutorial pemrogarama web HTML dan Javascript. Pada tutorial sebelumnya, dengan html dan javascript kita telah membuat Aplikasi Hitung Luas Persegi Panjang, tetapi masih banyak kekurangannya, kalau kita perhatikan kekurangannya adalah

– Tampilannya berantakan, bahasa kerennya tidak eye catching.

– Belum ada validasi inputan, harusnya pada panjang dan lebar kita tidak boleh menginputkan selain angka

– Pada saat kita klik Tombol hitung luas harusnya ada warning apabila ada isian panjang atau lebar yang belum diisi.

– Kotak tempat menampilkan hasil perhitungan masih bisa diedit, harusnya tidak bisa diedit

Kita sudah mengetahui kekurangannya, sekarang mari kita mulai mensolusikannya. Untuk itu rubah buka kembali file persegipanjang.html kemudian isi dengan kode berikut

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Menghitung Luas Persegi Panjang</title>
		<style>
			div {border: 1px solid #999; padding:10px; width:300px; background:#e3e3e3}
			label {width:100px; float:left; }
			input {border:1px solid #999; border-radius:6px; margin-bottom:10px;)
		</style>
		<script type="text/javascript">
			function hitungLuas(){
				panjang = document.getElementById("txtPanjang").value;
				lebar = document.getElementById("txtLebar").value;
				if (panjang == ""){
					alert("Panjang Harus diisi !");
					return;
				}else if (lebar == ""){
					alert("Lebar Harus diisi !");
					return;
				}
				if (isNaN(panjang)){
					alert("Panjang Harus diisi dengan angka !");
					return;
				}if (isNaN(lebar)){
					alert("Lebar Harus diisi dengan angka !");
					return;
				}
				Luas = panjang * lebar;
				document.getElementById("txtLuas").value =  Luas;

			}
			function resetForm(){
				document.getElementById("txtPanjang").value="";
				document.getElementById("txtLebar").value="";
				document.getElementById("txtLuas").value="";
			}

		</script>
	</head>
	<body>
		<div>
		<h3>Menghhitung Luas Persegi Panjang</h3>
		<label for="panjang">Panjang </label>: <input type="text" id="txtPanjang" name="txtPanjang"/><br/>
		<label>Lebar </label>: <input type="text" id="txtLebar" name="txtLebar"/><br/>
		<input type="button" id="btnHitung" value="Hitung Luas" onclick="hitungLuas();">&nbsp;<input type="button" id="btnReset" value="Reset" onclick="resetForm();"><br/>
		<label>Luas </label>: <input type="text" readonly="true" id="txtLuas" name="txtLuas"/>
		</div>
	</body>
</html>

Perhatikan kode diatas untuk mempercantik tampilan pada bagian kode htmlnya kita menambahkan tag <div> dan <label>

Kita juga mulai bermain dengan css untuk mengatur dan memperindah tampilan

		<style>
			div {border: 1px solid #999; padding:10px; width:300px; background:#e3e3e3}
			label {width:100px; float:left; }
			input {border:1px solid #999; border-radius:6px; margin-bottom:10px;)
		</style>

Pada bagian javascriptnya kita juga sudah menambahkan validasi inputan panjang dan lebar

				if (panjang == ""){
					alert("Panjang Harus diisi !");
					return;
				}else if (lebar == ""){
					alert("Lebar Harus diisi !");
					return;
				}
				if (isNaN(panjang)){
					alert("Panjang Harus diisi dengan angka !");
					return;
				}if (isNaN(lebar)){
					alert("Lebar Harus diisi dengan angka !");
					return;
				}

Nilai pada inputan panjang dan lebar akan dicek apakah sudah diisi atau belum jika belum diisi maka akan muncul pesan peringatan agar user mengisi nilainya.

Selain itu untuk memastikan bahwa user menginputkan nilai yang benar, maka apabilea user menginputkan selain angka maka akan muncul juga pesan peringatan bahwa panjang atau lebar harus diisi dengan angka untuk pengecekannya kita manfaatkan fungsi isNaN

Kita juga menambahakan tombol untuk mereset nilai panjang lebar dan luas. Gunanya jika kita ingin menghitung lagi kita tidak perlu mengosongkan secara manual.

Sekarang mari kita coba jalankan dibrowser apakah kode yang baru ini telah menutupi kekurangan-kekurangan pada kode yang lama

Lihat tampilan sudah lebih enak dilihat.

Klik tombol Hitung Luas, karena nilai panjang belum diisi maka akan muncul peringatan.

Isi nilai panjang atau lebar dengan nilai yang selain angka. Lalu klik tombol Hitung Luas, karena nilai lebar diisi dengan selain angka maka akan muncul peringatan “Lebar Harus diisi dengan angka”