Selamat Datang di Blog AGUNG PANJI SASMITO

Sabtu, 05 Maret 2011

Belajar Web Programming : Tugas praktikum Modul 5 - Desain Halaman Pemesanan Makanan

Posted in , | 3/05/2011 09:55:00 PM | by Agung P. Sasmito | @ajungpangi

Selamat malam semua =)
Setelah tadi kita mempelajari pembuatan kalkulator dengan rumus matematis dalam javascript, sekarang kita buat implementasi dari java script dan DHTML beserta fungsi matematis dalam form pemesanan makanan. Ayo kita pelajari bersama!

Untuk file CSS kita simpan dengan TgsPrak5.css
body {
margin: 10px auto;
width: 580px;
}

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

header{
font-family: Arial;
font-size: 15px;
font-weight:bold;
text-align: center;
color: white;
float:center;
height:100px;
background : red;
}

section{
padding: 10px;
height:350px;
}

footer{
clear:both;
height:20px;
background : red;
font-family: Arial;
font-size: 15px;
font-weight:bold;
color: white;
}

.huruf_tabelatas{
font-family: Arial;
font-size: 15px;
font-weight:bold;
text-align: center;
color: red;
float:center;
}

.huruf_tabelisi{
font-family: Arial Narrow;
font-size: 15px;
text-align: center;
color: black;
float:left;
}

.huruf_tabelbawah{
font-family: arial;
font-size: 15px;
font-weight:bold;
text-align: center;
color: red;
float:right;
}

Untuk file Java Script kita simpan dengan TgsPrak5.js
function JumlahTotal(){

var myForm=document.form_pujas;
var total1;
var total2;
var total3;
var total4;
var total5;

total1 =parseInt(myForm.harga1.value) * parseInt(myForm.pesan1.value);
total2 =parseInt(myForm.harga2.value) * parseInt(myForm.pesan2.value);
total3 =parseInt(myForm.harga3.value) * parseInt(myForm.pesan3.value);
total4 =parseInt(myForm.harga4.value) * parseInt(myForm.pesan4.value);
total5 =parseInt(myForm.harga5.value) * parseInt(myForm.pesan5.value);

myForm.JumTotal.value=total1+total2+total3+total4+total5;
}

function potongan(){
var myForm=document.form_pujas;

if (myForm.JumTotal.value < 50000){
myForm.Diskon.value = 0;
}
else{
myForm.Diskon.value = 10000;
}
}

function JumlahBayar(){
var myForm=document.form_pujas;

myForm.JumBayar.value = myForm.JumTotal.value - myForm.Diskon.value ;
}

function proses(){
JumlahTotal();
potongan();
JumlahBayar();
reset();
}

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

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

function pesan_sekarang()
{
var myForm = document.form_pujas;
if (myForm.JumBayar.value=="" || myForm.JumBayar.value==0)
{
alert("Anda belum memesan apapun, silakan pilih menu terlebih dahulu!");
}
else
{
alert("Terima kasih, total biaya yang harus dibayar sebesar Rp" + myForm.JumBayar.value + " dapat Anda bayarkan di meja kasir. Selamat menikmati!");
}
}

Untuk file HTML kita simpan dengan TgsPrak5.html
<!DOCTYPE HTML>
<html lang="en">

<head>
<title>Pemesanan Menu Pujasera UM - Tugas Praktikum Modul 5</title>
<script language="JavaScript" type="text/javascript" src="TgsPrak5.js"></script>
<link rel="stylesheet" href="TgsPrak5.css" type="text/css" />
</head>

<body>

<header>
<h1 align="center">Depot Makanan Oriental<br/>Pujasera UM</h1>
</header>

<section>
<form name="form_pujas" action="#">
<table border=1 cellpadding=3>
<tr>
<th><div class="huruf_tabelatas">No.<div></th>
<th width = 350px ><div class="huruf_tabelatas">Makanan / Minuman </div></th>
<th width = 120px ><div class="huruf_tabelatas">Harga</div></th>
<th width = 100px><div class="huruf_tabelatas">Jumlah</div></th>
</tr>

<tr>
<td><div class="huruf_tabelisi">1</div></td>
<td><div class="huruf_tabelisi">Nasi Goreng Seafood </div></td>
<td><div class="huruf_tabelisi">@ Rp <input type="text" name="harga1" value="8000" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_tabelisi"><input type="text" name="pesan1" value="0" size="3" onChange ="proses()"/> porsi</div></td>
</tr>

<tr>
<td><div class="huruf_tabelisi">2</div></td>
<td><div class="huruf_tabelisi">Nasi Hokyan </td>
<td><div class="huruf_tabelisi">@ Rp <input type="text" name="harga2" value="7000" size="6" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_tabelisi"><input type="text" name="pesan2" value="0" size="3" onChange ="proses()" /> porsi</div></td>
</tr>

<tr>
<td><div class="huruf_tabelisi">3</div></td>
<td><div class="huruf_tabelisi">Fuyunghai </div></td>
<td><div class="huruf_tabelisi">@ Rp <input type="text" name="harga3" value="15000" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_tabelisi"><input type="text" name="pesan3" value="0" size="3" onChange ="proses()" /> porsi</div></td>
</tr>

<tr>
<td><div class="huruf_tabelisi">4</div></td>
<td><div class="huruf_tabelisi">Yoghurt (all taste) </div></td>
<td><div class="huruf_tabelisi">@ Rp <input type="text" name="harga4" value="3000" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_tabelisi"><input type="text" name="pesan4" value="0" size="3" onChange ="proses()" /> gelas</div></td>
</tr>

<tr>
<td><div class="huruf_tabelisi">5</div></td>
<td><div class="huruf_tabelisi">Fruit Punch </div></td>
<td><div class="huruf_tabelisi">@ Rp <input type="text" name="harga5" value="5000" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_tabelisi"><input type="text" name="pesan5" value="0" size="3" onChange ="proses()" /> gelas</div></td>
</tr>

<tr>
<td colspan=3><div class="huruf_tabelbawah">Jumlah</div></td>
<td><div class="huruf_tabelbawah">Rp <input type="text" size="6" style="text-align:right" name="JumTotal" readonly /></div></td>
<tr>

<tr>
<td colspan=3><div class="huruf_tabelbawah">Diskon</div></td>
<td><div class="huruf_tabelbawah">Rp <input type="text" size="6" style="text-align:right" name="Diskon" readonly /></div></td>
<tr>

<tr>
<td colspan=3><div class="huruf_tabelbawah">Jumlah Dibayar</div></td>
<td><div class="huruf_tabelbawah">Rp <input type="text" size="6" style="text-align:right" name="JumBayar" readonly /></div></td>
<tr>

</table>

<br>
<!--<input type="button" value="Proses" onclick="proses()" />-->
<input type="button" name="batal" value="Batalkan Pesanan" onclick="reset()"/>
<input type="submit" value="Pesan Sekarang" onclick="pesan_sekarang()" />
</form>
</section>

<footer>
©2011 by ajungpangi ™
</footer>

</body>
</html>

ScreenShoot saat kita masukkan jumlah makanan yang ingin kita pesan.

ScreenShoot saat kita menekan tombol "PESAN SEKARANG"
ScreenShoot saat kita menekan tombol "BATALKAN PESANAN"

Saran dan kritik harap komentar yaa =)

0 komentar

Belajar Web Programming : Studi Kasus Modul 5 - Kalkulator Sederhana

Posted in , | 3/05/2011 09:03:00 PM | by Agung P. Sasmito | @ajungpangi

Selamat malam =)
Setelah kemarin kita bermain dengan CSS sekarang kita mempelajari web dinamis alias web yang jauh lebih interaktif. Nah, untuk web dinamis kita bisa menggunakan DHTML dan JavaScript. Untuk contoh saya akan berikan web kalkulator. Cekidot ya gan :cendolbig:

Untuk file javascript - simpan dengan nama calculator.js

function proses(){

var myForm=document.form_kalkulator;

if (myForm.operasi.value == "+"){
myForm.hasil.value = parseInt(myForm.bil1.value) + parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "-"){
myForm.hasil.value = parseInt(myForm.bil1.value) - parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "*"){
myForm.hasil.value = parseInt(myForm.bil1.value) * parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "/"){
myForm.hasil.value = parseInt(myForm.bil1.value) / parseInt(myForm.bil2.value);
}
}

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

elemen.bil1.value = "";
elemen.bil2.value = "";
elemen.hasil.value = "";
}

function cetak()
{
var myForm = document.form_kalkulator;
if (myForm.bil1.value=="[Masukkan bilangan 1]" || myForm.operasi.value=="[Pilih Operator]" || myForm.bil1.value=="[Masukkan bilangan 2]")
{
alert("Input masih ada yang kosong atau Anda belum memilih operator, cek lagi!");
}
else
{
alert("Nilai dari " + myForm.bil1.value + " " + myForm.operasi.value + " " + myForm.bil2.value + " = " + myForm.hasil.value);
}
}

Untuk file HTML simpan dengan nama calculator.html

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

<head>
<title>KalkulatorMINI ™ - Studi Kasus Modul 5 - ajungpangi</title>
<script language="JavaScript" type="text/javascript" src="calculator.js"></script>
<style type="text/css">
<!--
.huruf_header{
font-family: cambria;
font-size: 24px;
text-align: center;
color: blue;
float:center;
}
-->
</style>
<link rel="icon" type="image/x-icon" href="ajungpangi.jpg">
</head>

<body bgcolor="aqua">
<center>
<table bgcolor="white" border=0 align="justify" cellspacing=0 cellpadding=5>
<tr>
<td width="1600"><div class="huruf_header">KalkulatorMINI ™</div></td>
</tr>
</table>
<br/>

<form name=form_kalkulator action="#">

<table border ="0">
<tr>
<td><input type="text" name="bil1" value="[Masukkan bilangan 1]"/></td>
<td><select name="operasi" >
<option>[Pilih Operator]</option>
<option value="+">+ (ADD BY)</option>
<option value="-">- (SUBSTRACT)</option>
<option value="*">* (MULTIPLIED)</option>
<option value="/">/ (DIVIDE BY)</option>
</select></td>
<td><input type="text" name="bil2" value="[Masukkan bilangan 2]"/></td>
<td><input type="button" value="Proses Sekarang!" onclick="proses()" /></td>
<td><input type="text" name="hasil"/></td>
<td><input type="button" value="Hapus" onclick="reset()" /></td>
<td><input type="button" value="Cetak" onclick="cetak()" /></td>
</tr>
</table>

</form>
</center>

</body>
</html>


Untuk Screenshoot awal

Untuk Screenshoot saat kita masukkan bilangan dan klik "PROSES SEKARANG"

ScreenShoot saat kita klik "CETAK"

ScreenShoot saat kita klik "HAPUS"

ScreenShoot saat kita klik "PROSES SEKARANG" tetapi belum kita inputkan bilangan


Harap komentar yaa, kritik sehat sangat ditunggu =)

0 komentar

Sabtu, 26 Februari 2011

Belajar Web Programming : Tugas Praktikum Modul 4 - Desain Web CSS

Posted in , | 2/26/2011 11:46:00 PM | by Agung P. Sasmito | @ajungpangi

Selamat malam teman-teman =)
Nah, kali ini sudah sampai ke modul 4, di mana kita dituntut mampu membuat sebuah halaman web dengan menggunakan CSS.
Nah, mau tahu bagaimana caranya?

body {
margin: 10px auto;
width: 850px;
}

header,nav,section,footer {
display:block;
}

button input{
height:30px;
width:50px;
border: 1px solid black;
}

menukanan :hover{
color : blue;
background-color : white;
text-align : center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

header{
background-image: url(desa.png);
height:250px;
}

nav{
background-image : url(menubarcolor.jpg);
height: 32px;
padding-top: 10px;
padding-left: 10px;
border: 1px solid blue;
font-family: Arial;
font-size: 15px;
color: white;
}

menukiri {
float: left;
margin-left: 2px;
}

menukanan{
float: right;
margin-right: 15px;
}

section{
float:left;
background-image : url(peta.jpg);
height:380px;
width: 240px;
border: 1px solid red;
}

article, aside{
padding-left: 10px;
font-family: Arial;
font-size: 15px;
color: blue;
border: 1px dashed blue;
}

article{
background-image : url(artikelbgcolor.jpg);
float:right;
width:595px;
height:250px;
line-height: 20px;
}

aside{
background-image : url(asidebgcolor.jpg);
float:right;
width:595px;
height:129px;
}

footer{
background-image : url(footercolor.jpg);
clear:both;
padding:12px;
border: 1px solid blue;
height: 26px;
font-family: Arial Rounded mt bold;
font-size: 15px;
color: white;
line-height: 20px;
}


Untuk sintaks HTMLnya
<!DOCTYPE HTML>
<html lang="en">

<head>
<title>Selamat Datang di Situs Desa Pesanggrahan</title>
<link rel="stylesheet" href="Mod4TgsPrak.css" type="text/css" />
<link rel="icon" type="image/x-icon" href="batu.jpg">
</head>

<body>

<header>

</header>

<nav>
<menukiri>
Cari di Situs Ini <input type="text">
</menukiri>
<menukanan>
<button>
Beranda
</button>
<button>
Tentang Kami
</button>
<button>
Layanan
</button>
<button>
Hubungi Kami
</button>
</menukanan>
</nav>

<section>
</section>
<article>
<strong>Pesanggrahan</strong>, pada zaman dahulu adalah sebuah tempat dimana para Petinggi Kerajaan beristirahat.
Konon para Raja, Ratu, Adipati dan Punggawa Kerajaan antara lain Raja Mataram bersama para Istri selirnya sering mandi di sumber mata air panas Songgoriti dan beristirahat atau “Mesanggrah” (bersinggah) di tempat yang sekarang ini orang menyebut <strong>Desa Pesanggrahan</strong>. <br />
Desa Pesanggrahan berlokasi tepat pada lereng gunung Panderman persis berada pada lereng sebelah utara gunung panderman.
Wilayah Pesanggrahan yang karena letaknya di bawah lereng Gunung Panderman, panoramanya yang indah serta hawanya yang sangat sejuk menjadi daya tarik tersendiri bagi orang dari luar untuk beristirahat di tempat ini, disamping itu tempat ini sudah menjadi salah satu tempat di mana banyak Petinggi Kerajaan beristirahat pada zaman itu, maka pada akhirnya wilayah ini dinamakan Desa Pesanggrahan.
</article>
<aside>
<br/><strong>Berita terkait:</strong>
<ul>
<li><a href="coba.html">Sejarah Desa Pesanggrahan</a><br/></li>
<li><a href="coba.html">Struktur Desa Pesanggrahan</a><br/></li>
<li><a href="coba.html">Data Penduduk</a><br/></li>
<li><a href="coba.html">Organisasi Desa</a><br/></li>
</ul>
</aside>



<footer>
<marquee direction="alternate">©2011 by Agung Panji Sasmito - Tugas Praktikum Modul 4 - Dedicated for My Homeland</marquee>
</footer>

</body>
</html>
;

Screenshoot
Untuk demo bisa klik di sini.

0 komentar

Belajar Web Programming : Studi Kasus Modul 4 - Desain Web CSS

Posted in , | 2/26/2011 11:43:00 PM | by Agung P. Sasmito | @ajungpangi

Selamat malam =)
Sekarang kita akan mencoba membuat tempate sebuah halaman web

CSSnya adalah sebagai berikut.

body {
margin: 10px auto;
width: 750px;
}

header,nav,section,footer {
display:block;
padding: 10px;
}

button input{
height:15px;
width:50px;
border: 1px solid black;
}

right{
float: right;
}

header{
height:40px;
border: 1px solid green;
}

nav{
height:40px;
border: 1px solid blue;
}

section{
clear: both;
height:400px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
border: 1px solid red;
}

article{
float:left;
width:500px;
height:380px;
border: 1px dashed red;
}

aside{
float:right;
width:210px;
height:380px;
border: 1px dashed blue;
}
footer{
clear:both;
height:10px;
border: 1px solid green;
}



Sementara itu untuk file HTMLnya
<!DOCTYPE HTML>
<html lang="en">

<head>
<title>Desain Layout Sederhana HTML5</title>
<link rel="stylesheet" href="StudiKasus.css" type="text/css" />
</head>

<body>

<header>
header
</header>

<nav>
nav
<right>
<button>
Home
</button>
<button>
Menu
</button>
</right>
</nav>

<section>
<article>
article
</section>
<aside>
aside
</aside>
section
</section>

<footer>
footer
</footer>

</body>
</html>


Screenshoot


Untuk tampilan demo-nya bisa dilihat di sini.

0 komentar

Minggu, 20 Februari 2011

Belajar Web Programming : Tugas Praktikum Modul 3 - CSS

Posted in , | 2/20/2011 02:32:00 PM | by Agung P. Sasmito | @ajungpangi

Selamat malam teman-teman =)
Kali ini ayo kita bikin homepage sebuah situs jejaring sosial dengan menggunakan CSS =)
Mau tahu caranya?
Ayo kita pelajari listingnya =)

<!DOCTYPE html>
<html lang="en">
<head>
<title>BONGbook : Facebook untuk Kecebong - Tugas Praktikum 3 - Modul 3 - ajungpangi</title>
<!-- Agung Panji Sasmito - 109533423242 - S1 PTI 2009 / Off-B -->
<style type="text/css">

.header, .footer{
background-color : rgb(34, 204, 4);
}

.header{
height : 70px;
padding-top : 10px;
padding-bottom : 10px;
padding-left : 150px;
}

#lebar{
width : 1000px;
}

.footer{
padding-top : 5px;
padding-bottom : 5px;
padding-right : 200px;
padding-left : 30px;
color : white;
font-family : Arial;
font-size : small;
font-weight : bold;
}

.bg-color{
height : 450px;
background-image : url(bg.jpg);
background-color : black;
background-repeat : repeat-x;
}

.login{
float : right;
color : white;
font-family : arial;
font-size : small;
}

#logo{
margin-top : 20px;
float : left;
height : 35px;
}

#kanan{
float: left;
padding: 5px;
width:370px;
height: 380px;
}

#tengah {
float: left;
}

#kiri {
float: left;
width: 780px;
height: 380px;
}

#gambar{
padding-top : 10px;
padding-bottom : 10px;
padding-left : 150px;
width: 400px;
height: 200px;
font-family : Arial;
font-size : small;
font-weight : bold;
color: green;
}

#huruf{
font-family : Arial;
font-size : small;
font-weight : bold;
line-height : 30px;
color: green;
}

#button_masuk{
background-color : green;
color : white;
}

#button_daftar{
background-color : green;
color : white;
}

</style>
<link type="image/x-icon" rel="icon" href="icon.jpg">
</head>
<body>
<div class="header">
<div id="lebar">
<div id="logo">
<img src="logo.png">
</div>
<div class="login">
<table>
<tr>
<td>Email</td>
<td>Password</td>
<td> </td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="password"></td>
<td><input type="submit" value="Masuk" id="button_masuk"></td>
</tr>
<tr>
<td height="25"><input type="checkbox" checked>Ingat saya</td>
<td height="25">Lupa kata sandi?</td>
<td height="25"> </td>
</tr>
</table>
</div>
</div>
</div>
<div class="bg-color">

<form action="my_action.jsp">
<div id="tengah">
<div id="kiri">
<div id="gambar">
<font size="5">BONGbook menghubungkan Facebook untuk KeceBONG </font>
<img src="foto.png">
</div>
</div>
</div>
</form>
<div id="kanan">
<div id="huruf">
<h2>Registrasi GRATIS selamanya. </h2>
<hr style="color: green">
<form action="my_action.jsp">
<table>
<tr>
<td>Nama Depan :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Nama Belakang :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Email Anda :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Kata Sandi Baru:</td>
<td><input type="password" size="35"></td>
</tr>
<tr>
<td>Ulangi Kata Sandi:</td>
<td><input type="password" size="35"></td>
</tr>
<tr>
<td>Jenis Kelamin :</td>
<td><select name="kelamin">
<option value="pria" selected>Laki-laki
<option value="wanita">Perempuan
</select></td>
</tr>
</table>
</form>
<input type="submit" value="Daftarkan Sekarang" id="button_daftar">
</div>
</div>
</div>
<div class="footer">
Powered by Agung Panji Sasmito - S1 PTI 2009 / Off - B - Inspired by kece-BONG
</div>
</body>
</html>


Untuk Screenshootnya sebagai berikut


0 komentar

Belajar Web Programming : Studi Kasus Modul 3 - CSS

Posted in , | 2/20/2011 06:41:00 AM | by Agung P. Sasmito | @ajungpangi

Selamat malam teman-teman =) Nah, pertemuan kali ini saya dituntut untuk menguasai CSS. Nah-nah, mau tahu caranya membuat border yang lucu-lucu dengan CSS? Silakan dipelajari sintaksnya =)

<!DOCTYPE html>
<html lang="en">
<!-- Agung Panji Sasmito - 109533423242 - S1 PTI 2009 / Off-B -->
<head>
<title>Studi Kasus Modul 3 - CSS</title>
<style type="text/css">

<!--
.bulat{
background-color:#ff99ff;
-moz-border-radius: 180px;
-webkit-border-radius: 2px;
border : 2px solid #660099;
padding : 30px;
width : 120px;
height : 120px;
font-family : arial;
font-size : medium;
color : red;
}
-->

<!--
.kotak_rounded{
background-color:#0000cc;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-radius: 10px;
border : 4px solid #33ffcc;
padding : 10px;
width : 250px;
height : 100px;
font-family : arial;
font-size : medium;
color : white;
}
-->

<!--
.berbayang{
background-color:#00ff66;
-moz-border-radius-topleft: 0px;
-moz-box-shadow: 10px 7px 5px #99ff66;
-webkit-border-radius: 10px;
border : 1px solid #009900;
padding : 10px;
width : 250px;
height : 50px;
font-family : arial;
font-size : big;
color : #003333;
}
-->
</style>
</head>

<body>
<div class="bulat" align="center">
Kalau ingat<br/>
yang BUNDER?<br/><br/>
...yaa INTAN...<br/>
...yaa DIAN...<br/>
...yaa VE...<br>
</div>
<br />

<div class="kotak_rounded">
Kalo yang ganteng-ganteng?<br/><br/>
...yaa AGUNG...<br/>
...yaa ALIF...<br/>
...yaa RASTRA...<br/>
</div>

<br />

<div class="berbayang">
jadi terbayang-bayang...<br/>
kece-BONG
</div>

</body>

</html>

Ini hasil screenshotnya

0 komentar

Minggu, 13 Februari 2011

Belajar Web Programming : Tugas Praktikum 2 Modul 2 - Komponen HTML Lanjut

Posted in , | 2/13/2011 05:08:00 PM | by Agung P. Sasmito | @ajungpangi

Selamat sore teman-teman =)

Puji syukur kepada Tuhan akhirnya tugas tinggal Tugas Praktikum yang kedua yang belum saya share di sini T_T. Namun, walaupun lelah, tidak ada kata menyerah bukan?

Kali ini kita diminta untuk menggunakan fitur grouping dalam bentuk tabel dan adanya border tabel yang dihilangkan di sisi kiri dan kanan. Mau tahu rahasianya? Ayoo, cermati sintaks berikut =)

<!DOCTYPE HTML>
<html lang = "en">
<title>Tabel Pengelompokan - Tugas Praktikum 2 Modul 2 - ajungpangi</title>
<body>
<center>

<table border ='1'cellspacing='0'frame=hsides rules='groups'summary='Grouping Table'>
<caption><font face="Copperplate Gothic Bold"size='6'color='blue'>Perbandingan Layanan WindowsVISTA</font><br/><br/></caption>

<colgroup align='center'>
<colgroup align='center'>
<colgroup align='center' span='2'>
<colgroup align='center'>
<colgroup align='center'>
<thead valign='middle'>

<tr>
<th width='25'bgcolor='black'><font color='white'face='Palatino Linotype' size='3'>No</font></th>
<th width='250'bgcolor='black'><font color='white'face='Palatino Linotype' size='3'>Fitur</font></th>
<th width='150'bgcolor='black'><font color='white'face='Palatino Linotype' size='3'>Home Basic</font></th>
<th width='150'bgcolor='black'><font color='white'face='Palatino Linotype' size='3'>Home Premium</font></th>
<th width='150'bgcolor='black'><font color='white'face='Palatino Linotype' size='3'>Business</font></th>
<th width='150'bgcolor='black'><font color='white'face='Palatino Linotype' size='3'>Ultimate</font></th>
</tr>

<tbody>
<tr>
<td align='right'><font face='Palatino Linotype' size='3'>1.</font></td>
<td><font face='Palatino Linotype' size='3'>Sekuritas Tinggi</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
</tr>
<tr>
<td align='right'><font face='Palatino Linotype' size='3'>2.</font></td>
<td><font face='Palatino Linotype' size='3'>Pencarian Cepat</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
</tr>
<tr>
<td align='right'><font face='Palatino Linotype' size='3'>3.</font></td>
<td><font face='Palatino Linotype' size='3'>Fitur Back-Up</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
</tr>
<tr>
<td align='right'><font face='Palatino Linotype' size='3'>4.</font></td>
<td><font face='Palatino Linotype' size='3'>Konektivitas Bisnis</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
</tr>

<tbody>
<tr>
<td align='right'><font face='Palatino Linotype' size='3'>5.</font></td>
<td><font face='Palatino Linotype' size='3'>Support Mobile PC dan Tablet</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
</tr>
<tr>
<td align='right'><font face='Palatino Linotype' size='3'>6.</font></td>
<td><font face='Palatino Linotype' size='3'>Support XBOX 360</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
</tr>

<tbody>
<tr>
<td align='right'><font face='Palatino Linotype' size='3'>7.</font></td>
<td><font face='Palatino Linotype' size='3'>Windows Aero</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
</tr>
<tr>
<td align='right'><font face='Palatino Linotype' size='3'>8.</font></td>
<td><font face='Palatino Linotype' size='3'>Windows Media Center</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
</tr>
<tr>
<td align='right'><font face='Palatino Linotype' size='3'>9.</font></td>
<td><font face='Palatino Linotype' size='3'>Windows Teamwork</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
</tr>
<tr>
<td align='right'><font face='Palatino Linotype' size='3'>10.</font></td>
<td><font face='Palatino Linotype' size='3'>Windows BitLocker</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
</tr>
<tbody>
<tr>
<td align='center'colspan='2'bgcolor='black'><font color='white'face='Palatino Linotype' size='3'>Kesimpulan</font></td>
<td align='center'bgcolor='gray'><font face='Palatino Linotype' size='3'><strong>Dasar</strong></font></td>
<td align='center'bgcolor='gray'><font face='Palatino Linotype' size='3'><strong>Pendidikan</strong></font></td>
<td align='center'bgcolor='gray'><font face='Palatino Linotype' size='3'><strong>Kalangan Bisnis</strong></font></td>
<td align='center'bgcolor='gray'><font face='Palatino Linotype' size='3'><strong>Programmer-Grafis</strong></font></td>
</tr>
</table>

<table>
<tr>
<td width='875'>Sumber : <a href='www.windowsvista.com'title='WebSite WindowsVISTA'>WebSite Windows VISTA</a></td>
</tr>
<tr>
<td><i>Diposkan di Batu, 13 Februari 2011 oleh <a href="http://twitter.com/ajungpangi"title="Agung Panji Sasmito"><b>ajungpangi</b></a>.</i></td>
</tr>
</table>
</center>
</html>


Screenshoot :


Mau tahu webpage ini secara langsung?
Klik saja ajungpangi.110mb.com =)

0 komentar

Belajar Web Programming : Tugas Praktikum 1 Modul 2 - Komponen HTML Lanjut

Posted in , | 2/13/2011 04:16:00 PM | by Agung P. Sasmito | @ajungpangi

Selamat siang =)
Setelah mengerjakan studi kasus, langkah selanjutnya adalah mengerjakan tugas praktikum. Nah, kali ini di modul 2 kita dituntut untuk bisa menggunakan tabel. Sekarang saatnya kita membuat diagram batang statis dengan menggunakan tabel.

Mau tahu caranya? Algoritmanya cukup sederhana. Baris-baris yang ingin kita buat diagram cukup kita span kemudian kita beri background colour. Sekarang akan saya tunjukkan cara membuat diagram dengan menggunakan tabel.

Sintaks:


<!DOCTYPE HTML>
<html lang = "en">
<title>Grafik - Tugas Praktikum 1 Modul 2 - ajungpangi</title>
<body>
<center>
<font face="Copperplate Gothic Bold"size='5'color='blue'>Layanan Internet Broadband <br/>yang Digunakan oleh Mahasiswa PTI</font>
<br/><br/>
<table border = '0' cellspacing='0'>
<tr>
<td height='20'width='10'><div align='right'><font face='Arial'>100 </font></div></td>
<td rowspan='13'height='20'width='2' bgcolor='black'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>

<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='10'height='20'width='20'bgcolor='blue'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td rowspan='9'height='20'width='20'bgcolor='red'></td>
<td rowspan='9'height='20'width='20'bgcolor='green'></td>
<td height='20'width='20'></td>
<td rowspan='9'height='20'width='20'bgcolor='aqua'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td rowspan='8'height='20'width='20'bgcolor='yellow'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'><div align='right'><font face='Arial'>50 </font></div></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='5'height='20'width='20'bgcolor='red'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='5'height='20'width='20'bgcolor='aqua'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='5'height='20'width='20'bgcolor='blue'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='5'height='20'width='20'bgcolor='aqua'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='4'height='20'width='20'bgcolor='blue'></td>
<td height='20'width='20'></td>
<td rowspan='4'height='20'width='20'bgcolor='yellow'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='4'height='20'width='20'bgcolor='green'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='4'height='20'width='20'bgcolor='green'></td>
<td rowspan='4'height='20'width='20'bgcolor='yellow'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='3'height='20'width='20'bgcolor='green'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='3'height='20'width='20'bgcolor='yellow'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='3'height='20'width='20'bgcolor='red'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='2'height='20'width='20'bgcolor='red'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='2'height='20'width='20'bgcolor='blue'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'bgcolor='aqua'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td rowspan='2'height='2'width='10'><div align='right'><font face='Arial'>0 </font></div></td>
<td colspan='26'height='2'bgcolor='black'></td>
</tr>
<tr>
<td colspan='26'height='10'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='2'></td>
<td height='20'width='20'></td>
<td colspan='5'height='20'width='20'><center><font face='Arial 'color='purple'><b>PTI 2007</b></font></center></td>
<td height='20'width='20'></td>
<td colspan='5'height='20'width='20'><center><font face='Arial 'color='purple'><b>PTI 2008</b></font></center></td>
<td height='20'width='20'></td>
<td colspan='5'height='20'width='20'><center><font face='Arial 'color='purple'><b>PTI 2009</b></font></center></td>
<td height='20'width='20'></td>
<td colspan='5'height='20'width='20'><center><font face='Arial 'color='purple'><b>PTI 2010</b></font></center></td>
<td height='20'width='20'></td>
</tr>
</table>
</center>
<br/>
<div align = 'center'>
<table border = '0' cellspacing='0'>
<tr>
<td colspan='3'width='50'height='20'><font face='Arial'><i><b>Keterangan</b></i></font></td>
</tr>
<tr>
<td width='50'height='20'bgcolor='red'></td>
<td align='center'width='10'height='20'>:</td>
<td width='470'height='20'><font face='Arial 'color='purple'><b>Telkomsel Flash (PT. Telekomunikasi Seluler)</b></font></td>
</tr>
<tr>
<td width='50'height='20'bgcolor='blue'></td>
<td align='center'width='10'height='20'>:</td>
<td width='470'height='20'><font face='Arial 'color='purple'><b>Mobi - Smart EvDO (PT. Smartfren Sinarmas)</b></font></td>
</tr>
<tr>
<td width='50'height='20'bgcolor='green'></td>
<td align='center'width='10'height='20'>:</td>
<td width='470'height='20'><font face='Arial 'color='purple'><b>Wimode - Aha (Bakrie Connectifity)</b></font></td>
</tr>
<tr>
<td width='50'height='20'bgcolor='yellow'></td>
<td align='center'width='10'height='20'>:</td>
<td width='470'height='20'><font face='Arial 'color='purple'><b>Lintasarta (Indosat Broadband)</b></font></td>
</tr>
<tr>
<td width='50'height='20'bgcolor='aqua'></td>
<td align='center'width='10'height='20'>:</td>
<td width='470'height='20'><font face='Arial 'color='purple'><b>Other Wireless</b></font></td>
</tr>
</table>
</div>
</body>
</html>


Sintaks yang cukup panjang dan membuat pusing -_-
Kira-kira seperti apa yaa jadinya?

Hasil Screenshoot:

Mau lebih dekat dengan webpage ini?
Kunjungi ajungpangi.110mb.com =)

0 komentar
Langganan: Postingan (Atom)

TInggalkan Komentar