Submitted by : shrikrushna kalbande
Programming language: php
Database: mysql
Posted on : 03-05-2019 01:14:04a

Download Code

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>?