Sayfa yenilenmeden veri tabanına kayıt ekleme

İhtiyaç var mı ? Varsa bakalım yazımıza nasıl oluyormuş sayfa yenilenmeden post işlemleri. Öncelikle yazıyı okumadan belirtmeliyim ki işlemlerin tamamı jquery ve php kodları içermekte Angular veya benzeri teknoloji kullanılmamıştır

Öncelikle yapabileceğimiz işlemleri listeyelim ardından sırasıyla bunları nasıl yapabileceğimizi inceleyelim.

• Sayfa yenilenmeden sayfanın bir kısmını değiştirme
• Veri silme
• Veri ekleme
• Kayıtları getirme

Tüm sayfa yapısında kullancağımız bağlantı metnini oluşturalım ben xampp kullanıyorum o yüzden kullanıcı adım root şifrem de boş =) “”

<?php
$baglanti =mysqli_connect("localhost","root","","db_sayfaYenilenmeden");
mysqli_set_charset($baglanti,"utf8");
?>

Kullanacak olduğunuz sayfanın başına da jquery CDN eklemeyi unutmayın online olarak şu yönlendirmeyi ekleyebilirsiniz

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Sayfanın belirli bir kısmını değiştirmek için öncelikle yapmamız gereken 2 işlem var .

1-)Değiştirmek istediğimiz bölmenin içine bir div atıyoruz ve bu divin idsini uniq yapıyoruz nedenine birazdan geleceğiz ben örnek olarak bir div atıyorum aşağıya aynısını kullanabilirsiniz.

 <div class="row">
               <div  id="degisecek">
                   
               </div>
               <button onclick="sayfaGetir()">Burayı Değiştir!</button>
           </div>

İD parametre değeri degisecek olan bir özel div oluşturdum bunu oluşturduktan sonra 2. bir html veya php sayfası oluşturuyoruz o sayfayı bu sayfaya ekleyeceğiz

2-) Benim oluşturmuş olduğum örnek kodlar aşağıdaki gibidir. Dosya adı da getirBeni.php

<h2>Yazı başlığımız</h2>
<p>İstersek buraya lorem ipsumdan mıgır metinler de koyabiliriz</p>
<p style="font-weight: bold">İstersek kalın yazarız</p>
<p style="color:red">İstersek KIZARIZ</p>

Gördüğünüz üzere 1. kısımda bir buton var bu butona tıklandığında çalışacak olan script kodumuz aşağıdaki gibidir bununla birlikte bu sayfamızdaki verileri ana sayfamıza ekliyoruz.

<script>
    
    function sayfaGetir() {
        $.post("getirBeni.php",function (data) {
              $("#degisecek").html(data);
        })      ;
    }
</script>

Gelelim veri tabanına veri eklemeye

Bunun için bir adet ayarlar.php sayfası oluşturuyoruz.

Bu sayfanın içindeyse normal bir şekilde post işlemi edildiğinde veri tabanına nasıl veri ekliyorsak aynen yazıyoruz. Benim kodlarım şu şekildedir.

<?php

require  "baglan.php";
if (isset($_POST['veriEkle'])){
    $isim=htmlspecialchars($_POST['isim']);
    $soyisim=htmlspecialchars($_POST['soyisim']);
    $yas=htmlspecialchars($_POST['yas']);

    $ekle="insert into kisiler (isim,soyisim,yas)VALUES('$isim','$soyisim','$yas')";
    $baglanti->query($ekle);
}

?>

Anasayfamızda ise bir form oluşturuyoruz. Benim formum şu şekildedir.

           <div class="row">
               <div class="col-md-6">
                   <h2>Kişi Ekleme</h2>
                   <div class="form-group">
                       <input type="text" id="isim"class="form-control">

                   </div>
                    <div class="form-group">
                        <input type="text" id="soyisim" class="form-control">
                    </div>
                   <div class="form-group">
                       <input type="number" id="yas" class="form-control">
                   </div>
                   <div class="form-group">
                       <button class="btn btn-success" style="width:100%" onclick="kisiEkle()">Ekle</button>
                   </div>
               </div>

Şimdi de butona tıklandığında çalışacak olan kisiEkle() fonksiyonunu yazalım

function kisiEkle() {
                 var kisiAd=$("#isim").val();
                 var kisiSoyad=$("#soyisim").val();
                 var kisiYas=$("#yas").val();

                 $.post("ayarlar.php",{isim:kisiAd,soyisim:kisiSoyad,yas:kisiYas,veriEkle:1},function (data) {
                     alert(data);
                 })  ;

             }

Burada önemli olan husus $.post(“gonderilecekOlanSayfa.php”,{veriAdi:veriİcerigi}); şu şekilde gitmelidr veri adı olan kısımda diğer sayfada hangi isimde çekeceksek o isimde gönderiyoruz.

Şimdi de gelelim Kullanıcı çekme ve gösterme işlemine bunun için kullanıcıların çekildiği bir sayfa açıyoruz benim sayfam şu şekildedir.

<?php
require "baglan.php";
$cek = "select * from kisiler";
$kisiler = $baglanti->query($cek);
?>
<table border="2">
    <tr>
        <td>
            Kişi Adı
        </td>
        <td>
            Kişi Soyadı
        </td>
        <td>
            Kişi Yaşı
        </td>
    </tr>
    <?php
    while ($kisi = mysqli_fetch_assoc($kisiler)) {

        ?>
        <tr>
            <td>
                <?php echo $kisi['kisiAdi'] ?>
            </td>
            <td>
                <?php echo $kisi['kisiSoyadi'] ?>
            </td>
            <td>
                <?php echo $kisi['kisiYasi'] ?>
            </td>
        </tr>
        <?php

    }

    ?>
    <table>

Anasayfamızda ise görünmesini istediğimiz yere şu kodları yapıştırıyoruz.

 <div class="col-md-6">
                   <h3>Kişiler</h3>  <button class="btn btn-primary" onclick="kisileriGetir()">Kişileri Getir</button>
                   <div class="kisiler">
                       
                   </div>
               </div>

Burada bahsi geçen kisileriGetir() fonksiyonu ise aşağıdadır tıpkı en üstteki gibi. Sadece sayfayı çekiyoruz =)

function kisileriGetir() {
        $.post("kisiler.php",function (data) {
            $(".kisiler").html(data);
        })
    }

Eğer isterseniz mysql veritabanı kullanarak chat programı da yapabiliriz nasıl yapıldığı aşikar belli oluyor zaten. İyi çalışmalar dilerim.