Bootstrap Example

Ajax Registration Script with PHP, MySQL and jQuery

In our previous tutorial, we have handled Ajax Login Script with PHP, MySQL and jQuery. In this tutorial we will handle user registration form with PHP, MySQL and jQuery with Demo. We have used Bootstrap to create registration form and form validation using jQuery validation plugin. The registration form accepts data from user and store into MySQL database without page refresh.

You can see the live demo of this tutorial and also download complete running demo script.

We have handled tutorial in very easy steps. So let’s start the coding.

Steps1: Create MySQL Database Table
For this tutorial, we have used MySQL database table “users”. So used below code to create table.

CREATE TABLE IF NOT EXISTS `users` ( `uid` int(11) NOT NULL AUTO_INCREMENT, `user` varchar(255) DEFAULT NULL, `pass` varchar(100) DEFAULT NULL, `email` varchar(255) DEFAULT NULL, `profile_photo` varchar(200) DEFAULT NULL, PRIMARY KEY (`uid`), UNIQUE KEY `username` (`user`), UNIQUE KEY `email` (`email`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Steps2: Create MySQL Database Connection
We have created db_connect.php PHP file to make connection with MySQL database.

Steps3: Include Bootstrap, jQuery and JavaScript Files
For this tutorial. we have created PHP file index.php and included all necessary library files (Bootstrap, jQuery, validation js) and CSS files in head tag.

Steps4: Create Register Form HTML

Then in index.php, we have created registration form HTML using Bootstrap.

 
 
User Registration Form
 
 
 
 
 
 
 
 
 
 
 
 Create Account 
 
 
 

Steps5: Form Validation and Submit with jQuery Ajax

Then in registr.js JavaScript file, we handled registration form validation and submission with jQuery Ajax to make ajax request to server to PHP file register.php to insert user registration details into MySQL database. Also displaying messages with this script according to returned response.

$('document').ready(function() < /* handle form validation */ $("#register-form").validate(< rules: < user_name: < required: true, minlength: 3 >, password: < required: true, minlength: 8, maxlength: 15 >, cpassword: < required: true, equalTo: '#password' >, user_email: < required: true, email: true >, >, messages: < user_name: "please enter user name", password:< required: "please provide a password", minlength: "password at least have 8 characters" >, user_email: "please enter a valid email address", cpassword: < required: "please retype your password", equalTo: "password doesn't match !" >>, submitHandler: submitForm >); /* handle form submit */ function submitForm() sending . '); >, success : function(response) < if(response==1)< $("#error").fadeIn(1000, function()< $("#error").html('
Sorry email already taken !
'); $("#btn-submit").html(' Create Account'); >); > else if(response=="registered") < $("#btn-submit").html(' Signing Up . '); setTimeout('$(".form-signin").fadeOut(500, function()< $(".register_container").load("welcome.php"); >); ',3000); > else < $("#error").fadeIn(1000, function()< $("#error").html('
'+data+' !
'); $("#btn-submit").html(' Create Account'); >); > > >); return false; > >);

Steps6: Process User Register at Server end

Now finally in register.php PHP file, we will store user register details into MySQL database table if user email not already stored.

• Working with php.ini file Configuration
• Control Statements in PHP
• Convert Associative Array into XML in PHP
• Convert XML into Associative Array in PHP
• Using Prepared Statement with PHP & MySQL
• How to Upload File in PHP
• Converting an Array to JSON in PHP
• Converting JSON to Array or Object in PHP
• Manipulating PHP arrays: push, pop, shift, unshift
• Remove Repeated Words From String in PHP
• Converting a PHP Array to a Query String
• 15+ regular expressions for PHP developers
• 10 Most Important Directory Functions in PHP
• 10 little known but useful PHP functions
• PHP Script to Download Large Files Reliably

You can view the live demo from the Demo link and can download the script from the Download link below.
Demo Download

Источник

Registration Form using Ajax, PHP & MySQL

If you want to create a registration form that will not reload after submitting the registration details. Then you should make the ajax registration form with PHP & MySQL.

The Ajax Registration form is very useful to process the registered data quickly to the database without refreshing the web page. So. It is frequently used in most of web applications to make their registration form userfriendly & attractive.

In this tutorial, I have shared some simple steps to create the registration/signup form using jquery ajax in PHP & MySQL. Once you learn it you can create any type of other registration forms.

Steps to Create Ajax Registration Form with PHP & MySQL

Now, Let’s start the coding to create the ajax registration form with the following simple steps –

1. Create Registration Form Directory Structure

First of all, You should create the following directory structure to build the registration form.

source-code/ |__database.php |__ajax-script.php |__php-script.php |__index.php |

2. Create MySQL Table

Now, Create a MySQL Database –

Database Name – codingstatus

CREATE DATABASE codingstatus

After that create a table in the database ‘codingstatus’

CREATE TABLE `users` ( `id` int(10) NOT NULL AUTO_INCREMENT, `firstName` varchar(50) DEFAULT NOT NULL, `lastName` int(50) DEFAULT NOT NULL, `gender` int(10) DEFAULT NOT NULL, `emailAddress` int(50) DEFAULT NOT NULL, `password` int(20) DEFAULT NOT NULL );

3. Connect PHP to MySQL Database

Now, You have to connect PHP to the MySQL database with the following code

4. Create a Registration Form UI

To create the registration form UI, You have to follow the following points –

• Create a basic HTML structure
• Include the bootstrap5 CDN
• Create a form with id ‘registrationForm’
• Also, create some input fields for firstName, lastName, gender, email & submit button.
• Include the jQuery CDN
• Include the ajax-script.js

        
 
 
 
Ajax Registration Form
 
 
 
 
Male Female
 
 
 
Register Now  
 
    

5. Write ajax code for Registration

Now, We have to write ajax code to process the user Input to the PHP script. So, create a ajax-script.php and write the jquery ajax code. This code will execute when the user submits the form after filling out their registration.

To write an ajax code for registration, you have to follow the following points –

• Apply the submit event on the form id ‘registrationForm’
• Define the e.preventDefault to prevent the form from the reloading
• Implement the next steps within the $.ajax()
• define the form method post
• define the PHP file path – php-script.php
• also, serialize the input data using serialize() method
• define the success to get the success response
• display the success message in the id ‘msg’
• After the registered successfully, make empty all the input fields.

$(document).on('submit','#registrationForm',function(e)< e.preventDefault(); $.ajax(< method:"POST", url: "php-script.php", data:$(this).serialize(), success: function(data)< $('#msg').html(data); $('#registrationForm').find('input').val('') >>); >);

6. Write PHP to Insert Registration Data

Now, We have to insert input data into the database, So, create a php-script.php file and write the php code with the MySQL query. The code of this file will run while the ajax code will be executed and sent the post request.

To insert registration data, you have to write PHP code with the following points-

1. Include the database.php file
2. and assign connection variable $conn to the $db
3. Create a custom function registerUser() with two parameters $db and $userData.
4. write a MySQLi query to insert data into the database,
5. And then call the created function registerUser()

query($query); echo $db->error; if($execute) < echo "You are registered successfully"; >> else < echo "Wrong Confirm password"; >> else < echo "All Fields are required"; >>

7. Test Ajax Registration Form yourself

Now, You can text the ajax registration form by opening it in the web browser.

When you open the registration form will get the First Name, Last Name, gender, Email, Password & Confirm Password input fields.

After that Enter the required details and submit the form. after that, you will be registered successfully without reloading the web page.

Related posts:

Источник

Registration Form Using Ajax PHP MySQL

We’ll learn how to make a registration form using Ajax PHP and MySQL in this tutorial.

Using jQuery and the Ajax way, this example will show how to create a registration form that receives user data and stores it in a MySQL database without requiring a page refresh.

Also covered is form validation with JavaScript before submitting the form request to the server, as well as communicating with PHP via the $.ajax() method.

This example is much simpler; it describes everything in-depth, especially the ajax codes.

Table Content

1. Database And Table Schema

2. Database Configuration

3. Create Registration Form

4. Implementing jQuery And Ajax Method

5. PHP Script

6. Test Application

Database And Table Schema

Create a database to hold the user’s information. The database name in this example is ajax_registration_db, but you can call it whatever you like.

To store user information, copy and paste the SQL code below into your PhpMyadmin after creating the database.

CREATE TABLE `tbl_user` ( `id` int(11) NOT NULL, `username` varchar(50) NOT NULL, `email` varchar(100) NOT NULL, `password` varchar(100) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Database Configuration

This is the «dbconfig.php» file, which contains database settings with PDO extensions that are required to connect to the MySQL database successfully.

;dbname=",$db_user,$db_password); $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); > catch(PDOEXCEPTION $e) < $e->getMessage(); > ?>

Create Registration Form

The index.php file is located here. This file has a bootstrap-based registration form. There are three fields on this form: username, email, and password, as well as a register button.

When a user clicks the Register button after filling out the form data, this form request will be transferred to a PHP file using jQuery and the Ajax procedure.

Look before closing the

tag a division tag is here. We’ll apply jquery and the ajax methods to show the user registration success message in this tag.

Username