PHP Crud Operation

PHP CRUD operations is user-friendly, it can be implemented without page refresh using jQuery and Ajax.CRUD stands for Create, Read, Update, Delete, and it is a common way to store, view, and modify and delete data.

The following functionality will be implemented to build PHP CRUD Operations with Bootstrap 4 using jQuery, Ajax, and MySQL.

• The user’s data will be fetched from the database and listed with the add, edit, and delete link.
• The add link allows the user to add new data to the database.
• The edit link allows the user to update previously inserted data.
• The delete link allows the user to delete the data from the database.
• All CRUD operations will happen on a single page without page refresh or redirect.

1. Create index.php HTML Form

    <form method="post" action="add_edit.php" id="cat_form">
             <div class="modal-body with-padding">
               <div class="form-group">
                 <div class="row">
                   <div class="col-sm-12">
                     <label>Name :</label>
                      <input type="text" name="name" id="name"  class="form-control required">
                   </div>
                 </div>
               </div>
               <div class="form-group">
                 <div class="row">
                   <div class="col-sm-12">
                     <label>Country :</label>
                      <input type="text" name="country" id="country" class="form-control required">
                   </div>
                 </div>
               </div>
               <div class="form-group">
                 <div class="row">
                   <div class="col-sm-12">
                     <label>Email :</label>
                      <input type="email" name="email" id="email"  class="form-control required email">
                   </div>
                 </div>
               </div>
               <div class="form-group">
                 <div class="row">
                   <div class="col-sm-12">
                     <label>Mobile :</label>
                      <input type="text" name="mobile" id="mobile" class="form-control required number">
                   </div>
                 </div>
               </div>
               <div class="form-group">
                 <div class="row">
                   <div class="col-sm-12">
                     <label>About You :</label>
                      <textarea name="about" id="about" class="form-control required"></textarea>
                   </div>
                 </div>
               </div>
               <div class="form-group">
                 <div class="row">
                   <div class="col-sm-12">
                     <label>Birthday :</label>
                      <input type="date" id="dob" class="form-control required" name="dob">
                   </div>
                 </div>
               </div>
             </div>
             <div class="modal-footer">
               <button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
               <span id="add">
                 <input type="hidden" name="id" value="" id="id">
                 <button type="submit" name="form_data" class="btn btn-primary">Submit</button>
               </span>
             </div>
           </form>?

2. Database connection using config.php file

   <?php 
       $db = new mysqli('localhost','root','','sample');
    	// Check connection
   	if (mysqli_connect_errno()) {
   	  echo "Failed to connect to MySQL: " . mysqli_connect_error(); exit;
   	}
   ?>

3. Creating Database Table

   CREATE TABLE `users_information` (
     `id` int(11) NOT NULL,
     `name` varchar(50) NOT NULL,
     `email` varchar(100) NOT NULL,
     `country` varchar(50) NOT NULL,
     `mobile` varchar(50) NOT NULL,
     `about` varchar(300) NOT NULL,
     `dob` date NOT NULL,
     `last_update` datetime NOT NULL
   )

4. Insert,Update and Delete data into database using add_edit.php

   <?php 
       session_start();
       include("config.php");
       if(isset($_POST['form_data'])) :
           $user_name = $db->real_escape_string($_POST['name']);
           $user_email = $db->real_escape_string($_POST['email']);
           $user_country = $db->real_escape_string($_POST['country']);
           $user_about = $db->real_escape_string($_POST['about']);
           $date = new DateTime($db->real_escape_string($_POST['dob']));
           $user_dob = $date->format('Y-m-d');
           $user_mobile = $db->real_escape_string($_POST['mobile']);
           $id = ($_POST['id']!="") ? $_POST['id'] : '';
           if($id!="") :
           	$query = " UPDATE `users_information` SET `name`= '$user_name', `email`='$user_email',
                `country`='$user_country', `mobile`='$user_mobile' , `about`='$user_about',
                `dob`='$user_dob' WHERE id=$id";
           	$msg = "Successfully Updated Your Record";
           else: 
           	$query = " INSERT INTO `users_information` SET `name`= '$user_name', `email`='$user_email',
                `country`='$user_country', `mobile`='$user_mobile' , `about`='$user_about',`dob`='$user_dob'";
           	$msg = "Successfully Inserted Your Record";        	
           endif;
           $sql = $db->query($query);
           $_SESSION['flash_msg'] = $msg;
           header("Location:index.php");
       endif;
   
       if(isset($_POST['ct_id'])) :
           $id = ($_POST['ct_id']!="") ? $_POST['ct_id'] : '';
           if($id!="") :
               $query = "DELETE FROM users_information WHERE id =$id";
               $sql = $db->query($query);
               echo 1;
           else :
               echo 0;
           endif;
       else :
           echo 0;
       endif;
   ?>

    
5.  Adding Jquery Function

   <script type="text/javascript">
   $(document).ready(function() {
       $(document).on('click','.model_form',function(){
           $('#form_modal').modal({
             keyboard: false,
             show:true,
             backdrop:'static'
           });
           var data = eval($(this).attr('data'));
           $('#id').val(data.id);
           $('#name').val(data.name);
           $('#country').val(data.country);
           $('#email').val(data.email);
           $('#about').val(data.about);
           $('#mobile').val(data.mobile);
           $('#dob').val(data.dob);
           if(data.id!="")
               $('#pop_title').html('Edit');
           else
               $('#pop_title').html('Add');
          
       });  
       $(document).on('click','.delete_check',function(){
         if(confirm("Are you sure to delete data")){
           var current_element = $(this);
           url = "add_edit.php";
           $.ajax({
           type:"POST",
           url: url,
           data: {ct_id:$(current_element).attr('data')},
           success: function(data) { //location.reload(); 
             $('.'+$(current_element).attr('data')+'_del').animate({ backgroundColor: "#003" }, "slow").animate({ opacity: "hide" }, "slow");
           } 
         });
         }
        });     
   });
   </script>?