CMS yang harus melakukan verifikasi email pada saat proses pembuatan website adalah

Pernahkah Anda membuat akun dengan situs web, dan diminta untuk memeriksa email Anda dan mengklik melalui tautan verifikasi yang dikirim oleh perusahaan untuk mengaktifkannya? Melakukan hal tersebut sangat mengurangi jumlah akun spam. Dalam pelajaran ini, kita akan belajar bagaimana melakukan hal yang sama!

Table of Contents Show

Apa yang Akan Kita Bangun?
Langkah 1 - Halaman Pendaftaran
Langkah 2 - Validasi Masukan
Langkah 3 - Membuat Database & Membangun Koneksi
Langkah 4 - Memasukkan Akun
Langkah 5 - Mengirim Email Verifikasi
Langkah 6 - Aktivasi Akun
Langkah 7 - Login
Video yang berhubungan

Apa yang Akan Kita Bangun?

Kita akan membuat skrip pendaftaran PHP yang bagus dimana pengguna dapat membuat akun untuk mendapatkan akses ke "bagian anggota" dari sebuah situs web.
Setelah pengguna membuat akunnya, akun tersebut kemudian akan dikunci sampai pengguna mengklik sebuah tautan verifikasi yang akan dia terima di inbox email-nya.

Langkah 1 - Halaman Pendaftaran

Pertama-tama kita membutuhkan halaman sederhana dimana pengunjung kita dapat mendaftarkan akun mereka; jadi itulah hal pertama yang akan kita bangun.
Saya ingin mengingatkan Anda bahwa ini adalah tutorial PHP, dan menurut pendapat saya, saya pikir Anda perlu mengetahui dasar-dasar HTML sebelum melanjutkan dengan PHP. Saya akan menambahkan komentar ke HTML & CSS untuk menjelaskan setiap baris kode.

index.php - Ini adalah halaman pendaftaran kita dengan formulir dasar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>NETTUTS > Sign up</title> <link href="css/style.css" type="text/css" rel="stylesheet" /> </head> <body>  <div id="header"> <h3>NETTUTS > Sign up</h3> </div>   <div id="wrap">    <h3>Signup Form</h3> <p>Please enter your name and email addres to create your account</p>  <form action="" method="post"> <label for="name">Name:</label> <input type="text" name="name" value="" /> <label for="email">Email:</label> <input type="text" name="email" value="" /> <input type="submit" class="submit_button" value="Sign up" /> </form>  </div>  </body> </html>

css/style.css - Ini adalah stylesheet untuk index.php dan halaman selanjutnya.

/* Global Styles */ *{ padding: 0; /* Reset all padding to 0 */ margin: 0; /* Reset all margin to 0 */ } body{ background: #F9F9F9; /* Set HTML background color */ font: 14px "Lucida Grande"; /* Set global font size & family */ color: #464646; /* Set global text color */ } p{ margin: 10px 0px 10px 0px; /* Add some padding to the top and bottom of the <p> tags */ } /* Header */ #header{ height: 45px; /* Set header height */ background: #464646; /* Set header background color */ } #header h3{ color: #FFFFF3; /* Set header heading(top left title ) color */ padding: 10px; /* Set padding, to center it within the header */ font-weight: normal; /* Set font weight to normal, default it was set to bold */ } /* Wrap */ #wrap{ background: #FFFFFF; /* Set content background to white */ width: 615px; /* Set the width of our content area */ margin: 0 auto; /* Center our content in our browser */ margin-top: 50px; /* Margin top to make some space between the header and the content */ padding: 10px; /* Padding to make some more space for our text */ border: 1px solid #DFDFDF; /* Small border for the finishing touch */ text-align: center; /* Center our content text */ } #wrap h3{ font: italic 22px Georgia; /* Set font for our heading 2 that will be displayed in our wrap */ } /* Form & Input field styles */ form{ margin-top: 10px; /* Make some more distance away from the description text */ } form .submit_button{ background: #F9F9F9; /* Set button background */ border: 1px solid #DFDFDF; /* Small border around our submit button */ padding: 8px; /* Add some more space around our button text */ } input{ font: normal 16px Georgia; /* Set font for our input fields */ border: 1px solid #DFDFDF; /* Small border around our input field */ padding: 8px; /* Add some more space around our text */ }

Seperti yang Anda lihat, saya telah menambahkan komentar ke setiap baris yang menjelaskan apa yang mereka lakukan. Juga, Anda mungkin telah memperhatikan komentar berikut di file index.php:

Kita akan menulis PHP kita antara 2 baris ini!

Langkah 2 - Validasi Masukan

Hal pertama yang akan kita bangun adalah sepotong kode yang akan memvalidasi informasinya. Berikut adalah daftar singkat yang merinci apa yang perlu dilakukan.

Jika field nama tidak kosong.
Jika namanya tidak terlalu pendek.
Jika field email tidak kosong.
Jika alamat email itu valid

Jadi langkah pertama kita adalah memeriksa apakah formulir diajukan, dan field-nya tidak kosong.

<?php if(isset($_POST['name']) && !empty($_POST['name']) AND isset($_POST['email']) && !empty($_POST['email'])){ // Form Submited } ?>

Waktunya untuk perincian! Kita memulai dengan pernyataan IF dan pertama-tama kita memvalidasi field nama:

if( ){ // If statement is true run code between brackets } isset($_POST['name']) // Is the name field being posted; it does not matter whether it's empty or filled. && // This is the same as the AND in our statement; it allows you to check multiple statements. !empty($_POST['name']) // Verify if the field name is not empty isset($_POST['email']) // Is the email field being posted; it does not matter if it's empty or filled. && // This is the same as the AND in our statement; it allows you to check multiple statements. !empty($_POST['email']) // Verify if the field email is not empty

Jadi jika Anda mengirimkan formulir sekarang dengan field kosong, tidak ada yang terjadi. Jika Anda mengisi kedua field maka naskah kita akan menjalankan kode di antara tanda kurung.
Sekarang kita akan membuat kode yang akan memeriksa apakah alamat email itu valid. Jika tidak, kita akan mengembalikan kesalahan. Juga mari kita mengubah variabel posting kita menjadi variabel lokal:

if(isset($_POST['name']) && !empty($_POST['name']) AND isset($_POST['email']) && !empty($_POST['email'])){ $name = mysql_escape_string($_POST['name']); // Turn our post into a local variable $email = mysql_escape_string($_POST['email']); // Turn our post into a local variable }

Kita sekarang bisa mencapai data kita melalui variabel lokal kita. Seperti yang Anda lihat, saya juga menambahkan string escape MySQL untuk mencegah injeksi MySQL saat memasukkan data ke dalam database MySQL.

"Fungsi mysql_real_escape_string() meng-escape karakter khusus dalam string untuk digunakan dalam pernyataan SQL."

Regular Expressions

Berikutnya adalah cuplikan kecil yang memeriksa apakah alamat email-nya valid.

$name = mysql_escape_string($_POST['name']); $email = mysql_escape_string($_POST['email']); if(!eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email)){ // Return Error - Invalid Email }else{ // Return Success - Valid Email }

Harap dicatat bahwa saya tidak secara pribadi menulis regular expression ini, ini adalah cuplikan kecil dari php.net.
Pada dasarnya, memverifikasi apakah email ditulis dalam format berikut:

Sekarang di eregi, Anda dapat melihat bahwa memeriksa apakah email berisi karakter dari alfabet, jika ada nomor, atau tanda hubung phantom (_), dan tentu saja persyaratan dasar untuk email (email)'@' dan sebuah (titik)'.' Jika tidak satu pun karakter ini ditemukan, expression mengembalikan "false". Oke, jadi sekarang kita perlu menambahkan beberapa pesan kesalahan dasar.

if(!eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email)){ // Return Error - Invalid Email $msg = 'The email you have entered is invalid, please try again.'; }else{ // Return Success - Valid Email $msg = 'Your account has been made, <br /> please verify it by clicking the activation link that has been send to your email.'; }

Seperti yang Anda lihat, kami telah membuat variabel lokal "$msg", ini memungkinkan kita menampilkan kesalahan atau pesan sukses di manapun pada halaman.
Dan kita akan menampilkannya di antara teks instruksi dan formulirnya.

<h3>Signup Form</h3> <p>Please enter your name and email address to create your account</p> <?php if(isset($msg)){ // Check if $msg is not empty echo '<div class="statusmsg">'.$msg.'</div>'; // Display our message and wrap it with a div with the class "statusmsg". } ?>

Tambahkan ini ke style.css, untuk memberi gaya pesan status kita sedikit.

#wrap .statusmsg{ font-size: 12px; /* Set message font size */ padding: 3px; /* Some padding to make some more space for our text */ background: #EDEDED; /* Add a background color to our status message */ border: 1px solid #DFDFDF; /* Add a border arround our status message */ }

Langkah 3 - Membuat Database & Membangun Koneksi

Sekarang kita perlu membuat koneksi database dan membuat tabel untuk memasukkan data akun. Jadi mari kita pergi ke PHPMyAdmin dan membuat database baru dengan nama registrations dan membuat akun pengguna yang memiliki akses ke database tersebut untuk memasukkan dan memperbarui data.

Mari membuat tabel users kita, dengan 5 field:

Jadi sekarang kita harus memasukkan rincian untuk field ini:

Bagi mereka yang tidak ingin memasukkan data ini secara manual, Anda bisa menjalankan kode SQL berikut.

CREATE TABLE `users` ( `id` INT( 10 ) NOT NULL AUTO_INCREMENT PRIMARY KEY , `username` VARCHAR( 32 ) NOT NULL , `password` VARCHAR( 32 ) NOT NULL , `email` TEXT NOT NULL , `hash` VARCHAR( 32 ) NOT NULL , `active` INT( 1 ) NOT NULL DEFAULT '0' ) ENGINE = MYISAM ;

Database kita sudah dibuat, sekarang kita perlu menjalin koneksi dengan menggunakan PHP. Kita akan menulis kode berikut di awal skrip kita tepat di bawah baris berikut:

<?php // Establish database connection

Kita akan menggunakan kode berikut untuk terhubung ke server database dan memilih database registrations. (koneksi MySQL dasar)

mysql_connect("localhost", "username", "password") or die(mysql_error()); // Connect to database server(localhost) with username and password. mysql_select_db("registrations") or die(mysql_error()); // Select registrations database.

Setelah kita membuat koneksi ke database kita, kita dapat melanjutkan ke langkah berikutnya dan memasukkan rincian akun.

Langkah 4 - Memasukkan Akun

Sekarang saatnya memasukkan rincian akun yang dikirimkan ke database kita dan menghasilkan hash aktivasi. Tuliskan kode berikut di bawah baris ini:

// Return Success - Valid Email $msg = 'Your account has been made, <br /> please verify it by clicking the activation link that has been send to your email.';

Hash Aktivasi

Dalam database kita, kita membuat field yang disebut hash, hash ini adalah string teks 32 karakter. Kita juga mengirimkan kode ini ke alamat email pengguna. Mereka kemudian bisa mengklik tautan (yang berisi hash) dan kita akan memverifikasi apakah cocok dengan yang ada di database. Mari membuat variabel lokal yang disebut $hash dan menghasilkan hash md5 acak.

$hash = md5( rand(0,1000) ); // Generate random 32 character hash and assign it to a local variable. // Example output: f4552671f8909587cf485ea990207f3b

Apa yang telah kita lakukan? Nah kita menggunakan fungsi PHP "rand" untuk menghasilkan bilangan acak antara 0 dan 1000. Selanjutnya fungsi MD5 kita akan mengubah angka ini menjadi string teks 32 karakter yang akan kita gunakan di email aktivasi kita. Pilihan saya adalah menggunakan MD5, karena menghasilkan hash dari 32 karakter yang aman dan, dalam kasus ini, tidak mungkin untuk dipecahkan.

Membuat Kata Sandi Random

Hal berikutnya yang perlu dilakukan adalah membuat kata sandi acak untuk anggota kita:

$password = rand(1000,5000); // Generate random number between 1000 and 5000 and assign it to a local variable. // Example output: 4568

Masukkan informasi berikut ke dalam database kita menggunakan kueri MySQL

mysql_query("INSERT INTO users (username, password, email, hash) VALUES( '". mysql_escape_string($name) ."', '". mysql_escape_string(md5($password)) ."', '". mysql_escape_string($email) ."', '". mysql_escape_string($hash) ."') ") or die(mysql_error());

Seperti yang Anda lihat, kami memasukkan semua data dengan string escape MySQL di sekitarnya untuk mencegah injeksi MySQL.
Anda juga mungkin memperhatikan bahwa fungsi MD5 mengubah kata sandi acak menjadi hash yang aman untuk perlindungan. Contoh: jika orang "jahat" mendapatkan akses ke database, dia tidak dapat membaca kata sandinya.

Untuk pengujian, isi formulir dan periksa apakah data sedang dimasukkan ke dalam database kita.

Langkah 5 - Mengirim Email Verifikasi

Tepat setelah kita memasukkan informasi ke dalam database kita, kita perlu mengirim email ke pengguna dengan tautan verifikasi. Jadi mari kita gunakan fungsi "mail" PHP untuk melakukan hal itu.

$to = $email; // Send email to our user $subject = 'Signup | Verification'; // Give the email a subject $message = ' Thanks for signing up! Your account has been created, you can login with the following credentials after you have activated your account by pressing the url below. ------------------------ Username: '.$name.' Password: '.$password.' ------------------------ Please click this link to activate your account: http://www.yourwebsite.com/verify.php?email='.$email.'&hash='.$hash.' '; // Our message above including the link $headers = 'From:' . "\r\n"; // Set from headers mail($to, $subject, $message, $headers); // Send our email

Sekarang mari kita rinci pesannya:

Thanks for signing up! Your account has been created, you can login with the following credentials after you have activated your account by pressing the url below. ------------------------ Username: '.$name.' Password: '.$password.' ------------------------

Pada kode di atas, kita mengirimkan deskripsi singkat kepada pengguna kita yang berisi nama pengguna dan kata sandi -- dengan menggunakan variabel lokal yang kita buat saat data diposkan.

Please click this link to activate your account: http://www.yourwebsite.com/verify.php?email='.$email.'&hash='.$hash.'

Di bagian kode ini, kita membuat tautan dinamis. Hasilnya akan terlihat seperti ini:

Seperti yang Anda lihat, itu menciptakan url yang solid, yang tidak mungkin ditebak. Ini adalah cara yang sangat aman untuk memverifikasi alamat email pengguna.

Langkah 6 - Aktivasi Akun

Seperti yang bisa Anda lihat, tautan url kita ke verify.php jadi mari kita buat itu, dengan menggunakan template dasar yang sama seperti yang kita gunakan untuk index.php.
Namun, hapus formulir dari template.

Hal pertama yang perlu kita lakukan adalah memeriksa apakah kita memiliki variabel $_GET (email & hash)

if(isset($_GET['email']) && !empty($_GET['email']) AND isset($_GET['hash']) && !empty($_GET['hash'])){ // Verify data }else{ // Invalid approach }

Untuk membuat sesuatu menjadi sedikit lebih mudah, mari kita menetapkan variabel lokal kita dan menambahkan beberapa pencegahan injeksi MySQL dengan, sekali lagi, menggunakan string escape MySQL.

if(isset($_GET['email']) && !empty($_GET['email']) AND isset($_GET['hash']) && !empty($_GET['hash'])){ // Verify data $email = mysql_escape_string($_GET['email']); // Set email variable $hash = mysql_escape_string($_GET['hash']); // Set hash variable }

Selanjutnya adalah mengecek data dari url terhadap data di database kita menggunakan kueri MySQL.

$search = mysql_query("SELECT email, hash, active FROM users WHERE email='".$email."' AND hash='".$hash."' AND active='0'") or die(mysql_error()); $match = mysql_num_rows($search);

Pada kode di atas, kita menggunakan pernyataan select MySQL, dan mengecek apakah email dan hash-nya sesuai. Tapi selain itu, kita mengecek apakah status akunnya "inactive". Akhirnya, kita menggunakan mysql_num_rows untuk menentukan jumlah kecocokan yang ditemukan. Jadi mari kita coba ini. Cukup gunakan echo sederhana untuk mengembalikan hasilnya.

$search = mysql_query("SELECT email, hash, active FROM users WHERE email='".$email."' AND hash='".$hash."' AND active='0'") or die(mysql_error()); $match = mysql_num_rows($search); echo $match; // Display how many matches have been found -> remove this when done with testing ;)

Kita memiliki MATCH! Untuk mengubah hasilnya, cukup ganti email dan Anda akan melihat bahwa nomor yang dikembalikan adalah 0.
Kita dapat menggunakan variabel $match untuk mengaktifkan akun atau mengembalikan kesalahan saat tidak ditemukan kecocokan.

if($match > 0){ // We have a match, activate the account }else{ // No match -> invalid url or account has already been activated. }

Untuk mengaktifkan akun, kita harus memperbarui field active menjadi 1 dengan menggunakan kueri MySQL.

// We have a match, activate the account mysql_query("UPDATE users SET active='1' WHERE email='".$email."' AND hash='".$hash."' AND active='0'") or die(mysql_error()); echo '<div class="statusmsg">Your account has been activated, you can now login</div>';

Jadi kita menggunakan istilah pencarian yang sama untuk update seperti yang kita gunakan di kueri select MySQL kita. Kita mengubah active menjadi 1 dimana email, hash dan field active = 0 cocok. Kita juga mengembalikan pesan yang memberitahukan pengguna bahwa akunnya telah diaktifkan. Anda dapat menambahkan pesan seperti yang kami lakukan di sini ke bagian "no match". Jadi kode akhir seharusnya terlihat seperti:

mysql_connect("localhost", "tutorial", "password") or die(mysql_error()); // Connect to database server(localhost) with username and password. mysql_select_db("registrations") or die(mysql_error()); // Select registration database. if(isset($_GET['email']) && !empty($_GET['email']) AND isset($_GET['hash']) && !empty($_GET['hash'])){ // Verify data $email = mysql_escape_string($_GET['email']); // Set email variable $hash = mysql_escape_string($_GET['hash']); // Set hash variable $search = mysql_query("SELECT email, hash, active FROM users WHERE email='".$email."' AND hash='".$hash."' AND active='0'") or die(mysql_error()); $match = mysql_num_rows($search); if($match > 0){ // We have a match, activate the account mysql_query("UPDATE users SET active='1' WHERE email='".$email."' AND hash='".$hash."' AND active='0'") or die(mysql_error()); echo '<div class="statusmsg">Your account has been activated, you can now login</div>'; }else{ // No match -> invalid url or account has already been activated. echo '<div class="statusmsg">The url is either invalid or you already have activated your account.</div>'; } }else{ // Invalid approach echo '<div class="statusmsg">Invalid approach, please use the link that has been send to your email.</div>'; }

Jika Anda mengunjungi verify.php tanpa string, kesalahan berikut akan ditampilkan:

Pada langkah terakhir ini, saya akan menunjukkan cara membuat formulir login dasar dan memeriksa apakah akun sudah diaktifkan. Pertama buat file baru yang disebut login.php dengan template dasar yang kita gunakan sebelumnya, tapi kali ini saya ganti formulirnya menjadi formulir login.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>NETTUTS > Sign up</title> <link href="css/style.css" type="text/css" rel="stylesheet" /> </head> <body>  <div id="header"> <h3>NETTUTS > Sign up</h3> </div>   <div id="wrap">  <?php mysql_connect("localhost", "tutorial", "password") or die(mysql_error()); // Connect to database server(localhost) with username and password. mysql_select_db("registrations") or die(mysql_error()); // Select registration database. ?>   <h3>Login Form</h3> <p>Please enter your name and password to login</p> <?php if(isset($msg)){ // Check if $msg is not empty echo '<div class="statusmsg">'.$msg.'</div>'; // Display our message and add a div around it with the class statusmsg } ?>  <form action="" method="post"> <label for="name">Name:</label> <input type="text" name="name" value="" /> <label for="password">Password:</label> <input type="password" name="password" value="" /> <input type="submit" class="submit_button" value="Sign up" /> </form>  </div>  </body> </html>

Formulirnya adalah html dasar, dan hampir sama dengan formulir pendaftaran, tidak ada penjelasan lebih lanjut yang diperlukan. Sekarang saatnya menulis kode untuk skrip login, yang akan kita tulis tepat di bawah kode koneksi MySQL. Kita mulai dengan sesuatu yang juga kita lakukan dalam formulir pendaftaran.

if(isset($_POST['name']) && !empty($_POST['name']) AND isset($_POST['password']) && !empty($_POST['password'])){ // Both fields are being posted and there not empty }

Jadi kita pertama kali memeriksa untuk melihat apakah data sedang diposting, dan kita memastikan bahwa itu tidak kosong.
Selanjutnya adalah membuat beberapa variabel lokal untuk data posting:

if(isset($_POST['name']) && !empty($_POST['name']) AND isset($_POST['password']) && !empty($_POST['password'])){ $username = mysql_escape_string($_POST['name']); // Set variable for the username $password = mysql_escape_string(md5($_POST['password'])); // Set variable for the password and convert it to an MD5 hash. }

Kita membuat variabel lokal dan mengubah kata sandinya menjadi hash md5 agar sesuai dengan hash kata kunci yang telah kami simpan di database.
Sekarang, saatnya membuat koneksi ke tabel "users" kita dan memverifikasi apakah data yang dimasukkan benar.

if(isset($_POST['name']) && !empty($_POST['name']) AND isset($_POST['password']) && !empty($_POST['password'])){ $username = mysql_escape_string($_POST['name']); $password = mysql_escape_string(md5($_POST['password'])); $search = mysql_query("SELECT username, password, active FROM users WHERE username='".$username."' AND password='".$password."' AND active='1'") or die(mysql_error()); $match = mysql_num_rows($search); }

Kita menulis kueri MySQL yang akan memilih username, password dan informasi aktif dari database kita, jika username dan kata sandi sesuai.
AND active='1' is !IMPORTANT!, ini memastikan bahwa Anda hanya dapat login jika akun Anda diaktifkan. Kita menggunakan num rows MySQL lagi untuk melihat berapa banyak kecocokan yang ditemukan.

if($match > 0){ $msg = 'Login Complete! Thanks'; // Set cookie / Start Session / Start Download etc... }else{ $msg = 'Login Failed! Please make sure that you enter the correct details and that you have activated your account.'; }

Pada kode diatas kita cek apakah login itu sukses atau tidak.