Senin, 07 Maret 2011

MEMBUAT FORM PEMESANAN BERBASIS JAVASCRIPT (TUGAS PRAKTIKUM)

Diposting oleh Lella Andriia Fiinata ^^ di 01.59 0 komentar
SINTKSNYA SEBAGAI BERIKUT :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title> Tugas Praktikum "WARUNG MAK NIA"</title>

</head>

<body>

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

<!--

function hitungPesan(){

var nota = document.form2;

var hargaBaksoIstimewa = 12000 * eval(nota.qBakso.value);

var hargaSotoSpecial = 10000 * eval(nota.qSoto.value);

var hargaMieAyamSuper = 15000 * eval(nota.qMie.value);

var hargaEsDegan = 5000 * eval(nota.qDegan.value);

var hargaEsCampur = 7000 * eval(nota.qCampur.value);

var jumlahTotal = hargaBaksoIstimewa + hargaSotoSpecial + hargaMieAyamSuper + hargaEsDegan + hargaEsCampur;

if (jumlahTotal > 50000){

    nota.Total.value = jumlahTotal;

    nota.Diskon.value = 10000;

    nota.Bayar.value = jumlahTotal - eval(nota.Diskon.value);

 } else {

    nota.Total.value = jumlahTotal;

    nota.Diskon.value = 0;

    nota.Bayar.value = jumlahTotal - eval(nota.Diskon.value);

 }

}

function resetForm(){

document.form2.reset();

}

//-->

</script>
<center>
<h3>FORM PEMESANAN BERBASIS JAVASCRIPT</h3>

<form name="form2" action="#">

<table border="2px">

<tr>

            <tr bgcolor="red"><th>No</th>
           
    <th>Makanan/Minuman</th>

    <th>Harga</th>

    <th>Pesan</th>

</tr>

<tr>

    <td width="15px">1</td>

    <td width="200px">Bakso Istimewa</td>

    <td width="85px" bgcolor="yellow">&#64; <input type="text" name="Bakso Istimewa" value="12000" size="6" disabled="true"/></td>

    <td width="150px"><input type="text" name="qBakso" value="0" onChange="hitungPesan()"/></td>

</tr>

<tr>

    <td>2</td>

    <td>Soto Special</td>

    <td bgcolor="red">&#64; <input type="text" name="Soto Special" value="10000" size="6" disabled="true"/></td>

    <td><input type="text" name="qSoto" value="0" onChange="hitungPesan()"/></td>

</tr>

<tr>

    <td>3</td>

    <td>Mie Ayam Super</td>

    <td bgcolor="yellow">&#64; <input type="text" name="mie" value="15000" size="6" disabled="true"/></td>

    <td><input type="text" name="qMie" value="0" onChange="hitungPesan()"/></td>

</tr>

<tr>

    <td>4</td>

    <td>Es Degan</td>

    <td bgcolor="red">&#64; <input type="text" name="degan" value="7000" size="6" disabled="true"/></td>

    <td><input type="text" name="qDegan" value="0" onChange="hitungPesan()"/></td>

</tr>

<tr>

    <td>5</td>

    <td>Es Campur</td>

    <td bgcolor="yellow">&#64; <input type="text" name="campur" value="7000" size="6" disabled="true"/></td>

    <td><input type="text" name="qCampur" value="0" onChange="hitungPesan()"/></td>

</tr>

<tr bgcolor="red">

    <td colspan="3" align="right">Jumlah Harga Total</td>

    <td><input type="text" name="Total" disabled="true" /></td>

</tr>

<tr bgcolor="yellow">

    <td colspan="3" align="right">Diskon</td>

    <td><input type="text" name="Diskon" disabled="true" /></td>

</tr>

<tr bgcolor="red">

    <td colspan="3" align="right">Jumlah Yang Harus Dibayar</td>

    <td><input type="text" name="Bayar" disabled="true" align="right"/></td>

</tr>

</table><br/>

<input type="button" value="BATAL" onClick="resetForm()" />

</form>
</body>
</html>

MEMBUAT KALKULATOR SEDERHANA DENGAN MENGGUNAKAN JAVASCRIPT

Diposting oleh Lella Andriia Fiinata ^^ di 01.48 0 komentar


SINTAKSNYA SEBAGAI BERIKUT :


<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Kalkulator Sederhana</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
function hitung(){
var myForm = document.form1;
var a=eval(myForm.a.value);
var b=eval(myForm.b.value);
var pil= myForm.opt.value;
if (pil == "penjumlahan") {
    var c = a + b;
 }else if (pil == "pengurangan") {
    var c = a - b;
 } else if (pil == "perkalian") {
    var c = a * b;
 } else if (pil == "pembagian") {
    var c = a / b;
 }
 myForm.hasil.value = c;
}
function resetForm(){
document.form1.reset();
}

//-->
</script>
<center>
<font size= ”5"> KALKULATOR SEDERHANA LELA </font>
<br>
<br>

<form name="form1" action="#">
<input type="text" name="a" />
<select name="opt">
 <option value="penjumlahan"> + </option>
 <option value="pengurangan"> - </option>
 <option value="perkalian"> * </option>
 <option value="pembagian"> / </option>
</select>
<input type="text" name="b" />
<input type="button" value="=" onClick="hitung()" />
<input type="text" name="hasil" disabled="true" /> <br/>
<p>
<input type="button" value="CLEAR" onClick="resetForm()" />

</form>
</body>
</html>

Senin, 28 Februari 2011

TUGAS PRAKTIKUM MODUL 5

Diposting oleh Lella Andriia Fiinata ^^ di 07.04 0 komentar



SINTAS CSS nya :
#wrapper {
margin: auto;
width: 850px;
border: px #5e9711 solid;
}

header,nav,section,footer{
display:block;
border:1px solid pink;
}

#header {
height: 110px;
border-bottom: red solid;
border-top: red solid;
background-color:pink;
}

nav{
height:40px;
background-color:red;
}

ul{
margin: 0;
padding: 0;
list-style: none;
}
ul li {
position:relative;
float:left;
width: 100px;
}
li ul{
position: absolute;
top: 30px;
display: none;
}
ul li{
display: block;
text-decoration: none;
line-height: 20px;
color:#000;
font-weight: bold;
padding: 5px;
background-color:pink;
margin: 0 2px;
}
ul li a:haver {background: #66F;}
li:hover ul,li.over ul {display:block;}


#top_menu {
float:right;
width:100%;
font-size:80%; color: #fff;
border: 0px solid red;
}


#top_menu a { color: #fff; }


#header_h {
float:left;
padding: 0px 0;
width:100%;
border:0px solid red; }


#htop_right {
float:right;
padding-top: 35px;
padding-right: 2px;
width:300px;
height: 5px;
text-align: right; }


#h_logo {
float:left; margin:0px 5px 5px 30px; height:30px;
}


#h_font{float:left; padding:0px 10px; height:30px; margin:5px 0px; font:30px 'Verdana'; font-weight: bold;}


#inner {
float: left;
margin: 0 0;
}


#top{
float: left;
height: 80px;
width: 617px;
background:url(top1.jpg)left;
}

#content {
float: left;
width: 400px;
height: 300px;
}

section{
height:600px;
}

#article{
float:left;
margin: 10px;
border:2px dashed green;
}


#arside{
float:right;
margin: 10px;
width: 570px;
height: 580px;
border:2px dashed green;
}
sidebar {
float: right;
width: 580px;
height: 100px;
border: 2px  solid pink;
background-color:red;
font : 100%; color :red;
}


#footer {
clear: both;
height: 50px;
font: center;
border-bottom: 2px solid pink;
background-color:red;
}


}


SINTAKS UNTUK HTML NYA :


<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Tugas Praktikum</title>
<link rel="stylesheet" href= "tugaspraktikum.css" type=text/css />
</head>

<body>


<div id="wrapper">
<div id="header">


<div id="top_menu">

</div>


<div id="header_h">


<div id="h_logo">


<img src="uu.png" border ="0" alt="um" />
</div>


<div id="h_font">

<font color="red"> <font face = "PAPYRUS"> LELA'S HOME PAGE</br>



</div>


<div id="htop_right">


<form action="" method="get">


Search <input type="text" name="q" size="20" value=""/>


</form>


</div>


</div>


</div>


<div id="inner">


<div id="sidebar">


<div id="leftmenu">


<ul>


<nav>
<ul id="nav">
<li><a href="">HOME</a></li>
<li><a href="">MY PROFILE</a>
<ul>
<li><a href="">EDIT PROFILE</a></li>
<li><a href="">UPLOAD</a></li>
</ul>
</li>
<li><a href="">MOVIE</a>
<ul>
<li><a href="">HOROR</a></li>
<li><a href="">ACTION</a></li>
<li><a href="">ROMANTIC</a></li>
<li><a href="">COMEDY</a></li>
</ul>
</li>

<li><a href="">MUSIC</a>
<ul>
<li><a href="">POP</a></li>
<li><a href="">ROCK</a></li>
<li><a href="">JAZZ</a></li>
<li><a href="">DANGDUT</a></li>
<li><a href="">KERONCONG</a></li>
</ul>
</li>

<li><a href="">STORY</a>
<ul>
<li><a href="">LOVE STORY</a></li>
<li><a href="">SAD STORY</a></li>
<li><a href="">FUN STORY</a></li>
</ul>
</li>
</ul>

<li><a href="">DOWNLOAD</a></li>
</nav>


</ul>

</div>

</div>

<section>
  <div id="article">
    <img src = "aku.jpg" height = "575" width="227"/>
   
    </div>
    <div id="left">
    </div>
   
  <div id="arside">
    <font color="red"> <h1 align="center"><font face = "Palatino Linotype"> Fall For You </br><h1/>
    <br>The best thing about tonight’s that we’re not fighting
    <br>Could it be that we have been this way before
    <br>I know you don’t think that I am trying
    <br>I know you’re wearing thin down to the core
    <p>
    <br>But hold your breathe
    <br>Because tonight will be the night
    <br>That I will fall for you
    <br>Over again
    <br>Don’t make me change my mind
    <br>Or I won’t live to see another day
    <br>I swear it’s true,
    <br>Because a girl like you is impossible to find
    <br>You’re impossible to find

    </div>
</section>

<sidebar>

EVENT :
<u1>
<li style="font-color:red">
<a href="#">HOME</a></li>
<li><a href="#">DOWNLOAD MUSIK</a></li>
<li><a href="#">DOWNLOAD MOVIE</a></li>
</u1>
</sidebar>


<div id="footer" align="center">
<font color="pink"> <h1> LELA ANDRIA FINATA / S1 PENDIDIKAN TEKNIK INFORMATIKA - 2009 </h1></font>
</div>

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

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

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

</div>
</div>


</body>
</html>

STUDI KASUS 2 MODUL 4

Diposting oleh Lella Andriia Fiinata ^^ di 05.45 0 komentar




SINTAKS CSS NYA :


#wrapper {
margin: auto;
width: 750px;
border: 1px solid green;
}

#header {
height: 80px;
border: 1px solid green;
}
#nav {
height: 20px;
border: 1px solid blue;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid red;
}

#sidebar {
float: left;
margin-right: 20px;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 20px;
width: 150px;
height: 350px;
border: 1px dashed red;
}

#content {
float: left;
margin-right: 20px;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 20px;
width: 400px;
height: 350px;
border: 1px dashed black;
}
#footer {
clear: both;
height: 20px;
border: 1px solid green;
}

SINTAKS HTML NYA :


<html>
<head>
<title>DESAIN LAYOUT SEDERHANA STUDIKASUS1</title>
<link rel="stylesheet" href="studikasus1.css" type="text/css" />
</head>

<body>
<header>
HEADER
</header>

<nav>

<ul id="nav">
<li><a href="">HOME</a></li>
<li><a href="">PROFILE</a>
<ul>
<li><a href="">EDIT PROFILE</a></li>
<li><a href="">PROGRAMING</a></li>
</ul>
</li>

<li><a href="">UPLOAD</a>
<ul>
<li><a href="">PHOTO</a></li>
<li><a href="">VIDEO</a></li>
<li><a href="">ARTICLE</a></li>
</ul>
</li>

<li><a href="">SETTING</a>
<ul>
<li><a href="">PENGATURAN ACOUNT</a></li>
<li><a href="">PENGATURAN PRIVASI</a></li>

</ul>
</li>
</ul>
</nav>

<section>
  <div id="article">
    <div>ARCTICLE
    </div>
  </div>
  <div id="arside">
    ARSIDE
    </div>
    <p>SECTION
    </p>
</section>

<footer>
FOOTER
</footer>

</body>
</html>

STUDI KASUS MODUL 4

Diposting oleh Lella Andriia Fiinata ^^ di 05.39 0 komentar

SINTAKS CSS nya :

@charset "utf-8";
/* CSS Document */
body{
margin: 10px auto;
width:752px;
}

header,nav,section,footer{
display:block;
border:1px solid blue;
}
header{
height:80px;
}


nav{
height:30px;
}

ul{
margin: 0;
padding: 0;
list-style: none;
}
ul li {
position:relative;
float:left;
width: 100px;
}
li ul{
position: absolute;
top: 30px;
display: none;
}
ul li{
display: block;
text-decoration: none;
line-height: 20px;
color: #000;
padding: 5px;
background-color:red;
margin: 0 2px;
}
ul li a:haver {background: #66F;}
li:hover ul,li.over ul {display:block;}

section{
height:370px;
}

#article{
float:left;
margin: 10px;
width: 200px;
height: 300px;
border:1px dashed green;
}
#arside{
float:right;
margin: 10px;
width: 500px;
height: 300px;
border:1px dashed green;

}

footer{
clear:both;
height:20px;
}




SINTAKS HTML NYA :

<!DOCTYPE html>
<html lang="en">

<head>
    <title> STUDI KASUS MODUL 4</title>
    <link rel="stylesheet" href="yourstyle.css" type="text/css" />
    </head>
    <body>
   
    <div id="wrapper">
    <div id="header">
    HEADER
    </div>
    <div id="nav">
    NAV
    </div>
   
    <div id="inner">
    <div id="sidebar">
    ARTICLE
    </div>
    <div id="content">
    ASIDE
    </div>
    SECTION
    </div>
   
    <div id="footer">
    FOOTER
    </div>
    </div>
    </body>
    </html>

Senin, 14 Februari 2011

tugas rumah modul 3

Diposting oleh Lella Andriia Fiinata ^^ di 06.54 0 komentar
sintaks untuk tugas rumah ini dapat di lihat di bawah ::

<!DOCTYPE html>
<html lang="en">

<head>
<title>Selamat Datang di face-mu - Masuk, ...</title>
<link rel="shortcut icon" href="icon.png">
<style type="text/css">
<!--
.box1 {
float: right;
padding: 5px;
height: 100px;
}
.box2 {
float: right;
padding: 5px;
height: 100px;
}
#header{
height: 80px;
background:darkblue;
}
#logo{
float: left;
padding-left: 100px;
padding-top: 20px;
}

.box3 {
}



-->
</style>
</head>

<div id="logo">
<img src="logofm.jpg">
</div>

<body background="1.jpg"


<form>
<div id="header">
<div class="box2">
<br><input type="button" value="masuk">
<br>
</div>

<div class="box1">
Password <br><input type="text" size="25">
<br>Lupa kata sandi anda?
</div>

<div class="box1">
Email <br><input type="text" size="25">
<br><input type="checkbox">Biarkan saya tetap masuk
</div>
</div>

<div class="box3">
<img src="bg.jpg" width='1300' height='500'>


</div>

<div class="plm fbIndexMap">
<div class="plm plm title fsl fwb fcb">selamat datang di facemu</div>
<div class="mtl map"></div></div></div><div class="signupForm rfloat">
<div class="mbm phm headerTextContainer"><div class="mbs mbs mainTitle fsl fwb fcb">mendaftar</div>
<div class="mbm mbm subtitle fsm fwn fcg">Gratis, sampai kapanpun<div></div><div id="registration_container"><div><noscript>
<div id="no_js_box"><h2>Javascript pada browser Anda tidak diaktifkan.</h2><p>Aktifkan JavaScript pada perambah Anda atau tingkatkan ke perambah mampu-Javascript untuk mendaftar ke Facemu.</p></div></noscript><div id="simple_registration_container" class="simple_registration_container"><div id="reg_box"><form method="post" id="reg" name="reg" onsubmit="return function(event)&#123;return false;&#125;.call(this,event)!==false &amp;&amp; Event.__inlineSubmit(this,event)"><input type="hidden" autocomplete="off" name="post_form_id" value="7d96db666d0a02a3db371d5c4bf24753" /><input type="hidden" name="lsd" value="EjWaw" autocomplete="off" /><input type="hidden" autocomplete="off" id="reg_instance" name="reg_instance" value="5AdRTXtF20NzwoQwD1Nfr5LD" />
<input type="hidden" autocomplete="off" id="locale" name="locale" value="id_ID" /><input type="hidden" autocomplete="off" id="terms" name="terms" value="on" /><input type="hidden" autocomplete="off" id="abtest_registration_group" name="abtest_registration_group" value="1" /><input type="hidden" autocomplete="off" id="referrer" name="referrer" value="" /><input type="hidden" autocomplete="off" id="md5pass" name="md5pass" value="" /><input type="hidden" autocomplete="off" id="validate_mx_records" name="validate_mx_records" value="1" /><input type="hidden" autocomplete="off" id="ab_test_data" name="ab_test_data" value="" /><div id="reg_form_box" class="large_form"><table class="uiGrid editor" cellspacing="0" cellpadding="1"><tbody><tr><td class="label"><label for="firstname">Nama Depan:</label></td><td><div class="field_container">
<input type="text" class="inputtext" id="firstname" name="firstname" /></div></td></tr><tr><td class="label"><label for="lastname">Nama Belakang:</label></td><td><div class="field_container"><input type="text" class="inputtext" id="lastname" name="lastname" /></div></td></tr><tr><td class="label"><label for="reg_email__">Email Anda:</label></td><td><div class="field_container"><input type="text" class="inputtext" id="reg_email__" name="reg_email__" /></div></td></tr><tr><td class="label"><label for="reg_email_confirmation__">Masukkan Ulang Email:</label></td><td><div class="field_container"><input type="text" class="inputtext" id="reg_email_confirmation__" name="reg_email_confirmation__" /></div></td></tr><tr><td class="label"><label for="reg_passwd__">Kata sandi Baru:</label></td><td><div class="field_container"><input type="password" class="inputtext" id="reg_passwd__" name="reg_passwd__" value="" /></div></td></tr><tr><td class="label">Saya seorang:</td><td><div class="field_container"><div class="hidden_elem"><select><option></option><option></option></select><select><option></option><option></option></select></div><select class="select" name="sex" id="sex"><option value="0">Pilih Jenis kelamin:</option><option value="1">Perempuan</option><option value="2">Laki-laki</option></select></div></td></tr><tr><td class="label">Tanggal Lahir:</td><td><div class="field_container"> <select name="birthday_day" id="birthday_day"  onchange="bagofholding" autocomplete="off"><option value="-1">Tanggal:</option><option value="1">1</option>

</form>
</body>
</html>



hasil printscreennya ::

STUDI KASUS MODUL 3

Diposting oleh Lella Andriia Fiinata ^^ di 01.14 0 komentar

SCRIPT STUDI KASUS MODUL 3


<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Rounded Border Modul 3</title>
<style type="text/css">
<!--

.lingkaran2{
width:150px;
height:150px;
border: 2px solid brown;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
background:#897048;
text-align:center;
font-size:18px;
color:#fff
}
.text-lingkaran{
padding-top: 100px;
}

.round2 {
-moz-border-radius-bottomright: 25px 25px;
border-bottom-right-radius: 25px 25px;
-moz-border-radius-topleft: 25px 25px;
border-top-left-radius: 25px 25px;
border: 4px solid green;
padding: 10px;
width: 270px;
height: 30;
}

.round3 {
border: 2px solid #897048;
padding: 10px;
}
.shadow {
width: 300px;
box-shadow: 5px 5px 7px #222;
-moz-box-shadow: 5px 5px 7px #222;
-webkit-box-shadow: 5px 5px 7px #222;
}

-->
</style>
</head>
<body>

<p>
<div class="lingkaran2">
<span class="text-lingkaran">
<br> ini </br> border </br> Lingkaran!!
</span>
</div>

<br />
<div class="round2">
Buat kreasi border seperti ini juga bisa lho^^</br>
Cekidot
</div>
<br/>

<div class="shadow">
<p class="round3">Efek Shadow
</div>
<br/>
</body>
</html>



Langganan: Postingan (Atom)
 

♥ Semua Tentang Kita ♥ Copyright © 2011 Design by Ipietoon Blogger Template | web hosting