Beranda
»
Artikel
»
Membuat Form Sign Up Dan Form Login Dengan Enkripsi password_hash dan password_verify

Membuat Form Sign Up Dan Form Login Dengan Enkripsi password_hash dan password_verify

Halaman web yang bersifat pribadi dan rahasia biasanya hanya bisa diakses oleh orang tertentu dan tidak bisa diakses oleh sembarang orang yang tidak memiliki otoritas. Halaman web ini merupakan halaman dimana pengguna harus mengisi formulir login khusus dengan kode akses tertentu. Kode akses diberikan oleh pemegang otoritas halaman web kepada para penggunanya. Pengguna yang sudah memiliki kode akses dan otoritas tertentu dapat mengakses dengan leluasa seperti mengisi, mengubah ataupun sekedar mendapatkan informasi yang disajikan di dalam halaman tersebut.

Website yang memiliki pengguna yang sudah mendaftar sebagai member akan memberikan formulir khusus untuk masuk ke dalam sistem mereka. Pada website besar seperti google, facebook, twitter dan lainnya, pengguna harus mengisi formulir login terlebih dahulu untuk masuk ke dalam sistem mereka.

Formulir Log In diberikan kepada pengguna yang sudah mendaftar. Namun bagi yang belum mendaftar, harus melakukan pendaftaran terlebih dahulu dengan cara mengisi data pada formulir Sign Up.

Enkripsi Data Sensitif

Data yang dimasukkan merupakan informasi pengguna yang bersifat pribadi serta tidak boleh diketahui orang lain. Di antara data-data pengguna, terdapat data yang bersifat sangat sensitif yaitu password. Pemilik sistem bahkan kadang tidak tahu isi dari password tersebut seperti apa. Dikarenakan sistemnya sudah merancang bahwa password tidak boleh untuk diketahui isinya dalam bentuk normal plain text. Informasi password cukup disimpan dalam bentuk teks yang tersandikan (terenkripsi) dan tidak dapat didekripsi

Hal ini dimaksudkan untuk menjaga keamanan data pengguna. Jika sewaktu-waktu terjadi pencurian data, maka data password dari pengguna tidak akan bisa terbaca oleh pihak yang tidak bertanggungjawab. Data-data rahasia di atas tersebut termasuk password, lallu dimasukkan ke dalam database untuk disimpan.

Sistem enkripsi data password pengguna dapat menggunakan fungsi password_hash(). Fungsi ini merupakan fungsi built-in PHP yang akan melakukan generate teks normal ke dalam bentuk hash encryption. Hashing Encryption merupakan enkripsi satu arah (one-way hashing). Hashing Encryption akan menjadikan password yang sudah dienkript tidak akan bisa lagi didekript atau dikembalikan ke semula.

Menyiapkan Database Penyimpanan Data

Hal pertama yang perlu dipersiapkan adalah database. Database digunakan untuk menyimpan data pengguna yang dimasukkan lewat formulir Sign Up. Silahkan buat database (misalnya) dengan nama db_perpustakaan :

Kemudian membuat table dengan nama data_member :

Agar lebih mudah, silahkan salin kode Command SQL berikut untuk membuat table. Kemudian jalankan pada SQL query command.

MYSQL

CREATE TABLE `data_member` (
  `id_member` int(12) NOT NULL AUTO_INCREMENT,
  `fullname` varchar(360) NOT NULL,
  `email` varchar(128) NOT NULL,
  `password` varchar(128) NOT NULL,
  PRIMARY KEY (`id_member`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1;

Membuat Formulir Sign Up (Create Account)

Sebelum pengguna dihadapkan dengan formulir login untuk masuk ke halaman utama, formulir create account perlu dibuat terlebih dahulu. Formulir create account digunakan sebagai entry data dari pengguna untuk disimpan kedalam database.

Diperlukan dua buah halaman pada proses memasukkan data yaitu halaman create_account.php dengan tiga buah bilah input data (full_name, email, password). Kemudian halaman create_account_validation.php sebagai tempat mencocokan data dan menyimpan data.

Berikut halaman create_account.php :

PHP

<!DOCTYPE html>
<html>
<head>
<title>Create Account</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="style.css" rel="stylesheet">
</head>
<body>
   <div class="row">
     <div class="col-md-1"></div>
     <div class="col-md-10">
        <div class="wrapper">
        <p class="p_create">Create Account</p>
        <form id="form_input" method="post" action="create_account_validation.php">
        <input type="fullname" name="fullname" id="fullname" placeholder="Full name" class="form-control" required >
        <input type="email" name="email" id="email" placeholder="Email" class="form-control" required >
        <input type="password" name="password" id="password" placeholder="Password" class="form-control" required>        
        <input type="submit" id="btn_submit" class="btn btn-lg btn-success form-control" value="Sign Up">
        </form>
        </div>
     </div>
     <div class="col-md-1"></div>
   </div>
</body>
</html>

Penataan element HTML-nya menggunakan style.css :

CSS

body{
   background: #333;
   color: #fff;
}
.wrapper{
   padding: 25px;
   background: #eee;
   color: #333;
   border: solid 1px #fff;
   border-radius: 4px;
}
#form_input input{
   display: block;
   margin: 15px 0px;
   height: 44px;
}
.p_create{
   font-size: 22px;
   text-align: center;
}
@media (min-width: 768px) { /* untuk desktop */
   .wrapper{
     margin: 50px 320px;
   }
}
@media (max-width: 767px) {/* untuk mobile */
   .wrapper{
     margin: 50px 50px;
   }
}

Berikut halaman create_account_validation.php :

PHP

<?php
$koneksi=mysqli_connect("localhost","root","","db_perpustakaan") or die();
$fullname = addslashes(trim($_POST['fullname']));
$email = addslashes(trim($_POST['email']));
$password = addslashes(trim($_POST['password']));
if(!empty($fullname) || !empty($email) || !empty($password)){
   /*cek duplikat email*/
   $cek=mysqli_query($koneksi,"select * from  data_member where email='$email' ");
   $jml=mysqli_num_rows($cek);
   if($jml>0){
     echo "<script>alert('Email sudah digunakan, coba yang lain..'); window.location.href='create_account.php';</script>";
     die();
   }else{
     $password_encrypted = password_hash($password, PASSWORD_DEFAULT);
     $input=mysqli_query($koneksi,"insert into data_member(full_name,email,password) values('$fullname','$email','$password_encrypted') ");
     if($input){
        echo "<script>alert('Akun berhasil dibuat..'); window.location.href='login.php';</script>";
     }else{
        echo "<script>alert('Akun gagal dibuat..'); window.location.href='login.php';</script>";
     }
   }   
}
?>

Penjelasan :
Pada create_account_validation.php, Semua data yang dimasukkan oleh pengguna seperti fullname, email dan password diterima oleh halaman ini dengan metode post. Jika ketiga variable tersebut tidak dalam kondisi kosong, dilakukan pencocokan data duplikasi email. Sebelum disimpan ke dalam database, enkripsi password dilakukan dengan melalui fungsi password_hash() (baris ke-14). Fungsi ini akan menghasilkan nilai password dalam bentuk yang sudah tersandikan (terenkripsi).

Saat halaman create_account.php diakses akan menghasilkan :

Saat pengguna memasukkan data :

Saat data pengguna berhasil disimpan :

Membuat Formulir Log In

Formulir login digunakan untuk melakukan menyaring pengguna yang akan masuk halaman web utama. Disini kita memerlukan dua buah halaman yaitu login.php sebagai tempat pengguna memasukan data seperti email dan password. Kemudian halaman login_validation.php yang digunakan untuk melakukan pencocokan data.

Berikut halaman login.php :

PHP

<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="libs/css/bootstrap_min.css">
</head>
<body>
   <div class="row">
     <div class="col-md-1"></div>
     <div class="col-md-10">
        <div class="wrapper">
        <p class="p_log">Log In</p>
        <form id="form_input" method="post" action="login_validation.php">
        <input type="email" name="email" id="email" placeholder="Enter your email" class="form-control" required >
        <input type="password" name="password" id="password" placeholder="Enter your password" class="form-control" required>        
        <input type="submit" id="btn_submit" class="btn btn-lg btn-primary form-control" value="Login">
        </form>
        <p>Don't have an account? <a href="create_account.php">Sign Up now</a></p>
        </div>
     </div>
     <div class="col-md-1"></div>
   </div>
</body>
</html>

Penataan element HTML-nya menggunakan style.css :

CSS

body{
   background: #333;
   color: #fff;
}
.wrapper{
   padding: 25px;
   background: #eee;
   color: #333;
   border: solid 1px #fff;
   border-radius: 4px;
}
#form_input input{
   display: block;
   margin: 15px 0px;
   height: 44px;
}
.p_log{
   font-size: 22px;
}
@media (min-width: 768px) { /* untuk desktop */
   .wrapper{
   margin: 50px 320px;
   }
}
@media (max-width: 767px) {/* untuk mobile */
   .wrapper{
     margin: 50px 50px;
   }
}

Berikut halaman login_validation.php :

PHP

<?php
session_start();
$koneksi=mysqli_connect("localhost","root","","db_perpustakaan") or die();
$email = addslashes(trim($_POST['email']));
$password = addslashes(trim($_POST['password']));
if(!empty($email) || !empty($password)){
   $seq=mysqli_query($koneksi,"select * from data_member where email='$email' ");
   $data=mysqli_fetch_array($seq);
   $jml=mysqli_num_rows($seq);
   if($jml>0){
     if(password_verify($password, $data['password'])) {
        $_SESSION['full_name']=$data['full_name'];
        $_SESSION['user_autentification']="valid";
        header("location:index.php");
     }else{
        echo "<script>alert('Password salah!'); window.location.href='login.php';</script>";
     }
   }else{
     echo "<script>alert('Email salah!'); window.location.href='login.php';</script>";
   }   
}
?>

Penjelasan :
Pada login_validation.php, Data yang dikirimkan oleh pengguna yaitu email dan password diterima dengan metoda post. Jika variable email dan password tidak dalam keadaan kosong, maka proses pencocokan data akan dilakukan.

Proses pencocokan data dilakukan secara dua lapis, yang pertama dengan mencocokan keberadaan alamat email pengguna. Jika emailnya ditemukan, dilanjutkan dengan mencocokan nilai hash enkripsi pada password. Jika nilai hash-nya adalah match (boolean true), artinya passwordnya sesuai dengan password yang disimpan di dalam database.

Kemudian $_SESSION['user_autentification'] dengan nilai "valid", nantinya digunakan pada halaman utama. Sesi tersebut dipakai sebagai parameter nilai otoritas pengaksesan halaman utama.

Saat halaman login.php diakses akan menghasilkan :

Saat pengguna memasukkan data :

Membuat Halaman Utama

Halaman utama digunakan sebagai halaman tujuan. Halaman ini biasanya dapat diakses setelah pengguna (member) memasukkan data email dan password secara benar pada formulir login. Jika pengguna mengakses halaman utama melalui URL Address secara langsung, maka halaman utama akan melakukan redirect ke halaman login.php. Proses redirect dilakukan dengan mencocokan nilai sesi $_SESSION['user_autentification'] dengan nilai "valid".

Berikut halaman utama (index.php) :

PHP

<?php
session_start();
if(empty($_SESSION['user_autentification'])) {
   header("location:login.php");
   die();
}
if($_SESSION['user_autentification'] !="valid") {
   header("location:login.php");
   die();
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Halaman Utama</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
body{
   background: skyblue;
   color: #222;
   font-size: 20px;
}
</style>
</head>
<body>
   <div class="row">
   <div class="col-md-1"></div>
   <div class="col-md-10" style="padding:25px;">
     <h1>Perpustakaan Online [Home]</h1>
     <p>Selamat datang <b> <?= $_SESSION['full_name']; ?> </b></p>
     <p>Halaman ini hanya bisa diakses oleh member yang sudah mendaftar dan terverifikasi.</p>
     </div>
   <div class="col-md-1"></div>
   </div>
</body>
</html>

Saat pengguna mengakses halaman utama (index.php) dengan memasukkan email dan password dengan benar :

Source Code

Silahkan download source code beserta file pendukung pada tutorial ini.

Demikian cara membuat Form Sign Up Dan Form Login Dengan Enkripsi password_hash dan password_verify, semoga bermanfaat.

18 Sept 2022 0 4.544

Kategori : html - css - php - mysql - security

facebook twitter whatapp linkedin pinterest

Halaman Terkait

	Mengirim Dan Menangkap Data Input Type Password Pada Server artikel
	Cara Enkripsi Password Dengan password_hash dan password_verify Pada PHP artikel

Tinggalkan Balasan

Formulir ini hanya bagi member yang sudah terdaftar. Silahkan disini.

Belum terdaftar? silahkan queue Daftar disini.

Mengirim Komentar

Setiap pengunjung situs ini dapat memposting komentar disini, namun tidak semua komentar dapat ditampilkan. Gunakan kalimat baku bahasa Indonesia yang mudah dimengerti. Dilarang memposting kalimat yang berisi ujaran kebencian, SARA, pornografi, perjudian dan spam. Komentar harus sesuai dengan topik. Untuk bahasan lainnya yang lebih mendalam dapat menggunakan sarana forum. Anda dapat mengirimkan suatu pertanyaan dan member lainnya akan menjawab pertanyaan Anda.

Peringatan!

Apakah ingin menghapus komentar ini?

	Daftar Kode ASCII 32.731
	Membuat Menu Navigasi Horisontal dan Vertikal Pada HTML 28.111
	Membuat Database Dan Tabel Melalui CMD Pada Xampp Server 24.947
	Mendownload File Dengan Menggunakan PHP 20.553
	Menggunakan Barcode Scanner Pada Aplikasi Berbasis Web 10.319
	Membuat Barcode Generator Dengan PHP 10.256
	Cara Mudah Membuat QR Code Generator Dengan PHP 10.214
	Perbedaan Antara fungsi rand() dan mt_rand() Pada PHP 10.010
	Validasi Form Menggunakan Plugin Validation Jquery 9.842
	Merubah Warna Latar Text Editor Notepad++ 9.199

Visitor Name
Email