Tuesday, 15 March 2016

Auto Save Data using Ajax, Jquery, PHP and Mysql



In this post we are going to learn how to save data automatically in database on specific time interval using Ajax Jquery with PHP and Mysql. This type of functionality you can show into Wordpress Admin side. When Admin post new post or page then after a long on page and he not published post or page then after some time post automatically saved into database as a draft. So, this type of functionality we are going to learn into this post. In this post I show you simple post example. I use simple form for posting simple article with title and description. When user enter title and description thenafter some time interval post automatically insert into database table. This things happends only after user enter post title and description. If this tutorial if post enter for first time then it insert into database table but if post already inserted then it update that post data on regular time interval. I think you will understand this things.


Source Code

Database Table


 CREATE TABLE IF NOT EXISTS `tbl_post` (  
  `post_id` int(11) NOT NULL AUTO_INCREMENT,  
  `post_title` text NOT NULL,  
  `post_description` text NOT NULL,  
  `post_status` varchar(15) NOT NULL,  
  PRIMARY KEY (`post_id`)  
 ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;  


index.php


 <html>  
      <head>  
           <meta name="viewport" content="initial-scale=1.0, user-scalable=no">  
           <meta charset="utf-8">  
           <title>Webslesson Tutorial</title>  
           <script src="jquery.js"></script>  
           <script src="js/bootstrap.js"></script>  
           <link href="css/bootstrap.css" rel="stylesheet" />  
      </head>  
      <body>  
           <div class="container">  
                <br />  
                <h2 align="center">Auto Save Data using Ajax, Jquery, PHP and Mysql</h2>  
                <br />  
                <div class="form-group">  
                     <label>Enter Post Title</label>  
                     <input type="text" name="post_title" id="post_title" class="form-control" />  
                </div>  
                <div class="form-group">  
                     <label>Enter Post Description</label>  
                     <textarea name="post_description" id="post_description" rows="6" class="form-control"></textarea>  
                </div>  
                <div class="form-group">  
                     <input type="hidden" name="post_id" id="post_id" />  
                     <div id="autoSave"></div>  
                </div>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      function autoSave()  
      {  
           var post_title = $('#post_title').val();  
           var post_description = $('#post_description').val();  
           var post_id = $('#post_id').val();  
           if(post_title != '' && post_description != '')  
           {  
                $.ajax({  
                     url:"save_post.php",  
                     method:"POST",  
                     data:{postTitle:post_title, postDescription:post_description, postId:post_id},  
                     dataType:"text",  
                     success:function(data)  
                     {  
                          if(data != '')  
                          {  
                               $('#post_id').val(data);  
                          }  
                          $('#autoSave').text("Post save as draft");  
                          setInterval(function(){  
                               $('#autoSave').text('');  
                          }, 2000);  
                     }  
                });  
           }            
      }  
      setInterval(function(){   
           autoSave();   
           }, 10000);  
 });  
 </script>  


save_post.php

 <?php  
 $connect = mysqli_connect("localhost", "root", "", "testing");  
 if($_POST["postId"] != '')  
 {  
      //update post  
      $sql = "UPDATE tbl_post SET post_title = '".$_POST["postTitle"]."', post_description = '".$_POST["postDescription"]."' WHERE post_id = '".$_POST["postId"]."'";  
      mysqli_query($connect, $sql);  
 }  
 else  
 {  
      //insert post  
      $sql = "INSERT INTO tbl_post(post_title, post_description, post_status) VALUES ('".$_POST["postTitle"]."', '".$_POST["postDescription"]."', 'draft')";  
      mysqli_query($connect, $sql);  
      echo mysqli_insert_id($connect);  
 }  
 ?>  

4 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Thank you for sharing; it’s nice and helpful information. I hope I could read more information like this in the next visit.
    regards,
    SEO melbourne

    ReplyDelete
  3. Wheres the link for script.js, bootstrap.js i get 404 error

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete