Independent: 03/01/2010

Rabu, 31 Maret 2010

PTI 478

Login Form (tanpa database)

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.

Aplikasi form login sudah banyak kita jumpai dalam berbagai web. Form login ini memiliki fungsi sebagai identifier atau yang mengidentifikasi user atau admin yang akan menggunakan layanan web tersebut. Pembuatan aplikasi ini tanpa menggunakan database dimaksudkan hanya membuat dasar atau tampilannya saja. Tetapi, ini bisa dihubungkan dengan berbagai database, seperti My SQL, Ms.Access, maupun hanya sebuah text editor.

Sekarang kita menganjak ke proses pembuatannya. Aturan-aturan yang ditetapkan adalah sebagai berikut:
-->Buat aplikasi login form sederhana (tanpa database) yang terdiri dari field ID/Username dan Password. Gunakan variabel di PHP untuk mensimulasikan verifikasi data yang dimasukkan.
-->Spesifikasi:

*Terdapat scripting JavaScript untuk validasi awal (field tidak boleh

kosong, masukan id dan password harus huruf).

*Jika field kosong dan langsung di-submit, kembalikan fokus kursor ke

field pertama (id)

*Ada validasi sisi server (dari PHP) untuk memastikan bahwa nilai

field adalah string.

*Jika nilai id dan password sesuai dengan pre-defined value di variabel,

munculkan pesan selamat datang dan cetak nilai id. Sebaliknya, jika tidak sesuai, tampilkan pesan kegagalan. Set username-nya yaitu endrakilla dan password-nya 1234.

Tampilan aplikasinya seperti di bawah ini:

Dalam scripting, kita menggunakan penggabungan antara html, php, dan layanan CSS. Penggunaannya seperti materi-materi yang sudah saya bahas sebelumnya. Silakan walking-walking di blog saya.. :-)

Tahap 1, simpan file berikut dengan nama form.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Login Form </title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body onLoad="document.form1.user.focus()">
<form name="form1" method="post" action="myform.php">
<div id="apDiv1">
<div id="header">
</div>
<div align="center" height="50"><strong><br>Username :</strong>
<br>
<input type="text" name="user" size="40" value="" style="background-color:#a4a4a7">
<br>
<br>
<strong>Password : </strong>
<br>
<input type="password" name="pass" size="40" style="background-color:#a4a4a7">
<br/>
<br/>
<input type="submit" name="submit" value=" S U B M I T " onClick="admin()">
<br>
<br>

</div>
</div>
<br>
<div align="center" id="apDiv3">

</div>
<div id="footer" align="center"><br>
<span class="style3">Â©Copyright --> Killa </span><br>
</div>
</div>
</form>
</body>
</html>

Tahap 2, simpan file berikut dengan nama myform.php

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Form Administrator</title>
</head>
<body>
<?php
if(($_POST['user']=='endrakilla') AND ($_POST['pass']=='1234')) {
echo 'Selamat, Anda Telah Berhasil Masuk Halaman Administrator Dengan User Name :'.$_POST['user'];
echo '<br><br>Selamat menikmati.... ' . $_POST['user'];
}
else {
echo "<br><br><br><body text='red'><strong><center>Terdapat Kesalahan Pada saat Anda Login...!<br><br><a href='form.html'><h4>Kembali Ke Login</h4></a></center></strong></body>";
}
?>
</body>

</html>

Tahap 3, simpan file berikut dengan nama style.css

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Form Administrator</title>
</head>
<body>
<?php
if(($_POST['user']=='endrakilla') AND ($_POST['pass']=='1234')) {
echo 'Selamat, Anda Telah Berhasil Masuk Halaman Administrator Dengan User Name :'.$_POST['user'];
echo '<br><br>Selamat menikmati.... ' . $_POST['user'];
}
else {
echo "<br><br><br><body text='red'><strong><center>Terdapat Kesalahan Pada saat Anda Login...!<br><br><a href='form.html'><h4>Kembali Ke Login</h4></a></center></strong></body>";
}
?>
</body>

</html>

Untuk menjalankannya, klik file html atau bisa dijalankan melalui server. Untuk gambar back, bisa didownload di sini.

Sekian dulu pertemuan kali ini, semoga dapat bermanfaat. :-)

PTI 478

Modul Pemrosesan Form

06.12

Meski sudah terlambat hampir 1 minggu, karena saya jugaa baru dapat. hihihi...
Modul ini mengenai pemrosesan form menggunakan css style tetapi belum terhubung dengan database. Jd hanya tampilan luarnya saja. Bagi yang mau download, silakan klik di sini atau di alamat http://www.ziddu.com/download/9241385/Modul02PemrosesanFormv2.0.pdf.html.

Terima Kasih... :-)

Rabu, 17 Maret 2010

Men-generate Sel Tabel Secara Fleksibel menggunakan kombinasi PHP dan HTML

20.01

PHP (PHP: Hypertext Preprocessor ) merupakan salah satu bahasa webscripting 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. Untuk materi mengenai PHP sendiri dapat didownload di internet dan sangat banyak, karena di sini tidak membahas terlalu dalam. Hanya sebuah contoh. :-)

Dalam pembuatan tabel ini, kita men-generate sel dan kolom secara fleksibel atau sesuai dengan keinginan kita. Kita mengkombinasikan antara PHP programming dengan javascript, yaitu dengan metode link.

Untuk lebih singkatnya, mari kita liat kode porgram dari program tabel ini.

Kode program berikut disimpan dengan nama Tabel.php.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hasil Generate Tabel</title>
</head>
<body>
<div align="center">
<?php
$rows = 1;
$columns = 1;
$cells = 1;
?>

<?php $rows = (int) $_POST["JumlahRow"]; ?>
<?php $columns = (int) $_POST["JumlahColum"]; ?>
<?php $cells = (int) $_POST["JumlahCell"]; ?>

<strong>Kamu Memilih</strong> <?php echo $rows; ?> <em>rows,</em><br />
<strong>Kamu Memilih</strong> <?php echo $columns; ?> <em>columns,</em><br />
<strong>Dan Anda Membutuhkan</strong> <?php echo $cells; ?> <em>cells,</em><br />
<br />
<br />
<?php
$width = $columns * 75;
echo "<table width=".$width." border=1>";
$rw = 0;
$cel = 1;
while ($rw < $rows && $cel <= $cells)
{
echo "<tr>";
$cl = 0;
while ($cl < $columns)
{
if ($cel <= $cells)
{
echo "<td><div align=center>".$cel."</div></td>";
$cel++;
}
$cl++;
}
echo "</tr>";
$rw++;
}
echo "</table>";
?>
</div>
</body>
</html>

Sedangkan kode html dapat dilihat seperti di bawah ini. Simpan dengan nama Tabel.html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Generate Table</title>
<style type="text/css">

</style>
</head>
<script language="JavaScript" type="text/javascript">

</script>
<body>
<form method="post" action="tabel.php">
<h3 align="center" class="style1">Tabel Fleksibel Dengan Generate Table</h3>
<div align="center">
<table width="327" border="0" bgcolor="#FFFFFF">
<tr bgcolor="#8282c7">
<td width="121" style="text-align:center">Rows</td>
<td width="196"><strong>= </strong>
<input name="JumlahRow" type="text" id="JumlahRow" onKeyUp="getmax();" onfocus="this.select();"></td>
</tr>
<tr bgcolor="#e5c9d3">
<td style="text-align:center"><label>Columns</label></td>
<td><strong>= </strong>
<input name="JumlahColum" type="text" id="JumlahColum" onKeyUp="getmax();" onfocus="this.select();"></td>
</tr>
<tr bgcolor="#8282c7">
<td style="text-align:center">Cell Total </td>
<td><strong>= </strong>
<input name="JumlahCell" type="text" id="JumlahCell" onKeyUp="getmax();" onFocus="this.select();"></td>
</tr>
<tr bgcolor="#e5c9d3">
<td style="text-align:center">Max Cells </td>
<td><strong>= </strong>
<input name="maxcells" type="text" id="maxcells" disabled="disabled" style="text-align:center"></td>
</tr>
</table>
</div>
<div id="apDiv1">
<input type="submit" name="Generate" value="G e n e r a t e"><input type="reset" name="Reset" value="R e s e t">
</div>
</form>
</body>
</html>

Cara menjalankannya tinggal klik Tabel.htmlnya. Sedangkan tampilan gambar dari contoh program di atas adalah sebagai berikut:

Dalam gambar di atas, kita harus memberikan nilai ke dalamnya. Rows untuk menentukan jumlah baris, coloum untuk menentukan jumlah kolom, dan cell total untuk menentukan jumlah sel yang kita inginkan. Tetapi, kita tidak boleh meminta lebih dari max.cell.

Hasilnya jika kita memberikan nilai:
Rows = 3,
Coloumn = 4,
Cell Total = 10

Mungkin contoh di atas hanya sederhana karena saya juga masih belajar. :-)
Sekian dulu, c u next time..

Selasa, 16 Maret 2010

PTI 478

Passing Argumen di PHP

15.27

Passing by value vs passing by reference.
Itulah contoh dari passing argumen yang ada pada pemrograman PHP. Keduanya memiliki karakter yang berbeda. Untuk lebih jelasnya. mari kita lihat perbedaannya melalui beberapa contoh.
-->Passing by value
Variable yang diberikan oleh parameter hanya akan diolah didalam fungsi, variable yang berada diluar fungsi akan tetap. Dengan kata lain variable yang dipakai oleh suatu fungsi tidak akan mempengaruhi variable yang ada diluar.

Contoh:

function jumlah($nilai) {

$nilai++;

}

$input=5;

jumlah($input);

echo $input;

?>

Penjelasan:

Pada saat fungsi jumlah($input); jumlah dipanggil, fungsi tersebut akan memasukkan nilai dari variabel $input kedalam argumennya, jadi disini argumen fungsi jumlah adalah 5 (ini adalah nilai aslinya). 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 sbb:

$nilai++;

$nilai = $nilai + 1

$nilai = 5 + 1

$nilai = 6

Untuk output,

echo $input;

nilai variabel $input yang diambil disini adalah nilai variabel aslinya, sehingga hasil manipulasi fungsi tadi tidak dipakai, karena bukan nilai asli. Jadi outputnya adalah 5. Tetapi apabila menggunakan passing by reference akan bernilai 6. Akan dijelaskan passing by reference terlebih dahulu.

-->Passing by reference
Jika pada pass by value, nilai hasil olahan tidak dapat digunakan diluar fungsi, maka pass by reference sebaliknya, hasil olahan yang telah diproses di dalam fungsi dapat digunakan di luar fungsi, dengan kata lain value yang di luar fungsi akan turut berubah seiring perubahan yang terjadi pada variable didalam fungsi.
contoh:
pada argumennya.

function jumlah(&$nilai) {

$nilai++;

}

$input=5;

jumlah($input);

echo $input;

?>

Penjelasan:

Sesuai dengan penjelasan passing by reference diatas, nilai yang diakses & dimanipulasi adalah nilai aslinya, dengan begitu hasil manipulasi fungsilah yang gunakan sebagai outputnya, yaitu 6.

Mungkin ini hanya contoh sekilas dari passing by value dam passing by reference. Bisa dipelajari lebih dalam pada buku-buku php maupun e-book. Fin. :-)

Rabu, 10 Maret 2010

PTI 478

Membuat Form Pemesanan Berbasis JavaScript

15.42

Setelah sebelumnya kita membahas mengenai kalkulator sederhana, sekarang kita berlanjut dengan aplikasi form pemesanan sederhana. Pada intinya hampir sama, cuma sedikit pengembangan dengan menambahkan elemen tabel.

Dalam proses pembuatan, ada sedikit kualifikasi yang harus terpenuhi, yaitu:
Spesifikasi:
*Field Harga, Jumlah Total, Diskon, dan Jumlah Dibayar bersifat read- only
*Jika pesan disi, maka field jumlah total secara otomatis akan menghitung totalnya, termasuk juga field jumlah dibayar.
Rumus:
-Jumlah Total = ∑ (harga * pesan)
-Jumlah Dibayar = Jumlah Total - Diskon
-Jika pembelian lebih dari 50000, maka field diskon secara otomatis akan berisi nilai diskon sebesar 10000 (tidak berlaku kelipatannya) dan otomatis pula field jumlah dibayar akan berkurang
-Jika tombol Batal diklik, maka semua field Pesan akan dibersihkan

Fungsi dari algoritma penghitungan seperti di bawah ini:

<script language="JavaScript" type="text/javascript">

</script><h3>Form Pemesanan Berbasis JavaScript</h3>

Kemudian untuk kode dari form tabel seperti di bawah ini:

<form name="form2" action="#">
<table border="1px">
<tr>
<th>No</th>
<th>Makanan/Minuman</th>
<th>Harga</th>
<th>Pesan</th>
</tr>
<tr>
<td width="15">1</td>
<td width="200">Bakso Istimewa</td>
<td width="90">Rp. <input id="n123" type="text" name="bakso" value="12000" size="n6" disabled="true"/></td>
<td width="110"><input type="text" name="qBakso" size="n14" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>2</td>
<td>Soto Spesial</td>
<td>Rp. <input type="text" name="soto" value="10000" size="6" disabled="true"/></td>
<td><input type="text" name="qSoto" size="14" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td>Rp. <input type="text" name="mie" value="15000" size="6" disabled="true"/></td>
<td><input type="text" name="qMie" size="14" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>4</td>
<td>Es Degan</td>
<td>Rp. <input type="text" name="degan" value="5000" size="6" disabled="true"/></td>
<td><input type="text" name="qDegan" size="14" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>5</td>
<td>Es Campur</td>
<td>Rp. <input type="text" name="campur" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="qCampur" size="14" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td colspan="3" align="right">Jumlah Total</td>
<td>Rp.<input type="text" name="Total" size="10" disabled="true" /></td>
</tr>
<tr>
<td colspan="3" align="right">Diskon</td>
<td>Rp.<input type="text" name="Diskon" size="10" disabled="true" /></td>
</tr>
<tr>
<td colspan="3" align="right">Jumlah Dibayar</td>
<td>Rp.<input type="text" name="Bayar" disabled="true" size="10" align="right"/></td>
</tr>
</table><br/>
<input type="button" value="BATAL" onClick="resetForm()" />
</form>

Tabel di atas dapat diformat sesuai dengan keinginan. Dan proses terakhir yaitu penggabungan menjadi sebuah form pemesanan sederhana.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Warung Makan "Mbok Darmi"</title>
</head>
<body>
<!--Masukkan fungsi hitungPesan
<!--Masukkan form
</body>
</html>

Form pemesanan sudah selesai, jika ingin mengembangkan sangat diharapkan untuk menjadikannya lebih sempurna. Selamat mencoba.. :-)

PTI 478

Membuat Kalkulator Sederhana Menggunakan JavaScript

04.37

Scripting merupakan jenis lain dari pemrograman, yang umumnya lebih mudah dipahami. Script dapat disisipkan ke dalam dokumen HTML dengan menggunakan tag <script>. Tidak seperti style sheet, script bisa terlihat di dalam <head> ataupun <body>.

DHTML (Dynamic HTML) merupakan suatu teknik untuk menciptakan halaman web yang interaktif dengan
cara mengombinasikan elemen-elemen seperti HTML, style sheet, dan scripting. Jadi, DHTML bukanlah suatu jenis bahasa pemrograman melainkan hanya sekadar istilah saja. Pada bagian ini, pembuatan DHTML akan dilakukan dengan memanfaatkan JavaScript.

JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien. jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan di browser.

Javascript dipanggil untuk memberikan fungsi pada halaman web dengan meletakannya secara internal pada halaman html diantara tag <script> </script> atau dibuat pada file terpisah ( eksternal ) dan lalu di link menggunakan <link rel=â??" href=â??">pada bagian <head>, seperti CSS.

Kalkulator dengan menggunakan javascript.

Kalkulator sederhana ini menggunakan teknik DHTML dengan memanfaatkan javascript. Di dalamnya, terdapat beberapa elemen-elemen seperti, textfield (untuk memasukkan input), combobox (pilihan operasi), dan tombol untuk meretrieve nilai. Di sisi lain, terdapat juga fungsi yang merupakan algoritma dari kalkulator ini.

Berikut ini adalah source codenya.

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

<head>
<title>Kalkulator</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">

</script>

<form name="form1" action="#">
<input type="text" name="x" />
<select name="opt">
<option value="tambah"> + </option>
<option value="kurang"> - </option>
<option value="kali"> * </option>
<option value="bagi"> / </option>
</select>
<input type="text" name="y" />
<input type="button" value="=" onClick="hitung()" />
<input type="text" name="hasil" disabled="true" /><br/>
<input type="button" value="CLEAR" onClick="resetForm()" />
</form>
</body>
</html>

Sekian dulu bahasan kali ini, semoga dapat bermanfaat. C u...

Rabu, 03 Maret 2010

PTI 478

Membuat Layout Web Menggunakan Division dengan CSS (Lanjutan)

09.49

Lanjutan dari latihan sebelumnya, yaitu membuat layout web menggunakan division dengan CSS ini merupakan pengembangan dengan men-generate image, background, maupun sebagian text. Dalam contoh website sederhana ini, menggunakan teknik division untuk mengelompokkan masing-masing bagian. Kemudian, dapat dilanjutkan dengan mengatur tata letak masing-masing divisi dan men-generate gambar.

Tetapi, dalam file css ada yang perlu dibedakan dalam penggunaan style. Jika style ditulis menggunakan titik (.), artinya style tersebut dapat digunakan berkali-kali atau bersama-sama. Sedangkan, style dengan awalan pagar (#) digunakan untuk mendeklarasikan mnemonic khusus, seperti header, footer, sidebar, dll.

Langsung saja, berikut adalah kode program dari file css.

<em>Ampersands & angle brackets need to be encoded.</* { margin: 0; }

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:#fff url(BgHeader.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;
}em>

Kemudian disimpan dengan nama layout 2.css.
Kode program dari html-nya seperti di bawah ini.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<link type="text/css" rel="stylesheet" href="layout2.css" />
</head>

<body>
<div id="wrapper">
<div id="header">
<div id="header-content">
<div id="menu-top">
Home | Sitemap | RSS | Contact | About Us
</div>
<div id="logo">
<img src="logo_um.png" width="50" alt="" />
</div>
<div id="site-title">
<h2>TEKNIK ELEKTRO</h2>
</div>
<div id="search">
Search : <input name="q" size="20" type="text"/>
</div>
</div>
</div>

<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<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>
<div id="content">
<div id="content-top">

</div>
<div id="content-main">
<h3>Pengumuman Lomba Desain Header Web</h3>
<hr />
<p class="style1">
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>
<div id="content-right">
<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>
</div>
</div>
<div id="footer">
<br />
<p><b>© 2010 Teknik Elektro UM. Malang, Indonesia.</b></p>
</div>
</div>
</body>
</html>

Simpan file dengan nama index2.html.

Contoh di atas digunakan sebagai pembelajaran awal bagi yang ingin belajar pemrograman web dengan menggunakan css. Memang di sini hanya sebatas tampilan kecil, tetapi setidaknya setelah kita mencoba kita dapat mengembangkan menjadi sebuah web yang sesungguhnya. Sekian dulu modul kali ini, jika ada saran-saran bisa meninggalkan pesan di bawah ini. :-)

PTI 478

Membuat Layout Web Menggunakan Division dengan CSS

06.01

Cascading Style Sheets atau CSS adalah suatu bahasa lembar gaya yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markah. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).

CSS biasanya digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markah lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi.

Sekilas mengenai CSS, sekarang kita akan membuat desain layout dengan memanfaatkan division pada CSS.
Pertama, yang kita butuhkan adalah 2 buah file yang berbeda, yaitu file berekstensi .css dan file .html.

Contohnya, kita akan membuat file layout.css. Yang dibutuhkan dalam halaman web biasanya adalah header, footer, sidebar, maupun content-content yang terbagi-bagi sesuai dengan keinginan. Di sini kita bisa mengatur tata letak dari masing-masing content. Scriptnya seperti di bawah ini:

#wrapper {
margin:auto;
width:980px;
height:600px;
border:2px solid black;
}

#header {
height:80px;
border:1px solid blue;
}

#inner {
float:left;
margin:5px 0;
border:1px solid black;
}

#footer {
clear:both;
height:50px;
border:1px solid blue;
}

#sidebar {
float:left;
margin-right:10px;
width:200px;
height:400px;
border:1px solid gray;
}

#content {
float:left;
width:760px;
height:400px;
border:1px solid red;
}

#content-top {
clear:both;
margin:auto;
width:760px;
height:120px;
border:1px dotted red;
}

#content-main {
float:left;
margin:auto;
width:480px;
height:260px;
border:1px dotted red;
}

#content-right {
float:right;
margin:auto;
width:260px;
height:180px;
border:1px dotted red;
}

Setelah disimpan di dalam layout.css, baru kita membuat index programnya. Untuk contoh programnya bisa seperti di bawah ini.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<link type="text/css" rel="stylesheet" href="layout.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
sidebar
</div>
<div id="content">
<div id="content-top">
Top Content
</div>
<div id="content-main">
Main Content
</div>
<div id="content-right">
Right Content
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>

Kemudian simpan file dengan nama index.css. Perlu diperhatikan, dalam pemanggilan file css, harus sama dengan nama file css. Begitu juga dengan pemanggilan style, harus sesuai dengan nama style.

Bentuk layout web sederhana tersebut bisa dijadikan dasar pembuatan web yang sebenarnya. Tinggal men-generate image dan isinya di masing-masing division. Selanjutnya akan dibahas di modul berikutnya.
Selamat mencoba... :-)

Senin, 01 Maret 2010

Artikel

Cabling LAN (Straight, Crosssover)

06.20

Dalam era informasi sekarang ini, penggunaan komputer merupakan suatu hal yang tidak terhindarkan dan cenderung menjadi suatu keharusan. Interkoneksi antar komputer telah menambah fungsi lain darinya, tidak hanya sebagai pengolah dan penyimpan data, melainkan sebagai alat komunikasi dan resource & information sharing. Dalam suatu jaringan komputer kita bisa saling berbagi pemakaian sumber daya (resource), misalnya pemakaian printer bersama, CDROM, floppy disk, dsb. Selain itu, komputer dalam suatu jaringan dapat menjadi alat komunikasi dan information sharing yang efektif, misalnya dengan teleconference meeting, Internet, mailing list, dsb.

Untuk menghubungkan jaringan LAN (Local Area Network), biasanya digunakan jenis kabel straight dan crossover. Download lengkap di sini atau di http://www.ziddu.com/download/8786469/praktikumCabling.docx.html.

Tinggalkan pesan di bawah ya, demi kelancaran bersama... :-)

Independent

My Facebook

Feature 3

Feature 4

Labels

Rabu, 31 Maret 2010

Login Form (tanpa database)

Modul Pemrosesan Form

Rabu, 17 Maret 2010

Men-generate Sel Tabel Secara Fleksibel menggunakan kombinasi PHP dan HTML

Selasa, 16 Maret 2010

Passing Argumen di PHP

Rabu, 10 Maret 2010

Membuat Form Pemesanan Berbasis JavaScript

Setelah sebelumnya kita membahas mengenai kalkulator sederhana, sekarang kita berlanjut dengan aplikasi form pemesanan sederhana. Pada intinya hampir sama, cuma sedikit pengembangan dengan menambahkan elemen tabel.

Membuat Kalkulator Sederhana Menggunakan JavaScript

Rabu, 03 Maret 2010

Membuat Layout Web Menggunakan Division dengan CSS (Lanjutan)

Membuat Layout Web Menggunakan Division dengan CSS

Senin, 01 Maret 2010

Cabling LAN (Straight, Crosssover)

Pengikut

About Me

My Favourite Site

Labels

Blog Archive