Php Ve Ajax İle Sayfa Yenilenmeden Veri Güncellenmesi Nasıl Yapılır ?

1 Şubat 2021

3 yorumlar

Slmlar internette ajax ile kayıt anlatılmış ama hiç veri güncelleme (edit) anlatılmamış bu konuda bir örnek kod paylaşırsanız sevinirim..

Çözüldü

Çözüldü Olarak İşaretle

Bu soruyu beğenerek önemli olduğunu gösterebilirsin..

3 yorum

mehmet

01 Şub 2021

öncelikle dersler adında bir veritabanı oluşturuyoruz bunun içine konular adında bir tablo oluşturuyoruz..

tablo bilgileri bu şekilde

id
konu_baslik
konu_aciklama

daha sonra index.php dosyası oluşturuyoruz index dosyamızın kodları aşağıdaki gibi olucak veri tabanı bilgilerini setting.php den çektik..

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

<!DOCTYPE html>

<head>

<title>Veri Güncelleme</title>

<style>

a {

text-decoration: none;

}

textarea {

width: 300px;

height: 150px;

}

</style>

</head>

<body>

<?php require 'setting.php';?>

<thead>

<th>başlık</th>

<th>açıklama</th>

<th>İşlemler</th>

</thead>

<tbody>

<?php

// verilerimizi çekiyoruz..

$query = $db->query('SELECT * FROM konular ORDER BY id DESC',PDO::FETCH_ASSOC);

foreach($query as $row){

<td><a data-role="update" data-id="<?=$row['id']?>" href="#">Düzenle</a></td>

</tr>

<?php

}

</tbody>

</table>

</div>

<h5 class="modal-title" id="exampleModalLabel">konu Düzenle</h5>

</div>

<form>

<label for="recipient-name" class="col-form-label">Başlık</label>

</div>

<label for="message-text" class="col-form-label">Konu Açıklaması</label>

</div>

</form>

</div>

<a href="" id="save" class="btn btn-primary pull-right">Güncelle</a>

<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Kapat</button>

</div>

$(function(){

// burda duzenle linkine tıkladığımızda click işlemi yapıyoruz

$(document).on('click','a[data-role=update]',function(e){

// konunun idsini çekiyoruz

var id = $(this).data('id');

//hangi konuya aitse value değerlerini alıyoruz

var baslik = $('#'+id).children('td[data-target=baslik]').text();

var aciklama = $('#'+id).children('td[data-target=aciklama]').text();

// içindeki değerleri yeni değerler ile değişiyoruz..

$('#baslik').val(baslik);

$('#aciklama').val(aciklama);

$('#konu_id').val(id);

$('.modal').modal('toggle');

// bu kod sayfa yenilemeyi engelliyor

e.preventDefault();

});

$('#save').click(function(e){

// burda kayıt ederken value değerlerini alıyoruz..

var id = $('#konu_id').val();

var baslik = $('#baslik').val();

var aciklama = $('#aciklama').val();

// ajax ile değerleri gönderiyoruz..

$.ajax({

url : 'ajax.php',

method : 'post',

data : {baslik : baslik, aciklama : aciklama, id :

id},

success: function(e){

// işlemi başarılıysa list ekranında değerlerin değişmiş hali gözükmesi aşağıdaki kodları yazıyoruz idsi eşit olan değeri düzenleme işlemi yapıyoruz..

$('#'+id).children('td[data-target=baslik]').text(baslik);

$('#'+id).children('td[data-target=aciklama]').text(aciklama);

$('.modal').modal('toggle');

}

});

// burda da aynı şekilde sayfa yenilenmeyi engelledik

e.preventDefault();

});

</script>

</body>

</html>

Yukarda kodların içinde yorum satırı olarak açıklamayı yaptım ajax ile veriyi ajax.php dosyasına gönderiyoruz. ajax.php dosyasıda aşağıdaki gibi olucak yani aslında normal bir güncelleme işlemidir..

<?php

require 'setting.php';

if($_POST){

$id = $_POST['id'];

$baslik = $_POST['baslik'];

$aciklama = $_POST['aciklama'];

$query = $db->prepare('update konular set

konu_baslik = :baslik,

konu_aciklama = :aciklama where id = :id

');

$ok = $query->execute([

'baslik' => $baslik,

'aciklama' => $aciklama,

'id' => $id

]);

if($ok){

echo 'güncelleme başarılı';

}else {

echo 'güncelleme hatası';

}

Hepsi bukadar kolay gelsin umarım yardımcı olmuşumdur..

gokhan

01 Şub 2021

Güzel bir anlatım olmuş teşekkürler

baverislam

07 Şub 2021

peki dosya yüklemek istersek nasıl yapıcaz onu da diğer textler gibi value değerlerini mi cekeceğiz

Bir cevap yazın Cevabı iptal et

Yorum yapabilmek için giriş yapmalısınız.