Codeigniter registration form with validation using Ajax: Codeigniter Club

Codeigniter registration form with validation using Ajax

In this tutorial, we will understand how to create a simple registration form using CodeIgniter. Before starting we have to create a Unique constraint (email id is a unique constraint in the database table) because if we enter a Duplicate email id the database will through a duplicate entry error and we can print an error. Otherwise, we can use another method using programming. we can check email-id already exist or not. 

Create database table using Mysql database

CREATE TABLE `registration` (
  `id` int(11) NOT NULL,
  `username` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL,
  `country` varchar(100) NOT NULL,
  `password` varchar(200) NOT NULL,
  `agree` varchar(10) NOT NULL,
  `created_at` datetime NOT NULL DEFAULT current_timestamp(),
  `update_at` datetime NOT NULL DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Insert Data 

INSERT INTO `registration` (`id`, `username`, `email`, `country`, `password`, `agree`, `created_at`, `update_at`) VALUES
(8, 'Dev Mediax', 'devmediax@gmail.com', 'India', '27992c9a9afb0fd83579abda8a257f6b', 'on', '2022-01-01 12:22:45', '2022-01-01 12:22:45');

Create View 

<div class="container-scroller">
<div class="container-fluid page-body-wrapper full-page-wrapper">
<div class="content-wrapper d-flex align-items-stretch auth auth-img-bg">
<div class="row flex-grow">
<div class="col-lg-6 d-flex align-items-center justify-content-center">
<div class="auth-form-transparent text-left p-3">
<div class="brand-logo" style="text-align:center;font-weight:400;font-size:30px;">
<sapn style="color:orange;font-weight:600;">{...}</sapn>
<br>
<span>The Developer Club</span>
</div>
<h4>New here?</h4>
<h6 class="font-weight-light">Join us today! It takes only few steps</h6>
<div id="message"></div>
<div id="redirect_login" style="display:none;">Do you want to <a href='<?php echo base_url('Login');?>'>Login?</a></div>
<form id="tdc_register" class="pt-3">
<div class="form-group">
<label>Username</label>
<div class="input-group">
<div class="input-group-prepend bg-transparent">
<span class="input-group-text bg-transparent border-right-0">
<i class="mdi mdi-account-outline text-primary"></i>
</span>
</div>
<input type="text" id="username" name="username" class="form-control form-control-lg border-left-0" placeholder="Username">
</div>
</div>
<div class="form-group">
<label>Email</label>
<div class="input-group">
<div class="input-group-prepend bg-transparent">
<span class="input-group-text bg-transparent border-right-0">
<i class="mdi mdi-email-outline text-primary"></i>
</span>
</div>
<input type="email" id="eamil" name="email" class="form-control form-control-lg border-left-0" placeholder="Email">
</div>
</div>
<div class="form-group">
<label>Country</label>
<select name="country" id="country" class="form-control form-control-lg" id="exampleFormControlSelect2">
<option>Country</option>
<option>United States of America</option>
<option>United Kingdom</option>
<option>India</option>
<option>Germany</option>
<option>Argentina</option>
</select>
</div>
<div class="form-group">
<label>Password</label>
<div class="input-group">
<div class="input-group-prepend bg-transparent">
<span class="input-group-text bg-transparent border-right-0">
<i class="mdi mdi-lock-outline text-primary"></i>
</span>
</div>
<input type="password" id="password" name="password" class="form-control form-control-lg border-left-0" id="exampleInputPassword" placeholder="Password">
</div>
</div>
<div class="mb-4">
<div class="form-check">
<label class="form-check-label text-muted">
<input type="checkbox" id="agree" name="agree" class="form-check-input">
I agree to all Terms & Conditions
</label>
</div>
</div>
<div class="mt-3">
<button class="btn btn-block btn-primary btn-lg font-weight-medium auth-form-btn">SIGN UP</button>
</div>
<div class="text-center mt-4 font-weight-light">
Already have an account? <a href="<?php echo base_url('login');?>" class="text-primary">Login</a>
</div>
</form>
</div>
</div>
<div class="col-lg-6 register-half-bg d-flex flex-row">
<p class="text-white font-weight-medium text-center flex-grow align-self-end">Copyright &copy; 2021  All rights reserved.</p>
</div>
</div>
</div>
<!-- content-wrapper ends -->
</div>
<!-- page-body-wrapper ends -->
</div>

Create Controller 

public function register(){
if($_POST){
$this->form_validation->set_rules('username', 'User Name', 'required');
$this->form_validation->set_rules('email', 'Email', 'required');
$this->form_validation->set_rules('country', 'Country', 'required');
$this->form_validation->set_rules('password', 'Password', 'required');
$this->form_validation->set_rules('agree', 'Agree', 'required');
if($this->form_validation->run() == FALSE){
$response = array(
'status' => 'error',
'message' => validation_errors()
);
}else {
$registrationData = array(
'username' => $this->input->post('username', true),
'email' => $this->input->post('email', true),
'country' => $this->input->post('country', true),
'password' => MD5($this->input->post('password', true)),
'agree' => $this->input->post('agree', true)
);
$id = $this->Login_Model->insert_registration($registrationData);
$response = array(
'status' => 'success',
'message' => "Registraion successful."
);
}
$this->output
->set_content_type('application/json')
->set_output(json_encode($response));
}else{
$this->load->view('sign_up');
}
}

Create Model

public function insert_registration($data){
        $this->db->insert('registration', $data);
        return $this->db->insert_id();
    }