Setup Menus in Admin Panel

Membuat Login System Dengan PHP & MySQL

Membuat Login System Dengan PHP & MySQL

Membuat Login System Dengan PHP & MySQL  – Hari ini kita akan membuat sistem login dengan PHP dan MySQL. Bukan hanya sistem login biasa, tapi disini kita akan membuatnya untuk jangka panjang, maksudnya? Jadi, maksudnya adalah bukan hanya sistem login biasa yang dibuat dengan HTML, PHP dan MySQL.

Tapi disini kita akan menggunakan beberapa script tambahan seperti: Bootstrap 3, jQuery, Font Awesome, Material Design For Bootstrap dan Message.js. Untuk apa menambahkan semua itu? alasanya adalah agar kita bisa menggunakan sistem login ini bukan hanya sekedar sistem login melainkan bisa dijadikan sistem admin, membership, forum,  atau yang lain sebagainya.

Features

Apa saja fitur sistem login yang akan kita buat?

  • UI menggunakan Framework Bootstrap 3
  • Fitur “Remember Me”(auto login)
  • Form login dengan AJAX
  • Password menggunakan MD5 hash
  • dan lain-lain

Apa saja yang kita butuhkan?

Sebelum kita lanjut ke tahap step by step maka kita harus mempersiapkan apa yang kita butuhkan untuk membuat sistem login ini. Berikut ini yang kita butuhkan:

Step By Step

Setelah menyiapkan semua bahan-bahan diatas, kali ini kita akan mengatur folder projek. Buatlah susunan struktur folder seperti ini:

Struktur Folder

Lalu buat satu buah database MySQL dengan nama “users” dan buat satu buah tabel dengan nama “tb_users” atau lebih jelasnya jalankan SQL berikut:

-- phpMyAdmin SQL Dump
-- version 4.3.11
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: May 31, 2016 at 05:45 PM
-- Server version: 5.6.24
-- PHP Version: 5.6.8

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
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 utf8 */;

--
-- Database: `users`
--

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

--
-- Table structure for table `tb_users`
--

CREATE TABLE IF NOT EXISTS `tb_users` (
  `id` int(11) NOT NULL,
  `nama` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL,
  `username` varchar(50) NOT NULL,
  `password` varchar(100) NOT NULL,
  `status` int(1) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tb_users`
--

INSERT INTO `tb_users` (`id`, `nama`, `email`, `username`, `password`, `status`) VALUES
(1, 'Muhamad Nauval Azhar', 'nauvalazhar2@gmail.com', 'admin', '81dc9bdb52d04dc20036dbd8313ed055', 1);

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tb_users`
--
ALTER TABLE `tb_users`
  ADD PRIMARY KEY (`id`), ADD KEY `id` (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tb_users`
--
ALTER TABLE `tb_users`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=2;
/*!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 */;

Kemudian untuk selanjutnya, buat beberapa file berikut dan simpan dengan nama yang telah disesuaikan.

init.php

File ini berfungsi untuk mengkoneksikan PHP dengan database MySQL dan juga melakukan beberapa pengaturan.

<?php
/**
 * Menampilkan semua error kecuali error dengan jenis "Notice"
 */
error_reporting(E_ALL & ~E_NOTICE);

/**
 * Memulai sesi
 */
session_start();

/**
 * Membuat koneksi antara PHP dengan database MySQL menggunakan ekstensi MySQLi
 * @var Mysqli
 */
$mysqli = new Mysqli("localhost","root","","users");
if($mysqli->connect_error) {
  echo "Tidak dapat mengkoneksikan PHP dengan database. (" . $mysqli->connect_error . ")";
}

/**
 * Set Informasi Cookie
 */
$cookie_name = "kodinger_auth";
$cookie_time = strtotime("+1 year"); /*cookie berlaku 1 tahun*/

/**
 * Memanggil file functions.php
 */
require 'functions.php';

/**
 * Cek remember me
 */
if(!is_login() and $_COOKIE[$cookie_name]) {
  parse_str($_COOKIE[$cookie_name]);
  $cek_cookie = $mysqli->query("select * from tb_users where username = '".$cookie_username."' and password = '".$cookie_password."'");
  $get_row = $cek_cookie->num_rows;
  if($get_row == 1) {
    $_SESSION['user_login'] = $username;
  }
}

/**
 * Cek login
 */

$never_need_login = array("actions"); /*file yang diizinkan diakses tanpa login*/
if(!is_login() && !in_array(this_page(false), $never_need_login)) {
  if(this_page(false) !== "login.php") {
    redirect("login.php");
  }
}else{
  if(is_login() && this_page(false) == "login.php") {
    redirect("index.php");
  }
}

functions.php

Setelah file init.php selanjutnya adalah file functions.php, file ini berfungsi untuk menyimpan fungsi-fungsi baru PHP yang dibuat.

<?php
/**
 * fungsi ini untuk mengecek apakah user sudah login atau belum
 * @return boolean
 */
function is_login() {
  if($_SESSION['user_login']) { /*jika user sedang login*/
    return true; /*maka mengembalikan hasil 1*/
  }else{ /*jika tidak login*/
    return false; /*maka mengembalikan hasil 0*/
  }
}

/**
 * fungsi ini untuk mencegah sql injection
 * @param  string 	$str 	karakter yang akan difilter
 * @return string
 */
function clean_input($str) {
  $filter = (stripslashes(strip_tags(htmlspecialchars($str, ENT_QUOTES ))));
  return $filter;
}

/**
 * fungsi ini untuk mengambil data user yang sedang login
 * @return array
 */
function current_user() {
  if(is_login()) { /*jika user sudah login*/
    global $mysqli; /*mengambil variabel $mysqli dari luar fungsi*/
    $get_from_session = $_SESSION['user_login']; /*mengambil nilai dari $_SESSION[user_login]*/
    $get_user_data = $mysqli->query("select * from tb_users where username = '$get_from_session'"); /*memfilter data user berdasarkan username dari $get_from_session*/
    $get_row = $get_user_data->fetch_object(); /*mengambil hasil dari $get_user_data dibentuk menjadi object*/
    $data_arr = array(); /*membuat array baru*/
    foreach($get_row as $k=>$v) { /*memecah object dari $get_row*/
      $data_arr[$k] = $v; /*mengambil nilai dari hasil object $get_row dan diset kepada array baru ($data_arr)*/
    }
    /*membuat nama depan*/
    $ex_nama = explode(" ", $get_row->nama); /*memecah nama user dengan spasi*/
    $data_arr['nama_depan'] = $ex_nama[0]; /*megambil nilai array di urutan pertama(0) pada hasil $ex_nama dan diset ke $data_arr*/
    return (object) $data_arr; /*memberikan hasil $data_arr dan dikonversi menjadi bentuk object*/
  }
}

/**
 * fungsi ini untuk memberikan informasi root url website
 * @return string
 */
function base_url() {
  $url = "http://localhost/users/";
  return $url;
}

/**
 * fungsi ini untuk mengalihkan halaman ke url tujuan
 * @param  string 	$url 	Url Tujuan
 * @return header
 */
function redirect($url) {
  return header("Location: " . $url);
}

/**
 * mengambil halaman saat ini
 * @param  boolean 	$param 	ambil uri sekalian atau tidak
 * @return string
 */
function this_page($param=true) {
  $page = $_SERVER['REQUEST_URI'];
  $page = explode("/", $page);
  $page = $page[2];
  if($param == false) {
    $page = explode("?", $page);
    $page = $page[0];
  }
  return $page;
}

header.php

Lalu berikutnya file header.php, file ini berfungsi untuk pembukaan tag HTML dan juga memanggil file-file eksternal.

<?php
/**
 * Memanggil fungsi current_user()
 */
$current_user = current_user();
?>
<!DOCTYPE html>
<html>
  <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><?=$title;?></title>
    <!-- jQuery -->
    <script src="assets/js/jquery.min.js"></script>
    
    <!-- Bootstrap -->
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Material For Bootstrap -->
    <script src="assets/material/dist/js/material.min.js"></script>
    <script src="assets/material/dist/js/ripples.min.js"></script>
    <script>
      $(function(){
        $.material.init()
      })
    </script>
    <link href="assets/material/dist/css/bootstrap-material-design.css" rel="stylesheet">
    <link href="assets/material/dist/css/ripples.min.css" rel="stylesheet">

    <!-- Material Design fonts -->
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">

    <!-- Custom -->
    <link href="assets/css/style.css" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet">

    <!-- Message.JS -->
    <script src="assets/message/message.js"></script>
    <link href="assets/message/message.css" rel="stylesheet">
  </head>

  <body>
    <div class="loading">
      <i class="fa fa-spinner fa-pulse"></i>
    </div>
    
    <?php if(is_login()) { ?>
    <nav class="navbar navbar-white">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Kodinger</a>
        </div>
        <div class="navbar-collapse collapse navbar-responsive-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a href="index.php" class="dropdown-toggle" data-toggle="dropdown">Hi, <?=$current_user->nama_depan;?> <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="logout.php"><i class="fa fa-sign-out"></i> Logout</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container">
    <?php } ?>

footer.php

File ini berfungsi untuk menutup tag dari file header.php.

    <?php if(is_login()) { ?>
      </div>
    <?php } ?>
  </body>
</html>

login.php

Selanjutnya file login.php untuk membuat halaman login pengguna.

<?php
require 'init.php';
$title = "Login"; /*set variabel $title menjadi "Login"*/
include "header.php"; /*memanggil file header.php*/
?>
<div class="well login-form">
  <h1 class="header"><i class="fa fa-sign-in"></i> Login</h1>
  <div class="box-content">
    <form method="post" id="login-form">
      <div class="form-group label-floating">
        <label for="username" class="control-label">Username</label>
        <input type="text" class="form-control" id="username" name="username">
        <span class="help-block">Mohon masukan username anda</span>
      </div>
      <div class="form-group label-floating">
        <label for="password" class="control-label">Password</label>
        <input type="password" class="form-control" id="password" name="password">
        <span class="help-block">Mohon masukan password anda</span>
      </div>
      <div class="pull-right checkbox">
        <label class="control-label">
          <input type="checkbox" name="remember" value="1"> Remember Me
        </label>
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary btn-block btn-raised">Login</button>
      </div>
    </form> <!--#end form-->
  </div> <!--#end box-content-->
</div> <!--#end login-form|box-->

<!-- AJAX -->
<script>
$(function(){
  $("#login-form").on("submit", function(){
    var $this = $(this);
    $.ajax({
      url: "actions/login.php",
      data: $this.serialize(),
      type: $this.attr("method"),
      dataType: "json",
      error: function(xhr) {
        message({
          id: "send_failed",
          text: "error: " + xhr.status,
          type: "error"
        })
      },
      beforeSend: function(){
        $this.find(":input").attr("disabled", true);
        $(".loading").show();
      },
      complete: function(){
        $this.find(":input").attr("disabled", false);
        $(".loading").hide();
      },
      success: function(data){
        if(data['status'] == 'failed') {
          message({
            id: "login_failed",
            text: "Username atau password yang anda masukan salah",
            type: "error"
          })
        }else if(data['status'] == 'success') {
          message({
            id: "login_success",
            text: "Anda berhasil login "+data['username']+" tunggu sebentar ...",
            type: "success"
          })
          setTimeout(function(){
            document.location.reload();
          },1000)
        }else{
          message({
            id: "unknown_error",
            text: "Kesalahan terjadi pada saat login",
            type: "error"
          })
        }
      }
    })
    return false;
  })
})
</script>
<?php
include "footer.php"; /*memanggil file footer.php*/
?>

loginactions/login.php

File ini berfungsi untuk mengecek data dari form login apakah ada didatabase. File ini disimpan didalam folder actions/.

<?php
require '../init.php';

if($_SERVER['HTTP_REFERER']) { /*mencegah akses langsung dari browser*/
    $username         = clean_input($_POST['username']); /*mengambil data username dari input text username*/
    $password         = md5(clean_input($_POST['password'])); /*mengambil data password dari input text password dan dienkripsi dengan MD5*/
    $login_sql         = "select * from tb_users where username = '$username' and password = '$password' and status = '1'"; /*mengecek apakah data pengguna ada ditabel tb_users*/
    $login_get         = $mysqli->query($login_sql); /*mengeksekusi perintah diatas*/
    $login_row         = $login_get->num_rows; /*mengambil jumlah record dari perintah diatas*/
    $return_data     = array(); /*membuat array baru*/
    if($login_row == 1) { /*jika data pengguna ada*/
        $return_data['status'] = 'success'; /*menambahkan nilai array "success" dengan key "status"*/
        $return_data['username'] = $username; /*menambahkan nilai array dari $username dengan key "username"*/
        $_SESSION['user_login'] = $username; /*mendaftarkan session baru dengan nama user_login dan nilai dari $username*/
        if($_POST['remember'] == 1) { /*jika remember me diaktifkan*/
            /*mendaftarkan cookie dengan nama sesuai dengan $cookie_name*/
            setcookie($cookie_name, "cookie_username=".$username."&cookie_password=".$password, $cookie_time, '/');
        }
    }else{ /*jika data pengguna tidak ada*/
        $return_data['status'] = 'failed'; /*menambahkan nilai array "failed" dengan key "status"*/
    }
    echo json_encode($return_data); /*menampilkan array $return_data dan dikonversi menjadi json*/
}else{
    redirect("index.php"); /*jika file ini diakses langsung pada browser maka dialihkan ke index.php*/
}

 

logout.php

FIle ini berfungsi untuk menghapus session login dan cookie(jika ada).

<?php
require 'init.php';

unset($_SESSION['user_login']); /*menghapus session dengan nama user_login*/
if($_COOKIE[$cookie_name]) { /*cek jika cookie dengan nama sesuai dengan variabel $cookie_name ada dibrowser*/
  setcookie($cookie_name, - $cookie_time); /*maka hapus cookie tersebut*/
}
redirect("index.php");

index.php

File ini ditampilkan ketika pengguna sudah login.

<?php
require 'init.php';
$title = "Home";
include "header.php";
?>
Selamat Datang <code><?=$current_user->nama;?></code>
<?php
include "footer.php";
?>

.htaccess

Berikutnya adalah file .htaccess, file ini berfungsi untuk mengatur  konfigurasi server apache dan didalam file ini terdapat fungsi untuk mencegah akses kepada beberapa file yang telah ditentukan.

<FilesMatch "header\.php|footer\.php|init\.php|functions\.php">
Order Allow,Deny
Deny from all
</FilesMatch>

style.css

File yang terakhir adalah file stylesheet yang berfungsi untuk memberikan custom style pada style yang sudah ada. File ini disimpan didalam folder assets/css/.

/*
 * Style.css
 *
 * @author 			: Muhamad Nauval Azhar;
 * @author_uri 	: kodinger.com;
 */

/*general*/
body {
  background-color: #f9f9f9;
}

/*login form*/
.login-form {
  width: 400px;
  margin: 60px auto;
}

@media screen and (max-width: 428px) {
  .login-form {
    width: 95%;
  }
}

/*well*/
.well {
  background-color: #fff;
}

.well h1 {
  font-size: 16px;
  margin: 0;
}

/*loading*/
.loading {
  position: fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  -o-transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  padding: 5px 12px;
  font-size: 40px;
  display: none;
  background-color: #fff;
  box-shadow: 0 1px 2px #ddd;
}

/*navbar*/
.navbar * {
  transition:all .3s;
  -moz-transition:all .3s;
  -o-transition:all .3s;
  -webkit-transition:all .3s;
}

.navbar-white {
  background-color: #fff;
  color: #292929;
  border-bottom: 1px solid #ddd;
}

.navbar-white .nav.navbar-nav li a:hover {
  color: #333;
}

 Notes

Tidak ada penjelasan coding disini, karena semua penjelasan terdapat disetiap baris kode agar lebih mudah dipahami.

Download & Demo

Final Words

Selesai sudah kita membuat sistem login dengan PHP dan database MySQL. Mungkin selanjutnya kita akan membuat form registernya pada projek yang sama. Semoga bermanfaat dan sampai jumpa.

Digital Ocean baner

  • Ali

    Kalau mau bikin halaman profilnya gmna ya gan…

    • tinggal dibuat file baru aja, contoh profile.php, terus didalem file tersebut diisi coding PHP buat nampilin field yang ada ditabel users. Sebagai contoh:

      <?php
      require 'init.php';
      $title = "Profile";
      include "header.php";
      echo "Selamat datang di halaman profile <br>";
      echo "nama: " . $current_user->nama;
      include "footer.php";
      ?>
      
  • Faroz

    yg register blm ya om..??

    • lagi di tulis gan, bakal kita update lagi 😀
      Salam

Copyright © Kodinger 2018. Powered by Multinity

X