Cara Membuat Auto Save tiap Beberapa Detik/Second ke Database dengan PHP

March 18, 2019

2 Comments

Cara Membuat Auto Save ke Database MySQL/MariaDB dengan PHP dengan Ajax – Hai ketemu lagi dengan saya dan pada kesempatan kali ini saya akan membahas tentang cara membuat autosave ke database pada PHP menggunakan Ajax. Karena menggunakan ajax jadi tidak akan ada loading dan pengguna tidak akan sadar jika sistem kita menyimpan ke database. Jika kita membuat aplikasi untuk memposting suatu artikel atau berita dan membutuhkan waktu yang lama untuk usernya menuliskan suatu artikelnya pasti aplikasi yang kita buat harus ada autosave karena jika tidak ada dan tiba-tiba terjadi masalah sehingga data yang sudah diinputkan hilang dan belum tersimpan kasihan pengguna aplikasinya karena harus menuliskan lagi dari awal dan hal ini juga akan menjadikan user akan males untuk menggunakan aplikasi kita. Seperti wordpres saja biasanya jika kita akan memposting artikel dan tiba-tiba laptop kita mati maka akan tersimpan sebagai Draft. Begitu juga untuk aplikasi yang kita buat, jika pengguna tidak sengaja menutup browser/koneksi internet mati/laptop tiba-tiba mati maka data yang sudah diinputkan oleh user masih tersimpan pada draftnya dan tentu belum terpublish karena kita akan menambahkan status Draft dan Publish. Tidak usah berlama-lama lagi akan saya jelaskan langkah-langkahnya :

Membuat Database MySQL

1. Pertama yang WAJIB ada yaitu sobat harus membuat sebuah database. Sobat bisa menggunakan tools bantu seperti navicat, heidi SQL atau lainnya. Sobat juga bisa membuatnya dengan mengakses url localhost/phpmyadmin -> klik tab Database dan tuliskan db_dewankomputer-> Klik tombol Create/Buat.

2. Buat tabel untuk mengetesnya dengan mengetikkan query dibawah ini pada tab SQL lalu klik tombol Kirim/Go

CREATE TABLE `tbl_post`  (
  `id` mediumint(8) UNSIGNED NOT NULL AUTO_INCREMENT,
  `judul` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL,
  `deskripsi` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL,
  `status` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `datetime` datetime(0) NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP(0),
  PRIMARY KEY (`id`) USING BTREE
)

Cara Membuat Autosave

1.Buat file koneksi.php yang berfugsi untuk menyambungkan aplikasi dengan database dan isikan dengan kode dibawah

<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB1', 'db_dewankomputer');

// Buat Koneksinya
$db1 = new mysqli(HOST, USER, PASS, DB1);
?>

isikan sesuai dengan host, user, password, dan nama database sobat. Untuk contoh di bawah ini saya berinama database dengan nama db_dewankomputer.

Jika sobat ingin tahu cara mengkoneksikan dengan dua database atau lebih dalam satu aplikasi maka sobat bisa kunjungi postingan dibawah ini

Cara Membuat Koneksi dengan Database MySQL bisa Dua atau Lebih Koneksi database/Multiple Connection dalam Satu Host maupun beda Host

2. Buat file index.php dan isikan dengan script dibawah ini

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <link rel="icon" href="dk.png">
  <title>Dewan Komputer | Auto save dengan Ajax</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
  <nav class="navbar navbar-dark bg-primary">
    <a class="navbar-brand text-white" href="index.php">
      Dewan Komputer
    </a>
  </nav>

  <div class="container">
    <h2 align="center" class="mt-4 mb-4">Simpan Otomatis dengan Ajax, PHP dan Mysql</h2>
    <div class="form-group">
      <label>Judul</label>
      <input type="text" name="judul" id="judul" class="form-control" />
    </div>
    <div class="form-group">
      <label>Deskripsi</label>
      <textarea name="deksripsi" id="deksripsi" 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>

  <div class="p-2 text-white bg-secondary text-center">© <?php echo date('Y'); ?> Copyright:
      <a href="https://dewankomputer.com/"> Dewan Komputer</a>
  </div>

  <script>
    $(document).ready(function(){
      function autoSave(){
        var judul = $('#judul').val();
        var deksripsi = $('#deksripsi').val();
        var post_id = $('#post_id').val();
        if(judul != '' ||deksripsi != '') {
          $.ajax({
            url:"auto_save.php",
            method:"POST",
            data:{judul:judul, deksripsi:deksripsi, post_id: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); // simpan tiap 10 detik
    });
  </script>
</body>
</html>

Penjelasan :

Untuk librari css dan js saya menggunakan online karena hanya untuk keperluan demo, jika sobat ingin membuatnya untuk development maka sobat perlu mendownloadnya terlebih dahulu atau sobat bisa mendowload bersama project ini diakhir postingan. Karena kita menggunakan Ajax jadi kita wajib untuk memasukkan jquery.js/jquery.min.js. Untuk pembuatan form standar, yang paling penting adalah kode javasciprnya yang dibawah ini

<script>
  $(document).ready(function(){
    function autoSave(){
      var judul = $('#judul').val();
      var deksripsi = $('#deksripsi').val();
      var post_id = $('#post_id').val();
      if(judul != '' || deksripsi != '') {
        $.ajax({
          url:"auto_save.php",
          method:"POST",
          data:{judul:judul, deksripsi:deksripsi, post_id: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); // simpan tiap 10 detik
  });
</script>

Kode diatas adalah kode untuk menyimpan secara otomatis setiap 10 detik yang dikirim menggunakan Ajax. Untuk jumlah kolomnya juga bisa sobat tambahkan disini tergantung banyak kolomnya.

3. Kemudian seperti yang terlihat diatas kita buat file auto_save.php dan kita ketikkan seperti kode dibawah

<?php  
include 'koneksi.php';

if(isset($_POST["judul"]) && isset($_POST["deksripsi"])){
  $judul = mysqli_real_escape_string($db1, $_POST["judul"]);
  $deksripsi = mysqli_real_escape_string($db1, $_POST["deksripsi"]);
  if($_POST["post_id"] != ''){
    $id = $_POST["post_id"];
    $query = "UPDATE tbl_post SET judul=?, deksripsi=? WHERE id=?";
    $dewan1 = $db1->prepare($query);
    $dewan1->bind_param('ssi', $judul, $deksripsi, $id);
    $dewan1->execute();
  } else {
    $query = "INSERT INTO tbl_post(judul, deksripsi, status) VALUES (?, ?, 'draft')";
    $dewan1 = $db1->prepare($query);
    $dewan1->bind_param('ss', $judul, $deksripsi);
    $dewan1->execute();
    echo mysqli_insert_id($db1);  
  }
 }  
 ?>

Penjelasan:

Pada kode diatas terdapat 2 query yaitu query INSERT dan UPDATE, bedanya yaitu jika idnya kosong atau postingan baru maka sistem akan memasukkan sebagai record baru dan jika idnya sudah terisi atau sudah pernah tersimpan sebelumnya maka hanya akan dilakukan update.

Jika sobat jalankan maka hasilnya akan seperti gambar dibawah

Cara diatas hanya autosavenya saja ya, jika klik publish maka tidak akan terjadi apa-apa karena itu kodenya sama seperti update yang ada pada auto_save.php hanya menambahkan status saja menjadi publish. Jika sobat ingin membuatnya dan menggunakan Ajax juga maka sobat bisa melihat postingan saya lainnya tentang CRUD menggunakan Ajax karena saya sudah sering membahas itu. Sekian postingan kali ini tentang Cara Membuat Auto Save ke Database dengan PHP. Jika ada kesalahan saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah. Kunjungi postingan saya lainnya untuk menambah wawasan dan ilmu sobat.

Cara Menyimpan Form Otomatis / AutoSave Menggunakan Cookies pada HTML PHP

Cara Membuat Autocomplete dengan Plugin pada PHP

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

2 thoughts on “Cara Membuat Auto Save tiap Beberapa Detik/Second ke Database dengan PHP”

Joooo says:

October 24, 2019 at 6:22 am

Gan,
Gimana kalau auto save tanpa ajax atau langsung di php.
Maksudnya untuk membuat cron.
berikut scripnya

Jadi nanti cukup pakai link http://server.com/auto.php?id=1

data dengan ID 1 akan terupdate dengan data terbaru dari data di bawah

Form Update

Id
:
<input type="text" name="id" disabled='disable' value="”>

Name
:
<input type="text" name="name" value="”>

Address
:

<input type="hidden" name="id" value="”>

Reply
1. dewan says:
  
  October 30, 2019 at 8:49 am
  
  ya ga bisa gan karena itu ngga ada parameter nama dan address yg dikirim hanya id
  kalo dari form jg ga bisa baca form setiap komputer user dong
  
  Reply