-555-: 2011

16.10 | 0 Comments

<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Pemesanan Makanan</title>
<script language="JavaScript" type="text/javascript" src="skrip pesan.js"></script>

</head>
<body>
<font face="calibri">
<div class="title"><h3>Form Pemesanan Berbasis JavaScript</h3></div>
<form name="pemesanan" action="#">
<table border="2">
<tr>
<th>No</th>
<th>Makanan / Minuman</th>
<th>Harga</th>
<th>Pesan</th>
</tr>
<tr>
<td>1.</td>
<td>Bakso Istimewa</td>
<td>@<input type="text" name="hargabakso" value="12000" onchange="proses()" readonly/></td>
<td><input type="text" name="jmlpesanbakso" onchange="proses()"/></td>
</tr>
<tr>
<td>2.</td>
<td>Soto Spesial</td>
<td>@<input type="text" name="hargasoto" value="10000" onchange="proses()"readonly/></td>
<td><input type="text" name="jmlpesansoto" onchange="proses()"/></td>
</tr>
<tr>
<td>3.</td>
<td>Mie Ayam Super</td>
<td>@<input type="text" name="hargami" value="15000" onchange="proses()" readonly/></td>
<td><input type="text" name="jmlpesanmi" onchange="proses()"/></td>
</tr>
<tr>
<td>4.</td>
<td>Es Degan</td>
<td>@<input type="text" name="hargadegan" value="5000" onchange="proses()" readonly/></td>
<td><input type="text" name="jmlpesandegan" onchange="proses()"/></td>
</tr>
<tr>
<td>5.</td>
<td>Es Campur</td>
<td>@<input type="text" name="hargacampur" value="7000" onchange="proses()"readonly/></td>
<td><input type="text" name="jmlpesancampur" onchange="proses()"/></td>
</tr>
<tr>
<td colspan="3" align="right">Jumlah Total</td>
<td><input type="text" name="total" readonly /></td>
</tr>
<tr>
<td colspan="3" align="right">Diskon</td>
<td><input type="text" name="diskon" readonly /></td>
</tr>
<tr>
<td colspan="3" align="right">Jumlah Dibayar</td>
<td><input type="text" name="bayar" readonly /></td>
</tr>
</table>
<br>
<input type="button" name="batal" value="Batal" onclick="reset()"/>
</form>
</font>
</body>
</html>

function totalHarga(){
var harga;
var pesanan;
var total = 0;

for(i = 0; i < 10; i += 2){
harga = parseInt(document.pemesanan[i].value);
pesanan = parseInt(document.pemesanan[i + 1].value);

if(pesanan > 0){
total = total + (harga * pesanan);
}

document.pemesanan.total.value = total;
}
}

function diskon(){
var total = parseInt(document.pemesanan.total.value);
var diskon = 0;

if(total >= 50000){
diskon = 10000;
}

document.pemesanan.diskon.value = diskon;
}

function jumlahBayar(){
var total = parseInt(document.pemesanan.total.value);
var diskon = parseInt(document.pemesanan.diskon.value);
var bayar = total - diskon;

document.pemesanan.bayar.value = bayar;
}

function proses(){
totalHarga();
diskon();
jumlahBayar();
}

function reset(){
var elemen = document.pemesanan;

elemen.jmlpesanbakso.value = "";
elemen.pesan2.value = "";
elemen.pesan3.value = "";
elemen.pesan4.value = "";
elemen.pesan5.value = "";
elemen.total.value = "";
elemen.diskon.value = "";
elemen.bayar.value = "";
}

Modul 5. Praktikum pemrograman berbasis web.

07.08 | 0 Comments

<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Calculator</title>
<script language="JavaScript" type="text/javascript" src="kalkulator.js"></script>
</head>
<body>
<b>Kalkulator Javascript</b>
<form name="calc" action="#">
<input type="text" size="5" name="bil1">

<select name="op">
<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="hitung()"/>
<input type="text" size="10" name="hasil" readonly>
</form>
</body>
</html>

function hitung(){
var komponen = document.calc;
var bil1 = parseInt(komponen.bil1.value);
var bil2 = parseInt(komponen.bil2.value);
var op = komponen.op.value;
var hasil;

if(op == "tambah"){
hasil = bil1 + bil2;
}
else if(op == "kurang"){
hasil = bil1 - bil2;
}
else if(op == "kali"){
hasil = bil1 * bil2;
}
else if(op == "bagi"){
hasil = bil1 / bil2;
}

komponen.hasil.value = hasil;
}

TUGAS MODUL4 PRAKTIKUM WEB 2

04.00 | 0 Comments

TUGAS PRAKTIKUM

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>LOMOGRAFI</title>
<link rel="stylesheet" href="mystyle.css" type= "text/css" />
<link rel="icon" href="ico.ico" type="image/x-icon" />
</head>

<body>

<header>
<h1><font face=courier new>Lomografi, antara hobby dan LifeStyle</font></h1>
</header>

<nav><div id="navsearch">
<b>Search</b>
</div>
<div id="navformsearch">
</div>
<div id="products">
<a href="products.html">Products</a></div>
<div id="tips">
<a href="tips.html">Tips & Trick</a></div>
<div id="tutorial">
<a href="tutorial.html">Tutorial</a></div>
<div id="media">
<a href="media.html">Media</a></div>
<div id="home">
<a href="home.html">Home</a></div>
</nav>

<section><div id="foto">
<article>
</article>
<aside>
<font face=courier new size=1>
Lomografi adalah salah satu kegiatan yang digemari oleh para remaja sampai saat ini. Akan dirasa kurang lengkap jika belum membawa kamera mainan plastik warna-warni ini saat jalan-jalan, karena barang ini sudah menjadi bagian dari gaya hidup orang-orang modern sampai saat ini. Tidak jauh dari fotografi yang sudah kita kenal akrab , lomografi juga menggunakan alat berupa kamera. Yang membedakan adalah lomografi menggunakan kamera khusus lomografi yang biasa disebut kamera lomo.
<br>Lomografi menghadirkan kamera yang bermacam-macam dan mempunyai karakter tersendiri. Desain produk dan warna yang menarik juga menjadi ciri khas kamera-kamera lomo. Kegiatan ini sudah menjadi satu gaya hidup anak muda di beberapa kota di dunia, termasuk di Indonesia, diantaranya Jakarta, Bandung, Jogjakarta, Semarang, Bali, dan lain-lain.
Lomografi bisa disebut sebagai sisa-sisa reruntuhan komunisme yang berasal dari negara Rusia. Kamera lomo pertama yang diproduksi oleh perusahaan senjata LOMO bernama Lomo Compact Automat atau biasa disebut LCA pada tahun 1960an. Perusahaan ini terus berproduksi sampai tahun 1970an.
<br>Namun, penjualan mulai menurun sampai tahun 1980an dan LCA menjadi barang loakan yang hanya dijual di toko-toko barang bekas. Bangkitnya kamera lomo dimulai tahun 1990an oleh seorang mahasiswi Austria yang waktu itu sedang berlibur dan menemukan kembali kamera lomo ini.
Dia mendapatkannya di sebuah toko barang bekas dengan harga yang murah. Tak disangka-sangka, foto yang dihasilkan oleh kamera ini sangat mengejutkan. Dia mulai menyebarluaskan kembali tentang kamera ini kepada teman-temannya dan ke dunia luar. Ternyata sangat banyak orang yang tertarik.
<br>Lomografi masih menggunakan teknologi fotografi manual dengan memakai negatif atau biasa kita sebut rol film. Jadi, harus melalui proses cuci cetak atau cuci scan sebelum kita bisa melihat hasilnya. Agak ribet memang, tetapi justru di situlah letak kesenangan lomografi.
</font>
</aside>
</div>
<div id="event">
<b>POSTED UNDER</b>
<font face=calibri color=#64d9e4>
<ul>
<li><b><a href="sejarah.html">Sejarah Lomografi</a></b>
<li><b><a href="komunitas.html">Komunitas Lomonesia</a></b>
<li><b><a href="Tipe.html">Tipe Kamera</a></b>
</ul>
</font>
</div>
</section>

<footer>
<div id="bawah">
<a href="home.html">Home</a> | <a href="media.html">News & Media</a> | <a href="Tutorial.html">Tutorials</a> | <a href="Tips.html">Tips & Tricks</a> | <a href="Products.html">Product</a>
</div>
</footer>
</body>
</html>

CASCADE STYLE SHEET
body {
margin: 5px auto;
width: 1330px;
}
header{
height:70px;
/*border-top: 1px solid green;
border-right: 1px solid green;
border-left: 1px solid green;
border-bottom: 1px solid blue;*/
background-image:url(header3.png);
}
nav {
height:40px;
border-right: 1px solid yellow;
border-left: 1px solid yellow;
border-bottom: 1px solid blue;
background-color:yellow;
}
#navsearch {
float:left;
width:80px;
height:20px;
margin-top:5px;
margin-left:50px;
}

#navformsearch {
float:left;
margin-left:2px;
width:160px;
height:20px;
border:1px solid black;
margin-top:3px;
background-color:white;
}
#home {
float:right;
width:100px;
height:20px;
margin-right:500px;
border:1px solid blue;
margin:2px;
text-align:center;
background-color:##e1d119;
}
#media {
float:right;
width:100px;
height:20px;
margin-right:500px;
border:1px solid blue;
margin:2px;
text-align:center;
background-color:##e1d119;
}
#tutorial {
float:right;
width:100px;
height:20px;
margin-right:500px;
border:1px solid blue;
margin:2px;
text-align:center;
background-color:##e1d119;
}
#tips{
float:right;
width:80px;
height:20px;
margin-right:500px;
border:1px solid blue;
margin:2px;
text-align:center;
background-color:##e1d119;
}
#products{
float:right;
width:100px;
height:20px;
margin-right:500px;
border:1px solid blue;
margin:2px;
text-align:center;
background-color:##e1d119;
}
#foto {
width:1325px;}
section {
height:500px;
border-top: 1px solid green;
border-right: 1px solid #f5e317;
border-left: 1px solid #f5e317;
border-bottom: 1px solid #f5e317;
}
article {
/*margin:35px;*/
float:left;
border: 1px solid #f5e317;
width:292px;
height:492px;
background-image:url(train.jpg);
border:4px solid #f5e317;
}
aside {
height:400px;
width:1018px;
float:left;
border: none;
/*margin-right:35px;
margin-top:35px;
margin-bottom:35px;*/}
#event {
height:95px;
width:1018px;
float:left;
border:none;
background-color:yellow;
/*margin-right:1px;
*/
}
footer{
height:30px;
border:1px solid #f5e317;
padding-left:500px;
background-image:url(footer.png)

#bawah {
float:left;
width:500px;
height:20px;
padding-left:100px;
border:1px solid blue;
margin:2px;
text-align:center;
background-color:##e1d119;
}
}

studi kasus modul3

04.45 | 0 Comments

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

<head>
<title>Studi kasus</title>
<style type="text/css">

</style>
</head>

<body>

<div class="lingkaran" align="center" padding=5px>
border lingkaran
</div>

<div class="benjo" align="center" >
border daun
</div>

<div class="bayangan" align="center">
border dengan bayangan
</div>

</body>

</html>

Laporan tugas praktikum pemrograman web 2.

05.52 | 0 Comments

MAIN FILE
_______________________

<!DOCTYPE html>
<html lang="en">
<head>
<title>Famebore, terkenal ngeboseni</title>
<link rel="stylesheet" href="linked.css" type="text/css" />
<link rel="icon" href="ico.png" type="image/x-icon" />
<div id="atas">
<div id="famebore">
<font color="white" face="cambia" size=8><b> famebore </b></font>
</div>
<div id="table">
<font color="white" face="cambia" size=2>
<table>
<tr>
<td><u>Email:</u></td>
<td><u>Password:</u></td>
</tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="password">
</td>
<td><input id="masuk" type="button" value="Masuk"></td>
</tr>
<tr>
<td><input type="checkbox">Tetap masuk</td>
<td><u>Lupa password?</u></td>
</tr>
</table>
</font>
</div>
</div>
</head>
<body>
<div id="tengah">
</div>
<div id="bawah">
<font color="white" face="calibri">
© Famebore.inc 2011
</font>
</div>
</body>
</html>

______________
STYLE FILE
______________
#atas{
height:100px;
background-color:blue;}

#masuk{
background-color:darkblue;
color:#ffffff;
border:0;
}

#famebore{
float:left;
height:100px;
width:150px;
padding-left:125px;
padding-top:20px;
}

#tengah{
height:550px;
background-image:URL(back.png);
}

#bawah{
height:20px;
background-color:blue;}

#table{
padding-top:15px;
padding-right:150px;
float:right;}

05.53 | 0 Comments

STUDI KASUS PRAKTIKUM 2

Studi kasus kali ini mengetengahkan konsep multiple frame, dimana sebenarnya setiap frame yang berbeda bisa disatukan sebagai satu kesatuan. Dengan konsep ini, proses load di salah satu frame akan lebih cepat jika dibandingkan dengan menggunakan file html tunggal, karena jika misalnya kita membuka salah satu elemen di frame, maka hanya bagian frame itulah yang mereload, tidak secara keseluruhan. Bagian lainnya akan tetap statis, selama tidak ada eksekusi atau command yang diberikan oleh user.

Berikut source codenya
FRAME UTAMA
<!DOCTYPE html>
&lthtml lang="en">

&lthead>
&lttitle&gtframe</title>
</head>

&ltframeset rows="10%,*,10%">
&ltframe src="1.html" name="atas" id="atas"/>
&ltframeset cols="10%,*,10%">
&ltframe src="2.html" name="kiri" id="kiri"/>
&ltframe src="3.html" name="tengah" id="tengah"/>
&ltframe src="4.html" name="kanan" id="kanan"/>
</frameset>
&ltframe src="5.html" name="bawah" id="bawah"/>
</frameset>
</html>

FRAME 1 (ATAS)
&lt!DOCTYPE html&gt
&lthtml lang="en"&gt

&lthead&gt
&lttitle&gtAtas&lt/title&gt
&lt/head&gt

&ltbody&gt
&lth2 align="center"&gt
&ltfont&gtHeader Situs ini&lt/font&gt
&lt/h2&gt
&lt/body&gt
&lt/html&gt

FRAME KIRI
&lt!DOCTYPE html&gt
&lthtml lang="en"&gt

&lthead&gt
&lttitle&gtKiri&lt/title&gt
&lt/head&gt
&ltbody&gt
&lta href="utama.html"&gt&ltinput type="submit" value="Klik disini" /&gt&lt/a&gt
&lt/body&gt
&lt/html&gt

FRAME KANAN
&lt!DOCTYPE html&gt
&lthtml lang="en"&gt

&lthead&gt
&lttitle&gtKanan&lt/title&gt
&lt/head&gt

&ltbody&gt
This page is authorized by Me!
&ltbr&gtPlease contact me at &lta href="mailto:penta_ci5@yahoo.co.id"&gtthis email&lt/a&gt
&lt/body&gt
&lt/html&gt

FRAME TENGAH
&lt!DOCTYPE html&gt
&lthtml lang="en"&gt

&lthead&gt
&lttitle&gtutama&lt/title&gt
&lt/head&gt

&ltbody &gt
&ltfont color="magenta"&gt&ltb&gt
&lth2 id="Menu"&gt&ltfont color="Red" size="7"&gtMari mengenal web syndicate!!!&lt/font&gt&lt/h2&gt

&ltol&gt
&ltli&gt&lta href="#Pengertian"&gtPengertian&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#KK"&gtKelebihan dan kekurangan&lt/a&gt&lt/li&gt
&lt/ol&gt

&lth3 id="Pengertian"&gt&ltfont color="Red"&gtPengertian&lt/font&gt&lt/h3&gt
&ltp&gt
Secara umum, web syndicate adalah sebauh kondisi dimana sebuah situs menyediakan sumber/kontennya bagi situs lain. Dalam hal ini, kebanyakan yang kita tahu adalah semisal situs berita lokal yang seringkali merelay laporan internasional dari saluran berita internasional. Ada dua bagian utama yang berperan di proses syndication ini, yaitu mendistribusikan/merelay konten situs utama.
&ltp&gt
&ltdl&gt
    &ltdt&gta.    situs penyedia konten.&lt/dt&gt
        &ltdd&gtSitus ini menyediakan dan mendistribusikan konten kepada web lain&lt/dd&gt
    &ltdt&gtb.    situs yang merelay konten.&lt/dt&gt
        &ltdd&gtSitus ini berperan sebagai referrer yang bergantung, walaupun tidak sepenuhnya kepada situs penyedia konten.&lt/dd&gt

&ltbr&gt&lta href="#Menu"&gtKembali ke atas&lt/a&gt&lt/dd&gt
&lt/dl&gt

&lth3 id="KK"&gt&ltfont color="Red"&gtKelebihan dan kekurangan&lt/font&gt&lt/h3&gt
Kelebihannya, bagi kedua belah pihak yang terlibat, yaitu antara lain sebagai berikut:

&ltdl&gt
    &ltdt&gta.    Situs yang terlibat, akan termudahkan dalam proses pendistribusian informasinya.&lt/dt&gt
    &ltdt&gtb.    Situs yang merelay konten, akan memudahkan pencarian sumber konten, semisal berita dll.&lt/dt&gt
&lt/dl&gt

Sedangkan kekurangannya adalah seringnay terjadi repetisi/ perulangan atau duplkasi konten yang cukup menyebalkan.

&ltbr&gt&lta href="#Menu"&gtKembali ke atas&lt/a&gt&lt/dd&gt
&lt/b&gt&lt/font&gt&lt/body&gt
&lt/html&gt

FRAME BAWAH
&lt!DOCTYPE html&gt
&lthtml lang="en"&gt

&lthead&gt
&lttitle&gtBawah&lt/title&gt
&lt/head&gt

&ltbody&gt
&ltfont color="Red"&gt&ltb&gtAuthor :&lt/font&gt
Fentaria Hari Basuki&lt/b&gt&lt/font&gt
&lt/body&gt
&lt/html&gt

Lalu apa yang terjadi jika salah satu link di salah satu frame dieksekusi?

Perhatikan frame tengah! Frame lain akan tetap statis, karena yang dieksekusi hanyalah frame bagian tengah.

TUGAS PRAKTIKUM
1.
Berikut source codenya
&lt!DOCTYPE html
&lthtml lang="en"&gt

&lthead&gt
&lttitle&gtGrafik Berbasis Tabel&lt/title&gt
&lt/head&gt

&ltbody&gt
&lttable border="0" align="left" cellspacing=2 &gt
&lttr&gt
&lthr width=750 align="left"&gt

&ltth width="300"&gtPerusahaan&lt/th&gt
&ltth width="150" colspan=3&gt&lt/th&gt
&ltth width="250" colspan=3&gtPendapatan&lt/th&gt
&lt/tr&gt

&lttr&gt
&lttd&gtAngen Reboot Ltd&lt/td&gt
&lttd width="25"&gt&lt/td&gt
&lttd width="52"&gt&lt/td&gt
&lttd width="23"&gt&lt/td&gt
&lttd width="150" colspan="2" bgcolor="green" border="1"&gt&lt/td&gt
&lttd width="40" align="left"&gt+150%&lt/td&gt
&lt/tr&gt

&lttr&gt
&lttd&gtCommand Prompt, Inc&lt/td&gt
&lttd width="25"&gt&lt/td&gt
&lttd width="52"&gt&lt/td&gt
&lttd width="23"&gt&lt/td&gt
&lttd width="55" bgcolor="green"&gt&lt/td&gt
&lttd width="90" align="left"&gt+55%&lt/td&gt
&lttd width="40"&gt&lt/td&gt
&lt/tr&gt

&lttr&gt
&lttd&gtHibernate Ltd&lt/td&gt
&lttd width="25"&gt&lt/td&gt
&lttd width="52" align="right"&gt-23%&lt/td&gt
&lttd width="23" bgcolor="yellow"&gt&lt/td&gt
&lttd width="55"&gt&lt/td&gt
&lttd width="90"&gt&lt/td&gt
&lttd width="40"&gt&lt/td&gt
&lt/tr&gt

&lttr frame="below"&gt
&lttd&gtShutdown Ltd&lt/td&gt
&lttd width="25" align="right"&gt-75%&lt/td&gt
&lttd width="52" colspan="2" bgcolor="red" border=&gt&lt/td&gt
&lttd width="55"&gt&lt/td&gt
&lttd width="90"&gt&lt/td&gt
&lttd width="40"&gt&lt/td&gt
&lt/tr&gt

&lt/body&gt
&lt/html&gt

2.
Berikut source codenya
&lt!DOCTYPE html&gt
&lthtml lang="en"&gt

&lthead&gt
&lttitle&gtPerbandingan&lt/title&gt
&lt/head&gt

&ltbody&gt
&lth4 align="center"&gtPerbandingan Fitur&lt/h4&gt
&lttable border="1" align="center" cellspacing=3 cellpadding=3&gt
&lttr&gt
&ltth width="30"&gtNo&lt/th&gt
&ltth width="200"&gtFitur&lt/th&gt
&ltth width="50"&gtEnterprise&lt/th&gt

&ltth width="50"&gtPro&lt/th&gt
&ltth width="50"&gtFree&lt/th&gt
&lt/tr&gt

&lttr&gt
&lttd align="center"&gt1
&ltbr&gt2
&ltbr&gt3
&ltbr&gt4
&ltbr&gt5
&lt/td&gt
&lttd width="180"&gtGaransi seumur hidup
&ltbr&gtMultiuser
&ltbr&gtUpdate otomatis
&ltbr&gtCetak laporan
&ltbr&gtNotifikasi error

&lt/td&gt
&lttd align="center"&gtX
&ltbr&gtX
&ltbr&gtX
&ltbr&gtX
&ltbr&gtX&lt/td&gt
&lttd align="center"&gt-
&ltbr&gt-
&ltbr&gtX
&ltbr&gtX
&ltbr&gtX
&lt/td&gt
&lttd align="center"&gt-
&ltbr&gt-
&ltbr&gt-
&ltbr&gt-

&ltbr&gtX
&lt/td&gt
&lt/tr&gt

&lttr&gt
&lttd align=center&gt6
&ltbr&gt7
&lt/td&gt

&lttd&gtUbah tema
&ltbr&gtTry ikon
&lt/td&gt

&lttd align="center"&gtX
&ltbr&gtX
&lt/td&gt

&lttd align="center"&gtX
&ltbr&gtX
&lt/td&gt

&lttd align="center"&gtX
&ltbr&gtX
&lt/td&gt
&lt/tr&gt

&lt/body&gt
&lt/html&gt

Blogger Notes

Modul 5. Praktikum pemrograman berbasis web.

TUGAS MODUL4 PRAKTIKUM WEB 2

studi kasus modul3

Laporan tugas praktikum pemrograman web 2.

Subscribe RSS

Search

Halaman

Followers

-555-

Blog Archive

About

Blogger Notes

Modul 5. Praktikum pemrograman berbasis web.

TUGAS MODUL4 PRAKTIKUM WEB 2

studi kasus modul3

Laporan tugas praktikum pemrograman web 2.

Subscribe RSS

Search

Halaman

Followers

-555-

Blog Archive

Subscribe To

About