Senin, 29 Maret 2010

Membuat halaman login sederhana pake ' PHP

Halaman login merupakan bagian yang sangat penting dari sebuah web site dinamis dan menjadi bagian dari pemroses form (form prossesing) pada pemrograman PHP. Pemroses form itu sendiri adalah 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. Udah dulu y :)


Dalam Toturial kali kita akan membuat suatu form login dengan session yang sederhana sekali tanpa menggunakan database, yang terdiri dari 3 elemen saja yaitu : username, password dan tombol login seperti gambar disamping ini...




bikin file login.php

disini bentuk form dan validasi awal (field tidak boleh kosong, masukan id dan password harus huruf)menggunkan scripting javascript.

login.php
<!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="#66FFFF">
<td height="9" colspan="2" align="center" valign="middle">
<br /><font color="#2A1F00"><h2>LOGIN DI SINI</h2></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="#66FFFF">
<td height="18" colspan="2" valign="top">&nbsp;</td>
</tr>
</table>
</form>
</div>

</body>
</html>

tampilan javascript :


selanjutnya....Buat file untuk nge cek login, nah disini kita tentukan username dan password untuk login pertama kita tentukan username dan password yang akan di masukkan sebagai login yang benar, Jadi saya mau membuat login dengan
username: rochmanovic
password: fatkhur
sedangkan untuk pengecekan login saya yaitu:
$acc_user = 'rochmanovic';
$acc_pas = 'fatkhur';

ceklogin.php
<?php


$acc_user = 'rochmanovic';
$acc_pas = 'fatkhur';
if (isset($_POST['login']))
{
$username = $_POST['username']; // diambil dari nama input di form login
$password = $_POST['password']; // diambil dari nama input di form login

if (($username==$acc_user) && ($password==$acc_pas))
{
session_start();
$_SESSION['user'] = $username;
echo 'Login berhasil, silahkan lanjutkan......'.
'<br/>'.
'<a href="index.script.php">Lanjutkan</a>'.
'<br/>';
} else {
echo 'Username dan password salah'.
'<br/>'.
'<a href="login.php">Coba lagi</a>'.
'<br/>';
}
}

?>
hasilnya :


Nah....yang terakhir Qt buat halaman index nya yang hanya bisa di akses jika sudah di accept session dengan nama $_SESSION['user']. Variabel ini digunakan untuk memeriksa apakah user tertentu sudah memasukkan username dan password ataukah tidak.
jika tidak maka akan di redirect ke halaman login.php

index.script.php
<?php
session_start();
if (isset($_SESSION['user'])) // karena nama session buat login kita buat namanya adalah 'user' maka if isset($_SESSION['user']) ===> varibel penentu
{
$user = $_SESSION['user'];
echo '<p align="center">'.
'<b>Tulisan ini nampak kalo udah login</b>'.
'<br/><br/>
<h3 id="Pemrosesan Form">Pemrosesan Form</h3>
<p>
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.<br/><br/>'.

'<a href="login.php">Logout</a>'.
'</p>';
echo $user;
} else {
header('location: login.php');
exit;
}
?>


2 komentar:

  1. thx bangat infonya BRO..tapi bagaimana kalo saya ingin menghubungkan user_name dan passwordnya dengan yang ada di database yang kita buat sendiri?

    BalasHapus

Avenged sevenfold - Seize the Day