Registration Form in codeigniter with mysql

2019-12-09 Raj Thakur Download Code

In this tutorial, we will implementation how to create a simple registration form in CodeIgniter with MySQL. Before inserting the user's data inside database we will check user email id is already exists then show error message "User already exists" if not already exists then store information inside the database. We also include the MD5 algorithm for password ecrytion  We will use the user details table to save data.

Create database tables:

CREATE TABLE `user_details_table` (
  `id` int(11) NOT NULL,
  `user_name` varchar(50) NOT NULL,
  `user_password` varchar(50) NOT NULL,
  `user_email_id` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Database Configuration (Application/config/database.php)

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'user_detail',
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);

Controllers (Application/controllers/Sign_Up.php)

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Sign_Up extends CI_Controller {

	public function index()
	{
		$this->load->view('layout/index');
	}
	public function register()
		{
				
			if($this->input->post('user_login_key')==$this->input->post('c_user_login_key')){


				$emailid=$this->input->post('email_id');
				if ($this->Data_model->check_user($emailid))
				{
					
					$response='Email address already available.';
				}
				else
				{
					
						if ($this->Data_model->add_user()) 
						{
							
							$response="Thank you for registration.";
						}
						else
						{
							
							$response="Please try again.";
						}

			
				}	
			}
			else{
				$response='please check password.';
			}

				echo json_encode($response);
		}
}
?>

View (Application/views/layout/index.php)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
    <title>Registration Form in codeigniter with mysql</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">

@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
body{
    margin: 0;
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.6;
    color: #212529;
    text-align: left;
    background-color: #f5f8fa;
}
.navbar-laravel
{
    box-shadow: 0 2px 4px rgba(0,0,0,.04);
}

.navbar-brand , .nav-link, .my-form, .login-form
{
    font-family: Raleway, sans-serif;
}

.my-form
{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.my-form .row
{
    margin-left: 0;
    margin-right: 0;
}

.login-form
{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.login-form .row
{
    margin-left: 0;
    margin-right: 0;
}
    </style>

</head>
<body>
<main class="my-form">
    <div class="cotainer">
        <div class="row justify-content-center">
            <div class="col-md-5">
                    <div class="card">
                        <div class="card-header">Register</div>
                        <div class="card-body">
                           
                                <div class="form-group row">
                                    <label for="full_name" class="col-md-4 col-form-label text-md-right">Full Name</label>
                                    <div class="col-md-6">
                                        <input type="text" id="full_name" class="form-control" name="full-name" required>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="email_address" class="col-md-4 col-form-label text-md-right">E-Mail Address</label>
                                    <div class="col-md-6">
                                        <input type="text" id="email_address" class="form-control" name="email-address" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
                                    <div class="col-md-6">
                                        <input type="password" id="passkey" class="form-control" name="username" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="confirm password" class="col-md-4 col-form-label text-md-right">Confirm password</label>
                                    <div class="col-md-6">
                                        <input type="password" id="cpasskey" class="form-control" required>
                                    </div>
                                </div>
                                    <div class="col-md-6 offset-md-4">
                                        <button type="submit" class="btn btn-primary" id="useradd">
                                        Register
                                        </button>
                                    </div>
                                </div>
                          
                        </div>
                    </div>
            </div>
        </div>
    </div>
</main>
      <div id="errormodal" class="modal" tabindex="-1" role="dialog">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
               
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Ok</button>
           
              </div>  
            </div>
          </div>
        </div>
<script  src="https://code.jquery.com/jquery-3.4.1.js"
              integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
              crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

</body>
</html>

View (Application/models/Data_model.php)

<?php
class Data_model extends CI_Model
{	
	//user
	public function add_user(){


 		$field  = array('user_name' => $this->input->post('full_name'), 
 						'user_password' => md5($this->input->post('user_login_key')), 
 						'user_email_id' => $this->input->post('email_id'), 
 					
 			);
		return $this->db->insert('user_details_table',$field);
	}

		public function check_user($eid)
	{
		$u=$this->db->select()
				->where('user_email_id',$eid)
				->get('user_details_table');
				return $u->row_array();
	}
}

?>

JavaScript:

 <script type="text/javascript">
$(document).ready(function () {
    $("#useradd").on('click', function () {
      // body...
      
        first_name=$("#full_name").val();    
        email_address=$("#email_address").val();
        passkey=$("#passkey").val();    
        cpasskey=$("#cpasskey").val();    

      if (first_name.length!=0 && email_address.length!=0 && passkey.length!=0 && cpasskey.length!=0 ) {
        $.ajax({
          url: "<?php echo base_url() ?>Sign_Up/register",
          method: 'POST',
          datatype: 'text',
          data: {
            full_name:first_name,
            email_id :email_address,
            user_login_key:passkey,
            c_user_login_key:cpasskey
          },
          success:function (response) {
            $('#errormodal').modal('show');
            var decode_useradd = $.parseJSON(response);
            $('#errormodal').find('.modal-body').text(decode_useradd);
            },
          error: function(){
            $('#errormodal').modal('show');
            var decode_useradd = $.parseJSON(response);
            $('#errormodal').find('.modal-body').text(decode_useradd);
          }

        });
      }
      else{
            $('#errormodal').modal('show');
            $('#errormodal').find('.modal-body').text('Please check your input.');
      }
  
    });    

});

</script>

 

 


About author

Card image cap
Raj Thakur

I’m a full-stack developer, with a strong programming knowledge on web base frameworks.!

-PHP developer

0 Comments


Scroll to Top