Studi Kasus Mod 5


.

Studi Kasus kali ini membuat aplikasi kalkulator sederhana.., cukup membuat saya agak sedikit setresss, karena awalnya button tidak mau jalan., tapi setelah di bantu sedikit oleh my special one (curhat dikit) akhirnya berhasil juga... hahaha
cukup simpel siih... :)
ini hasil nya ::

dan ini script nya ::
<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<title>Studi Kasus</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>
<h4 font size= "5"> KALKULATOR SEDERHANA</font></h4>
<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>
<p>
<input type="button" value="CLEAR" onClick="resetForm()" />
</form>
</body>
</html>

Tugas Praktikum Mod 5


.

Tugas kali ini berhubungan dengan java script, di bawah ini merupakan aplikasi pemesanan makana/minuman, dengan spesifikasi Field Harga, Jumlah total, Diskon dan Jumlah Bayar bersifat Read only, dsb..!! Bisa dilihat dalam Modul nya.. :)

ini hasil nya ::
Dan ini script nya ::

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

<html>
<head>
<title> Tugas Praktikum </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>WARUNG "ANDA"</h3>
<form name="form2" action="#">
<table border="2px">

<tr>
<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"><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> <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> <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><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><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="purple">
<td colspan="3" align="right">Jumlah Harga Total</td>
<td><input type="text" name="Total" disabled="true" /></td>
</tr>
<tr bgcolor="purple">
<td colspan="3" align="right">Diskon</td>
<td><input type="text" name="Diskon" disabled="true" /></td>
</tr>
<tr bgcolor="blue">
<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="RESET" onClick="resetForm()" />

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

Tugas Praktikum Modul 4


.

//tugas.css

body {
margin: 10px auto;
width: 1300px;
}
header{
height:100px;
border: red;
background-image:url(Avril lavigne.jpg);
background-repeat: repeat-x;}
#gambaratas{
float:left;
width:141px;
height:80px;
background-image:url(logo UM.jpg);
background-position:left left;
background-repeat:no-repeat;
margin-left:40px;
margin-top:20px;
}
#teksatas{
padding: 20px;
font-family : Forte;
font-weight: bold;
font-size : 72px;
}
nav {
height:35px;
border: 1px solid green;
background-color:#b34fed;
}
#search {
float:left;
width:60px;
height:25px;
margin-top:3px;
margin-left:80px;
}

#formsearch {
float:left;
margin-left:2px;
width:140px;
height:25px;
margin-top:3px;
}
#home {
float:right;
width:100px;
height:25px;
margin-right:500px;
border:1px solid brown;
margin:2px;
text-align:center;
background-color:#e569c9;
}
#article {
float:right;
width:100px;
height:25px;
margin-right:500px;
border:1px solid brown;
margin:2px;
text-align:center;
background-color:#e569c9;
}
#galery {
float:right;
width:100px;
height:25px;
margin-right:500px;
border:1px solid brown;
margin:2px;
text-align:center;
background-color:#e569c9;
}
#group{
float:right;
width:80px;
height:25px;
margin-right:500px;
border:1px solid brown;
margin:2px;
text-align:center;
background-color:#e569c9;
}
#download{
float:right;
width:100px;
height:25px;
margin-right:500px;
border:1px solid brown;
margin:2px;
text-align:center;
background-color:#e569c9;
}
#tengah {
width:1300px;}
section {
height:500px;
border: 1px solid green;
background-color:#9995e5;
}
article {
float:left;
border: 1px solid red;
width:300px;
height:500px;
background-image:url(Avril lavigne.jpg);
background-position:left left;
background-repeat:no-repeat;
border:4px solid black;
}
aside {
height:400px;
width:950px;
float:left;
margin-left:5px;
}
#agenda {
height:100px;
width:988px;
float:right;
border: 1px solid brown;
background-color:#bf75ea;
}
footer{
height:30px;
border:1px solid blue;
padding-left:450px;
background-image:url(gb2.jpg)
}
#bawah {
float:left;
width:500px;
height:20px;
font-weight:bold;
margin:2px;
text-align:center;
}

//tugas.html<!DOCTYPE html>
<html lang="en">
<head>
<title>Tugas Praktikum</title>
<link rel="stylesheet" href="tugas.css" type= "text/css" />
</head>
<body>
<header>
<div id="gambaratas"></div>
<div id="teksatas">
<Font color = "purple" align = "center" face= "Forte"> Avril Lavigne</font>
</div>
</header>
<nav>
<div id="search">Search</div>
<div id="formsearch"><input type="text" maxlength=80></div>
<div id="download">
<a href="download.html">Download</a></div>
<div id="group">
<a href="group.html">Group</a></div>
<div id="galery">
<a href="galery.html">Galery</a></div>
<div id="article">
<a href="article.html">Article</a></div>
<div id="home">
<a href="home.html">Home</a></div>
</nav>
<section>
<div id="tengah">
<article>
</article>
<aside><p>Avril Ramona Lavigne Whibley;
lahir di Kanada, 27 September 1984 umur 26 tahun; atau lebih dikenal dengan nama Avril Lavigne;
adalah seorang penyanyi pop-punk, musisi, dan aktris asal Kanada;
Pada tahun 2006, Majalah Bisnis Kanada memposisikannya dalam posisi ke-7 wanita Kanada paling mengagumkan di Hollywood, dan pada tahun 2007 dia memenangkan 9 nominasi Jabra Music Contest untuk kategori Best Band In The World;
berdasarkan pilihan penggemar diseluruh dunia;
Hingga kini, Lavigne telah merilis 3 buah album studio;
yaitu Let Go (2002) yang terjual lebih dari 19 juta diseluruh dunia dengan 9 juta di US;
Under My Skin (2004) yang terjual lebih dari 12 juta diseluruh dunia dan 4 juta di US;
dan The Best Damn Thing (2007) yang terjual lebih dari 9 juta dan 2,5 juta di US;
Lavigne juga telah memproduksi tujuh singel internasional,;
 diantaranya adalah "Complicated", "Sk8er Boi", "I'm with You", "Don't Tell Me", "My Happy Ending", "Girlfriend", dan "When You're Gone";
Lavigne pun mengisi soundtrack untuk film Alice in Wonderland dengan lagu yang berjudul "Alice";
Ia telah menjual rekaman album dan singelnya sebanyak kurang lebih 45 juta diseluruh dunia
</aside>
</div>
<div id="agenda">
<b> Other</b>
<font face=arial black color=#33cccc>
<ul>
<li><b><a href="avril.html">avril new album</a></b>
<li><b><a href="calvin.html">calvin profile</a></b>
<li><b><a href="shinee.html">Shinee lyrics</a></b>
</ul>
</font>
</div>
</section>
<footer>
<div id="bawah">
<a href="home.html">Home</a> | <a href="article.html">Article</a> | <a href="galery.html">Galery</a> | <a href="groub.html">group</a> | <a href="download.html">Downloads</a>
</div>
</footer>
</body>
</html>

Studi Kasus


.


//kasus.css

body {
margin: 10px auto;
width: 750px;
}
header,nav,section,article,aside,footer{
display:block;
}

header{
border: 1px solid purple;
height:80px;
}
nav{
border:1px solid blue;
height:50px;
padding:10px;
}
section{
padding:20px;
border:1px solid red;
height:370px;
}
article{
height:100%;
width: 73%;
float:left;
border:2px dashed red;
height:100%;
}
aside{
height:100%;
width: 23%;
float:right;
border:2px dashed blue;
height: 100%;
}

footer{
border:1px solid green;
clear:both;
height:30px;
}

//kasus.html
<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<title>Galoch - Kreasi layout</title> 
<link rel="stylesheet" href="kasus.css" type="text/css"/> 
</head> 
<body> 
<header> 
header 
</header> 
<nav> 
nav
</nav> 
<section>
<article>
article
</article>
<aside>
aside
</aside>
section
</section> 
<footer> 
footer 
</footer> 
</body> 
</html> 

studi kasus modul 3


.








scriptnya ::


<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Rounded Border</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 contoh </br> border </br> Lingkaran ^_^
</span>
</div>

<br />
<div class="round2">
ini juga gaya border yang lain dan linenya diberi warna hijau
</div>
<br/>

<div class="shadow">
<p class="round3">ini border persegi dengan menggunakan efek shadow
</div>
<br/>
</body>
</html>

tugas rumah modul 3


.





untuk scriptnya :


<!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="123.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>
<img src="facebook-650.jpg" align="center">
<div class="plm fbIndexMap">
<div class="plm plm title fsl fwb fcb">Welcome Back too Face-mu have fun</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>

STUDI KASUS MODUL 2


.

Di bawah ini merupakan sintaks untuk studi kasus modul 2
sintaks:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml: lang ="en">

<head>
    <title> Study Kasus Modul 2 galoch </title>
</head>


<frameset>
<frameset rows="20%,*,20%">
<frame src="demo link2.html"name="top" id="top" />
<frameset cols="20%,*,20%">
<frame src="link1.html" name="left" id="left" />
<frame src="link internal.html" name="main" id="main" />

<frame src="link1.html" name="right" id="right" />
</frameset>
<frame src="demo link2.html" name="bottom" id="bottom" />



</frameset>

</html>

hasil print screen :