Auto Save Example In PHP & MYSQL.

Auto Save Example In PHP & MYSQL.

Auto Save Example In PHP & MYSQL..png
Auto Save Example In PHP & MYSQL..png
Auto Save Example In PHP & MYSQL.

In this post, we’re going to learn how to save data automatically in a database at specific time intervals using Ajax Jquery with PHP and Mysql. This type of functionality you have seen in the WordPress Admin side, any modern editor. However, also on the Admin side when we produce a new post also after a specific interval of time it’ll save as a draft of our post or page automatically in Database If you have used Wordpress CMS. So our data will safe if we forget to publish our content and we come after some time also our content will be placed in Database as a draft. So, This type of functionality we’re going to learn in this post. In this post, We’ll describe a simple post illustration. We have a simple form for posting simple compositions with titles and descriptions.

When a user enters the title and description then after some time interval post automatically saves it into the database table. This effect happens only after the user enters the post title and description. In this tutorial, if a post enters for the first time also it fits into the database table but if the post formerly fitted also it’ll modernize that post data a regular time intervals.

Create Below Table.
CREATE TABLE `posts` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(100) NOT NULL,
  `description` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1;
Create config.php file and add below line of code.
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "auto_save_demo"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());

Create index.php file and add below line of code.

<html lang="en">
<head>
  <title>Auto Save Example In PHP</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">  
  <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>     
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
</head>
<body>
<h3 class="text-success" align="center">Auto Save Example In PHP</h3><br>
<div class="container">   
  <div class="panel-group">
    <div class="panel panel-primary">
     <div class="panel-heading">Auto Save Example In PHP</div>
        <form class="form-horizontal" method="post">         
            <div class="panel-body">                 
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="title">Post Title:</label>
                        <div class="col-sm-5">
                          <input type="text" class="form-control" id="title" name="title" required>
                        </div>
                    </div>                    
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="description">Description:</label>
                        <div class="col-sm-5">
                          <textarea   class="form-control" id="description" cols="5" rows="5" name="description"></textarea>
                        </div>
                </div>
                <input type='hidden' id='postid' value='' >         
              
                <input type='button' id='submit' class="next btn btn-success" style='margin-left:30%' value='Submit'>
            </div>          
        </form>
      </div>
    </div>
</div> 
</body> 
<head>
<script>
setInterval(saveData, 5000);
function saveData(){
 
 var postid = $('#postid').val();
 var title = $('#title').val().trim();
 var content = $('#description').val().trim();

 if(title != '' || content != ''){
  
  $.ajax({
   url: 'autosave.php',
   type: 'post',
   data: {postid:postid,title:title,content:content},
   success: function(response){
    $('#postid').val(response);
   } 
  });
 }
 
}

</script>
</head>
</html>

Create autosave.php file and add below line of code.

<?php
include "config.php";
if(isset($_POST["title"]) && isset($_POST["content"]))
 {
     $post_id = mysqli_real_escape_string($con, $_POST["postid"]);
     $post_title = mysqli_real_escape_string($con, $_POST["title"]);
     $post_description = mysqli_real_escape_string($con, $_POST["content"]);
   
  if($post_id != '')  
  {  
    //update post  
    $sql = "UPDATE posts SET title = '".$post_title."', description = '".$post_description."' WHERE id =       '".$_POST["postid"]."'";  
     mysqli_query($con, $sql);       
  }  
  else  
  {  
    //insert post  
    $sql = "INSERT INTO posts(title,description) VALUES ('".$post_title."', '".$post_description."')";     
    mysqli_query($con, $sql);  
    $last_insert_id = mysqli_insert_id($con);  
    echo $last_insert_id;exit;
  }
 }

 

Upload Image In Angular With PHP                   Upload File In VueJs With PHP.

↑
Exit mobile version