Kalkulator KalBagTamKur

Setelah sekian lama saya tidak melakukan posting blog, sekarang saya akan memulai lagi posting. Di postingan kali ini saya mencoba membahas tentang pembuatan aplikasi untuk hape Nokia seri S40. Untuk membuat aplikasi nya ini tidak terlalu sulit, bahasa pemrograman yang digunakan juga sudah sangatlah familiar. Bahasa yang digunakan adalah HTML dan javascript.

Di tutorial kali ini saya akan membahas tentang cara pembuatan aplikasi kalkulator sederhana yang diberi nama Kalkulator KalBagTamKur yang merupakan kependekan dari kalkulator Kali Bagi Tambah Kurang.

Untuk pembuatan aplikasi ini tidaklah terlalu sulit. Jika kita memiliki sedikit saja pengetahuan tentang HTML dan JavaScript, itu juga sudah cukup. Oke, langsung saja ke pembahasan..

Langkah pertama, siapkan terlebih dahulu Nokia WebTools 1.5. <<Download>>

Langkah kedua, jika sudah didownload, install.

Langkah ketika, jalankan program tersebut.

Langkah keempat, buat project baru. File -> New -> Series 40 Web App.

Kalkulator KalBagTamKur

Langkah kelima, pilih Basic web App Project kemudian klik tombol Next.

Kalkulator KalBagTamKur

Langkah keenam, beri nama projek yang akan Anda buat, lalu klik Next.

Kalkulator KalBagTamKur

Langkah ketujuh, pada kotak dialog ini klik saja Finish.

Kalkulator KalBagTamKur

Setelah ini jendela index.html pun terbuka. Di sini Anda bisa mendesain aplikasi yang akan dibuat. Sekarang ceritanya kita akan membuat aplikasi kalkulator ini. Pada halaman index.html ketikan kode yang akan dipakai sebagai tampilan kalkulatornya. Berikut adalah kode nya:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>andri</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <script language="javascript" type="text/javascript" src="basic.js"></script>
 <link rel="stylesheet" href="basic.css" type="text/css" />
 <meta name="Generator" content="Nokia WDE 3.5.0" />
</head>

<body onload="javascript:init();" bgcolor="gray">
 <div id="sadaya">
 <div id="judul">KALKULATOR<br></br>KalBagTamKur</div>
 <br></br>
 <form name="kalkulator" action="">
 <div>a: <input type="text" name="a" class="kotak" size="2"></input></div>
 <div>b: <input type="text" name="b" class="kotak" size="2"></input></div>
 <br></br>
 <div><input name="hasil" id="hasil"></input></div>
 <input type="button" value="+" onclick="tambah();" class="button"></input>
 &nbsp;
 <input type="button" value="-" onclick="kurang();" class="button"></input>
 <br></br>
 <input type="button" value="*" onclick="kali();" class="button"></input>
 &nbsp;
 <input type="button" value="/" onclick="bagi();" class="button"></input>
 <br></br>
 <input type="button" value="clear" onclick="clear();" id="clear"></input>
 </form>
 </div>
</body>
</html>

Kemudian untuk lebih mempercantik lagi tampilanya, klik 2x pada file “basic.css” dan isikan kode berikut:

/*
 * Add your Stylesheet contents here
 */
 #sadaya{
 margin-left: 5px;
 margin-right: 5px;
 margin-top: 5px;
 padding: 5px;
 background-color: #778899;
 text-align: center;
}

#judul{
 padding:5px;
 text-align: center;
 font-size: 20pt;
 color:#FF00FF;
 font-weight: bold;
 background: url(bg.jpg);
}

.kotak{
 background-color: cyan;
 font-size: 10pt;
 text-align: center;
}

#hasil{
 background-color: lightblue;
 font-size: 10pt;
 text-align: center;
 color: #fff;
 font-weight: bold;
 border: solid black;
}

.button{
 background-color: #FFFACD;
 border: solid 2px black;
 width: 30px;
}

#clear{
 background-color: #FFFACD;
 border: solid 2px black;
 width: 60px;
}
<pre>

Kemudian, di file basic.js masukan kode javascript berikut:

/*
 * JavaScript file
 *
 */

function clear(){
 var form = document.kalkulator;
 form.hasil.value="";
 form.a.value="";
 form.b.value="";
 }

function tambah(){
 var form = document.kalkulator;
 var a = parseFloat(form.a.value);
 var b = parseFloat(form.b.value);
 if((!isNaN(a)) && (!isNaN(b))) {
 var result = a + b;
 form.hasil.value=result;
 }
 }

function kurang(){
 var form = document.kalkulator;
 var a = parseFloat(form.a.value);
 var b = parseFloat(form.b.value);
 if((!isNaN(a)) && (!isNaN(b))) {
 var result = a - b;
 form.hasil.value=result;
 }
 }

function bagi(){
 var form = document.kalkulator;
 var a = parseFloat(form.a.value);
 var b = parseFloat(form.b.value);
 if((!isNaN(a)) && (!isNaN(b))) {
 var result = a / b;
 form.hasil.value=result;
 }
 }

function kali(){
 var form = document.kalkulator;
 var a = parseFloat(form.a.value);
 var b = parseFloat(form.b.value);
 if((!isNaN(a)) && (!isNaN(b))) {
 var result = a * b;
 form.hasil.value=result;
 }
 }

Untuk melihat apakah aplikasi kita ini jalan atau tidak, pada panel project explorer klik kanan pada project yang kita buat lalu klik local preview web app. Maka akan tampil sebuah emulator hape yang juga menjalankan aplikasi kita tadi.

Kalkulator KalBagTamKur

2 thoughts on “Kalkulator KalBagTamKur

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s