PHP MySQL JQuery ile Sonsuz Dinamik Form

makale.baslik

Bu uygulamada PHP, MySQL, JQuery ile sonsuz dinamik form kullanarak veri listeleme, ekleme, düzenleme ve silme işlemlerini gerçekleştireceğiz. Bunu yaparken de MySQL de ilişkisel veri tabanı kullanacağız. Dinamik formumuza ekleme ve silmeyi JQuery ile gerçekleştireceğiz.

Başlık olarak sonsuz dinamik form dedim ama başka bir adı varsa mesaj atarak beni uyarabilirsiniz.

Bilmeyenler veya yeni başlayanlar içinde iyi bir örnek olacaktır. Jquery de fonksiyon kullanımı ve html etiketlere js de olduğu gibi değişiklik yapmayı bu uygulamada göreceksiniz. Birçok yerde, başka örneklere uyarlayarak kullanabilirsiniz.

Ben bu örnekte öğrenci, ders ilişkisini kullanarak bir yapı oluşturdum benzer ilişkili örneklerde bunu kullanabilirsiniz. Bu sayede tablolar arası ilişki kurmanın da nasıl olduğunu öğrenebilirsiniz.

Öncelikle sonsuz_form adında veri tabanımızda ogrenci, ders ve ogrenci2ders adlarında tablo oluşturuyoruz.

ogrenci tablosu:

öğrenci tablosu

ders tablosu:

ders tablosu

ogrenci2ders tablosu:

öğrenci ders tablosu

 

index.php sayfasında ogrenci tablosundaki verilerimizi listeliyoruz. Buradaki silme ve düzenleme ikonları ve yeni kayıt ekle butonu ile işlemleri gerçekleştiriyoruz. Kodlarla ilgili açıklamalar açıklama satırlarında bulunmaktadır.

index.php

 

index.php

<?php
require("inc/fonk.php"); //veri tabanı bağlantısı gerçekleştiriliyor
?>
<!doctype html>
<html lang="tr">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<head>
    <meta charset="UTF-8">
    <title>Öğrenci Ders Listesi</title>
</head>
<body>
<br>
<div class="container">
    <div class="col-md-8">
        <table class="table table-bordered table-condensed">
            <thead>
            <tr>
                <th>Öğrenci Adı</th>
                <th>Öğrenci Soyadı</th>
                <th colspan="2" class="text-center">İşlemler</th>
            </tr>
            </thead>
            <tbody>
            <?php
            //Ogrenci tablosundan tüm veriyi çekiyoruz
            //Çekilen veriyi tablo halinde yazdırıyoruz
            //düzenle ve sil linklerini ekliyoruz
            $sorgu = $baglanti->query("select * from ogrenci");
            while ($sonuc = $sorgu->fetch_assoc()) {
                ?>
                <tr>
                    <td><?php echo $sonuc["adi"] ?></td>
                    <td><?php echo $sonuc["soyadi"] ?></td>
                    <td class="text-center">
                        <a class="islem" href='duzenle.php?id=<?php echo $sonuc["id"] ?>'>
                            <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
                        </a>
                    </td>
                    <td class="text-center">
                        <a class="islem" href='sil.php?id=<?php echo $sonuc["id"] ?>'>
                            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                        </a>
                    </td>
                </tr>
                <?php
            }
            ?>
            </tbody>
        </table>
    </div>
    <div class="col-md-4">
        <a class="btn btn-primary" href="Ekle.php">Yeni Kayıt Ekle</a>
    </div>
</div>
</body>
</html>

 

ekle.php sayfasında Kişisel Bilgiler sekmesinde öğrenci adı ve soyadı bilgisini, Ders Bilgileri sekmesinde ders adı bilgileri alınıyor. Yeni Ders Ekle butonu ile metin kutusu ekleniyor. Ekleme yaptıktan sonra sil butonu ile istenilen ders bilgisi listeden kaldırılıyor.

Öğrenci Ders Ekle

 

Öğrenci Ders Ekle

 

ekle.php

<?php
require("inc/fonk.php"); //veri tabanı bağlantısı gerçekleştiriliyor
?>
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Öğrenci Ders Ekle</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/custom.css">
<body>
<form name="ogrenci" method="post" action=""> <!--Formumuzu oluşturuyoruz. -->
    <div class="container">
        <div class="col-md-12">
            <div class="col-md-6">
                <h1>Öğrenci Ders Ekle</h1>
            </div>
            <div class="col-md-4 text-center">
               <input id="kaydet" name="kaydet" type="submit" value="Kaydet" class="btn btn-success"/>
               <a href="index.php" id="iptal" class="btn btn-danger">İptal</a>
               <!-- Kaydetme ve iptal butonlarımızı ekliyoruz. -->
            </div>
        </div>
        <div class="col-md-12">

            <!-- Tab ların menü kısmı, burada içeriklerin olduğu 
                 div ler ile id lerin aynı olması lazım -->
            <ul class="nav nav-tabs" id="myTabs" role="tablist">
                <li role="presentation" class="active">
                   <a href="#kisiselBilgitab" aria-controls="kisiselBilgitab" data-toggle="tab">
                          Kişisel Bilgiler
                   </a>
               </li>
               <li role="presentation">
                  <a href="#derslertab" aria-controls="derslertab" role="tab" data-toggle="tab">Ders
                        Bilgileri
                  </a>
              </li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <!-- Ad soyad bilgisini aldığımız div-->
                <div role="tabpanel" class="tab-pane active" id="kisiselBilgitab">
                    <br/>
                    <div class="col-md-6">
                        <table class="table-condensed">
                            <tr>
                                <td>Adınız:</td>
                                <td><input type="text" name="ad" id="ad" class="form-control"/></td>
                            </tr>
                            <tr>
                                <td>Soyadınız:</td>
                                <td>
                                    <input type="text" name="soyad" id="soyad" class="form-control"/>
                                </td>
                            </tr>
                        </table>
                    </div>

                </div>
                <!-- Ders bilgilerini aldığımız div-->
                <div role="tabpanel" class="tab-pane" id="derslertab">
                    <br/>

                    <div class="col-md-6">
                        <table id="dersler" class="table table-condensed">
                            <thead>
                            <tr>
                                <th><strong>Ders Sayısı</strong></th>
                                <th>Ders Adı</th>
                                <th>İşlem</th>
                            </tr>
                            </thead>

                            <tbody>
                            <tr>
                                <!-- tablonun body kısmında varsayılan olarak 1. Dersi ekliyoruz
                            metin kutularını dizi olarak ekliyoruz (alanlar[]).-->
                               <th><strong>Ders 1</strong></th>
                               <td>
                                <input id="alan_1" name="alanlar[]" type="text" class="form-control">
                               </td>
                               <td></td>
                            </tr>
                            </tbody>

                            <!-- footer kısmında ders ekle butonu yerleştiriyoruz-->
                            <tfoot>
                            <th></th>
                            <td></td>
                            <td>
                                <p id="ekle">
                                    <a href="#" class="btn btn-primary">&raquo; Yeni Ders Ekle </a>
                                </p>
                            </td>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>


<?php
//formda kaydet butonuna basılıp basılmadığını kontrol ediyoruz.
if (isset($_POST['kaydet'])) {

    //Oğrenci adi ve soyadı bilgileri veritabaına yazılıyor
    $sonuc = $baglanti->query(sprintf("INSERT INTO ogrenci (adi, soyadi) VALUES ('%s','%s')", ($_POST['ad']), ($_POST['soyad'])));

    //Dersler için gerekli alanlar doldurulduysa kontrol ediyoruz
    if ($_POST['alanlar']) {

        //en son eklenen id alıyoruz
        $eklenen_ogrenci_adi = $baglanti->insert_id;

        //alanlar metin kutuları kadar döngü oluşturuyoruz.
        foreach ($_POST['alanlar'] as $key => $value) {

            //Ders bilgilerini döngü içinde sırayla kaydediyoruz.
            $baglanti->query(sprintf("INSERT INTO ders (ders_adi) VALUES ('%s')", ($value)));
            $eklenen_ders_id = $baglanti->insert_id;

            //Ogrenci2ders tablomuzda ogrenci ders ilişki bilgilerini tutuyoruz

   $baglanti->query(sprintf("INSERT INTO ogrenci2ders (ogrenciID, dersID) VALUES ('%s','%s')", ($eklenen_ogrenci_adi), ($eklenen_ders_id)));
        }
    }

    $baglanti->close(); //bağlantımızı sonlandırıyoruz
    header("location:index.php"); // index.php sayfasına geri dönüyoruz.
}
?>

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">

    //ekle bağlantısına tıklandığında çalışacak jquery kodlarımız
    //burada table ın tbody kısmına satır (tr) ekleme yöntemi ile ders için input ekliyoruz.
    var sayac = 1; //kaçıncı ders bilgisini tutuyoruz
    $(function () {
        $('#ekle').click(function () {
            sayac += 1;
            $('#dersler tbody').append(
                '<tr><th><strong>Ders ' + sayac + '</strong></th><td><input id="alan_' + sayac + '" name="alanlar[]' + '" type="text" class="form-control" /></td><td><a href="#" class="sil btn btn-danger">Sil</a></td></tr>');
        });


        //sil bağlantısına tıklanınca çalışacak jquery kodumuz
        //sil tıklandığında tablodaki bulunduğu tr yi siliyoruz
        $('#dersler').on("click", ".sil", function (e) { //user click on remove text
            e.preventDefault();
            $(this).closest("tr").remove();

        })
    });

    //panellerin geçişini sağlıyor.
    $('#myTabs a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    })
</script>
</body>
</html>

 

duzenle.php ile eklediğimiz verileri düzenleyebiliyoruz. Burada daha önce eklenen ders bilgileri düzenlenirken veri tabanından önceki ders bilgileri silinip yeni eklenen veya düzenlenen değerler ekleniyor.

duzenle.php

 

duzenle.php

 

duzenle.php

<?php
require("inc/fonk.php"); //veri tabanı bağlantısı gerçekleştiriliyor


//formda kaydet butonuna basılıp basılmadığını kontrol ediyoruz.
if (isset($_POST['kaydet'])) {

    $id = $_GET["id"];

    //ogrenci2ders veri tabanından ogrenci bilgilerini siliyoruz
    $baglanti->query("DELETE FROM ogrenci2ders WHERE  ogrenciID=$id");

    //ders veri tabanından ogrenciye ait ders bilgilerini siliyoruz
    // burada ders veri tabanında ogrenci bilgisi eşleşmeyenleri siliyoruz
    $baglanti->query("DELETE d FROM ders d WHERE NOT EXISTS (SELECT * FROM ogrenci2ders WHERE dersID = d.id)");


    //Oğrenci adi ve soyadı bilgileri veritabaına yazılıyor
    $sonuc = $baglanti->query(sprintf("UPDATE ogrenci SET adi='%s', soyadi='%s' WHERE  id=$id", ($_POST['ad']), ($_POST['soyad'])));


    //Dersler için gerekli alanlar doldurulduysa kontrol ediyoruz
    if ($_POST['alanlar']) {


        //alanlar metin kutuları kadar döngü oluşturuyoruz.
        foreach ($_POST['alanlar'] as $key => $value) {


            //Ders bilgilerini döngü içinde sırayla kaydediyoruz.
            $baglanti->query(sprintf("INSERT INTO ders (ders_adi) VALUES ('%s')", ($value)));
            $eklenen_ders_id = $baglanti->insert_id;


            //Ogrenci2ders tablomuzda ogrenci ders ilişki bilgilerini tutuyoruz

            $baglanti->query(sprintf("INSERT INTO ogrenci2ders (ogrenciID, dersID) VALUES ('%s','%s')", ($id), ($eklenen_ders_id)));

        }

    }

    $baglanti->close(); //bağlantımızı sonlandırıyoruz
    header("location:index.php"); // index.php sayfasına geri dönüyoruz.
}
?>
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Öğrenci Ders Düzenle</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/custom.css">
<body>
<form name="ogrenci" method="post" action=""> <!--Formumuzu oluşturuyoruz. -->
    <div class="container">
        <div class="col-md-12">
            <div class="col-md-6">
                <h1>Öğrenci Ders Düzenle</h1>
            </div>
            <div class="col-md-4 text-center">

               <input id="kaydet" name="kaydet" type="submit" value="Kaydet" class="btn btn-success"/>
               <a href="index.php" id="iptal" class="btn btn-danger">İptal</a>
               <!-- Kaydetme ve iptal butonlarımızı ekliyoruz. -->
            </div>
        </div>
        <div class="col-md-12">
            <!-- Tab ların menü kısmı, burada içeriklerin olduğu  
                 divler ile id lerin aynı olması lazım -->
            <ul class="nav nav-tabs" id="myTabs" role="tablist">
                <li role="presentation" class="active">
                    <a href="#kisiselBilgitab" aria-controls="kisiselBilgitab" data-toggle="tab">
                         Kişisel Bilgiler
                    </a>
                </li>
                <li role="presentation">
                    <a href="#derslertab" aria-controls="derslertab" role="tab" data-toggle="tab">
                        Ders Bilgileri
                    </a>
                </li>
            </ul>
            <!-- Tab panel -->
            <div class="tab-content">
                <!-- Ad soyad bilgisini aldığımız tab-->
                <div role="tabpanel" class="tab-pane active" id="kisiselBilgitab">
                    <br/>
                    <?php
                    if (isset($_GET["id"])) {
                        $id = $_GET["id"];

                        $sorgu = $baglanti->query("select * from ogrenci where id=$id");
                        $sonuc = $sorgu->fetch_assoc();
                    } else
                        header("location:index.php");
                    ?>

                    <div class="col-md-6">
                        <table class="table-condensed">
                            <tr>
                                <td>Adınız:</td>
                                <td>
                   <input type="text" name="ad" id="ad" value="<?php echo $sonuc['adi'] ?>" class="form-control"/>
                                </td>
                            </tr>
                            <tr>
                                <td>Soyadınız:</td>
                                <td>
              <input type="text" name="soyad" id="soyad" value="<?php echo $sonuc['soyadi'] ?>" class="form-control"/>
                                </td>
                            </tr>

                        </table>
                    </div>
                </div>
                <!-- Ders bilgilerini aldığımız tab-->
                <div role="tabpanel" class="tab-pane" id="derslertab">
                    <br/>
                    <div class="col-md-6">
                        <table id="dersler" class="table table-condensed">
                            <thead>
                            <tr>
                                <th><strong>Ders Sayısı</strong></th>
                                <th>Ders Adı</th>
                                <th>İşlem</th>
                            </tr>
                            </thead>
                            <tbody>
                            <?php
                            $sorgu = $baglanti->query("select d.ders_adi from ders d inner join ogrenci2ders od on od.dersID=d.id inner join ogrenci o on o.id=od.ogrenciID where o.id=$id");
                            $sayac = 0;
                            while ($sonuc = $sorgu->fetch_assoc()) {
                                $sayac++;
                                ?>
                                <tr>
                                    <!-- tablonun body kısmında varsayılan olarak 1. Dersi ekliyoruz
                                metin kutularını dizi olarak ekliyoruz (alanlar[]).-->
                                    <th><strong>Ders <?php echo $sayac ?> </strong></th>
                                    <td>
                                       <input id="alan_<?php echo $sayac ?>" name="alanlar[]" type="text" value="<?php echo $sonuc['ders_adi'] ?>" class="form-control">
                                    </td>
                                    <?php
                                    if ($sayac != 1)
                                     echo '<td><a href="#" class="sil btn btn-danger">Sil</a></td>';
                                    else
                                        echo '<td></td>';
                                    ?>
                                </tr>
                                <?php
                            }
                            ?>
                            </tbody>
                            <!-- footer kısmında ders ekle butonu yerleştiriyoruz-->
                            <tfoot>
                            <th></th>
                            <td></td>
                            <td>
                                <p id="ekle">
                                    <a href="#" class="btn btn-primary">&raquo; Yeni Ders Ekle </a>
                                </p>
                            </td>

                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">

    <?php echo "var sayac = " . $sayac; ?>

    $(function () {

        //ekle bağlantısına tıklandığında çalışacak jquery fonksiyonumuzun kodları
        //burada table ın tbody kısmına satır (tr) ekleme yöntemi ile ders için input ekliyoruz.
        $('#ekle').click(function () {
            sayac += 1; //kaçıncı ders bilgisini tutuyoruz
            $('#dersler tbody').append(
                '<tr><th><strong>Ders ' + sayac + '</strong></th><td><input id="alan_' + sayac + '" name="alanlar[]' + '" type="text" class="form-control" /></td><td><a href="#" class="sil btn btn-danger">Sil</a></td></tr>');

        });

        //sil bağlantısına tıklanınca çalışacak jquery fonksiyonumuzun kodları
        //sil tıklandığında tablodaki bulunduğu tr yi siliyoruz

        $('#dersler').on("click", ".sil", function (e) {
            e.preventDefault();
            $(this).closest("tr").remove();

        })
    });

    //panellerin geçişini sağlıyor.
    $('#myTabs a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    })
</script>

</body>
</html>

 

sil.php ile veri tabanından öğrenci bilgisi ve öğrenciye ait dersler siliniyor.

<?php
if($_GET["id"]) {
    require("inc/fonk.php"); //veri tabanı bağlantısını sağlıyoruz

    //Get ile gelen id integer türüne pars edip değişkende tutuyoruz
    $ogrid = (int)$_GET["id"];

    //ogrenci2ders veri tabanından ogrenci bilgilerini siliyoruz
    $baglanti->query("DELETE FROM ogrenci2ders WHERE  ogrenciID=$ogrid");

    //ders veri tabanından ogrenciye ait ders bilgilerini siliyoruz
    // burada ders veri tabanında ogrenci bilgisi eşleşmeyenleri siliyoruz
    $baglanti->query("DELETE d FROM ders d WHERE NOT EXISTS (SELECT * FROM ogrenci2ders WHERE dersID = d.id)");

    //Son olarak ogrenci tablosundan ogrenci bilgisini siliyoruz
    $baglanti->query("DELETE FROM ogrenci WHERE  id=$ogrid");

    //index sayfamıza geri dönüyoruz.
    header("location:index.php");
}
//Eğer get ile veri gelmemişse index sayfasına dönüyoruz
header("location:index.php");

 

inc/fonk.php ile veri tabanı bağlantısını sağlayan kodları ekliyoruz.

<?php
$baglanti = new mysqli('localhost', 'root', '', 'sonsuz_form');
if (mysqli_connect_error()) //Eğer hata varsa yazdırıyoruz
{
    echo mysqli_connect_error();
    exit; //eğer bağlantıda hata varsa PHP çalışmasını sonlandırıyoruz.
}
$baglanti->set_charset("utf8"); // Türkçe karakter sorunu olmaması için utf8'e çeviriyoruz.
?>

 

 Bu uygulamayı geliştirerek farklı amaçlar için kullanabilirsiniz.  

Uygulama dosyaları ve veri tabanı dosyasını indirmek için: sonsuzForm.rar

Çalışmanın demo uygulaması için tıklayın.

 

İstek üzerine örneği geliştirdim, PHP MySQL JQuery ile Çok Alanlı Sonsuz Dinamik Form ile birden çok alanlı yapıyı indirebilirsiniz.

 

Paylaş:

Yorumlar

  1. Mert

    Çok faydalı bir script olmuş işime yaradı teşekkür ederim. Bu sisteme nasıl kullanıcı arama ekleyebiliriz isme göre? Sonuçları aynı böyle tablo şeklinde göstermesi için.

    1. "Arama" da başka bir makale konusu olsun.

  2. Hocam ellerinize sağlık gayet açık ve net olmuş. Yine eski ve hatalı makalelerden biri sanmıştım. Sayenizde işimi hızlıca çözebildim. Sadece fikir vermek açısından bu "Arama" olsun veya yeni eklentiler olsun bunları tek bir proje olarak tasarlayıp o projeye zaman içerisinde dahil etmeniz daha iyi olabilir.

    1. Önerinizi not aldım, önümüzdeki günlerde eklerim.

  3. Paylaşımınız için teşekkürler. Çoklu satır işlemlerinde sildikten sonra nasıl güncelleme yapabilirim diye düşünüyordum. İncelemem sonucu bağlantılı değerleri silip tekrar yazdırmak yani kara kara düşünüyordum nasıl güncelleme yapabilirim diye. Çok faydalı oldu benim için çok teşekkür ederim tekrar...

  4. Çok güzel bir anlatım olmuş. Pdo ile de örnek verirsenşiz çok sevinirim.

    1. mysqli ile pdo nun çok farkı yok, Bağlantı kodunu değiştirerek kullanabilirsiniz. 

  5. Merhaba Öğrenci ID'sini Ders veri tabanına nasıl ekleriz. Ben sistemi iki veri tabanı ile kullanmak istersem nasıl bir kod yazmam gerekiyor? Yardımcı olursanız sevinirim. Teşekkürler.

    1. Kıdları ve açıklamaları okursanız çözümü bulacaksınızdır. 2 adet veri tabanına da aynı kodlarla bağlanabilirsiniz.

  6. Hocam ikinci bir sekmede ders tablosuna benzer ikinci bağlantılı bir tablo eklemeye çalışıyorum işin içinden çıkamadım. Js klasöründen bunla ilgili extra bişi yapmama gerek yok dimi