JQuery Ajax Kullanarak PHP MySQL Satır İçi Düzenleme

PHP JavaScript jQuery / Ajax

Merhaba değerli okurlarımız. Bugün sizlerle AJAX PHP ve MySQL kullanarak tablo içi satır düzenleme uygulaması yapacağız. Sizi fazla tutmadan uygulamamıza geçelim.

İlk adımda mysite.sql adlı bir dosya oluşturup içine de aşağıda ki kodlarımızı yazalım, ardından da phpmyadmin'e girip veri tabanımızı içe aktaralım.

CREATE DATABASE `mysite`;
USE `mysite`;

CREATE TABLE IF NOT EXISTS `customers` (
  `id` int(8) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `email` varchar(60) NOT NULL,
  `location` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;

INSERT INTO `customers` (`id`, `name`, `email`, `location`) VALUES
(1, 'Jim Connor', '[email protected]', 'Las Vegas'),
(2, 'Mark Higgins', '[email protected]', 'San Francisco'),
(3, 'Austin Joseph', '[email protected]', 'Boston'),
(4, 'Sean Kennedy', '[email protected]', 'Seattle'),
(5, 'Rose Harris', '[email protected]', 'New York'),
(6, 'Lilly Whites', '[email protected]', 'New York'),
(7, 'Jennifer Winters', '[email protected]', 'Miami'),
(8, 'Michael Bruce', '[email protected]', 'Los Angeles'),
(9, 'John Alex', '[email protected]', 'Chicago'),
(10, 'Demi Milan', '[email protected]', 'Austin');

dbconnect.php adında bir dosya oluşturalım ve veritabanı bağlantımızı yapalım.

<?php
$hostname = 'localhost';
$username = 'root';
$password = '';
$database = 'mysite';

$con = mysqli_connect($hostname, $username, $password, $database) or die("Error " . mysqli_error($con));
?>

şimdiyse index.php dosyamızı oluşturalım ve en üst kısma customers tablosunu ve veri tabanı bağlantımızı çekecek kodumuzu yazalım.

<?php
include_once 'dbconnect.php';

$sql = "select * from customers order by id";
$result = mysqli_query($con, $sql);
?>

<head></head> etiketleri içine boostrap dosyamızı dahil edelim.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<body></body> etiketleri içine customers tablosunu çekelim.

<h3 class="text-center bg-primary">AJAX ve PHP MySQL kullanarak tablo içi satır düzenleme</h3>
    <table class="table table-bordered">
      <tr class="bg-primary">
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
        <th>Location</th>
      </tr>
      <?php
      while($row = mysqli_fetch_array($result)) { ?>
        <tr>
          <td><?php echo $row['id']; ?></td>
          <td contenteditable="true" onfocus="changeBackground(this);" onblur="saveData(this, '<?php echo $row["id"]; ?>', 'name');"><?php echo $row['name']; ?></td>
          <td contenteditable="true" onfocus="changeBackground(this);" onblur="saveData(this, '<?php echo $row["id"]; ?>', 'email');"><?php echo $row['email']; ?></td>
          <td contenteditable="true" onfocus="changeBackground(this);" onblur="saveData(this, '<?php echo $row["id"]; ?>', 'location');"><?php echo $row['location']; ?></td>
        </tr>
      <?php } ?>
    </table>

hemen ardından </body> etiketinin hemen üstüne Jquery ve AJAX kodlarımızı yazalım.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript">
  function changeBackground(obj) {
    $(obj).removeClass("bg-success");
    $(obj).addClass("bg-danger");
  }

  function saveData(obj, id, column) {
    var customer = {
      id: id,
      column: column,
      value: obj.innerHTML
    }
    $.ajax({
      type: "POST",
      url: "savecustomer.php",
      data: customer,
      dataType: 'json',
      success: function(data){
        if (data) {
          $(obj).removeClass("bg-danger");
          $(obj).addClass("bg-success");
        }
      }
    });
  }
  </script>

son olarak savecustomer.php adlı bir dosya oluşturup içine Veritabanımızı güncelleyecek SQL kodlarımızı yazalım.

<?php
include_once "dbconnect.php";

$sql = "update customers set " . $_POST["column"] . "='" . $_POST["value"] . "' where id=" . $_POST["id"];
if (mysqli_query($con, $sql))
echo "true";
else
echo "false";
?>

işlemler tamam, şimdi test etme zamanı.

işte bu kadar. Beni dinlediğiniz için teşekkür ederim.