It's Vie Zone....: PTI 478

Tampilkan postingan dengan label PTI 478. Tampilkan semua postingan

Rabu, 31 Maret 2010

Aplikasi Login Form Sederhana (Tanpa Database)

Author: It's Vie Zone | at : 18.24 | Category : PTI 478 |

Pemrosesan form (form processing) merupakan operasi mendasar pada

aplikasi web. Dalam konteks pengembangan aplikasi web dinamis, langkah

ini pasti akan dilakukan. Sebagai contoh, untuk menerima masukan dari user,

tentu diperlukan sekali form isian dan cara pemrosesannya. Begitu pula

halnya ketika administrator ingin masuk ke sistem, tentu memerlukan suatu

antarmuka penghubung. Intinya, keberadaan form dan pemrosesannya mutlak

diperlukan dalam membangun aplikasi web yang interaktif.

Pada aplikasi web, teknik pengiriman form dapat dilakukan melalui tiga

metode: POST, GET, dan kombinasi keduanya. Dalam konteks PHP,

parameter-parameter GET dapat dibaca melalui superglobal $_GET,

sedangkan POST melalui $_POST. Selain itu, keduanya juga dapat dibaca

menggunakan $_REQUEST.

contohnya seperti gambar berikut:

codingnya sebagai berikut:

<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><br /><br /><html><br /><head><br /><title>Login Form</title><br /><style type="text/css"><br /><br />#apDiv1 {<br />position:absolute;<br />width:300px;<br />height:300px;<br />z-index:1;<br />left: 449px;<br />top: 136px;<br />background-image: url(header.jpg);<br />border: 2px solid Blue;<br />}<br />#apDiv3 {<br />position:absolute;<br />width:80px;<br />height:25px;<br />z-index:2;<br />left: 145px;<br />top: 244px;<br />}<br />.style3 {<br />font-size: 10px;<br />font-weight: bold;<br />}<br />#apDiv2 {<br />position:absolute;<br />width:412px;<br />height:115px;<br />z-index:2;<br />top: 0px;<br />left: 2px;<br />}<br />#header{<br />width:300px;<br />height:98px;<br />background-image: url(top.jpg);<br />}<br /><br />body {<br />background-image: url(xxx.jpg);<br />}<br /></style><br /></head><br /><body onload="document.form1.user.focus();"><br /><script type="text/javascript"><br /><br />function error1()<br />{<br />alert('Masukkan Username dan Password Terlebih Dahulu ');<br />}<br /><br />function check()<br />{<br />if(form1.pass.value == "" || form1.user.value=="")<br />{<br />error1();<br />}<br />}<br /></script><br /><form name="form1" method="post" action="check.php"><br /><div id="apDiv1"><br /><div id="header"><br /></div><br /><div><br /><div align="center"><strong><br />Username :</strong><br /><br /><br /><input type="text" name="user" size="35" value="" style="background-color:#6cae15" autocomplete="off"><br /><br /><br /><br /><br /><strong>Password : </strong><br /><br /><br /><input type="password" name="pass" size="35" style="background-color:#6cae15" autocomplete="off"><br /><br /><br /><br /><br /></div><br /></div><br /><br /><br /><div id="apDiv3"><br /><input type="submit" name="submit" value=" SUBMIT " onclick="check()"><br /></div><br /></div><br /></form><br /></body><br /></html> <br />

untuk kode php-nya sebagai berikut:

Read rest of entry

Selasa, 30 Maret 2010

Men-Generate Sel Tabel Secara Fleksibel

Author: It's Vie Zone | at : 19.53 | Category : PTI 478 |

PHP (PHP: Hypertext Preprocessor ) merupakan salah satu bahasa web-
scripting yang sangat powerful. Sejak pertama kali diperkenalkan, bahasa ini
dimaksudkan untuk menghasilkan halaman-halaman web yang dinamis.
Hingga saat ini, PHP banyak sekali digunakan dalam membuat aplikasi
web—baik lokal maupun Internet—dinamis dan atraktif. Misalnya seperti pada contoh di bawah ini:

codingnya sebagai berikut:

<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<br /><html>
<br /><head>
<br /><title>TUGAS MODUL 5</title>
<br /><style type="text/css">
<br />
<br /></style>
<br /></head>
<br /><body>
<br /><script language="JavaScript" type="text/javascript">
<br />
<br /></script>
<br /><form method="post" action="tgs5.php">
<br /><h3 align="center" class="style1">MEMBUAT TABEL FLEKSIBEL DENGAN GENERATE TABEL</h3>
<br /><div align="center">
<br /><table width="327" border="0" bgcolor="#FFFFFF">
<br /><tr bgcolor="#6cae15">
<br /><td width="121" style="text-align:center">Rows</td>
<br /><td width="196"><strong>= </strong>
<br /><input name="JumlahRow" type="text" id="JumlahRow" onKeyUp="getmax();" onfocus="this.select();"></td>
<br /></tr>
<br /><tr bgcolor="#6cae15">
<br /><td style="text-align:center"><label>Columns</label></td>
<br /><td><strong>= </strong>
<br /><input name="JumlahColum" type="text" id="JumlahColum" onKeyUp="getmax();" onfocus="this.select();"></td>
<br /></tr>
<br /><tr bgcolor="#6cae15">
<br /><td style="text-align:center">Cell Total </td>
<br /><td><strong>= </strong>
<br /><input name="JumlahCell" type="text" id="JumlahCell" onKeyUp="getmax();" onFocus="this.select();"></td>
<br /></tr>
<br /><tr bgcolor="#6cae15">
<br /><td style="text-align:center">Max Cells </td>
<br /><td><strong>= </strong>
<br /><input name="maxcells" type="text" id="maxcells" disabled="disabled" style="text-align:left"></td>
<br /></tr>
<br /></table>
<br /></div>
<br /><div id="apDiv1">
<br /><input type="submit" name="Generate" value="Generate"><input type="reset" name="Reset" value="Reset">
<br /></div>
<br /></form>
<br /></body>
<br />
<br /></html>
<br />

untuk phpnya sebagai berikut:

<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<br /><html>
<br /><head>
<br /><title>Hasil Generate Tabel</title>
<br /></head>
<br /><body>
<br /><div align="center">
<br /><?php
<br />$rows = 1;
<br />$columns = 1;
<br />$cells = 1;
<br />?>
<br />
<br /><?php $rows = (int) $_POST["JumlahRow"]; ?>
<br /><?php $columns = (int) $_POST["JumlahColum"]; ?>
<br /><?php $cells = (int) $_POST["JumlahCell"]; ?>
<br />
<br /><strong>Kamu Memilih</strong> <?php echo $rows; ?> <em>rows,</em><br />
<br /><strong>Kamu Memilih</strong> <?php echo $columns; ?> <em>columns,</em><br />
<br /><strong>Dan Anda Membutuhkan</strong> <?php echo $cells; ?> <em>cells,</em><br />
<br /><br />
<br /><br />
<br /><?php
<br />$width = $columns * 75;
<br />echo "<table width=".$width." border=1>";
<br />$rw = 0;
<br />$cel = 1;
<br />while ($rw < $rows && $cel <= $cells)
<br />{
<br />echo "<tr>";
<br />$cl = 0;
<br />while ($cl < $columns)
<br />{
<br />if ($cel <= $cells)
<br />{
<br />echo "<td><div align=center>".$cel."</div></td>";
<br />$cel++;
<br />}
<br />$cl++;
<br />}
<br />echo "</tr>";
<br />$rw++;
<br />}
<br />echo "</table>";
<br />?>
<br /></div>
<br /></body>
<br /></html>
<br />
<br />

--> Passing argumen di PHP (Passing by value dan Passing by reference)

Passing argumen adalah variabel yang diberikan ke method dalam PHP. PHP mendukung passing by value (defaultnya) dan passing by reference.Variable-length argumen list juga didukung.

1. Passing by values
Ketika pass-by-values terjadi, method membuat sebuah salinan dari nilai variable yang dikirimkan ke method. Walaupun demikian, method tidak dapat secara langsung memodifikasi nilai variabel pengirimnya meskipun parameter salinannya sudah dimodifikasi nilainya di dalam method.
contohnya:
function jumlah($value) {
$value++;
}
$input=8;
jumlah($input);
echo $input;
?>

Keterangan:
Pada fungsi jumlah($input); jumlah dipanggil, fungsi tersebut akan memasukkan nilai dari variabel $input kedalam argumennya, jadi disini argumen fungsi jumlah adalah 8. Selanjutnya PHP meng-copy nilai asli tersebut, kemudian hasil copy-nya digunakan untuk proses manipulasi fungsi, sedangkan nilai yang asli dibiarkan tidak berubah. Proses manipulasinya yaitu:

$value++;
$value = $value + 1
$value = 8 + 1
$value = 9
Untuk output,
echo $input;

Passing by value tidak merubah nilai variabel aslinya jika nilai argumen dalam fungsi berubah. Jadi outputnya adalah 8.

2. Passing by reference

Untuk membolehkan sebuah fungsi memdodifikasi nilai argumennya.
Agar argumen dilewatkan dengan by reference maka tambahkan tanda ampersand (&) di depan argumen, sbb:

?php
function jumlah(&$nilai)
{
$nilai++;
}
$input=5;
jumlah($input);
echo $input;
?>

Menghasilkan: 6

Read rest of entry

Rabu, 10 Maret 2010

Membuat Form Pemesanan Makanan/Minuman Menggunakan Javascript

Author: It's Vie Zone | at : 17.29 | Category : PTI 478 |

    Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya bahasa ini dinamakan “LiveScript” yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2. Pada masa itu bahasa ini banyak di kritik karena kurang aman, pengembangannya yang terkesan buru buru dan tidak ada pesan kesalahan yang di tampilkan setiap kali kita membuat kesalahan pada saat menyusun suatu program. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman “Java” ) pada masa itu, maka Netscape memberikan nama “JavaScript” kepada bahasa tersebut pada tanggal 4 desember 1995. Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai “Jscript” di browser Internet Explorer 3.

    Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML, sepanjang sejarah internet bahasa ini adalah bahasa skrip pertama untuk web. Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi browser bukan disisi server web.

    Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang berisi skrip skrip dari Javascript dan tentu saja terselip di dalam dokumen HTML. Javascript juga tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya (pada kenyataannya kompilator Javascript sendiri sudah termasuk di dalam browser tersebut). Lain halnya dengan bahasa “Java” (dengan mana JavaScript selalu di banding bandingkan) yang memerlukan kompilator khusus untuk menterjemahkannya di sisi user/klien.

    Contoh penggunaan dari javascript sebagai berikut:

source codingnya sebagai berikut:

<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html><br /><head><br /><title>Modul4</title><br /></head><br /><body background="xxx.jpg"><br /><!--Listing Code JavaScript --><br /><script language="JavaScript" type="text/javascript"><br /><!-- function hitungPesan(){ var nota = document.form2; var hargaBakso = 12000*eval(nota.hBakso.value); var hargaSoto = 10000*eval(nota.hSoto.value); var hargaMie = 15000*eval(nota.hMie.value); var hargaDegan = 7000* eval(nota.hDegan.value); var hargaCampur = 7000* eval(nota.hCampur.value); var jumlahTotal = hargaBakso + hargaSoto + hargaMie + hargaDegan + hargaCampur; if (jumlahTotal > 50000){<br />    nota.Total.value = jumlahTotal;<br />    nota.Diskon.value = 10000;<br />    nota.Bayar.value = jumlahTotal-eval(nota.Diskon.value);<br /> } else {<br />    nota.Total.value = jumlahTotal;<br />    nota.Diskon.value = 0;<br />    nota.Bayar.value = jumlahTotal-eval(nota.Diskon.value);<br /> }<br />}<br />function resetForm(){<br />document.form2.reset();<br />}<br />//--><br /></script><br /><h3><strong>FORM PEMESANAN MAKANAN/MINUMAN</strong></h3><br /><form name="form2" action="#"><br /><table border="3px"><br /><tr bgcolor="yellow"><br />    <th>No</th><br />    <th>Makanan/Minuman</th><br />    <th>Harga</th><br />    <th>Pesan</th><br /></tr><br /><tr bgcolor="#6cae15"><br />    <td width="10">1</td><br />    <td width="170">Bakso Istimewa</td><br />    <td width="100">@ <input type="text" name="bakso" value="12000" size="8" readonly="readonly"></td><br />    <td width="150"><input type="text" name="hBakso" value="0" onchange="hitungPesan()" onfocus="this.select()"></td><br /></tr><br /><tr bgcolor="#6cae15"><br />    <td>2</td><br />    <td>Soto Spesial</td><br />    <td>@ <input type="text" name="soto" value="10000" size="8" readonly="readonly"></td><br />    <td><input type="text" name="hSoto" value="0" onchange="hitungPesan()" onfocus="this.select()"></td><br /></tr><br /><tr bgcolor="#6cae15"><br />    <td>3</td><br />    <td>Mie Ayam Super</td><br />    <td>@ <input type="text" name="mie" value="15000" size="8" readonly="readonly"></td><br />    <td><input type="text" name="hMie" value="0" onchange="hitungPesan()" onfocus="this.select()"></td><br /></tr><br /><tr bgcolor="#6cae15"><br />    <td>4</td><br />    <td>Es Degan</td><br />    <td>@ <input type="text" name="degan" value="7000" size="8" readonly="readonly"></td><br />    <td><input type="text" name="hDegan" value="0" onchange="hitungPesan()" onfocus="this.select()"></td><br /></tr><br /><tr bgcolor="#6cae15"><br />    <td>5</td><br />    <td>Es Campur</td><br />    <td>@ <input type="text" name="campur" value="7000" size="8" readonly="readonly"></td><br />    <td><input type="text" name="hCampur" value="0" onchange="hitungPesan()" onfocus="this.select()"></td><br /></tr><br /><tr bgcolor="yellow"><br />    <td colspan="3" align="right"><strong>Jumlah Total</strong></td><br />    <td><input type="text" name="Total" value="0" readonly="readonly"></td><br /></tr><br /><tr bgcolor="yellow"><br />    <td colspan="3" align="right"><strong>Diskon</strong></td><br />    <td><input type="text" name="Diskon" value="0" readonly="readonly"></td><br /></tr><br /><tr bgcolor="yellow"><br />    <td colspan="3" align="right"><strong>Jumlah Dibayar</strong></td><br />    <td><input type="text" name="Bayar" align="right" value="0" readonly="readonly"></td><br /></tr><br /></table><br/><br /><input type="button" value="BATAL" onclick="resetForm()"><br /></form><br /></body><br /></html><br />

Read rest of entry

Rabu, 03 Maret 2010

Membuat Desain Web Dengan Memanfaatkan CSS (Cascading style sheet )

Author: It's Vie Zone | at : 08.40 | Category : PTI 478 |

Postingan kali ini kembali lagi membahas tentang pemrograman web dengan memanfaatkan CSS. apakah CSS???? yuk kita bahas dulu... :)
Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan
bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen.
Rekomendasi CSS menguraikan tiga jenis style:
- Embedded: properti style diletakkan di dalam satu blok di dokumen
HTML.
- Inline: properti style diterapkan secara langsung per baris atau per elemen
HTML.
- Linked: properti style diletakkan di file berekstensi css dan dikaitkan
dengan dokumen HTML.

Setelah tau apa itu CSS, selanjutnya masuk ke penggunaan dari CSS. simak yuk.... !!! Yuk, mari!!!!!

1. Membuat desain layout halaman web dengan memanfaatkan division.

Untuk membuat design layout seperti gambar diatas dengan memanfaatkan CSS untuk melakukan pembagian-pembgian halaman dari suatu web (division). Adapun CSS-nya sebagai berikut:

#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;
}
#header {
height: 80px;
border: 1px solid blue;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#inner2 {
float: left;
width: 544px;
height: 330px;
border: 1px solid green;
}
#top {
height: 80px;
border: 1px solid blue;
}
#content {
float: left;
margin-right: 20px;
width: 270px;
height: 240px;
border: 1px solid red;
}
#right {
float: right;
width: 250px;
height: 200px;
border: 1px solid red;
}
#footer {
clear: both;
height: 50px;
border: 1px solid blue;
}

sedangkan untuk coding HTML-nya sebgai berikut:

selanjutnya.....

2. Membuat desain halaman web sederhana yang atraktif.

Dari desain layout yang tadi sudah di buat, kita dapat melanjutkannya untuk membuat desain halaman web sedehana yang atraktif seperti gambar diatas.
Untuk coding CSS-nya seperti berikut:

#wrapper {
margin: auto;
width: 900px;
border: 0;
}
#header {
height: 120px;
border: 1px solid green;
border-top: 3px solid green;
border-left: 3px solid green;
border-right: 3px solid green;
border-bottom: 10px solid green;
background: green url("header.jpg");
margin-bottom: 0px;
}
#logoum {
float: left;
height: 80px;
width: 81px;
border: 0;
background: white url("um.png");
margin-top: 25px;
margin-left: 45px;
}
#jurusan {
float: left;
height: 35px;
width: 300px;
border: 0;
margin-top: 35px;
margin-left: 5px;
}
#hmmmm {
float: right;
height: 120px;
width: 400px;
border: 0;
}
#menu {
float: left;
height: 25px;
width: 350px;
border: 0;
margin-left: 30px;
margin-top: 2px;
}
#cari {
clear: both;
float: right;
height: 20px;
width: 300px;
margin-top:65px;
margin-right:15 px;
border: 0;
}
#search1 {
float: left;
height: 10px;
width: 120px;
margin-left: 30px;
margin-top: 4px;
border: 0;
}

#inner {
float: left;
border: 0;
}
#sidebar {
float: left;
width: 200px;
height: 413px;
margin-right: 0px;
border: 1px solid green;
background: green url("sidebar.jpg");
}
#inner2 {
float: left;
width: 700px;
height: 400px;
border: 0;
}
#top {
height: 80px;
border: 0;
background: green url("page.jpg");
}
#content {
float: left;
margin-left: 2px;
margin-top: 3px;
margin-right: 15px;
width: 429px;
height: 325px;
border: 0;
}

#Rightup {
float: left;
width: 250px;
height: 150px;
margin-top: 0px;
border: 1px solid green;
background-color: #6cae15;
}
#Rightbot {
float: left;
width: 250px;
height: 150px;
margin-top: 10px;
border: 0;
background: green url("kampus.jpg");
}
#footer {
clear: both;
height: 80px;
border: 1px solid green;
background: green url("footer.jpg");
}
#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: #6cae15 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background: #5e9711 no-repeat left center; color: #ffffff
}

.style_1 {
font-family: Butch;
font-size: 32px;
font-weight: bold;
color: green;
}
.style_2{
font-family: Butch;
font-size: 16 px;
font-weight: bold;
color: green;
}
.style_3{
font-style: italic;
font-family: georgia;
font-size: 14px;
}

Sedangkan coding HTML-nya sebagai berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<br />
<br /><head>
<br /><title>Desain Halaman Web Atraktif</title>
<br /><link rel="stylesheet" href="modul3-2.css" type="text/css" />
<br />
<br /></head>
<br />
<br /><body>
<br /><div id="wrapper">
<br /><div id="header">
<br /><div id="logoum">
<br /></div>
<br /><div align= "center" class="style_1" id="jurusan">TEKNIK ELEKTRO</div>
<br /><div id="hmmmm">
<br /><div id="menu">
<br /><div align="right"><a href="http://vie218.blogspot.com" target="_blank">Home</a> | <a href="http://vie218.blogspot.com" target="_blank">Sitemap</a> | <a href="http://vie218.blogspot.com" target="_blank">RSS</a> | <a href="http://vie218.blogspot.com" target="_blank">Contact</a> | <a href="http://vie218.blogspot.com" target="_blank">About Us</a> </div>
<br /></div>
<br /><div id="cari">
<br /><div id="search1">
<br /><div align="right"><em><strong>Search</strong></em></div>
<br /></div>
<br /><input name="q" size="17" type="text"/>
<br /></div>
<br /></div>
<br /></div>
<br /><div id="inner">
<br /><div id="sidebar">
<br /><div id="leftmenu">
<br /><ul>
<br /><li>
<br /><div align="center"><a href="http://vie218.blogspot.com">Home</a></div>
<br /></li>
<br /><li>
<br /><div align="center"><a href="http://vie218.blogspot.com">News & Media </a></div>
<br /></li>
<br /><li>
<br /><div align="center"><a href="http://vie218.blogspot.com">Tutorial</a></div>
<br /></li>
<br /><li>
<br /><div align="center"><a href="http://lvie218.blogspot.com">Tips and Trik</a></div>
<br /></li>
<br /><li>
<br /><div align="center"><a href="#">Download</a></div>
<br /></li>
<br /></ul>
<br /></div>
<br /></div>
<br /><div id="Inner2">
<br /><div id="top">
<br /></div>
<br /><div id="content">
<br /><p class="style_2">S1 Pendidikan Teknik Informatika</p>
<br /><hr style="color:green"/>
<br /><p>by. Vie</p>
<br /><p class="style_3">Program studi merupakan kesatuan rencana belajar yang diselenggarakan atas dasar suatu kurikulum dengan tujuan agar mahasiswa dapat menguasai pengetahuan, keterampilan, dan sikap yang sesuai dengan rumusan visi, misi, tujuan, area okupasi dan kompetensi lulusan.</p>
<br /><p class="style_2">Visi</p>
<br /><p class="style_3">Mewujudkan Prodi S1 Pendidikan Teknik Informatika sebagai program studi yang unggul dan menjadi rujukan nasional dalam pengembangan bidang pendidikan dan sain khususnya dalam bidang pendidikan teknik infromatika yang relevan dengan kebutuhan pembangunan, masyarakat dan kemanusiaan.</p>
<br />
<br /></div>
<br /><div id="Rightup">
<br /><p><strong>Sekilas Pandang</strong></p>
<br /><ul> 
<br /><li><a href="http://vie218.blogspot.com"><font color="white">Informasi Jurusan</font></a></li> 
<br /><li><a href="http://vie218.blogspot.com"><font color="white">Program Studi</font></a></li> 
<br /><li><a href="http://vie218.blogspot.com"><font color="white">Dosen dan Karyawan</font></a></li> 
<br /></ul> 
<br /></div>
<br /><div id="Rightbot">
<br /><div align="center"><u><a href="http://um.ac.id" ><strong><font color="red">Link ke UM</font></strong></a></u>
<br /></div>
<br /></div>
<br /></div>
<br /></div>
<br /><div id="footer">
<br /><p align="center"><strong>Design By Novi Dyah Puspitasari  </strong></p>
<br /><p align="center"><strong> © Pendidikan Teknik Informatika UM 2007 </strong></p>
<br /></div>
<br /></div>
<br /></body>
<br /></html>

Itulah sedikit contoh pemanfaatan CSS untuk pembuatan desain web....
Selamat Mencoba....
Semoga bermanfaat...
N tunggu kelanjutannya alias... to be continued... :)

Read rest of entry

Rabu, 24 Februari 2010

Memanfaatkan Elemen Tabel Pada Pemrograman Web

Author: It's Vie Zone | at : 01.10 | Category : PTI 478 |

Tabel.... hmmmm sesuatu yangg nggak asing bagi kita. dalem keseharian kita pun sering menggunakan tabel...
Mulai dari buat tabel untuk jadwal pelajaran,untuk absensi, untuk pencatatan keuangan dan lain-lain.
Ternyata eh ternyata, tabel itu juga bisa lho buat grafik, contohnya seperti grafik batang...penasaran... baca Za lanjutannya... ^_^

1. Kreasi Grafik Batang Statis dengan Memanfaatkan Elemen Tabel

Untuk membuat grafik batang statis seperti gambar di atas, kita bisa melakukan merger terhadap beberapa sel (mergeCell). Dan untuk memberikan kejelasan dari grafik batang kita dapat menambahkan warna dan juga keterangan dari tiap-tiap grafik batang.
Adapun source codenya sebagai berikut: download di sini atau klik di sini

2. Desain Tabel Perbandingan Item Dengan Memanfaatkan Fitur Pengelompokan

Untuk membuat desain tabel perbandingan item seperti gambar diatas dengan menggunakan border yang digunakan sebagai pemisah. Sehingga dapat ditata border-border mana yang diperlihatkan dan yang tidak diperlihatkan dalam tabel yang telah dibuat. Adapun source codenya sebagai berikut: download di sini atau klik di sini

Sekian postingan pemrograman web kali ini, moga bermanfaat
SELAMAT MENCOBA...^_^

Read rest of entry

Rabu, 17 Februari 2010

STUDI KASUS 1

Author: It's Vie Zone | at : 02.30 | Category : PTI 478 |

Studi kasus dari modul 1 Dasar-Dasar HTML, soalnya sebagai berikut:
Buat halaman web sederhana yang melibatkan elemen teks, garis, warna, dan gambar. Di mana terdapat minimal sebuah heading dan garis berwarna, gambar dengan garis tepi (border), dan halaman utama dengan latar belakang gambar sembarang.

HASIL: