Sign up Form with Email Verification in PHP/MySQLi

Submitted by: 
Language: 
Visitors have accessed this post 2493 times.

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 = [email protected]
  • 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. `userid` INT(11) NOT NULL AUTO_INCREMENT,
  3. `email` VARCHAR(50) NOT NULL,
  4. `password` VARCHAR(50) NOT NULL,
  5. `code` VARCHAR(20) NOT NULL,
  6. `verify` INT(1) NOT NULL,
  7. PRIMARY KEY(`userid`)
  8. ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

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.  
  3. $conn = mysqli_connect("localhost","root","","sample");
  4. if (!$conn) {
  5. die("Connection failed: " . mysqli_connect_error());
  6. }
  7.  
  8. ?>

index.php

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

  1. <?php
  2. include('conn.php');
  3.  
  4. if(isset($_SESSION['id'])){
  5. header('location:home.php');
  6. }
  7. ?>
  8.  
  9. <!DOCTYPE html>
  10. <html>
  11. <head>
  12. <title>Sign up Form with Email Verification in PHP/MySQLi</title>
  13. <script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  14. " 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>
  15. " 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">
  16. " rel="nofollow">https://fonts.googleapis.com/css?family=Open+San">
  17. </a> <link href="<a href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  18. " 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>
  19. <style>
  20. #login_form{
  21. width:350px;
  22. position:relative;
  23. top:50px;
  24. margin: auto;
  25. padding: auto;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <div class="container">
  31. <div id="login_form" class="well">
  32. <h2><center><span class="glyphicon glyphicon-lock"></span> Please Login</center></h2>
  33. <hr>
  34. <form method="POST" action="login.php">
  35. Email: <input type="text" name="email" class="form-control" required>
  36. <div style="height: 10px;"></div>
  37. Password: <input type="password" name="password" class="form-control" required>
  38. <div style="height: 10px;"></div>
  39. <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>
  40. </form>
  41. <div style="height: 15px;"></div>
  42. <?php
  43. if(isset($_SESSION['log_msg'])){
  44. ?>
  45. <div style="height: 30px;"></div>
  46. <div class="alert alert-danger">
  47. <span><center>
  48. <?php echo $_SESSION['log_msg'];
  49. unset($_SESSION['log_msg']);
  50. ?>
  51. </center></span>
  52. </div>
  53. <?php
  54. }
  55. ?>
  56. </div>
  57. </div>
  58. </body>
  59. </html>

signup.php

This is our sign up form.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Sign up Form with Email Verification in PHP/MySQLi</title>
  5. <script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  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. " 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. " rel="nofollow">https://fonts.googleapis.com/css?family=Open+San">
  9. </a> <link href="<a href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  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. <style>
  12. " rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  13. ...</a> #signup_form{
  14. width:350px;
  15. position:relative;
  16. top:50px;
  17. margin: auto;
  18. padding: auto;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div class="container">
  24. <div id="signup_form" class="well">
  25. <h2><center><span class="glyphicon glyphicon-user"></span> Sign Up</center></h2>
  26. <hr>
  27. <form method="POST" action="register.php">
  28. Email: <input type="text" name="email" class="form-control" required>
  29. <div style="height: 10px;"></div>
  30. Password: <input type="password" name="password" class="form-control" required>
  31. <div style="height: 10px;"></div>
  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. </form>
  34. <?php
  35. if(isset($_SESSION['sign_msg'])){
  36. ?>
  37. <div style="height: 40px;"></div>
  38. <div class="alert alert-danger">
  39. <span><center>
  40. <?php echo $_SESSION['sign_msg'];
  41. unset($_SESSION['sign_msg']);
  42. ?>
  43. </center></span>
  44. </div>
  45. <?php
  46. }
  47. ?>
  48.  
  49. </div>
  50. </div>
  51. </body>
  52. </html>

register.php

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

  1. <?php
  2. include('conn.php');
  3.  
  4. if ($_SERVER["REQUEST_METHOD"] == "POST") {
  5.  
  6. function check_input($data){
  7. $data=trim($data);
  8. $data=stripslashes($data);
  9. $data=htmlspecialchars($data);
  10. return $data;
  11. }
  12.  
  13. $email=check_input($_POST['email']);
  14. $password=md5(check_input($_POST['password']));
  15.  
  16. if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  17. $_SESSION['sign_msg'] = "Invalid email format";
  18. header('location:signup.php');
  19. }
  20.  
  21. else{
  22.  
  23. $query=mysqli_query($conn,"select * from user where email='$email'");
  24. if(mysqli_num_rows($query)>0){
  25. $_SESSION['sign_msg'] = "Email already taken";
  26. header('location:signup.php');
  27. }
  28. else{
  29. //depends on how you set your verification code
  30. $set='123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  31. $code=substr(str_shuffle($set), 0, 12);
  32.  
  33. mysqli_query($conn,"insert into user (email, password, code) values ('$email', '$password', '$code')");
  34. $uid=mysqli_insert_id($conn);
  35. //default value for our verify is 0, means it is unverified
  36.  
  37. //sending email verification
  38. $to = $email;
  39. $subject = "Sign Up Verification Code";
  40. $message = "
  41. <html>
  42. <head>
  43. <title>Verification Code</title>
  44. </head>
  45. <body>
  46. <h2>Thank you for Registering.</h2>
  47. <p>Your Account:</p>
  48. <p>Email: ".$email."</p>
  49. <p>Password: ".$_POST['password']."</p>
  50. <p>Please click the link below to activate your account.</p>
  51. <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>
  52. </body>
  53. </html>
  54. ";
  55. //dont forget to include content-type on header if your sending html
  56. $headers = "MIME-Version: 1.0" . "\r\n";
  57. $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
  58. $headers .= "From: <a href="mailto:[email protected]" rel="nofollow">webmaster@sourcecodester.com</a>". "\r\n" .
  59. "CC: <a href="mailto:[email protected]" rel="nofollow">ndevierte@gmail.com</a>";
  60.  
  61. mail($to,$subject,$message,$headers);
  62.  
  63. $_SESSION['sign_msg'] = "Verification code sent to your email.";
  64. header('location:signup.php');
  65.  
  66. }
  67. }
  68. }
  69. ?>

activate.php

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

  1. <?php
  2. include('conn.php');
  3. if(isset($_GET['code'])){
  4. $user=$_GET['uid'];
  5. $code=$_GET['code'];
  6.  
  7. $query=mysqli_query($conn,"select * from user where userid='$user'");
  8. $row=mysqli_fetch_array($query);
  9.  
  10. if($row['code']==$code){
  11. //activate account
  12. mysqli_query($conn,"update user set verify='1' where userid='$user'");
  13. ?>
  14. <p>Account Verified!</p>
  15. <p><a href="index.php">Login Now</a></p>
  16. <?php
  17. }
  18. else{
  19. $_SESSION['sign_msg'] = "Something went wrong. Please sign up again.";
  20. header('location:signup.php');
  21. }
  22. }
  23. else{
  24. header('location:index.php');
  25. }
  26. ?>

login.php

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

  1. <?php
  2. include('conn.php');
  3.  
  4. if ($_SERVER["REQUEST_METHOD"] == "POST") {
  5.  
  6. function check_input($data) {
  7. $data = trim($data);
  8. $data = stripslashes($data);
  9. $data = htmlspecialchars($data);
  10. return $data;
  11. }
  12.  
  13. $email=check_input($_POST['email']);
  14. $password=md5(check_input($_POST['password']));
  15.  
  16. if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  17. $_SESSION['log_msg'] = "Invalid email format";
  18. header('location:index.php');
  19. }
  20. else{
  21. $query=mysqli_query($conn,"select * from user where email='$email' and password='$password'");
  22. if(mysqli_num_rows($query)==0){
  23. $_SESSION['log_msg'] = "User not found";
  24. header('location:index.php');
  25. }
  26. else{
  27. $row=mysqli_fetch_array($query);
  28. if($row['verify']==0){
  29. $_SESSION['log_msg'] = "User not verified. Please activate account";
  30. header('location:index.php');
  31. }
  32. else{
  33. $_SESSION['id']=$row['userid'];
  34. header('location:index.php');
  35. }
  36. }
  37. }
  38.  
  39. }
  40. ?>

home.php

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

  1. <!DOCTYPE html>
  2. <title>Sign up Form with Email Verification in PHP/MySQLi</title>
  3. <script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  4. " 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>
  5. " 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">
  6. " rel="nofollow">https://fonts.googleapis.com/css?family=Open+San">
  7. </a> <link href="<a href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8. " 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>
  9. </head>
  10. <div class="container">
  11. <h2>Login Successful</h2>
  12. <p><a href="logout.php">Logout</a></p>
  13. </div>
  14. </body>
  15. </html>

logout.php

Lastly, our logout that will destroy our login session.

  1. <?php
  2. header('location:index.php');
  3. ?>

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


Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Comments

thanks a lot mate!

it is not working,sir.

in which part sir?

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe>
  • You may insert videos with [video:URL]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.