Tuesday, October 26, 2010

PEMROSESAN FORM

Pemrosesan form merupakan operasi mendasar pada aplikasi web. Dalam konteks pengembangan aplikasi web dinamis, pemrosesan form ini pasti akan dilakukan. Contohnya, untuk menerima masukan dari user, tentu diperlukan sekali form isian dan cara pemrosesannya, ketika administrator ingin masuk ke sistem, tentu memerlukan suatu antarmuka penghubung. Intinya, keberadaan form dan pemrosesannya mutlak diperlukan dalam membangun aplikasi web yang interaktif. Teknik pengiriman form dapat dilakukan melalui tiga metode: POST, GET, dan kombinasi keduanya. Dalam konteks PHP, parameter-parameter $_GET, sedangkan POST melalui $_POST. Selain itu, keduanya juga dapat dibaca menggunakan $_REQUEST.Untuk lebih jelasnya kita akan belajar bersama tentang pemrosesan form. Ketikkan kode program berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="" />

    <title>Login</title>
    <style type="text/css">
    <!--
table {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
height: 20px;
}
-->
</style>

</head>

<body>
<script language="JavaScript" type="text/javascript">
   function setFocus() {
    document.login.username.focus();
   }
      function getValue() {
    var vText;
    var vPwd;
  
    vText = document.login.username.value;
    vPwd = document.login.password.value;
    if ((vText == "") || (vPwd == "")) {
        alert("Warning !\nUsername dan Password tidak boleh kosong");
        setFocus();
    } else {
        if ((!isNaN(vText)) || (!isNaN(vPwd))) {
        alert("Warning !\nUsername dan Password tidak boleh angka");
        setFocus();
        }
    }
   }      
</script>

<div align="center">
<form action="ceklogin.php" method="post" name="login">
<table width="286" border="0" cellpadding="0" cellspacing="0">

<tr bgcolor="#9966cc">
<td height="9" colspan="2" align="center" valign="middle">
<br /><font color="#2A1F00"><h1>LOGIN</h1></font></td>
</tr>
<tr>
<td width="106" height="27">&nbsp;</td>
<td width="180">&nbsp;</td>
</tr>
<tr>
<td height="18" align="right" valign="middle">Username :&nbsp;</td>
<td valign="middle">
<input name="username" type="text" id="username" size="20" /></td>
</tr>

<tr>
<td height="18" align="right" valign="middle">Password :&nbsp;</td>
<td valign="middle">
<input name="password" type="password" id="password" size="20" /></td>
</tr>
<tr>
<td height="19">&nbsp;</td>
<td></td>
</tr>
<tr>
<td height="18" valign="top">&nbsp;</td>
<td valign="middle">
<input name="login" type="submit" id="login" value=" Login " onclick="getValue()" /></td>
</tr>
<tr>
<td height="28">&nbsp;</td>
<td></td>
</tr>
<tr bgcolor="#9966cc">
<td height="20" colspan="2" valign="top">&nbsp;</td>
</tr>
</table>
</form>
</div>

</body>
</html>

Hasilnya : 

Apabila username dan password tidak diisi atau diisi angka maka akan muncul pesan error seperti dibawah ini :


Posted by at No comments:

Monday, October 4, 2010

DHTML DAN JAVA SCRIPT


DHTML dan JavaScript Scripting merupakan jenis lain dari pemrograman, yang umumnya lebih mudah dipahami. Script dapat disisipkan kedalam dokumen HTML dengan menggunakan tag <script>. Tidak seperti style sheet, script bisaterlihat 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. Pembuatan DHTML dapat memanfaatkan JavaScript. JavaScript terbentuk atas
elemen-elemen fundamental. Dengan menggunakan JavaSript memungkinkan Anda untuk menampilkan Kotak Dialog, Dukungan Scripting, Merujuk Elemen, Event, Linked Scripting, dan lain sebagainya. Berikut pemanfaatan JavaScript didalam penggunaan kalkulator.
ACTIVE WEB PAGE
Sebagaimana diketahui, HTML merupakan model dokumen yang statis begitu ditampilkan tidak akan berubah sampai ada aktivitas navigasi. Ada pun untuk menjadikan HTML sebagai halaman dinamis atau aktif, kita bisa memanfaatkan bahasa scripting.
ELEMEN DASAR JAVASCRIPT

  • Kotak Dialog
JavaScript memungkinkan kita untuk menampilkan kotak dialog melalui fungsi alert (). Kotak dialog ini dapat dimanfaatkan untuk menyampaikan informasi atau konfirmasi.

  • Dukungan Scripting
    Melalui tag <noscript>, dengan mudah kita bisa mengidentifikasi apakah browser mendukung scripting atau tidak. Pada dasarnya, tag ini tidak dimaksudkan untuk menghentikan interpretasi terhadap kode program. Dengan kata lain, browser akantetapmenerjemahkanbariskodekecuali tag <script>.

  • MerujukElemen
    Salah satukemampuanutama JavaScript adalahmengontrolobjek-objek di halaman web.Sehubungan dengan hal ini, ada beragam pendekatan yang bisa digunakan untuk mengacu atau mengakses elemen-elemen objek.

  • Event
    Setiap objek HTML mendefinisikan properti-properti, method-method, dan event-event.Salah satu event yang sangat popular dan frekuensi penggunaannya cukup tinggi adalah onclick. Event ini akan dipicu manakalaobjek, misalnya button atau teks diklik.

  • Linked Scripting
    Seperti halnya CSS, penulisan kode JavaScript juga bisa dilakukan di file terpisah. Langkah ini sebaiknya digunakan ketika melakukan implementasi nyata, dengan tujuan membuat kode yang bersih.
ME-RETRIEVE NILAI
Saat bekerja dengan elemen-elemen masukan seperti text field, select, dan check box HTML, kita bisa memanfaatkan JavaScript untuk operasi validasi. Adapun langkah penting terkait dengan elemen-elemen ini adalah pengambilan nilai.

  • Text Field
    Elemen text field menyediakanproperti value yang bisa digunakan untuk menetapkan atau mendapatkan nilai elemen.

  • Select (Combo Box)
    Secara umum, properti value tersedia di semua elemen HTML. Dengan demikian, kita juga bisa memanfaatkannya untuk mendapatkan nilai select atau combo box.

  • Check Box
    Khusus untuk pengambilan nilai check box, terlebih dahulu kitaperlumengidentifikasi item yang dipilih.
MEMILIH ITEM CHECK
Agar pemilihan item check box bisa lebih efisien, kita dapat menggunakan pendekatan check/uncheck all.
WINDOW
Di dalam window aktif, kita juga bisa menciptakan window baru melalui method window.open().
Komunikasi Window : Apabila diperlukan, window induk yang menciptakan subwindow juga dapat berkomunikasi dengan window buatannya.
CONTOH :
Dalam pembahasan DHTML dan Java Script ini, kita akan mencoba membuat sebuah program pemesanan makan/minuman menggunakan Java Script.

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

<html>
<head>
<title>warung wenak tenan</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>

<!--Letakkan Listing Code JavaScript disini-->
<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="#0000000">&#64; <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="#0000000">&#64; <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="#0000000">&#64; <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="#0000000">&#64; <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="#0000000">&#64; <input type="text" name="campur" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="qCampur" value="0" onChange="hitungPesan()"/></td>
</tr>

<tr >
<td colspan="3" align="right">Jumlah Total</td>
<td><input type="text" name="Total" disabled="true" /></td>
</tr>

<tr >
<td colspan="3" align="right">Diskon</td>
<td><input type="text" name="Diskon" disabled="true" /></td>
</tr>

<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>
</body>
</html>


  • HASIL PADA LOCALHOST :


Posted by at No comments:

Wednesday, September 29, 2010

CASCADING STYLE SHEET


Cascading Style Sheet
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.

Contoh pembuatan desain layout halaman web dengan HTML
Untuk membuat desain layout halaman web dengan menggunakan HTML, maka ikutilah langkah-langkah berikut ini :



  1. Pertama-tama, kita membuat kerangkanya terlebih dahulu sesuai dengan keinginan kita. Ketikkan kode berikut ini:
#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;}
Simpan dengan nama cobatgs dan ber-ekstensi css. (cobatgs.css)



  1. Selanjutnya ketikkan kode berikut ini juga :
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
Desain Layout Sederhana





Top


Content





Simpan file dalam bentuk html (cobatgs.html)



  1. Buka file html, maka hasilnya adalah :
      

     4.  Langkah selanjutnya adalah membuat isi dari setiap kolom-kolom yang telah ada, misalnya dengan cara mengetikkan kode berikut ini pada file cobatgs.css yang sebelumnya :



    #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: 140px;
    background: #FFFFCC;
    border: 1px solid white;
    }

    #content {
    float: left;
    margin-right: 5px;
    width: 410px;
    height: 215px;
    background: #FFFFCC;
    border: 1px solid white;
    }

    #right {
    float: right;
    margin-left: 5px;
    width: 390px;
    height: 215px;
    background: #FFFFCC;
    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;
    }

    #box5{
    float: right;
    margin-right: 15px;
    margin-top: 7px;
    width: 100px;
    height: 20px;
    background: #FFFFFF;
    border: 1px solid #99CC00;
    }
    #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: 300px;
    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;
    }



    1. Dan mengetikkan kode berikut pada file html-nya :
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

    Desain Layout Sederhana












    Temu Kangen
    Buat Sparta-sparti 23, kita-kita mau mengadakan acara ngumpul-ngumpul bareng lho.... satu angkatan.
    Jadi buat temen-temen diharap kedatangannya. Acaranya :
    Hari / Tanggal : Sabtu / 27 Februari 2010
    Jam : 19.00 s/d selesai (subuh)
    Tempat : Pulosari (PS)










    1. Maka hasilnya adalah :



Posted by at No comments:
Subscribe to: Comments (Atom)