Kamis, 13 Oktober 2016

Membuat Login Leveling Admin & Member pada CMS Lokomedia

By  at 15.17    No comments
Assalamu'alaikum Wr Wb

Hai Teman-teman pada kesempatan kali ini saya akan shering tentang Membuat Login Leveling Admin dan member pada CMS Lokomedia.

A. Pengertian
     Login adalah proses masuk ke jaringan komputer dengan memasukkan identitas akun minimal terdiri dari username/akun pemgguna dan password untuk mendapatkan hak akses.

B. Latar Belakang
    Latar belakang saya membuat login ini adalah untuk mengamankan akun website, dari orang-orang yang jahil dan tidak bertanggung jawab.

C. Alat dan Bahan
  • Laptop/PC
  • File Bootstrap 
  • Text Editor
D. Materi

1. Pertama-tama kita buat dulu databasenya.


2. Kemudian klik insert
3. Lalu kita buat struktur folder seperti di bawah ini. Untuk folder assets bisa mendownload DISINI


4. Membuat File Koneksi ke database, dan beri nama "config.php"

<?php

define('DBHOST', 'localhost');
define('DBUSER', 'root');
define('DBPASS', 'wahyudie');
define('DBNAME', 'login');

/**
 * $dbconnect : koneksi kedatabase
 */
$dbconnect = new mysqli(DBHOST, DBUSER, DBPASS, DBNAME);

/**
 * Check Error yang terjadi saat koneksi
 * jika terdapat error maka die() // stop dan tampilkan error
 */
if ($dbconnect->connect_error) {
    die('Database Not Connect. Error : ' . $dbconnect->connect_error);
}

5. Buat file "index.php"

<?php
session_start();

if ( isset($_SESSION['user_login']) && $_SESSION['user_login'] != '' ) {
    $halaman = $_SESSION['user_login'];

    header('location:on-'. $halaman);
    exit();
} else {
    header('location:login.php');
    exit();
}

6. Selanjutnya membuat file "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>Halaman Login</title>

    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
  </head>
  <body>
    <div class="col-md-4 col-md-offset-4 form-login">
  
    <?php
    /* handle error */
    if (isset($_GET['error'])) : ?>
        <div class="alert alert-warning alert-dismissible" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <strong>Warning!</strong> <?=base64_decode($_GET['error']);?>
        </div>
    <?php endif;?>

        <div class="outter-form-login">
        <div>
            <img src="assets/fonts/2.jpeg">
        </div>
            <form action="check-login.php" class="inner-login" method="post">
            <h3 class="text-center title-login">Login Member</h3>
                <div class="form-group">
                    <input type="text" class="form-control" name="username" placeholder="Username">
                </div>

                <div class="form-group">
                    <input type="password" class="form-control" name="password" placeholder="Password">
                </div>
              
                <input type="submit" class="btn btn-block btn-custom-green" value="LOGIN" />
              
                <div class="text-center forget">
                    <p>Forgot Password ?</p>
                </div>
            </form>
        </div>
    </div>

    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
  </body>
</html>

7. Membuat file "check_login"

<?php
session_start();
require 'config.php';

if ( isset($_POST['username']) && isset($_POST['password']) ) {
  
    $sql_check = "SELECT nama,
                         level_user,
                         id_user
                  FROM users
                  WHERE
                       username=?
                       AND
                       password=?
                  LIMIT 1";

    $check_log = $dbconnect->prepare($sql_check);
    $check_log->bind_param('ss', $username, $password);

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

    $check_log->execute();

    $check_log->store_result();

    if ( $check_log->num_rows == 1 ) {
        $check_log->bind_result($nama, $level_user, $id_user);

        while ( $check_log->fetch() ) {
            $_SESSION['user_login'] = $level_user;
            $_SESSION['sess_id']    = $id_user;
            $_SESSION['nama']       = $nama;
          
        }

        $check_log->close();

        header('location:on-'.$level_user);
        exit();

    } else {
        header('location: login.php?error='.base64_encode('Username dan Password Invalid!!!'));
        exit();
    }

 
} else {
    header('location:login.php');
    exit();
}

8. Buat file "logout.php"

<?php
session_start();
session_destroy();
header('location:login.php');

9. Buat file "index.php" di folder on-admin

<?php
session_start();
/**
 * Jika Tidak login atau sudah login tapi bukan sebagai admin
 * maka akan dibawa kembali kehalaman login atau menuju halaman yang seharusnya.
 */
if ( !isset($_SESSION['user_login']) ||
    ( isset($_SESSION['user_login']) && $_SESSION['user_login'] != 'admin' ) ) {

    header('location:./../login.php');
    exit();
}
?>
<h2>Hallo Admin <?=$_SESSION['nama'];?> Apakabar ?</h2>

<a href="./../logout.php">Logout</a>

10. Kemudian buat file "index.php" di folder

<?php
session_start();
/**
 * Jika Tidak login atau sudah login tapi bukan sebagai admin
 * maka akan dibawa kembali kehalaman login atau menuju halaman yang seharusnya.
 */
if ( !isset($_SESSION['user_login']) ||
    ( isset($_SESSION['user_login']) && $_SESSION['user_login'] != 'member' ) ) {

    header('location:./../login.php');
    exit();
}
?>
<h2>Hallo Member <?=$_SESSION['nama'];?> Apakabar ?</h2>

<a href="./../logout.php">Logout</a>

11. Jika sudah, Jalankan di Browser, dan hasil tampilannya seperti di bawah ini.


E. Kesimpulan
    Dengan  penggunaan CSS Bootstrap. Bootstrap memberikan efek tampilan yang lebih elegan dan menarik pada form, dengan penggunaan Bootstrap ini tidak akan merubah struktur coding suatu fungsi, kita cukup mengincludekan cssnya dan menyesuaikan sesuai tampilan bootstrap yang kita inginkan seperti pada Form Login Sederhana yang kita buat ini.

F. Referensi
Sekian tentang cara membuat Login Leveling Admin dan member pada CMS Lokomedia, semoga bermanfaat dan selamat mencoba.

Wassalamu'alaikum Wr Wb.

0 komentar:

Posting Komentar