membuat form login di php dan mysql

membuat form login di php dan mysql

membuat form login di php dan mysql

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 
<?php
$host = 'localhost';
$user = 'root';
$pass = '';
$db  = 'bank3';
mysql_connect($host,$user,$pass) or die(mysql_error());
mysql_select_db($db) or die(mysql_error());
?>
ganti tulisan berwarna merah dengan nama database anda.

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
membuat form login di php dan mysql
3. Buat file dengan nama proses_login.php dan masukan source code berikut.
<?php
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();
    }
}
?>
selesai itulah pembahasan mengenai cara membuat form login di php dan mysql.
Jika teman-teman berminat mendownload file beserta cssnya silahkan download DISINI 
Buka Komentar