Friday, 29 November 2019

PHP MySql Based Online Exam System Project



This tutorial will help you to make Online Examination System using PHP script with Mysql Database. So, Are looking for any educational project or build small system in PHP using Mysql database, then you have come on the right place. Because in this post, you can find the solution of your needs. Here we will build Online Examination application in PHP with Mysql database, which will help you to build your education final year project. And if you are beginner level of PHP programmer and are you learn how to any Online dynamic system in PHP then this post will help you.

What is Online Exam System?


In the world of internet, all task has been done through internet, so we have decide why Exam has not conducted through internet. For convert current exam system into digital exam system, we have build this small Online Exam system project. If this system has build in professional level then it will automate our existing examination system into digitize exam system. In this system it will required less labor force for execute system and it will be more accurate and less time consuming and at the same time we can conduct more person exam at the same time and it will publish result in a very short time. Below you can find benefits of Online Examination System. If this system has been implemented then examination will not limited in to four wall of class room, but student can part into exam from any place.

Benefits of Online Examination System


  1. Online Exam System will Save Organisation and Student Money.
  2. Online Exam System will Securely Store Exam Question Papar and it will directly visible to Student who has take part in Exam.
  3. Online Exam System will Save the Cost of Paper, because Exam will be conduct online.
  4. Online Exam System will reduce the cost of logestic for deliver question paper on examination center.
  5. Online Exam System will save the time of both Institution who has conduct examination and student who has take part in Exam.
  6. Online Exam System will provide Remote Supervision by using security feature of this system.
  7. Online Exam System will reduce the time of publish exam result with Ranking, because in single click result will be generated.
  8. Online Exam System will give us history of old examination in a single click.
  9. Online Exam System has provide all student information in single plateform.
  10. Online Exam System has provide facility to use to take part by using any electronic device in which internet access facility available.



Features of Online Exam System


Admin Side


  1. Admin Can Create New Online Exam with Edit and Delete Feature
  2. Admin Can Add Question in Exam which has been define at the time of create exam
  3. Admin Can View All Exam Question with Edit and Delete Operation
  4. Admin Can view all user data who has register for online examination system
  5. Admin can view all user who has enroll for particular exam
  6. Admin can view individual user exam result on web page and in PDF format
  7. Admin can view combine result of exam with user rank on web page and in PDF format

User Side


  1. New User Registration for Online Examination with Confirmation Email Feature
  2. User can Login into System using Email ID and Password
  3. User can manage his or her profile details
  4. User can change his or her password
  5. User can view available examination list
  6. User can enroll into examination
  7. User can attend online examination at the define date and time
  8. User can view the history of exam which he or she had enroll
  9. User can view the exam result on Web page and in PDF format also.

Technology used in Online Exam System



Front end


  1. HTML 5 - For make HTML Web page
  2. jQuery - For easier to use Javascript on web page
  3. Ajax - For Perform Server operation at client side
  4. Bootstrap 4 - For make Responsive Online Exam System
  5. jQuery Datatable Plugin - For list data on web page in table format with different feature like searching sorting etc.
  6. Parsley.js - For Validate form data at client side
  7. Bootstrap Datetimepicker - User for Data and time field form data
  8. TimeCircles - For Display remaining exam time on web page

Back end


  1. PHP 5.6+ - For write system login
  2. Mysql - For store system data
  3. PHPMailer - For Send email after registration
  4. DomPdf - For generate exam result in PDf format

Database Structure of Online Exam System



Source code Online Exam System


master/register.php


In this file we will make registration form for set up Admin account for Online Examination system. Suppose we have to require multiple Admin account for different purpose, so here we have make registration form for create new Admin account for Web based exam application. By this feature this system will be fully dynamic system.

For validate unique email address for admin registration, here we have use Parsley.js custom validator. This validator will check particular email already register in our system or not. This validator will trigger before form submission, when this validator has been trigger then it will send Ajax request to sever script for check admin has already register with particular email in our database.

Here we have use Ajax for submit Admin Registration form data to server, when we have click on register button, then by using jQuery code, it will add parsley attribute for verify form data. If form data is proper, then it will send form data to server using Ajax request.

master/register.php

<?php

//register.php

include('Examination.php');

$exam = new Examination;

$exam->admin_session_public();

?>

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Online Examination System in PHP</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
   <script src="https://cdn.jsdelivr.net/gh/guillaumepotier/Parsley.js@2.9.1/dist/parsley.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="../style/style.css" />
</head>
<body>
 <div class="jumbotron text-center" style="margin-bottom:0; padding: 1rem 1rem;">
     <img src="logo.png" class="img-fluid" width="300" alt="Online Examination System in PHP" />
 </div>

 <div class="container">
    <div class="row">
      <div class="col-md-3">

      </div>
      <div class="col-md-6" style="margin-top:20px;">
       <span id="message"></span>
         <div class="card">
           <div class="card-header">Admin Registration</div>
           <div class="card-body">
              <form method="post" id="admin_register_form">
                    <div class="form-group">
                        <label>Enter Email Address</label>
                        <input type="text" name="admin_email_address" id="admin_email_address" class="form-control" data-parsley-checkemail data-parsley-checkemail-message='Email Address already Exists' />
                    </div>
                    <div class="form-group">
                      <label>Enter Password</label>
                      <input type="password" name="admin_password" id="admin_password" class="form-control" />
                    </div>
                    <div class="form-group">
                      <label>Enter Confirm Password</label>
                      <input type="password" name="confirm_admin_password" id="confirm_admin_password" class="form-control" />
                    </div>
                    <div class="form-group">
                      <input type="hidden" name="page" value="register" />
                      <input type="hidden" name="action" value="register" />
                      <input type="submit" name="admin_register" id="admin_register" class="btn btn-info" value="Register" />
                    </div>
                  </form>
              <div align="center">
               <a href="login.php">Login</a>
              </div>
           </div>
         </div>
      </div>
      <div class="col-md-3">

      </div>
    </div>
 </div>

</body>
</html>

<script>

$(document).ready(function(){

 window.ParsleyValidator.addValidator('checkemail', {
    validateString: function(value)
    {
      return $.ajax({
        url:"ajax_action.php",
        method:"POST",
        data:{page:'register', action:'check_email', email:value},
        dataType:"json",
        async: false,
        success:function(data)
        {
          return true;
        }
      });
    }
  });

  $('#admin_register_form').parsley();

  $('#admin_register_form').on('submit', function(event){

    event.preventDefault();

    $('#admin_email_address').attr('required', 'required');

    $('#admin_email_address').attr('data-parsley-type', 'email');

    $('#admin_password').attr('required', 'required');

    $('#confirm_admin_password').attr('required', 'required');

    $('#confirm_admin_password').attr('data-parsley-equalto', '#admin_password');

    if($('#admin_register_form').parsley().isValid())
    {
      $.ajax({
        url:"ajax_action.php",
        method:"POST",
        data:$(this).serialize(),
        dataType:"json",
        beforeSend:function(){
          $('#admin_register').attr('disabled', 'disabled');
          $('#admin_register').val('please wait...');
        },
        success:function(data)
        {
          if(data.success)
          {
            $('#message').html('<div class="alert alert-success">Please check your email</div>');
            $('#admin_register_form')[0].reset();
            $('#admin_register_form').parsley().reset();
          }

          $('#admin_register').attr('disabled', false);
          $('#admin_register').val('Register');
        }
      });
    }

  });

});

</script>


master/Examination.php


This is main PHP class for this Online Exam Application. Here we will PHP PDO Object Oriented Programming for build logic of this Online Quiz system. In this class we have make following method, which we will used for different purpose to build Online Examination System in PHP.

  1. __construct() - This is the magic function code will be execute on every time whenever this class new object has been created, and on every new object creation it will make database connection with this Online Exam system using PHP PDO class object.
  2. execute_query() - This method will used for execute SQL query for database operation.
  3. total_row() - This method will return total number of rows has been affected after query execution. In this method we have used execute_query() method also.
  4. send_email($receiver_email, $subject, $body) - In this method, we have create object of PHPMailer class, and this method we will use for send email in this Online examination system.
  5. redirect($page) - This method we will used for redirect page.
  6. admin_session_private() - This method will check if admin has login into system, if admin not login into system and try to access web page, which has required login into system. Then it will redirect to admin login page.
  7. admin_session_public() - This another method, which has been check admin login. This method will check admin has login into system and try to access login or register page, then it will redirect to index.php page.
  8. query_result() - This method will use execute_query() method for execute SQL query and return query execution result in associative array format.

master/Examination.php

<?php

class Examination
{
 var $host;
 var $username;
 var $password;
 var $database;
 var $connect;
 var $home_page;
 var $query;
 var $data;
 var $statement;
 var $filedata;

 function __construct()
 {
  $this->host = 'localhost';
  $this->username = 'root';
  $this->password = '';
  $this->database = 'online_examination';
  $this->home_page = 'http://localhost/tutorial/online_examination/';

  $this->connect = new PDO("mysql:host=$this->host; dbname=$this->database", "$this->username", "$this->password");

  session_start();
 }

 function execute_query()
 {
  $this->statement = $this->connect->prepare($this->query);
  $this->statement->execute($this->data);
 }

 function total_row()
 {
  $this->execute_query();
  return $this->statement->rowCount();
 }

 function send_email($receiver_email, $subject, $body)
 {
  $mail = new PHPMailer;

  $mail->IsSMTP();

  $mail->Host = 'smtp host';

  $mail->Port = '587';

  $mail->SMTPAuth = true;

  $mail->Username = '';

  $mail->Password = '';

  $mail->SMTPSecure = '';

  $mail->From = 'info@webslesson.info';

  $mail->FromName = 'info@webslesson.info';

  $mail->AddAddress($receiver_email, '');

  $mail->IsHTML(true);

  $mail->Subject = $subject;

  $mail->Body = $body;

  $mail->Send();  
 }

 function redirect($page)
 {
  header('location:'.$page.'');
  exit;
 }
 
 function admin_session_private()
 {
  if(!isset($_SESSION['admin_id']))
  {
   $this->redirect('login.php');
  }
 }

 function admin_session_public()
 {
  if(isset($_SESSION['admin_id']))
  {
   $this->redirect('index.php');
  }
 }

 function query_result()
 {
  $this->execute_query();
  return $this->statement->fetchAll();
 }
}

?>


master/ajax_action.php


In this PHP file, you can find PHP script of all operation, which it had done at master side, you can find here. This file will received Ajax request for do different operation.

In this file, we have include Examination.php class and PHPMailer class library. Here you can find different database related operation will be perform here.

  • In this file, first it has received Ajax request from Admin Register page for check particular Admin Email already register or not in Mysql database.
  • After Check unique Admin email address, this page also received second Ajax request from Admin register page for complete Admin registration process, once registeration data has been inserted then it will make dynamic admin email verification email and send to admin email address for email verification process.
  • Once Registration has been completed and admin has try to login into system, then admin login details has been validated here by using Ajax request.
master/ajax_action.php

<?php

//ajax_action.php

include('Examination.php');

require_once('../class/class.phpmailer.php');

$exam = new Examination;

$current_datetime = date("Y-m-d") . ' ' . date("H:i:s", STRTOTIME(date('h:i:sa')));

if(isset($_POST['page']))
{
 if($_POST['page'] == 'register')
 {
  if($_POST['action'] == 'check_email')
  {
   $exam->query = "
   SELECT * FROM admin_table 
   WHERE admin_email_address = '".trim($_POST["email"])."'
   ";

   $total_row = $exam->total_row();

   if($total_row == 0)
   {
    $output = array(
     'success' => true
    );

    echo json_encode($output);
   }
  }

  if($_POST['action'] == 'register')
  {
   $admin_verification_code = md5(rand());

   $receiver_email = $_POST['admin_email_address'];

   $exam->data = array(
    ':admin_email_address'  => $receiver_email,
    ':admin_password'   => password_hash($_POST['admin_password'], PASSWORD_DEFAULT),
    ':admin_verfication_code' => $admin_verification_code,
    ':admin_type'    => 'sub_master', 
    ':admin_created_on'   => $current_datetime
   );

   $exam->query = "
   INSERT INTO admin_table 
   (admin_email_address, admin_password, admin_verfication_code, admin_type, admin_created_on) 
   VALUES 
   (:admin_email_address, :admin_password, :admin_verfication_code, :admin_type, :admin_created_on)
   ";

   $exam->execute_query();

   $subject = 'Online Examination Registration Verification';

   $body = '
   <p>Thank you for registering.</p>
   <p>This is a verification eMail, please click the link to verify your eMail address by clicking this <a href="'.$exam->home_page.'verify_email.php?type=master&code='.$admin_verification_code.'" target="_blank"><b>link</b></a>.</p>
   <p>In case if you have any difficulty please eMail us.</p>
   <p>Thank you,</p>
   <p>Online Examination System</p>
   ';

   $exam->send_email($receiver_email, $subject, $body);

   $output = array(
    'success' => true
   );

   echo json_encode($output);
  }
 }

 if($_POST['page'] == 'login')
 {
  if($_POST['action'] == 'login')
  {
   $exam->data = array(
    ':admin_email_address' => $_POST['admin_email_address']
   );

   $exam->query = "
   SELECT * FROM admin_table 
   WHERE admin_email_address = :admin_email_address
   ";

   $total_row = $exam->total_row();

   if($total_row > 0)
   {
    $result = $exam->query_result();

    foreach($result as $row)
    {
     if($row['email_verified'] == 'yes')
     {
      if(password_verify($_POST['admin_password'], $row['admin_password']))
      {
       $_SESSION['admin_id'] = $row['admin_id'];
       $output = array(
        'success' => true
       );
      }
      else
      {
       $output = array(
        'error' => 'Wrong Password'
       );
      }
     }
     else
     {
      $output = array(
       'error'  => 'Your Email is not verify'
      );
     }
    }
   }
   else
   {
    $output = array(
     'error'  => 'Wrong Email Address'
    );
   }
   echo json_encode($output);
  }

 }
}

?>


master/login.php


Once Admin has verified his or her email address, then after page will redirect to this Online Examination System login page with success message on web page.

This Online Examination Admin Login page, and for get access into system in the Admin area of Online Examination system. So by using this page Admin can get access into this system. Admin login details will be validate here by using Ajax request.

<?php

//login.php

include('Examination.php');

$exam = new Examination;

$exam->admin_session_public();

?>

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Online Examination System in PHP</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
   <script src="https://cdn.jsdelivr.net/gh/guillaumepotier/Parsley.js@2.9.1/dist/parsley.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="../style/style.css" />
</head>
<body>
 <div class="jumbotron text-center" style="margin-bottom:0; padding: 1rem 1rem;">
     <img src="logo.png" class="img-fluid" width="300" alt="Online Examination System in PHP" />
 </div>

 <div class="container">
    <div class="row">
      <div class="col-md-3">

      </div>
      <div class="col-md-6" style="margin-top:20px;">
       
       <span id="message">
       <?php
       if(isset($_GET['verified']))
       {
        echo '
        <div class="alert alert-success">
         Your email has been verified, now you can login
        </div>
        ';
       }
       ?>
       </span>
          <div class="card">
            <div class="card-header">Admin Login</div>
            <div class="card-body">
              <form method="post" id="admin_login_form">
                <div class="form-group">
                  <label>Enter Email Address</label>
                  <input type="text" name="admin_email_address" id="admin_email_address" class="form-control" />
                </div>
                <div class="form-group">
                  <label>Enter Password</label>
                  <input type="password" name="admin_password" id="admin_password" class="form-control" />
                </div>
                <div class="form-group">
                  <input type="hidden" name="page" value="login" />
                  <input type="hidden" name="action" value="login" />
                  <input type="submit" name="admin_login" id="admin_login" class="btn btn-info" value="Login" />
                </div>
              </form>
              <div align="center">
                <a href="register.php">Register</a>
              </div>
            </div>
          </div>
         
      </div>
      <div class="col-md-3">

      </div>
    </div>
 </div>

</body>
</html>

<script>

$(document).ready(function(){

 $('#admin_login_form').parsley();

  $('#admin_login_form').on('submit', function(event){
    event.preventDefault();

    $('#admin_email_address').attr('required', 'required');

    $('#admin_email_address').attr('data-parsley-type', 'email');

    $('#admin_password').attr('required', 'required');

    if($('#admin_login_form').parsley().validate())
    {
      $.ajax({
        url:"ajax_action.php",
        method:"POST",
        data:$(this).serialize(),
        dataType:"json",
        beforeSend:function(){
          $('#admin_login').attr('disabled', 'disabled');
          $('#admin_login').val('please wait...');
        },
        success:function(data)
        {
          if(data.success)
          {
            location.href="index.php";
          }
          else
          {
            $('#message').html('<div class="alert alert-danger">'+data.error+'</div>');
          }
          $('#admin_login').attr('disabled', false);
          $('#admin_login').val('Login');
        }
      });
    }

  });

});

</script>


master/header.php


This is the header file of Online Examination System Admin area, and in this file first we have include Examination class file and then after for check Admin has login into system or not. We have called admin_session_private() method.

In this file we have make navbar by using Bootstrap 4 library. In navbar we have add link for go to Exam section, user section and logout page link.

master/header.php

<?php

//header.php

include('Examination.php');

$exam = new Examination;

$exam->admin_session_private();

?>

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Online Examination System in PHP</title>
   <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/guillaumepotier/Parsley.js@2.9.1/dist/parsley.js"></script>
   <link rel="stylesheet" href="../style/style.css" />
    <link rel="stylesheet" href="../style/bootstrap-datetimepicker.css" />
    <script src="../style/bootstrap-datetimepicker.js"></script>
</head>
<body>
 <div class="jumbotron text-center" style="margin-bottom:0; padding: 1rem 1rem;">
    <img src="logo.png" class="img-fluid" width="300" alt="Online Examination System in PHP" />
 </div>

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <a class="navbar-brand" href="index.php">Admin Side</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="logout.php">Logout</a>
                </li>   
            </ul>
        </div>  
    </nav>

 <div class="container-fluid">


master/index.php



<?php

//index.php

include('header.php');

include('footer.php');

?>
    
 


master/logout.php


This is logout script for logout from Admin side of Online examination system. This script will destroy all active session variable by using session_destroy() function and after this it will redirect to admin login page.


<?php

//logout.php

session_start();

session_destroy();

header('location:login.php');

?>


verify_email.php


This PHP file mainly, we use for validate admin email address and user email address which they have enter at the time of registration. In this file we have include Examination class for perform different operation.

This file will received $_GET['type'] and $_GET['code'] veriable, in $_GET['type'] veriable we can define admin or user, and in $_GET['code'], it will password email verification code. Based on the value of this both variable, it will verify email address.

verify_email.php

<?php

//verify_email.php

include('master/Examination.php');

$exam = new Examination;

if(isset($_GET['type'], $_GET['code']))
{
 if($_GET['type'] == 'master')
 {
  $exam->data = array(
   ':email_verified'  => 'yes'
  );

  $exam->query = "
  UPDATE admin_table 
  SET email_verified = :email_verified 
  WHERE admin_verfication_code = '".$_GET['code']."'
  ";

  $exam->execute_query();

  $exam->redirect('master/login.php?verified=success');
 }
}


?>

Online Examination System has been build by using PHP script with Mysql database, jQuery, Ajax and Bootstrap 4 library. Source of Online Examination system in PHP will be added very soon.






Online Examination System in PHP Video Tutorial


Below you can find video tutorial of PHP Mysql Online Exam System which we have publish. So, If you have miss any tutorial, you can check here.

  1. Introduction - Online Examination System in PHP
  2. Check Unique Admin Email Address - Online Examination System in PHP
  3. Admin Registration - Online Examination System in PHP
  4. Verify Admin Email Address - Online Examination System in PHP
  5. Admin Login Form - Online Examination System in PHP
  6. Display all Exam - Online Examination System in PHP
  7. Schedule New Exam - Online Examination System in PHP
  8. Edit Schedule Exam Details - Online Examination System in PHP
  9. Remove Schedule Exam Details - Online Examination System in PHP
  10. Add Question in Exam - Online Examination System in PHP
  11. Display All Question - Online Examination System in PHP
  12. Edit Question Details - Online Examination System in PHP
  13. Delete Question - Online Examination System in PHP
  14. Check User Unuique Email ID - Online Examination System in PHP
  15. User Registration - Online Examination System in PHP
  16. User Email ID Verification - Online Examination System in PHP
  17. User Login - Online Examination System in PHP
  18. User Profile - Online Examination System in PHP
  19. User Change Password - Online Examination System in PHP
  20. List User Enroll Exam - Online Examination System in PHP
  21. List User List at Master Side - Online Examination System in PHP
  22. View User Details in Modal - Online Examination System in PHP
  23. Admin Side Exam Enroll User list - Online Examination System in PHP
  24. List Question on Starting of Exam - Online Examination System in PHP
  25. Exam Result on Web Page User Side - Online Examination System in PHP
  26. Exam Result in PDF Format - User Side - Online Examination System in PHP
  27. Master Side - Generate Single User Exam Result - Online Examination System in PHP
  28. Admin Side - Generate All User Exam Result - Online Examination System in PHP
  29. Admin Side - Generate All User Exam Result in PDF Format - Online Examination System in PHP




Sunday, 17 November 2019

AutoComplete Textbox with Multiple Field using jQuery in PHP



In this post, We arg going to learn How to make Autocomplete Textbox with feature like selection of multiple option by using Bootstrap Tokenfield plugin with Ajax, PHP and dynamic Mysql data. We have already seen how Autocomplete textbox work with single option by using jQuery UI library, but here we will learn Autocomplete textbox with multi select feature. So, in this tutorial, we will make an example of Add multiple input tags with Autocomplete search result from Mysql database table using Bootstrap Tokenfield plugin with Ajax and PHP.

In web application, sometimes we have to required give feature like user can enter multiple input tags. At that time we have to require to use jQuery plugin for input multiple tags. But here also we want to make autocomplete textbox for enter multiple input tag. For this here we have use Bootstrap token field plugin, which is advanced tagging or tokenizing plugin for jQuery and Bootstrap library.

We all know Autocomplete Textbox which display the auto suggestion below input field, and user can allow to select value from pre populated search list. This type of feature help to user to search and pick the required value from auto suggested search result. Here when user has try to typing something in textbox and it has fetched respective data from Mysql database and it will display suggestion as dropdown under input textbox field. We can easily make dynamic autocomplete textbox by using jQuery UI library with PHP.

But generally autocomplete textbox has allow user to select single value from pre-populated list. But here want to allow user to select multiple value from auto-suggestion list from autocomplete textbox. Now in this tutorial, we have seen how to make autocomplete textbox in which user can select multiple items from the dynamic pre-populated list by using Aajx with PHP and Mysql database. Below you can find short process of create autocomplete textbox with multiple selection values in PHP.

  • First Make Mysql Database connection
  • Get the search query with GET parameter with name query
  • Send GET parameter variable value to PHP script using Ajax
  • Search match data from Mysql database in PHP script
  • Store search match data into array
  • Send data in JSON format to Ajax request







Source Code


index.php



<!DOCTYPE html>
<html>
    <head>
        <title>AutoComplete Textbox with Multiple Field using jQuery in PHP</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>
    </head>
    <body>
        <br />
        <br />
        <div class="container">
            <h1 align="center">AutoComplete Textbox with Multiple Field using jQuery in PHP</h1>
            <br />
            <br />
            <br />
            <div class="row">
                <div class="col-md-2">

                </div>
                <div class="col-md-8">
                    <div class="form-group">
                        <label>Enter Multiple Country Name</label>
                        <div class="input-group">
                            <input type="text" id="search_data" placeholder="" autocomplete="off" class="form-control input-lg" />
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-primary btn-lg" id="search">Get Value</button>
                            </div>
                        </div>
                        <br />
                        <span id="country_name"></span>
                    </div>
                </div>
                <div class="col-md-2">

                </div>
            </div>
        </div>
    </body>
</html>
<script>
  $(document).ready(function(){
      
    $('#search_data').tokenfield({
        autocomplete :{
            source: function(request, response)
            {
                jQuery.get('fetch.php', {
                    query : request.term
                }, function(data){
                    data = JSON.parse(data);
                    response(data);
                });
            },
            delay: 100
        }
    });

    $('#search').click(function(){
        $('#country_name').text($('#search_data').val());
    });

  });
</script>


fetch.php



<?php

//fetch.php;

$data = array();

if(isset($_GET["query"]))
{
 $connect = new PDO("mysql:host=localhost; dbname=testing", "root", "");

 $query = "
 SELECT country_name FROM apps_countries 
 WHERE country_name LIKE '".$_GET["query"]."%' 
 ORDER BY country_name ASC 
 LIMIT 15
 ";

 $statement = $connect->prepare($query);

 $statement->execute();

 while($row = $statement->fetch(PDO::FETCH_ASSOC))
 {
  $data[] = $row["country_name"];
 }
}

echo json_encode($data);

?>

Wednesday, 13 November 2019

Parsley.js Custom Validator for Email Availability with PHP



This is one more post on Parsley.js JavaScript library, this library has been used for validate form data. In this post also, we will also validate form data by using this Parsley.js library. But here we will make Parsley.js custom validation for check particular email is available for register in our system or not. This custom validator will send ajax request to php script, for check particular email address or username is already register or not. In short, we will make unique email address or username validation with PHP by using this Parsley.js custom validator.

In any web application, Registration process is required for get access into web application. So, in registration, user can register only with unique email address or username. So, for restrict to user with same email address or username then at that time this live email availability or username availability feature is required. When user has enter his email address or username in form field , then at that time system has to check entered email address or username is already register in our system or not. If Email Address or username already register then system has to display error message on web page, otherwise system has give permission to user for proceed for registration.

So, Email Availability is required feature in any web application. And here we have make this feature by using Parsley.js form validation library and by using this library here we will make custom validator for check email is available for registration or not with PHP script.

For make this live email availability feature, here we have use Parsley.js library with PHP script, jquery library and Mysql database. First we have define on textbox and in this textbox we have to define Parsley.js library validation attribute which you can see below.

Attrbute Description
required Value of this input field is required for submit form data.
data-parsley-type Value of input element must be a valid email
data-parsley-trigger It will trigger validation error on focusout event
data-parsley-checkemail Here "checkemail" is the name of custom validator
data-parsley-checkemail-message It will display "checkemail" custom validator error

Above you have seen which Parsley.js javascript attribute for validate email textbox value. Below you can find complete source of HTML, jQuery and PHP script in which we have make Parsley.js custom validator for check live email availability which has send ajax request to PHP script. This all source code will you can find below.










Source Code


Database



--
-- Database: `testing`
--

-- --------------------------------------------------------

--
-- Table structure for table `register_user`
--

CREATE TABLE `register_user` (
  `register_user_id` int(11) NOT NULL,
  `user_name` varchar(250) NOT NULL,
  `user_email` varchar(250) NOT NULL,
  `user_password` varchar(250) NOT NULL,
  `user_activation_code` varchar(250) NOT NULL,
  `user_email_status` enum('not verified','verified') NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `register_user`
--

INSERT INTO `register_user` (`register_user_id`, `user_name`, `user_email`, `user_password`, `user_activation_code`, `user_email_status`) VALUES
(1, 'John Smith', 'web-tutorial@programmer.net', '$2y$10$ZFXBzg3rzusgSFuAL.VeneDnJJpUVEMtEy2r2Xjshz/3O/wxSDQZa', 'c74c4bf0dad9cbae3d80faa054b7d8ca', 'verified'),
(2, 'John Smit', 'johnsmith@gmail.com', '$2y$10$n0ckpdEkvGVhX5GExG1ZD.Vg3Z1TEpMEoq12aEMCKVNFzXRSeOJ.q', '84b069ebd287d467cb7fd26e53c6a0c9', 'verified'),
(3, 'John Smith', 'peterparker@gmail.com', '$2y$10$CaXjutIQ2gYrvGwvuN3tJey36n.DNHVXtro11RFpnoRGHAaCf0FZ2', '2459e63c0cc08d3717f1e159de44586e', 'verified');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `register_user`
--
ALTER TABLE `register_user`
  ADD PRIMARY KEY (`register_user_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `register_user`
--
ALTER TABLE `register_user`
  MODIFY `register_user_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;


index.php



<!DOCTYPE html>
<html>
  <head>
    <title>Live Email Availability using Parsley.js Custom Validator with PHP</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.0/parsley.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style> 
      input.parsley-success,
       select.parsley-success,
       textarea.parsley-success {
         color: #468847;
         background-color: #DFF0D8;
         border: 1px solid #D6E9C6;
       }

       input.parsley-error,
       select.parsley-error,
       textarea.parsley-error {
         color: #B94A48;
         background-color: #F2DEDE;
         border: 1px solid #EED3D7;
       }

       .parsley-errors-list {
         margin: 2px 0 3px;
         padding: 0;
         list-style-type: none;
         font-size: 0.9em;
         line-height: 0.9em;
         opacity: 0;

         transition: all .3s ease-in;
         -o-transition: all .3s ease-in;
         -moz-transition: all .3s ease-in;
         -webkit-transition: all .3s ease-in;
       }

       .parsley-errors-list.filled {
         opacity: 1;
       }
       
       .parsley-type,
       .parsley-required,
       .parsley-equalto,
       .parsley-pattern,
       .parsley-urlstrict,
       .parsley-length,
       .parsley-checkemail{
        color:#ff0000;
       }
    </style>
  </head>
  <body>
    <br />
    <br />
    <div class="container">
      <h3 align="center">Live Email Availability using Parsley.js Custom Validator with PHP</h3>
      <br />
      <br />
      <br />
      <div class="row">
        <div class="col-md-3">

        </div>
        <div class="col-md-6">
          <input type="text" id="email_address" class="form-control input-lg" required placeholder="Enter Email ID" data-parsley-type="email" data-parsley-trigger="focusout" data-parsley-checkemail data-parsley-checkemail-message="Email Address already Exists" />
        </div>
        <div class="col-md-3">

        </div>
      </div>
    </div>
  </body>
</html>
<script>
  $(document).ready(function(){
      
    $('#email_address').parsley();

    window.ParsleyValidator.addValidator('checkemail', {
      validateString: function(value)
      {
        return $.ajax({
          url:'fetch.php',
          method:"POST",
          data:{email:value},
          dataType:"json",
          success:function(data)
          {
            return true;
          }
        });
      }
    });

  });
</script>


fetch.php



<?php

//fetch.php;

if(isset($_POST["email"]))
{
 $connect = new PDO("mysql:host=localhost; dbname=testing", "root", "");

 $query = "
 SELECT * FROM register_user 
 WHERE user_email = '".trim($_POST["email"])."'
 ";

 $statement = $connect->prepare($query);

 $statement->execute();

 $total_row = $statement->rowCount();

 if($total_row == 0)
 {
  $output = array(
   'success' => true
  );

  echo json_encode($output);
 }
}

?>




Sunday, 10 November 2019

How to Display Image in jQuery UI AutoComplete Textbox in PHP



If you are using PHP as your Web Development and if you have build any PHP based website, then in your website you have to require any Search feature. Then in that Search Textbox, if you have add auto complete search list, and if you have one more feature like display image with that auto search list. So, it will add one advance level of feature in your Website UI experience.

In most of the website we have generally seen autocomplete textbox with name or email or simple text, but there are very less website has display image in pre-populated search result. Here we will make autocomplete textbox, in which make list pre-populated search result with image. This feature we will make by add custom html tag in jQuery UI autocomplete method by add _renderItem. Here we will use __renderItem method, by using this method we will add custom HTML code in autocomplete textbox.

By using jQery UI, we can easily implement autocomplete widget on any input textbox element. This autocomplete widget has provide us many customizing option as per our requirement. So, here our requirement is display image with search result. So, It has provide this _renderItem method, in which we can define custom html code for display image in auto suggest search list.


This jQuery UI autocomplete plugin is very easy to integrate in our existing code. By using simple autocomplete() method we can initialize this plugin on any define input textbox element. This plugin has use Ajax request for fetch data from PHP script. We have to define PHP file name under source option. When it send Ajax request to PHP script and it will received response from PHP script in JSON format and it will as auto suggest search result on web page without refresh of web page. So, this autocomplete widget gives auto suggestion as search result, which user can see below autocomplete textbox while searching value in the textbox element. Below you can fine complete source with online demo link also.






Database



--
-- Database: `testing`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_student`
--

CREATE TABLE `tbl_student` (
  `student_id` int(11) NOT NULL,
  `student_name` varchar(250) NOT NULL,
  `student_phone` varchar(20) NOT NULL,
  `image` varchar(255) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_student`
--

INSERT INTO `tbl_student` (`student_id`, `student_name`, `student_phone`, `image`) VALUES
(1, 'Pauline S. Rich', '412-735-0224', 'image_1.jpg'),
(2, 'Sarah C. White', '320-552-9961', 'image_2.jpg'),
(3, 'Samuel L. Leslie', '201-324-8264', 'image_3.jpg'),
(4, 'Norma R. Manly', '478-322-4715', 'image_4.jpg'),
(5, 'Kimberly R. Castro', '479-966-6788', 'image_5.jpg'),
(6, 'Elaine R. Davis', '701-685-8912', 'image_6.jpg'),
(7, 'Concepcion S. Gardner', '607-829-8758', 'image_7.jpg'),
(8, 'Patricia J. White', '803-789-0429', 'image_8.jpg'),
(9, 'Michael M. Bothwell', '214-585-0737', 'image_9.jpg'),
(10, 'Ronald C. Vansickle', '630-571-4107', 'image_10.jpg'),
(11, 'Clarence A. Rich', '904-459-3747', 'image_11.jpg'),
(12, 'Elizabeth W. Peterson', '404-380-9481', 'image_12.jpg'),
(13, 'Renee R. Hewitt', '323-350-4973', 'image_13.jpg'),
(14, 'John K. Love', '337-229-1983', 'image_14.jpg'),
(15, 'Teresa J. Rincon', '216-394-6894', 'image_15.jpg'),
(16, 'Erin S. Huckaby', '503-284-8652', 'image_16.jpg'),
(17, 'Brian A. Handley', '989-304-7122', 'image_17.jpg'),
(18, 'Michelle A. Polk', '540-232-0351', 'image_18.jpg'),
(19, 'Wanda M. Brown', '718-262-7466', 'image_19.jpg'),
(20, 'Phillip A. Hatcher', '407-492-5727', 'image_20.jpg'),
(21, 'Dennis J. Terrell', '903-863-5810', 'image_21.jpg'),
(22, 'Britney F. Johnson', '972-421-6933', 'image_22.jpg'),
(23, 'Rachelle J. Martin', '920-397-4224', 'image_23.jpg'),
(24, 'Leila E. Ledoux', '615-425-9930', 'image_24.jpg'),
(25, 'Darrell A. Fields', '708-887-1913', 'image_25.jpg'),
(26, 'Linda D. Carter', '909-386-7998', 'image_26.jpg'),
(27, 'Melva J. Palmisano', '630-643-8763', 'image_27.jpg'),
(28, 'Jessica V. Windham', '513-807-9224', 'image_28.jpg'),
(29, 'Karen T. Martin', '847-385-1621', 'image_29.jpg'),
(30, 'Jack K. McDonough', '561-641-4509', 'image_30.jpg'),
(31, 'John M. Williams', '508-269-9346', 'image_31.jpg'),
(32, 'Amelia W. Davis', '347-537-8052', 'image_32.jpg'),
(33, 'Gertrude W. Lawrence', '510-702-7415', 'image_33.jpg'),
(34, 'Michael L. Harris', '252-219-4076', 'image_34.jpg'),
(35, 'Casey A. Groves', '810-334-9674', 'image_35.jpg'),
(36, 'James H. Wilson', '865-259-6772', 'image_36.jpg'),
(37, 'James A. Wesley', '443-217-1859', 'image_37.jpg'),
(38, 'Armando C. Gay', '716-252-9230', 'image_38.jpg'),
(39, 'James M. Duarte', '402-840-0541', 'image_39.jpg'),
(40, 'Jason E. West', '360-610-7730', 'image_40.jpg'),
(41, 'Gloria H. Saucedo', '205-861-3306', 'image_41.jpg'),
(42, 'Paul T. Moody', '914-683-4994', 'image_42.jpg'),
(43, 'Sandra L. Williams', '310-335-1336', 'image_43.jpg'),
(44, 'Elaine T. Deville', '626-513-8306', 'image_44.jpg'),
(45, 'Robyn L. Spangler', '754-224-7023', 'image_45.jpg'),
(46, 'Sam A. Pino', '806-823-5344', 'image_46.jpg'),
(47, 'Joseph H. Marble', '201-917-2804', 'image_47.jpg'),
(48, 'Mark M. Bassett', '206-592-4665', 'image_48.jpg'),
(49, 'Edgar M. Billy', '978-365-0324', 'image_49.jpg'),
(50, 'Connie M. Yang', '815-288-5435', 'image_50.jpg');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_student`
--
ALTER TABLE `tbl_student`
  ADD PRIMARY KEY (`student_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_student`
--
ALTER TABLE `tbl_student`
  MODIFY `student_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=71;


index.php



<!DOCTYPE html>
<html>
  <head>
    <title>jQuery UI Autocomplete with Images and Custom HTML in PHP</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style type="text/css">
      .ui-autocomplete-row
      {
        padding:8px;
        background-color: #f4f4f4;
        border-bottom:1px solid #ccc;
        font-weight:bold;
      }
      .ui-autocomplete-row:hover
      {
        background-color: #ddd;
      }
    </style>
  </head>
  <body>
    <br />
    <br />
    <div class="container">
      <h3 align="center">Ajax AutoComplete Textbox with Image using jQuery UI in PHP</h3>
      <br />
      <br />
      <br />
      <div class="row">
        <div class="col-md-3">

        </div>
        <div class="col-md-6">
          <input type="text" id="search_data" placeholder="Enter Student name..." autocomplete="off" class="form-control input-lg" />
        </div>
        <div class="col-md-3">

        </div>
      </div>
    </div>
  </body>
</html>
<script>
  $(document).ready(function(){
      
    $('#search_data').autocomplete({
      source: "fetch.php",
      minLength: 1,
      select: function(event, ui)
      {
        $('#search_data').val(ui.item.value);
      }
    }).data('ui-autocomplete')._renderItem = function(ul, item){
      return $("<li class='ui-autocomplete-row'></li>")
        .data("item.autocomplete", item)
        .append(item.label)
        .appendTo(ul);
    };

  });
</script>


fetch.php



<?php

//fetch.php;

if(isset($_GET["term"]))
{
 $connect = new PDO("mysql:host=localhost; dbname=testing", "root", "");

 $query = "
 SELECT * FROM tbl_student 
 WHERE student_name LIKE '%".$_GET["term"]."%' 
 ORDER BY student_name ASC
 ";

 $statement = $connect->prepare($query);

 $statement->execute();

 $result = $statement->fetchAll();

 $total_row = $statement->rowCount();

 $output = array();
 if($total_row > 0)
 {
  foreach($result as $row)
  {
   $temp_array = array();
   $temp_array['value'] = $row['student_name'];
   $temp_array['label'] = '<img src="images/'.$row['image'].'" width="70" />&nbsp;&nbsp;&nbsp;'.$row['student_name'].'';
   $output[] = $temp_array;
  }
 }
 else
 {
  $output['value'] = '';
  $output['label'] = 'No Record Found';
 }

 echo json_encode($output);
}

?>





Friday, 8 November 2019

FullCalendar CRUD Operation in Codeigniter using Ajax



If you are using Codeigniter framework for your web development, then this tutorial will help you on topic like how to integrate FullCalendar with your existing Codeigniter project. By using this post, you can learn How to Save events in Mysql database using Codeigniter and display particular date event on that date with time by using FullCalendar plugin. Even you can also change event date and time also. If you want to remove or delete particular event from calendar then that operation you can perform with FullCalendar in Codeigniter.

For this all operation you have to use Ajax call when ever you have create, update, load and delete event with FullCalendar using Codeigniter and save data into Database. In short you can perform CRUD operations of FullCalendar with Codeigniter. So, if you are looking for tutorial on Basic CRUD (Create Read Update Delete) functionality on jQuery FullCalendar using Codeigniter, then this post will help you.

We will describe you how to implement Full Calendar library in Codeigniter 3 application using Ajax. We will show you step by step process for how to create event, how to define event time and how to save event data into Mysql database with FullCalendar using Ajax in Codeigniter framework.

Do you know FullCalendar is an Open source jQuery library for create event in Calendar and we can easily customize our event management. FullCalendar library has also provide drag and drop event and resize event also. Follow following steps for Build Event Calendar in Codeigniter using jQuery FullCalendar plugin with Ajax and Mysql database.





  • Create Database Table

  • Make Database Connection

  • Create Controller

  • Create Model

  • Create View File




Create Database Table


For any dynamic web application, we need to create database and in that we have make table. For this you have to run following SQL script in your Mysql database, it will make events table in your database.


--
-- Database: `testing`
--

-- --------------------------------------------------------

--
-- Table structure for table `events`
--

CREATE TABLE `events` (
  `id` int(11) NOT NULL,
  `title` varchar(255) NOT NULL,
  `start_event` datetime NOT NULL,
  `end_event` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `events`
--

INSERT INTO `events` (`id`, `title`, `start_event`, `end_event`) VALUES
(1, 'Meeting with Mike', '2019-11-08 12:00:00', '2019-11-08 13:00:00'),
(4, 'Meeting with Mike', '2019-11-11 15:30:00', '2019-11-11 16:30:00');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `events`
--
ALTER TABLE `events`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `events`
--
ALTER TABLE `events`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;


Make Database Connection


Once you have create table in your database, then after you have to make database connection with your Codeigniter application. For this you have to open application/config/database.php file, and in this you have to define your Mysql database configuration, which you can see below.

application/config/database.php

<?php

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

$db['default'] = array(
 'dsn' => '',
 'hostname' => 'localhost',
 'username' => 'root',
 'password' => '',
 'database' => 'testing',
 '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
);

?>


Create Controller


Codeigniter is MVC framework, so in this for handle http request we have to create Controller class. So, here we have create controller file under application/controllers folder. In this class we have make following method.

__construct() - This is magic method of this class. When new object of this class has been created then it will execute this block of code.

index() - This is root method of this class, and it has load "fullcalendar.php" view file in browser.

load() - This method has return all events data. This method will received Ajax request for fetch all events data, then in respose it has send events data in JSON string format.

insert() - This method has received ajax request for store new event data into Mysql database.

update() - This method has been used for update existing event data, for update data it has received ajax request.

delete() - This method has received Ajax request for delete or remove particular event.

application/controllers/FullCalendar.php

<?php

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

class Fullcalendar extends CI_Controller {

 public function __construct()
 {
  parent::__construct();
  $this->load->model('fullcalendar_model');
 }

 function index()
 {
  $this->load->view('fullcalendar');
 }

 function load()
 {
  $event_data = $this->fullcalendar_model->fetch_all_event();
  foreach($event_data->result_array() as $row)
  {
   $data[] = array(
    'id' => $row['id'],
    'title' => $row['title'],
    'start' => $row['start_event'],
    'end' => $row['end_event']
   );
  }
  echo json_encode($data);
 }

 function insert()
 {
  if($this->input->post('title'))
  {
   $data = array(
    'title'  => $this->input->post('title'),
    'start_event'=> $this->input->post('start'),
    'end_event' => $this->input->post('end')
   );
   $this->fullcalendar_model->insert_event($data);
  }
 }

 function update()
 {
  if($this->input->post('id'))
  {
   $data = array(
    'title'   => $this->input->post('title'),
    'start_event' => $this->input->post('start'),
    'end_event'  => $this->input->post('end')
   );

   $this->fullcalendar_model->update_event($data, $this->input->post('id'));
  }
 }

 function delete()
 {
  if($this->input->post('id'))
  {
   $this->fullcalendar_model->delete_event($this->input->post('id'));
  }
 }

}

?>


Create Model


In Codeigniter framework, Model class has been used to perform database related operation. Here model class has been store in application/models folder. In this class we have to make following method.

fetch_all_event() - This method has fetch all event data from mysql table, and send that data to controller.

insert_event($data) - This is another method of model class which has been perform insert data operation. In short, this method has been used for insert new event data into mysql database.

update_event($data, $id) - For update existing data of event, here we have use this update_event() method, in this method there is two argument, first is $data is the event data, which we want to update into database, and $id is the id of event which we want to update.

delete_event($id) - For perform delete or remove event data opertion will done by this method. This method has one $id as argument which is id of particular event, which we want to remove from database.

application/models/Fullcalendar_model.php

<?php

class Fullcalendar_model extends CI_Model
{
 function fetch_all_event(){
  $this->db->order_by('id');
  return $this->db->get('events');
 }

 function insert_event($data)
 {
  $this->db->insert('events', $data);
 }

 function update_event($data, $id)
 {
  $this->db->where('id', $id);
  $this->db->update('events', $data);
 }

 function delete_event($id)
 {
  $this->db->where('id', $id);
  $this->db->delete('events');
 }
}

?>


Create View File


For display dynamic HTML output in browser, here in Codeigniter framwork we have use view file. View file has been store under application/views folder. Here we have create fullcalendar.php file under views folder.

For use jQuery FullCalendar plugin, we have to use following library link in our html file.


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>


Here first we have to define one division tag on which we want to initialize FullCalendar plugin.


<div id="calendar"></div>


For initialize FullCalendar plugin on division tag with "calendar". We have to write following jquery code.


var calendar = $('#calendar').fullCalendar()


application/views/fullcalendar.php

<!DOCTYPE html>
<html>
<head>
    <title>Jquery FullCalendar Integration with Codeigniter using Ajax</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
    <script>
    $(document).ready(function(){
        var calendar = $('#calendar').fullCalendar({
            editable:true,
            header:{
                left:'prev,next today',
                center:'title',
                right:'month,agendaWeek,agendaDay'
            },
            events:"<?php echo base_url(); ?>fullcalendar/load",
            selectable:true,
            selectHelper:true,
            select:function(start, end, allDay)
            {
                var title = prompt("Enter Event Title");
                if(title)
                {
                    var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
                    var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
                    $.ajax({
                        url:"<?php echo base_url(); ?>fullcalendar/insert",
                        type:"POST",
                        data:{title:title, start:start, end:end},
                        success:function()
                        {
                            calendar.fullCalendar('refetchEvents');
                            alert("Added Successfully");
                        }
                    })
                }
            },
            editable:true,
            eventResize:function(event)
            {
                var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
                var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");

                var title = event.title;

                var id = event.id;

                $.ajax({
                    url:"<?php echo base_url(); ?>fullcalendar/update",
                    type:"POST",
                    data:{title:title, start:start, end:end, id:id},
                    success:function()
                    {
                        calendar.fullCalendar('refetchEvents');
                        alert("Event Update");
                    }
                })
            },
            eventDrop:function(event)
            {
                var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
                //alert(start);
                var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
                //alert(end);
                var title = event.title;
                var id = event.id;
                $.ajax({
                    url:"<?php echo base_url(); ?>fullcalendar/update",
                    type:"POST",
                    data:{title:title, start:start, end:end, id:id},
                    success:function()
                    {
                        calendar.fullCalendar('refetchEvents');
                        alert("Event Updated");
                    }
                })
            },
            eventClick:function(event)
            {
                if(confirm("Are you sure you want to remove it?"))
                {
                    var id = event.id;
                    $.ajax({
                        url:"<?php echo base_url(); ?>fullcalendar/delete",
                        type:"POST",
                        data:{id:id},
                        success:function()
                        {
                            calendar.fullCalendar('refetchEvents');
                            alert('Event Removed');
                        }
                    })
                }
            }
        });
    });
             
    </script>
</head>
    <body>
        <br />
        <h2 align="center"><a href="#">Jquery FullCalendar Integration with Codeigniter using Ajax</a></h2>
        <br />
        <div class="container">
            <div id="calendar"></div>
        </div>
    </body>
</html>


So, here all steps done and by using this above step you can easily use jQuery FullCalendar plugin with Codeigniter framework using Ajax. If you face any difficulty in integrating FullCalendar plugin with Codeigniter framework, then you can also find video tutorial of this post also, which you can find above of this post. And lastly, If you want to get source code zip file of Codeigniter FullCalendar example, so by click on below link you can also get zip file of Basic Crud in FullCalendar with Codeigniter using Ajax.





Sunday, 3 November 2019

CSV Import Using AJAX Progress Bar in PHP

Part 1 - Upload CSV File using Ajax with PHP



Part 2 - Start Import CSV file data using Ajax



Part 3 - Start Import CSV file data using Ajax




This is another post on display PHP script process on progress bar using Ajax with jQuery. Here In this post we will show CSV file data import process on progress bar by using Ajax jquery with PHP script. Or in short Display CSV import process using Ajax progress bar.

Now you have one question arise in your mind why we want to display import process of CSV file data on progress bar. This is one very useful feature for impove your UI, because if there is large data in your CSV file for import into Mysql data, then at that time your PHP script will display time out error on web page. And it will very difficult import large amount of CSV file data into Mysql database.

For solve this problem, here we have make one php script, which will solve the problem of PHP timeout error at the time of import of large CSV file. Because here we will import CSV file data into Mysql table in step by step and display how many data are process for import we will display on progress bar using Ajax with jQuery. So, if User has import CSV file, then he can view CSV file data importing process on web page in the form of progress bar. This all process will be done without refresh of web page, because here we have use Ajax technology with jQuery. Here we have use Bootstrap library for make progress bar.

There are many tutorials are available online for display file upload procress on progress bar in php script using Ajax, but there is no any post find on How to show CSV file data import process on progress bar using Ajax jQuery in PHP script. So, we have publish this tutorial, in which we have covered how to display real time mysql data import process on progress bar using Ajax with PHP. For make real time progress bar in PHP using Ajax, we have divided this tutorial into following part.

  • Upload CSV File using Ajax with PHP
  • Start Import CSV file data using Ajax
  • Display Import CSV File Data on progress bar using Ajax






Upload CSV File using Ajax with PHP


Here we will first upload CSV file on server by using PHP with Ajax. We can also directly fetch data from CSV file without uploading also, but here we want to display real time import process on progress bar, so we will first upload CSV file on server by using Ajax. Source code of uploading of CSV file using Ajax with PHP script you can find below.

index.php



<!DOCTYPE html>
<html>
 <head>
  <title>Import CSV File Data with Progress Bar in PHP using Ajax</title>  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  
  <br />
  <br />
  <div class="container">
   <h1 align="center">Import CSV File Data with Progress Bar in PHP using Ajax - 3</h1>
   <br />
   <div class="panel panel-default">
    <div class="panel-heading">
     <h3 class="panel-title">Import CSV File Data</h3>
    </div>
      <div class="panel-body">
       <span id="message"></span>
       <form id="sample_form" method="POST" enctype="multipart/form-data" class="form-horizontal">
        <div class="form-group">
         <label class="col-md-4 control-label">Select CSV File</label>
         <input type="file" name="file" id="file" />
        </div>
        <div class="form-group" align="center">
         <input type="hidden" name="hidden_field" value="1" />
         <input type="submit" name="import" id="import" class="btn btn-info" value="Import" />
        </div>
       </form>
       <div class="form-group" id="process" style="display:none;">
        <div class="progress">
         <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
          <span id="process_data">0</span> - <span id="total_data">0</span>
         </div>
        </div>
       </div>
      </div>
     </div>
  </div>
 </body>
</html>

<script>
 
 $(document).ready(function(){

  var clear_timer;

  $('#sample_form').on('submit', function(event){
   $('#message').html('');
   event.preventDefault();
   $.ajax({
    url:"upload.php",
    method:"POST",
    data: new FormData(this),
    dataType:"json",
    contentType:false,
    cache:false,
    processData:false,
    beforeSend:function(){
     $('#import').attr('disabled','disabled');
     $('#import').val('Importing');
    },
    success:function(data)
    {
     if(data.success)
     {
      $('#total_data').text(data.total_line);

      $('#message').html('<div class="alert alert-success">CSV File Uploaded</div>');
     }
     if(data.error)
     {
      $('#message').html('<div class="alert alert-danger">'+data.error+'</div>');
      $('#import').attr('disabled',false);
      $('#import').val('Import');
     }
    }
   })
  });

 });
</script>


upload.php



<?php

//upload.php

if(isset($_POST['hidden_field']))
{
 $error = '';
 $total_line = '';
 session_start();
 if($_FILES['file']['name'] != '')
 {
  $allowed_extension = array('csv');
  $file_array = explode(".", $_FILES["file"]["name"]);
  $extension = end($file_array);
  if(in_array($extension, $allowed_extension))
  {
   $new_file_name = rand() . '.' . $extension;
   $_SESSION['csv_file_name'] = $new_file_name;
   move_uploaded_file($_FILES['file']['tmp_name'], 'file/'.$new_file_name);
   $file_content = file('file/'. $new_file_name, FILE_SKIP_EMPTY_LINES);
   $total_line = count($file_content);
  }
  else
  {
   $error = 'Only CSV file format is allowed';
  }
 }
 else
 {
  $error = 'Please Select File';
 }

 if($error != '')
 {
  $output = array(
   'error'  => $error
  );
 } 
 else
 {
  $output = array(
   'success'  => true,
   'total_line' => ($total_line - 1)
  );
 }

 echo json_encode($output);
}

?>


Start Import CSV file data using Ajax


Once CSV file has been store into folder, then after we want to start import CSV data into Mysql database. For start import csv file data, here we have use Ajax request, which will be triggered after successfully upload CSV file, and it will send Ajax request to PHP script for read data from CSV file and start importing into Mysql table.

index.php



<!DOCTYPE html>
<html>
 <head>
  <title>Import CSV File Data with Progress Bar in PHP using Ajax</title>  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  
  <br />
  <br />
  <div class="container">
   <h1 align="center">Import CSV File Data with Progress Bar in PHP using Ajax - 3</h1>
   <br />
   <div class="panel panel-default">
    <div class="panel-heading">
     <h3 class="panel-title">Import CSV File Data</h3>
    </div>
      <div class="panel-body">
       <span id="message"></span>
       <form id="sample_form" method="POST" enctype="multipart/form-data" class="form-horizontal">
        <div class="form-group">
         <label class="col-md-4 control-label">Select CSV File</label>
         <input type="file" name="file" id="file" />
        </div>
        <div class="form-group" align="center">
         <input type="hidden" name="hidden_field" value="1" />
         <input type="submit" name="import" id="import" class="btn btn-info" value="Import" />
        </div>
       </form>
       <div class="form-group" id="process" style="display:none;">
        <div class="progress">
         <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
          <span id="process_data">0</span> - <span id="total_data">0</span>
         </div>
        </div>
       </div>
      </div>
     </div>
  </div>
 </body>
</html>

<script>
 
 $(document).ready(function(){

  var clear_timer;

  $('#sample_form').on('submit', function(event){
   $('#message').html('');
   event.preventDefault();
   $.ajax({
    url:"upload.php",
    method:"POST",
    data: new FormData(this),
    dataType:"json",
    contentType:false,
    cache:false,
    processData:false,
    beforeSend:function(){
     $('#import').attr('disabled','disabled');
     $('#import').val('Importing');
    },
    success:function(data)
    {
     if(data.success)
     {
      $('#total_data').text(data.total_line);

      start_import();

      //$('#message').html('<div class="alert alert-success">CSV File Uploaded</div>');
     }
     if(data.error)
     {
      $('#message').html('<div class="alert alert-danger">'+data.error+'</div>');
      $('#import').attr('disabled',false);
      $('#import').val('Import');
     }
    }
   })
  });

  function start_import()
  {
   $('#process').css('display', 'block');
   $.ajax({
    url:"import.php",
    success:function()
    {

    }
   })
  }

 });
</script>


import.php



<?php

//import.php

header('Content-type: text/html; charset=utf-8');
header("Cache-Control: no-cache, must-revalidate");
header ("Pragma: no-cache");

set_time_limit(0);

ob_implicit_flush(1);

session_start();

if(isset($_SESSION['csv_file_name']))
{
 $connect = new PDO("mysql:host=localhost; dbname=testing", "root", "");

 $file_data = fopen('file/' . $_SESSION['csv_file_name'], 'r');

 fgetcsv($file_data);

 while($row = fgetcsv($file_data))
 {
  $data = array(
   ':first_name' => $row[0],
   ':last_name' => $row[1]
  );

  $query = "
  INSERT INTO tbl_sample (first_name, last_name) 
     VALUES (:first_name, :last_name)
  ";

  $statement = $connect->prepare($query);

  $statement->execute($data);

  sleep(1);

  if(ob_get_level() > 0)
  {
   ob_end_flush();
  }
 }

 unset($_SESSION['csv_file_name']);
}

?>


Display Import CSV File Data on progress bar using Ajax


Once CSV file is uploaded and start importing data from CSV file to Mysql Database, now in your mind question will arise how to display CSV data importing process on progress bar. For this also, we will send continously send Ajax request for fetech how many number of data are processed based on that number progress bar will display data import process. It will continously send request for fetch number of data are process until all data are imported into mysql table. For this here we have use jQuery setInterval() and clearInterval() callback function has been used.

index.php



<!DOCTYPE html>
<html>
 <head>
  <title>Import CSV File Data with Progress Bar in PHP using Ajax</title>  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  
  <br />
  <br />
  <div class="container">
   <h1 align="center">Import CSV File Data with Progress Bar in PHP using Ajax - 3</h1>
   <br />
   <div class="panel panel-default">
    <div class="panel-heading">
     <h3 class="panel-title">Import CSV File Data</h3>
    </div>
      <div class="panel-body">
       <span id="message"></span>
       <form id="sample_form" method="POST" enctype="multipart/form-data" class="form-horizontal">
        <div class="form-group">
         <label class="col-md-4 control-label">Select CSV File</label>
         <input type="file" name="file" id="file" />
        </div>
        <div class="form-group" align="center">
         <input type="hidden" name="hidden_field" value="1" />
         <input type="submit" name="import" id="import" class="btn btn-info" value="Import" />
        </div>
       </form>
       <div class="form-group" id="process" style="display:none;">
        <div class="progress">
         <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
          <span id="process_data">0</span> - <span id="total_data">0</span>
         </div>
        </div>
       </div>
      </div>
     </div>
  </div>
 </body>
</html>

<script>
 
 $(document).ready(function(){

  var clear_timer;

  $('#sample_form').on('submit', function(event){
   $('#message').html('');
   event.preventDefault();
   $.ajax({
    url:"upload.php",
    method:"POST",
    data: new FormData(this),
    dataType:"json",
    contentType:false,
    cache:false,
    processData:false,
    beforeSend:function(){
     $('#import').attr('disabled','disabled');
     $('#import').val('Importing');
    },
    success:function(data)
    {
     if(data.success)
     {
      $('#total_data').text(data.total_line);

      start_import();

      clear_timer = setInterval(get_import_data, 2000);

      //$('#message').html('<div class="alert alert-success">CSV File Uploaded</div>');
     }
     if(data.error)
     {
      $('#message').html('<div class="alert alert-danger">'+data.error+'</div>');
      $('#import').attr('disabled',false);
      $('#import').val('Import');
     }
    }
   })
  });

  function start_import()
  {
   $('#process').css('display', 'block');
   $.ajax({
    url:"import.php",
    success:function()
    {

    }
   })
  }

  function get_import_data()
  {
   $.ajax({
    url:"process.php",
    success:function(data)
    {
     var total_data = $('#total_data').text();
     var width = Math.round((data/total_data)*100);
     $('#process_data').text(data);
     $('.progress-bar').css('width', width + '%');
     if(width >= 100)
     {
      clearInterval(clear_timer);
      $('#process').css('display', 'none');
      $('#file').val('');
      $('#message').html('<div class="alert alert-success">Data Successfully Imported</div>');
      $('#import').attr('disabled',false);
      $('#import').val('Import');
     }
    }
   })
  }

 });
</script>


process.php



<?php

//process.php

$connect = new PDO("mysql:host=localhost; dbname=testing", "root", "");

$query = "SELECT * FROM tbl_sample";

$statement = $connect->prepare($query);

$statement->execute();

echo $statement->rowCount();

?>


This tutorial is make for learning purpose, you have make required changes as per your requirement. Above you have complete step by step process for CSV file data importing process on progress bar using PHP script with Ajax jQuery Bootstrap and Mysql database. If you want to get complete source code of this PHP Ajax jQuery tutorial, you can download source code in zip file by click on below link.





Saturday, 2 November 2019

What makes Laravel the most Preferred PHP Framework for Web Development?



Technological evolution has created limitless options that fit the general criteria for web development. This makes it a tough decision for developers during the initial phases of project development.

It is a rather daunting task and in order for businesses to invent applications that are out-of-the-box, they will need to choose a framework that offers a broad spectrum of technical capabilities. Such is the rage of Laravel; a PHP framework that has become the new favorite in the market and holds a promising future. Its selection of customizations and qualities are the best remedies for engaging customers and enhancing the website’s interactivity.

What is Laravel?


Laravel is a popular, modern-technology web application framework that stems from the PHP scripting language. PHP has heavily progressed over the past years to satisfy the demands and requirements of current web developers. Each PHP framework was created with its individual feature pack and implementation but Laravel’s robust and developer-first minded characteristics make it a front-runner next to its contemporaries.

Nowadays, web developers favor Laravel over other PHP frameworks due to its wide range of unambiguous features such as multilingual app development and multiple platform support. This allows businesses to expand their target audience to a global scale and capitalize on business potential. To understand that better, we have described some of the reasons why you would never go back to any other framework after giving Laravel a try.

Authentication


Laravel 5 enables authentication practices that organize logic and simplify the process for developers. This way they have control over accessibility and user identification can be done efficiently. All web application owners seek authentication to ward off any unidentifiable user or restrict unauthorized logins; Laravel development services facilitate control over resources so no unapproved user has access to them.



MVC Support


Another reason behind Laravel’s universal recognition is its Model-View-Controller (MVC) architecture that facilitates optimal clarity between logic and presentation. It boosts application performance and enables proper documentation for developing web apps of all sizes.

Object-Oriented Libraries




Laravel’s framework offers object-oriented libraries and other pre-installed options that are not available in other PHP frameworks. One of which is the pre-installed Authentication library. Its variety of advanced features that include, Bcrypt hashing, checking active users, password reset, CSRF (Cross-site Request Forgery) protection, and encryption make it an ideal tool for web development. In addition, it is child’s play when it comes to implementation and configuration.

Modularity


Modularity is when a web application’s components can be split into different modules and recombined to work together for successful functionality. Laravel alone is a framework consisting of different components which makes it perfect for designing modular applications. It provides simple yet effective instructions to create modules and using its modular structure, companies can develop scalable web applications with the utmost ease.

Security




Security is a top priority when it comes to designing web applications and systems for e-businesses and online marketplace. Laravel is composed of several security mechanisms that make the developer’s experience secure and assure all data is protected on the website. It uses hashed passwords that offer secure Bcrypt hashing, so your passwords are never saved in plain text. Similarly, it dodges SQL injections by using prepared statements that allow developers to safely authorize any parameters and prevent any vulnerability.

Database Migration


Laravel makes database migration hassle-free which is what makes it a top pick in PHP framework for website development. This way all migrations can take place conveniently to align the database and the team can easily modify and build the application’s database plan.

Insightful Tutorials


Laracasts is a resourceful feature offered by Laravel for all developers wishing to learn throughout their web development experience. It consists of tutorials – paid and free – all conducted by a professional instructor, who shares his insights and lessons on how to make use of the Laravel framework. Developers with all levels of experience can benefit from these videos and gain an in-depth understanding of the framework to create better programs.

Template Engine


Laravel comes with the templating engine Blade which is easy-to-use, lightweight, and resourceful. Unlike other frameworks, Laravel allows users to work with plain PHP code making it intuitive and unique. It also provides its own set of control structures which include loops and conditional statements that are interlinked with PHP equivalents.

Artisan


Laravel has its custom command-line interface known as Artisan. It is designed to offer numerous built-in commands to facilitate the creation of a Laravel project environment. All in all, it supervises every repetitive or monotonous task in regard to programming with maximum ease to ensure a seamless development process. In simpler words, the development team can rely on this tool to handle such tasks and not have to perform them manually ever again.

Multiple File System


In addition, Laravel is equipped with built-in support for any cloud storage such as Amazon S3 and other local storage options. It allows you to switch between any of the file systems of your choice since the API remains the same but, all three can be used simultaneously as well from different locations.

Testing


During the testing of any application, Laravel automatically runs it through unit test that monitor, detect, and inhibit lapses in the framework. It comes with the PHPUnit to test and debug applications and is run through the built-in command-line interface, Artisan.

The Final Verdict


Time and time again, Laravel has proven itself to be an impressively handy tool for powerful web application development. The above-mentioned features should assist in harnessing Laravel’s capabilities and build an intuitive solution that meets your project requirements. Hopefully, these pointers have helped you in understanding the Laravel framework a little better and why it has exponentially gained popularity over the years.

The icing on the cake is that it provides an opportunity for developers to learn and improvise with various components of it framework, so you can familiarize with its attributes at your own pace. In the end, many new PHP frameworks have arrived but Laravel has fought to stay on top.

Author Bio:


Arslan is an electrical engineer with a passion for writing, designing and anything tech-related. His educational background in the technical field has given him the edge to write on many topics. He occasionally writes blog articles for Dynamologic Solutions.