JQUERY Ajax ile aktif pasif - Anasayfa
PHP,  WEB TEKNOLOJİLERİ

JQUERY Ajax ile aktif pasif yapımı PHP PDO5 min read

Selamlar,
JQUERY Ajax ile aktif pasif uygulaması ile projelerinizde veya uygulamanızda, Admin paneline aktif pasif (enable disable) butonunu enterge ederek, daha pratik ve verimli siteler oluşturabilirsiniz.

Uygulama PHP PDO ile yapılmıştır. PDO ile birçok farklı veritabanıyla sorunsuz kullanabilirsiniz.

Siteniz Ajax teknolojisi ile daha hızlı ve verimli çalışmasını sağlayabilirsiniz.

Ayrıca sizlere faydalı olabilecek geçen yayınladığım “Çoklu Veri Silme (Multiple delete) PHP PDO MYSQL ” adlı yazımı göz atabilirsiniz.

Veritabanı ve veriler

JQUERY Ajax ile aktif pasif - Veritabanı
Veritabanı
JQUERY Ajax ile aktif pasif - Veritabanı
Veritabanı Veriler

Veritabanı Bağlantımız (fonk.php)

<?php
$host = '127.0.0.1';
$dbname = 'aktifpasif';
$username = 'root';
$password = '';
$charset = 'utf8';
//$collate = 'utf8_unicode_ci';
$dsn = "mysql:host=$host;dbname=$dbname;charset=$charset";
$options = [
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_PERSISTENT => false,
    PDO::ATTR_EMULATE_PREPARES => false,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    //   PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES $charset COLLATE $collate"
];
try {
    $baglanti = new PDO($dsn, $username, $password, $options);
    $baglanti->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    echo 'Bağlantı hatası: ' . $e->getMessage();
    exit;
}
?>

Anasayfamız (index.php)

JQUERY Ajax ile aktif pasif - Anasayfa
Anasayfa

Uygulamanın temel çalışma mantığı anlatacak olursak;
Checkbox’larımza veritabanından gelen ID’leri checkbox’ın id kısmına tanımlıyoruz.

Checkbox’tan gelen veriler aktifveri.js adlı javascipt dosyasına gidip veriler tanımlandıktan sonra, veriler AktifPasif.php dosyasında veritabanında güncelleniyor.

Verileri güncellerken oluşabilecek hataları ve başarılı işleyişleri <table> ‘ın sonunda <h1> tagı içinde tanımladım.

index.php

<!DOCTYPE html>
<html>
<head>
    <title>Aktif PASİF</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-7">
            	<!-- Verilerimizi Sıralamak için tablomuzu oluşturuyoruz-->
                <table class="table table-sm table-hover">
                    <thead>
                        <th>ID</th>
                        <th>Başlık</th>
                        <th>İçerik</th>
                        <th>Aktif</th>
                        <th>Sıra</th>
                    </thead>
                    <?php
                    include('fonk.php'); // Sayfayı veritabanına bağlıyoruz
                    $sorgu = $baglanti->prepare('Select * from urunler'); // Verilerimizi sıralamk için sorgumuzu yazıyoruz
                    $sorgu->execute(); // sorgumuzu çalıştırıyoruz

                    while ($sonuc = $sorgu->fetch())  // verilerimizi sıralamak için while döngüsü ile döndürüyoruz
                    {      // While Başlangıcı      // Verilerimizi while başlangıcı ile while bitişi arasında sıralıyoruz
                        ?>
                        <tbody>
                            <td><?= $sonuc['id']?></td>
                            <td><?= $sonuc['baslik']?></td>
                            <td><?= $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>
                                <td><?= $sonuc['sira']?></td>
                            </tbody>
                            <?php
                        }  // While Bitişi

                        ?>
                    </table>
                    <h1 style="color:red; text-align:center;" id="sonuc"></h1> <!-- Hatalarımızı ve sonuçları gösterecek olan başlığımız -->
                </div>
            </div>
        </div>


        <script src="js/jquery-3.4.1.min.js"></script>  
        <!--           Çalışma Prensibi şu şekildedir

        	Tablodan gelen veriler aktifveri.js dosyaya gönderilip ardından verileri güncellenmesi için  aktifPasif.php sayfamıza gönderiliyor
        	 --> 
        <script src="aktifveri.js"></script> <!-- aktifveri.js dosyamızı dahil ediyoruz-->


        <link rel="stylesheet" type="text/css" href="css/switch.css"> <!-- Aktif Pasif Butonumzun CSS dosyasını sayfamıza dahil ediyoruz -->
    </body>
    </html>

aktifveri.js

Checkbox’tan gelen verileri tanımlanan aktifveri.js dosyamız şu şekilde

$(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');
            }
        });
    });
});

aktifPasif.php

JQUERY ile gönderilen verileri güncelleyecek olan aktifpasif.php dosyamız

<?php
if ($_POST) { //post olup olmadığını kontrol ediyoruz
    include("fonk.php"); //veri tabanına bağlanıyoruz

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


    $satir = array('id' => $id,
        'durum' => $durum,
    );
    // Veri güncelleme sorgumuzu yazıyoruz.
    $sql = "UPDATE urunler SET aktif=:durum WHERE id=:id;";
    $durum = $baglanti->prepare($sql)->execute($satir);


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

JQUERY Ajax ile aktif pasif uygulamasını birçok farklı projelerinizde kullanabilirsiniz , kullanımı oldukça kolaydır. umarım sizler için faydalı bir yazı olmuştur.

Uygulamayı ve veritabanını şuradan bulabilirsiniz ==> AktifPasif.zip

Görüşleriniz bizim için değerli , emoji bırakarak yada yorum yazarak görüşlerinizi bize belirtebilirsiniz. 

İYİ KODLAMALAR 🙂