Pada Kesempatan Kali inI saya
akan membuat form login dan biodata dengan PHP menggunakan metode post oke langsung
saja saya akan membahas apa itu form login.
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.
b. Script proseslogin.php untuk
menampilkan hasil, jika login berhasil akan keluar biodata dan jika login gagal
akan keluar notification periksa kembali username dan password anda.
<html>
<head>
<title>Hasil
Login</title>
<link
href="style.css" rel="stylesheet" type="text/css"
media="screen"/>
</head>
<body
bgcolor="#FFFF66">
<form
action="proseslogin.php" method="post"
name="form1">
<table>
<tr>
<td>
<?php
if
(isset($_POST['Login'])){
$login
= $_POST['username'];
$pass
= $_POST['password'];
if
($login == "bayuoutlook99" && $pass == "bayu1234"){
echo
"<h1>Biodata</h1>
<tr>
<td>Nama</td>
<td>:</td>
<td>Aditya Bayu Irawan</td>
</tr>
<tr>
<td>Nim</td>
<td>:</td>
<td>16.3.0043</td>
</tr>
<tr>
<td>Jurusan</td>
<td>:</td>
<td>Teknik Informatika</td>
</tr>
<tr>
<td>Agama</td>
<td>:</td>
<td>Islam</td>
</tr>
<tr>
<td>Tempat lahir</td>
<td>:</td>
<td>Tanggerang</td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td>:</td>
<td>10 Juni 1999</td>
</tr>
<tr>
<td>Hobi</td>
<td>:</td>
<td>Bermain Badminton</td>
</tr>
<tr>
<td>Golongan Darah</td>
<td>:</td>
<td>O</td>
</tr>
<tr>
<td>No Telephone</td>
<td>:</td>
<td>0877884340933</td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td>bayubocahcartoe@outlook.com</td>
</tr>
<tr>
<td>Situs Saya</td>
<td>:</td>
<td>adityabayuirawan145.blogspot.com</td>
</tr>";
}
else{
echo
"<h2>Login Gagal</h2>
<tr>
<td>periksa
kembali username dan password anda</td>
</tr>";
}
}
?>
</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-image:url(triangulation-background.jpg);
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;
}
1. Cek
hasil program
Anda dapat mengecek hasil program
dengan menggunakan software browser salah satunya Mozilla Firefox. Jalankan
browser dan ketik pada address url, seperti: http://localhost/nama folder/nama
file.php. Pada program tersebut, pengguna diminta melakukan input username dan
password. Bila data diisi dengan benar maka akan tampil laporan biodata dan
jika login gagal akan keluar notification periksa kembali username dan password
anda.
Sign up here with your email
ConversionConversion EmoticonEmoticon