Form Login Multi User Menggunakan Php MySQL

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGS4/OHgzqHzCvtQ/s512-c/photo.jpg
September 28, 2018




Halo taman teman kembali lagi bersama kami kali ini kami akan share aplikasi bagaimana membuat form login multi user menggunakan Php MySQL. Form login di ini menggunaka bootsrap. Tetapi pertanyaan kami apakah kalian sudah mengetahui form multi user itu seperti apa?

Menurut admin tutorialswb.com form login multi user adalah form yang digunakan oleh satu ataupun banyak untuk melakukan login atau masuk dalam suatu sistem.

Tujuan dari form multi user ini adalah sebagai security atau keamanan sistem, maksudnya orang yang tidak bertanggung jawab akan kesulitan mengetahu username atau email tertentu, karena satu form untuk semuanya.

Form dibawah dibuat dengan sangat simple dan mudah dipahami sehingga sangat cocok bagi tamen-teman yang baru memaulai belajar Php MySQL.

Pada aplikasi yang sangat sederhana dibawah kami hanya mencoba membuat dua user yang berbeda sehingga kita bisa lihat perbedaannya.

Ada beberapa hal yang harus teman-teman persiapkan, yaitu buat file dengan nama-nama dibawah ini, satiap file mempunyai fungsi yang berbeda beda.



connect.php
header.php
index.php
login_action.php
user1.html
user2.html
logout.php

Tetapi sbeelum itu buat database dengan nama levels kemudian masukkan struktur database dibawah ini.

 DROP TABLE IF EXISTS `user_levels`;
CREATE TABLE `user_levels` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(20) NOT NULL,
  `password` varchar(20) NOT NULL,
  `userlevel` varchar(20) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;

INSERT INTO `user_levels` VALUES ('1', 'user1', 'user1', '1');
INSERT INTO `user_levels` VALUES ('2', 'user2', 'user2', '2'); 

connect.php
File ini berfungsi sebagai koneksi kedatabase.

 <?php
mysql_select_db('levels',  mysql_connect('localhost','root',''))or die(mysql_error());
?>
 

header.php
File ini berisi css dan, file ini bisa langsung digabungkan dengan file index.php tetapi pemisahan file ini sangat penting dan sangat berguna ketika kita mempunyai banyak file, jadi kita hanya memanggil form ini dan membuat penggunaan script dalam suatu file berkurang.


 <?php include("connect.php"); ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <title>Login Multi User</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="signin.css" rel="stylesheet">
    <script src="js/ie-emulation-modes-warning.js"></script>
</head> 

index.php
File ini mempunyai sebagai form login untuk masuk kedalam sistem.

 <?php include("header.php"); ?>
<body>

  <div class="container">    
    <div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">                    
      <div class="panel panel-info" >
        <div class="panel-heading">
          <div class="panel-title">Sign In</div>
          
        </div>     

        <div style="padding-top:30px" class="panel-body" >

          <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
          
          <form action="login_action.php" method="post">
            
            <div style="margin-bottom: 25px" class="input-group">
              <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
              <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username">                                        
            </div>
            
            <div style="margin-bottom: 25px" class="input-group">
              <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
              <input id="login-password" type="password" class="form-control" name="password" placeholder="password">
            </div>

            <div style="margin-top:10px" class="form-group">
              <!-- Button -->

              <div class="col-sm-12 controls">
                <button type="submit" class="btn btn-success pull-right"><span class="glyphicon glyphicon-check"></span> Login</button>

              </div>
            </div>
          </form>
        </div>
      </div>
    </div> 
  </div> <!-- /container -->

  <script src="js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
 

login_action.php
File ini merupakan inti atau pusat perintah dari semua form yang ada di atas, form ini berisi script yang memanggil username dan password yang ada pada database. File ini juga berisi perintah file yang harus dituju ketika login dengan menggunakan username tertentu. Disini kami menggunakan perintah if else., Kalian bisa melihatnya secara langsung pada script dibawah.

 <?php
include("connect.php"); 
$tbl_name="user_levels"; // Table name 

$username=$_POST['username']; // username sent from form 
$password=$_POST['password']; // password sent from form 


// To protect MySQL injection 
$username = stripslashes($username);
$password = stripslashes($password);
$username = mysql_real_escape_string($username);
$password = mysql_real_escape_string($password);

//Query
$sql="SELECT * FROM $tbl_name WHERE username='$username' and password='$password'";
$result=mysql_query($sql);
// Mysql_num_row is counting table row
$rows = mysql_fetch_assoc($result);


//Direct pages with different user levels
if ($rows['userlevel'] == '1') {
 header('location: user1.html'); //User1 
 session_register("username");
 session_register("password");
 
}
else
 if ($rows['userlevel'] == '2') {
 header('location: user2.html'); //User2 
 session_register("username");
 session_register("password"); 
 
} 
else
{ 
 // Error login
 echo "<script>alert('Access Denied!');
 window.location='index.php';
 </script>";
}

?> 

user1.html
File ini berfungsi sebagai form yang akan dituju ketika user melakukan login dengan username1

 <!DOCTYPE html>
<html>
<head>
  <title>Login Multi User</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
</head>
<body>
  <br /><br />
  <div class="container">
   <nav class="navbar navbar-inverse">
    <div class="container-fluid">
     <div class="navbar-header">
      <a class="navbar-brand" href="logout.php">Logout !!</a>
    </div>
  </div>
</nav>
<br />
<br />

<div class="form-group">

  <p>Welcome User Number 1</p>
  
</div>

</body>
</html> 

user2.html
File ini berfungsi sebagai form yang akan dituju ketika user melakukan login dengan username2. File user1 dan user2 mempunyai script yang sama cuma isi pesan (kontennya) yang berbeda.

 <!DOCTYPE html>
<html>
<head>
  <title>Login Multi User</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
</head>
<body>
  <br /><br />
  <div class="container">
   <nav class="navbar navbar-inverse">
    <div class="container-fluid">
     <div class="navbar-header">
      <a class="navbar-brand" href="logout.php">Logout !!</a>
    </div>
  </div>
</nav>
<br />
<br />

<div class="form-group">

  <p>Welcome User Number 2</p>
  
</div>

</body>
</html> 

logout.php
File ini berisi script perintah untuk logout.

 <?php
session_start();
unset($_SESSION['username']);
unset($_SESSION['password']);
session_destroy();

header("Location: index.php");
exit;
?> 

Silahkan klik tombol button demo dibawah jika kalian ingin melihat langsung demonya dan kalian juga bisa langsung download file di atas.

DEMO           DOWNLOAD

Sekian share kali ini semoga apa yang kami share bermanfaat bagi anda, Jangan lupa tinggalkan komentar jika kalian belum paham dengan script diatas kami akan selalu menjawab komentar anda.


Related Post

SUBSCRIBE TO OUR NEWSLETTER

closed