Email Availability In CI 4 And Vuejs.

In this post, we will make a script for implement email availability for registration feature using Vue.js and CodeIgniter 4. This is very common functionality and it is mandatory for most of the websites which is available online. If in your website, you have give login rights to user by entering their email and password, and get access into websites. Then at that time their email address must be unique. For this things when user has come into your websites for new account registration, then at that time we have to check email is available for registration or not for prevent duplicate registration with same email address.

To solve this problem, we will use Vue.js with Codeigniter4 script for check email already exists in our Mysql database or not. If email is already exists then at that time we will show error message “This email is already exist”.

####### Download & Configure CodeIgniter 4 Application.

Download the fresh version of CodeIgniter from https://codeigniter.com/download and unzip this in your working directory and configure the base url in app/Config/App.php.

    public $baseURL = 'http://localhost:8080'; 
    To
    public $baseURL = 'http://localhost/crud/public'; 

####### Configure Database And Create Table.

In this step we will create database crud and table products in the crud database.

CREATE TABLE `user` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `email` varchar(100) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1

Now update the database credential in app/Config/Database.php.

public $default = [
        'DSN'      => '',
        'hostname' => 'localhost',
        'username' => 'root',
        'password' => '',
        'database' => 'demo',
        'DBDriver' => 'MySQLi',
        'DBPrefix' => '',
        'pConnect' => false,
        'DBDebug'  => (ENVIRONMENT !== 'production'),
        'cacheOn'  => false,
        'cacheDir' => '',
        'charset'  => 'utf8',
        'DBCollat' => 'utf8_general_ci',
        'swapPre'  => '',
        'encrypt'  => false,
        'compress' => false,
        'strictOn' => false,
        'failover' => [],
        'port'     => 3306,
    ];

####### Create Controller.

In this step we will create a controller named as LoginController. So create controller in the app/Controllers directory and put the below code .

<?php 
namespace App\Controllers;
use App\Models\LoginModel;
use CodeIgniter\Controller;
use App\Models\UserModel;
use CodeIgniter\API\ResponseTrait;

class TestController extends Controller
{
     private $user_model = '' ;
    use ResponseTrait;

    public function __construct(){   
        $this->user_model = new UserModel();       
    }

    // show login form
    public function index()    {  
         return view('loginform');
    }   

     public function checkEmail(){

      $data = json_decode(file_get_contents("php://input"));
      $email =  $this->user_model->where(array('email'=>$data->email)); 
      $rows = $this->user_model->countAllResults();      
        if($rows!=0){

            $response[] = array('status'=>0,'msg'=>'This EmailId is already exist');

        }else{
            $response[] = array('status'=>1,'msg'=>"Form is submitted");
        }

        return $this->respond($response);
     }  

}

#vue #codeigniter #programming #developer