√ Membuat Login Multi User dengan PHP

Membuat Login Multi User dengan PHP

Friday, May 17, 2019

Sebuah website tidak terlepas dari sebuah proses login untuk dapat mengaksesnya. Login bertujuan untuk mengetahui identitas pengguna (user), atau dengan siapa sistem kita sedang berintaraksi. Jika sudah diketahui identitasnya, lalu apa level/tingkatan user tersebut untuk dapat mengakses ke dalam sistem. Sehingga perlunya pemberian hak akses untuk masing-masung user tersebut.

Nah, pada kesempatan kali ini saya akan mencoba membuat sebuah sistem login sederhana dimana masing-masing user dapat login sesuai dengan hak akses yang telah diberikan.

Baiklah, berikut langkah-langkahnya:

Buat database dengan nama multiuser, dan tabel tb_user. Berikut kodenya:

CREATE DATABASE IF NOT EXISTS `multiuser` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `multiuser`;

CREATE TABLE IF NOT EXISTS `tb_user` (
  `username` varchar(100) NOT NULL,
  `password` varchar(100) NOT NULL,
  `hak_akses` varchar(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `tb_user` (`username`, `password`, `hak_akses`) VALUES
('admin', 'admin', 'Admin'),
('user', 'user', 'User');

Buat file koneksi.php untuk melakukan koneksi ke database yang telah dibuat tadi. Berikut kodenya:

<?php
$host = "localhost";
$username = "root";
$password = "";
$database = "multiuser";
mysql_connect($host,$username,$password) or die("Koneksi gagal");
mysql_select_db($database) or die("Database tidak bisa dibuka");
?>

Juka sudah, sekarang kita buat css. Saya menggunakan 2 css:

Css bootstrap versi 3.3.7, sobat bisa download langsung di https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Css modifikasi, buat file style.css. Berikut cuplikan kodenya:

html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

Sekarang kita buat file index.php lalu salin kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 <meta name="description" content="Sistem login multiuser" />
 <meta name="author" content="rap3rr0r">

 <title>Login ..</title>

 <link rel="stylesheet" href="bootstrap.min.css" />
 <link rel="stylesheet" href="style.css" />

 <!--[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]-->

 <!-- Google Font -->
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>

<body>
<form action="act-login.php" method="POST" class="form-signin">
 <h1 class="text-center">Login kuy ..</h1>
 <div class="form-group">
  <div class="col-lg-12">
      <input type="text" class="form-control" name="username" style="margin-top: 5px;" placeholder="Username" required>
      <input type="password" class="form-control" name="password" style="margin-top: 5px;" placeholder="Password" required>
      <button type="submit" class="btn btn-default">Masuk</button>
  </div>
 </div>
 <p class="mt-5 mb-3 text-muted text-center"><a href="https://facebook.com/rap3rr0r">&copy; 2019</a></p>
</form>
</body>
</html>

Selanjutnya kita buat file act-login.php untuk mengeksekusi form yang ada pada file index.php. Berikut kodenya:

<?php
 include "koneksi.php";
 function antiinjection($data){
  $filter_sql = mysql_real_escape_string(stripslashes(strip_tags(htmlspecialchars($data,ENT_QUOTES))));
  return $filter_sql;
 }

 $username = antiinjection($_POST['username']);
 $password = antiinjection($_POST['password']);

 $waktu = time()+25200;
 $expired = 60;

 $query = mysql_query("SELECT * FROM tb_user WHERE username='$username' AND password='$password'");
 $in = mysql_num_rows($query);
 $r = mysql_fetch_array($query);

 if ($in > 0){
  session_start();
  $_SESSION['username'] = $r['username'];
  $_SESSION['password'] = $r['password'];
  $_SESSION['hak_akses'] = $r['hak_akses'];

  $_SESSION['timeout'] = $waktu+$expired;
  $waktulog = time();

  if($r['hak_akses']=="Admin"){
   header("location:home-admin.php");
  }
  else if($r['hak_akses']=="User"){
   header("location:home-user.php"); 
  }
 }else{
  echo "<script type='text/javascript'>
    window.alert('Username Atau Password Anda Salah'); 
    window.location =('index.php')</script>";
 }
?>

Kita buat file home-admin.php dan home-user.php untuk mengarahkan jika user telah berhasil login.
File home-admin.php:

<?php
session_start();
if(!isset($_SESSION['username'])){
    die("<script>window.alert('Oops! Access Failed, sistem logout. Anda harus melakukan Login kembali.');
     location=('./')</script>");
}
if($_SESSION['hak_akses']!="Admin"){
    die("<script>window.alert('Oops! Access Failed, Anda Tidak Memiliki akses.');
     location=('./')</script>");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 <meta name="description" content="Sistem login multiuser" />
 <meta name="author" content="rap3rr0r">

 <title>Home Admin ..</title>

 <link rel="stylesheet" href="bootstrap.min.css" />
 <link rel="stylesheet" href="style.css" />

 <!--[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]-->

 <!-- Google Font -->
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body>
<h1 class="text-center">Welcome Admin<br><a href="logout.php" class="btn btn-primary">Keluar</a></h1>
</body>
</html>

File home-user.php:

<?php
session_start();
if(!isset($_SESSION['username'])){
    die("<script>window.alert('Oops! Access Failed, sistem logout. Anda harus melakukan Login kembali.');
     location=('./')</script>");
}
if($_SESSION['hak_akses']!="User"){
    die("<script>window.alert('Oops! Access Failed, Anda Tidak Memiliki akses.');
     location=('./')</script>");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 <meta name="description" content="Sistem login multiuser" />
 <meta name="author" content="rap3rr0r">

 <title>Home User ..</title>

 <link rel="stylesheet" href="bootstrap.min.css" />
 <link rel="stylesheet" href="style.css" />

 <!--[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]-->

 <!-- Google Font -->
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body>
<h1 class="text-center">Welcome User<br><a href="logout.php" class="btn btn-primary">Keluar</a></h1>
</body>
</html>

Dan yang terakhir, kita buat file logout.php:

<?php
session_start();
session_destroy();
echo"
 <script language='javascript'>
 window.alert('Anda Berhasil Keluar Dari Sistem');
 window.location=('index.php')
 </script>
 ";
?>

Untuk hak akses jika lebih dari dua seperti tutorial ini, sobat bisa menambahkan kondisi else if baru pada file act-login.php. Dan jangan lupa buat file baru untuk mengarahkan user jika berhasil login sesuai dengan hak akses yang ingin dibuat. Dan 1 lagi, buat user baru di database sesuai dengan hak akses baru tersebut.

Contoh untuk menambahkan kondisi baru pada file act-login.php dengan hak akses baru yaitu Mahasiswa. Berikut kodenya:

if($r['hak_akses']=="Admin"){
 header("location:home-admin.php");
}
else if($r['hak_akses']=="User"){
 header("location:home-user.php"); 
}
else if($r['hak_akses']=="Mahasiswa"){
 header("location:home-mahasiswa.php"); 
}

Yosh, mungkin cukup sekian untuk tutorial Membuat Login Multi User dengan PHP.
Bagi sobat yang ingin mendownload source codenya, sudah saya sediakan.

Download source kode:

SEMOGA BERMANFAAT DAN MEMBANTU

rap3rr0r Friday, May 17, 2019