Membuat Form Login, Hak Akses dan Logout Menggunakan PHP dan MySQL

Diwa Network
Membuat Form Login | Diwapedia

Untuk menjaga keamanan data pada sebuah website ataupun aplikasi berbasis web, tentu membutuhkan sistem login.

Proses login sendiri sebenarnya tidak hanya digunakan untuk menjaga halaman utama dari disusupi oleh user tak berkepentingan, tapi juga biasa digunakan untuk mengatur hak akses pengelolaan suatu data.

Misalkan sebuah halaman administrasi dari suatu website dapat diakses oleh user Admin, dan Direktur. Dalam kasus ini, kedua user memiliki kondisi logika berikut :

1. User Admin 
  • Dapat melakukan Tambah, Edit dan Delete Data
  • Dapat melihat halaman laporan
2. User Direktur
  • Hanya bisa mengakses halaman laporan

Setelah berhasil login, tentu tidak bisa di tinggalkan begitu saja. Kita memerlukan proses logout untuk membersihkan sesi hak akses yang telah digunakan untuk menjaga keamanan data.

Untuk menyelesaikan permasalahan tersebut, disinilah fungsi dari sistem login. Berikut merupakan tutorial cara Membuat Form Login, Mengatur Hak Akses serta Fungsi Logout dengan menggunakan PHP dan MySQL


Cara Login :
a. Admin
  • Username : admin
  • Password : admin
b. Direktur
  • Username : direktur
  • Password : direktur

1. Xampp & Htdocs


a. Belum ada xampp?  Download xampp versi 5 
Download versi 5. Karena diatas versi 5 harus menggunakan MySQLi, sedangkan kali ini kita akan menggunakan MySQL

b. Jalankan Xampp
Untuk menjalankan xampp, klik Start pada bagian apache dan MySQL seperti gambar dibawah ini.

Xampp | Diwapedia
Penjelasan :
Apache adalah servernya dan MySQL bertindak sebagai Database Management System (DBMS).

c. Membuat Folder Baru di Htdocs
Caranya :
Buka Drive C > Xampp > Htdocs, kemudian buat folder baru dan beri nama login

Tutor Lainnya



2. Membuat Database & Tabel User Login


Untuk membuat database, ikuti langkah-langkah berikut ini :

a. Buka browser, misalkan chrome, firefox, dll.
b. Pada address bar, ketik localhost atau 127.0.0.1 lalu Enter.
c. Di sebelah kiri halaman, kalian akan melihat berbagai menu, dalam hal ini pilih phpMyAdmin

phpMyAdmin Xampp | Diwapedia

d. Salin kode SQL di bawah ini ke dalam text editor, seperti notepad, wordpad atau notepad++. Lalu simpan dengan nama databaselogin.sql . Extensi nya .sql dan bukan .txt


-- phpMyAdmin SQL Dump
-- version 4.0.9
-- http://www.phpmyadmin.net
--
-- Inang: 127.0.0.1
-- Waktu pembuatan: 08 Jan 2019 pada 18.19
-- Versi Server: 5.6.14
-- Versi PHP: 5.5.6

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 */;

--
-- Basis data: `diwapedia`
--
CREATE DATABASE IF NOT EXISTS `diwapedia` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `diwapedia`;

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

--
-- Struktur dari tabel `user`
--

CREATE TABLE IF NOT EXISTS `user` (
  `id_user` int(1) NOT NULL AUTO_INCREMENT,
  `username` varchar(10) NOT NULL,
  `password` varchar(10) NOT NULL,
  `hak_akses` int(1) NOT NULL,
  PRIMARY KEY (`id_user`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data untuk tabel `user`
--

INSERT INTO `user` (`id_user`, `username`, `password`, `hak_akses`) VALUES
(1, 'admin', 'admin', 1),
(2, 'direktur', 'direktur', 0);

/*!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 */;

Penjelasan :
Syntax SQL diatas adalah sebuah script yang digunakan untuk membuat database bernama diwapedia dan tabel dengan nama user. 


e. Kembali ke browser. Setelah masuk ke halaman phpMyAdmin, pada bagian atas terdapat berbagai menu, dalam hal ini pilih Import

f. Import databaselogin.sql dengan cara Pilih file > cari dan pilih databaselogin.sql  > Kirim


3. Membuat Form Login Sederhana (index.php)


a. Kita kembali ke lagi ke folder login yang sebelumnya sudah dibuat di htdocs.
  • Buka Drive C > Xampp > Htdocs > login
b. Buat notepad baru di dalam folder login dengan cara :
  • Klik kanan > New > Text Document
c. Buka Text Document yang baru di buat, kemudian salin dan paste-kan script form login di bawah ini di Text Document


<html>
<head>
<title>Login Admin</title>
</head>

<body>
<br  /><br  />
 <h2 style="text-align:center">Login Administrator | <a href="https://www.diwapedia.me" target="_blank">www.Diwapedia.me</a></h2>
 
 <center>

 <form action="actlogin.php" method="post">
   <table width="40%" height="30%" border="0" style="border:#D40000 1px solid;">
      <tr height"40%">
        <td align="center">
          <input type="text" name="username" placeholder="Username" style="height:40px;" />
        </td>
      </tr>
   
      <tr >
        <td align="center">
          <input type="password" name="password" placeholder="Password" style="height:40px;" />
        </td>
      </tr>
      <tr>
       <td align="center">
           <input type="submit" name="login" value="Login" style="height:40px; width:70px;" />
            </td></tr>
    </table>
 </form>
 <br/>
 <br/>
 <br/>
 <br/>
 <a style="text-decoration:none;color:#D40000; font-weight:bold;" href="https://www.diwapedia.me/2019/01/membuat-form-login-mengatur-hak-akses.html" target="_blank">
 <span style="border:#D40000 2px solid; padding:10px; border-radius:5px;">
 
 &nbsp;&gt;&gt; Halaman Tutorial Membuat Form Login &lt;&lt;&nbsp;
 
 </span>
 </a>
 </center>

</body>
</html>

d. Lakukan Save As, kemudian ubah nama filenya jadi index dan extensinya .php (index.php).
e. Buka browser, pada address bar ketik localhost/login. Nanti akan tampil halaman Form Login.

4. Membuat Script Konfigurasi Penghubung Database


Setelah kita membuat database pada proses diatas sebelumnya, kali ini kita akan membuat sebuah fungsi untuk menghubungkan antara database dengan form login yang kita buat. Caranya, ikuti langkah berikut :

a. Lakukan lagi seperti proses 3 saat membuat file index.php, dan ubah nama file tersebut menjadi config.php.

Atau bisa juga kalian duplikat file index.php, kemudian file php hasil duplikat tadi namanya ubah menjadi config.php

b. Salin dan paste-kan script dibawah ini kedalam file config.php lalu Save


<?php
$db_host = 'localhost';
$db_user = 'root';
$db_password = '';
$db_name = 'diwapedia';


$link=mysql_connect($db_host,$db_user,$db_password) or die('Koneksi ke server database gagal.');
mysql_select_db($db_name,$link) or die('Database tidak ditemukan.');

?>

5. Script PHP Pemroses Login (actlogin.php)


Ini merupakan script PHP utama yang nantinya bertindak untuk melakukan :
  • Mengecek apakah username dan password yang di inputkan di halaman form login sesuai dengan data user yang terdapat di database diwapedia
  • Ketika login sukses, actlogin.php nantinya akan mengatur session hak akses untuk masuk ke halaman selanjutnya.

Caranya, ikuti langkah berikut :

a. Buat file php baru dengan nama file actlogin.php
b. Salin dan paste-kan script dibawah ini kedalam file actlogin.php lalu Save


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

$username=$_POST['username'];
$password=$_POST['password'];

if(isset($_POST['login'])){
 if(empty($username) || empty($password)) 
 {
  exit("<script>window.alert('Masukkan username dan password anda');window.history.back();</script>");
 }
 else
 { 
  $q=mysql_query("SELECT * FROM `user` WHERE username='".$username."' AND password='".$password."'");
  if(mysql_num_rows($q)==0){
   exit("<script>window.alert('Username dan password salah');window.history.back();</script>");
   }
  else
  {
   $h=mysql_fetch_array($q);
   
   $id_user=$h['id_user'];
   $hak_akses=$h['hak_akses'];
 
   $_SESSION['LOGIN_ID']=$id_user;
   $_SESSION['hak_akses']=$hak_akses;
   exit("<script>window.location='home.php';</script>");
  }
 }
}

?>

6. Membuat Halaman Home Sederhana (home.php)

Setelah user berhasil melakukan login dengan username dan password sesuai, selanjutnya sistem akan secara otomatis membuka halaman home.php.

Nah sekarang kita akan membuat sebuah halaman home dimana halaman ini sendiri tampilannya dapat kita sesuaikan berdasarkan siapa user yang melakukan login.

Misalkan disini kita punya dua user, yaitu :

Keinginan tampilan Home :
a. Admin
  • Bisa melihat Button Edit
b. Direktur
  • Button Edit Disembunyikan

Caranya, ikuti langkah berikut :

a. Buat file php baru dengan nama file home.php
b. Salin dan paste-kan script dibawah ini kedalam file home.php lalu Save


<?php
session_start();
// Jika sudah login
if(isset($_SESSION['username']))
{
?>
<html>
<head>
<title>Login Admin</title>
</head>

<body>
<br  /><br  />
 <h2 style="text-align:center">Beranda Administrator | <a href="https://www.diwapedia.me" target="_blank">www.Diwapedia.me</a></h2>

 <center>
 <table width="40%" height="30%" border="0" style="border:#D40000 1px solid;">
      <tr height"40%">
        <td align="center">
  Hore! kamu berhasil login sebagai <b><?php echo $_SESSION['username']; ?></b>
  <br  /><br  />
  <?php
  if ($_SESSION['hak_akses']==1)
  {
  echo"
  Kamu Bisa Lihat Button <button>Edit</button> Kan?
  ";
  }
  else
  {
  echo"
  Kamu bukan admin
  ";
  }
  ?>
  <br/>
  <a href="logout.php"> Keluar</a>
  </td>
   </tr>
 </table>
 </center>
</body>
</html>
<?php
//jika belum login
}
else
{
exit("<script>window.location='index.php';</script>");
}
?>

Keunggulan dari script halaman home yang saya buat adalah :

a. Ketika ada user atau siapapun yang membuka halaman localhost/login/home.php, dan orang tersebut belum melakukan login, maka otomatis akan dilemparkan ke halaman login.

b. Halaman home ini dilengkapi sistem hak akses. Jadi ketika user yang login adalah Direktur, maka dia tidak akan bisa membuka berbagai fungsi yang disiapkan khusus untuk admin.

7. Membuat Proses Logout (logout.php)

Setelah selesai melakukan pengelolaan data dan berniat meninggalkan aplikasi, fungsi logout tentu sangat penting untuk membersihkan session dan menjaga keamanan data.

 Caranya, ikuti langkah berikut :

a. Buat file php baru dengan nama file logout.php
b. Salin dan paste-kan script dibawah ini kedalam file logout.php lalu Save

<?php
session_start();

session_destroy();
exit("<script>window.location='index.php';</script>");

?>

Nah, itulah tutorial lengkap cara membuat Form login, mengatur hak akses dan proses logout menggunakan PHP dan MySQL pada sebuah aplikasi berbasis web.

Jika ada kesulitan, silahkan tinggalkan jejak di kolom komentar.



Tags:

Post a Comment

0 Comments