User Registration Form with PHP, MySQL and Google reCAPTCHA

Earlier, I have shared tutorial to Simple PHP Login System Using MySQL and jQuery AJAX.This tutorial is second part of user module to create user registration using php and MySQL with Google captcha.I am using Bootstrap to create registration form and jQuery validation plugin for form validation.We will do google PHP captcha validation from server side.

user-signup-captcha

You can check other recommended tutorial of User Module in PHP,

I will use following files for this user Registration tutorial,

  • index.php : This file is main entry file of user management application.
  • response.php : This file will contain user registration method.
  • partials/ : This folder will have partial file like header.php and footer.php file.
  • connect/db_cls_connect.php : This folder will contain MySQL db connection file.
  • libs/ : This folder will have all dependencies files.

We need to create above files and folder structure into 'php_ajax_registraion_with_php_jquery' folder.

What’s Captcha

CAPTCHA stands for “Completely Automated Public Turing test to tell Computers and Humans Apart”, it’s very common functionality to use at the time of submit data to prevent machines access of your website.

Create Signup table and MySQL Database Connection

We will create 'test' database into MySQL server and create 'tbl_users' table into this database using below SQL script,

We will create db_cls_connect.php file into connect folder if not created, We will add below MySQL connection information to connection php with MySQL.

As you can see, I have passed below MySQL database parameters.

  • $servername : MySQL server host //localhost
  • $username : MySQL database user name //root
  • $password : MySQL database pass
  • $dbname : MySQL database name //test

How to use Google reCAPTCHA

Its very easy to use and integrate with any application, google are providing well defined docs for each server side application, I am using PHP so i ll use php process to integrate google reCaptcha. You can download PHP google reCaptcha Lib.

Register Hostname with Google reCAPTCHA

We are creating user registration form with captcha functionality. You can use or create custom captcha as well like Simple CAPTCHA Script Using PHP. To use Google reCAPTCHA, we need to register website hostname with google reCAPTCHA.

Google provided Site key and Secret key against registered domain/website.You will use Site key and Secret key into your registration form to validate captcha form.There is also a js file that need to include into header of your application.

How to display Google reCAPTCHA into HTML form

We will pass class name and data-sitekey site attribute with in captcha HTML container, The container may be HTML div,li span etc.

PHP User Registration With MySQL and Google reCAPTCHA

We will create user signup form using bootstrap 3 and added some jquery code to submit HTML form using ajax.We will get ajax submitted form values at server side using php.

We will do google captcha validation here and send exception message if validation failed, after form validation success we will save user information into HTML table.

Step 1: I am assuming you have have added bootstrap and jQuery lib files if not added please add into head section of index.php file other wise add only google captcha js file.

Step 2: Create User Registration html view using bootstrap 3 and added below HTML code into register.php file.

I have defined a div(#error) which will use to show error message and '#success' div to show success message.I will use form id(#register-form) to validate input fields and button id for show sign-in process.
at the end of form, I have added div to show google reCaptcha using data-sitekey attribute.

Step 3: Create submit register method into common.js file.

registerForm() method will use into next step to validate form using jQuery validation, passed AJAX url 'response.php?action=register', so I need to create a method into response.php file to handle user register request and send response.

Step 4: We will use jquery form validation code into common.js file. We will add below code into this file.

I have defined roles for each input fields and passed message on failed of validation, Since i am using jQuery so all validation process handle by client side. I have passed registerForm method to submitHandler once successfully validate all signup form fields.

Step 5: Created register method into response.php file.

We have added php google recaptcha into response.php file to access reCaptcha methods.We will first get all posted data from client side and passed to register method.We will check empty value and validate google recaptcha, after successful validation, we are saving user information into MySQL user table.

You can download source code and see Demo from below link.