Senin, 07 Maret 2011 |

Diposting oleh Abdul Patrick |

kali ane bakal share bagaimana program pemesanan makanan menggunakan JavaScript. cekidot

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

<head>

<title>JavaScript - Tugas Praktikum Modul 5</title>

</head>

<body>

<!--

function hitungPesan(){

var nota = document.form2;

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

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

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

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

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

var jumlahTotal = hargaBakso + hargaSoto + hargaMie + hargaDegan + hargaCampur;

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>

<tr>

<th>Makanan/Minuman</th>

<th>Harga</th>

<th>Pesan</th>

</tr>

<tr>

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

</tr>

<tr>

<td>Soto Spesial</td>

</tr>

<tr>

<td>Mie Ayam Super</td>

</tr>

<tr>

<td>Es Degan</td>

</tr>

<tr>

<td>Es Campur</td>

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

</table><br/>

</form>

</body>

</html>

Label: Programming, PTI478 |

0 komentar |

Membuat Perhitungan Sederhana dengan JavaScript

Diposting oleh Abdul Patrick |

Edit Entri

kali ini ane bakal share gmna cara membuat perhitungan sederhana menggunakan JavaScript.

langsung ajha deh. cekidot.

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

<head>

<title>JavaScript - Studi Kasus Modul 5</title>

</head>

<body>

<!--

function hitung(){

var x=eval(document.form1.x.value);

var y=eval(document.form1.y.value);

var pil= document.form1.opt.value;

if (pil == "tambah") {

var z = x + y;

}

else if (pil == "kurang") {

var z = x - y;

}

else if (pil == "kali") {

var z = x * y;

}

else if (pil == "bagi") {

var z = x / y;

}

document.form1.hasil.value = z;

}

function resetForm(){

document.form1.reset();

}

//-->

</script>

</select>

</form>

</body>

</html>

Label: Programming, PTI478 |

3 komentar |

Tugas Praktikum Modul 4

Senin, 28 Februari 2011 |

Diposting oleh Abdul Patrick |

Edit Entri

Karena tuntutan menggunakan HTML5 tapi malah banyak errornya. akhirnya pake HTML4 ajha dah. hehe

CSS

body {

margin:5px auto;

padding:0;

font:0.72em/150% Calibri;

}

#wrapper {

margin:auto;

width:980px;

}

#header {

height:80px;

margin:0px auto;

background:#0000;

}

#header-content{

height:70px;

margin:auto;

background:url(image/header.jpg);

}

#menu-top {

font-size:small;

height:20px;

float:right;

padding:0px 50px;

font-weight:bold;

}

#logo {

float:left;

margin:10px 10px 10px 50px;

height:50px;

}

#site-title h2{

float:left;

padding:0px 10px;

height:30px;

margin:20px 0px;

font:2.1em/100% 'ravie';

font-weight: bold;

}

#search {

clear:right;

float:right;

margin:20px 50px 0px auto;

height:30px;

font-weight:bold;

}

#inner {

float:left;

margin:0px;

}

#footer {

clear:both;

height:60px;

background:#2033a9;

}

#footer p {

text-align:center;

}

#sidebar {

float:left;

width:200px;

height:400px;

background-color:#bbbbbb;

}

#content {

float:right;

width:780px;

height:400px;

background:#FFF;

}

#content-top {

clear:both;

margin:auto;

width:780px;

height:140px;

background-image:url(TopBg.jpg)

}

#content-main {

float:left;

margin:auto;

width:480px;

height:240px;

}

#content-main p, h3{

padding: 10px 20px 0px 20px;

text-align:justify;

}

.style1 {

font-size:x-small;

}

#content-main hr{

width:440px;

color:#FF9900;

margin: 10px 20px 0px 20px;

}

#content-right {

float:right;

margin:10px auto;

width:260px;

border: 2px solid blue;

background:#4a5cca;

}

#content-right h3{

padding: 10px 20px 0px 20px;

text-align:justify;

}

#content-right ul{

padding: 10px 20px 20px 40px;

list-style:square;

}

#leftmenu ul {

width:200px;

list-style-type:none;

padding:0;

margin:0;

}

#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {

padding-left:15px;

text-decoration:none;

}

#leftmenu a {

padding: 5px 0px 5px 15px;

display:block;

background:#818dd5 no-repeat left center;

margin: 0px 0px 1px; color:#000;

}

#leftmenu a:hover {

background:#5e9711 no-repeat left center;

color:#fff;

}

HTML

<!DOCTYPE HTML>

<head>

<title>Tugas Praktikum Modul 4</title>

</head>

Home | Sitemap | RSS | Contact | About Us

</div>

</div>

<h2>TEKNIK ELEKTRO</h2>

</div>

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

</div>

<ul>

<li><a href="#">News and Media</a></li>

<li><a href="#">Tutorials</a></li>

<li><a href="#">Tips and Tricks</a></li>

<li><a href="#">Download</a></li>

</ul>

</div>

</div>

<h3>Pengumuman Lomba Desain Header Web</h3>

<hr />

Minggu, 28 Februari 2010

</p>

<p>

Setelah sempat tertunda beberapa hari, akhirnya panitia lomba desain header web mengumumkan hasil akhir lomba. Sebagaimana disampaikan pada tulisan sebelumnya, seleksi dilakukan secara ketat melalui tiga tahap: 10 besar, 5 besar, dan 3 besar. Dalam pelaksanaannya, panitia teknis dan tim juri bekerja secara cermat dan hati-hati. Adapun hasil selengkapnya bisa dilihat di blog resmi Jurusan Teknik Elektro.

Penyerahan hadiah dan sekaligus piagam penghargaan akan dijadwalkan secepatnya. Untuk itu, diharap para pemenang segera menghubungi panitia guna melakukan verifikasi akhir. Rencananya, penyerahan secara simbolis akan dilakukan langsung oleh Ketua Jurusan, Bapak Slamet Wibawanto.

</p>

</div>

<h3>Events</h3>

<ul>

<li><a href="#">Pelatihan KORPS ASISTEN ELEKTRO</a></li>

<li><a href="#">Projas TE</a></li>

<li><a href="#">Kontes Robot Indonesia</a></li>

<li><a href="#">Kunjungan Industri S1 PTI</a></li>

</ul>

</div>

<br />

</div>

</body>

</html>

0 komentar

Study Kasus Modul 4

Diposting oleh Abdul Patrick |

Edit Entri

acak acakan whes... hehe..

CSS:

header, nav, inner, content, aside, footer{

display: block;

}

header{

height: 80px;

border: 2px solid green;

}

nav{

height: 60px;

border: 2px solid blue;

}

home, articles, download, aboutus{

height: 25px;

float: left;

text-align: center;

margin-top: 15px;

margin-left: 10px;

width: 100px;

border: 1px solid green;

}

search{

height: 20px;

text-align: center;

margin-top: 15px;

margin-right: 30px;

float: right;

width: 100px;

border: 1px solid green;

}

inner{

width: 500;

height: 300;

float: right;

border: 2px solid red;

}

sidebar{

float: right;

margin-right: 20px;

margin-top: 20px;

margin-left: 20px;

width: 130px;

height: 270px;

border: 2px dashed red;

}

float: left;

width: 125px;

height: 30px;

border: 2px solid blue;

}

contents{

float: right;

margin-right: 20px;

margin-top: 20px;

margin-left: 20px;

width: 494px;

height: 270px;

border: 2px dashed green;

}

footer{

clear: both;

height: 50px;

border: 2px solid blue;

}

HTML

<!DOCTYPE HTML>

<head>

<title>Studi Kasus Modul 4</title>

</head>

<body>

<header>Header</header>

<nav>

<articles>Articles</articles>

<download>Download</download>

<aboutus>About Us</aboutus>

<search>Search</search>

</nav>

<inner>

<login>Login</login>

<br/>Aside

</sidebar>

<contents>Content</contents>

Section

</inner>

<footer>Footer</footer>

</body>

</html>

0 komentar

Membuat Layut Login Face-Mu

Selasa, 15 Februari 2011 |

Diposting oleh Abdul Patrick |

Edit Entri

Langsung ajha ya. cekidot.

Script:

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

<head>

<head>

<title>Welcom to Face-Mu^^</title>

<!--

.box1 {

float: right;

padding: 5px;

height: 100px;

}

.box2 {

float: right;

padding: 5px;

height: 100px;

}

#header{

height: 80px;

background:#1e90ff;

}

#logo{

float: left;

padding-left: 100px;

padding-top: 20px;

}

.box3 {

}

.box4 {

width: 1300px;

height: 18px;

background: #4169E1;

text-align:left;

font-size:8px;

color:blue

}

#tengah {

float: left;

}

#kiri {

float: left;

width: 780px;

height: 380px;

}

#subkiri{

width: 300px;

height: 200px;

padding: 50px;

color: #4169E1;

}

#kanan {

float: left;

padding: 5px;

width: 370px;

height: 380px;

color: #4169E1;

}

#bottom {

clear: both;

height: 30px;

background: #4169E1;

font-size:6px;

color: #bde0e6;

}

-->

</style>

</head>

<body>

</div>

<br>

</div>

Password <br><input type="text" size="25">

<br>Forgot password?

</div>

Email or phone<br><input type="text" size="25">

<br><input type="checkbox">Keep me log in

</div>

<form>

<font size="5">Face-Mu Connecting people</font>

</div></form>

</div>

<h2>Ayo Mendaftar</h2>

Gratis sampai akhir zaman

<hr/>

<form>

<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>Masukkan Ulang Email</td><td><input type="text" size="35"></td></tr>

<tr><td>Kata Sandi Baru</td><td><input type="text" size="35"></td></tr>

<tr><td>Saya Seorang</td><td>

<option value="wanita" selected>Wanita

<option value="pria">Pria

<option value="Bukan_dua2nya">Bukan dua-duanya

</select></td></tr>

</table>

</form>

</div>

</body>

</html>

0 komentar

Membuat Variasi Border pada CSS

Senin, 14 Februari 2011 |

Diposting oleh Abdul Patrick |

Edit Entri

untuk kali ini ane bakal sharing masalah beberapa variasi pada border dengan menggunakan CSS.

langsung ajha dah. cekidot.....

Script:

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

<head>

<title>Studi Kasus Modul 3</title>

<!--

.segitiga {

display: block;

height: 0;

width: 0;

border-bottom: 10em solid #f00;

border-left: 10em solid transparent;

font-weight: bold;

}

.lingkaran{

display: block;

height: 10em;

width: 10em;

font-weight: bold;

border: 0.2em solid #888943;

background-color: #CACC7F;

-moz-border-radius: 5em;

-webkit-border-radius: 5em;

-khtml-border-radius: 5em;

border-radius: 5px;

text-align: center;

}

.lingkaran2{

width:100px;

height:100px;

border-radius:50px;

-moz-border-radius:50px;

-webkit-border-radius:50px;

background:#000;

text-align:center;

font-size:20px;

color:#fff

}

.text-lingkaran{

padding-top: 37px;

}

.border1{

width:200px;

text-align:center;

padding:10px;

background:#000000;

color: red;

font-weight: bold;

-moz-border-radius: 2em 0;

-webkit-border-top-left-radius: 20px;

-webkit-border-bottom-right-radius: 20px;

}

.border2{

font-weight: bold;

border: 2.5px solid blue;

}

.shadow {

width: 200px;

box-shadow: 5px 5px 7px #222;

-moz-box-shadow: 5px 5px 7px #222;

-webkit-box-shadow: 5px 5px 7px #222;

}

-->

</style>

</head>

<body>

Ini Segitiga Loch!!

</div>

<p>

Ini Lingkaran Loch!!

</span>

</div>

<p>

Ini Keren Loch!

</div>

<p class="border2">Bordernya ada Shadownya Loch!

</div>

</body>

</html>

0 komentar

Membuat Tabel Pengelompokkan Data

Minggu, 06 Februari 2011 |

Diposting oleh Abdul Patrick |

Edit Entri

Setelah buat grafik batang pada posting sebelumnya. sekarang ane ngasih gimana cara membuat tabel pengelompokkan data. langsung ajha simak kelanjutannya. ^_^

Untuk Scriptnya:

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

<head>

<title>Tugas Praktikum 2.2</title>

</head>

<body>

<caption>PERBANDINGAN FITUR</caption>

<tr>

<th width=200>Fitur</th>

<th width=100>Enterprise</th>

</tr>

<tbody>

<tr><td>1<td>Garansi Seumur Hidup<td align="center">X<td align="center">-<td align="center">-</tr>

<tr><td>2<td>Multiuser<td align="center">X<td align="center">-<td align="center">-</tr>

<tr><td>3<td>Update otomatis<td align="center">X<td align="center">X<td align="center">-</tr>

<tr><td>4<td>Cetak Laporan<td align="center">X<td align="center">X<td align="center">-</tr>

<tr><td>5<td>Notifikasi Error<td align="center">X<td align="center">X<td align="center">X</tr>

<tbody>

</table>

</body>

</html>

Label: Kuliah, PTI478 |

0 komentar |

Abdul Patrick Blog

Membuat Perhitungan Sederhana dengan JavaScript

Tugas Praktikum Modul 4

Study Kasus Modul 4

Membuat Layut Login Face-Mu

Membuat Variasi Border pada CSS

Membuat Tabel Pengelompokkan Data

C-Box

Change Language

Langganan Artikel

Recent Comments

Popular Posts

Blog Traffic

Categories

About Me

Posting Info

Tags Cloud

Special Keywords

Followers

My Blog List ( DO FOLLOW )