Cara Membuat Login Menggunakan Ajax, PHP, & MySQL

Artikel ini akan membahas mengenai cara membuat login menggunakan ajax, php dan mysql. Ada beberapa tahapan yang perlu dilakukan untuk membuat sebuah halaman login berfungsi dengan baik. Agar mudah memahami materi yang akan dibahas pada artikel kali ini, sebaiknya baca artikel Cara Membuat Halaman Login Menggunakan Bootstrap dan Cara Menggunakan Ajax Di JQuery terlebih dahulu. Kedua artikel tersebut merupakan pijakan dasar yang dapat digunakan pada artikel ini.

Membuat Database MySQL

Langkah pertama yang perlu kita lakukan untuk membuat sebuah login website adalah membuat database MySQL terlebih dahulu. Desain database yang sudah dirancang terlebih dahulu sebelum membuat script untuk login dapat memudahkan kita untuk menentukan atribut pengguna apa saja yang akan disimpan pada $_SESSION untuk memudahkan manajemen pengguna.

Pada kesempatan kali ini, database yang akan dibuat bernama tutorial dan tabel pengguna yang akan digunakan untuk login diberi nama users.  Sedangkan kolom-kolom yang dibuat pada tabel users adalah sebagai berikut:

• id type int (11) auto increment: berisi id pengguna yang dibuat otomatis oleh sistem MySQL
• email type varchar (50) : berisi email yang digunakan untuk login
• password type varchar (255): berisi password pengguna yang sudah dihash menggunakan fungsi password_hash(); dengan algoritma BCRYPT.
• nama type varchar(50): berisi nama lengkap pengguna
• role type varchar (20): berisi identifier hak akses pengguna seperti superadmin, admin, dll.

Query SQL untuk membuat tabel di atas adalah sebagai berikut:

CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `email` varchar(50) NOT NULL DEFAULT '',
  `password` varchar(255) NOT NULL DEFAULT '',
  `nama` varchar(50) NOT NULL DEFAULT '',
  `role` varchar(20) NOT NULL DEFAULT ''
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

ALTER TABLE `users` ADD PRIMARY KEY (`id`);
ALTER TABLE `users`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
COMMIT;

Untuk menambahkan pengguna, kita bisa menggunakan kode PHP di bawah ini:

$data = array("[email protected]ail.com", password_hash("123456", PASSWORD_BCRYPT), "Ahmad Budairi", "admin");
$query = $db->prepare("insert into users(email, password, nama, role) values(?, ?, ?, ?)");
$query->execute($data)?exit("User Berhasil Ditambahkan"):exit("User gagal ditambahkan");

Membuat Halaman Login

Halaman Login yang akan digunakan pada artikel ini bisa diambil dari artikel sebelumnya yang berjudul Membuat Halaman Login Menggunakan Bootstrap. Halaman login tersebut akan dimodifikasi sedemikian rupa sehingga menjadi halaman login web yang bekerja sebagaimana mestinya.

Mengirim Data Pengguna Melalui Ajax

Sebelum kita dapat mengirim data pengguna yang sudah diinput pada form login melalui ajax,kita perlu mengambil data form tersebut menggunakan JQuery. Untuk Lebih lanjut mengenaihal ini bisa membaca artikel sebelumnya yang berjudul Cara Menggunakan Ajax di JQuery.

Form login yang digunakan pada artikel kali ini tidak memiliki ID maka kita bisa langsung saja mengambil data form tersebut menggunakan selector form seperti berikut $(“form”).serialize(); .

Pertama, kita perlu membuat kode untuk menghadel eventketika tombol login diklik oleh pengguna. Kode tersebut adalah sebagai berikut:

$("button").click(()=>{
    //kode untuklogin di sini
});

Kedua,kita perlu mengambil data dari form dan menyimpannya pada sebuah variabel.Kodenya adalah sebagai berikut:

var data = $("form").serialize();

Ketiga, kita mengirim data pengguna melalui ajax menggunakan kode di bawah ini:

$.ajax({
    url: "proses.php?login",
    method: "post",
    data: data_form,
    success: (respon)=>{
        if(respon=="1"){
            // jika respon yang didapat 1 maka redirect pengguna ke halaman sukses
            window.location.href='proses.php?sukses';
        }else{
            // jika respon bukan 1 maka tampilkan respon dari server
            alert(respon);
        }
    },
    error: (err)=>{
        alert("Kesalahan: "+err.responseText);
    }
});

Memroses Data Pengguna Menggunakan PHP

Data form yang dikirim melalui Ajax perlu diproses PHP untuk mencocokkannya dengan data pengguna yang telah disimpan di dalam database. Jika data tersebut valid maka PHP akan menandaibahwa proses login berhasil.Sebaliknya jika data yang dikirim tidak valid makaPHPakan menandai bahwa proses login gagal.

Buat sebuah file dengan nama proses.php kemudian ambil data-data yang dikirim menggunakan kode  di bawah ini:

$email = isset($_POST['email']) ? $_POST['email'] : ''; //mengambil data email
$password = isset($_POST['password']) ? $_POST['password'] : ''; //mengambil data password

Setelah data-data yang dikirim oleh ajax disimpan padasebuah variabel maka selanjutnya kita perlu memvalidasi data tersebut. Kodevalidasi sederhana bisa dilihat seperti contoh di bawah ini:

if(empty($email))exit("Email harus diisi"); //validasi email tidakboleh kosong
if (!filter_var($email, FILTER_VALIDATE_EMAIL))exit("Format email tidak valid"); //validasi format email yang diinput pengguna
if(empty($_GET['password']))exit("Password tidak boleh kosong"); //validasi password tidak boleh kosong

Setelah data divalidasi, selanjutnya kita cocokkan data tersebut dengan data yang telah disimpan di dalam database. Pada ksempatan kali ini, koneksi dengan MySQL akan menggunakan PDO di bawah ini:

$servername = "localhost";
$username = "root";
$password = "";
$database = "tutorial";

try {
    $db = new PDO("mysql:host=$servername;dbname=$database", $username, $password);
    // menerapkan mode error PDO
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    echo "Koneksigagal: " . $e->getMessage();
}

Sebelum mencocokkan data, kita perlu memulai session PHP terlebih dahulu agar kita bisa menyimpan data pengguna ke dalam session. Kode untuk memulai(start) session adalah

session_status() == PHP_SESSION_NONE ? session_start() : ""; //memulai session PHP

Kode untuk mencocokkan data yang diinput dengan data yang ada di database dalah sebagai berikut:

//mengecek apakah email yang diinput ada di database pengguna
$query = $db->prepare("select id, email, password from users where email=?");
$query->execute(array($email));
if ($query->rowCount()) {
    //jika email tersebut tersedia maka selanjutnya validasi password
    $data = $query->fetchObject(); //mengambil data pengguna dalam bentuk object
    //verifikasi password pengguna
    if (password_verify($password, $data->password)) {
        //login berhasil
        $user_id = $_SESSION['user_id'] = $data->id; //menyimpan id pengguna di session
        exit("1");
    } else {
        exit("Password yang Anda Masukkan Tidak Valid");
    }
} else {
    //jika email yang diinput tidak tersedia di database
    exit("Maaf, email Anda belum terdaftar di sistem kami");
}

Halaman Sukses Login

Jika pengguna telah sukses login maka kita akan mengarahkannya ke halaman khusus. Pada kesempatan kali ini,pengguna akan diarahkan ke halaman proses,php?sukses. Kode yang digunakan pada halaman ini adalah sebagai berikut:

if (isset($_SESSION['user_id'])) {
    $user_id = $_SESSION['user_id'];
    $query = $db->prepare("select * from users where id=?");
    $query->execute(array($user_id));
    if ($query->rowCount()) {
        $data = $query->fetchObject();
        echo "Selamat datang " . $data->nama.", ";
        echo "<a href='proses.php?keluar'>Keluar</a>";
    }
}else{
    //jika session tidak ada maka arahkan pengguna ke halaman login
    header("location: login.php");
}

Logout Pengguna

Kode untuk logout pengguna adalah sebagai berikut:

unset($_SESSION['user_id']);
session_destroy();
header("location: login.php");

Kode Lengkap Untuk Login

• Halaman Login: login.php

  <!DOCTYPE html>
  <html>
  <head>
  	<title>Demo Login Menggunakan Ajax, PHP, MySQL oleh Nusagataes</title>
  	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
  	<link rel="stylesheet" href="style.css">
  	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <!--Coded with love by Mutiullah Samim-->
  <body>
  	<div class="container h-100">
  		<div class="d-flex justify-content-center h-100">
  			<div class="user_card">
  				<div class="d-flex justify-content-center">
  					<div class="brand_logo_container">
  						<img src="https://nusagates.com/wp-content/uploads/2016/11/logo-1-300x300.png" class="brand_logo" alt="Logo">
  					</div>
  				</div>
  				<div class="d-flex justify-content-center form_container">
  					<form>
  						<div class="input-group mb-3">
  							<div class="input-group-append">
  								<span class="input-group-text"><i class="fas fa-user"></i></span>
  							</div>
  							<input type="text" name="email" class="form-control input_user" value="" placeholder="username">
  						</div>
  						<div class="input-group mb-2">
  							<div class="input-group-append">
  								<span class="input-group-text"><i class="fas fa-key"></i></span>
  							</div>
  							<input type="password" name="password" class="form-control input_pass" value="" placeholder="password">
  						</div>
  						<div class="form-group">
  							<div class="custom-control custom-checkbox">
  								<input type="checkbox" class="custom-control-input" id="customControlInline">
  								<label class="custom-control-label" for="customControlInline">Ingat saya</label>
  							</div>
  						</div>
  					</form>
  				</div>
  				<div class="d-flex justify-content-center mt-3 login_container">
  					<button type="button" name="button" class="btn login_btn">Login</button>
  				</div>
  				<div class="mt-4">
  					<div class="d-flex justify-content-center links">
  						Belum punya akun? <a href="#" class="ml-2">Daftar Sekarang</a>
  					</div>
  					<div class="d-flex justify-content-center links">
  						<a href="#">Lupa Password?</a>
  					</div>
  				</div>
  			</div>
  		</div>
  	</div>
  	<script>
  	$(()=>{
  		$("button").click(()=>{
  			var data_form = $("form").serialize();
  			$.ajax({
  				url: "proses.php?login",
  				method: "post",
  				data: data_form,
  				success: (respon)=>{
  					if(respon=="1"){
  						// jika respon yang didapat 1 maka suruh browser untuk reload halaman
  						window.location.href = 'proses.php?sukses';
  					}else{
  						// jika respon bukan 1 maka tampilkan respon dari server
  						alert(respon);
  					}
  				},
  				error: (err)=>{
  					alert("Kesalahan: "+err.responseText);
  				}
  			});
  		});
  	});
  	</script>
  </body>
  </html>

• Halaman Pemroses Data: proses.php

  $servername = "localhost";
  $username = "root";
  $password = "";
  $database = "tutorial";
  
  try {
      $db = new PDO("mysql:host=$servername;dbname=$database", $username, $password);
      // menerapkan mode error PDO
      $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  } catch (PDOException $e) {
      echo "Koneksigagal: " . $e->getMessage();
  }
  session_status() == PHP_SESSION_NONE ? session_start() : ""; //memulai session PHP
  
  if (isset($_GET['login'])) {
      $email = isset($_POST['email']) ? $_POST['email'] : ''; //mengambil data email
      $password = isset($_POST['password']) ? $_POST['password'] : ''; //mengambil data password
  
      if (empty($email)) exit("Email harus diisi"); //validasi email tidakboleh kosong
      if (!filter_var($email, FILTER_VALIDATE_EMAIL)) exit("Format email tidak valid"); //validasi format email yang diinput pengguna
      if (empty($password)) exit("Password tidak boleh kosong"); //validasi password tidak boleh kosong
  
      //mengecek apakah email yang diinput ada di database pengguna
      $query = $db->prepare("select id, email, password from users where email=?");
      $query->execute(array($email));
      if ($query->rowCount()) {
          //jika email tersebut tersedia maka selanjutnya validasi password
          $data = $query->fetchObject(); //mengambil data pengguna dalam bentuk object
          //verifikasi password pengguna
          if (password_verify($password, $data->password)) {
              //login berhasil
              $user_id = $_SESSION['user_id'] = $data->id; //menyimpan id pengguna di session
              exit("1");
          } else {
              exit("Password yang Anda Masukkan Tidak Valid");
          }
      } else {
          //jika email yang diinput tidak tersedia di database
          exit("Maaf, email Anda belum terdaftar di sistem kami");
      }
  }
  
  if (isset($_GET['sukses'])) {
      if (isset($_SESSION['user_id'])) {
          $user_id = $_SESSION['user_id'];
          $query = $db->prepare("select * from users where id=?");
          $query->execute(array($user_id));
          if ($query->rowCount()) {
              $data = $query->fetchObject();
              echo "Selamat datang " . $data->nama.", ";
              echo "<a href='proses.php?keluar'>Keluar</a>";
          }
      }else{
          //jika session tidak ada maka arahkan pengguna ke halaman login
          header("location: login.php");
      }
  }
  
  if(isset($_GET['keluar'])){
      unset($_SESSION['user_id']);
      session_destroy();
      header("location: login.php");
  }

Demo Login

Hasil akhir dari tutorial ini bisa diakses melalui link demo berikut.