Cara Membuat Auto Save ke draft

Selamat hari kamis teman-teman masih semangat ya untuk belajar menjadi developer website, untuk kali ini saya akan memberikan sebuah tutorial lagi bagaimana cara membuat auto save ke draft, auto save ke draft, dengan auto save ke draft tentunya berguna sekali untuk proses pembuatan artikel, seperti apa simak terus ya teman-teman.

Seperti yang saya tulis di atas manfaat membut auto save ke draft sama halnya teman-teman membuat sebuah artikel, atau mengirim pesan dimana ketika kita tidak mengirimnya atau ke close dan semacamnya, itu menyebalkan dimana kita sudah menulis panjang, rapih, tetapi ada suatu penyebab semua artikel kita kehapus, tentunya kita tidak mau seperti itu ya, dengan ini teman-teman tidak perlu lagi khawatir, karena ketika teman-teman menuliskan sebuah artikel, artikel tersebut akan auto save selama 5 detik, jadi setiap 5 detik artikel yang kita tulis itu akan ke save ke draft, munkin ini masih status ke draft ya, tetapi dengan cara pelan-pelan seperti ini saya harap teman-teman lebih mudah memahaminya.

oke langsung saja disini saya menyiapkan templatenya seperti ini

<html>  
      <head>  
           <meta name="viewport" content="initial-scale=1.0, user-scalable=no">  
           <meta charset="utf-8">  
           <title></title>  
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
      </head>  
      <body>  
           <div class="container">  
                <h2 align="center">Cara Membuat Auto Save ke draft</h2>  
                <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">
     <button type="button" name="publish" class="btn btn-info">Publish</button>
    </div>
                <div class="form-group">  
                     <input type="hidden" name="post_id" id="post_id" />  
                     <div id="autoSave"></div>  
                </div>  
           </div>  
      </body>  
 </html>  
 <scrupt src="https://code.jquery.com/jquery-3.4.1.min.js"></scrupt>

oke seperti ini lah contohnya, dan untuk cara ini saya gunakan adalah dengan menggunakan ajax ya,, karena supaya prosesnya itu langsung tanpa ada sebuah reload, jadi jangan lupa jquery.min.js nya dan script ajaxnya seperti ini

<script src=”https://code.jquery.com/jquery-3.4.1.min.js”></script>
<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(”);
}, 5000);
}
});
}
}
setInterval(function(){
autoSave();
}, 10000);
});
</script>

saya masukan disini karena, script di wordpress ini kena block ya teman-teman, jadi ketika kita baca autosave itu akan merolad selama 10 detik dan savedraft akan berjalan 5 detik, jadi seperti ini ajaxnya jika sudah kita ke webservicenya, karena proses ajax tersebut saya lempar ke file lain

<?php  
 $connect = mysqli_connect("localhost", "root", "rahasia", "db_post");
 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 tbl_send_post SET post_title = '".$post_title."', post_description = '".$post_description."' WHERE post_id = '".$_POST["postId"]."'";  
    mysqli_query($connect, $sql);  
  }  
  else  
  {  
    //insert post  
    $sql = "INSERT INTO tbl_send_post(post_title, post_description, post_status) VALUES ('".$post_title."', '".$post_description."', 'draft')";  
    mysqli_query($connect, $sql);  
    echo mysqli_insert_id($connect);  
  }
 }  
 ?>

oke jadi jika dari ke dua data inputan itu ada dan post id itu ada maka proses update lah yang akan di proses jika tidak maka insert, dan jika kita jalankan maka prosesnya akan seperti ini

 

 

 

 

 

 

 

 

 

 

 

silahkan teman-teman coba, jika belum ada idnya dia akan insert terlebih dahulu untuk proses backupnya, jika sudah ada dan teman-teman mengetik lagi maka proses update yang akan berjalan tidak percaya silahkan coba sendiri, oke saya rasa cukup sampai disini belajar kita tentang cara membuat auto save ke draft semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.