» » » » Bootstrap Login Multi Level User dengan PHP dan MySQL

Bootstrap Login Multi Level User dengan PHP dan MySQL

, , Edit
Pembuatan login dengan hak akses berbeda sangat diperlukan jika kita ingin mengatur halaman untuk akses user tertentu.

Dalam tutorial pembuatan login multi user ini, kita akan membagi user dengan tiga tipe yaitu : Administrator, Dosen dan Mahasiswa. Sehingga nantinya begitu login, masing-masing user akan memiliki halaman yang berbeda, dan apabila salah satu user ingin masuk ke halaman yang bukan otoritasnya, maka akan ditolak.

Tiap-tiap user harus login terlebih dahulu seperti yang ditunjukkan oleh Gambar.1 dibawah ini :
Gambar.1

Pada Gambar.1 terdapat tiga level user :
  • Administrator
  • Dosen
  • Mahasiswa

Berikut ini adalah tabel untuk ketiga level user tersebut :
Tabel.1


Halaman Administrator
Jika seandainya kita memasukkan :
  • username : ilmudetil 
  • password : ilmudetil
  •  serta dipilih level : Administrator,  maka akan masuk ke halaman administrator seperti yang ditunjukkan oleh Gambar.2 dibawah ini :
Gambar.2

Jika seandainya username dan password : ilmudetil, tetapi dipilih levelnya adalah Dosen atau Mahasiswa, maka login akan gagal. Seperti yang terlihat pada tabel.1 diatas, bahwa username dan password ilmudetil berada pada level : Administrator


Halaman Dosen
Jika kita memasukkan :
  • username : zakaria
  • password : zakaria
  • serta dipilih level : Dosen, maka akan masuk ke halaman Dosen seperti yang ditunjukkan oleh Gambar.3 dibawah ini :
Gambar.3

Jika seandainya username dan password :zakaria, tetapi dipilih levelnya adalah Administrator atau Mahasiswa, maka login akan gagal seperti yang ditunjukkan oleh Gambar.4. Seperti yang terlihat pada tabel.1 diatas, bahwa username dan password : zakaria berada pada level : Dosen.
Gambar.4


Halaman Mahasiswa
Jika kita memasukkan :
  • username : desi
  • password : desi
  • serta dipilih level : Mahasiswa, maka akan masuk ke halaman Mahasiswa seperti yang ditunjukkan oleh Gambar.5 dibawah ini :
Gambar.5


Tahap-tahap pembuatan login multi level

1. Create Database (multilogin.sql)

Buatlah sebuah database dengan nama multilogin, kemudian create table yang diberinama user yang berisikan script sql spt berikut :
CREATE TABLE IF NOT EXISTS `user` (
  `username` varchar(20) NOT NULL,
  `password` varchar(50) NOT NULL,
  `level` enum('Administrator','Mahasiswa','Dosen') NOT NULL,
  `img` varchar(200) NOT NULL,
  PRIMARY KEY (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `user` (`username`, `password`, `level`, `img`) VALUES
('desi', 'desi', 'Mahasiswa', 'desi.png'),
('ilmudetil', 'ilmudetil', 'Administrator', 'ilmudetil.png'),
('zakaria', 'zakaria', 'Dosen', 'zakaria.png');
Pada tabel user terdapat field img, yang memiliki tujuan untuk ditampilkan foto dari masing-masing user tersebut pada masing-masing halaman setelah login berhasil.


2. Estbalish koneksi dengan database (connection.php)

Pada tahap ini, kita membuat sebuah koneksi dengan database. Dalam hal ini kita menggunakan mysqli.

<?php
$connection = mysqli_connect("localhost","root","","multilogin");
?>

3. Halaman login (index.php)

Halaman login seperti yang ditunjukkan oleh Gambar.1 diatas berisikan kode sebagai berikut :

<?php
session_start();
if($_SESSION){
    if($_SESSION['level']=="Administrator")
    {
        header("Location: haladmin.php");
    }
    if($_SESSION['level']=="Dosen")
    {
        header("Location: hallecturer.php");
    }
    if($_SESSION['level']=="Mahasiswa")
    {
        header("Location: halstudent.php");
    }
}

include('login.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">
<title>Login</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/form-elements.css">
<link rel="stylesheet" href="assets/css/style.css">

<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
 <!-- Top content -->
        <div class="top-content">
            <div class="inner-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3 form-box">
                            <div class="form-top">
                                <div class="form-top-left">
                                    <h3>Login to our site</h3>
                                    <p>Enter your username and password to log on:</p>
                                </div>
                                <div class="form-top-right">
                                    <i class="fa fa-key"></i>
                                </div>
                            </div>
                            <div class="form-bottom">
                                <form role="form" action="" method="post" class="login-form">
                                    <div class="form-group">
                                        <label class="sr-only" for="form-username">Username</label>
                                        <input type="text" name="username" placeholder="Username..." class="form-username form-control" id="form-username">
                                    </div>
                                    <div class="form-group">
                                        <label class="sr-only" for="form-password">Password</label>
                                        <input type="password" name="password" placeholder="Password..." class="form-password form-control" id="form-password">
                                    </div>
                                    <div class="form-group">
                                        <select name="level" class="form-control" required>
                                            <option value="">Pilih Level User</option>
                                            <option value="1">Administrator</option>
                                            <option value="2">Dosen</option>
                                            <option value="3">Mahasiswa</option>
                                        </select>
                                    </div>
                                    <button type="submit" name="submit" class="btn">Sign in!</button>
                                    <?php echo $error; ?>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Javascript -->
        <script src="assets/js/jquery-1.11.1.min.js"></script>
        <script src="assets/bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/js/jquery.backstretch.min.js"></script>
        <script src="assets/js/scripts.js"></script>
        
        <!--[if lt IE 10]>
            <script src="assets/js/placeholder.js"></script>
        <![endif]-->
</body>
</html>
Script php bagian atas berfungsi untuk session yang sudah terciptakan, jadi nantinya apabila user (sudah login) dan ingin masuk lagi ke halaman index.php maka akan langsung didirect ke halaman otoritas masing-masing.

Jika seandainya user belum login, maka aka dipanggil file login.php untuk mengverifikasi username,password serta level apakah sesuai dengan data yang terdapat pada database atau tidak.


4. Verifikasi user dan level (login.php)

File login.php bertujuan untuk mengverifikasi data berupa : username,password, level yang dimasukkan pada file index.php. Jika data tersebut sesuai dengan data pada database, maka akan didirecet pada masing-masing halaman akses.

<?php

$error=''; 

include "connection.php";
if(isset($_POST['submit']))
{               
    $username   = $_POST['username'];
    $password   = $_POST['password'];
    $level      = $_POST['level'];
                    
    $query = mysqli_query($connection, "SELECT * FROM user WHERE username='$username' AND password='$password'");
    if(mysqli_num_rows($query) == 0)
    {
        $error = "Username or Password is invalid";
    }
    else
    {
        $row = mysqli_fetch_assoc($query);
        $_SESSION['username']=$row['username'];
        $_SESSION['level'] = $row['level'];
        
        if($row['level'] == "Administrator" && $level=="1")
        {
            
            header("Location: haladmin.php");
        }
        else if($row['level'] =="Dosen" && $level=="2")
        {
            header("Location: hallecturer.php");
        }
        else if($row['level'] == "Mahasiswa" && $level=="3")
        {
            
            header("Location: halstudent.php");
        }
        else
        {
            $error = "Failed Login";
        }
    }
}
            
?>


5. Halaman Admin (haladmin.php)

Pada halaman ini akan menampilkan halaman akses administrator, sehingga user dengan level Mahasiswa dan Dosen tidak dapat mengakses halaman ini.

<?php
include('cekadmin.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>Your Home Page</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Admin DashBoard</title>
        <!-- CSS -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
        
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">

                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

            </button>
            <a class="navbar-brand" href="#">
                <?php
                $nama = $_SESSION['username'];
                echo "<img style='height: 30px; margin-top: -5px;' src='assets/img/icon/$nama.png' class='img-circle'>";
                ?> 
                <div class="pull-left">
                <p style="margin: -25px 40px 10px;">Welcome <i><?php echo $_SESSION['username']; ?></i></p>
                </div>
            </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li></i></li>
                <li><a href="logout.php">Logout</a></li>
            </ul>
        </div>
    </div>
</nav>
        
<div class="container" style="margin-top:40px">
  <h2>Kumpulan Tutorial</h2>
  <a href = "http://ilmu-detil.blogspot.co.id/2016/03/cara-update-android-studio-ke-versi.html" class="list-group-item">
   Update Android Studi ke versi terbaru
</a>

<a href = "http://ilmu-detil.blogspot.co.id/2016/03/contoh-php-jquery-ajax-dropdown-list.html" class = "list-group-item">Jquery Ajax Dropdown List</a>
<a href = "http://ilmu-detil.blogspot.co.id/2016/02/php-deteksi-browser-dan-ip-serta-os.html" class = "list-group-item">Deteksi Browser, IP,OS beserta dengan Iconnya </a>
<a href = "http://ilmu-detil.blogspot.co.id/2016/02/php-format-tanggal-indonesia-dari-database.html" class = "list-group-item">Php Format Tanggal Bahasa Indonesia</a>
<a href = "http://ilmu-detil.blogspot.co.id/2016/01/tutorial-searching-dengan-php-mysql.html" class = "list-group-item">Tutorial Searching dengan Php MySQL</a>
<a href = "http://ilmu-detil.blogspot.co.id/2016/02/cara-membuat-image-slideshow-pada-web.html" class = "list-group-item">Membuat Image Slidehshow dengan Bootstrap</a>
<a href = "http://ilmu-detil.blogspot.co.id/2016/01/membuat-bagan-organisasi-dengan-jquery.html" class = "list-group-item">Membuat Bagan Organisasi dengan Jquery</a>
<a href = "http://ilmu-detil.blogspot.co.id/2016/01/fungsi-php-untuk-cuplikan-berita.html" class = "list-group-item">Membuat Cuplikan Berita dengan Php</a>
</div>              

</body>
</html>


6. Validasi akses admin (cekadmin.php)

File ini untuk memastikan bahwa anda login dengan hak akses admin sebelum masuk ke halaman administrator (haladmin.php)

<?php
session_start();

//cek apakah user sudah login
if(!isset($_SESSION['username'])){
    die("Anda belum login");//
}

//cek level user
if($_SESSION['level']!="Administrator")
{
    die("Anda bukan admin");
}
?>


7. Halaman Dosen (hallecturer.php)

Pada halaman ini akan menampilkan halaman akses Dosen, sehingga user dengan level Mahasiswa dan Administrator tidak dapat mengakses halaman ini. 

<?php
include('ceklecturer.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>Your Home Page</title>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Admin DashBoard</title>

        <!-- CSS -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
        
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">

                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

            </button>
            <a class="navbar-brand" href="#">
                <?php
                $nama = $_SESSION['username'];
                echo "<img style='height: 30px; margin-top: -5px;' src='assets/img/icon/$nama.png' class='img-circle'>";
                ?> 
                <div class="pull-left">
                <p style="margin: -25px 40px 10px;">Welcome <i><?php echo $_SESSION['username']; ?></i></p>
                </div>
            </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li></i></li>
                <li><a href="logout.php">Logout</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li></i></li>
                <li><a href="http://ilmu-detil.blogspot.co.id/.php">Tutorial Android</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="container" style="margin-top:60px"> 

<h2>Tutorial</h2>
              
              <div class="table-responsive">
                <table class="table table-hover">
                  
                  <tbody>
                    <tr>
                      <td><i class="pull-right glyphicon glyphicon-eye-open"></i>
                      <a href ="http://ilmu-detil.blogspot.com/2015/10/tutorial-bootstrap-cara-membuat.html">
                      Membuat Dropdown Menu pada Bootstrap</a></td>
                    </tr>
                    <tr>
                      <td><i class="pull-right fa fa-edit"></i> 
                      <a href ="http://ilmu-detil.blogspot.co.id/2015/09/membuat-headline-news-dinamis-dari.html">
                      Membuat Headlinew News dari Database</a></td>
                    </tr>
                    <tr>
                      <td><i class="pull-right fa fa-edit"></i> 
                      <a href ="http://ilmu-detil.blogspot.co.id/2015/07/install-android-studio-pada-windows.html">
                      Install Android Studio pada Windows</a></td>
                    </tr>
                   
                  </tbody>
                </table>
              </div>
</div>            
</div>  
</body>
</html>


8. Validasi akses dosen (ceklecturer.php)

File ini untuk memastikan bahwa anda login dengan hak akses Dosen sebelum masuk ke halaman Dosen (hallecturer.php)

<?php
session_start();

//cek apakah user sudah login
if(!isset($_SESSION['username'])){
    die("Anda belum login");
}

//cek level user
if($_SESSION['level']!="Dosen"){
    die("Anda bukan Dosen");
}
?>


9. Halaman Mahasiswa (halstudent.php)

Pada halaman ini akan menampilkan halaman akses Mahasiswa, sehingga user dengan level Administrator dan Dosen tidak dapat mengakses halaman ini.

<?php
include('cekstudent.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>Halaman Mahasiswa</title>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        

        <!-- CSS -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
        
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">

                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

            </button>
            <a class="navbar-brand" href="#">
                <?php
                $nama = $_SESSION['username'];
                echo "<img style='height: 30px; margin-top: -5px;' src='assets/img/icon/$nama.png' class='img-circle'>";
                ?> 
                <div class="pull-left">
                <p style="margin: -25px 40px 10px;">Welcome <i><?php echo $_SESSION['username']; ?></i></p>
                </div>
            </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li></i></li>
                <li><a href="logout.php">Logout</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li></i></li>
                <li><a href="http://ilmu-detil.blogspot.co.id/.php">Tutorial Web</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="container" style="margin-top:60px"> 

<h2>Tutorial</h2>
              
              <div class="table-responsive">
                <table class="table table-hover">
                  
                  <tbody>
                    <tr>
                      <td><i class="pull-right glyphicon glyphicon-eye-open"></i>
                      <a href ="http://ilmu-detil.blogspot.co.id/2016/03/memahami-xml-based-layout-pada-android.html">
                      Memahami XML Based Layout pada Android Studio</a></td>
                    </tr>
                    <tr>
                      <td><i class="pull-right fa fa-edit"></i> <a href ="http://ilmu-detil.blogspot.co.id/2015/11/membuat-judul-berita-atau-text-marquee.html">
                      Membuat Berita Berjalan / Horizontal Newsticker</a></td>
                    </tr>
                   
                  </tbody>
                </table>
              </div>
</div>            
</div>  
</body>
</html>


10. Validasi akses mahasiswa (cekstudent.php)

File ini untuk memastikan bahwa anda login dengan hak akses Mahasiswa sebelum masuk ke halaman Mahasiswa (halstudent.php)

<?php
session_start();

//cek apakah user sudah login
if(!isset($_SESSION['username'])){
    die("Anda belum login");
}

//cek level user
if($_SESSION['level']!="Mahasiswa"){
    die("Anda bukan Mahasiswa");
}
?>


11. Keluar dari hak akses (logout.php)

Script pada logout.php untuk keluar dari login, dan akan kembali ke halaman utama. Dalam hal ini adalah halaman login (index.php)
<?php
session_start();
if(session_destroy()) 
{
header("Location: index.php"); 
}
?>

Untuk mencoba simulasi silahkan gunakan username, password dan level seperti yang tertera pada Tabel.1 diatas


Subscribe to receive free email updates:

0 Response to "Bootstrap Login Multi Level User dengan PHP dan MySQL"

Posting Komentar

Langganan: Posting Komentar (Atom)