Minggu, 28 Maret 2010

Membuat Aplikasi Login sederhana menggunakan Variabel di PHP

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.

Membuat Tampilan Awal Login
Buatlah file dengan nama login.php sebagai tampilan awal halaman login sebagai 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">

<html>

<head>

<title>Form login</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<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: 11px;

height: 20px;

}

body {

background-color: #FF6633

}

-->

</style>

</head>

<body>

<div align="center">

<form action="periksa.php" method="post" name="login">

<table width="286" border="0" cellpadding="0" cellspacing="0">

<!--DWLayoutTable-->

<tr bgcolor="black">

<td height="19" colspan="2" align="center" valign="middle">

<font color="#FFFFFF">LOGIN DI SINI</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">

<p>

<input name="password" type="password" id="password" size="20"></td>

</p>

</tr>

<tr>

<td height="19">&nbsp;</td>

<td></td>

</tr>

<tr>

<td height="18" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>

<td valign="middle">

<input name="login" type="submit" id="login" value=" Login "></td>

</tr>

<tr>

<td height="28">&nbsp;</td>

<td></td>

</tr>

<tr bgcolor="black">

<td height="18" colspan="2" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>

</tr>

</table>

</form>

</div>

</body>

</html>

hasil tampilan login dari script diatas,

Dari program tampilan awal di atas, kita bisa lihat bahwa program menggunakan form inputan sbb :
- username bertype text
- password bertype password
- tombol login bertype submit
Jika tombol login ditekan maka isi form akan diproses di halaman periksa.php sesuai dengan action pada tag form.

Membuat Halaman Pemeriksaan Login
Setelah tampilan awal kita buat, maka kita buat halaman pemeriksaan login untuk memeriksa apakah username dan password yang diinputkan benar atau salah. Buatlah file dengan nama periksa.php sebagai 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>Hasil login</title>

</head>

<body>

<div align="center">

<?php

$acc_user = 'user';

$acc_pas = 'user';

if (isset($_POST['login'])) {


$username = $_POST['username']; // diambil dari nama input di form login

$password = $_POST['password']; // diambil dari nama input di form login

$username = strip_tags($username);

$password = strip_tags($password);


if (($username==$acc_user) && ($password==$acc_pas))

{

session_start();

$_SESSION['user'] = $username;

echo 'Selamat datang, Login Anda berhasil. ';

} else {

echo 'Masukan Username dan password Anda dengan benar'.

'<br/>'.

'<a href="login.php">Ulangi Login</a>'.

'<br/>';

}

}

?>

Hasil tampilan dari pemeriksaan Login.

user dapat memasukan username dan password dengan benar.


user tidak dapat memasukan username dan password dengan benar.

apabila user tidak dapat memasukan username dan password dengan benar maka dapat melakukan login ulang.

Untuk ikut mencoba hasil dari aplikasi Login sederhana diatas dapat klik disini, username dan password "user".
Diposting oleh cah_0353 di 03.04 0 komentar
Label:

Jumat, 05 Maret 2010

Aplikasi kalkulator sederhana menggunakan JavaScript

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, kita tidak perlu menuliskan program Javascript pada file terpisah.

Contoh Javascript Sederhana

Membuat aplikasi kalkulator sederhana dengan menggunakan JavaScript

Dibawah ini merupakan scripting keseluruhan untuk pembuatan aplikasi kalkulator sederhana yang telah saya buat.

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


</head>


</body>


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

<!--

alert('OK, Calkulator Enable');

//-->

</script>


<FORM NAME="Calc">

<TABLE BORDER=4>

<TR>

<TD>

<INPUT TYPE="text" NAME="Input" Size="17">

<br>

<TR>

<TD>

<INPUT TYPE="button" NAME="one" VALUE=" 1 " OnClick="Calc.Input.value += '1'">

<INPUT TYPE="button" NAME="two" VALUE=" 2 " OnCLick="Calc.Input.value += '2'">

<INPUT TYPE="button" NAME="three" VALUE=" 3 " OnClick="Calc.Input.value += '3'">

<INPUT TYPE="button" NAME="plus" VALUE=" + " OnClick="Calc.Input.value += '+'">

<br>

<INPUT TYPE="button" NAME="four" VALUE=" 4 " OnClick="Calc.Input.value += '4'">

<INPUT TYPE="button" NAME="five" VALUE=" 5 " OnCLick="Calc.Input.value += '5'">

<INPUT TYPE="button" NAME="six" VALUE=" 6 " OnClick="Calc.Input.value += '6'">

<INPUT TYPE="button" NAME="minus" VALUE=" - " OnClick="Calc.Input.value += '-'">

<br>

<INPUT TYPE="button" NAME="seven" VALUE=" 7 " OnClick="Calc.Input.value += '7'">

<INPUT TYPE="button" NAME="eight" VALUE=" 8 " OnCLick="Calc.Input.value += '8'">

<INPUT TYPE="button" NAME="nine" VALUE=" 9 " OnClick="Calc.Input.value += '9'">

<INPUT TYPE="button" NAME="times" VALUE=" x " OnClick="Calc.Input.value += '*'">

<br>

<INPUT TYPE="button" NAME="clear" VALUE=" c " OnClick="Calc.Input.value = ''">

<INPUT TYPE="button" NAME="zero" VALUE=" 0 " OnClick="Calc.Input.value += '0'">

<INPUT TYPE="button" NAME="DoIt" VALUE=" = " OnClick="Calc.Input.value = eval(Calc.Input.value)">

<INPUT TYPE="button" NAME="div" VALUE=" / " OnClick="Calc.Input.value += '/'">

<br>

</TD>

</TR>

</TABLE>

</FORM>


<p align="left"><font face="verdana" size="-1">This desaign by cah_0353</font><br>

<a href="www.mainjet.blogspot.com">www.mainjet.blogspot.com</a></font></p>

</body>

</html>


Dari Scripting diatas diperoleh tampilan desain kalkulator sederhana sebagai berikut:

Diposting oleh cah_0353 di 03.22 0 komentar
Label:
Langganan: Postingan (Atom)