Published July 16, 2019 by RIT with 0 comment

HOW TO UPDATE/EDIT AJAX IN PHP

CARA INSERT PHP dengan ajax Jquery

Assalamualaikum warohmatullohi wabarokatuh,
Wa alaikum salam warohmatullohi wabarokatuh.

Di episode sebelumnya memberikan koding cara menampilkan data pada php dengan dengan ajax Jquery,

dan pada episode kali ini akan memberikan kepada pembaca berupa koding edit data pada php dengan menggunakan ajax Jquery,

disaat user ingin mengubah data maka, user klik / menekan tombol edit yang ada pada tabel,

lalu user melihat data yang lama pada kolom input, setelah isi data yang terbaru, user klik tombol simpan / tombl update untuk memperbarui data yang lama atau data yang salah.

berikut script edit data pada php dengan ajax Jquery.


?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php 
$koneksi = mysqli_connect('localhost','root','','test'); 
 
$q  = 'SELECT * FROM tb_siswa';
$q2 = mysqli_query($koneksi, $q);
 
?>
 
<table border="1" >
    <tr bgcolor="yellow" align="center">
        <td>NAME</td>
        <td>OPERATION</td>
    </tr>
 
<?php while ( $row = mysqli_fetch_array($q2)) { ?>
    <tr>
        <td><?php echo $row['nama']; ?></td>
        <td><button><a href="update_ajax_form.php?id=<?php echo $row['id']; ?>">edit</a></button></td>
    </tr>
<?php } ?>
 
</table>

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php 
$koneksi = mysqli_connect('localhost','root','','test');
$id = $_GET['id'];
$qu = "SELECT * FROM tb_siswa WHERE id='$id'";
$reu =mysqli_query($koneksi, $qu);
$row =mysqli_fetch_array($reu);
?>
<script type="text/javascript" src="jquery.js"></script>
 
<form method='POST' class='formUpdate'>
 
  <input type='text' name="nama" value='<?php echo $row['nama']; ?>'>
  <input type='hidden' name="id" value='<?php echo $row['id']; ?>'>
  <input type='submit'  class='btn_update' value='update'>
 
</form>
 
<script type="text/javascript">
  $(document).ready(function(){
    $(".btn_update").click(function(id){
           var data = $('.formUpdate').serialize();
            $.ajax({
              type: 'POST',
              data: data,
              url: "update_proses.php",
              success: function(){
                location.href="index.php";
              } 
          });       
      });
  });
</script>

?
1
2
3
4
5
6
7
8
9
<?php
$koneksi = mysqli_connect('localhost','root','','test'); 
 
$id   = $_POST['id'];
$nama = $_POST['nama'];
$query    = "UPDATE tb_siswa SET nama='$nama' WHERE id='$id'";
$query2   = mysqli_query($koneksi,$query);
return $query2;
 ?>



berikut hasil dari koding diatas :




pada gambar ini saat user memilih data yg ingin di edit / update, makan akan tampil nama yg ingin di edit atau rubah.



user menambahkan tulisan update di akhir namanya, lalu tekan atau klik tombol update untuk memperbarui datanya



dan hasilnya adalah pada nama yg barusan telah di edit akan bertambah tulisan update sesuai yg di tulis sebelumnya, bisa dilihat pada gambar yg berkotak warna merah


Terima Kasih.
Thank's

BACA JUGA :


TAGS :
CARA UPDATE DAN EDIT DATA DENGAN AJAX JQUERY | CARA UPDATE FORM DENGAN AJAX | SCRIPT UPDATE AJAX PHP | CARA UPDATE AJAX DENGAN JQUERY | CARA UPDATE PHP DENGAN AJAX | CARA AJAX UPDATE DENGAN PHP | CARA AJAX UPDATE DENGAN JQUERY | HOW TO UPDATE PHP WITH AJAX

, , ,

      edit

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)