Senin, 08 Maret 2010

Membuat kalkulator sederhana berbasis web

Kalkulator yang kita buat saat ini memanfaatkan javascript dan DHTML. Yang kita lakukan disini pada DHTML yaitu menggabungkan fungsi HTML, style sheet sebagai box kalkulatornya dan scripting untuk fungsi - fungsi hitungannya. Untuk lebih lengkapnya perhatikan script dibawah ini.


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://WWW.W3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xlmns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>tugas kalkulator sederhana</title>
<style type="text/css">
.box1
{
width: 200px;
height: 300px;
background: #fdfb5c;
border: 1px solid red;
}
</style>

</head>

<body>
<script language="JavaScript" type ="text/javascript">

function tambah()
{
var myForm = document.form;
a=eval(myForm.input1.value)
b=eval(myForm.input2.value)
c=a+b
myForm.samadengan.value=c
}

function kurang()
{
var myForm = document.form;
a=eval(myForm.input1.value)
b=eval(myForm.input2.value)
c=a-b
myForm.samadengan.value=c
}

function kali()
{
var myForm = document.form;
a=eval(myForm.input1.value)
b=eval(myForm.input2.value)
c=a*b
myForm.samadengan.value=c
}

function bagi()
{
var myForm = document.form;
a=eval(myForm.input1.value)
b=eval(myForm.input2.value)
c=a/b
myForm.samadengan.value = c
}

function kosong()
{
var myForm = document.form;
myForm.input1.focus()
myForm.input1.value=""
myForm.input2.value=""
myForm.samadengan.value=""
}


</script>

<div class="box1">
<form name="form">
<center>
<h5>THE SIMPLE CALCULATOR</h5>
</center>
input 1 <input type="text" name="input1"><br>
input 2 <input type="text" name="input2">

<p><center>
<input type="button" value=" + " onclick="tambah()">
<input type="button" value=" - " onclick="kurang()">
<input type="button" value=" X " onclick="kali()">
<input type="button" value=" / " onclick="bagi()"></center></p>

<p>hasil : <input type "text" name="samadengan" disabled="true">
<p><center><input type="button" value="kosong" onclick="kosong()"></center>
<h5><center>By. Anom Langgeng Siswoko
D3.T.Elektronika 07'
407532305050</center></h5>

</form>
</div>

</body>
</html>

simpan script diatas dalam format html, maka tampilan akan seperti dibawah ini

Senin, 01 Maret 2010

Membuat layout sederhana pada web dengan division

Layout yang kita buat saat ini akan memanfaatkan CSS ( Cascading Style Sheet ), bagian ini juga menekankan pada pembuatan desain dengan menggunakan division. Bagaimanapun table tidak disarankan untuk pembuatan layout dan sebagai gantinya adalah dengan memanfaatkan division. Pertama kita buat layoutnya. Lebih lengkapnya ikuti scrip CSS dibawah ini.
#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;
}

#header {
height: 80px;
border: 1px solid blue;
}

#menu_bar {
float: right;
height: 30px;
width: 280px;
margin-top: 10px;
margin-right: 10px;
}

#search {
float: right;
height: 30px;
width: 240px;
margin-right: 20px;
margin-left: 200px;
margin-top: 5px;
}


#logo {
float: left;
height: 60px;
width : 60px;
margin-left: 20px;
margin-top: 10px;
}

#top {
float: right;
height: 80px;
width: 544px;
border: 1px solid blue;
}

#right {
float: right;
height: 180px;
width: 190px;
border: 1px solid red;
}

#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}

#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 412px;
border: 1px solid red;
}

#content {
margin-left: 201px;
margin-right: 200px;
margin-top: 80px;
width: 344px;
height: 330px;
}

#footer {
clear: both;
height: 50px;
border: 1px solid blue;
background: green;
}

simpan file diatas dengan nama mystyle1.css
lalu ketikan scrip html nya dengan scrip dibawah ini.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://WWW.W3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xlmns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>desain layout tugas modul 3</title>
<link rel="stylesheet" href="mystyle1.css" type="text/css"/>


</head>

<body>

<div id="wrapper">
<div id="logo">
</div>

<div id="menu_bar">
</div>

<div id="search">
</div>

<div id="header">
header
</div>

<div id="inner">
<div id="sidebar">
sidebar
</div>

<div id="top">
top
</div>

<div id="right">
right
</div>

<div id="content">
content
</div>
</div>

<div id="footer" align="center">
footer
</div>

</body>
</html>

maka tampilan akan seperti ini



untuk memberikan desain yang menarik ketikan scrip html dibawah ini.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://WWW.W3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xlmns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>desain layout tugas modul 3</title>
<link rel="stylesheet" href="mystyle1.css" type="text/css"/>

<style type="text/css">
<!--
#leftmenu ul {
width: 180px;
list-style-type:none;
padding: 0; margin: 0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;

}
#leftmenu a {
padding: 5px 0px 5px 15px; display:block;
background: #6cae15 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;

}
#leftmenu a:hover {
background : #5e9711 no-repeat left center; color: #ffffff
}
-->
</style>

</head>

<body>

<div id="wrapper">
<div id="logo">
<img src="koala.gif" border="0" />
</div>

<div id="menu_bar">
Home | Site map | RSS | Contact | About us
</div>

<div id="search">
search <input type="text"/>
</div>

<div id="header">
<h2>KOALA ADVERTISING</h2>
</div>

<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News & media</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Tip & triks</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
</div>

<div id="top">
<img src="top.jpg" border="0" />
</div>

<div id="right">
Event
<ul>
<li>lomba pertama</li>
<li>lomba kedua</li>
<li>lomba ketiga</li>
</ul>
</div>

<div id="content">
<h3>Lomba Desain WEB</h3>
<h4>1 Maret 2010 [07:00]</h4>
dalam rangka memperingati hari senin, KOALA ADVERTISING membuat acara yaitu lomba desain web.
</div>
</div>

<div id="footer" align="center">
@ 2010 KOALA ADVERTISING Malang, Indonesia
</div>

</body>
</html>

maka tampilan akan seperti dibawah ini.
untuk background division bisa ditambahkan pada file CSS, contoh :

"background: green;"