Merhabalar,

Bu makalede html ile oluşturulmuş bir tablo üzerinde jquery ile sayfa yenilemeden düzenleme işlemleri yapacağız. Bu işlemler veri ekleme, veri silme veya veri düzenleme olabilir.

Öncelikle sayfamızın <head> </head> etiketleri arasına jquery dosyamızı çağıralım.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

Ben bildirim kutuları olarak sweet alert 2 kullanacağım. Bunun için sayfanın gerekli dosyaları çağırıyorum.

<script src='https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.6/sweetalert2.js'></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.6/sweetalert2.min.css'>

Gerekli tüm dosyaları sayfamıza dahil ettikten sonra işlemlere başlayalım.

Yeni Bir Veri Ekleme

Bunun için bir div hazırlayabilir veya bootstrap tasarımlardan bir tane seçebilirsiniz. Ben şuanda hazır bir tasarım seçtim,

<form id='yeni_veri' action="javascript:void(0);">
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Yeni Veri Ekle</h4>
</div>
<div class="modal-body">

<div class="form-group">

</div>
<div class="form-group">

<input class="form-control " type="text" name="isim" placeholder="İsim">
</div>
<div class="form-group">

<input class="form-control " type="text" name='soyisim' placeholder="Soyisim">
</div>
<div class="form-group">

<input class="form-control " type="email" name='email' placeholder="E-mail">
</div>

</div>
<div class="modal-footer ">


<input name="submit" type="submit" id="submit" onclick="verigonder();" class="btn btn-warning btn-lg" style="width: 100%;">

</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div></form>

Bu tasarımı kullanabilmem için sayfama bootstrap kütüphanelerini çağırmam lazım. Bunun için Getting Started Bootstrap adresinden cdn bağlantılarını sayfama ekleyeceğim.

Daha sonra bir butona basıldığında bu divin açılmasını istiyorum. Bunun için bir buton oluşturup data-target değeri ile gizli olan div’ime bağlamam gerekiyor.

<p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" >Yeni Veri Ekle</button></p>

Artık Yeni Veri Ekle butonuma basıldığında veri ekleme panelim açılacak. Şimdi ise panelden aldığım verileri göndereceğim bir sayfa ve ajax fonksiyonu yazacağım. Öncelikle verileri sayfa değişmeden göndermek için script bölümünü yazacağım.

<script type="text/javascript">

function verigonder(){
var veriler = $('#yeni_veri').serialize();
$.ajax({
type: "POST",
url: "gonder.php",
data: veriler,
success:function(cevap){
swal(
'Başarılı!',
'Veriler Eklendi. ',
'success'
)
}
})};

</script>

Burada onclick değeri verigonder olan butona basıldığında yeni_veri id’li formdaki değerleri alıp gonder.php dosyama gönderiyorum. İşlem başarılı ise sweet alert kutularımdan success kutumu çalıştırıyorum. Gonder.php dosyanızda ise verileri formdaki name değerleri ile alıp istediğiniz işlemi yapabilirsiniz. Örnek işlem,

<?php

/* Veritabanı bağlantınızı include edin.

include 'db_connect.php'; şeklinde

*/

if($_POST) { //Post Kontrolüm




$isim = $_POST['isim'];
$soyisim = $_POST['soyisim'];
$email = $_POST['email'];

$query = $db->prepare("INSERT INTO uyeler SET
uye_isim = ?,
uye_soyisim = ?,
uye_eposta = ?");
$insert = $query->execute(array(
$isim, $soyisim, $email
));
if ( $insert ){
$last_id = $db->lastInsertId();
print "insert işlemi başarılı!";
}




}

Veri Düzenleme

Bunun için verileri link formatına çevireceğim. Linklere id değeri atayıp değerlere göre işlem yapacağım. Örnek olarak aşağıda çevirilmiş bir satır görüyorsunuz.

//Orjinal Satır
<td>Ekmek</td>
//Düzenlenmiş Hali
<td><a id='tur_3' href='javascript:void(0);' onclick='duzenle();' >Ekmek</a></td>

Burada id=’tur_3′ değerinde tur veritabanında hangi sütunu düzenleyeceğimi, 3 ise düzenleyeceğim verinin id değerini bana veriyor. Bunu döngü içerisinde çekerken,

<td><a id="tur_$db['id']" href='javascript:void(0);' onclick='duzenle();' >$db['isim']</a></td>

şeklinde çekiyorum. Şimdi ise duzenle fonksiyonumu yazacağım.

<script type="text/javascript">

function duzenle(){

var deger = event.target.id;

swal({
title: 'Değeri Düzenle',
input: 'text',
showCancelButton: true,
confirmButtonText: 'Düzenle',
showLoaderOnConfirm: false,
preConfirm: function (deger) {
return new Promise(function (resolve, reject) {
setTimeout(function() {
if (deger === '') {
reject('Lütfen Bir Değer Gir')
} else {
resolve()
}
}, 2000)
})
},
allowOutsideClick: true
}).then(function (deger) {


var sonucislem = $.ajax({
type: 'POST',
url: "_islem.php",
data: {id: deger, yeni: deger},
dataType: 'html',
context: document.body,
global: false,
async:false,
success: function(data) {
return data;
}
}).responseText;

if(sonucislem=='basarili') {
swal({
type: 'success',
title: 'Başarılı!',
html: 'Değiştirilen Değer: ' + deger+'<p>(1 sn içerisinde sayfa yenilenecek)'
})

setTimeout(function(){
window.location.reload(1);
}, 1000);

} else {

swal({
type: 'error',
title: 'Başarısız!',
html: 'Bir Hata Oluştu'+sonucislem
})

}




})

};
</script>

Burada yine sweet alert kutularımdan faydalanıyorum. İlk adımda tıklanan değer için yeni bir veri istiyorum. Daha sonra verinin türü ve id’i ile birlikte yeni değeri islem.php sayfama gönderiyorum. Eğer oradan gelen yanıt basarili ise ekrana tebrikler yazımı yazıyorum, eğer değil ise olumsuz yazımı yazıyorum.

Şimdi ise islem.php sayfamı oluşturacağım.

<?php

/* Veritabanı bağlantınızı include edin.

include 'db_connect.php'; şeklinde

*/

if($_POST) { //Post Kontrolüm


$dizi = explode (".",@$_POST['id']);

$islem_ne = $dizi['0']; //İşlemin hangi sütunda olduğu
$islem_id = $dizi['1']; //İşlemin hangi id de ( satırda ) olduğu
$yeni_d = $_POST['yeni']; //Yeni değer


//Burada kullandığınız veritabanı sınıfına göre işlem yapabilirsiniz.


$query = $db->prepare("UPDATE uyeler SET
$islem_ne = :y_islem
WHERE id = :id");
$update = $query->execute(array(
"y_islem" => $yeni_d,
"id" => $islem_id
));
if ( $update ){
echo '1'; // Burada 1 sonucunu geri döndürerek başarılı fonksiyonumu yazdırıyorum
}





}

Böylece düzenleme işlemini de tamamlıyorum.

Veri Silme

Bu işlem için <tr> değerlerine id atayacağım. Örneğin <tr id=’sat_3′> gibi. Bu id değerleri sayesinde işlem bitince satırları ekrandan kaldıracağım. Daha sonra silme butonunu oluşturuyorum. Ben yine bootstrap ‘tan yararlanacağım.

<td><button id='3' class='btn btn-danger btn-xs' ><span class='glyphicon glyphicon-trash'></span></button></td>

Burada önemli olan nokta butonun id değeri. Bunu döngünüz içerisinde satırın id’i olacak şekilde ayarlamalısınız.

<td><button id="$db['id']" class='btn btn-danger btn-xs' ><span class='glyphicon glyphicon-trash'></span></button></td>

Daha sonra jquery bölümümüzü yazalım.

<script >


var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
for (var i = 0; i <= buttonsCount; i += 1) {
buttons[i].onclick = function tiklama() {
var id = this.id;

swal({
title: 'Emin Misin?',
text: "Silinen veriler geri alınamaz!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
cancelButtonText: 'Hayır',
confirmButtonText: 'Evet'
}).then(function () {
var data = 'id='+id;
var islemyap = $.ajax({
type: 'POST',
url: "sil.php",
data: data,
dataType: 'html',
context: document.body,
global: false,
async:false,
success: function(data) {
return data;
}
}).responseText;

if(islemyap=='1') {
swal(
'Başarılı!',
'Silinen veri:'+id,
'success'
)
$("#sat_"+id).fadeOut("slow");
} else {

swal(
'Başarısız!',
'Bir Sorun Oluştu',
'error'
)

}
})
};
}
</script>

Burada herhangi bir butona tıklandığı zaman butonun id değerini alıyorum ve kullanıcının karşısına bir seçim ekranı çıkarıyorum. Eğer veriyi silmeyi seçerse sil.php dosyama satırın id değerini gönderiyorum. sil.php dosyamda gerekli işlemleri yaptıktan sonra geriye 1 değerini döndürüyorum. Buda başarılı anlamına geliyor. Eğer işlem başarılıysa ekrana başarılı yazım geliyor ve id değerinin olduğu satır ekrandan kayboluyor.

Son olarak sil.php dosyamı oluşturuyorum.

<?php

/* Veritabanı bağlantınızı include edin.

include 'db_connect.php'; şeklinde

*/

if($_POST) { //Post Kontrolüm


$gelen_id = $_POST['id'];

$delete = $db->exec("DELETE FROM uyeler Where id='$gelen_id' ");

echo "1";



}

Bu makale de jquery ile veri ekleme, düzenleme ve silme işlemlerini basitçe anlatmaya çalıştım. Tekrar söylüyorum, bu makalenin amacı profesyonel derecede işlem yapmak değil, basit mantığı anlatarak sizin geliştirmenizi sağlamaktır. Okuduğunuz için teşekkür ederim, yorumlarınızı aşağıda belirtip makaleye oy verirseniz sevinirim. Sağlıcakla kalın.

3 yorum

pcmanyak 26 Ağustos 2017 - 23.21

bir demo ataydın keşke

Cevapla

Murat 26 Ekim 2017 - 11.57

Kardeşim Çok Sağolasın Kim bilir kaç tane örnek denedim sadece bu tam olarak istediğim gibi ve detaylı anlatılmış ellerine sağlık

Murat 29 Ekim 2017 - 19.15

burada anlatılanları uyguladım ilk seferinde gayet başarılıydı ancak sonra çalışmamaya başladı sorun şu ilk gönderdiğim değer hiç değişmiyor hep aynı id nosu gidiyor ben sayfadaki bir ürünün id DB den çekip gonder.php ye göndermeye çalışıyorum DB den alınan urun_id verisini gonder.php ye nasıl gönderebilirim
yine aynı sayfada başka bir formda da aynı ürüne yorum yazılmasını istiyorum bunun içinde urun_id ile birlikde yorum_yazi göndermek istiyorum bunu nasıl yapabilirim

Jquery Tablo Üzerinde Veri Düzenleme

Yeni Bir Veri Ekleme

Veri Düzenleme

Veri Silme

Google Adsense Tavsiyeleri

Amazon Web Services’e Nasıl Kayıt Olunur?

Bunları da Beğenebilirsin

3 yorum

Yorum Yap Yorumu Kapat