Membuat Login Form sederhana dengan PHP
berikut ini langka-langkah membuat Login Form sederhana dengan menggunakan PHP dan Javascript tanpa menggunakan Database. disni hanya menggunakan nilai string dalam validasi form.
contohnya jadinya seperti ini <<==klik
*note
username = sufyan
password = 12345
untuk membuat tamplan form seperti diatas membutuhkan dua file PHP yaitu index.php dan proses.php.
dalam index.php terdapat CSS serta 2 text field dan 1 buah button. scripnya sebagai berikut:
<style type="text/css">
<!--
.border1 {
border: 2px solid red;
background: #6cae15;
margin: auto;
width: 300px;
height: 250px;
margin-top:100px;
}
.border2 {
background: #6cae15;
padding: 5px 40px 5px 40px;
}
body {
background-color: #CC6;
}
-->
</style>
</head>
<body>
<form id="loginForm" action="proses.php" method="post">
<div class="border1">
<div class="border2">
<h3 align="center">LOGIN </h3>
<hr/>
<p><strong>User Name</strong><br />
<input type="text" name="username" size="30"/>
</p>
<p><strong>Password</strong><br />
<input type="password" name="password" size="30"/>
</p>
<p>
<input type="submit" value="Login" onclick="login();"/>
</p>
</div>
</div>
</form>
</body>
</html>
<script type="text/javascript">
function login() {
var loginForm = document.getElementById("loginForm");
if (loginForm.username.value == "") {
alert("Silahkan Masukkan User Name");
return false;
}
if (loginForm.password.value == "") {
alert("Silahkan Masukkan Password.");
return false;
}
}
</script>
<div align = "center">
<?php
require_once('index.php');
$user = 'sufyan';
$pass = '12345';
if ((isset($_REQUEST['username']) == $user)&&($_POST['password'] == $pass)){
echo "<strong><font face='Verdana' size='3' color=red>selamat datang<br></strong></center>". $_POST['username'];
}
else {
echo "<strong><font face='Verdana' size='3' color=red>Username & Password yang anda masukkan salah, Coba lagi<br></strong></center>";
}
?>
dalam index.php terdapat CSS serta 2 text field dan 1 buah button. scripnya sebagai berikut:
<style type="text/css">
<!--
.border1 {
border: 2px solid red;
background: #6cae15;
margin: auto;
width: 300px;
height: 250px;
margin-top:100px;
}
.border2 {
background: #6cae15;
padding: 5px 40px 5px 40px;
}
body {
background-color: #CC6;
}
-->
</style>
</head>
<body>
<form id="loginForm" action="proses.php" method="post">
<div class="border1">
<div class="border2">
<h3 align="center">LOGIN </h3>
<hr/>
<p><strong>User Name</strong><br />
<input type="text" name="username" size="30"/>
</p>
<p><strong>Password</strong><br />
<input type="password" name="password" size="30"/>
</p>
<p>
<input type="submit" value="Login" onclick="login();"/>
</p>
</div>
</div>
</form>
</body>
</html>
Dalam index.php juga terdapat JavaScript yang berguna jika Text Field blum diisi maka ada peringatan untuk mengisi terlebih dahulu. script JavaScriptnya seperti berikut :
<script type="text/javascript">
function login() {
var loginForm = document.getElementById("loginForm");
if (loginForm.username.value == "") {
alert("Silahkan Masukkan User Name");
return false;
}
if (loginForm.password.value == "") {
alert("Silahkan Masukkan Password.");
return false;
}
}
</script>
untuk validasi Form, terdapat pada file proses.php, yang berfungsi untuk memfalidasi dari index.php. scriptnya sebagai berikut :
<div align = "center">
<?php
require_once('index.php');
$user = 'sufyan';
$pass = '12345';
if ((isset($_REQUEST['username']) == $user)&&($_POST['password'] == $pass)){
echo "<strong><font face='Verdana' size='3' color=red>selamat datang<br></strong></center>". $_POST['username'];
}
else {
echo "<strong><font face='Verdana' size='3' color=red>Username & Password yang anda masukkan salah, Coba lagi<br></strong></center>";
}
?>
==SELAMAT MENCOBA ==
1 komentar:
Keren tuh scriptnya, tapi saya juga bikin sendiri. Silahkan dicoba dan di download di http://www.mediafire.com/download.php?lr2egmhwg1z
Posting Komentar