Recent twitter entries...

FORM LOGIN

0
Dengan PHP kita juga bisa membuat aplikasi form login sederhana (tanpa database). form login ini terdiri dari field ID/username dan password. spesifikasinya antara lain:
1. field tidak boleh kosong (harus di isi)
2.jika password dan id sesuai akan muncul pesan selamat datang dan mencetak nilai id
3. id/username yang dipake: Dania, password: teram59
berikut adalah sintaknya:
<!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>Login Form</title>
<script language="javascript" type="text/javascript">
function cek(){
var user= document.getElementById('userid').value;
var pass= document.getElementById('passwd').value;
if(user.replace(/^\s+|\s+$/g, '')==''){
alert('Username Harus Diisi!');
return false;
}
if(pass.replace(/^\s+|\s+$/g, '')==''){
alert('Password Harus diisi!');
return false;
}
return true;
}

</script>
</head>

<body bgcolor="aqua">
<form name="login" method="post" action="<?php $_SERVER['PHP_SELF'];?>">
<p align="center"><? echo $status;?></p>

<table width="500" border="6" align="center" bgcolor="green" rules="groups" cellpadding="8" cellspacing="5">
<tr>
<td width="50">&nbsp;</td>
<td align="left"><font size="10" face="Comic Sans ms" color="#06F9E0">Login</font></td>
</tr>
<tbody >
<tr><td width="50">&nbsp;</td><td><font size="4" face="verdana">Username</font></td></tr>
<tr><td width="50">&nbsp;</td><td><input type="text" name="userid" size="50" id="userid" /></td></tr>
<tr><td width="50">&nbsp;</td><td><font size="4" face="verdana">Password</font></td></tr>
<tr><td width="50">&nbsp;</td><td><input type="password" name="passwd" size="50" id="passwd" /></td></tr>
<tr><td width="50">&nbsp;</td><td><input name="submit" type="submit" onClick="return cek()" value="LOGIN" /></td></tr>

</table>
</form>
<?php
if (is_string($_POST['userid'])){
if ($_POST['userid']=='Dania'){echo 'Selamat Datang ' .$_POST['userid']; }
else{echo 'Username Anda Salah!!!';}
}
if (is_string($_POST['userid'])){
if ($_POST['passwd']=='teram59'){echo '<br/>Password Anda ' .$_POST['passwd']; }
else{echo '<br/>Password Anda Salah!!!';}
}
?>

</body>
</html>
Dan hasilnya adalah:





oke deh, selamat mencoba...

Passing Argumen di PHP

1
Pemrograman web dengan PHP terdapat 2 passing argumen, yaitu: passing by value dan passing by reference. berikut adalah contoh passing by value dan passing by reference beserta tampilannya....
a. passing 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>Pass By Value</title>
</head>
<body>
<p>Berikut adalah contoh program yang menggunakan fungsi pass by value</p>
<?php
function jumlah($nilai) {
    $nilai++;
}

$input=8;
jumlah($input);
echo $input;
?>
</body>
</html>

Hasilnya:

penjelasan:
Pada  saat fungsi jumlah dipanggil,
jumlah($input);
fungsi akan memasukkan nilai dari variabel $input ke argumennya yaitu 8 (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 = 8  + 1
$nilai = 9

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 8

b. 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>Pass By reference</title>
</head>
<body>
<p>Ini merupakan hasil pengolahan fungsi pass by reference</p>
<?php
function jumlah2(&$nilai) {
    $nilai++;
}

$input=8;
jumlah2($input);
echo $input;
?>

</body>
</html>

Hasilnya sebagai berikut:
penjelasan:
passing by reference memberikan nilai aslinya untuk di akses dan di manipulasi. dari listing seperti passing by value hanya cukup diubah dengan menambahkan operator & pada argumennya. sehingga nilai yang diakses dan dimanipulasi adalah nilai aslinya, dan hasil dari manipulasi fungsi tersebut yang digunakan sebagai outputnya yaitu 9.


FORM PEMESANAN MAKANAN DAN MINUMAN

1
pemrograman berbasis web juga bisa digunakan untuk membuat sebuah aplikasi form pemesanan minuman dan makanan berbasis komputer. mau tau gimana aplikasinya???? aplikasi form pemesanan makanan dan minuman ini sangat bermanfaat bagi restaurant atau warung makan. Dengan adanya form ini Si pembeli tinggal memesan dan langsung tau berapa harga yang harus dibayarnya dan Si pemilik tidak perlu repot repot untuk menghitung total biaya pembeli. berikut adalah tampilan form pemesanan makanan dan minuman beserta sintaknya:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/frameset.dtd">
<html lang="en">
<head>
<title>Form Pemesanan</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function jumlah() {
var myForm = document.form1;
var bakso = 12000 * eval(myForm.order1.value);
var soto = 10000 * eval(myForm.order2.value);
var mie = 15000 * eval(myForm.order3.value);
var degan = 5000 * eval(myForm.order4.value);
var campur = 7000 * eval(myForm.order5.value);
var hasil = bakso+soto+mie+degan+campur;
if (hasil > 50000) {
    myForm.total.value = hasil;
    myForm.diskon.value = 10000;
    myForm.bayar.value = hasil - eval(myForm.diskon.value);
 } else {
    myForm.total.value = hasil;
    myForm.diskon.value = 0;
    myForm.bayar.value = hasil - eval(myForm.diskon.value);
 }
}
function resetForm(){
document.form1.reset();
}
</script>
<form name="form1" action="#">
<font  size="6">PUJASERA'S RESTAURANT</font>
<table border="2" cellspacing=0 cellpadding=5 >
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<thead valign="middle">
<tr>
<th width="35"><font color="black" size="4">No</font>
<th width="200"><font color="black" size="4">Makanan/Minuman</font>
<th width="180"><font color="black" size="4">Harga Satuan</font>
<th width="100"><font color="black" size="4">Pesan</font>
</tr>
<tbody>
<tr>
<td>1<td>Bakso Istimewa<td>@<input  type="text"    value="12000" disabled="true"/><td>
<input  type="text"  name="order1" value="0" onChange="jumlah()"/>
</tr>
<tr>
<td>2<td>Soto Spesial<td>@<input  type="text"    value="10000" disabled="true"/><td>
<input  type="text"  name="order2" value="0" onChange="jumlah()" />
</tr>
<tr>
<td>3<td>Mie Ayam Super<td>@<input  type="text"   value="15000" disabled="true"/> <td>
<input  type="text"  name="order3" value="0" onChange="jumlah()"/>
</tr>
<tr>
<td>4<td>Es Degan<td>@<input  type="text"   value="5000" disabled="true"/>
<td><input  type="text"  name="order4" value="0" onChange="jumlah()" />
</tr>
<tr>
<td>5<td>Es Campur<td>@<input  type="text"   value="7000" disabled="true"/> <td>
<input  type="text"  name="order5" value="0" onChange="jumlah()"/>
</tr>
<tr>
<td colspan=3 align="right">Jumlah Total<td><input  type="text"  name="total"  disabled="true"/>
</tr>
<tr>
<td colspan=3 align="right">Diskon<td><input  type="text"  name="diskon" disabled="true" />
</tr>
<tr>
<td colspan=3 align="right">Jumlah Bayar<td><input  type="text"  name="bayar"  disabled="true"/>
</tr>
</table>
<br/>
<input type="button" value="CANCEL" onClick="resetForm()" />
</form>
</body>
</html> 


hasil form nya adalah
selamat mencoba!!!! dan mudah mudahan bermanfaat....

WEB ATRAKTIF (LANJUTAN SIMPLE WEB)

1
Sebuah web harus mempunyai unsur menarik dalam tampilannya, user friendly dan atraktif. di sini akan dipaparkan mengenai bagaimana cara membuat web atraktif sebagai lanjutan dari simple web yang hanya mempunyai layout kosong. dari layout kosong tersebut kita desain sedemikian rupa sehingga bisa menghasilkan web yang atraktif dan menarik. berikut adalah gambar web atraktif dan sintaknya:


<!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>Tugas Praktikum</title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <style type="text/css">
    <!--
    #sidebar ul {
        width: 180px;
        list-style-type:none;
        padding:0; margin:0;
    }
    #sidebar a:link, #leftmenu a:visited, #leftmenu a:active {
        padding-left: 15px;
        text-decoration: none;
    }
    #sidebar a {
        padding: 5px 0px 5px 15px; display: block;
        background: #6cae15 no-repeat left center;
        margin: 0px 0px 1px; color: #ffffff;
    }
    #sidebar a:hover {
        background: #5e9711 no-repeat left center;
    }
    -->
    </style>
   
</head>
<body>

    <div id="wrapper">
   
        <div id="header">
            <div id="logo"> <img src="UM.bmp"  alt="background" height="80" width="80"/></div>
            <div id="text"> TEKNIK ELEKTRO<div id="search">Search</div><div id="kotakcari" ><input type="text"/></div></div>
            <div id="home">Home</div>
            <div id="sitemap">Sitemap</div>
            <div id="RSS">RSS</div>
            <div id="contact">Contact</div>
            <div id="about">About Us</div>
        </div>
   
        <div id="inner">
            <div id="sidebar">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">News &amp; Media</a></li>
                    <li><a href="#">Tutorial</a></li>
                    <li><a href="#">Tips &amp; Tricks</a></li>
                    <li><a href="#">Downloads</a></li>
                    <li><a href="#">Photo Galerry</a></li>
                </ul>
            </div>
            <div id="top">
            <img src="foto.jpg" width="564" height="80" alt="" />
            </div>
            <div id="content">
            <strong>Sejarah Blog</strong><br/>
            Blog adalah kependekan dari Weblog, istilah yang pertama kali digunakan oleh Jorn Barger
            pada bulan Desember 1997. Jorn Barger menggunakan istilah Weblog untuk menyebut
            kelompok website pribadi yang selalu diupdate secara kontinyu dan berisi link-link ke website
            lain yang mereka anggap menarik disertai dengan komentar-komentar mereka sendiri. <br/><br/>
           
            <strong>Read More...</strong>
            </div>
            <div id="right">
            <strong>Event</strong><br/>
            <ul>
            <li>Lomba Panjat Tiang Listrik</li>
            <li>Lomba Tarik Kabel</li>
            <li>Balap Karung 10 km</li>
            </ul>
            </div>
        </div>
   
        <div id="footer">
            <div align="center"><br/>
            &copy;2010 Teknik Elektro UM, Malang, Indonesia
            </div>
        </div>
    </div>
</body>
</html>
   



selain sintak ini juga dibutuhkan 1 file berbentuk .css untuk mendukung pembuatan kerangka atau layoutnya agar tertata rapi dan tidak tercampur.
#wrapper {
    margin: auto;
    width: 750px;
    border: 2px solid red;
}

#header {
    height: 80px;
    border: 1px solid red;
    background: #000 url(header30.jpg);
}

#logo{
margin : 0px 10px;
height: 60px;
width: 60px;
}

#text{
margin : -30px 100px;
color: red;
font-family: verdana;
font-size: 24px;
font-weight: bold;
}

#home{
margin : -60px 455px;
color: blue;
font-family: garamond;
font-size: 14px;
}

#about{
margin : -60px 685px;
color: blue;
font-family: garamond;
font-size: 14px;
}

#sitemap{
margin : 45px 515px;
color: blue;
font-family: garamond;
font-size: 14px;
}

#contact{
margin : 45px 630px;
color: blue;
font-family: garamond;
font-size: 14px;
}

#RSS{
margin : -60px 580px;
color: blue;
font-family: garamond;
font-size: 14px;
}

#search{
margin : -10px 400px;
color: blue;
font-family: garamond;
font-size: 18px;
width:50px;
height:20px;
}

#kotakcari{
margin: -20px 455px;
}

#inner {
    float: left;
    margin: 0px;
}

#sidebar {
    float: left;
    margin-right: 0px;
    width: 180px;
    height: 332px;
    border: 2px solid green;
    background-color: yellow;
}

#top {
    float:    left;
    width:    562px;
    height:    80px;
    border:    2px solid green;
}

#content {
    float: left;
    width: 340px;
    height: 250px;
   
}

#right {
    float:    right;
    width:    220px;
    height:    150px;
    border:    2px solid green;
    background-color: yellow;
}

#footer {
    clear: both;
    height: 50px;
    border: 2px solid blue;
    background-color: yellow;
}



untuk memudahkan dalam pengaksesan, file sintak dengan file css simpan dalam 1 folder. Selamat Mencoba

SIMPLE LAYOUT WEB

0
Dalam membangun sebuah web yg baik, diperlukan layout untuk meletakkan info2 sesuai dengan karakter  agar tertata rapi dan tidak tercampur. berikut adalah sintak untuk membuat desain layout dengan memanfaatkan division.


<!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>Tugas Praktikum</title>
<link rel="stylesheet" href="style.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>




dan hasilnya sebagai berikut:





TABEL DENGAN FITUR PENGELOMPOKAN

0
Selain grafik batang, dengan web juga bisa membuat sebuah tabel perbandingan item. kata kuncinya dengan memanfaatkan fitur pengelompokan pada tabel. untuk lebih jelasnya nih tampilan plus sintaknya sekalian...




Listing programnya:




GRAFIK BATANG DENGAN WEB

0
Selain untuk membuat web sedrhana, pemrograman berbasis web juga bisa digunakan untuk membuat tampilan grafik dengan memanfaatkan elemen tabel. grafik yang terbentuk adalah grafik batang. ini dia hasilnya...

Tampilan grafik batang dengan web




dan seperti biasa, sintaknya sbgai berikut. lumayan panjang...