Email Availability Using VueJs With Codeigniter 4

Email Availability Using VueJs With Codeigniter 4

We will make a script for implement email availability for registration feature using Vue.js and CodeIgniter 4. 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”.

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CodeIgniter Developer

Want to create unique, scalable web and app solutions? At **[HourlyDeveloper.io](https://hourlydeveloper.io/ "HourlyDeveloper.io")**, Expert CodeIgniter developer works particularly for you and your project. You can **[Hire CodeIgniter...

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.

Developer Career Path: To Become a Team Lead or Stay a Developer?

For a developer, becoming a team leader can be a trap or open up opportunities for creating software. Two years ago, when I was a developer, ... by Oleg Sklyarov, Fullstack Developer at Skyeng company

Vue.js Web App Development | Skenix Infotech

Our expert Vue.js developers follows Agile methodology that delivers high-quality & affordable Vue.js services. Hire Vue.js Developer from Skenix Infotech.

CodeIgniter Web Development

Skenix Infotech is a prominent CodeIgniter website development Company specialized in web applications and provides custom CodeIgniter development services.