Ajax Registration Form In CodeIgniter with MySQL

By | December 22, 2016

In today’s post we are going to check ajax registration form in codeigniter. Codeigniter is one of the best open source php framework for building robust web applications. Any Web Application needs a good registration system so we decided to share simple registration system using Ajax in Codeigniter. We are going to use very simple code for this tutorial.

Ajax Registration Form In CodeIgniter

In our previous tutorial we covered Registration system in codeigniter without Ajax

For this we need two views and one controller. So lets check tutorial on ajax registration form in codeigniter.

Ajax Registration Form In CodeIgniter

database


CREATE DATABASE `codeigniter_insert` ;

CREATE TABLE IF NOT EXISTS `profile` (
`first_name` varchar(11) NOT NULL,
`last_name` varchar(55) NOT NULL,
`email` varchar(55) NOT NULL,
`password` varchar(55) NOT NULL
) ;

signup.php (view)

In this file we are collecting details from input fields and are submitting form using Ajax Post method which will first serialize the form and then submit details to registration controller insert() method.


<!DOCTYPE html>
<html>
<head>
 <title></title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>

#main{

 position: absolute;
 top:200px;
 left:550px;
 width: 220px;
 padding: 10px;
 border: 3px solid green;
 margin: 1; 

}

</style>

</head>
<body>



<nav class="navbar navbar-default">

<div class="container-fluid">
 <!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#">TechPlugg Dashboard</a>
 </div>

<ul class="nav navbar-nav navbar-right">
 </ul>

 </div>

<!-- /.navbar-collapse -->
 </div>

<!-- /.container-fluid -->
</nav>

<center>

<h1>Welcome to TechPlugg</h1>

We are a Tech Blog with Programming tutorials

</center>
<div class="ajax_response">
 <form id="login_form" >
 <div id ="main">
 <input type="text" name="first_name" placeholder="Enter first Name" /><br/><br/><br/>
 <input type="text" name="last_name" placeholder="Enter last Name"/><br/><br/><br/>
 <input type="text" name="email" placeholder="Enter your Email ID" /><br/><br/><br/>
 <input type="password" name="password" placeholder="Enter a password"/><br/><br/><br/>

 <center><input type="submit" value="Register" id="btn-login" name="btn-login" class="btn btn-primary"/></center>
 </form></div>
 </form> 


</body>
</html>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() { 
 $('#btn-login').click(function(){
 jQuery.ajax({
 type: "POST",
 url: "<?php echo base_url();?>/index.php/Registration/add", 
 data: $("#login_form").serialize(),
 success: function(response) {
 $(".ajax_response").html(response);
 }
 });
 return false;

 });
});
</script>

Registration.php (controller)

Registration controller is responsible for inserting values in MySQL database. If the values are inserted successfully then control returns back to signup.php view and then success_signup.php view is loaded.

<?php
class Registration extends CI_Controller {

 function __construct()
 {
 parent::__construct();
 $this->load->helper(array('form', 'url'));
 }

 //index function
 /*function index()
 {
 //load file upload form
 $this->load->view('signup');
 }*/

 public function signup()
 {
 $this->load->view('signup');
 }
 function add()
 {
 

 $first_name = $this->input->post('first_name');
 $last_name = $this->input->post('last_name');
 $email = $this->input->post('email');
 $password = md5(trim($this->input->post('password')));
 if($first_name !='' && $last_name !='' && $email !='' && $password!='')
 {
 $data = array('first_name'=>$first_name,'last_name'=>$last_name,'email'=>$email,'password'=>$password);
 $this->db->insert('profile',$data);
 unset($_POST);
 $this->load->view('success_signup');
 } 
 
 }
 
}
?>

success_signup.php (view)


<h3>Data has been successfully inserted</h3>

<a href="<?php echo base_url(); ?>index.php/Registration/signup">Register new account</a>

You might also like

Codeigniter insert, update, delete Tutorial.

With this tutorial we covered ajax registration form in codeigniter. Also check Login system in codeigniter. In the upcoming posts we will share more such useful tutorials.