Академический Документы
Профессиональный Документы
Культура Документы
Form login biasanya terdapat pada tampilan awal pada program aplikasi maupun
website. Penggunaan form login diperlukan untuk menjaga keamanan sistem pada
aplikasi maupun website yang dibuat. Form login hanya dapat diakses atau dibuka
oleh pemilik, hal ini dilakukan untuk meminimilisir orang yang tidak bertanggung
jawab dapat mengaksesnya. Pada form login, pengguna diminta untuk memasukan
username dan password. Bila username dan password tidak sesuai maka program
tidak muncul atau tampil, pengguna perlu melakukan login kembali. Terkadang untuk
meningkatkan keamanan, pemilik bisa menerapkan sistem kemananan yang lebih
protektif, misalnya: bila melakukan kesalahan sebanyak 3 kali, pengguna tidak dapat
melakukan login hingga beberapa jam. Berbicara mengenai form login, Kami ingin
berbagi informasi mengenai pembuatan form login sederhana menggunakan bahasa
pemrograman PHP. Untuk lebih jelasnya, berikut ini cara pembuatan program
tersebut:
1.
Buat
file
PHP
Untuk membuat file PHP, Anda dapat menggunakan software editor text salah satunya
Notepad++. Jalankan Notepad++ dan buat file baru dengan cara memilih File > New
dan simpan dengan tipe ekstensi .php. Simpan file PHP pada Local Disk > xampp >
htdocs > buat folder baru untuk menyimpan file php. Buat script pemrograman
php seperti berikut ini.
a. Script login.php untuk tampilan awal ketika login username dan password.
<html>
<head>
<title>form login</title>
<link href="style/style.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
<form action="proseslogin.php" method="post" name="form1">
<table>
<tr id="header">
<td colspan="2"><h2>Login Disini</h2></td>
</tr>
<tr>
<td>Username</td>
<td><input type="text" name="username"
id="username" placeholder="username"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password"
id="password" placeholder="password"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Login"
value="Login">
<input type="reset" name="reset"
value="Reset"></td>
</tr>
</table>
</form>
</body>
</html>
b. Script proseslogin.php untuk menampilkan hasil login berhasil maupun login
gagal.
<html>
<head>
<title>Hasil Login</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<form action="proseslogin.php" method="post" name="form1">
<table>
<tr>
<td>
<?php
if (isset($_POST['Login'])){
$login = $_POST['username'];
$pass = $_POST['password'];
if ($login == "serbabebas" && $pass ==
"serbabebas"){
echo "<h2>Login Berhasil</h2>";
} else{
echo "<h2>Login Gagal</h2>";
}
}
?>
</td>
</tr>
</table>
</form>
</body>
</html>
2. Buat file CSS
Desain form login menggunakan bahasa tampilan CSS. Buat file css menggunakan
Notepad++ dengan memilih File > New dan simpan dengan nama style.css. Berikut
ini contoh script file style.css yang telah selesai dibuat.
body{
background:url(../images/background2.png);
font-family: arial;
}
table {
width:350px;
margin:100px auto;
padding:20px 40px;
border:1px solid #ccc;
background:rgba(255, 255, 255, 0.77);
border-radius: 10px;
box-shadow: 0 0 10px #fff;
}
input[type="text"], input[type="password"]{
border:1px solid rgba(51,51,51,.5);
border-radius:10px;
padding: 5px;
font-size: 15px;
line-height: 20px;
width: 100%;
text-align:center;
}
input[type="submit"], input[type="reset"]{
margin-top: 15px;
font-size: 18px;
border:1px solid #000;
padding:5px 10px;
border:1px solid rgba(51,51,51,.5);
border-radius:10px;
box-shadow: 2px 1px 1px #aaa;
cursor:pointer;
}
input[type="submit"]:hover, input[type="reset"]:hover{
background:#f4f4f4;
}
h2 {
text-align: center;
}
table tr td {
margin:10px 5px;
padding:5px 0;
line-height: 30px;
}