Minggu, 28 Maret 2010

Membuat Login Form Sederhana

Aplikasi login User dalam suatu situs dinamis menggunakan php sudah hampir menjadi kebutuhan wajib. Tanpa adanya login rasa-rasanya ada yang kurang dari suatu situs. Dengan login kita bisa mengatur siapa saja yang berhak masuk ke halaman tertentu dan siapa saja yang tidak boleh. Disamping itu secara tidak langsung, login bisa digunakan untuk mencatat siapa saja yang sedang online, siapa saja yang sering mengunjungi situs kita dan seterusnya.
Dibawah ini saya akan mencoba membuat tampilan login sederhana tanpa menggunakan database. Tampilan login hanya berupa password, password yang digunakan untuk login diset secara default, atau istilahnya pre-defined value variable.
Langsung saja mari kita coba script berikut:

<?php
##########################################################################
$password = "admin";
##########################################################################
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Login with protect password</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
P { FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Verdana,Tahoma,Arial}
TD { FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Verdana,Tahoma,Arial}
-->
</style>
</head>
<body>
<?php
print "<h2 align=\"center\">LOGIN FORM</h2>";
// Jika password benar, maka user diperkenankan untuk melakukan akses
if (isset($_POST["password"]) && ($_POST["password"]=="$password")) {
?>
<!-- START OF HIDDEN HTML -->

<p align="center"><br><br><br>
<b>Congratulations</b><br>wellcome!!you can access this Protected and Secret Area!</p>

<!-- END OF HIDDEN HTML -->
<?php
}
else
{
// Jika tidak memasukkan password atau password salah, maka pesan ini akan tampil
if (isset($_POST['password']) || $password == "") {
print "<p align=\"center\"><font color=\"red\"><b>Incorrect Password</b><br>Your password is incorrect,,please get the correct password</font></p>";}
print "<form method=\"post\"><p align=\"center\">Enter your password here<br>";
print "<input name=\"password\" type=\"password\" size=\"25\" maxlength=\"10\"><input value=\"Login\" type=\"submit\"></p></form>";
}
print "<br><br><p align=\"center\">by mE,,<br>";
?>
<BR>
</body>
</html>

Tampilan awal program jika dijalankan adalah:
Jika user memasukkan password yang benar, maka user bisa mengakses web tersebut. Tampilannya adalah sebagai berikut:
Tetapi jika user memasukkan password yang salah, maka akan ada peringatan bahwa password masih belum benar. Tampilannya adalah:


Minggu, 14 Maret 2010

Passing Argument pada PHP

Dalam bahasa pemprograman terstruktur, bagian-bagian program dibagi menjadi bagian-bagian kecil program yang dapat digunakan beberapa kali.Salah satunya adalah menggunakan fungsi. Fungsi merupakan konstruksi pemprograman untuk melakukan suatu proses. Dalam fungsi terdapat kumpulan beberapa statement yang dibuat dengan tujuan menyelesaikan satu tugas tertentu. Dalam pemprograman biasanya akan melakukan suatu proses berulang kali, oleh sebab itu fungsi sangat berguna menangani hal tersebut agar lebih efisien dalam penulisan kode programnya.
Dalam PHP passing variabel dibagi menjadi dua, Passing By value dan Passing By Reference.

By Value

Variabel dipassing (dimasukkan) ke dalam function dengan cara pass by value. Pass by value membuat kopi dari variabel yang asli. Dengan demikian variabel asli tidak terpengaruh. Perhatikan contoh value1.php berikut ini:

<?php

function Coba($nilai)

{

$nilai++;

}

$nilai = 3;

Coba($nilai);

echo $nilai;

?>

Tampilannya adalah sebagai berikut:

Output yang dihasilkan adalah 3, terlihat variabel yang berubah dalam fungsi tidak akan berpengaruh diluar fungsi atau sama saja tidak mempengaruhi variabel aslinya. Berikut ini ada sebuah contoh lagi mengenai passing by value dalam sintaks value2.php.

<HTML>

<HEAD>

<TITLE>Fungsi tambah string [Pass by value]</TITLE>

</HEAD>

<BODY>

<?

function tambah_string($str)

{

$str=$str. ",Bandung";

return $str;

}

//Pemanggilan fungsi

$str="STTIS";

echo "\$str=$str<BR>";

echo tambah_string($str)."<BR>";

echo "\$str=$str<BR>";

?>

</BODY>

</HTML>

Tampilannya adalah sebagai berikut:

By Reference

Berbeda dengan pass by value, pass by reference akan mempengaruhi variabel aslinya. Perintah yang dijalankan di fungsi mempengaruhi nilai variabel yang berada diluar fungsi. Untuk menggunakan pass by reference menggunakan simbol "&" diawal variabel. Perhatikan contoh dibawah :

<?php

function Coba(&$nilai)

{

$nilai++;

}

$nilai = 3;

Coba($nilai);

echo $nilai;

?>

Output yang dihasilkan adalah 4, perintah dalah fungsi berpengaruh merubah nilai Variabel aslinya.

Berikut ini ada sebuah contoh lagi mengenai passing by reference dalam sintaks reference2.php.

<HTML>

<HEAD>

<TITLE>Fungsi tambah string [Pass by reference]</TITLE>

</HEAD>

<BODY>

<?

function tambah_string(&$str)

{

$str=$str. ",Bandung";

return $str;

}

//Pemanggilan fungsi

$str="STTIS";

echo "\$str=$str<BR>";

echo tambah_string($str)."<BR>";

echo "\$str=$str<BR>";

?>

</BODY>

</HTML>

Tampilan dari sintak di atas adalah:



Senin, 08 Maret 2010

Kalkulator Sederhana Menggunakan Javascript

Kalkulator merupakan alat bantu hitung seperti penjumlahan, pengurangan, perkalian, dan pembagian. Kalkulator yang digunakan untuk melakukan perhitungan standar seperti diatas biasanya disebut jenis kalkulator sederhana. Sedangkan untuk melakukan perhitungan yang lebih rumit, seperti rumus matematika digunakan jenis kalkulator yang sering disebut scientific calculator.
Semakin canggihnya teknologi jaman sekarang memungkinkan kalkulator dibuat secara online. Aplikasi kalkulator online dapat dibuat menggunakan HTML. Untuk menampilkan kalkulator di halaman web, maka dapat digunakan Javascript. Skrip JavaScript yang dimasukkan di dalam berkas HTML ataupun XHTML harus dimasukkan di antara tag <script>...</script>.
Berikut ini contoh aplikasi kalkulator sederhana, yakni perhitungan yang terbatas hanya untuk operasi penjumlahan, pengurangan, perkalian, dan pembagian. Source code aplikasi kalkulator sederhana:

<!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>Demo Simpel Calculator</title>

</head>


<body>

<h3 align="left" style="font:berlin sans fb demi; color:hotpink">Lets try to count with this simple calculator</h3>


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

<!--

function nilai()

{

if(operator.value=='*')

{c.value=eval(a.value)*eval(b.value);}

else if (operator.value=='/')

{c.value=eval(a.value)/eval(b.value);}

else if (operator.value=='+')

{c.value=eval(a.value)+eval(b.value);}

else if (operator.value=='-')

{c.value=eval(a.value)-eval(b.value);}

}

function kosong()

{

form.a.value=""

form.b.value=""

form.c.value=""

form.operator.value="--choose--"

form.a.focus()

}

//-->

</script>

<form name="form" action="#">

<input type="text" id="a" height="20px" width="80px"/>

<select id="operator">

<option>--choose--</option>

<option value="*">x</option>

<option value="/">:</option>

<option value="+">+</option>

<option value="-">-</option>

</select>

<input type="text" id="b" height="20px" width="80px"/>

<input type="button" value="=" onClick="nilai()"/>

<input type="text" id="c" height="20px" width="80px"/>

<input type="button" value="clear" name="clear" onClick="kosong()"/>

</form>

</body>

</html>


Tampilan dari script di atas adalah:



Berikut ini code program kalkulator online sederhana dengan tampilan yang lebih banyak dijumpai dipasaran:
<html>

<head>

<title>4 operator perhitungan</title>

</head>



<body>

<form name="calculator">





<!-- form the display to match the keypad -->



<table border="4" cellpadding="1" bordercolor="hotpink" bgcolor="hotpink" cellspacing="2" width="222">



<tr>



<td>



<input type="text" size="25" length="25" value="" name="ans" style="background:lightpink;color:black;">



</td>



</tr>



</table>







<!-- form the keypad with buttons in a table -->



<table border="5" cellpadding="2" bordercolor="hotpink" cellspacing="2" width="150" bgcolor="hotpink">



<tr>



<td align="center">



<input type="button" value=" 7 " name="seven" onClick="document.calculator.ans.value+='7'">



</td>



<td align="center">



<input type="button" value=" 8 " name="eight" onClick="document.calculator.ans.value+='8'">



</td>



<td align="center">



<input type="button" value=" 9 " name="nine" onClick="document.calculator.ans.value+='9'">



</td>



<td align="center">



<input type="button" value=" / " name="divide" onClick="document.calculator.ans.value+='/'">



</td>



</tr>



<tr>



<td align="center">



<input type="button" value=" 4 " name="four" onClick="document.calculator.ans.value+='4'">



</td>



<td align="center">



<input type="button" value=" 5 " name="five" onClick="document.calculator.ans.value+='5'">



</td>



<td align="center">



<input type="button" value=" 6 " name="six" onClick="document.calculator.ans.value+='6'">



</td>



<td align="center">



<input type="button" value=" * " name="multiply" onClick="document.calculator.ans.value+='*'">



</td>



</tr>



<tr>



<td align="center">



<input type="button" value=" 1 " name="one" onClick="document.calculator.ans.value+='1'">



</td>



<td align="center">



<input type="button" value=" 2 " name="two" onClick="document.calculator.ans.value+='2'">



</td>



<td align="center">



<input type="button" value=" 3 " name="three" onClick="document.calculator.ans.value+='3'">



</td>



<td align="center">



<input type="button" value=" - " name="subtract" onClick="document.calculator.ans.value+='-'">



</td>



</tr>



<tr>



<td align="center">



<input type="button" value=" C " name="clear" onClick="document.calculator.ans.value=''">



</td>



<td align="center">



<input type="button" value=" 0 " name="zero" onClick="document.calculator.ans.value+='0'">



</td>



<td align="center">



<input type="button" value=" = " name="equal"



onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">

</td>

<td align="center">

<input type="button" value=" + " name="add" onClick="document.calculator.ans.value+='+'">

</td>

</tr>

</table>

</form>

</body>

</html>
Jika dieksekusi, maka tampilan programnya adalah:

Minggu, 21 Februari 2010

Membuat design Web dengan memanfaatkan Tabel

Tabel merupakan salah satu tool yang sangat berguna untuk mendesain halaman web. Tabel terdiri dari tiga bagian yaitu baris, kolom dan sel. Pembuatan tabel harus dideklarasikan dengan tag <table> </table>. Selain itu ada tag penyusunnya yaitu: tag <th> untuk mendefinisikan header, tag <tr> untuk mendefinisikan baris, dan tag <td> untuk mendefinisikan sel. Langsung saja kita perhatikan contoh berikut:

<!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>Demo Tabel</title>

</head>

<body>

<table border=1>

<!--Header-->

<tr>

<th>Numb</th>

<th>Name</th>

<th>Address</th>

</tr>

<!--Baris data pertama-->

<tr>

<td>1</td>

<td>Fathiya</td>

<td>Jl.Mayjend Panjaitan</td>

</tr>

</table>

</body>

</html>

Tampilan pada web browser:

Tabel dapat diformat sesuai kebutuhan, untuk itu sering digunakan atribut, yaitu: align (untuk mengatur posisi), cellspacing (untuk mengatur spasi antarsel), cellpadding (untuk mengatur spasi antara border sel dengan isinya). Kreasi bentuk tabel beragam sesuai dengan keinginan pendesain. Berikut ada sebuah contoh bentuk desain web berbasis tabel:

<!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>Demo desain web dengan tabel</title>

</head>

<body>

<table border=1 align="center" cellspacing=0 cellpadding=10>

<tr>

<td width="800" td height="50" align="center" colspan=3 bgcolor="#C0C0C0"><b>Header</b>

</td>

</tr>

<tr>

<!--mengatur lebar kolom-->

<td width="200" td height="500" align="center" bgcolor="#FF69B4"><b>Left</b></td>

<td width="400" td height="500" align="center" bgcolor="#FF69B4"><b>Middle</b></td>

<td width="200" td height="500" align="center" bgcolor="#FF69B4"><b>Right</b></td>

</tr>

<!--Footer-->

<tr>

<td width="800" td height="50" colspan="3" bgcolor="#C0C0C0" align="center"><b>Footer</b></td>

</tr>

</table>

</body>

Tampilannya sebagai berikut: