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.

  3. Mesut hocam ellerinize sağlik çok güzel bir sistem ama örneğin 3 numaralı idinin durumunu off yaptigimizda önyüzde bu nasil kapanacak ? yani şöyle hizmetler alanı var diyelim 5 tane içerik var 3 . hzmeti off yaptigimda bu veri nasil görünmeyecek ?

    1. Diğer tarafta da veri çekerken yazacağınız sorguyla bunu ayarlayacaksınız. Örneğin aktif olmayanları sorgu ile getirtebilirsiniz.

  4. Mesut bey oldukça açıklayıcı olmuş yazınız fakat bir tane checkbox yerine bir kaçtane işaretlersek bunu nasıl yaparız ve işlem sayfasında güncelleriz acaba

    1. Sistem tıkladığınız anda arka tarafta işlemi gerçekleştiriyor. Çoklu yapmaya gerek kalmıyor.

  5. Sütun olarak yan tarafına bir sütun daha toggle button koymak istersek kod kısmını nasıl deştirmemiz gerekir acaba?

    1. çok basit ben sadece tek buton koyduğum için ajax için class seçici kullandım. Siz id seçici ile istediğiniz kadar alan için kullanabilirsiniz.

      $('.aktifPasif').click(function (event) {

      kodu yerine

      $('#id_adi').click(function (event) {

      şeklinde kullanın

  6. O zamanda sutundakıler farklı olacak ama.. hem satırlarda hem sutunlarda toggle buttonlar olacak benım yapacagım tasarımda...

    1. Her butona ayrı id vererek herbirini ayrı kontrol edebilirsiniz.