{{ message }}

Tutorial Membuat Form Login dan Logout Dengan PHP

01/08/2017 | PHP
Tutorial Membuat Form Login dan Logout Dengan PHP

Fitur login dan logout, sangat sering diterapkan pada berbagai aplikasi sebagai pintu masuk aplikasi yg aman. Fitur ini juga berguna untuk website yg bertipe membership. Sebagai bahasa pemrograman server side PHP memiliki modul yg cukup lengkap, diantaranya adalah modul session. Dengan session PHP kita dapat dengan mudah mengelola otentifikasi user untuk membatasi sekuriti dari sebuah aplikasi ataupun web. Dengan otentifikasi inilah kita dapat membuat fitur login dan logout dengan baik.

Dalam experiment kali ini kita akan membuat 2 halaman yaitu;

  1. Halaman Login
    Berisikan Form Login yg jika kita masukan Username dan Password yg sesuai maka sistem akan memberikan otentifikasi agar dapat mengakses halaman utama
  2. Halaman Utama
    Berisikan halaman utama yg nantinya dapat Anda isi dengan berbagai fitur dikemudian hari. Halaman ini akan kita proteksi dari akses pengguna yg tidak melakukan login terlebih dahulu.

Sekarang kita akan membuat form login terlebih dahulu, buat-lah file login PHP sebagai berikut;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Login</title>
  </head>
  <body>
      <form method="POST" action="<?= $_SERVER['PHP_SELF'] ?>">
        <input type="text" name="username" value="" placeholder="Username">
        <input type="password" name="password" value="" placeholder="Password">
        <button type="submit">Login</button>
      </form>
  </body>
</html>

Dari tag form diatas perhatikan 2 property yg ada didalamnya;

  1. method=”POST”
    Property ini diset menjadi POST agar nanti pada saat kita melakukan login username dan password tidak muncul sebagai text di URL web browser kita. Ini penting untuk menjaga keamanan password agar tidak terlihat. Sebagai perbandingan jika Anda set menjadi GET maka username dan password akan tampil di URL web browser.
  2. action=”<?= $_SERVER[‘PHP_SELF’] ?>”
    Ini sama saja untuk membuat form mengirimkan username dan password ke halaman yg sama yaitu login.php jika tombol submit di klik. Mungkin lebih mudahnya “<?= $_SERVER[‘PHP_SELF’] ?>” dapat anda ganti menjadi “login.php” karena itu sama saja.

Selanjutnya adalah membuka session php, modifikasi script tadi menjadi seperti berikut;

<?php
 
session_start();
 
?><!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Login</title>
  </head>
  <body>
...
...

Penting untuk diketahui bahwa untuk membuka session PHP harus dilakukan di paling atas dokumen. Anda tidak boleh membuka session setelah HTML sudah dikirim dari server ke Web Browser. Karena itu perintah session_start() harus dilakukan di baris paling atas. Serta perhatikan juga penutup tag PHP yg menempel dengan tag DOCTYPE (?><!DOCTYPE html>. Ini dilakukan agar tag DOCTYPE tetap menempel ke bagian atas dokumen setelah dirender oleh Web Browser. Karena itu biarkanlah tag ini menempel dan jangan beri jarak/enter dari penutup dan tag DOCTYPE tersebut.

Berikutnya pada bagian body akan kita modifikasi, tujuan kita kali ini adalah membuat prosedur penerima variable username dan password ketika di submit. Lalu melakukan cek username dan password benar atau tidak. Jika benar maka login berhasil jika tidak maka kita akan menampilkan pesan dan link untuk mencoba login lagi;

...
...
  <body>
 
    <?php
    if (isset($_POST['username']) && isset($_POST['password'])) {
      $username = $_POST['username'];
      $password = $_POST['password'];
 
      if ($username == 'web' && $password == 'experiment'):
        $_SESSION['username'] = $username;
        
        ?>
        Login sukses...
        
      <?php else: ?>
        Login gagal, <a href="login.php">coba lagi</a>
      <?php endif;
    }
    else {
    ?>
      <form method="POST" action="<?= $_SERVER['PHP_SELF'] ?>">
        <input type="text" name="username" value="" placeholder="Username">
        <input type="password" name="password" value="" placeholder="Password">
        <button type="submit">Login</button>
      </form>
    <?php } ?>
  </body>
...
...

Berikut ini penjelasan script diatas;

  1. Line 6
    Mengecek variable post untuk username dan password telah terbentuk atau tidak. Karena jika kedua variable tersebut terbentuk maka artinya tombol submit telah ditekan. Jika kedua variable tersebut belum terbentuk maka pada line 20 kita menampilkan form login, agar pengguna dapat melakukan login terlebih dahulu.
  2. Line 10
    Jika username yg diisi pengguna adalah “web” dan passwordnya adalah “experiment”, maka otentifikasi adalah benar. Selanjutnya hal yg paling penting adalah di line 11, yaitu kita meregistrasikan username yg telah login dengan benar tersebut ke sebuah variable session.

Selanjutnya adalah meredirect halaman login ini agar berpindah kehalaman utama secara otomatis ketika proses login valid dan berhasil. Caranya adalah menambah script Javascript sebagai berikut di line 15;

...
...
     if ($username == 'web' && $password == 'experiment'):
        $_SESSION['username'] = $username;
        
        ?>
        Login sukses...
        <script>
        window.location = 'home.php';
        </script>
...
...

Ups, ketika Anda coba jalankan login dan mengisi username dan password dengan benar maka Web Browser akan menuju ke halaman not found 404. Ini dikarenakan kita belum membuat halaman home.php, berikutnya adalah membuat file home.php dengan script sebagai berikut;

<?php
session_start();
 
if (!isset($_SESSION['username'])) {
  header('location:login.php');
  exit;
}
?><!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Home</title>
  </head>
  <body>
    <h1>Selamat Datang</h1>
    Silakan klik <a href="logout.php">logout</a> untuk keluar.
  </body>
</html>

Berikut ini penjelasan script home.php;

  1. Line 2
    Membuka session, hal ini wajib dilakukan agar Anda dapet mengakses variable-variable session yg telah diregistrasikan di login.php. Tetap dengan aturan yg sama, fungsi session_start() harus dilakukan di baris paling atas, yaitu sebelum HTML dirender.
  2. Line 4
    Jika variable session username belum terbentuk, maka artinya pengguna belum melakukan login atau pengguna belum login dengan benar. Ini karena jika pengguna telah login dengan benar maka berdasarkan script login.php tadi, kita sudah meregistrasikan variable session usernamennya. Maka dari itu jika variable session username ini tidak ada maka pengguna tidak memiliki hak akses pada halaman ini. Maka pada line 5 kita mengarahkan pengguna tersebut keluar dari halaman utama yaitu menuju halaman login, agar pengguna tersebut melakukan login terlebih dahulu.
  3. Line 16
    Berisi link untuk logout, yaitu mengarahkan ke file logout.php

Terakhir kita perlu membuat file logout.php, script logout ini dibuat untuk menghapus semua variable session yg sudah terbentuk sebelumnya. Dengan kata lain pengguna tidak dapat masuk ke halaman utama lagi sebelum dia melakukan login kembali;

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

Fungsi session_destroy() adalah untuk menghapus semua variable session yg telah diregistrasi sebelumnya. Namun sebelum melakukan session_destroy() maka kita diwajibkan melakukan session_start() dulu sebelumnya. Setelah session telah terhapus semua, maka kita arahkan halaman untuk kembali ke Form Login.

Untuk Form Login yg data usernya tersimpan didalam table database. Sebenarnya Anda hanya perlu mengedit script login ini. Yaitu pada saat bagian pengecekan username dan password di script login.php yg saya tandai di source code lengkap di bawah.

Source Code Lengkap

file login.php;

<?php
 
session_start();
 
?><!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Login</title>
  </head>
  <body>
 
    <?php
    if (isset($_POST['username']) && isset($_POST['password'])) {
      $username = $_POST['username'];
      $password = $_POST['password'];
 
      // Cek user login
      // Edit dibagian ini jika user Anda berasal dari database
 
      if ($username == 'web' && $password == 'experiment'):
        $_SESSION['username'] = $username;
        
        ?>
        Login sukses...
        <script>
        window.location = 'home.php';
        </script>
      <?php else: ?>
        Login gagal, <a href="login.php">coba lagi</a>
      <?php endif;
    }
    else {
    ?>
      <form method="POST" action="<?= $_SERVER['PHP_SELF'] ?>">
        <input type="text" name="username" value="" placeholder="Username">
        <input type="password" name="password" value="" placeholder="Password">
        <button type="submit">Login</button>
      </form>
    <?php } ?>
  </body>
</html>

file home.php;

<?php
session_start();
 
if (!isset($_SESSION['username'])) {
  header('location:login.php');
  exit;
}
?><!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Home</title>
  </head>
  <body>
    <h1>Selamat Datang</h1>
    Silakan klik <a href="logout.php">logout</a> untuk keluar.
  </body>
</html>

file logout.php;

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