Home » , , » Membuat Sistem Login Multi Level User dengan PHP, Bootstrap dan Database MySQL

Membuat Sistem Login Multi Level User dengan PHP, Bootstrap dan Database MySQL

Posted by RZDev: Belajar Programming! on Monday, February 5, 2018

Multi Level User

Untuk membuat sistem login dengan multi level user, pertama - tama kita harus membuat database SQL nya.

-- phpMyAdmin SQL Dump
-- version 4.7.0
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Feb 05, 2018 at 06:30 AM
-- Server version: 10.1.25-MariaDB
-- PHP Version: 5.6.31

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `final`
--

-- --------------------------------------------------------

--
-- Table structure for table `pengguna`
--

CREATE TABLE `pengguna` (
  `id_pengguna` int(4) NOT NULL,
  `username` varchar(50) NOT NULL,
  `password` varchar(50) NOT NULL,
  `peran` varchar(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `pengguna`
--

INSERT INTO `pengguna` (`id_pengguna`, `username`, `password`, `peran`) VALUES
(1, 'admin', '21232f297a57a5a743894a0e4a801fc3', 'admin'),
(2, 'rezkycpp', '2c7ef4281d0d5aaf23b436d3fb36ff0f', 'member');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `pengguna`
--
ALTER TABLE `pengguna`
  ADD PRIMARY KEY (`id_pengguna`),
  ADD UNIQUE KEY `username` (`username`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `pengguna`
--
ALTER TABLE `pengguna`
  MODIFY `id_pengguna` int(4) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Setelah database dibuat selanjutnya kita membuat connection.php untuk menghubungkan database tadi dengan page loginnya.

<?php

$servername  = "localhost";
$username    = "root";
$password    = "";
$db          = "final";

$conn = new mysqli($servername, $username, $password, $db);

if ($conn->connect_error) {
    die("Database belum terhubung : " . $conn->connect_error);
}

?>

Untuk servername bisa kalian isi sesuaikan, begitu pula username dan passwordnya, dan juga nama databasenya bisa kalian sesuaikan sendiri dan save dengan nama connection.php.

Berikutnya kita membuat Session Loginnya.

<?php

$error='';

include "config.php";
if(isset($_POST['submit']))
{             
    $username   = $_POST['username'];
    $password   = md5($_POST['password']);
  
                  
    $query = mysqli_query($conn, "SELECT * FROM pengguna 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['peran']      = $row['peran'];
        $_SESSION['id_pengguna']= $row['id_pengguna'];
      
        if($row['peran'] == "admin")
        {
          
            header("Location: admin/index.php");
        }
        else if($row['peran'] == "member")
        {
            header("Location: member/index.php");
        }
        else
        {
            $error = "Failed Login, check again!";
        }
    }
}         
?>

Save dengan nama login.php, jika sudah lanjut kita akan membuat indexnya atau tampilan dari loginnya.

<?php
session_start();
if($_SESSION){
    if($_SESSION['peran']=="admin")
    {
        header("Location: admin/index.php");
    }
    if($_SESSION['peran']=="member")
    {
        header("Location: member/index.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 PAGE</title>

        <!-- Bootstrap -->
        <link href="src/css/bootstrap.min.css" rel="stylesheet">
        <link rel="icon" href="src/icon/favicon.ico">
        <style>
            body {
                background-image: url(src/img/login.jpg);
                background-position: center;
                background-repeat: no-repeat;
            }

            .row {
                margin: 100px auto;
                width: 300px;
                text-align: center;
            }

            .login {
                background-color: #fff;
                padding: 20px;
                margin-top: 20px;
            }

        </style>
        <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>

    <body>
        <div class="container">

            <div class="row">

                <div class="login">
                    <h2>Login first!</h2>
                    <?php
                /*if(isset($_POST['login'])){
                    include("config.php");
                  
                    $username    = $_POST['username'];
                    $password    = md5($_POST['password']);                  
                  
                    $query = mysqli_query($conn, "SELECT * FROM pengguna WHERE username='$username' AND password='$password'");
                    if(mysqli_num_rows($query) == 0){
                        echo '<div class="alert alert-danger">Upss...!!! Login gagal.</div>';
                    }else{
                        $row = mysqli_fetch_assoc($query);
                      
                        if($row['peran'] == 'admin' && $peran == 'admin'){
                            $_SESSION['username']=$username;
                            $_SESSION['peran']='admin';
                            header("Location: ../admin/index.php");
                        }else if($row['peran'] == 'member' && $peran == 'member'){
                            $_SESSION['username']=$username;
                            $_SESSION['peran']='member';
                            header("Location: ../member/index.php");
                        }else{
                            echo '<div class="alert alert-danger">Upss...!!! Login gagal.</div>';
                        }
                    }
                }*/
                ?>

                        <form role="form" action="" method="post">
                            <div class="form-group">
                                <input type="text" name="username" class="form-control" id="username" placeholder="Username" required autofocus />
                            </div>
                            <div class="form-group">
                                <input type="password" name="password" class="form-control" id="password" placeholder="Password" required autofocus />
                            </div>
                            <!--
                            <div class="form-group">
                                <select name="peran" class="form-control" required>
                            <option value="">Pilih Level User</option>
                            <option value="admin">Admin</option>
                            <option value="member">Member</option>
                        </select>
                            </div>
                            -->
                            <div class="form-group">
                                <input type="submit" name="submit" class="btn btn-primary btn-block" value="Login" />
                            </div>
                            <div class="form-group">
                                <input type="button" name="register" class="btn btn-primary btn-block" value="Register" />
                            </div>
                            <?php echo $error; ?>
                        </form>
                </div>
                Copyright &copy; Kelompok 7 - DPW
            </div>
        </div>

        <script src="src/js/jquery-3.3.1.js"></script>
        <script src="src/js/bootstrap.min.js"></script>
    </body>

    </html>

Kode diatas save dengan nama index.php dan jangan lupa saya disini menggunakan framework bootstrap kalian harus download sendiri ya.

Kemudian buat 2 folder baru admin dan user seperti gambar dibawah ini ...

login system
Kemudian dimasing - masing folder kalian buat lagi 3 file yaitu index.php, config.php dan cek_admin.php / cek_user.php. Gunanya adalah agar ketika login sebagai admin kalian akan dilempar kedalam page khusus admin begitu pula jika kalian login sebagai user biasa kalian akan dilempar ke halaman user biasa.

config.php sama saja buat di folder user dan admin

<?php

$conn=mysqli_connect("localhost","root","","final")or die("Can't Connect...");

?>

cek_admin.php

<?php
session_start();

//cek apakah user sudah login
if(!isset($_SESSION['username'])){
    die("Anda belum login");//
}
//cek level user
if($_SESSION['peran']!="admin")
{
    die("Anda bukan admin");
}
?>

cek_member.php

<?php
session_start();

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

//cek level user
if($_SESSION['peran']!="member")
{
    die("Anda bukan member, reg first!");
}

?>

index.php untuk indexnya kalian bisa sesuaikan saja


<!DOCTYPE html>
<html>
<head>
    <title>INI PAGE ADMIN/USER</title>
</head>
<body>
    <p> SELAMAT DATANG ADMIN/USER </p>
</body>
</html>

Setelah semuanya selesai, coba jalankan dan coba login menggunakan kedua usernya yang sudah dibuat tadi...

Admin :
username : admin | password : admin
User :
username : rezkycpp | password : rezkycpp

Sekian dan terima kasih, semoga bermanfaat !!!

Thanks for reading & sharing RZDev: Belajar Programming!

Previous
« Prev Post
Next
Next Post »
Labels: , ,

0 comments:

Post a Comment

Search