|
Assalaamu'alaikum Wr. Wb.
Mari belajar membuat form login sederhana dengan menggunakan PHP.
copy-lah kode berikut ke notepad dan simpan dengan nama index.php
<head>
<title>Demo Login</title>
<style type="text/css">
<!--
.huruf {
color: #ffd700;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
.border1 {
margin: auto;
border: 2px solid red;
background: #4b0008;
margin-top:100px;
width: 300px;
height: 270px;
border-width: medium; }
.border2 {
height: auto;
background: #4b0008;
padding: 5px 40px 5px 40px;
}
body {
background-color: #e9967a;
}
-->
</style>
</head>
<body>
<script type="text/javascript">
function Proses() {
var FormLogin = document.getElementById("FormLogin");
if (FormLogin.username.value == "") {
alert("Username kosong. Isi Username dengan benar..!");
return;
}
if (FormLogin.password.value == "") {
alert("Password belum dimasukkan. Silakan ulangi lagi..!");
return;
}
}
</script>
<form name="FormLogin" id="FormLogin" action="validasi.php" method="post">
<div class="border1">
<div class="border2">
<h3 align="center"><font color="yellow" size="6">LOGIN</font></h3>
<hr size="4" style="border-color: #c0c0c0;"/>
<p class="huruf"><b>Username</b><br />
<input type="text" name="username" size="32"/>
</p>
<p class="huruf"><b>Password</b><br />
<input type="password" name="password" size="32"/>
</p>
<p>
<input type="submit" value="login" onclick="Proses();"/>
</p>
</form>
</body>
</html>
Untuk validasi copy-lah kode di bawah ini dan simpan dengan nama validasi.php (jadikan satu folder dengan file index.php)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
<!--
.huruf {
color: #ffd700;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
.border1 {
margin: auto;
border: 2px solid red;
background: #4b0008;
margin-top:100px;
width: 300px;
height: 260px;
border-width: medium;
}
.border2 {
height: auto;
background: #4b0008;
padding: 5px 40px 5px 40px;
}
body {
background-color: #e9967a;
}
-->
</style>
</head>
<body>
<div class="huruf">
<?php
require_once('index.php');
$user = 'admin';
$pass = '12345';
if ((isset($_REQUEST['username']) == $user)&&($_POST['password'] == $pass)){
echo "<strong><font size='2' color=yellow>Selamat Datang </strong></center>". $_POST['username'];
}
else {
echo "<strong><font size='2' color=red>Username & Password SALAH</strong></center>";
}
?>
</div>
</body>
</html>
SELAMAT MENCOBA..!
</style>
</head>
<body>
<script type="text/javascript">
function Proses() {
var FormLogin = document.getElementById("FormLogin");
if (FormLogin.username.value == "") {
alert("Username kosong. Isi Username dengan benar..!");
return;
}
if (FormLogin.password.value == "") {
alert("Password belum dimasukkan. Silakan ulangi lagi..!");
return;
}
}
</script>
<form name="FormLogin" id="FormLogin" action="validasi.php" method="post">
<div class="border1">
<div class="border2">
<h3 align="center"><font color="yellow" size="6">LOGIN</font></h3>
<hr size="4" style="border-color: #c0c0c0;"/>
<p class="huruf"><b>Username</b><br />
<input type="text" name="username" size="32"/>
</p>
<p class="huruf"><b>Password</b><br />
<input type="password" name="password" size="32"/>
</p>
<p>
<input type="submit" value="login" onclick="Proses();"/>
</p>
</form>
</body>
</html>
Untuk validasi copy-lah kode di bawah ini dan simpan dengan nama validasi.php (jadikan satu folder dengan file index.php)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
<!--
.huruf {
color: #ffd700;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
.border1 {
margin: auto;
border: 2px solid red;
background: #4b0008;
margin-top:100px;
width: 300px;
height: 260px;
border-width: medium;
}
.border2 {
height: auto;
background: #4b0008;
padding: 5px 40px 5px 40px;
}
body {
background-color: #e9967a;
}
-->
</style>
</head>
<body>
<div class="huruf">
<?php
require_once('index.php');
$user = 'admin';
$pass = '12345';
if ((isset($_REQUEST['username']) == $user)&&($_POST['password'] == $pass)){
echo "<strong><font size='2' color=yellow>Selamat Datang </strong></center>". $_POST['username'];
}
else {
echo "<strong><font size='2' color=red>Username & Password SALAH</strong></center>";
}
?>
</div>
</body>
</html>
SELAMAT MENCOBA..!
sangat membantu, terimakasih!