Cara Membangun Sistem Login dengan Fitur Lengkap

Indonesian (Bahasa Indonesia) translation by Diangr (you can also view the original English article)

Dalam tutorial ini saya akan menunjukkan kepada anda bagaimana membuat sistem login sederhana yang terdiri dari halaman login, halaman register, halaman kata sandi yang terlupakan, aktivasi email, halaman logout dan akhirnya halaman online pengguna. Saya membuat tutorial ini untuk menargetkan pengembang baru-ke-PHP, karena pada saat saya mulai saya melihat kurangnya kuantitas sistem login dasar. Oleh karena itu, saya memutuskan untuk membuat sendiri memberikan saran berkualitas tinggi tentang cara membuat sistem masuk pertama anda dengan skrip pengguna online!

1. Membuat Stylesheet Dasar

Kami akan membuat stylesheet CSS yang sangat dasar hanya untuk menambahkan sedikit desain dan merapikan cara sistem login ini terlihat. Jadi, mulailah dengan membuka editor teks anda dan kami dapat mulai membuat styelsheet kami.

1	body { font-family: arial; font-size: 10pt; } table { font-size: 10pt; margin: 0 auto; } #border { border: 2px solid #999; background: #CCC;
2	padding: 15px; margin: 0 auto; width: 300px; }

Simpan file ini sebagai style.css sehingga kami dapat menautkannya kembali kapan pun dibutuhkan. Di sana kami memiliki stylesheet sederhana kami! Sekarang kita bisa mulai membuat halaman-halaman kita tanpa harus terlalu khawatir untuk membuatnya terlihat bagus.

2. Membuat Halaman Login

Oke jadi kami menetapkan stylesheet, sekarang saatnya menampilkan hal-hal di halaman kami. Buka file baru di editor teks anda, ini akan menjadi halaman login.php kami!

 <link rel="stylesheet" type="text/css" href="tut_files/style.css"> 
 
 <form action="login.php" method="post"> <div id="border"> <table border="0" cellpadding="2" cellspacing="0"> <tbody><tr> <td>Username:</td> <td><input name="username" type="text"></td> </tr> 
<tr> <td>Password:</td> <td><input name="password" type="password"></td> </tr> <tr> <td colspan="2" align="center"><input name="submit" value="Login" type="submit"></td> </tr> <tr> <td 
colspan="2" align="center"><a href="register.php">Register</a> | <a href="forgot.php">Forgot Pass</a></td> </tr> </tbody></table> </div> </form>

Oke ini adalah apa file login.php kami akan terlihat seperti sebelum kami membuat PHP kami membuat fungsi form login dengan benar. Saat ini anda akan menyadari bahwa itu tidak berhasil. Ini karena kami belum memberi tahu halaman apa yang harus dilakukan jika formulir dikirim.

Perencanaan

Sekarang mari kita lakukan perencanaan sebelum kita masuk ke PHP. Kita perlu bertanya pada diri sendiri "Apa halaman yang akan diperiksa ketika formulir dikirimkan?". Untuk halaman login di sini adalah daftar apa yang akan kami periksa -

Bahwa baik kotak nama pengguna dan kata sandi telah diisi
Bahwa nama pengguna yang disediakan ada dalam database kami
Bahwa jika nama pengguna ada di basis data kami, kata sandi cocok dengan nama pengguna
Akhirnya, bahwa pengguna telah mengaktifkan akun mereka

Jika PHP dapat menjawab ya untuk keempat poin tersebut, maka masukkan pengguna. Sekarang di keempat titik tersebut anda akan melihat ada basis data yang disebutkan. Kami akan menggunakan database MySQL untuk menyimpan semua informasi tentang masing-masing pengguna kami. Jadi sebelum kita memulai pada PHP kita perlu membuat database ini. Pada tahap ini diperlukan sedikit lebih banyak perencanaan. Kami perlu memutuskan informasi apa yang perlu kami simpan tentang pengguna, jenis data apa yang kami simpan, apakah kami memerlukan nilai default, dll. Berikut adalah rencana saya di bawah -

Kita perlu menyimpan nama pengguna untuk pengguna yang akan menjadi varchar
Kami membutuhkan kata sandi yang juga akan menjadi varchar
Kami akan membutuhkan email untuk fungsi aktivasi email kami ini bisa juga varchar
Pengumuman lapangan adalah jika akun telah diaktifkan atau tidak, ini akan menjadi bilangan bulat
Bidang yang memberikan informasi tentang apakah pengguna online atau tidak, ini akan menjadi bilangan bulat
Akhirnya, bidang yang memberi kami waktu bagi pengguna untuk mendaftar, ini juga merupakan bilangan bulat

Membangun Database

Sekarang dari sini kita bisa melihat dengan tepat bagaimana membangun tabel kita di database kita. Pertama buat database yang disebut loginTut. Kemudian dalam database ini kami ingin menjalankan SQL yang telah saya berikan di bawah -

Catatan: Semua tabel berisi kunci primer. Ini adalah pengidentifikasi unik untuk setiap baris dalam tabel!

CREATE TABLE IF NOT EXISTS `users` ( `id` int(11) NOT NULL auto_increment, `username` varchar(32) NOT NULL, `password` varchar(32) NOT NULL,

`online` int(20) NOT NULL default ‘0', `email` varchar(100) NOT NULL, `active` int(1) NOT NULL default ‘0', `rtime` int(20) NOT NULL default ‘0', PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT

CHARSET=utf8;

Sekarang kami memiliki meja untuk menyimpan semua informasi yang kami butuhkan tentang pengguna kami, mari tambahkan pengguna untuk tujuan pengujian. Untuk melakukan ini jalankan SQL yang disediakan di bawah -

1	INSERT INTO `users` (`id`, `username`, `password`, `online`, `email`, `active`, `rtime`) VALUES (1, ‘testing’, ‘testing’, 0,
2	‘fake@noemail.co.uk’, 0, 0);

Jadi sekarang kami memiliki satu pengguna dengan pengujian nama pengguna, pengujian kata sandi dan email fake@noemail.co.uk. Sekarang kita bisa masuk ke PHP dan membuat form login bekerja!

Menambahkan PHP

Pertama-tama, kita harus berpikir tentang keamanan dan seberapa aman formulir login ini nantinya. Untuk membantu mencegah SQL Injection yang merupakan bentuk peretasan basis data yang sangat umum, kami akan membuat fungsi yang akan melindungi semua string yang disimpan dalam database. Ini kita akan memasukkan file eksternal yang disebut functions.php. Inilah sumbernya -

 <?php 
 
function protect($string){ $string = trim(strip_tags(addslashes($string))); return $string; } 
 
?>

Fungsi ini akan memangkas string kita (memotong setiap ruang putih di awal atau akhir string), menghapus tag (menghapus semua html dan tag PHP dalam string), dan kemudian menambahkan garis miring ke string yang mengeluarkan tanda ucapan (') dan tanda kutip (").

Kembali ke login.php

Sekarang kami memiliki tempat untuk menyimpan dan memeriksa informasi pengguna dari, suatu fungsi untuk melindungi string yang diteruskan ke database, dan tata letak yang tampak bagus untuk halaman masuk kami! Di bawah ini anda dapat melihat kode komentar untuk file login.php kami dengan PHP baru yang ditambahkan

 <link rel="stylesheet" type="text/css" href="tut_files/style.css"> 
 
 You need to fill in a <strong>Username</strong> and a <strong>Password</strong>!"; }else{ //if the were continue checking 
 
 //select all rows from the table where the username matches the one entered by the user $res = mysql_query("SELECT * FROM `users` WHERE `username` = '".$username."'"); $num = 
mysql_num_rows($res); 
 
 //check if there was not a match if($num == 0){ //if not display an error message echo "<center>The <strong>Username</strong> you supplied does not exist!</center>"; }else{ //if there was a match 
continue checking 
 
 //select all rows where the username and password match the ones submitted by the user $res = mysql_query("SELECT * FROM `users` WHERE `username` = '".$username."' AND `password` = 
'".$password."'"); $num = mysql_num_rows($res); 
 
 //check if there was not a match if($num == 0){ //if not display error message echo "<center>The <strong>Password</strong> you supplied does not match the one for that username!</center>"; }else{ //if 
there was continue checking 
 
 //split all fields fom the correct row into an associative array $row = mysql_fetch_assoc($res); 
 
 //check to see if the user has not activated their account yet if($row['active'] != 1){ //if not display error message echo "<center>You have not yet <strong>Activated</strong> your account!</center>"; 
}else{ //if they have log them in 
 
 //set the login session storing there id - we use this to see if they are logged in or not $_SESSION['uid'] = $row['id']; //show message echo "<center>You have successfully logged 
in!</center>"; 
 
 //update the online field to 50 seconds into the future $time = date('U')+50; mysql_query("UPDATE `users` SET `online` = '".$time."' WHERE `id` = '".$_SESSION['uid']."'"); 
 
 //redirect them to the usersonline page header('Location: usersOnline.php'); } } } } } 
 
 ?> <form action="login.php" method="post"> <div id="border"> <table border="0" cellpadding="2" cellspacing="0"> <tbody><tr> <td>Username:</td> <td><input name="username" type="text"></td> 
</tr> <tr> <td>Password:</td> <td><input name="password" type="password"></td> </tr> <tr> <td colspan="2" align="center"><input name="submit" value="Login" type="submit"></td> </tr> <tr> <td 
colspan="2" align="center"><a href="register.php">Register</a> | <a href="forgot.php">Forgot Pass</a></td> </tr> </tbody></table> </div> </form>

Sebagian besar hal ini dijelaskan oleh komentar tetapi satu bagian yang tidak saya jelaskan adalah bidang online. Ketika Anda berhasil masuk, kami memperbarui bidang online menjadi 50 detik lebih cepat dari sekarang. Fungsi tanggal ('U') memberi kita jumlah detik sejak 1 Januari 1970 00:00:00 GMT (Unix epoch). Ini berarti bahwa tanggal ('U') tidak akan pernah menjadi lebih kecil, nilainya akan selalu meningkat. Jika kita mengatur bidang online menjadi 50 detik di depan sekarang maka ketika halaman Users Online dimuat kita dapat memeriksa untuk menemukan semua pengguna di mana nilai online lebih dari waktu ketika halaman dimuat, jika ini kasusnya kemudian ditampilkan masing-masing nama mereka.

Sekarang jangan ragu untuk menguji halaman login anda. Pastikan bahwa semua pemeriksaan dilakukan dengan benar dan setelah berhasil masuk, anda dialihkan ke halaman online pengguna yang tidak ada. Anda juga dapat memeriksa untuk melihat apakah telah berhasil memperbarui bidang online dengan memeriksa tabel pengguna anda!

3. Membuat Halaman Daftar

Apa gunanya halaman login tanpa halaman daftar? Tidak banyak sama sekali jadi saya pikir itu akan menjadi langkah selanjutnya bagi kita untuk mengambil. Membuat halaman register akan sangat mirip dengan membuat halaman login kami. Kita perlu melakukan beberapa pemeriksaan dasar untuk melihat apakah nama pengguna yang diinginkan sudah diambil, tetapi tidak ada yang baru terjadi di sana. Di bawah ini anda dapat melihat kode daftar komentar yang dikomentari -

 <link rel="stylesheet" type="text/css" href="tut_files/style.css"> 
 
 You need to fill in all of the required filds!"; }else{ //if all were filled in continue checking 
 
 //Check if the wanted username is more than 32 or less than 3 charcters long if(strlen($username) > 32 || strlen($username) < 3){ //if it is display error message echo "<center>Your <strong>Username</strong> must be between 3 and 32 characters long!</center>"; }else{ //if not continue checking 
 
 //select all the rows from out users table where the posted username matches the username stored $res = mysql_query("SELECT * FROM `users` WHERE `username` = '".$username."'"); $num = 
mysql_num_rows($res); 
 
 //check if theres a match if($num == 1){ //if yes the username is taken so display error message echo "<center>The <strong>Username</strong> you have chosen is already taken!</center>"; }else{ 
//otherwise continue checking 
 
 //check if the password is less than 5 or more than 32 characters long if(strlen($password) < 5 || strlen($password) > 32){ //if it is display error message echo "<center>Your <strong>Password</strong> must be between 5 and 32 characters long!</center>"; }else{ //else continue checking 
 
 //check if the password and confirm password match if($password != $passconf){ //if not display error message echo "<center>The <strong>Password</strong> you supplied did not match the confirmation password!</center>"; }else{ //otherwise continue checking 
 
 //Set the format we want to check out email address against $checkemail = "/^[a-z0-9]+([_\\.-][a-z0-9]+)*@([a-z0-9]+([\.-][a-z0-9]+)*)+\\.[a-z]{2,}$/i"; 
 
 //check if the formats match if(!preg_match($checkemail, $email)){ //if not display error message echo "<center>The <strong>E-mail</strong> is not valid, must be name@server.tld!</center>"; }else{ //if they do, continue checking 
 
 //select all rows from our users table where the emails match $res1 = mysql_query("SELECT * FROM `users` WHERE `email` = '".$email."'"); $num1 = mysql_num_rows($res1); 
 
 //if the number of matchs is 1 if($num1 == 1){ //the email address supplied is taken so display error message echo "<center>The <strong>E-mail</strong> address you supplied is already taken</center>"; 
}else{ //finally, otherwise register there account 
 
 //time of register (unix) $registerTime = date('U'); 
 
 //make a code for our activation key $code = md5($username).$registerTime; 
 
 //insert the row into the database $res2 = mysql_query("INSERT INTO `users` (`username`, `password`, `email`, `rtime`) 
VALUES('".$username."','".$password."','".$email."','".$registerTime."')"); 
 
 //send the email with an email containing the activation link to the supplied email address mail($email, $INFO['chatName'].' registration confirmation', "Thank you for registering to us".$username.",\n\nHere is your activation link. If the link doesn't work copy and paste it into your browser address bar.\n\nhttps://www.yourwebsitehere.co.uk/activate.php?code=".$code, 'From:noreply@youwebsitehere.co.uk'); 
 
 //display the success message echo "<center>You have successfully registered, please visit you inbox to activate your account!</center>"; } } } } } } } } 
 
 ?> <div id="border"> <form action="register.php" method="post"> <table border="0" cellpadding="2" cellspacing="0"> <tbody><tr> <td>Username: </td> <td><input name="username" type="text"></td> 
</tr> <tr> <td>Password: </td> <td><input name="password" type="password"></td> </tr> <tr> <td>Confirm Password: </td> <td><input name="passconf" type="password"></td> </tr> <tr> <td>Email: 
</td> <td><input name="email" size="25" type="text"></td> </tr> <tr> <td colspan="2" align="center"><input name="submit" value="Register" type="submit"></td> </tr> <tr> <td colspan="2" 
align="center"><a href="login.php">Login</a> | <a href="forgot.php">Forgot Pass</a></td> </tr> </tbody></table> </form> </div>

Fungsi baru

File ini berisi beberapa hal baru yang mungkin tidak anda kenal, oleh karena itu saya akan membahas semuanya. Pertama, fungsi strlen(), ini mengembalikan jumlah karakter dalam string yang memungkinkan kita untuk memeriksa berapa panjang string. Kemudian fungsi preg_match(), ini memeriksa untuk melihat apakah pemformatan string sesuai dengan format yang anda tetapkan (dalam hal ini format email). Akhirnya fungsi mail(), ini mengirim email dari server ke email pilihan anda, berisi apa pun yang anda inginkan. Anda harus menyimpan file ini sebagai register.php

Sekarang anda dapat menguji anda mendaftar halaman, anda dapat melihat ketika anda memasukkan alamat email yang benar anda akan menerima email dengan tautan aktivasi yang terdapat di dalamnya. Anda juga dapat melihat bahwa baris yang berisi data yang diisi ke dalam formulir dimasukkan ke dalam tabel pengguna. Nilai aktif adalah 0 yang menunjukkan bahwa akun ini belum diaktifkan!

4. Aktifkan Halaman Akun Anda

Ini hanya halaman kecil dengan kode yang sangat sedikit yang diperlukan, tetapi masih sangat penting dan memainkan peran besar dalam sistem login yang aman. Sumber untuk halaman ini ditunjukkan di bawah ini - activate.php

 <link rel="stylesheet" type="text/css" href="tut_files/style.css"> 
 
 Unfortunatly there was an error there!"; }else{ //other wise continue the check 
 
 //select all the rows where the accounts are not active $res = mysql_query("SELECT * FROM `users` WHERE `active` = '0'"); 
 
 //loop through this script for each row found not active while($row = mysql_fetch_assoc($res)){ //check if the code from the row in the database matches the one from the user if($code == md5($row['username']).$row['rtime']){ //if it does then activate there account and display success message $res1 = mysql_query("UPDATE `users` SET `active` = '1' WHERE `id` = '".$row['id']."'"); echo "<center>You have successfully activated your account!</center>"; } } } 
 
 ?>

Ada dua hal baru dalam file ini, kami menggunakan metode GET, bukan POST dan juga kami menggunakan while() loop. Metode get mendapatkan data dari bilah alamat di bagian atas browser pengguna (dalam hal ini adalah kode yang dikirim bersama email ke alamat email mereka). The while() loop menyempurnakan untuk memeriksa melalui beberapa baris data yang dipilih dari database (dalam hal ini untuk melihat apakah ada kecocokan dengan kode).

Peninjauan sejauh ini

Sejauh ini anda seharusnya sudah belajar banyak hal baru jika baru anda ke PHP dan berhasil membuat setengah dari sistem login. Halaman-halaman yang telah diselesaikan sejauh ini adalah -

style.css
functions.php
login.php
register.php
activate.php

Beberapa fungsi berguna yang digunakan sejauh ini adalah -

mysql_connect() - Menghubungkan ke database mysql
mysql_select_db() - Pilih database yang harus kita kerjakan
mysql_query() - Kirim query ke database untuk mendapatkan, memasukkan atau mengedit data
trim() - Potong ruang putih yang tidak diinginkan dari awal dan akhir string
strip_tags() - Hapus tag html dan PHP dari sebuah string
addslashes() - Tambahkan garis miring ke s string yang memungkinkan tanda kutip dan ucapan digunakan dengan aman
strlen() - Mendapatkan jumlah karakter dalam string
preg_match() - Preg match adalah untuk mencocokkan format string
mail() - Mengirim surat dari server ke alamat email tertentu
MD5() - Ini menghitung hash md5 dari string

5. Lupa Kata Sandi Anda?

Selanjutnya adalah halaman kata sandi yang terlupakan. Jika pengguna lupa kata sandinya, kami dapat mengirim email kepada mereka sekarang, kami tahu bahwa mereka memberikan alamat email yang sebenarnya karena aktivasi. Jadi tanpa basa-basi lagi inilah kode komentar untuk forgot.php -

 <link rel="stylesheet" type="text/css" href="tut_files/style.css"> 
 
 You need to fill in your <strong>E-mail</strong> address!"; }else{ //else continue checking 
 
 //set the format to check the email against $checkemail = "/^[a-z0-9]+([_\\.-][a-z0-9]+)*@([a-z0-9]+([\.-][a-z0-9]+)*)+\\.[a-z]{2,}$/i"; 
 
 //check if the email doesnt match the required format if(!preg_match($checkemail, $email)){ //if not then display error message echo "<center><strong>E-mail</strong> is not valid, must be name@server.tld!</center>"; }else{ //otherwise continue checking 
 
 //select all rows from the database where the emails match $res = mysql_query("SELECT * FROM `users` WHERE `email` = '".$email."'"); $num = mysql_num_rows($res); 
 
 //check if the number of row matched is equal to 0 if($num == 0){ //if it is display error message echo "<center>The <strong>E-mail</strong> you supplied does not exist in our database!</center>"; }else{ //otherwise complete forgot pass function 
 
 //split the row into an associative array $row = mysql_fetch_assoc($res); 
 
 //send email containing their password to their email address mail($email, 'Forgotten Password', "Here is your password: ".$row['password']."\n\nPlease try not too lose it again!", 'From: noreply@yourwebsitehere.co.uk'); 
 
 //display success message echo "<center>An email has been sent too your email address containing your password!</center>"; } } } } 
 
 ?> <div id="border"> <form action="forgot.php" method="post"> <table border="0" cellpadding="2" cellspacing="0"> <tbody><tr> <td>Email: </td> <td><input name="email" type="text"></td> </tr> 
<tr> <td colspan="2" align="center"><input name="submit" value="Send" type="submit"></td> </tr> <tr> <td colspan="2" align="center"><a href="register.php">Register</a> | <a 
href="login.php">Login</a></td> </tr> </tbody></table> </form> </div>

Halaman ini tidak mengandung apa-apa, oleh karena itu saya akan menghabiskan lebih sedikit waktu untuk mengamatinya. Satu hal yang ingin saya sebutkan adalah bahwa jika anda tidak memperhatikan karena kami telah memasukkan file css kami ke setiap halaman, tata letak yang kami gunakan untuk setiap halaman tetap sama dengan menjaga desain pintar yang bagus di seluruh situs web.

Halaman selanjutnya dan terakhir yang akan kita lakukan dalam tutorial ini akan sedikit berbeda. Halaman ini memiliki pemeriksaan untuk melihat apakah pengguna masuk atau tidak, dan dalam hal ini menampilkan semua pengguna online pada saat itu (atau tepatnya dalam 50 detik terakhir).

6. Halaman Pengguna Online

Oke, jadi kami berhasil masuk ke bagian situs web yang harus anda masuki untuk melihatnya. Seperti yang saya sebutkan sebelumnya, ini akan sedikit berbeda dengan yang lain karena fakta bahwa kita perlu memeriksa apakah pengguna masuk atau tidak. Jika mereka tidak masuk dan mencoba melihat halaman, kami memiliki beberapa opsi yang dapat kami lakukan. Yang pertama adalah kita dapat menampilkan pesan kesalahan yang mengatakan sesuatu di sepanjang baris "Anda harus masuk untuk melihat halaman ini!", atau kita dapat mengarahkan mereka kembali ke halaman login. Untuk tutorial ini saya pikir saya akan menggunakan metode pesan kesalahan.

Jadi di sini adalah sumber halaman usersOnline.php -

 <link rel="stylesheet" type="text/css" href="tut_files/style.css"> 
 
 You need to be logged in to user this feature!"; }else{ //otherwise continue the page 
 
 //this is out update script which should be used in each page to update the users online time $time = date('U')+50; $update = mysql_query("UPDATE `users` SET `online` = '".$time."' WHERE `id` = '".$_SESSION['uid']."'"); ?> <div id="border"> <table width="100%" border="0" cellpadding="2" cellspacing="0"> <tbody><tr> <td><strong>Users Online:</strong></td> <td> '".date('U')."'"); 
 
 //loop for each row while($row = mysql_fetch_assoc($res)){ //echo each username found to be online with a dash to split them echo $row['username']." - "; } 
 
 ?> </td> </tr> <tr> <td colspan="2" align="center"><a href="logout.php">Logout</a></td> </tr> </tbody></table> </div>

Seperti yang saya sebutkan, anda dapat melihat halaman ini sedikit berbeda. Kami tidak hanya memastikan bahwa mereka masuk, tetapi kami memperbarui waktu online menjaga bidang online menjelang waktu saat ini. Setiap kali halaman dimuat dengan skrip itu, itu akan diperbarui untuk menempatkannya secara online. Sekarang kita memiliki satu lagi halaman terakhir yang harus dilakukan dan kemudian kita selesai. Setelah pengguna masuk, dia harus bisa keluar!

Logout.php

Ini harus dianggap sebagai halaman termudah untuk membuat yang saya yakin sebagian besar dari anda senang mendengarnya. Sekarang di sini adalah kode komentar untuk file logout.php -

 <link rel="stylesheet" type="text/css" href="tut_files/style.css"> 
 
 You need to be logged in to log out!"; }else{ //if it does continue checking 
 
 //update to set this users online field to the current time mysql_query("UPDATE `users` SET `online` = '".date('U')."' WHERE `id` = '".$_SESSION['uid']."'"); 
 
 //destroy all sessions canceling the login session session_destroy(); 
 
 //display success message echo "<center>You have successfully logged out!</center>"; } 
 
 ?>

Saya pikir komentar dalam file ini cukup menjelaskannya, dan saya pikir pengetahuan PHP anda sekarang harus jauh lebih tinggi dan anda harus dapat memahami sebagian besar ini sekarang.