Senin, 14 Maret 2011

UTS WEB

1. Script php

< !DOCTYPE html >
< html lang="en" >
< head >
< title > Tugas UTS WEB < /title >
< /head >
< body >
< dr >
< h1 > =:Sign Up Form:= < /h1 >
< FORM ACTION=" < ?php $_SERVER['PHP_SELF'];? > " METHOD="POST" >
Nama : < br > < dd > < input type="text" size="25" name="nama"
value=" < ?php
echo isset($_POST['nama']) ? $_POST['nama'] : '';
? > "
/ > < br > < /dd >
< dd >
< ?php
$nama = $_POST["nama"];
if (isset($nama)){
if (empty($nama)){
echo 'data Nama masih kosong';}
else
echo '';}
? > < /dd >
Email: < br > < dd > < input type="text" size="25" name="email"
value=" < ?php
echo isset($_POST['email']) ? $_POST['email'] : '';
? > "
/ > < br > < /dd >
< dd >
< ?php
$email = $_POST["email"];
if (isset($email)){
if (empty($email)){
echo 'data Email masih kosong';}
else
echo '';}
? > < /dd >
Alamat: < br > < dd > < input type="text" size="25" name="alamat"
value=" < ?php
echo isset($_POST['alamat']) ? $_POST['alamat'] : '';
? > "
/ > < br > < /dd >
< dd >
< ?php
$alamat = $_POST["alamat"];
if (isset($alamat)){
if (empty($alamat)){
echo 'data Alamat masih kosong';}
else
echo '';}
? > < /dd >
Kota: < br > < dd > < input type="text" size="25" name="kota"
value=" < ?php
echo isset($_POST['kota']) ? $_POST['kota'] : '';
? > "
/ > < br > < /dd >
< dd >
< ?php
$kota = $_POST["kota"];
if (isset($kota)){
if (empty($kota)){
echo 'data Kota masih kosong';}
else
echo '';}
? > < /dd >
Kode Pos: < br > < dd > < input type="text" size="25" name="kode"
value=" < ?php
echo isset($_POST['kode']) ? $_POST['kode'] : '';
? > "
/ > < br > < /dd >
< dd >
< ?php
$kode = $_POST["kode"];
if (isset($kode)){
if (empty($kode)){
echo 'data Kode Pos masih kosong';}
else
echo '';}
? > < /dd >
< br > < dd > < input type="submit" value="Process" / > < /dd > < /dr >
< ?php
if ((isset($_POST['nama'])) && (isset($_POST['email'])) && (isset($_POST['alamat'])) && (isset($_POST['kota'])) && (isset($_POST['kode'])))
{echo ' < br > Data Anda : ';
echo ' < br > Nama : ' . $_POST['nama'];
echo ' < br > Email : ' . $_POST['email'];
echo ' < br > Alamat : ' . $_POST['alamat'];
echo ' < br > Kota : ' . $_POST['kota'];
echo ' < br > Kode Pos : ' . $_POST['kode'];}
? >
< /form >
< /body >
< /html >


2. printscreen sebelum data dimasukkan




3. printscreen setelah data dimasukkan

Rabu, 02 Maret 2011

tugas praktikum form pemesanan modul 5

1. script html

< !DOCTYPE html >
< html lang="en" >
< html >
< head >
< title > Form Pemesanan < /title >
< /head >
< body >
< script language="JavaScript" type="text/javascript" >
< !--
function itung(){
var tagihan = document.pesan;
var hrgbakso = 12000 * tagihan.harga1.value;
var hrgsoto = 10000 * tagihan.harga2.value;
var hrgmie = 15000 * tagihan.harga3.value;
var hrgdegan = 5000 * tagihan.harga4.value;
var hrgcampur = 7000 * tagihan.harga5.value;
var jumtotal = hrgbakso + hrgsoto + hrgmie + hrgdegan + hrgcampur;
if (jumtotal > 100000){
tagihan.total.value = jumtotal;
tagihan.diskon.value = 20/100*jumtotal;
tagihan.bayar.value = jumtotal - (tagihan.diskon.value);}
else if (jumtotal > 50000 && jumtotal < 100000){
tagihan.total.value = jumtotal;
tagihan.diskon.value = 10/100*jumtotal;
tagihan.bayar.value = jumtotal - (tagihan.diskon.value);}
else {
tagihan.total.value = jumtotal;
tagihan.diskon.value = 0;
tagihan.bayar.value = jumtotal - (tagihan.diskon.value);}
}
function del(){
document.pesan.reset();}
//-- >
< /script >
< h3 > Form Pemesanan Berbasis JavaScript < /h3 >
< form name="pesan" action="#" >
< table border="2px" >
< tr bgcolor="white" >
< th > No < /th >
< th > Makanan/Minuman < /th >
< th > Harga < /th >
< th > Pesan < /th >
< /tr >
< tr >
< td width="15px" > 1 < /td >
< td width="150px" > Bakso Istimewa < /td >
< td width="90px" > @ < input type="text" name="bakso" value="12000" size="6" readonly > < /td >
< td width="100px" > < input type="text" name="harga1" value="0" onChange="itung()"/ > < /td >
< /tr >
< tr >
< td > 2 < /td >
< td > Soto Spesial < /td >
< td > @ < input type="text" name="soto" value="10000" size="6" readonly > < /td >
< td > < input type="text" name="harga2" value="0" onChange="itung()"/ > < /td >
< /tr >
< tr >
< td > 3 < /td >
< td > Mie Ayam Super < /td >
< td > @ < input type="text" name="mie" value="15000" size="6" readonly > < /td >
< td > < input type="text" name="harga3" value="0" onChange="itung()"/ > < /td >
< /tr >
< tr >
< td > 4 < /td >
< td > Es Degan < /td >
< td > @ < input type="text" name="degan" value="5000" size="6" readonly > < /td >
< td > < input type="text" name="harga4" value="0" onChange="itung()"/ > < /td >
< /tr >
< tr >
< td > 5 < /td >
< td > Es Campur < /td >
< td > @ < input type="text" name="campur" value="7000" size="6" readonly > < /td >
< td > < input type="text" name="harga5" value="0" onChange="itung()"/ > < /td >
< /tr >
< tr bgcolor="white" >
< td colspan="3" align="right" > Jumlah Total < /td >
< td > < input type="text" name="total" readonly > < /td >
< /tr >
< tr bgcolor="white" >
< td colspan="3" align="right" > Diskon < /td >
< td > < input type="text" name="diskon" readonly > < /td >
< /tr >
< tr bgcolor="white" >
< td colspan="3" align="right" > Jumlah Dibayar < /td >
< td > < input type="text" name="bayar" readonly align="right"/ > < /td >
< /tr >
< /table > < br/ >
< input type="button" value="BATAL" onClick="del()" / >
< /form >
< /body >
< /html >

2. printscreen

a. saat perhitungan



b. setelah di reset

studi kasus kalkulator modul 5

1. javascript

function itung(){
var operasi = document.kalkulator;
var bil1 = parseInt(operasi.bil1.value);
var bil2 = parseInt(operasi.bil2.value);
var ope = operasi.ope.value;
var hasil;
if(ope == "tambah"){
hasil = bil1 + bil2;}
else if(ope == "kurang"){
hasil = bil1 - bil2;}
else if(ope == "kali"){
hasil = bil1 * bil2;}
else{
hasil = bil1 / bil2;}
operasi.hasil.value = hasil;
}

2. script html

< !DOCTYPE html >
< html lang="en" >
< head >
< title > Tugas Buat Kalkulator < /title >
< script language="JavaScript" type="text/javascript" src="itungan.js" > < /script >
< /head >
< body bgcolor="brown" >
< h3 > < font color="Yellow" > Kalkulator Sederhana < /font > < /h3 >
< form name="kalkulator" action="#" >
< input type="text" size="5" name="bil1" >
< select name="ope" >
< option value="tambah" > + < /option >
< option value="kurang" > - < /option >
< option value="kali" > * < /option >
< option value="bagi" > / < /option >
< /select >
< input type="text" size="5" name="bil2" >
< input type="button" value="=" onclick="itung()"/ >
< input type="text" size="10" name="hasil" readonly >
< /form >
< /body >
< /html >

3. printscreen

Selasa, 22 Februari 2011

tugas rumah modul 4

1. Script html

< !DOCTYPE html >
< html lang="en" >
< head >
< title > Tugas Rumah < /title >
< link rel="stylesheet" href="stylerumah.css" type= "text/css" / >
< /head >
< body >
< header >
< div id="gambaratas" > < /div >
< div id="teksatas" > < /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="community" >
< a href="community.html" > Community < /a > < /div >
< div id="guide" >
< a href="Guide.html" > Guide < /a > < /div >
< div id="theworld" >
< a href="theworld.html" > The World < /a > < /div >
< div id="news" >
< a href="news.html" > News < /a > < /div >
< /nav >
< section >
< div id="tengah" >
< article >
< /article >
< aside > < p > Dragonica (Dragon Saga Online di AS) adalah tindakan 3D sisi-bergulir MMORPG (massively multiplayer online role-playing game) yang dikembangkan oleh Barunson Interaktif. Development has been ongoing since March 2006. [ 1 ] Operation of Dragonica is relegated to different publishers for their respective regions. Pembangunan telah berlangsung sejak Maret 2006. [1] Pengoperasian Dragonica adalah diturunkan ke penerbit yang berbeda untuk daerah masing-masing. It is a free-to-play game which includes a cash shop that allows for unique customization of player's characters. [ 3 ] The game has been in Open Beta across Europe since June 10, 2009 [ 4 ] , has implemented the Kundara Content Update during August 2009 [ 5 ] and has announced that the "Tales of the Damned" expansion will be introduced during October 2009 [ 6 ] . Ini adalah free-to-play game yang termasuk toko kas yang memungkinkan penyesuaian unik's karakter pemain. [3] Permainan telah Open Beta di Eropa sejak 10 Juni 2009 [4] , telah menerapkan Konten Kundara Update pada Agustus 2009 [5] dan telah mengumumkan bahwa "Tales of the Damned" ekspansi akan diperkenalkan selama Oktober 2009 [6] . The North American Open Beta Test began on August 18, 2009. [ 7 ] Characters created during the Open Beta Test will carry over to the commercial release. [ 8 ] Amerika Utara Open Beta Test dimulai pada tanggal 18 Agustus 2009. [7] Karakter diciptakan selama Open Beta Test akan terbawa ke rilis komersial. [8]
< /aside >
< /div >
< div id="event" >
< b > EVENT < /b >
< font face=arial black color=#33cccc >
< ul >
< li > < b > < a href="puisi.html" > Puisi Vallentine Dragonica < /a > < /b >
< li > < b > < a href="imlek.html" > Event Imlek < /a > < /b >
< li > < b > < a href="masq.html" > Event Masquerade < /a > < /b >
< /ul >
< /font >
< /div >
< /section >
< footer >
< div id="bawah" >
< a href="news.html" > News < /a > | < a href="theworld.html" > The World < /a > | < a href="Guide.html" > Guide < /a > | < a href="community.html" > Community < /a > | < a href="download.html" > Downloads < /a >
< /div >
< /footer >
< /body >
< /html >


2. css

body {
margin: 10px auto;
width: 1300px;
}
header{
height:120px;
border: green;
background-image:url(gambar7.png);
background-repeat: repeat-x;}
#gambaratas{
float:left;
width:100px;
height:80px;
background-image:url(gambar5.png);
background-position:center center;
background-repeat:no-repeat;
margin-left:75px;
margin-top:20px;
}
#teksatas{
float:left;
width:500px;
height:120px;
background-image:url(gambar8.png);
margin-left:20px;
}
nav {
height:35px;
border: 1px solid green;
background-color:#ffff66;
}
#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;
}
#news {
float:right;
width:100px;
height:25px;
margin-right:500px;
border:1px solid brown;
margin:2px;
text-align:center;
background-color:#993300;
}
#theworld {
float:right;
width:100px;
height:25px;
margin-right:500px;
border:1px solid brown;
margin:2px;
text-align:center;
background-color:#993300;
}
#guide {
float:right;
width:100px;
height:25px;
margin-right:500px;
border:1px solid brown;
margin:2px;
text-align:center;
background-color:#993300;
}
#community{
float:right;
width:80px;
height:25px;
margin-right:500px;
border:1px solid brown;
margin:2px;
text-align:center;
background-color:#993300;
}
#download{
float:right;
width:100px;
height:25px;
margin-right:500px;
border:1px solid brown;
margin:2px;
text-align:center;
background-color:#993300;
}
#tengah {
width:1300px;}
section {
height:558px;
border: 1px solid green;
}
article {
float:left;
border: 1px solid red;
width:300px;
height:550px;
background-image:url(gambar4.jpg);
background-position:center center;
background-repeat:no-repeat;
border:4px solid black;
}
aside {
height:413px;
width:950px;
float:left;
margin-left:5px;
}
#event {
height:145px;
width:988px;
float:right;
border: 1px solid brown;
background-color:#ffff66;
}
footer{
height:30px;
border:1px solid blue;
padding-left:450px;
background-image:url(gambar6.png)
}
#bawah {
float:left;
width:500px;
height:20px;
font-weight:bold;
margin:2px;
text-align:center;
}


3. hasil printscreen

studi kasus modul 4

1. script html

< !DOCTYPE html >
< html lang="en" >
< head >
< title > desain layout html 5 < /title >
< link rel="stylesheet" href="stylestudi.css" type= "text/css" / >
< /head >
< body >
< header >
header < /header >
< nav >
nav < /nav >
< section >
< div id="tengah" >
< article >
article < /article >
< aside >
aside < /aside > section
< /div >
< /section >
< footer >
footer < /footer >
< /body >
< /html >

2. css

body {
margin: 25px auto;
width: 1300px;}
header{
height:100px;
border: 1px solid green;}
nav {
height:35px;
border: 1px solid blue;}
#tengah{
width:1300px;}
section {
height:450px;
border: 1px solid red;}
article {
margin-top:20px;
margin-left:20px;
float:left;
border: 1px dashed red;
width:950px;
height:400px}
aside {
height:400px;
width:275px;
float:right;
border: 1px dashed black;
margin-right:20px;
margin-top:20px;}
footer{
height:20px;
border:1px solid green;}

3. hasil printscreen

Selasa, 15 Februari 2011

modul 3 : tugas rumah

1. Script :

html :

< !DOCTYPE html >
< html lang="en" >
< head >
< title > FeisBugh < /title >
< link rel="stylesheet" href="style.css" type="text/css" / >
< link rel="icon" href="Fb.png" type="image/x-icon" / >
< div id="atas" >
< div id="feisbugh" >
< font color="white" face="Bradley Hand ITC" size=10 > < b > FeisBugh < /font > < /b >
< /div >
< div id="isikanan" >
< font color="white" face="Bradley Hand ITC" size=3 >
< table >
< tr >
< td > < u > Email : < /td > < /u >
< td > < u > Password : < /td > < /u >
< /tr >
< tr >
< td > < input type="text" maxlength=25 > < /td >
< td > < input type="password" maxlength=25 > < /td >
< td > < input id="button" type="button" maxlength=10 value="Let's Go" > < /td >
< /tr >
< tr >
< td > < input type="checkbox" checked > Keep inside < /td >
< td > Forgot ur Pass < /td >
< /tr >
< /table >
< /font >
< /div >
< /div >
< /head >
< body >
< div id="tengah" >
< /div >
< div id="bawah" >
< font color="white" face="Bradley Hand ITC" size=4 >
FeisBugh ™ 2011 Hendi Eko Ginanjar Home Industries
< /font >
< /div >
< /body >
< /html >

css :

#atas{
height:100px;
background-color:#cc66ff;}
#feisbugh{
float:left;
height:80px;
width:200px;
padding-left:80px;
padding-top:20px;
}
#isikanan{
padding-top:20px;
padding-right:100px;
float:right;
}
#button{
background-color:#ffffff;
color:#cc66ff;
}
#tengah{
height:540px;
}
#bawah{
padding-left:10px;
padding-top:10px;
height:30px;
background-color:#cc66ff;}


2. printscreen

modul 3 : studi kasus

1. Script

< !DOCTYPE html >
< html lang="en" >
< head >
< title > Studi Kasus < /title >
< style type="text/css" >
< !--
.box1 {
padding: 50px;
width: 225px;
height: 225px;
background: aqua;
border: 10px double blue;
-moz-border-radius: 250px;
}
#content{
width: 100px;
height: 100px;
}
.box2 {
padding: 10px;
width: 500px;
height: 100px;
background: pink;
border: 5px dashed purple;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
text-align: center;
}
.box3 {
padding: 10px;
width: 500px;
height: 100px;
background: white;
border: 5px solid black;
-moz-box-shadow: 10px 10px 10px rgba(0,0,0,2);
text-align: center;
}
-- >
< /style >
< /head >
< body >
< div class="box1" align="center" >
< p id="isi" >
saya bingung mau nulis apa, tapi di dalam lingkaran ini tulisannya harus banyak supaya nanti hasilnya bagus, kalo tulisannya sedikit nanti hasilnya jelek,
lebih baik dikasih tulisann yang banyak biar tampak penuh dan indah dan rapi dan sehat dan teratur. hehe .
< /p >
< /div >
< br >
< br >
< div class="box2" > < font color="red" >
saya bingung mau nulis apa, tapi di dalam kue lapis ini tulisannya harus banyak supaya nanti hasilnya bagus, kalo tulisannya sedikit nanti hasilnya jelek,
lebih baik dikasih tulisann yang banyak biar tampak penuh dan indah dan rapi dan sehat dan teratur. hehe .
< /font >
< /div >
< br >
< br >
< div class="box3" > < font color="brown" >
saya bingung mau nulis apa, tapi di dalam kotak ini tulisannya harus banyak supaya nanti hasilnya bagus, kalo tulisannya sedikit nanti hasilnya jelek,
lebih baik dikasih tulisann yang banyak biar tampak penuh dan indah dan rapi dan sehat dan teratur. hehe .
< br >
< /div >
< /body >
< /html >


2. Printscreen