fauziah: Maret 2010

Membuat Login Form Sederhana

Berikut cara membuat form login sederhana....
ikuti langkah-langkahnya yach.....

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.

Berikit source php-nya...

<!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']=='ulfa') AND ($_POST['pass']=='3012')) {
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>

simpan dengan nama check.php dan berikut source html-nya....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Login Form_Ulfa Fauziah</title>
<style type="text/css">
#apDiv1 {
position:absolute;
width:380px;
height:330px;
z-index:1;
left: 449px;
top: 136px;
background-color: #FF9933;
border: 2px solid yellow;
}
#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(011.JPG);
}
#footer{
width:380px;
height:40px;
background-image: url(1024.jpg);
}
body {
background-image: url(1024.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:#FFCC99">
<br>
<br>
<strong>Password : </strong>
<br>
<input type="password" name="pass" size="35" style="background-color:#FFCC99">
<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>

simpan dengan nama Login Form.html dan berikut hasilnya...

Nb: jangan lupa User Name : ulfa dan Password : 3012

Semoga bermanfaat .......

Microsoft Launching Windows Mobile 6.5

Dalam acara Microsoft TechEd 2009, Microsoft telah memberikan variasi produk, dan menurut blog team Microsoft, pihaknya akan merilis Windows Mobile 6.5. Software system ponsel tersebut rencananya akan hadir di tanggal 11 Mei dalam event Microsoft TechEd 2009 itu.

Acara Microsoft TechEd 2009 sendiri menurut Microsoft adalah acara terbesar dalam sejarah Windows Mobile. Windows Mobile dibuat Microsoft untuk kalangan IT professional dan pengembang, dengan demo Windows Mobile 6.5 yang cool.

Ketika Microsoft memberikan pengumuman pertamanya mengenai Windows Mobile 6.5 di bulan Februari lalu, banyak orang menduga bahwa sebuah system mobil terbaru telah terbentuk. Seperti pada bulan Maret lalu, Microsoft juga telah memberikan sedikit bocoran mengenai interface system Windows Mobile 6.5.

Ketika itu, Microsoft berencana untuk melengkapi Windows 6.5, dan akan merilis versi finalnya dengan nama Windows Mobile 7. Windows Mobile 7 rencananya akan diluncurkan di bulan April 2010.

http://www.beritanet.com

Membuat Shortcut Shutdown di Taskbar Windows 7

Untuk menghidupkan atau mematikan komputer cukup mudah dan sudah biasa kita lakukan. Namun kadang-kadang kita terutama anak-anak tidak selalu menggunakan rosesdur yang berar. Windows sudah menyediakan fasilitas untuk mematikan komputer dengan baik, yaitu dengan memanfaatkan fasilitas ShutDown.

Tetapi kadang-kadang, kita juga ingin mengetahui cara membuat shutcut, misalya Shortcut untuk Shutdown. Sebenarnya cukup mudah dan sederhana, namun umumnya pekerjaan ini tidak pernah dilakukan, karena fasilitasya memang sudah tersedia.

Untuk memulainya Anda klik kanan di Desktop, kemudian klik New, dan klik Shortcut.
Lanjutkan dengan mengklik Create Shortcut. Setelah itu segera tampil jendela Shortcut Wizard, di kolom yang telah tersedia, ketikkan shutdown /s /t /0
Klik Next untuk melanjutkan pekerjaan tersebut. Setelah jendela berikutnya tampil, pada kolom Type a name for this shortcut, ketikkan misalnya Reastar komputer, atau sesuai keinginan Anda dan klik Finish.

Sampai tahap ini pekerjaan Anda membuat Shortcut untuk Restart sudah selesai. Untuk mencobanya Anda cukup klik folder yang baru Anda buat di desktop. Untuk menempatkannya di taskbar, Anda juga bisa menggunakan cara berikut ini.

Klik kanan di Shortcut yang sudah Anda buat, kemudian klik Properties dan klik tab Shortcut
Klik change icon, lalu Windows 7 akan menampilkanpernyataan bahwa icon yang berhubungan dengan Shutdown tidak tersedia. Untuk melihat ikon yang sesuai Anda cukup klik OK saja. Selanjutnya klik ikon yang dikehendaki dan klik OK.
Klik kanan di ikon yang sudah terbentuk di Shortcut Shutdown yang Anda buat, kemudian klik Pin to Taskbar. Windows 7 akan menambahkan ikon di taskbar dan Anda sudah bisa memanfaatkan ikon tersebut untuk mempercepat proses Shutdown komputer Anda.

Selamat mencoba.........

http://wss-id.org/blogs/tutang/default.aspx

Membuat Generate Sel Tabel menggunakan HTML n PHP Script

Sekarang kita akan belajar membuat generate sel table, pada postingan sebelumnya sudah kita bahas tentang apa itu php dan kita lanjutkan untuk membuat generate sel tabel secara fleksibel……

Berikut script nya…..

<body>
<?php
$rows = 1;
$columns = 1;
$cells = 1;
?>

<?php $rows = (int) $_POST["totalBaris"]; ?>
<?php $columns = (int) $_POST["totalKolom"]; ?>
<?php $cells = (int) $_POST["totalSel"]; ?>

You pick <?php echo $rows; ?> rows,<br />
You pick <?php echo $columns; ?> columns,<br />
and you need <?php echo $cells; ?> cells,<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>";
?>
</body>

Dan langkah berikutnya yaitu membuat script html nya........

<body>
<form method="post" action="tabel.php">
<p><font face="Bauhaus 93" color="#339900" size="5"><strong>GENERATE SEL TABEL</strong></font><br></p>
<table width="277" border="0">
<tr>
<td width="89">Jumlah Baris</td>
<td width="172"><strong>: </strong><input name="totalBaris" type="text" id="totalBaris" onKeyUp="getmax();" onfocus="this.select();"></td>
</tr>
<tr>
<td><label>Jumlah Kolom</label></td>
<td><strong>: </strong><input name="totalKolom" type="text" id="totalKolom" onKeyUp="getmax();" onfocus="this.select();"></td>
</tr>
<tr>
<td>Jumlah Sel</td>
<td><strong>: </strong><input name="totalSel" type="text" id="totalSel" onKeyUp="getmax();" onFocus="this.select();"></td>
</tr>
<tr>
<td>Sel Maksimal</td>
<td><strong>: </strong><input name="jmlSelMax" type="text" id="jmlSelMax" readonly="true" style="background-color:#999999">
</td>
</tr>
<tr>
<td>
<div align="center">
<br />
<input type="reset" name="Reset" value="Reset">
</div></td>
<td>
<div align="right">
<br />
<input type="submit" name="Generate" value="Generate">
</div></td>
</tr>
</table>
</form>

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

</script>
<font face="Bauhaus 93" color="#339900" size="3">ulfa-fauziah.blogspot.com</font><br>

berikut hasilnya....

Selamat mencoba dan semoga berhasil.....

PASSING BY VALUE DAN PASSING BY REFERENCE

Ass…

Pada kesempatan kali ini saya akan membahas tentang Passing by Value dan Passing by Reference. Sebelumnya kita akan bahas dasar-dasar PHP dulu….

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:
&gt?
$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
";
?&lt

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.

PASS 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

Tampilan output:

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…

Selamat mencoba…….

Trik Identifikasi System Windows 32-Bit atau 64-Bit

Bit computer menentukan seberapa banyak data dapat diproses. Di system operasi Windows XP, 32-bit dan 64-bit adalah yang paling sering digunakan. Semakin tinggi hitungan bit yang digunakan, maka makin cepat komputer dapat memproses data. Penting juga untuk mengetahui apakah komputer menggunakan system 32-bit atau 64-bit, sehingga ketika kita menginstal program, aplikasi dan driver, maka akan merasa bahwa apa yang di-instal kompatibel dengan versi Windows kita.

Cara mengetahui bit system operasi yang digunakan :
Menggunakan System Properties

Klik menu “Start” Windows dan klik “Run” dan akan muncul command box. Ketikkan "sysdm.cpl" (tanpa tanda petik) dan tekan Enter hingga muncul dialog box System Properties.
Klik tab “General”. Kita akan melihat informasi mengenai system operasi. Jika kita memiliki komputer yang berjalan di system 64-bit, maka kita akan melihat tulisan "Windows XP Professional x64 Edition Version" di bawah “System“. Jika komputer berjalan di system 32-bit, maka kita hanya akan melihat "Windows XP" (home or professional) di bawah “System” .
Tutup dialog box “System Properties“.

Menggunakan jendela System Information

Klik menu “Start” Windows, klik “Run” untuk launching command box.
Ketik "winmsd.exe" (tanpa tanda petik) dan tekan Enter hingga muncul jendela System Information
Klik "System Summary" di panel navigasi dan lokasikan "Processor" di bawah "Item" di detailnya.
Jika value processor mulai dengan x86, maka komputer kita berjalan dengan versi 32-bit jika value processor mulai dengan ia64 atau AMD64, maka komputer kita berjalan di system Windows 64-bit.
Tutup jendela System Information

http://www.beritanet.com

Tutorial Internet Jawa

foto berita artikel

Bahasa adalah wahana utama dalam menyampaikan pesan selain isyarat grafis, tanpa memahami bahasanya tentunya kecil kemungkinan pengunjung bisa memahami pesan yang terkandung di dalam posting, maka webmaster haruslah memilih bahasa yang digunakan di website karena sangat erat hubungannya dengan potensi pengunjung yang menjadi targetnya. Di dunia online secara alamiah telah memilih bahasa inggris sebagai satu bahasa yang paling dipahami di seluruh dunia, artinya suatu website yang menggunakan bahasa inggris (english) bisa dipahami oleh netter-netter dunia, begitu juga dengan bahasa indonesia bisa dipahami untuk netter yang memahami bahasa indonesia meskipun mengakses dari manapun.

Bagaimana dengan bahasa daerah ? fakta nyata bahwa sangat sedikit webmaster yang menggunakan bahasa daerah secara serius padahal sebenarnya potensi pengunjung cukup banyak, sebagai contoh bahasa jawa masih aktif digunakan dalam keseharian di jawa tengah dan Jawa Timur sedangkan potensi lain adalah "orang jawa" yang telah migrasi ke seluruh pulau di Indonesia, yang kerja di Malaysia/Asia atau Timur Tengah serta yang sedang belajar di Amerika, Eropa, Australia belum terhitung orang Suriname yang notabene berbahasa Jawa-Belanda, hitung-hitung mungkin di atas 25 juta orang potensinya.

Jika kita cari lewat artikel Google atau Yahoo dengan menggunakan keyword: "basa jawa" atau "jawa" akan muncul deretan website yang menggunakan atau sekali-kali menggunakan bahasa jawa di kontennya, tapi jika kita surfing lebih jauh sayangnya rata-rata belum serius menggunakan basa jawa sebagai power..! sayang sekali memang penghargaan masyarakat terhadap bahasa daerah sangat minim. Satu hal penting adalah saat surfing di www.lyasa.com/jw dimana admin menyajikan tema tutorial membuat website, multi bahasa serta tip & trik internet yang dahsyat! dalam tiga bahasa sekaligus : english, bahasa indonesia dan basa jawa , ini baru ok, tiap konten diterjemahkan secara sempurna, kita tinggal mengklik bendera di sudut kanan atas maka konten akan berganti bahasa secara automatis.

Ada beberapa alasan logis untuk menggunakan bahasa daerah:
1. Potensi pengunjung masih cukup banyak.
2. Unik, nilai keunikan cukup tinggi.
3. Menghidupkan jati diri bangsa dan bahasa.
4. Nilai kedaerahan yang kental tema situsnya.
5. Masih ada masyarakat yang belum paham bahasa lain.

Dari artikel di atas, marilah kita budayakan bahasa daerah kita....
Semoga berhasil.......

Penulis :Ir. Makin Seno Aji (www.lyasa.com)

Membuat aplikasi menggunakan Java Script

Ass....

Untuk kali ini kita akan belajar membuat aplikasi kalkulator dan pemesanan makanan menggunakan html dan java script, sebelumnya kita akan bahas tentang java script terlebih dahulu....

Java merupakan sebuah bahasa pemrograman yang mirip dengan bahasa C. Tetapi dengan Java kita bisa membuat tampilan halaman sebuah web menjadi lebih menarik. Contoh penggunaan Java adalah pada fungsi Mouseover, scrolling marquees, tampilan tanggal dan waktu, kalkulator, dan lain-lain. Terdapat dua tupe Java yaitu Java applet dan Java Script.

JAVA APPLETS

Java merupakan bahasa pemrograman yang dikembangkan oleh Sun Microsystems dan merupakan bahasa pemrograman yang berorientasi obyek. Java bisa digunakan untuk membuat suatu aplikasi yang berdiri sendiri atau pun sebuah aplikasi mini yang biasa disebut applet. Applet biasa digunakan pada halaman web supaya terlihat lebih dinamis. Terdapat banyak sekali aplikasi/applet yang ada.

JAVA SCRIPT

JavaScript dikembangkan oleh Netscape, yang merupakan bahasa pemrograman yang "sederhana" karena tidak bisa digunakan untuk membuat suatu aplikasi atau pun applet. Java Script merupakan sebuah bahasa scripting yang dikembangkan oleh Netscape.Dengan Java Script kita bisa dengan mudah membuat sebuah halaman web yang interaktif. Program Java Script dituliskan pada file HTML (*.htm atau *.html) dengan menggunakan tag kontainer . Dengan kata lain, Anda tidak perlu menuliskan program JavaScript pada file terpisah (walaupun Anda juga bisa melakukannya).

berikut script dari aplikasi kalkulator :

<html>
<title>Kalkulator sederhana</title>
<SCRIPT LANGUAGE="JavaScript">
function tambah()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a+b
form.hasil.value = c
}

function kurang()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a-b
form.hasil.value=c
}

function kali()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a*b
form.hasil.value=c
}

function bagi()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a/b
form.hasil.value = c
}

function pangkat()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=Math.pow(a, b)
form.hasil.value = c
}

function kosong()
{
form.a.focus()
form.a.value=""
form.b.value=""
form.hasil.value=""

}

</SCRIPT>

<body onload=kosong()>
<CENTER>
<h1><font color="blue" face="Snap ITC">Kalkulator Sederhana</font></h1>
<hr width="600" size="3" color="#000066">
<FORM name="form">

<pre>
</font> <input type="text" name="a"> <select name="operator" onchange="getSelectedValue();">
<option value="+" onClick="tambah()">+</option>
<option value="-" onClick="kurang()">-</option>
<option value="*" onClick="kali()">*</option>
<option value="/" onClick="bagi()">/</option>
<option value="^" onClick="pangkat()">^</option>
<input type="text" name="b"> = <input type "text" name="hasil" disabled="true">
<font color="red"><input type="button" value="DELETE" onClick="kosong()">
</pre>

<br>
<font color="blue" face="Snap ITC" size="3">ulfa-fauziah.blogspot.com</font><br>
</FORM>
</CENTER>

</body>
</html>

save dengan nama kalkulator.html dan hasilnya seperti gambar di bawah......

Berikutnya kita akan bahas tentang aplikasi form pemesanan makanan dan minuman, berikut script nya,,,,,

<!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</title>
</head>

<body>


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


</script>
<h2><font color="blue" face="Snap ITC">Form Pemesanan <br>Berbasis JavaScript</font></h2>
<form name="form2" action="#">
<table border="1px">
<tr bgcolor="#33FFFF">
<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" >@ <input type="text" name="bakso" value="12000" size="6" disabled="true"/></td>
<td width="150px"><input type="text" name="uBakso" value="0" onChange="hitungPesan()"/></td>

</tr>

<tr>
<td>2</td>
<td>Soto Spesial</td>
<td>@ <input type="text" name="soto" value="10000" size="6" disabled="true"/></td>
<td><input type="text" name="uSoto" value="0" onChange="hitungPesan()"/></td>

</tr>

<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td>@ <input type="text" name="mie" value="15000" size="6" disabled="true"/></td>
<td><input type="text" name="uMie" value="0" onChange="hitungPesan()"/></td>
</tr>

<tr>
<td>4</td>
<td>Es Degan</td>
<td>@ <input type="text" name="degan" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="uDegan" value="0" onChange="hitungPesan()"/></td>
</tr>

<tr>
<td>5</td>
<td>Es Campur</td>
<td>@ <input type="text" name="campur" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="uCampur" value="0" onChange="hitungPesan()"/></td>
</tr>

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

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

<tr bgcolor="#33FFFF">
<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()" />
<br>
<font color="blue" face="Snap ITC" size="3">ulfa-fauziah.blogspot.com</font></br>
</form>

</body>

</html>

save dengan nama form pemesanan.html dan hasilnya seperti di bawah ini.....

sekian dulu semoga bermanfaat......
trimakasih........

Membuat Layout dan Desain Halaman Web.......

Assalamualaikum wr.wb.

Mari kita lanjutkan belajar web, hehehe….

Untuk kali ini kita akan belajar membuat DESAIN WEB sederhana menggunakan CSS, sebelum kita memulai pada script terlebih dahulu saya akan bahas sedikit tentang CSS,,,,,,,,,,,

Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. 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 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 markup 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.

CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS.

Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu: External Style Sheet (file CSS berbeda dari file HTML), Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML) dan Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan). Disarankan kita menggunakan cara External Style Sheet karena lebih mudah untuk mengelolanya.

Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS. CSS adalah sebuah dokumen yang berdiri sendiri dan dapat dimasukkan dalam kode HTML atau sekedar mejadi rujukan oleh HTML dalam pendefinisian style. CSS menggunakan kode2 yang tersusun untuk menetapkan style pda elemen HTML atau dapat juga digunakan membuat style baru yang biasa disebut class.

CSS dapat digunakan untuk menggantikan , , dan , dikarenakan hal berikut:sebuah file css dapat menjadi rujukan banyak halaman HTML. Hanya dibutuhkan 1 baris kode untuk melakukan hal tersebut. Ini berarti akan meminimalkan file2 HTML yang akan dibuat. Jika ingin mengubah tampilan website yang telah dibuat, maka yang perlu dilakukan hanya mengganti baris-baris kode pada css nya saja, tanpa perlu mengutak-atik file-file HTML nya.

CSS dapat mengatur banyak atribut pada sebuah halaman secara mudah. Misalnya: warna background, border, shadow, yang berbeda pada masing-masing tag yang digunakan. Sekarang, kita akan mencoba melihat bagaimana css itu bekerja. Untuk itu, kita butuh sebuah text editor (notepad, wordpad, Ms word, semua tergantung kesukaan masing2), dan sebuah web browser tentunya.

Penggunaan css yang langsung dimasukkan ke dalam file HTML, biasa disebut inline style sheet. Ada juga css yang diletakkan diluar file html, dan untuk menggunakannya, css tersebut akan dipanggil melalu 1 baris kode.

· rel=”stylesheet” digunakan untuk memberi tahu browser bahwa file yang di “link” kan adalah file css.
· type=”text/css” menginformasikan kepada browser bahwa tipe dari file yang di “link” adalah text dan mengandung css didalamnya.
· href=”style1.css” memberitahukan pada browser bahwa file yang akan diload adalah style.css

Tag HTML yang digunakan untuk membuat menu adalah . Setelah itu kita akan mendesain tiap menu item, yang mana tag dari item-item tersebut adalah

. Selain tag li, kita juga akan mendesain tag dan tag memiliki atribut face, size dan color.

CoolText merupakan sebuat class pada css. Keistimewaan class adalah dapat menyusun tampilan banyak tag. Kita ambil contoh penggunaan .CoolText.

Format penulisan class secara umum:

.[Class Name]

{

[Attribute]: [Value];

}

Aturan penulisan nama class, adalah alphanumeric. Jadi boleh saja jika kita ingin menulis nama class dengan perpaduan angka dan huruf, misalnya: BigGoldWriting99
[Attribute], berisi tag atribut yang akan diganti pada penggunaan class. Dapat berupa font-family, color, border, dll.
[Value] berisi nilai perubahan yang diinginkan pada masing-masing atribut.

Sekarang kita masuk pada aplikasinya….

Seperti biasa buka editor teks/notepad++ setelah itu ketikkan kode css berikut:

#wrapper
{ margin:auto;
width:980px;
border:2px solid white;
}
#header
{ height:80px;
border:1px solid orange;
}
#inner
{ float:left;
margin:5px 0;
border:1px solid white;
}
#footer
{ clear:both;
height:50px;
border:1px solid purple;
}
#sidebar
{ float:left;
margin-right:10px;
width:200px;
height:400px;
border:1px solid blue;
}
#content
{ float:left;
width:760px;
height:400px;
border:1px solid white;
}
#content-top
{ clear:both;
margin:auto;
width:760px;
height:120px;
border:1px solid red;
}
#content-main
{ float:left;
margin:auto;
width:480px;
height:260px;
border:1px solid green;
}
#content-right
{ float:right;
margin:auto;
width:260px;
height:270px;
border: 1px solid yellow;
}

Kemudian save dengan nama mystyle2.css

Selanjutnya kita ketik kode html nya ....

Selanjutnya simpan kode-kode html tersebut dengan nama Desain1.html dan letakkan pada direktori C:\wamp\www\

Untuk mengetahui hasil dari dokumen html yang kita buat, seperti tutorial sebelumnya yaitu buka Wampserver kemudian buka Localhost. Panggil dokumen html tersebut dengan memanggil tempat dan nama html nya, seperti http://localhost/Modul3/Desain1.html dan hasilnya seperti gambar di bawah :

Html di atas masih desain layout halaman web, berikut akan saya tampilkan desai halaman web nya……..

Berikut kode css nya...

* { margin: 0; }

body { margin:5px auto; padding:0; font:0.85em/150% Century; }

#wrapper {
margin:auto;
width:980px;
}

#header {
height:80px;
margin:0px auto;
background:#006600;
}

#header-content{
height:70px;
margin:auto;
background:#66CC00 url(bg_top.gif);
}

#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% 'Century';
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:#66CC00;
}

#sidebar {
float:left;
width:200px;
height:400px;
background-color:#FFFF66
}

#content {
float:right;
width:780px;
height:400px;
background:#FFFFFF
}

#content-top {
clear:both;
margin:auto;
width:780px;
height:140px;
background-image:url(rektorat.jpg)

}

#content-main {
float:left;
margin:auto;
width:480px;
height:240px;
}

#content-main p, h3{
padding: 10px 20px 0px 20px;
text-align:justify;
}

.style {font-size:x-small}

#content-main hr{
width:440px;
color:#FFF;
margin: 10px 20px 0px 20px;
}

#content-right {
float:right;
margin:10px auto;
width:260px;
border: 1px solid green;
background:#FFFF66
}

#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:#6cae15 no-repeat left center;
margin: 0px 0px 1px;
color:#000000
}

#leftmenu a:hover {
background:#5e9711 no-repeat left center;
color:#FFFF99
}

Simpan dengan nama css2.css

dan di bawah ini adalah kode html nya…

<!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>Desain</title>

<link type="text/css" rel="stylesheet" href="css2.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="logoum.jpg" width="55"/>

</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>Pendaftar Seleksi Beasiswa Bidik Misi UM Tembus 1500 Peserta</h3>

<hr />

<p class="style">

Minggu, 28 Februari 2010

<p>

Program perdana beasiswa pendidikan bagi mahasiswa dari keluarga tidak mampu yang berprestasi (Bidik Misi) mendapat sambutan antusias. Sejak Universitas Negeri Malang (UM) membuka pendaftaran pada tanggal 1 Februari 2010, tercatat sudah ada 1.500 pendaftar data sampai tanggal 2 Maret 2010.

Padahal jatah di UM untuk Bidik Misi hanya 450 calon mahasiswa. Mereka sudah memasukkan berkas data via online.

</div>

<div id="content-right">

<h3>Events</h3>

<ul>

<li><a href="#">Kunjungi Blog Elektro</a></li>

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

<li><a href="#">Seminar Nasional</a></li>

<li><a href="#">Software Aplikasi Pendidikan</a></li>

</ul>

</div>

</div>

</div>

<div id="footer">

<h4 align="center"><blink><font color="#000000" face="century" size="2">ulfa-fauziah.blogspot.com</font></blink></h4>

<p><marquee><font color="#000000" face="century"><b>© 2010 Teknik Elektro UM. Malang, Indonesia </marquee></font></b></p>

</div>

</body>

</html>

Simpan kode-kode html tersebut dengan nama Desain.html kemudian panggil dokumen html tersebut dengan memanggil tempat dan nama html nya, seperti http://localhost/Modul3/Desain.html dan hasilnya seperti desain di bawah :

Sekian dari saya n semoga bermanfaat….

fauziah

Membuat Login Form Sederhana

Microsoft Launching Windows Mobile 6.5

Membuat Shortcut Shutdown di Taskbar Windows 7

Membuat Generate Sel Tabel menggunakan HTML n PHP Script

PASSING BY VALUE DAN PASSING BY REFERENCE

Fungsi pass by value dan pass by reference adalah :

Trik Identifikasi System Windows 32-Bit atau 64-Bit

Tutorial Internet Jawa

Membuat aplikasi menggunakan Java Script

Membuat Layout dan Desain Halaman Web.......

cLocK

KaLenDer

Blog TeMan

Labels

Blog Archive

TinggaLin peSan yach.....

Music