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 agar bisa masuk pada 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.
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, lalu 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.
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 berikut untuk membuat table. Kemudian jalankan pada sql query command.
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;
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
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1">
5. <meta charset="utf-8">
6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
7. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
8. <title>Create Account</title>
9. <link rel="stylesheet" href="libs/css/bootstrap_min.css">
10. <style>
11. body{
12. background:#333;
13. color:#fff;
14. }
15. .wrapper{
16. padding:25px;
17. background:#eee;
18. color:#333;
19. border:solid 1px #fff;
20. border-radius:4px;
21. }
22. #form_input input{
23. display:block;
24. margin:15px 0px;
25. height:44px;
26. }
27. .p_create{
28. font-size:22px;
29. text-align:center;
30. }
31. @media (min-width: 768px) { /* untuk desktop */
32. .wrapper{
33. margin:50px 320px;
34.
35. }
36. }
37. @media (max-width: 767px) {/* untuk mobile */
38. .wrapper{
39. margin:50px 50px;
40. }
41. }
42. </style>
43. </head>
44. <body>
45. <div class="row">
46. <div class="col-md-1">
47. </div>
48. <div class="col-md-10">
49. <div class="wrapper">
50. <p class="p_create">Create Account</p>
51. <form id="form_input" method="post" action="create_account_validation.php">
52. <input type="fullname" name="fullname" id="fullname" placeholder="Full name" class="form-control" required >
53. <input type="email" name="email" id="email" placeholder="Email" class="form-control" required >
54. <input type="password" name="password" id="password" placeholder="Password" class="form-control" required>
55. <input type="submit" id="btn_submit" class="btn btn-lg btn-success form-control" value="Sign Up">
56. </form>
57. </div>
58. </div>
59. <div class="col-md-1">
60. </div>
61. </div>
62. </body>
63. </html>
Berikut halaman create_account_validation.php :
PHP
1. <?php
2. $koneksi=mysqli_connect("localhost","root","","db_perpustakaan") or die('unable to access database');
3. $fullname = addslashes(trim($_POST['fullname']));
4. $email = addslashes(trim($_POST['email']));
5. $password = addslashes(trim($_POST['password']));
6. if(!empty($fullname) || !empty($email) || !empty($password)){
7. /*cek duplikat email*/
8. $cek=mysqli_query($koneksi,"select * from data_member where email='$email' ");
9. $jml=mysqli_num_rows($cek);
10. if($jml>0){
11. echo "<script>alert('Email sudah digunakan, coba yang lain..'); window.location.href='create_account.php';</script>";
12. die();
13. }else{
14. $password_encrypted = password_hash($password, PASSWORD_DEFAULT);
15. $input=mysqli_query($koneksi,"insert into data_member(full_name,email,password) values('$fullname','$email','$password_encrypted') ");
16. if($input){
17. echo "<script>alert('Akun berhasil dibuat..'); window.location.href='login.php';</script>";
18. }else{
19. echo "<script>alert('Akun gagal dibuat..'); window.location.href='login.php';</script>";
20. }
21. }
22. }
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 :
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
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1">
5. <meta charset="utf-8">
6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
7. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
8. <title>Login Form</title>
9. <link rel="stylesheet" href="libs/css/bootstrap_min.css">
10. <style>
11. body{
12. background:#333;
13. color:#fff;
14. }
15. .wrapper{
16. padding:25px;
17. background:#eee;
18. color:#333;
19. border:solid 1px #fff;
20. border-radius:4px;
21. }
22. #form_input input{
23. display:block;
24. margin:15px 0px;
25. height:44px;
26. }
27. .p_log{
28. font-size:22px;
29. }
30. @media (min-width: 768px) { /* untuk desktop */
31. .wrapper{
32. margin:50px 320px;
33.
34. }
35.
36. }
37. @media (max-width: 767px) {/* untuk mobile */
38. .wrapper{
39. margin:50px 50px;
40. }
41. }
42. </style>
43.
44. </head>
45. <body>
46. <div class="row">
47. <div class="col-md-1">
48. </div>
49. <div class="col-md-10">
50. <div class="wrapper">
51. <p class="p_log">Log In</p>
52. <form id="form_input" method="post" action="login_validation.php">
53. <input type="email" name="email" id="email" placeholder="Enter your email" class="form-control" required >
54. <input type="password" name="password" id="password" placeholder="Enter your password" class="form-control" required>
55. <input type="submit" id="btn_submit" class="btn btn-lg btn-primary form-control" value="Login">
56. </form>
57. <p>Don't have an account? <a href="create_account.php">Sign Up now</a></p>
58. </div>
59. </div>
60. <div class="col-md-1">
61. </div>
62. </div>
63. </body>
64. </html>
65.
Berikut halaman login_validation.php :
PHP
1. <?php
2. session_start();
3. $koneksi=mysqli_connect("localhost","root","","db_perpustakaan") or die('unable to access database');
4. $email = addslashes(trim($_POST['email']));
5. $password = addslashes(trim($_POST['password']));
6. if(!empty($email) || !empty($password)){
7. $seq=mysqli_query($koneksi,"select * from data_member where email='$email' ");
8. $data=mysqli_fetch_array($seq);
9. $jml=mysqli_num_rows($seq);
10. if($jml>0){
11. if(password_verify($password, $data['password'])) {
12. $_SESSION['full_name']=$data['full_name'];
13. $_SESSION['user_autentification']="valid";
14. header("location:index.php");
15. }else{
16. echo "<script>alert('Password salah!'); window.location.href='login.php';</script>";
17. }
18. }else{
19. echo "<script>alert('Email salah!'); window.location.href='login.php';</script>";
20. }
21. }
22. ?>
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 :
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
1. <?php
2. session_start();
3. if(empty($_SESSION['user_autentification'])) {
4. header("location:login.php");
5. die();
6. }
7. if($_SESSION['user_autentification'] !="valid") {
8. header("location:login.php");
9. die();
10. }
11. ?>
12. <!DOCTYPE html>
13. <html>
14. <head>
15. <meta name="viewport" content="width=device-width, initial-scale=1">
16. <meta charset="utf-8">
17. <meta http-equiv="X-UA-Compatible" content="IE=edge">
18. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
19. <title>Halaman Utama</title>
20. <link rel="stylesheet" href="libs/css/bootstrap_min.css">
21. <style>
22. body{
23. background:skyblue;
24. color:#222;
25. font-size:20px;
26. }
27. </style>
28. </head>
29. <body>
30. <div class="row">
31. <div class="col-md-1">
32. </div>
33. <div class="col-md-10" style="padding:25px;">
34. <h1>Perpustakaan Online [Home]</h1>
35. <?php
36. echo "<p>Selamat datang <b>".$_SESSION['full_name']."</b></p>";
37. ?>
38. <p>Halaman ini hanya bisa diakses oleh member yang sudah mendaftar dan terverifikasi.</p>
39. </div>
40. </div>
41. <div class="col-md-1">
42. </div>
43. </div>
44. </body>
45. </html>
Saat pengguna mengakses halaman utama (index.php) dengan memasukkan email dan password dengan benar :
Source Code
Demikian cara membuat Form Sign Up Dan Form Login Dengan Enkripsi password_hash dan password_verify, semoga bermanfaat.
0 
745
Belum terdaftar? silahkan 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.Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Polling
Belum terdaftar? silahkan Daftar disini.
Visitor Live Chat
admin
(04 Mar 2021 at 10:52 am)
Silahkan anda memberikan masukkan chat (obrolan) pada fasilitas chat ini. Konten bebas, sopan dan menghargai pendapat orang lain..
_Dicky (06 Mar 2021 at 03:24 pm)
Said : Oops, It's nice content
billy_123 (06 Mar 2021 at 03:26 pm)
Said : Anyone, can you explain about HTMl.. what is it???
_Dicky (06 Mar 2021 at 03:27 pm)
Said : HTML is abbreviation ..
_Dicky (06 Mar 2021 at 03:28 pm)
Said : It's Stand for Hyper text mark up language..
billy_123 (06 Mar 2021 at 03:28 pm)
Said : It's so clear right now..
billy_123 (06 Mar 2021 at 03:29 pm)
Said : and what about CSS
_Dicky (06 Mar 2021 at 03:29 pm)
Said : css for styling sheet guys..
rizky yuda (07 Mar 2021 at 12:30 pm)
Said : Konten cukup menambah wawasan...
suryadi (13 Mar 2021 at 06:46 pm)
Said : Boleh request artikel cara koneksi database msyql ke php..
Nettie Rutherfo (08 Apr 2021 at 12:30 pm)
Said : Auto
Tedy (29 Mei 2021 at 12:09 pm)
Said : nice blog and articles..
Ms. Doyle Mann (02 Jun 2021 at 09:56 pm)
Said : card
flowrie_skylee (12 Jun 2021 at 01:24 pm)
Said : nice content
Nelson Schaefer (12 Jul 2021 at 04:01 pm)
Said : JSON
ooppp (18 Jul 2021 at 11:44 pm)
Said : 000popooppi
Mrs. Jeff Boehm (01 Agt 2021 at 11:01 am)
Said : fuchsia
dharma (07 Sept 2021 at 05:16 pm)
Said : ini support PHP 8?
admin (12 Sept 2021 at 12:50 pm)
Said : #dharma masih dalam ruang lingkup PHP versi 7.
Namun untuk ke depannya akan dipertimbangkan agar support PHP 8, jika perubahan dari PHP 7 ke PHP 8 memang dirasa sangat signifikan.
sadas (13 Jan 2022 at 09:48 am)
Said : Hello
sutiyono (15 Jan 2022 at 09:36 am)
Said : konten cukup menarik.
Fuad (08 Mar 2022 at 05:00 pm)
Said : Maksih bang kontennya, sangat membantu.
admin (10 Mar 2022 at 12:18 pm)
Said : #Fuad Sama sama bang.. terima kasih sudah mampir di blog ini..
Ferdian (09 Mei 2022 at 11:31 pm)
Said : bang bisa tolong buatkan contoh tamplate kirim email verifikasi gak?
admin (10 Mei 2022 at 09:44 pm)
Said : Bang #Ferdian, artikelnya belum dibuat. Tapi ada kesamaan konsep yang dapat ditemukan pada halaman : Membuat Form Newsletters Interaktif Dengan Kode Verifikasi Dikirim Via Email,
Silahkan download source code dan file penunjangnya di sana. dan coba kembangkan untuk mengirimkan verifikasi via email untuk penggunaan yang lainnya.
Previous Page 
HTML
Peringatan!
Apakah ingin menghapus komentar ini?