Cara Membuat Auto Save ke draft
Selamat hari kamis teman-teman masih semangat ya bagi belajar menjadi developer laman, bagi kali ini saya akan memberikan sebuah panduan lagi bagaimana cara membangun auto save ke draft, auto save ke draft, dengan auto save ke draft pastinya bermanfaat sekali bagi proses penyusunan artikel, seperti apa simak terus ya teman-teman.
Seperti yang saya tulis di atas manfaat membut auto save ke draft sama halnya teman-teman membangun sebuah artikel, atau mengirim pesan dimana ketika kita tak mengirimnya atau ke close dan semacamnya, itu menyebalkan dimana kita telah menulis panjang, rapih, tetapi ada suatu penyebab seluruh artikel kita kehapus, pastinya kita tak mau seperti itu ya, dengan ini teman-teman tak perlu lagi khawatir, karena ketika teman-teman menuliskan sebuah artikel, artikel tersebut akan auto save dalam rentang waktu 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 gampang memahaminya.
oke seketika 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 Membangun 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 bagi cara ini saya gunakan yakni dengan menggunakan ajax ya,, karena supaya prosesnya itu seketika 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 dalam rentang waktu 10 detik dan savedraft akan berjalan 5 detik, jadi seperti ini ajaxnya seandainya telah 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 seandainya dari ke dua data inputan itu ada dan post id itu ada karenanya proses update lah yang akan di proses seandainya tak karenanya insert, dan seandainya kita jalankan karenanya prosesnya akan seperti ini
silahkan teman-teman coba, seandainya belum ada idnya dia akan insert terlebih dahulu bagi proses backupnya, seandainya telah ada dan teman-teman mengetik lagi karenanya proses update yang akan berjalan tak percaya silahkan coba sendiri, oke saya rasa lumayan hingga disini belajar kita mengenai cara membangun auto save ke draft semoga bermanfaat dan hingga jumpa di artikel berikutnya terimakasih.
Sumber https://kursuswebsite.org
