Membuat Fitur Auto Save dengan jQuery Ajax

Auto save atau menyimpan data otomatis ke database merupakan salah satu fitur terbaik yang dimiliki oleh Ajax. Ketika menulis sebuah artikel, data yang diketikkan secara otomatis akan tersimpan ke database. Ini akan sangat membantu jika suatu ketika web browser kita mengalami kerusakan.

Jika Anda pernah menggunakan CMS WordPress, fitur auto save ini sama halnya seperti yang ada di WordPress. Untuk membuat fitur auto save tidaklah sulit, kita akan memanfaatkan plugin jQuery dan Ajax untuk menjalankannya. Untuk lebih jelas bagaimana fitur auto save bekerja, silahkan lihat demo dibawah terlebih dahulu.

Cara Kerja Auto Save

Cara kerja auto save ini sangatlah sederhana yaitu :

• Ketika user membuka halaman untuk menulis artikel, secara otomatis PHP akan menjalankan query untuk menginputkan 1 data artikel baru ke database
• Selanjutnya, id artikel tersebut akan diingat untuk sementara. Nantinya setiap 20 detik sekali, dengan bantuan jQuery Ajax data artikel tersebut akan disimpan ke database secara otomatis

Berikut langkah-langkah untuk membuat fitur auto save dengan jQuery Ajax.

Langkah 1

Buatlah sebuah tabel di databae MySQL. Tabel ini digunakan untuk mennyimpan data artikel.

CREATE TABLE `artikel` (
  `id` int(5) NOT NULL auto_increment,
  `judul` varchar(100) NOT NULL default '',
  `konten` varchar(255) NOT NULL default '',
  `waktu` timestamp NOT NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1;

Langkah 2

Buatlah file index.php, file ini terbagi menjadi 3 bagian yaitu :

Bagian 1 file index.php

//Membuat artikel baru di database
mysql_query("INSERT INTO `artikel`(judul, konten) VALUES('', '')"); // Menginput artikel baru ke database
$id_artikel = mysql_insert_id(); // Menampung id artikel yang telah dibuat ke variabel id_artikel

Perintah diatas ialah perintah untuk menginputkan artikel baru ke database. Perintah diatas akan dijalankan pertama sekali ketika user menajalankan file index.php.

Bagian 2 file index.php

<form method="post" action="simpan.php">
Judul:<br />
<input type="text" name="judul" id="txt_judul" size="50" maxlength="50" class="normal-input"/><br />
Konten:<br />
<textarea name="konten" id="txt_konten" cols="50" rows="5" class="normal-textarea"></textarea><br />
<input type="hidden" name="id_artikel" value="<?php echo $id_artikel ?>" />
<input type="submit" value="Simpan" class="tombol" /><br />
</form>

Perintah diatas ialah perintah untuk membuat desain form inputan artikel menggunakan HTML.

Bagian 3 file index.php

<script type="text/javascript">
  $(document).ready(function(){     
    autosave();
 });
 
  function autosave()
 {
   var t = setTimeout("autosave()", 20000); // Jalankan fungsi autosave setiap 20 detik sekali
           
    var judul = $("#txt_judul").val();
    var konten = $("#txt_konten").val();
      
    if (judul.length > 0 || konten.length > 0)
    {
     $.ajax(
     {
       type: "POST",
       url: "autosave.php",
        data: "id_artikel=" + <?php echo $id_artikel ?> + "&judul=" + judul + "&konten=" + konten,
        cache: false,
       success: function(message)
        { 
          $("#waktu").empty().append(message);
        }
     });
   }
 } 
  </script>

Perintah diatas ialah perintah untuk menjalankan auto save setiap 20 detik. Proses penyimpanan datanya akan diarahkan ke file autosave.php

Langkah 3

Setelah membuat file index.php, buatlah file autosave.php. File ini berisi perintah untuk menyimpan data artikel ke database setiap 20 detik.

autosave.php

//Meng-include-kan file konfigurasi Database
include('db_config.php');

$judul = mysql_real_escape_string($_POST['judul']);
$konten = mysql_real_escape_string($_POST['konten']);
$id = (int)$_POST['id_artikel'];

//Memnyimpan artikel ke database
mysql_query("UPDATE `artikel` SET judul = '$judul', konten = '$konten' WHERE id = '$id'");

//Mengambil data waktu
$query = mysql_query("SELECT waktu FROM `artikel` WHERE id = $id");
$waktu = mysql_result($query, 0);

//Menampilkan waktu terakhir artikel disimpan
echo 'Terakhir Disimpan : ', $waktu;

Kesimpulan

Fitur auto save merupakan fitur yang sangat bermanfaat. Anda dapat meng-implementasikan fitur auto save ini di berbagai proses input data pada aplikasi web Anda. Seperti input data artikel, data barang, penjualan, biodata dan sebagainya. Semoga bermanfaat.