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.
Gambar di bawah ini merupakan contoh sederhana dari aplikasi login form sederhana(tanpa database) yang terdiri dari field ID/Username dan password.Menggunakan variabel di PHP untuk mensimulasikan verifikasi data yang dimasukkan dengan spesifikasi sebagai berikut:
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. 
Langkah pertama adalah buat souirce code phpnya kemudian simpan dengan nama check.php
<!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">
<head>
<title>Form Administrator</title>
</head>
<body>
<?php
if(($_POST['user']=='khassifa') AND ($_POST['pass']=='1724')) {
echo 'Sukses, Anda Telah Masuk Halaman Administrator Dengan User Name :'.$_POST['user'];
echo '<br><br>Hallo, Mr/Mrs ' . $_POST['user'];
}
else {
echo "<br><br><br><body text='red'><strong><center>Ada Kesalahan Pada Waktu Anda Login...!<br><br><a href='cobatugaslogin.html'><h4>Kembali Ke Login</h4></a></center></strong></body>";
}
?>
</body>
</html>
setelah selesai membuat sour code phpnya dilanjutkan dengan source code html seperti :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Login Form by_Novi Khassifa</title>
<style type="text/css">
#apDiv1 {
position:absolute;
width:380px;
height:330px;
z-index:1;
left: 449px;
top: 136px;
background-color: #0000ff;
border: 2px solid Blue;
}
#apDiv3 {
position:absolute;
width:80px;
height:25px;
z-index:2;
left: 289px;
top: 274px;
}
.style3 {
font-size: 10px;
font-weight: bold;
}
#apDiv2 {
position:absolute;
width:412px;
height:115px;
z-index:2;
top: 0px;
left: 2px;
}
#header{
width:380px;
height:98px;
background-image: url(1.JPG);
}
#footer{
width:380px;
height:40px;
background-image: url(6.JPG);
}
body {
background-image: url(5.jpg);
}
</style>
<script type="text/javascript">
function error1()
{
alert('Masukkan User Name dan Password Terlebih Dahulu ');
}
function check()
{
if(form1.pass.value == "" || form1.user.value=="")
{
error1();
}
}
</script>
</head>
<body onLoad="document.form1.user.focus();">
<form name="form1" method="post" action="check.php">
<div id="apDiv1">
<div id="header">
</div>
<div>
<div align="center"><strong><br>User Name :</strong>
<br>
<input type="text" name="user" size="35" value="" style="background-color:#87cefa">
<br>
<br>
<strong>Password : </strong>
<br>
<input type="password" name="pass" size="35" style="background-color:#87cefa">
<br>
<br>
</div>
</div>
<br>
<div id="apDiv3">
<input type="submit" name="submit" value=" E N T E R " onClick="check()">
</div>
<div id="footer" align="left"><br>
</div>
</div>
</form>
</body>
</html>
Readmore...
Pemrosesan Form
Membuat Tabel Fleksibel dengan PHP
Pembuatan tabel fleksibel menggunakan Pemrograman PHP sangatlah penting, kita hanya perlu menggenerate row, coloum, maupun cell yang kita inginkan. berikut kita mengulas kembali sekilas penjelasan tentang 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.
Berikut saya akan membahas tentang bagai mana kita membuat program sederhana untuk men-generate sel tabel secara fleksibel. Tekniknya, buat sebuah fungsi yang menerima argumen berupa jumlah sel dan jumlah kolom. Jadi, pembentukan sel tabel didasarkan pada nilai jumlah sel dan jumlah kolom yang diberikan. Sebagai contoh, hasil program dengan argumen 12 (sel) dan 3 (kolom) diperlihatkan seperti pada gambar di bawah ini:
Pada Gambar Tersebut Setelah Di Klik Generate Untuk Menghasilkan Tabel yang dinginkan sehingga dapat diperoleh hasil seperti pada gambar 2. mod4tgs2 :
Untuk memperoleh tampilan web seperti gambar di atas adapun source codenya adalah sebagai berikut:
yang pertama source code php seperti di bawah ini:
<!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>
dilanjutkan dengan source code htmlnya
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Novi Khassifa</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:178px;
height:24px;
z-index:1;
left: 284px;
top: 189px;
}
.style1 {
color: #0000CC;
font-weight: bold;
}
-->
</style>
</head>
<body>
<form method="post" action="tgsmod5.php">
<h3 align="center" class="style1">__Tabel Fleksibel Dengan Generate Table__</h3>
<div align="center">
<table width="327" border="0" bgcolor="#FFFFFF">
<tr bgcolor="#FFFFCC">
<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="#CCFFCC">
<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="#FFFFCC">
<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="#CCFFCC">
<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>
<script language="JavaScript" type="text/javascript">
<!--
function getmax() {
var R = parseInt(document.getElementById('JumlahRow').value);
var C = parseInt(document.getElementById('JumlahColum').value);
var X = parseInt(document.getElementById('JumlahCell').value);
var cellmax = document.getElementById('maxcells');
var total = 'N/A';
total = R * C;
cellmax.value = new String(total);
if (X > total)
{
alert('Cell Total Yang Anda Masukkan Terlalu Besar, Nilai Maksimum Cells = ' + total);
document.getElementById('CellsTotal').value = new String();
}
}
//-->
</script>
</html>
Selamat mencoba...^_^
Readmore...
Passing By Value Dan Passing By Reference
Pada kesenmpatan ini saya akan membahas mengenai passing argument di PHP. Apa itu PHP? dan apa itu passing argument?
PHP kepanjangan dari Hypertext Preprocessor, PHP sendiri dibuat oleh Rasmus Lerdorf, PHP bersifat open source dan telah digunakan oleh hampir seluruh web developer di seluruh dunia, situs resmi php bisa dikunjungi di www.php.net. Karena sifatnya yang open source dan semakin banyaknya user membuat bahasa pemprogaman ini mengalami perkembangan yang sangat cepat.
Sintak atau strukturnya hampir mirip dengan bahasa pemprogaman C, Java dan Perl sehingga dengan begitu bagi mereka yang sudah mempelajari bahasa tersebut tidak akan mengalami kesulitan, selain itu bagi para pemula yang baru memulai bahasa pemprogaman web rasanya PHP turut diperhitungkan, karena pemanfaatan bahasa PHP tidak hanya sekedar untuk web dan aplikasinya tetapi sudah merambah kedunia desktop windows, namanya yaitu PHP GTK.
Fungsi pass by value dan pass by reference adalah :
• Fungsi adalah subprogram/subrutin program yang terdiri dari sekumpulan perintah yang akan melaksanakan suatu tugas tertentu
• Fungsi memungkinkan program menjadi lebih terstruktur dan juga memudahkan pelacakan kesalahan.
• Menggunakan fungsi akan mempersingkat waktu pemrogram untuk menuliskan sekumpulan perintah yang sama berkali-kali
Sintaks:
function nama_fungsi($arg1, $arg2, .., arg_n)
{
blok pernyataan fungsi
}
Keterangan:
• Nama_fungsi adalah nama yang akan digunakan untuk memanggil fungsi
• $arg1, $arg2, …, $arg_n adalah argumen-argumen (parameter) yang akan disertakan
pada saat pemanggilan fungsi untuk diproses dalam fungsi. $arg dapat berupa tipe data integer, float atau $variabel.
Blok pernyataan fungsi adalah pernyataan-pernyataan yang terdapat dalam apitan tanda
({ }) dimana dikerjakan fungsi untuk tugas tertentu.
Contoh:
>?
$x=2+3;
$y=$x+5;
echo "$y
";
$x=2+3;
$y=$x+5;
echo "$y
";
$x=2+3;
$y=$x+5;
echo "$y
";
$x=2+3;
$y=$x+5;
echo "$y
";
?<
Jika kita perhatikan kode di atas, maka penjumlahan yang sama berulang-ulang dituliskan dan merupakan pemborosan. Dengan adanya fungsi maka program diatas bisa dibuatkan ke dalam fungsi dan bisa dipanggil beberapa kali.
PASSING BY VALUE
Argumen fungsi yang dilewatkan secara pass by value (default dalam php) berarti
membuat copy dari argumen yang asli sehingga argumen asli tersebut tidak ikut berubah
dengan adanya proses pada fungsi terhadap argumen tersebut.
Secara default, semua nilai yang di-pass masuk atau keluar dari fungsi adalah passing by value, bukan by reference. Ini berarti PHP membuat copian dari nilai original dan nilai copian itulah yang kita akses dan kita manipulasi, bukan nilai originalnya. Dengan begitu bagaimanapun kita mengubah nilai itu, tidak akan mengubah nilai originalnya.
Berikut contoh dari fungsi pass by value :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>passbyvalue</title>
</head>
<body>
<?php
function jumlah($nilai) {
$nilai++;
}
$input=30;
jumlah($input);
echo $input;
?>
</body>
</html>
Simpan dengan nama PassByVal.php dan berikut penjelasannya :
Pada saat fungsi jumlah dipanggil,
jumlah($input);
maka fungsi tersebut akan memasukkan nilai dari variabel $input kedalam argumennya, jadi disini argumen fungsi jumlah adalah 30 (ini adalah nilai aslinya). Selanjutnya PHP meng-copy nilai asli tersebut, kemudian hasil copyan-nya digunakan untuk proses manipulasi fungsi, sedangkan nilai yang asli dibiarkan tidak berubah. Proses manipulasinya sebagai berikut:
$nilai++;
$nilai = $nilai + 1
$nilai = 30 + 1
$nilai = 31
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 30
Berikut hasil tampilan dari passing by value
PASSING BY REFERENCE
Argumen fungsi yang dilewatkan secara pass by reference berarti membawa argumen asli
ke dalam fungsi sehingga argumen asli tersebut akan ikut berubah dengan adanya proses
pada fungsi terhadap argumen tersebut.
Berbeda dengan passing by value yang bersifat mengkopi, passing by reference memberikan nilai aslinya untuk diakses dan dimanipulasi, dengan contoh yang sama seperti diatas, kita akan modifikasi menjadi mekanisme passing by reference.
Untuk mengubah jadi passing by reference, kita hanya cukup menambahkan operator & pada argumennya.
Berikut contoh dari passing by reference :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>passbyreference</title>
</head>
<body>
<?php
function jumlah(&$nilai) {
$nilai++;
}
$input=30;
jumlah($input);
echo $input;
?>
</body>
</html>
Simpan dengan nama PassByRef.php dan berikut penjelasannya:
Sesuai dengan penjelasan passing by reference diatas, nilai yang diakses & dimanipulasi adalah nilai aslinya, dengan begitu hasil manipulasi fungsilah yang gunakan sebagai outputnya, yaitu 31.
Hasilnya seperti gambar di bawah ini
Selamat mencobA... ^_^
Readmore...
Aplikasi Kalkulator dan Form Pemesanan dengan Java Script
Java Script
Sebelum membuat program kalkulator ataupun form pemesanan hendaknya terlebih saya akan mendeskripsikan sedikit hal tentang java script
Pada Java Script tipe data yang dimiliki diantaranya :
1.String contohnya : "khassifa"
2.Number/Integer contohnya 7702
3.Boolean : suatu variabel yang mempunyai dua nilai untuk memeriksa suatu kondisi tertentu yakni true untuk menyatakan kondisi benar ; false untuk menyatakan kondisi salah contohnya
Variabel
Pada javascript kita sering menjumpai variabel-variabel, adapun fungsi dari variabel itu merupakan suatu objek yang berisi data, yang dapat dimodifikasi selama pengeksekusian program
Aturan penulisan variabel pada javascript. Nama variabel harus dimulai oleh huruf (huruf besar maupun huruf kecil) atau satu karakter ''_''. Nama variabel bisa terdiri dari huruf, angka atau karakter _ dan & (spasi kosong tidak diperbolehkan).
Nama variabel tidak boleh memakai nama nama berikut ini (reserved oleh program) :
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else export extends
false final finally float for function
goto
if, implements, import, in, infinity, instanceof, int, interface
label, long new, null
package, private, protected, public
return
short, static, super, switch, synchronized
this, throw, throws, transient, true, try, typeof
var, void, volatile
while, with
Berikut merupakan contoh penggunaan variabel pada sebuah contoh sederhana pada code HTML :
<html>
<head>
<title>Data Types and Variables</title>
</head>
<body>
<script type="text/javascript">
var x, y;
x= 1024;
y=x; x = "Test";
document.write("<p>x = " + y + "</p>");
document.write("<p>x = " + x + "</p>");
</script>
</body>
</html>
**Hasil dari pengeksekusian code diatas :
X=10
X=Test
Peletakan variabel (global atau lokal)
Variabel global adalah variabel, dimana variabel itu bisa di akses dari seluruh bagian program.
Variabel lokal adalah variabel, dimana variabel itu tidak bisa di akses dari seluruh bagian program yaitu hanya berlaku untuk fungsi tertentu .
Contoh dari penggunaan variabel Global :
<SCRIPT language="Javascript">
<!--
var a = 12;
var b = 4;
function PerkalianDengan2(b) {
var a = b * 2;
return a;
}
document.write("Dua kali dari ",b," adalah " , PerkalianDengan2(b));
document.write("Nilai dari a adalah",a);
// -->
</SCRIPT>
Dari contoh diatas, variabel a dideklarasikan secara eksplisit di awal dari skrip program dan juga di deklarasikan di dalam fungsi . berikut ini hasil dari program diatas.
Berikut contoh penggunaan variabel lokal:
Dua kali dari 4 adalah 8
Nilai dari a adalah 12
<SCRIPT language="Javascript">
<!--
var a = 12;
var b = 4;
function PerkalianDengan2(b) {
a = b * 2;
return a;
}
document.write("Dua kali dari ",b," adalah ",PerkalianDengan2(b));
document.write("Nilai dari a adalah",a);
// -->
</SCRIPT>
Berikut ini hasil dari program diatas.
Dua kali dari 4 adalah 8
Nilai dari a adalah 8
Berikut adalah contoh aplikasi kalkulator sederhana menggunakan JavaScript :
Source code html dan java scriptnya adalah
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><title>Kalkulator Sederhana</title></head><body>
<script language="JavaScript" type="text/javascript">
<!--
function hitung(){
var myForm = document.form1;
var x=eval(myForm.x.value);
var y=eval(myForm.y.value);
var pil= myForm.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;
}
myForm.hasil.value = z;
myForm.x.value = "";
myForm.y.value = "";
}
function resetForm(){
document.form1.reset();
}
//-->
</script>
<form name="form1" action="#">
<input name="x" type="text">
<select name="opt">
<option value="tambah"> + </option>
<option value="kurang"> - </option>
<option value="kali"> * </option>
<option value="bagi"> / </option>
</select>
<input name="y" type="text">
<input value="=" onclick="hitung()" type="button">
<input name="hasil" disabled="true" type="text"><br>
<input value="CLEAR" onclick="resetForm()" type="button">
</form>
</body></html>
Untuk aplikasi lanjut dengan menggunakan java script dapat dibuat sebuah form pemesanan seperti pada gambar di bawaha ini
source code html dan java scriptnya adalah
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Form Pemesanan Kedai Khassifa</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
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>
<h3>Form Pemesanan Berbasis JavaScript</h3>
<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="15px">1</td>
<td width="200px">Bakso Istimewa</td>
<td width="85px" bgcolor=>@<input type="text" name="bakso" value="12000" size="6" disabled="true"/></td>
<td width="150px"><input type="text" name="qBakso" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>2</td>
<td>Soto Spesial</td>
<td bgcolor=>@ <input type="text" name="soto" value="10000" size="6" disabled="true"/></td>
<td><input type="text" name="qSoto" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td bgcolor=>@ <input type="text" name="mie" value="15000" size="6" disabled="true"/></td>
<td><input type="text" name="qMie" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>4</td>
<td>Es Degan</td>
<td bgcolor=>@ <input type="text" name="degan" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="qDegan" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>5</td>
<td>Es Campur</td>
<td bgcolor=>@ <input type="text" name="campur" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="qCampur" value="0" onChange="hitungPesan()"/></td>
</tr>
<td colspan="3" align="right">Jumlah Total</td>
<td><input type="text" name="Total" disabled="true" /></td>
</tr>
<td colspan="3" align="right">Diskon</td>
<td><input type="text" name="Diskon" disabled="true" /></td>
</tr>
<td colspan="3" align="right">Jumlah Dibayar</td>
<td><input type="text" name="Bayar" disabled="true" align="right"/></td>
</tr>
</table><br/>
<input type="button" value="BATAL" onClick="resetForm()" />
</form>
<br>
<marquee><font color="red" face="Arial Black" size="5">by : Novi Khassifa</marquee></font><br>
</FORM>
</CENTER>
</body>
</html>
selamat mencoba..^_^..
Readmore...
Membuat Tabel dengan css
Pada bahasan sebelumnya kita membuat tabel melalui cara manual, yaitu dengan mengetikan sintaknya, nah... kali ini kita akan belajar membuat tabel dengan CASCADING STYLE SHEET atau yg lebih populer disebut css, adapun deskripsi dari css yaitu,
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.
Selain mengulas tentang pemanfaatan CSS, bagian ini juga menekankan pada pembuatan desain dengan menggunakan division. Bagaimanapun, untuk menghasilkan desain halaman web yang baik, penggunaan tabel tidak disarankan dan sebagai gantinya adalah dengan memanfaatkan division.
Contoh pemanfaatan css:
Dalam contoh ini kita akan belajar mengimplementasikan ccs.
contohnya seperti tabel layout dari wab di bawah iniSupaya menghasilkan seperti tabel tersebut langkah pertama tuliskan script berikut pada note pad dan simpan dengan format . html
adapun 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" xml:lang="en" lang="en">
<head>
<title>Format Layout Sederhana</title>
<link rel="stylesheet" href="FormatStyle.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="top">
Top
</div>
<div id="content">Content
</div>
<div id="right">
Right
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
Langkah kedua setelah kita menuliskan kode tersebut buat kerangka atau link yang nantinya dapat terhubung dengan kode program di atas dan simpan dengan namafile.css
#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;}
#header {
height: 85px;
border: 1px solid blue;}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;}
#sidebar {
float: left;
margin-right: 20px;
width: 200px;
height: 357px;
border: 1px solid red;}#top {
float: left;
width: 524px;
height: 120px;
border: 1px solid red;}
#content {
float: left;
margin-right: 20px;
width: 275px;
height: 235px;
border: 1px solid green;}
#right {
float: right;
width: 227px;
height: 180px;
border: 1px solid red;}
#footer {
clear: both;
height: 75px;
border: 1px solid blue;}
dari pembuatan tabel di atas kita bisa mengembangkannya dengan mengganti background ataupun menambah foto,melink-kan,dan lain2 seperti pada gambar di bawah iniadapun sourcodenya html dan cssnya adalah sebagai beikut...
==>sourcecode html
<!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" xml:lang="en" lang="en">
<head>
<title>Desain Layout Sederhana</title>
<link rel="stylesheet" href="NoviStyle.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id = "box1">
<img src="logo um.gif">
</div>
<div id="logo">
<img src="logo um.jpg" width="50"/>
</div>
<div id="site-title">
<h2>TEKNIK ELEKTRO</h2>
</div>
<div id="search">
Search : <input name="q" size="20" type="text"/>
</div>
<div id = "box2">
<a href="LinkEmail.html"> <font color="black">FTE</a></p>
</div>
<div id = "box3">
<a href="LinkBalik.html"><font color="black">Profile</a></p>
</div>
<div id = "box4">
<a href="LinkHome.html"><font color="black">Home</a></p>
</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="#">Article</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
</ul>
</div>
</div>
<div id="top">
<div id = "box8">
<img src="2.jpg">
</div>
<div id = "box9">
<img src="3.jpg">
</div>
</div>
<div id="content">
<b>Himpunan Mahasiswa Elektro<br/></b>
<br/>
A. Visi <br/>
Sebagai wadah pengembangan dan pembinaan kemahasiswaan diprioritaskan untuk meningkatkan kompetensi dalam bidang penalaran/keilmuan, minat
dan kegemaran mahasiswa, kesejahteraan mahasiswa, kepedulian sosial kemasyarakatan, serta organisasi kemahasiswaan di lingkup jurusan teknik elektro<br/>
<br/>
Read more......</br>
</div>
<div id="right">
<b>Event :</b>
<ul>
<li><a href="#">Seminar Nasional Teknologi</a></li>
<li><a href="#">Pelatihan Karya Tulis Ilmiah</a></li>
<li><a href="#">Kajur Cup Elektro</a></li>
<li><a href="#">Gelar Sains Elektro (GENIE)</a></li>
</div>
</div>
<div id="footer">
<h3 align="center"><b>© HIMPUNAN MAHASISWA ELEKTRO FAKULTAS TEKNIK UM.</b></h3>
</div>
</div>
</body>
</html>
==>sourcecode css
#wrapper {
margin: auto;
width: 1000px;
border: 1px solid white;
}
#header {
height: 100px;
background: #99CC00;
border: 1px solid white;
}
#inner {
float: left;
margin: 3px 0;
border: 1px solid white;
}
#sidebar {
float: left;
margin-right: 5px;
width: 175px;
height: 357px;
background: #CCFF99;
border: 1px solid white;
}
#top {
float: left;
width: 813px;
height: 135px;
background: #FFFFCC;
border: 1px solid white;
}
#content {
float: left;
margin-right: 5px;
width: 450px;
height: 240px;
background: #FFFFCC;
border: 1px solid white;
text-align:justify;
}
#right {
float: right;
width: 357px;
height: 165px;
background: #CCFF99;
border: 1px solid white;
}
#footer {
clear:both;
height: 50px;
background: #6cae15;
border: 1px solid white;
}
#leftmenu ul {
width: 175px;
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
}
#box1 {
float: left;
margin-right:10px;
width: 91px;
height: 98px;
background: #FFFFFF;
border: 1px solid white;
}
#box2{
float: right;
margin-right: 20px;
margin-top: 7px;
width: 60px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}
#box3{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 35px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}
#box4{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 32px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}
#site-title h2{ float:left; padding:0px 10px; height:30px; margin:20px 0px; font:2.1em/100% 'Verdana'; font-weight: bold;}
#search { clear:right; float:right; margin:20px 50px 0px auto; height:30px; font-weight:bold;}
#box6{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 50px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}
#box7 {
float: left;
margin-right: 5px;
margin-top: 2px;
width: 490px;
height: 85px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#box8 {
float: left;
margin-right: 3px;
margin-top: 5px;
width: 406px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#box9 {
float: left;
margin-right: 0px;
margin-top: 5px;
width: 400px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
Selamat mencoba...^_^
Readmore...
DesainTabel Dengan Pengelompokan
Untuk membuat desain tabel perbandingan item dengan memanfaatkan fitur
pengelompokan. Contoh hasilnya diperlihatkan seperti di bawah inilangkah-langkah pembuatannya adalah hampir sama dengan yang pertama dengan memgatur letak atau posisi dari Tagnya ditambah dengan memanfaatkan elemen tabel. Elemen tabel menyediakan sejumlah atribut yang dapat digunakan untuk memformat visualisasi tabel.
Tiga atribut pertama yang sering digunakanadalah align (untuk mengatur posisi), cellspacing (untuk mengatur spasi antarsel) dan cellpadding (untuk mengatur spasi antara border sel denganisinya).
Dalam pembuatan tabel ini format yang di atur adalah format alignnya, selanjutnya dengan memanfaatkan penggabungan (merge) sel yaitu colspan seperti pada pembuatan grafik batang sebelumnya. Anda bisa mengatur letak posisinya sehingga dapat terlihat seperti gambar di atas.
sourcode untuk desain tabel yang kedua...
<!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">
<head>
<title>Grafik Berbasis tabel 2</title>
</head>
<body>
<marquee><font color="Red" face="arial" size="5">Desain Tabel Dengan Fitur Pengelompokan</font></marquee>
<blink><font color="Red" face="Arial" size="4">Created by: Novi Khassifa</font></blink>
<table width="470" height="401" border="0">
<tr>
<td colspan="8" style="border-bottom:#000000 solid;"><p align="center"><font color="black" face="TIME NEW ROMAN" siz"4">PERBANDINGAN FITUR</font></td>
</tr>
<tr>
<td width="31"align="center">No</td>
<td width="0" rowspan="10" style="border-left:#000000 solid thin;"> </td>
<td width="208" align="center">Fitur</td>
<td rowspan="10" style="border-left:#000000 solid thin;padding-left:-5px;" width="0"> </td>
<td width="92" align="center">Enterprise</td>
<td width="0" rowspan="10" style="border-left:#000000 solid thin;"> </td>
<td width="0"align="center">Pro</td>
<td width="0"align="center">Free</td>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
<tr>
<td align="center">1</td>
<td>Garansi seumur hidup </td>
<td align="center">X</td>
<td align="center">-</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">2</td>
<td>Multiuser</td>
<td align="center">X</td>
<td align="center">-</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">3</td>
<td>Update otomatis </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">4</td>
<td>Cetak Laporan </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">5</td>
<td>Notifikasi error </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
<tr>
<td align="center">6</td>
<td>Ubah tema </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>
<tr>
<td align="center">7</td>
<td>Try ikon</td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
</table>
<BR><a href="Tugas1.html">Back</a> Kembali Ke Halaman Utama
</body>
</html>
silahkan anda coba lagi...
^_^
NB: -Untuk tulisan berjalan dan tulisan blinknya anda bisa menambahkan source code merquee dan blink...
-Agar kedua halaman web (Tabel 1 dan 2) bisa dikaitkan maka sudah saya tambahkan Link agar bisa bolak balik kehalamn 1 dan ke halaman ke-2
Readmore...
Grafik Batang Berbasis Tabel
Membuat kreasi grafik batang garis dengan memanfaatkan elemen tabel
hasilnya bisa dilihat pada gambar di bawah iniadapun langkah-langkah dalam pembuatan tabel tersebut adalah dengan mengatur letak atau posisi dari masing-masing tag yang ada dalam tabel yaitu
-Tag atau table heading yang berfungsi mendefinisikan header
-Tag atau table row yang berfungsi mendefinisikan baris
-Tag atau table data yang berfungsi mendefinisikan sel
namun dalam pembuatan diagram batang yang diubah adalah Tag Tr dan Tdnya saja
Sebuah tabel tidak selalu memiliki ukuran dan jumlah sel yang sama dalam
setiap baris ataupun kolomnya.untuk itu perlu
dilakukan penggabungan (merge) sel. Dalam konteks elemen tabel,
penggabungan sel dapat dilakukan berdasar baris (rowspan) atau kolom
(colspan). Untuk diagram batang dengan memanfaatkan elemen tabel ini anda rubah colspannya sehingga akan terlihat hasil seperti pada gambar di atas
agar lebih menarik anda bisa mengubah warna, tampilan atau background sesuai dengan keinginan anda
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" xml:lang="en" lang="en">
<head>
<title>Grafik Berbasis tabel</title>
</head>
<body background ="6.jpg">
<marquee><font color="Red" face="arial" size="5">Kreasi Grafik Batang Dengan Memanfaatkan Elemen Garis</font></marquee>
<blink><font color="Red" face="Arial" size="4">Created by: Novi Khassifa</font></blink>
<table width="561" height="241">
<tr>
<td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;"><b>Perusahaan</td>
<td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;"><b>Pendapatan</td>
</tr>
<tr >
<!-- -->
<td width="172" >Angin Reebot Ltd </td>
<td width="27"></td>
<td width="31"></td>
<td width="25"></td>
<td width="33"></td>
<td width="16"></td>
<td width="13"></td>
<td colspan="6" bgcolor="#006600"></td>
<td width="17">+150%</td>
</tr>
<tr>
<td>Command Prompt, Inc </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="4" bgcolor="#006600"></td>
<td width="16">+55%</td>
<td width="16"></td>
<td></td>
</tr>
<tr>
<td>Hibernate Ltd </td>
<td></td>
<td></td>
<td></td>
<td>-23%</td>
<td colspan="2" bgcolor="#FFFF00"></td>
<td width="34"></td>
<td width="16"></td>
<td width="16"></td>
<td width="16"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Shutdown Ltd </td>
<td></td>
<td>-75%</td>
<td colspan="4" bgcolor="#FF0000"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="14" style="border-top:#000000 solid"></td>
</tr>
</table>
<a href="Tugas2.html">Klik di sini</a> Untuk Mengakses Desain Tabel Berikutnya
<hr color="black"></hr>
</body>
</html>
selamat mencoba!!! ^_^
Readmore...
MEMBUAT HALAMAN WEB SEDERHANA
gambar.Terdapat sebuah heading dan garis berwarna,
dua buah gambar pada sisi kiri dan kanan dengan garis tepi (border), dan halaman utama dengan latar belakang (background) gambar sembarang.
Adapun 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" xml:lang="en" lang="en">
<head> <title>khassifa</title></head>
<body background ="6.jpg">
<h2><b>Halaman Web Sederhana</b></h2>
<h3><b>By: Khassifa</b></h3>
<img src="1.jpg" align="left" border="6" alt="0"/>
<hr style = "color:#0000FF" />
<p>
studdy kasus ==> Memuat 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
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
</p>
<hr style = "color:#FF0000" /> <br />
<hr style = "color:#0000FF" align="right" width="200" />
<p align="right">
</p>
<font color="#800000"><b>KuruNdutZ</b></font><br />
<font color="#800000"><b>AyyaMdanBeybekZ</b></font><br />
<img src="5.jpg" align="right" border="6"alt="0"/>
</body>
</html>
Readmore...
Bismillah.....
Ngeblog lagi untuk upload tugas Pemrograman Berbasis Web salah satu mata kuliah semester 6 PTI UM '07 ..Bimbingan Pak Didik Dwi Prasetyo,S.T,M.T.
Mudah-mudahn lancar aja untuk seterusnya Amin....
Readmore...
The ReaL GeJe ^^
KHASSIFA SI BINTU NAHL





