pada kesempatan ini admin membagikan cara membuat form login di php dan mysql. dimana cara ini sangat sederhana dan mudah di lakukan. tentunya form login ini sudah di design dengan css agar tampilan terlihat bagus. lansung saja.
1. buat file config.php file ini berupa koneksi php dengan database nantinya. dan masukan source code di bawah
<?phpganti tulisan berwarna merah dengan nama database anda.
$host = 'localhost';
$user = 'root';
$pass = '';
$db = 'bank3';
mysql_connect($host,$user,$pass) or die(mysql_error());
mysql_select_db($db) or die(mysql_error());
?>
2. buat file baru dengan nama index.php file ini nantinya berisi source code login.
kemudian masukan source code berikut di index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--IE Compatibility modes-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Mobile first-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Login Page</title>
<meta name="description" content="Free Admin Template Based On Twitter Bootstrap 3.x">
<meta name="author" content="">
<meta name="msapplication-TileColor" content="#5bc0de" />
<meta name="msapplication-TileImage" content="assets/img/metis-tile.png" />
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/lib/bootstrap/css/bootstrap.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="assets/lib/font-awesome/css/font-awesome.css">
<!-- Metis core stylesheet -->
<link rel="stylesheet" href="assets/css/main.css">
<!-- metisMenu stylesheet -->
<link rel="stylesheet" href="assets/lib/metismenu/metisMenu.css">
<!-- onoffcanvas stylesheet -->
<link rel="stylesheet" href="assets/lib/onoffcanvas/onoffcanvas.css">
<!-- animate.css stylesheet -->
<link rel="stylesheet" href="assets/lib/animate.css/animate.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="login" style="background-image: url();">
<div class="form-signin" style="border : 1px solid black;">
<div class="text-center">
<img src="assets/img/bank1.png" alt="Bank Sampah">
</div>
<hr>
<div class="tab-content">
<div id="login" class="tab-pane active">
<form action="proses_login.php" method="POST">
<p class="text-muted text-center">
Masukkan Username dan Password
</p>
<input type="text" placeholder="Username" name="username" class="form-control top">
<input type="password" placeholder="Password" name="password" class="form-control bottom">
<div class="checkbox">
<label>
<input type="checkbox"> Remember Me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit" name="login">Sign in</button>
</form>
</div>
</div>
<hr>
</div>
<!--jQuery -->
<script src="assets/lib/jquery/jquery.js"></script>
<!--Bootstrap -->
<script src="assets/lib/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('.list-inline li > a').click(function() {
var activeForm = $(this).attr('href') + ' > form';
//console.log(activeForm);
$(activeForm).addClass('animated fadeIn');
//set timer to 1 seconds, after that, unload the animate animation
setTimeout(function() {
$(activeForm).removeClass('animated fadeIn');
}, 1000);
});
});
})(jQuery);
</script>
</body>
</html>
output
3. Buat file dengan nama proses_login.php dan masukan source code berikut.
<?phpselesai itulah pembahasan mengenai cara membuat form login di php dan mysql.
session_start();
if (isset($_SESSION['level'])) {
header("Location:dashboard.php");
}
include 'config.php';
if (isset($_POST['login'])) {
$username = $_POST['username'];
$password = $_POST['password'];
$sql = mysql_query("SELECT * FROM akun where username='$username'") or die(mysql_error());
//cek username
if (mysql_num_rows($sql) === 1) {
//cek password
$row = mysql_fetch_assoc($sql);
if (password_verify($password, $row['password'])) {
$_SESSION['username'] = $row['username'] ;
$_SESSION['id_akun'] = $row['id_akun'] ;
if($row['level'] == 'super_admin'){
//membuat session
$_SESSION['id_akun'] = $row['id_akun'] ;
echo '<script language="javascript">alert("Anda Berhasil Login"); document.location="super_admin/dashboard.php";</script>'; die();
}
if ($row['level'] == 'admin_unit') {
echo '<script language="javascript">alert("Anda Berhasil Login"); document.location="";</script>'; die();
}
if ($row['level'] == 'user') {
echo '<script language="javascript">alert("Anda Berhasil Login"); document.location="";</script>'; die();
}
}
}else{
echo '<script language="javascript">alert("username atau password salah"); document.location="index.php";</script>'; die();
}
}
?>
Jika teman-teman berminat mendownload file beserta cssnya silahkan download DISINI
