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);
}
}
Add below code in route inside the app/Config/Routes.php.
$routes->get('/', 'TestController ::index');
$routes->post('checkemail', 'TestController ::checkEmail'); Create Model.
The model is used to communicate with the user table. So create model LoginModel in the app/Models/  directory and put the below code.
<?php
namespace App\Models;
use CodeIgniter\Model;
class UserModel extends Model
{
protected $table = 'user';
}
Create Login View.
In this step we will create a view named as loginform. So create view in the app/Views directory and put the below code .
<html lang="en">
<head>
<title>Email Availability Using VueJs IN CI4</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"></script>
</head>
<body>
<div class="container" id="app">
<div class="container">
<h4 class="text-success">Email Availability Using VueJs IN CI4</h4>
<div class="panel panel-primary">
<div class="panel-heading">Email Availability Using VueJs IN CI4</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label col-sm-2">Email:</label>
<div class="col-sm-5">
<input class="form-control" type="email" name="email" v-model="email" >
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"></label>
<div class="col-sm-5">
<input type="button" @click='checkEmail();' value="Check Availability" class="btn btn-primary">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
email: "",
},
methods: {
checkEmail: function() {
if (this.email != '') {
axios.post('<?=site_url()?>'+'/checkemail', {
email: this.email,
})
.then(function(response) {
if(response.data[0].status==1){
alert(response.data[0].msg)
location.reload()
}else{
alert(response.data[0].msg)
}
})
.catch(function(error) {
console.log(error);
});
}else {
alert('Please enter email');
}
}
}
})
</script>
</html>
