Membuat Live Edit Menggunakan Ajax Javascript Part2

Haloo teman-teman Dumet School. Di pembahasan sebelumnya saya sudah membuat database, table dan function load_ajax dinamis, function show untuk melakukan request database serta function generate_post untuk menampilkan data dengan innerHTML. Dalam Membuat Live Edit Menggunakan Ajax Javascript Part2 kita akan membuat file php untuk melakukan request tampil data serta membuat function double click dan blur pada table untuk dapat melakukan edit live.

Membuat Live Edit Menggunakan Ajax Javascript Part2 yang pertama kita harus buat file php agar melakukan request data ke database untuk menyelesaikan langkah menampilkan data menggunakan ajax javascript. Teman-teman buat file baru dengan nama database.php yang teman-teman simpan di folder app.

<?php 
$db = new Mysqli('localhost', 'dumet', 'school', 'webmaster');

$query = $db->query("SELECT * FROM shelli_posts ORDER BY id DESC");
$posts = [];

if($query->num_rows > 0) :
	while($row = $query->fetch_assoc()) :
		extract($row);

		$data = array(
			'id' => $id,
			'title' => $title,
			'body' => $body,
			'created_at' => $created_at
		);

		#push data
		array_push($posts, $data);

	endwhile;

	#output json
	echo json_encode($posts);
else:

	echo json_encode(array(
		'message' => 'No Posts Found'
	));

endif;

jika sudah selesai maka tampil data dengan menggunakan ajax javascript sudah kita selesaikan. Dengan begitu jika teman-teman buka di browser masing-masing maka akan tampak seperti pada gambar di bawah ini.

Langkah selanjutnya teman-teman buat function double click untuk menampilkan input text ketika kita melakukan klik dua kali di dalam file yang pertama kita buat dengan nama index.php. Dan berikut ini adalah scriptnya.

//focus dblclick
function editFocus(elemen){
  for(var i=0; i<elemen.length; i++){
    elemen[i].ondblclick = function(){
      var val = this.textContent;
      var id = this.getAttribute("data-id");
      var data = this.getAttribute("data");
      this.innerHTML = `<input class="form-control" id="input" value="${val}" data-id="${id}" data ="${data}"></input>`;
      var input = document.getElementById("input");
      input.focus();
      // input.setCursorPosition(textlength);
      editBlur(input, val);
    }
  }
}

Jika sudah teman-teman buat function untuk event blur dan berikut ini scriptnya.

//event blur
function editBlur(input, val){
  input.onblur = function(){
    input.blur();
    var text = this.value;
    var id = this.getAttribute('data-id');
    var data = this.getAttribute("data");
    this.innerHTML = `<span class="editdata" data-id="${id}" data ="${data}>${text}</span`;
    if(val !== text){
      app.edit(text, id, data);
      app.show();
      alert("Data Berhasil di edit");
    } 
    app.show();
  }
}

Ketika event blur dilakukan maka ada kondisi yang melakukan pengecekan antara data yang lama dengan data yang baru, jika ada perubahan maka function app.edit akan di jalankan dengan tiga data yang dikirim melalui parameter yang kemudian dilanjutkan dengan function app.show serta alert di jalankan.

Demikian artikel tentang Membuat Live Edit Menggunakan Ajax Javascript Part2. Kita akan lanjutkan untuk membuat function app.edit dan file update.php untuk menyelesaikan live edit menggunakan ajax javascript. Terima kasih

Membuat Live Edit Menggunakan Ajax Javascript Part2

Kategori