PHP MYSQL JQUERY AJAX ile switch buton (aktif pasif) kullanımı

makale.baslik

Bu makale ile PHP MySQL uygulamalarında AJAX kullanarak switch buton yapımını göreceksiniz.

ASP.NET JQUERY AJAX ile switch buton (aktif pasif) kullanımı makalemde anlattığım uygulamayı PHP ye uyarladım. Ekstradan da MySQL veri tabanılı şekline çevirdim.

Projelerinizde özellikle admin sayfasında on/off buton özelliği ekleyerek daha işlevsel siteler yapabilirsiniz. AJAX kullanarak sitelerinizin daha performansı çalışmasını sağlayabilirsiniz.

Öncelikle kullandığımız aktifpasif veri tabanındaki makale tablosu aşağıdaki gibi olacak:

aktif pasif

Örnek yapıda sayfamızdaki checkbox’ları CSS ile switch buton görünümü vererek kullanacağız.

Daha sonra verileri sıraladığımız tablomuzu hazırlıyoruz verileri gösterirken checkbox lara id leri veriyoruz.

İşlem sonucunu göstermek için tablodan sonra id’si sonuc olan h2 tagı ekledim.

index.php kodları şu şekilde:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="assets/bootstrap.min.css" rel="stylesheet"/>
    <script src="assets/jquery.min.js"></script>
    <link href="assets/switch.css" rel="stylesheet"/>
    <title></title>
</head>
<body>

<div class="col-md-4">
    <table class="table">

        <tbody>
        <tr>
            <th>No</th>
            <th>Başlık</th>
            <th>İçerik</th>
            <th>Durum</th>

        </tr>
        <?php
        include("inc/vt.php"); //veri tabanına bağlanıyoruz

        //verileri çekiyoruz
        $sorgu = $baglanti->query("select * from makale");

        //verileri yazıyoruz
        while ($sonuc = $sorgu->fetch_assoc()) {
            ?>
            <tr>
                <td><?php echo $sonuc['id'] ?></td>
                <td><?php echo $sonuc['baslik'] ?></td>
                <td><?php echo $sonuc['icerik'] ?></td>
                <td>
                    <label class="switch">
                        <!-- checkbox a id ve checked bilgilerini ekliyoruz -->
                        <input type="checkbox" id='<?php echo $sonuc['id'] ?>' class="aktifPasif" <?php echo $sonuc['aktif']==1?'checked':'' ?>  />
                        <span class="slider round"></span>
                    </label>
                </td>

            </tr>
        <?php } ?>
        </tbody>
    </table>
    <h2 id="sonuc"></h2>
</div>
</form>
<!-- js dosyamızı sona ekliyoruz -->
<script src="assets/custom.js"></script>
</body>
</html>

 

 

Daha sonra Jquery kodlarımızı yazdığımız açılamalarda içinde olan custom.js dosyasının kodları şu şekilde olacak:

$(document).ready(function () {
    $('.aktifPasif').click(function (event) {
        var id = $(this).attr("id");  //id değerini alıyoruz

        var durum = ($(this).is(':checked')) ? '1' : '0';
        //checkbox a göre aktif mi pasif mi bilgisini alıyoruz.

        $.ajax({
            type: 'POST',
            url: 'aktifPasif.php',  //işlem yaptığımız sayfayı belirtiyoruz
            data: { id:id, durum: durum }, //datamızı yolluyoruz
            success: function (result) {
                $('#sonuc').text(result);
                //gelen sonucu h2 tagında gösteriyoruz
            },
            error: function () {
                alert('Hata');
            }
        });
    });
});

 

Jquery ile gönderdiğimiz verileri işlediğimiz ve geriye değer döndürdüğümüz aktifPasif.php sayfanın kodları da şu şekilde olacak.

<?php
if ($_POST) { //post var mı diye bakıyoruz
    include("inc/vt.php"); //veri tabanına bağlanıyoruz

    //değişkenleri integer olarak alıyoruz
    $id = (int)$_POST['id'];
    $durum = (int)$_POST['durum'];

    //Güncellme sorgumuzu yazıyoruz
    $sorgu = $baglanti->query("UPDATE makale SET aktif=$durum WHERE  id=$id");

    //gerekli ise geriye değer döndürüyoruz
    echo $id . " nolu kayıt değiştirildi";
}
?>

 

Sizde bu uygulamayı kullanıp sayfalarınızda AJAX ile çok işlevsel uygulamalar geliştirebilirsiniz.

Uygulama dosyaları ve veri tabanını indirmek için: aktifPasif_php.zip

Paylaş:

Yorumlar

  1. Mesut Bey Merhaba, Öncelikle teşekkür ederim aradığım çözümü burada buldum. Yalnız benim islem.php diye bir dosyam var ve içerisinde birçok işlem var kayıt, listeleme, güncelleme ve silme gibi. Mesela veri eklemeyi bu dosya içinde if(isset($_POST["staffsave"])) diye tanımladım. Ben bu islem.php dosyasında ajax ile veri güncellemek istiyorum. Ajax kısmında url alanına url: 'islem.php', yazdığımda islem.php de bunu nasıl yakalayacağım acaba. Teşekkürler / İyi Çalışmalar..

    1. Ajax ile veriyi hangi metot (get, post) ile gönderdiğinize göre değişir. Daha sonra diğer sayfada post iel gönderdiyseniz $_POST["deger_adi"] şeklinde elde edebilirsiniz.

  2. Paylaşımınız için çok teşekkür ederim. Önyargım yüzünden ilk önce yabancı kaynaklara baktım ve bulamadım. Şansıma siteniz ilk sıralarda çıktı da çözümü bulabildim.Yerel kaynakların da bu tür paylaşımlar yapması güzel bir şey.