Cara Membuat Auto Save Menggunakan PHP AJAX

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.

 

 

 

11 Maret 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat