Membuat Fitur Auto Save dengan jQuery Ajax

Tutorial - 15 Nov 2013

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.

Membuat Fitur Auto Save dengan jQuery Ajax

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.



  • bagus artikelnya bos terima kasih, artikelnya simple dan bermakna selamat berkarya…, ini saya mau buat ujian online autosave 🙂

  • Al-Acban Class

    thanks buat artikelnya , 🙂 tapi kenapa ya ketika saya input operator ” + ” yang tersimpan di database malah menjadi spasi , mis : ketika saya input di judul : aal+++++ardi , tapi yang tersimpan di database menjadi : aal ardi . apakah ada solusi untuk permasalahan ini , terimakkasih buat artikelnya 🙂 [email protected]

    • Normalnya bisa mas. Cba pastikan kmbali mas sudah menuliskan mysql_real_escape_string pada printah menyimpan data seprti contoh diatas.

      mysql_real_escape_string
      mysql_real_escape_string

  • moslemfata fata

    thanks bro…. mohon bimbingannya