Cara Membuat Auto Save Menggunakan PHP AJAX

11/03/2019    Shelli Ripati    27     Website

Auto save adalah proses simpan secara otomatis, dimana proses simpan akan terus menerus di jalankan dengan selang waktu tertentu. Auto save ini dapat bermanfaat untuk kita ketika ingin melakukan input data yang memakan durasi lama dan banyak. Tentu apa yang kita input datanya kita tidak ingin hilang tiba tiba hanya karena komputer atau pc kita mati secara mendadak. Nah maka dari itu pada artikel kali ini saya akan membahas tentang Cara Membuat Auto Save Menggunakan PHP AJAX.

Langkah pertama Cara Membuat Auto Save Menggunakan PHP AJAX yaitu teman-teman bisa buat struktur html dan script ajaxnya seperti di bawah ini dan simpan dengan nama index.php.

<html> 

  <head>  

     <meta charset="utf-8"> 

     <title>Cara Membuat Auto Save Menggunakan PHP AJAX</title> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

  </head> 

  <body> 

      <div class="container"> 

        <h2 align="center">Cara Membuat Auto Save Menggunakan PHP AJAX</h2> 

        <div class="form-group"> 

           <label>Title</label> 

           <input type="text" name="post_title" id="post_title" class="form-control" /> 

        </div> 

        <div class="form-group"> 

             <label>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.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 tersimpan di draft"); 

              setInterval(function(){ 

                   $('#autoSave').text(''); 

              }, 5000); 

            } 

        }); 

      }           

    } 

    setInterval(function(){  

         autoSave();  

    }, 10000); 

 }); 

 </script>

Jika sudah maka kita lanjut untuk membuat script phpnya untuk proses simpan dan update kemudian simpan filenya dengan nama save.php.

<?php 

 $connect = mysqli_connect("localhost", "dumet", "school", "test");

 if(isset($_POST["postTitle"]) && isset($_POST["postDescription"]))

 {

  $post_title = mysqli_real_escape_string($connect, $_POST["postTitle"]);

  $post_description = mysqli_real_escape_string($connect, $_POST["postDescription"]);

  if($_POST["postId"] != '') 

  { 

    //update post 

    $sql = "UPDATE post SET title = '".$post_title."', description = '".$post_description."' WHERE id = '".$_POST["postId"]."'"; 

    mysqli_query($connect, $sql); 

  } 

  else 

  { 

    //insert post 

    $sql = "INSERT INTO post(title, description, status) VALUES ('".$post_title."', '".$post_description."', 'draft')"; 

    mysqli_query($connect, $sql); 

    echo mysqli_insert_id($connect); 

  }

 } 

 ?>

Nah untuk database teman-teman bisa salin saja dan paste di phpmyadmin.

CREATE TABLE IF NOT EXISTS `post` ( 

  `id` int(11) NOT NULL AUTO_INCREMENT, 

  `title` varchar(250) NOT NULL, 

  `description` varchar(300) NOT NULL, 

  PRIMARY KEY (`id`) 

 ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Demikian artikel tentang Cara Membuat Auto Save Menggunakan PHP AJAX. Semoga bermanfaat dan selamat mencoba.

 

 

 

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More