About Me

Agus Haryanto,
Android Trainner,
GoogleMaps (JavaScript) Trainer
JQuery and JQuery Mobile Trainer
Java, Java Script and PHP Trainer
Freelance Developer Android
Freelance Developer Blackberry
Freelance Developer Web (GIS Googlemaps)
Freelance Developer SMS Gateway

jika ingin contact saya bisa emali ke agus.superwriter@gmail.com

ym: agus_h23

Pin BB : 2AD38B33

Facebook : Agus Haryanto


Article

Belajar Membuat Aplikasi Web Sederhana Menghitung Luas Persegi Panjang dengan HTML dan Javascript

Jumpa lagi dengan Agus Haryanto dalam seri belajar HTML dan belajar Javascript, pada kesempatan ini, kita akan mulai tutorial penggunaan javascript untuk membuat aplikasi berbasis web.

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

Kebetulan untuk javascript ini adalah salah satu expertise saya (sudah dari tahun 2004 s.d sekarang masih bergaul dengan javascript).

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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
	</head>
	<body>
		Menghhitung Luas Persegi Panjang <br/>
		Panjang : <input type="text" id="txtPanjang" name="txtPanjang"><br/>
		Lebar : <input type="text" id="txtLebar" name="txtLebar"><br/>
		<input type="button" id="btnHitung" value="Hitung Luas"><br/>
		Luas : <input type="text" id="txtLuas" name="txtLuas">
	</body>
</html>

Simpan kode di atas dengan nama persegipanjang.html

Sekarang coba masukkan nilai panjang dan nilai lebar dan panjang lalu klik tombol Hitung Luas

Hasilnya nilai Luas tidak terisi, lho kok bisa ?

Karena memang kita belum menambahkan bagian javascript pada dokumen html  diatas.

Posisi terbaik untuk menambahkan script javascript adalah dibagian head sebelum tag </head>

Sekarang coba masukkan nilai panjang dan nilai lebar dan panjang lalu klik tombol Hitung Luas

Hasilnya nilai Luas tidak terisi, lho kok bisa ?

Karena memang kita belum menambahkan bagian javascript pada dokumen html  diatas.

Posisi terbaik untuk menambahkan script javascript adalah dibagian head sebelum tag </head>

<script type="text/javascript">
			function hitungLuas(){
				panjang = document.getElementById("txtPanjang").value;
				lebar = document.getElementById("txtLebar").value;
				Luas = panjang * lebar;
				document.getElementById("txtLuas").value =  Luas;

			}
		</script>

Pada script diatas kita membuat fungsi  hitungLuas yang apabila dipanggil akan membaca nilai panjang dan nilai lebar yang kita inputkan lalu menghitung luasnya dan menampilkan hasilnya.

Perhatikan document.getElementById peritah ini digunakan untuk memilih object berdasarkan idnya, nah didalam sebuah object itu terdapat attribute yang dapat kita tangkap atau kita rubah nilainya.

document.getElementById(“txtPanjang”).value

ini berarti kita memilih object dengan id=”txtPanjang” dan kita baca nilai valuenya.

document.getElementById(“txtLuas”).value =  Luas

ini berarti kita memilih object dengan id=”txtLuas” dan kita set nilai valuenya = Luas

sebuah fungsi di javascript baru akan dijalankan apabila ada yang memanggilnya, demikian juga dengan fungsi hitungLuas baru akan dieksekusi apabila ada yang memanggilnya. Untuk itu tambahkan event onclick pada tombol Hitung Luas dan panggil fungsi hitungLuas pada event tersebut.

<input type=”button” id=”btnHitung” value=”Hitung Luas” onclick=”hitungLuas();”>

Sekarang untuk kode lengkapnya adalah seperti dibawah ini

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Menghitung Luas Persegi Panjang</title>
		<script type="text/javascript">
			function hitungLuas(){
				panjang = document.getElementById("txtPanjang").value;
				lebar = document.getElementById("txtLebar").value;
				Luas = panjang * lebar;
				document.getElementById("txtLuas").value =  Luas;

			}
		</script>
	</head>
	<body>
		Menghhitung Luas Persegi Panjang<br/>
		Panjang : <input type="text" id="txtPanjang" name="txtPanjang"><br/>
		Lebar : <input type="text" id="txtLebar" name="txtLebar"><br/>
		<input type="button" id="btnHitung" value="Hitung Luas" onclick="hitungLuas();"><br/>
		Luas : <input type="text" id="txtLuas" name="txtLuas">
	</body>
</html>

Sekarang coba kita jalankan lagi pada browser, masukkan nilai panjang =10, dan lebar =5 lalu klik Hitung Luas, maka nilai Luas akan terisi secara otomatis.

Wah ternyata mudah yah, dengan begini, aku bisa Bantu adikku yang masih di sekolah dasar nih. Bisa show up ke orang tua nih bahwa tidak sia-sia mereka mebiayai kuliahku.

Wah jadi semangat nih belajar javascript, baru sedikit saja dah bisa kayka gini J

Tapi jangan puas dulu, kalau untuk konsumsi pribadi dalam artian hanya buat latihan atau dipakai sama adik hasil diatas sudah cukup.

Tetapi apabila kita ingin mensharenya ke orang lain, hasil diatas masihlah jauh dari cukup.

Masih banyak kekurangan pada aplikasi menghitung persegi panjang diatas.

Untuk itu tanyalah pada diri anda apa kekurangannya, atau boleh minta orang lain untuk mencoba aplikasi ini. Dan minta dia untuk memberikan masukkan.

Nah jawaban untuk kekurangan pada pada aplikasi diatas, boleh anda posting di komentar artikel ini.

Sebagai bahan masukkan untuk saya juga untuk menyebutkan kekurangan yang ada pada artikel selanjutnya.

Semoga Bermanfaat

Salam Hangat

Agus Haryanto

Share

29 comments to Belajar Membuat Aplikasi Web Sederhana Menghitung Luas Persegi Panjang dengan HTML dan Javascript

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam protection by WP Captcha-Free