Perbarui data menggunakan jquery ajax php dan mysql

Dalam tutorial ini, kami membuat sistem komentar dasar yang terdiri dari formulir dengan dua kolom input. nama dan komentar. Seorang pengguna dapat menambahkan komentar pada halaman tanpa memuat ulang halaman [menggunakan Ajax] dan komentar ini disimpan di tabel komentar di database

Semua komentar dalam database ditampilkan di halaman dan pengguna dapat menghapus komentar hanya dengan mengarahkan kursor ke atasnya dan mengklik tombol 'x' yang muncul di komentar. Ini menghapus komentar tanpa memuat ulang halaman juga

Aplikasi ini hanya membutuhkan satu tabel database. Dalam hal ini, sebut saja tabel komentar.  

Jadi, buat database bernama ajax_crud. Di database itu, buat tabel dengan bidang-bidang berikut di dalamnya

• id - int[11]
• nama - varchar[255]
• komentar - teks

Selanjutnya, kami membuat file proyek. Kita akan membuat empat file yaitu

1. Indeks. php file yang menampilkan komentar dan komentar dari
2. Server. php yang berisi kode PHP yang bertanggung jawab untuk berkomunikasi dengan database melalui kueri
3. Sebuah skrip. js yang merupakan tempat semua kode Ajax dan JQuery ditemukan. Di sinilah panggilan ajax dilakukan tanpa memuat ulang halaman
4. Sebuah gaya. file css untuk menampung gaya CSS untuk menambah keindahan halaman kita

Sekarang sebelum kita melanjutkan, ada satu file lagi yang perlu kita tambahkan. Ajax adalah teknologi JQuery dan seperti yang mungkin sudah Anda duga, kita akan membutuhkan JQuery. Unduh JQuery dari situs web JQuery dan tambahkan di root aplikasi Anda

Oke, jadi sekarang di aplikasi kita ada lima file. Tapi mereka masih kosong

Mari kita kode sekarang

Buka indeks. php dan tempatkan kode ini di dalamnya

  
  Insert and Retrieve data from MySQL database with ajax
  


  

  	
  	
      

        Name:
      	
      
      

      	Comment:
      	
      
      POST
      UPDATE
  	
  

Tidak ada yang luar biasa bukan?

Perhatikan saja bahwa kami telah menyertakan tautan ke gaya kami. css, jquery. min. js [yang diunduh] dan skrip kami. file js.  

Sekarang buka style. file css dan rekatkan kode CSS ini di dalamnya

.wrapper {
  width: 45%;
  height: auto;
  margin: 10px auto;
  border: 1px solid #cbcbcb;
  background: white;
}
/*
* COMMENT FORM
**/
.comment_form {
  width: 80%;
  margin: 100px auto;
  border: 1px solid green;
  background: #fafcfc;
  padding: 20px;
}
.comment_form label {
  display: block;
  margin: 5px 0px 5px 0px;
}
.comment_form input, textarea {
  padding: 5px;
  width: 95%;
}
#submit_btn, #update_btn {
  padding: 8px 15px;
  color: white;
  background: #339;
  border: none;
  border-radius: 4px;
  margin-top: 10px;
}
#update_btn {
  background: #1c7600;
}
/*
* COMMENT DISPLAY AREA
**/
#display_area {
  width: 90%;
  padding-top: 15px;
  margin: 10px auto;
}
.comment_box {
  cursor: default;
  margin: 5px;
  border: 1px solid #cbcbcb;
  padding: 5px 10px;
  position: relative;
}
.delete {
  position: absolute;
  top: 0px;
  right: 3px;
  color: red;
  display: none;
  cursor: pointer;
}
.edit {
  position: absolute;
  top: 0px;
  right: 45px;
  color: green;
  display: none;
  cursor: pointer;
}
.comment_box:hover .edit, .comment_box:hover .delete {
  display: block;
}
.comment_text {
  text-align: justify;
}
.display_name {
  color: blue;
  padding: 0px;
  margin: 0px 0px 5px 0px;
}

Itu saja untuk CSS. Sekarang skripnya

Buka skrip. js dan rekatkan kode ini di dalamnya

$[document].ready[function[]{
  // save comment to database
  $[document].on['click', '#submit_btn', function[]{
    var name = $['#name'].val[];
    var comment = $['#comment'].val[];
    $.ajax[{
      url: 'server.php',
      type: 'POST',
      data: {
        'save': 1,
        'name': name,
        'comment': comment,
      },
      success: function[response]{
        $['#name'].val[''];
        $['#comment'].val[''];
        $['#display_area'].append[response];
      }
    }];
  }];
  // delete from database
  $[document].on['click', '.delete', function[]{
  	var id = $[this].data['id'];
  	$clicked_btn = $[this];
  	$.ajax[{
  	  url: 'server.php',
  	  type: 'GET',
  	  data: {
    	'delete': 1,
    	'id': id,
      },
      success: function[response]{
        // remove the deleted comment
        $clicked_btn.parent[].remove[];
        $['#name'].val[''];
        $['#comment'].val[''];
      }
  	}];
  }];
  var edit_id;
  var $edit_comment;
  $[document].on['click', '.edit', function[]{
  	edit_id = $[this].data['id'];
  	$edit_comment = $[this].parent[];
  	// grab the comment to be editted
  	var name = $[this].siblings['.display_name'].text[];
  	var comment = $[this].siblings['.comment_text'].text[];
  	// place comment in form
  	$['#name'].val[name];
  	$['#comment'].val[comment];
  	$['#submit_btn'].hide[];
  	$['#update_btn'].show[];
  }];
  $[document].on['click', '#update_btn', function[]{
  	var id = edit_id;
  	var name = $['#name'].val[];
  	var comment = $['#comment'].val[];
  	$.ajax[{
      url: 'server.php',
      type: 'POST',
      data: {
      	'update': 1,
      	'id': id,
      	'name': name,
      	'comment': comment,
      },
      success: function[response]{
      	$['#name'].val[''];
      	$['#comment'].val[''];
      	$['#submit_btn'].show[];
      	$['#update_btn'].hide[];
      	$edit_comment.replaceWith[response];
      }
  	}];		
  }];
}];

Kode dalam skrip. js di atas seperti yang disebutkan sebelumnya adalah panggilan ajax yang dilakukan ke server. file php. Bagian pertama dari skrip mengirimkan permintaan dengan data ke server ketika pengguna mengklik tombol posting. Yang kedua mengirimkan permintaan yang memiliki comment_id untuk mengidentifikasi komentar spesifik dalam database dengan id itu dan menghapusnya

Untuk kode server, buka server. php dan rekatkan kode berikut di dalamnya