Aplikasi Basis Web Menghitung Luas Pesegipanjang

Untuk tutorial pertama ini, kita akan membahas memabuat aplikasi sederhana menghitung luas persegi panjang dengan javascript.

Sebelum melangkah lebih jauh, tentu ada yang bertanya kenapa sih kita perlu mempelajari javascript ?

Jika anda ingin menjadi seorang web developer professional, anda harus menguasai javascript.

Memanganya apa yang dapat kita buat dengan javascript ?

kita dapat membuat menu yang cantik di web
kita bisa membuat gambar dengan javascript
kita bisa membuat chart atau grafik
Dengan lahirnya HTML 5 kita dapat membuat aplikasi yang dapat menyimpan data pada database.
Kita bisa juga loh buat game dengan javascript
Kita bisa membuat Sistem Informasi Geografi, dengan memanfaatkan Googlemap.
Kita bisa membuat Aplikasi Mobile juga loh
Kalau anda suka berkunjung ke detik.com atau kompas.com tentu mengalami munculnya iklan yang langsung muncul dan anda harus mengclosenya. Nah kita juga bisa buat itu dengan javascript

Manfaat diatas adalah manfaat dari sisi teknis, kita sering melupakan manfaat dari sisi non teknis. Hayoo coba tanyakan dalam diri kita masing-masing manfaat non teknis apa yang bisa kita dapat.

ini jawaban versi saya

Menambah rasa kepercayaan diri
Membahagiakan orang tua
Dapat membantu orang lain
Dapat menghasilkan uang
Dapat memperbanyak teman
Dapat menjadi terkenal
Dan masih ada beberapa yang belum saya sebutkan

Wah kalau gini aku semangat deh belajarnya

Untuk itu tambah semangat lagi khusus untuk topik javascript boleh mengusulkan materi-materi apa saja yang diusulkan untuk dijadikan tutorial. Insya Allah saya akan usahakan untuk menulis tutorialnya.

Ayo semangaaaatttt. dari pada waktu dihabiskan untuk hal-hal yang sia-sia, lebih baik kita gunakan untuk hal yang bermanfaat untuk kehidupan kita.

Jika kita membayangkan tahun depan jadi seorang web developer handal. apakah itu dapat terwujud dengan santai-santai dan banyak buang waktu ?

Yang tidak kalah penting, kita juga perlu memahami DOM (Document Obect Model). Dengan memahami DOM akan memudahkan kita mengatur object-object pada dokumen HTML.

Dalam Pikiran kita, apa bila kita ingin membuat Aplikasi menghitung luas persegi panjang tentunya kita harus menyediakan kotak teks untuk menginputkan nilai panjang dan lebar dan kotak teks untuk menampilkan luasnya.

Sekarang mari kita mulai pembuatan aplikasinya. Untuk Editornya anda bisa menggunakan Teks Editor apa saja. Pada tutorial ini saya menggunakan Editor yang memang khsusus untuk mendevelop aplikasi web.

<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>

Simpan kode di atas dengan nama persegipanjang.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”