Type something and hit enter

author photo
By On
Autosave Data Dengan jQuery Ajax di Codeigniter PHP dan MySQL
Autosave Data Dengan jQuery Ajax di Codeigniter

Autosave adalah fungsi program yang berguna menyimpan data yang sedang dibuka secara otomatis ke dalam database, hal ini berguna untuk membantu mengurangi risiko atau dampak dari kehilangan data pada saat bekerja, misalnya pada saat menulis sebuah artikel di halaman web dan data akan otomatis tersimpan ke database. hal ini sangat berguna sekali pada saat listrik mati, browser crash, jadi dengan adanya fungsi ini maka si penulis nantinya tidak perlu harus mengulang dari awal lagi.
jadi sama halnya pada saat anda menulis artikel pada blog wordpress, blogger, dll. fungsi Autosave data ini dibuat dengan memanfaatkan Jquery Ajax di Codeigniter dan dengan menggunakan Database MySQL.
Cara kerja auto save ini sangatlah sederhana yaitu :
Pada saat user membuka halaman untuk menulis, secara otomatis program akan menjalankan query untuk menginputkan 1 data/record baru ke database dan Selanjutnya, id artikel tersebut akan ditampung ke dalam session untuk sementara. lalu setiap 10 detik sekali, dengan bantuan jQuery Ajax data artikel tersebut akan disimpan ke database secara otomatis.
Oke, berikut langkah-langkah :
Buatlah sebuah tabel di databae MySQL. Tabel ini digunakan untuk mennyimpan data artikel.
CREATE TABLE `berita` (
  `id_berita` int(5) NOT NULL,
  `judul` varchar(100) COLLATE latin1_general_ci NOT NULL,
  `isi_berita` longtext CHARACTER SET latin1 NOT NULL,
  `tanggal` date NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;

ALTER TABLE `berita` ADD PRIMARY KEY (`id_berita`);

Selanjutnya Buat File “controllers/Berita.php” untuk Tambah Berita :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Berita extends CI_Controller {
function tambah_berita(){
 if (isset($_POST['submit'])){
         $data = array('judul'=>$this->input->post('judul'),
                       'isi_berita'=>$this->input->post('isi'),
                       'tanggal'=>date('Y-m-d'));
         $where = array('id_berita' => $this->input->post('id'));
  $this->model_app->update('berita', $data, $where);
  $this->session->unset_userdata('id_berita');
  redirect('berita');
 }else{
  if ($this->session->id_berita==''){
  $data = array('judul'=>'',
                       'isi_berita'=>'',
                       'tanggal'=>date('Y-m-d'));
         $this->model_app->insert('berita',$data);
  $id = $this->db->insert_id();
  $this->session->set_userdata(array('id_berita'=>$id));
  }
  $this->load->view('view_berita_tambah');
 }
}

function autosave_berita(){
        $data = array('judul'=>$this->input->post('judul'),
                      'isi_berita'=>$this->input->post('isi'),
                      'tanggal'=>date('Y-m-d'));
        $where = array('id_berita' => $this->input->post('id'));
 $this->model_app->update('berita', $data, $where);
}
}

Buat “models/Model_app.php” untuk Insert dan Update Berita..
<?php 
class Model_app extends CI_model{
    public function insert($table,$data){
        return $this->db->insert($table, $data);
    }
 
    public function update($table, $data, $where){
        return $this->db->update($table, $data, $where); 
    }
}

Buat “views/view_berita_tambah.php” untuk interface halaman tambah Berita..

<!DOCTYPE html>
<html>
<head>
  <title>Autosave data dengan Jquery Ajax di Codeigniter dan MySQL</title>
  <meta name="author" content="Robby Prihandaya">
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
  <script type="text/javascript">
  // Perintah untuk menjalankan autosave per-10 detik
    $(document).ready(function(){ autosave(); });
      function autosave(){
        var t = setTimeout("autosave()", 10000);
        var id = $("#id").val(); 
        var judul = $("#judul").val();
        var isi = $("#isi").val();
           $.ajax({
              type: "POST",
              url:"<?php echo base_url('berita/autosave_berita'); ?>",
              data: "id=" + id + "judul=" + judul + "&isi=" + isi,
              cache: false,
           });  
      } 
  // Akhir Perintah untuk menjalankan autosave per-10 detik
  </script>
</head>
<body>
<?php 
// Tampilan Form Inputan Berita
  echo form_open('berita/tambah_berita'); 
  echo "<table width='100%'>
          <input type='hidden' name='id' id='id' value='".$this->session->id_berita."'>
          <tr><th width='120px'>Judul</th>    <td><input type='text' name='judul' id='judul' required></td></tr>
          <tr><th>Isi Berita</th> <td><textarea name='isi' style='height:200px' id='isi' required></textarea></td></tr>
        </table>
        <button type='submit' name='submit'>Tambahkan</button>";
  echo form_close();
?>
// Akhir Form Inputan Berita
</body>
</html>

Seperti yang dilihat pada views di atas untuk proses autosave mengarah ke Controllers “berita/autosave_berita”, jadi cukup mudah bukan, untuk fitur autosave ini akan sangat berguna sekali untuk mengamankan data anda dari masalah-masalah yang tidak terduga, untuk fitur auto save ini bisa anda gunakan untuk keperluan input data apapun, mulai dari berita, data barang, transaksi, dll.

Click to comment