Kali ini saya akan share mebuat form login dengan css, agar lebih menarik
Setelah itu untuk proses loginnya buatlah php lagi dengan nama hasillogin.php ketikkan coding dibawah ini:
Anda bisa download file ya disini
Pertama buat dulu form login dengan nama login.html, kodenya seperti ini:
<form method="post" action="hasillogin.php">
<fieldset class="account-info">
<label>
Username
<input type="text" name="id_user" >
</label>
<label>
Password
<input type="password" name="password">
</label>
</fieldset>
<fieldset class="account-action">
<input class="btn" type="submit" name="submit" value="Login">
<label>
<input type="checkbox" name="remember"> Stay signed in
</label>
</fieldset>
</form>
<fieldset class="account-info">
<label>
Username
<input type="text" name="id_user" >
</label>
<label>
Password
<input type="password" name="password">
</label>
</fieldset>
<fieldset class="account-action">
<input class="btn" type="submit" name="submit" value="Login">
<label>
<input type="checkbox" name="remember"> Stay signed in
</label>
</fieldset>
</form>
Hasilnya nanti akan terlihat seperti di bawah ini:
Setelah itu buat code untuk css nya
<style>
*,
*:before,
*:after {
box-sizing: border-box;
}
form {
border: 1px solid #c6c7cc;
border-radius: 5px;
font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
overflow: hidden;
width: 202px;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
input {
border-radius: 5px;
font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
}
.account-info {
padding: 10px 10px 0 10px;
}
.account-info label {
color: #395870;
display: block;
font-weight: bold;
margin-bottom: 20px;
}
.account-info input {
background: #fff;
border: 1px solid #c6c7cc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
color: #636466;
padding: 3px;
margin-top: 3px;
width: 100%;
}
.account-action {
background: #f0f0f2;
border-top: 1px solid #c6c7cc;
padding: 10px;
}
.account-action .btn {
background: linear-gradient(#49708f, #293f50);
border: 0;
color: #fff;
cursor: pointer;
font-weight: bold;
float: left;
padding: 5px 10px;
}
.account-action label {
color: #7c7c80;
font-size: 12px;
float: left;
margin: 5px 0 0 5px;
}
</style>
Taruh code css di atas sebelum code </head>
*,
*:before,
*:after {
box-sizing: border-box;
}
form {
border: 1px solid #c6c7cc;
border-radius: 5px;
font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
overflow: hidden;
width: 202px;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
input {
border-radius: 5px;
font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
}
.account-info {
padding: 10px 10px 0 10px;
}
.account-info label {
color: #395870;
display: block;
font-weight: bold;
margin-bottom: 20px;
}
.account-info input {
background: #fff;
border: 1px solid #c6c7cc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
color: #636466;
padding: 3px;
margin-top: 3px;
width: 100%;
}
.account-action {
background: #f0f0f2;
border-top: 1px solid #c6c7cc;
padding: 10px;
}
.account-action .btn {
background: linear-gradient(#49708f, #293f50);
border: 0;
color: #fff;
cursor: pointer;
font-weight: bold;
float: left;
padding: 5px 10px;
}
.account-action label {
color: #7c7c80;
font-size: 12px;
float: left;
margin: 5px 0 0 5px;
}
</style>
Hasilnya akan jadi seperti ini :
Untuk warnanya anda bisa mengganti di coding style nya sesuai selera ^_^
Setelah itu buatlah database dengan table login field ya user dan pass, isikan field user dan pass untuk percobaan login
Kemudian buatlah php untuk koneksi ke data base simpan dengan nama konek.php:
<?php
$host = "localhost";
$user = "root";
$pass = "";
$db ="blogku";
$koneksi = mysql_connect($host, $user, $pass);
if (!$koneksi) {
echo "Koneksi ke server tidak berhasil";
};
$database = mysql_select_db($db);
if (!$database) {
}
mysql_select_db($db) or die ("Database not Found !");
?>
Simpan dengan nama konek.php$host = "localhost";
$user = "root";
$pass = "";
$db ="blogku";
$koneksi = mysql_connect($host, $user, $pass);
if (!$koneksi) {
echo "Koneksi ke server tidak berhasil";
};
$database = mysql_select_db($db);
if (!$database) {
}
mysql_select_db($db) or die ("Database not Found !");
?>
Setelah itu untuk proses loginnya buatlah php lagi dengan nama hasillogin.php ketikkan coding dibawah ini:
<?php session_start();
include("konek.php");
$user = $_POST['id_user'];
$user = str_replace("'","´",$user);
$psw=$_POST['password'];
$psw= str_replace("'","´",$psw);
$cek = "Select * from login where user='".$user."' and pass='".($psw)."'";
$hasil = mysql_query($cek);
$hasil_cek = mysql_num_rows($hasil);
if ($hasil_cek==0){
header("location:login.html");
echo "Username dan Password yang Anda isi salah...!!!";
}else{
$_SESSION['userlogin'] =$user;
header("location:hasil.php");
}
?>
Untuk hasil login setelah berhasil buatlah html/ php nya untuk contoh saya buat file hasil.phpinclude("konek.php");
$user = $_POST['id_user'];
$user = str_replace("'","´",$user);
$psw=$_POST['password'];
$psw= str_replace("'","´",$psw);
$cek = "Select * from login where user='".$user."' and pass='".($psw)."'";
$hasil = mysql_query($cek);
$hasil_cek = mysql_num_rows($hasil);
if ($hasil_cek==0){
header("location:login.html");
echo "Username dan Password yang Anda isi salah...!!!";
}else{
$_SESSION['userlogin'] =$user;
header("location:hasil.php");
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
Login Berhasil ^_^
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
Login Berhasil ^_^
</body>
</html>
Anda bisa download file ya disini
0 comments:
Post a Comment