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.

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

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

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
)

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

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

PHP Crud Operation

Create index.php HTML Form

Database connection using config.php file

Creating Database Table

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

Search

Categories