-->
  Login and Sign up Form with Email Verification in PHP/MySQLi

Login and Sign up Form with Email Verification in PHP/MySQLi

This tutorial will teach you on how to send email/verification email in PHP/MySQLi using mail() function. The function will both work in local server(ex. XAMMP) or hosted server(online) but in case you wanted to send email via the local server, you need to modify your local server to allow it to send email. In my case, I'm using XAMMP, so, I'm going to show you how to set up your XAMMP to send email.

Setting up Local Server to Send Email

Configure php.ini
1. Open php.ini in C:\xampp\php\php.ini.
2. Find extension=php_openssl.dll and remove the semicolon from the beginning of that line.
3. Find [mail function], enable the ff. by removing the semicolon at the start of the line then, change their values:
  • SMTP=smtp.gmail.com
  • smtp_port=465
  • sendmail_from = ndevierte@gmail.com
  • sendmail_path = "C:\xampp\sendmail\sendmail.exe -t"
php.iniConfigure sendmail.ini
1. Open sendmail.ini in C:\xampp\sendmail\sendmail.ini
2. Find [sendmail], enable the ff. by removing the semicolon at the start of the line, then change their values:
sendmail.inisendmail.ini2
Lastly. make sure to turn this on to allow XAMMP to send email to your email. Use this link.
And you're done. Restart XAMMP and you should now be able to send email using your XAMMP.

Working Example

To test if your XAMMP is working, here's our example. We will create a registration with verification email.
NOTE: Scripts and CSS used in this tutorial are hosted, so, you might need internet connection for them to work.

Creating our Database

First step is to create our database.
1. Open phpMyAdmin.
2. Click databases, create a database and name it as sample.
3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.
    

  1. 
CREATE TABLE `user` (
    

    2. 

  2. 
  `userid` INT(11) NOT NULL AUTO_INCREMENT,
    

    3. 

  3. 
  `email` VARCHAR(50) NOT NULL,
    

    4. 

  4. 
  `password` VARCHAR(50) NOT NULL,
    

    5. 

  5. 
  `code` VARCHAR(20) NOT NULL,
    

    6. 

  6. 
  `verify` INT(1) NOT NULL,
    

    7. 

  7. 
PRIMARY KEY(`userid`)
    

    8. 

  8. 
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
    

    9.
sendmail

Creating our Connection

Next, we create our connection to our database. This will serve as the bridge between our forms and database. We name this as conn.php.
    

  1. 
<?php
    

    2. 

  2. 

    

    3. 

  3. 
$conn = mysqli_connect("localhost","root","","sample");
    

    4. 

  4. 
if (!$conn) {
    

    5. 

  5. 
 die("Connection failed: " . mysqli_connect_error());
    

    6. 

  6. 
}
    

    7. 

  7. 

    

    8. 

  8. 
?>
    

    9.

index.php

This contains our login form but you can access a link here if you want to sign up.
    

  1. 
<?php
    

    2. 

  2. 
 session_start();
    

    3. 

  3. 
 include('conn.php');
    

    4. 

  4. 

    

    5. 

  5. 
 if(isset($_SESSION['id'])){
    

    6. 

  6. 
  header('location:home.php');
    

    7. 

  7. 
 }
    

    8. 

  8. 
?>
    

    9. 

  9. 

    

    10. 

  10. 
<!DOCTYPE html>
    

    11. 

  11. 
<html>
    

    12. 

  12. 
<head>
    

    13. 

  13. 
 <title>Sign up Form with Email Verification in PHP/MySQLi</title>
    

    14. 

  14. 
 <script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    

    15. 

  15. 
" rel="nofollow">https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></scri...</a> <script src="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    

    16. 

  16. 
" rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></s...</a> <link href="<a href="https://fonts.googleapis.com/css?family=Open+San">
    

    17. 

  17. 
" rel="nofollow">https://fonts.googleapis.com/css?family=Open+San">
    

    18. 

  18. 
</a> <link href="<a href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    

    19. 

  19. 
" rel="nofollow">https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min....</a> <link rel="stylesheet" href="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">" rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></a>  
    

    20. 

  20. 
<style>
    

    21. 

  21. 
 #login_form{
    

    22. 

  22. 
  width:350px;
    

    23. 

  23. 
  position:relative;
    

    24. 

  24. 
  top:50px;
    

    25. 

  25. 
  margin: auto;
    

    26. 

  26. 
  padding: auto;
    

    27. 

  27. 
 }
    

    28. 

  28. 
</style>
    

    29. 

  29. 
</head>
    

    30. 

  30. 
<body>
    

    31. 

  31. 
<div class="container">
    

    32. 

  32. 
 <div id="login_form" class="well">
    

    33. 

  33. 
  <h2><center><span class="glyphicon glyphicon-lock"></span> Please Login</center></h2>
    

    34. 

  34. 
  <hr>
    

    35. 

  35. 
  <form method="POST" action="login.php">
    

    36. 

  36. 
  Email: <input type="text" name="email" class="form-control" required>
    

    37. 

  37. 
  <div style="height: 10px;"></div>  
    

    38. 

  38. 
  Password: <input type="password" name="password" class="form-control" required> 
    

    39. 

  39. 
  <div style="height: 10px;"></div>
    

    40. 

  40. 
  <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-log-in"></span> Login</button> No account? <a href="signup.php"> Sign up</a>
    

    41. 

  41. 
  </form>
    

    42. 

  42. 
  <div style="height: 15px;"></div>
    

    43. 

  43. 
  <?php
    

    44. 

  44. 
   if(isset($_SESSION['log_msg'])){
    

    45. 

  45. 
    ?>
    

    46. 

  46. 
    <div style="height: 30px;"></div>
    

    47. 

  47. 
    <div class="alert alert-danger">
    

    48. 

  48. 
     <span><center>
    

    49. 

  49. 
     <?php echo $_SESSION['log_msg'];
    

    50. 

  50. 
      unset($_SESSION['log_msg']); 
    

    51. 

  51. 
     ?>
    

    52. 

  52. 
     </center></span>
    

    53. 

  53. 
    </div>
    

    54. 

  54. 
    <?php
    

    55. 

  55. 
   }
    

    56. 

  56. 
  ?>
    

    57. 

  57. 
 </div>
    

    58. 

  58. 
</div>
    

    59. 

  59. 
</body>
    

    60. 

  60. 
</html>
    

    61.

signup.php

This is our sign up form.
    

  1. 
<!DOCTYPE html>
    

    2. 

  2. 
<html>
    

    3. 

  3. 
<head>
    

    4. 

  4. 
 <title>Sign up Form with Email Verification in PHP/MySQLi</title>
    

    5. 

  5. 
 <script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    

    6. 

  6. 
" rel="nofollow">https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></scri...</a> <script src="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    

    7. 

  7. 
" rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></s...</a> <link href="<a href="https://fonts.googleapis.com/css?family=Open+San">
    

    8. 

  8. 
" rel="nofollow">https://fonts.googleapis.com/css?family=Open+San">
    

    9. 

  9. 
</a> <link href="<a href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    

    10. 

  10. 
" rel="nofollow">https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min....</a> <link rel="stylesheet" href="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    

    11. 

  11. 
<style>
    

    12. 

  12. 
" rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    

    13. 

  13. 
...</a> #signup_form{
    

    14. 

  14. 
  width:350px;
    

    15. 

  15. 
  position:relative;
    

    16. 

  16. 
  top:50px;
    

    17. 

  17. 
  margin: auto;
    

    18. 

  18. 
  padding: auto;
    

    19. 

  19. 
 }
    

    20. 

  20. 
</style>
    

    21. 

  21. 
</head>
    

    22. 

  22. 
<body>
    

    23. 

  23. 
<div class="container">
    

    24. 

  24. 
 <div id="signup_form" class="well">
    

    25. 

  25. 
  <h2><center><span class="glyphicon glyphicon-user"></span> Sign Up</center></h2>
    

    26. 

  26. 
  <hr>
    

    27. 

  27. 
  <form method="POST" action="register.php">
    

    28. 

  28. 
  Email: <input type="text" name="email" class="form-control" required>
    

    29. 

  29. 
  <div style="height: 10px;"></div>  
    

    30. 

  30. 
  Password: <input type="password" name="password" class="form-control" required> 
    

    31. 

  31. 
  <div style="height: 10px;"></div>
    

    32. 

  32. 
  <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span> Sign Up</button> <a href="index.php"> Back to Login</a>
    

    33. 

  33. 
  </form>
    

    34. 

  34. 
  <?php
    

    35. 

  35. 
   session_start();
    

    36. 

  36. 
   if(isset($_SESSION['sign_msg'])){
    

    37. 

  37. 
    ?>
    

    38. 

  38. 
    <div style="height: 40px;"></div>
    

    39. 

  39. 
    <div class="alert alert-danger">
    

    40. 

  40. 
     <span><center>
    

    41. 

  41. 
     <?php echo $_SESSION['sign_msg'];
    

    42. 

  42. 
      unset($_SESSION['sign_msg']); 
    

    43. 

  43. 
     ?>
    

    44. 

  44. 
     </center></span>
    

    45. 

  45. 
    </div>
    

    46. 

  46. 
    <?php
    

    47. 

  47. 
   }
    

    48. 

  48. 
  ?>
    

    49. 

  49. 

    

    50. 

  50. 
 </div>
    

    51. 

  51. 
</div>
    

    52. 

  52. 
</body>
    

    53. 

  53. 
</html>
    

    54.

register.php

This contains our signup code as well as our send verification email code.
    

  1. 
<?php
    

    2. 

  2. 
 include('conn.php');
    

    3. 

  3. 
 session_start();
    

    4. 

  4. 

    

    5. 

  5. 
 if ($_SERVER["REQUEST_METHOD"] == "POST") {
    

    6. 

  6. 

    

    7. 

  7. 
 function check_input($data){
    

    8. 

  8. 
  $data=trim($data);
    

    9. 

  9. 
  $data=stripslashes($data);
    

    10. 

  10. 
  $data=htmlspecialchars($data);
    

    11. 

  11. 
  return $data;
    

    12. 

  12. 
 }
    

    13. 

  13. 

    

    14. 

  14. 
 $email=check_input($_POST['email']);
    

    15. 

  15. 
 $password=md5(check_input($_POST['password']));
    

    16. 

  16. 

    

    17. 

  17. 
 if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    

    18. 

  18. 
    $_SESSION['sign_msg'] = "Invalid email format";
    

    19. 

  19. 
    header('location:signup.php');
    

    20. 

  20. 
 }
    

    21. 

  21. 

    

    22. 

  22. 
 else{
    

    23. 

  23. 

    

    24. 

  24. 
  $query=mysqli_query($conn,"select * from user where email='$email'");
    

    25. 

  25. 
  if(mysqli_num_rows($query)>0){
    

    26. 

  26. 
   $_SESSION['sign_msg'] = "Email already taken";
    

    27. 

  27. 
     header('location:signup.php');
    

    28. 

  28. 
  }
    

    29. 

  29. 
  else{
    

    30. 

  30. 
  //depends on how you set your verification code
    

    31. 

  31. 
  $set='123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    

    32. 

  32. 
  $code=substr(str_shuffle($set), 0, 12);
    

    33. 

  33. 

    

    34. 

  34. 
  mysqli_query($conn,"insert into user (email, password, code) values ('$email', '$password', '$code')");
    

    35. 

  35. 
  $uid=mysqli_insert_id($conn);
    

    36. 

  36. 
  //default value for our verify is 0, means it is unverified
    

    37. 

  37. 

    

    38. 

  38. 
  //sending email verification
    

    39. 

  39. 
  $to = $email;
    

    40. 

  40. 
   $subject = "Sign Up Verification Code";
    

    41. 

  41. 
   $message = "
    

    42. 

  42. 
    <html>
    

    43. 

  43. 
    <head>
    

    44. 

  44. 
    <title>Verification Code</title>
    

    45. 

  45. 
    </head>
    

    46. 

  46. 
    <body>
    

    47. 

  47. 
    <h2>Thank you for Registering.</h2>
    

    48. 

  48. 
    <p>Your Account:</p>
    

    49. 

  49. 
    <p>Email: ".$email."</p>
    

    50. 

  50. 
    <p>Password: ".$_POST['password']."</p>
    

    51. 

  51. 
    <p>Please click the link below to activate your account.</p>
    

    52. 

  52. 
    <h4><a href='<a href="http://localhost/send_mail/activate.php?uid=" rel="nofollow">http://localhost/send_mail/activate.php?uid=</a>$uid&code=$code'>Activate My Account</h4>
    

    53. 

  53. 
    </body>
    

    54. 

  54. 
    </html>
    

    55. 

  55. 
    ";
    

    56. 

  56. 
   //dont forget to include content-type on header if your sending html
    

    57. 

  57. 
   $headers = "MIME-Version: 1.0" . "\r\n";
    

    58. 

  58. 
   $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
    

    59. 

  59. 
   $headers .= "From: <a href="mailto:webmaster@sourcecodester.com" rel="nofollow">webmaster@sourcecodester.com</a>". "\r\n" .
    

    60. 

  60. 
      "CC: <a href="mailto:ndevierte@gmail.com" rel="nofollow">ndevierte@gmail.com</a>";
    

    61. 

  61. 

    

    62. 

  62. 
  mail($to,$subject,$message,$headers);
    

    63. 

  63. 

    

    64. 

  64. 
  $_SESSION['sign_msg'] = "Verification code sent to your email.";
    

    65. 

  65. 
    header('location:signup.php');
    

    66. 

  66. 

    

    67. 

  67. 
    }
    

    68. 

  68. 
 }
    

    69. 

  69. 
 }
    

    70. 

  70. 
?>
    

    71.

activate.php

The goto page from registered email. This is our verification page.
    

  1. 
<?php
    

    2. 

  2. 
 include('conn.php');
    

    3. 

  3. 
 session_start();
    

    4. 

  4. 
 if(isset($_GET['code'])){
    

    5. 

  5. 
 $user=$_GET['uid'];
    

    6. 

  6. 
 $code=$_GET['code'];
    

    7. 

  7. 

    

    8. 

  8. 
 $query=mysqli_query($conn,"select * from user where userid='$user'");
    

    9. 

  9. 
 $row=mysqli_fetch_array($query);
    

    10. 

  10. 

    

    11. 

  11. 
 if($row['code']==$code){
    

    12. 

  12. 
  //activate account
    

    13. 

  13. 
  mysqli_query($conn,"update user set verify='1' where userid='$user'");
    

    14. 

  14. 
  ?>
    

    15. 

  15. 
  <p>Account Verified!</p>
    

    16. 

  16. 
  <p><a href="index.php">Login Now</a></p>
    

    17. 

  17. 
  <?php
    

    18. 

  18. 
 }
    

    19. 

  19. 
 else{
    

    20. 

  20. 
  $_SESSION['sign_msg'] = "Something went wrong. Please sign up again.";
    

    21. 

  21. 
    header('location:signup.php');
    

    22. 

  22. 
 }
    

    23. 

  23. 
 }
    

    24. 

  24. 
 else{
    

    25. 

  25. 
  header('location:index.php');
    

    26. 

  26. 
 }
    

    27. 

  27. 
?>
    

    28.

login.php

Our login code that will check if the user has successfully sign up and verified its account.
    

  1. 
<?php
    

    2. 

  2. 
 include('conn.php');
    

    3. 

  3. 
 session_start();
    

    4. 

  4. 

    

    5. 

  5. 
 if ($_SERVER["REQUEST_METHOD"] == "POST") {
    

    6. 

  6. 

    

    7. 

  7. 
  function check_input($data) {
    

    8. 

  8. 
  $data = trim($data);
    

    9. 

  9. 
  $data = stripslashes($data);
    

    10. 

  10. 
  $data = htmlspecialchars($data);
    

    11. 

  11. 
  return $data;
    

    12. 

  12. 
  }
    

    13. 

  13. 

    

    14. 

  14. 
  $email=check_input($_POST['email']);
    

    15. 

  15. 
  $password=md5(check_input($_POST['password']));
    

    16. 

  16. 

    

    17. 

  17. 
  if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    

    18. 

  18. 
     $_SESSION['log_msg'] = "Invalid email format";
    

    19. 

  19. 
     header('location:index.php');
    

    20. 

  20. 
  }
    

    21. 

  21. 
  else{
    

    22. 

  22. 
   $query=mysqli_query($conn,"select * from user where email='$email' and password='$password'");
    

    23. 

  23. 
   if(mysqli_num_rows($query)==0){
    

    24. 

  24. 
    $_SESSION['log_msg'] = "User not found";
    

    25. 

  25. 
      header('location:index.php');
    

    26. 

  26. 
   }
    

    27. 

  27. 
   else{
    

    28. 

  28. 
    $row=mysqli_fetch_array($query);
    

    29. 

  29. 
    if($row['verify']==0){
    

    30. 

  30. 
     $_SESSION['log_msg'] = "User not verified. Please activate account";
    

    31. 

  31. 
       header('location:index.php');
    

    32. 

  32. 
    }
    

    33. 

  33. 
    else{
    

    34. 

  34. 
     $_SESSION['id']=$row['userid'];
    

    35. 

  35. 
     header('location:index.php');
    

    36. 

  36. 
    }
    

    37. 

  37. 
   }
    

    38. 

  38. 
  }
    

    39. 

  39. 

    

    40. 

  40. 
 }
    

    41. 

  41. 
?>
    

    42.

home.php

This page will show if the user that login is verified.
    

  1. 
<!DOCTYPE html>
    

    2. 

  2. 
<html>
    

    3. 

  3. 
<head>
    

    4. 

  4. 
 <title>Sign up Form with Email Verification in PHP/MySQLi</title>
    

    5. 

  5. 
 <script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    

    6. 

  6. 
" rel="nofollow">https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></scri...</a> <script src="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    

    7. 

  7. 
" rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></s...</a> <link href="<a href="https://fonts.googleapis.com/css?family=Open+San">
    

    8. 

  8. 
" rel="nofollow">https://fonts.googleapis.com/css?family=Open+San">
    

    9. 

  9. 
</a> <link href="<a href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    

    10. 

  10. 
" rel="nofollow">https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min....</a> <link rel="stylesheet" href="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">" rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></a>  
    

    11. 

  11. 
</head>
    

    12. 

  12. 
<body>
    

    13. 

  13. 
 <div class="container">
    

    14. 

  14. 
  <h2>Login Successful</h2>
    

    15. 

  15. 
  <p><a href="logout.php">Logout</a></p>
    

    16. 

  16. 
 </div>
    

    17. 

  17. 
</body>
    

    18. 

  18. 
</html>
    

    19.

logout.php

Lastly, our logout that will destroy our login session.
    

  1. 
<?php
    

    2. 

  2. 
 session_start();
    

    3. 

  3. 
 session_destroy();
    

    4. 

  4. 
 header('location:index.php');
    

    5. 

  5. 
?>
    

    6.
That ends this tutorial. If you have any questions or comment, feel free to write it below or message me. Happy Coding :)

    PHP, Tutorial