Download Source Code Aplikasi

Tutorial Membuat Sistem Login, Logout dan Register Menggunakan Php dan Bootsrap

Friday, July 22nd, 2016 - Tutorial Php

Tutorial yang akan kita bahas pada kesempatan ini adalah untuk anda yang baru mempelajari pembuatan website menggunakan php, bagi anda yang sudah mahir, silahkan lewati artikel ini. Pada kesempatan ini kita akan membahas cara membuat sistem login, logout dan register pada sebuah website. Dari tutorial sederhana ini, anda bisa kembangkan ke tahap yang lebih expert.

Tentu anda tidak asing lagi dengan istilah sistem login pada sebuah website. Salah satu fungsi dari sistem login adalah pembatasan hak akses fiturย  yang terdapat pada sebuah website. Dan sistem login adalah salah satu unsur terpenting dalam sebuah aplikasi berbasis website, karna dia adalah pintu gerbang yang mengatur keluar masuk pengguna. Semoga tutorial ini dapat membantu anda memahami dalam membuat sistem login pada website.

Tutorial Membuat Sistem Login, Logout dan Register Menggunakan Php dan Bootsrap

Proses login sistem sendiri banyak sekali variasinya ada yang dengan meng query kan email dan password langsung ke dalam database statement dll, Kali ini saya menggunakan metode OOP, Biar mudah mengelolanya.

Karena saya menggunakan cdn Bootstrap jadi saya tidak akan membuat folder untuk css, Oiya, untuk struktur file saya hanya akan menggunakan 1 file PHP untuk login, register, logout dengan menggunakan metode $_GET ok lanjut ๐Ÿ™‚

1. Buat database.

Silahkan buat database terserah namanya. Lalu masukan sql dibawah ini untuk membuat table dan collumnya. Kamu bisa menggunakan phpMyAdmin atau dengan CLI Command.

Karena saya menggunakan cdn Bootstrap jadi saya tidak akan membuat folder untuk css, Oiya, untuk struktur file saya hanya akan menggunakan 1 file PHP untuk login, register, logout dengan menggunakan metode $_GET ok lanjut ๐Ÿ™‚

1. Buat database.
Silahkan buat database terserah namanya. Lalu masukan sql dibawah ini untuk membuat table dan collumnya. Kamu bisa menggunakan phpMyAdmin atau dengan CLI Command.

CREATE TABLE IF NOT EXISTS <code>user</code> (
  <code>id</code> int(13) NOT NULL AUTO_INCREMENT,
  <code>username</code> varchar(255) NOT NULL,
  <code>email</code> varchar(255) NOT NULL,
  <code>password</code> varchar(255) NOT NULL,
  <code>tgl_register</code> varchar(255) NOT NULL,
  <code>ip_user</code> varchar(255) NOT NULL,
  PRIMARY KEY (<code>id</code>),
  UNIQUE KEY <code>id</code> (<code>id</code>)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

2. class.php
Buat file class.php yang berisi kode dibawah ini.

<?php class database { var $tanggal_sekarang; var $ip_user; public $mysqli; /* TEMPATKAN DATABASE CREDENTIAL ANDA DISINI SEPERTI NAMA DATABASE USER, PASSWORD, DLL */ function __construct() { $this->mysqli = new mysqli('myhost','myuser','mypass','mydb');
    if (mysqli_connect_error()) {
    die('Connect Error (' . mysqli_connect_errno() . ') '
            . mysqli_connect_error());
    }
  }
  /* membuat fungsi untuk register */
  function register($nama,$email,$password) {
    $user                   = new database(); // Init class
    $user->tanggal_sekarang = date("d-m-Y");
    $user->ip_user          = $_SERVER['REMOTE_ADDR'];
    $stmt                   = "INSERT INTO user(username,email,password,tgl_register,ip_user)
                               VALUES('$nama','$email','$password','$user->tanggal_sekarang','$user->ip_user')"; // Statement untuk memasukan data user ke database
    if($user->mysqli->query($stmt) ==  true) {
      return true;
    } else {
      return false;
    }
  }

  function login($email,$password) {
    $user  = new database();
    $stmt  = "SELECT * FROM user WHERE email = '$email'";
    if($udata = $user->mysqli->query($stmt)) {
      if($udata = mysqli_fetch_array($udata)) {
        if($password == $udata['password']) {
          $_SESSION["userSession"] = $udata['id'];
          echo "<script type='text/javascript'>window.top.location='home.php';</script>";
        } else {
          echo "<script type='text/javascript'>window.top.location='?do=login&r=wp';</script>";
        }
      }
    }
  }
}

Ganti myhost dengan host database anda, myuser dengan user database anda, mypass dengan password database anda, dan mydb dengan nama database anda.

3. index.php
Dalam file PHP Ini semua proses login, register, logout akan dilakukan dengan metode $_GET, Silahkan paste kode dibawah ini.

<?php
session_start();
include ('class.php');
if(isset($_GET['do']) && $_GET['do'] == "register") {
  if(!empty($_SESSION['userSession'])) {
    echo "<script type='text/javascript'>window.top.location='home.php';</script>";
  }
?>
  <!DOCTYPE html>
  <html>
  <head>
  <title>Belajar sistem register, login, logout dengan PHP dan MySQL</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </head>
  <body>

<style>
        body {
        background: url(http://lorempixel.com/1920/1920/city/9/) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        }
        .panel-default {
        opacity: 0.9;
        margin-top:30px;
        }
        .form-group.last { margin-bottom:0px; }
  </style>


<div class="container">

<div class="row">

<div class="col-md-4 col-md-offset-7">

<div class="panel panel-default">

<div class="panel-heading">
       <span class="glyphicon glyphicon-lock"></span> Register
      </div>


<div class="panel-body">
            <?php /* Kode PHP Disini digunakan untuk memproses data yang dikirim user */ if(isset($_POST['btn-register'])) { $nama = trim($_POST['name']); $email = trim($_POST['email']); $pass = md5(md5(trim($_POST['password']))); $user = new database(); $stmt = "SELECT * FROM user WHERE email = '$email'"; if($result = $user->mysqli->query($stmt)) {
                if($result->num_rows > 0 ) {
                  echo "


<div class='alert alert-danger'>Maaf user dengan email <b>$email</b> Sudah terdaftar.</div>


                  ";
                } else {
                  if($user->register($nama,$email,$pass) == true ) {
                    echo "


<div class='alert alert-success'>Selamat!, Akun kamu telah berhasil dibuat :)</div>


                    ";
                  } else {
                    echo "


<div class='alert alert-warning'>Maaf, Terjadi kesalahan, Harap coba lagi :)</div>


                    ";
                  }

                }
              }

            }

            ?>


<form class="form-horizontal" role="form" method="post">

<div class="form-group">
         <label for="inputEmail3" class="col-sm-3 control-label">Username</label>

<div class="col-sm-9">
          <input type="text" class="form-control" id="inputEmail3" placeholder="Username" name="name" required></div>

        </div>


<div class="form-group">
         <label for="inputEmail3" class="col-sm-3 control-label">Email</label>

<div class="col-sm-9">
          <input type="email" class="form-control" id="inputEmail3" placeholder="Email" name="email" required></div>

        </div>


<div class="form-group">
         <label for="inputPassword3" class="col-sm-3 control-label">Password</label>

<div class="col-sm-9">
          <input type="password" class="form-control" id="inputPassword3" placeholder="Password" name="password" required>
          <button class="btn btn-success" type="submit" name="btn-register">REGISTER</button> OR <a class="btn btn-warning" href="?do=login">LOGIN</a>
         </div>

        </div>


<div class="form-group">

<div class="col-sm-offset-3 col-sm-9">

<hr>

                  Copyright &copy; <?php echo date("Y") ?> sourcecodeaplikasi.info
  </body>
  </html>
<?php
} elseif(isset($_GET['do']) && $_GET['do'] == "login") {
  if(!empty($_SESSION['userSession'])) {
    echo "<script type='text/javascript'>window.top.location='home.php';</script>";
  }
?>
  <!DOCTYPE html>
  <html>
  <head>
  <title>Belajar sistem register, login, logout dengan PHP dan MySQL</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </head>
  <body>

<style>
        body {
        background: url(http://lorempixel.com/1920/1920/city/9/) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        }
        .panel-default {
        opacity: 0.9;
        margin-top:30px;
        }
        .form-group.last { margin-bottom:0px; }
  </style>


<div class="container">

<div class="row">

<div class="col-md-4 col-md-offset-7">

<div class="panel panel-default">

<div class="panel-heading">
            <span class="glyphicon glyphicon-lock"></span> Login
          </div>


<div class="panel-body">
            <?php
            /* Kode PHP Disini digunakan untuk memproses data yang dikirim user */
            if(isset($_GET['r']) && $_GET['r'] == "wp") {
              echo "


<div class='alert alert-danger'>Maaf, Password yang anda masukan salah, Silahkan periksa ulang :)</div>


              ";
            } elseif(isset($_GET['r']) && $_GET['r'] = "sl") {
              echo "


<div class='alert alert-success'>Anda berhasil logout :), Selamat!</div>


              ";
            }
            if(isset($_POST['btn-login'])) {
              $user  = new database();
              $email = trim($_POST['email']);
              $pass  = trim(md5(md5($_POST['password'])));
              if($result = $user->mysqli->query("SELECT * FROM user WHERE email = '$email'")) {
                if($result->num_rows > 0 ) {
                 $user->login($email,$pass);
                } else {
                  echo "


<div class='alert alert-danger'>Maaf, User dengan email <b>$email</b> Belum terdaftar,  Silahkan register terlebih dahulu :) </div>


                  ";
                }
              }
            }

            ?>


<form class="form-horizontal" role="form" method="post">

<div class="form-group">
                <label for="inputEmail3" class="col-sm-3 control-label">Email</label>

<div class="col-sm-9">
                  <input type="email" class="form-control" id="inputEmail3" placeholder="Email" name="email" required></div>

              </div>


<div class="form-group">
                <label for="inputPassword3" class="col-sm-3 control-label">Password</label>

<div class="col-sm-9">
                  <input type="password" class="form-control" id="inputPassword3" placeholder="Password" name="password" required>
                  <button class="btn btn-success" type="submit" name="btn-login">LOGIN</button> OR <a class="btn btn-warning" href="?do=register">REGISTER</a>
                </div>

              </div>


<div class="form-group">

<div class="col-sm-offset-3 col-sm-9">

<hr>

                  Copyright &copy; <?php echo date("Y") ?> rizalfakhri

  </body>
  </html>
<?php } elseif(isset($_GET['do']) && $_GET['do'] == "logout") { session_destroy(); header("location: ?do=login&r=sl"); } else { if(empty($_SESSION['userSession'])) { header("location: ?do=login"); } else { header("location: home.php"); } } ?>

4. home.php
Bila user telah berhasil login maka user akan dialihkan ke home.php paste kode dibawah ini.

<?php
session_start(); // Init session
if(empty($_SESSION["userSession"])) {
  // kode yang akan di eksesuki jika tidak ada session atau user belum login
  echo "SILAHKAN LOGIN TERLEBIH DAHULU "; // ini hanya contoh kamu boleh hapus dan mengganti dengan kodemu
} else {
  echo "SUKSES LOGIN :) <a href='//".$_SERVER['SERVER_NAME']."/?do=logout'>Logout</a>"; // ini hanya contoh kamu boleh hapus dan menggantinya dengan kodemu
}

SELESAI….
Mari saya jelaskan cara kerja kode yang baru saja kalian tulis.

class.php
Disini saya menulis function login dan register, guna function tersebut adalah biar memudahkan kita jika mau login atau register tinggal panggil saja functionya sama seperti memanggil built in function pada php misal function echo “”; atau mysqli_query(“”);.

Tapi saya tidak bisa langsung memanggil function tersebut secara langsung, karena function didalam class disebut method jadi saya harus menginisialisasi objectnya terlebih dahulu sebagai contoh saya akan membuat class benda seperti kode dibawah ini.

class benda {
   public $nama = "sapu";
   public $berat = "2 kilo";
   public $jumlah = 1;

   function jumlah_sapu() {
     return $this->jumlah;
   }

   // atau saya membuat method tambah sapu
   
   function tambah_sapu($jumlah) {
     return $this->jumlah + $jumlah;
   } 
}

Jadi jika saya akan memanggil method tambah_sapu() kode yang harus saya tulis adalah seperti dibawah ini.

$sapu = new benda();
echo "jumlah sapu sekarang ".$sapu->tambah_sapu(5);

Kira2 seperti itu lah gan, untuk PHP Class akan saya bahas lain waktu hehehe ๐Ÿ˜€

index.php
dalam file index.php tersebut terdapat kode if(isset($_GET[‘do’]) && $_GET[‘do’] == “login”) { …
Maksud kode tersebut adalah untuk menuju halaman login, Jadi jika kamu mau mengakses login page silahkan buka http://localhost/?do=login begitu juga dengan register tinggal ubah jadi http://localhost/?do=register.

Perlu diingat!
Selalu tambahkan kode dibawah ini di baris paling pertama pada file php yang mewajibkan user untuk login,.

session_start(); // Init session
if(empty($_SESSION["userSession"])) {
  // kode yang akan di eksesuki jika tidak ada session atau user belum login
  
} else {
  // kode yang akan dieksekusi jika berhasil login
}

sumber : blog.rizalfakhri.com

Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.
Download Source Code Aplikasi
Tutorial Membuat Sistem Login, Logout dan Register Menggunakan Php dan Bootsrap | Ahmad Code | 4.5
Leave a Reply