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

makale.baslik
PHP

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.

  7. Bunu yapmayı çok istiyorum ama beceremiyorum videolu kaynakda bulamadım yabancı ya da yerli

  8. Merhabalar. Kod çalışıyr fakat ben bir sütun daha koydum aktif pasif durumunu öğrenmek için 0 veya 1 yazıyor. Check ettiğim anda 0 olan durum veritabanında 1 oluyor ama sayfa yenilenmeden td içinde de olmasını nasıl sağlayabilirm.

    1. Axaj kullanarak yapabilirsiniz.

  9. Hocam merhaba sizi kutluyor ve projenizi sitemde kullanıyorum. Benim sorum şöyle olacak. galeriekle.php adında veritabanına kayıt gönderdiğim bir form dosyam var. Ben bu form dosyasında bu switch'i nasıl monte ederim ? Formda input yolu ile alıyorum aktif pasif olayını ancak görsellik açısından bu şekil nasıl yapabilirim ? Bugün birşeyler yaptım ama değer olarak db'ye kaydetmedi

  10. datatable ile birlikte çalışmıyor. şöyle ki, switch button ilk sayfada yapılan işlemlerde çalışırken sonraki sayfalarda çalışmıyor

Kategoriler

En çok okunan yazılar.

 Etiketler