PHP MYSQL JQUERY AJAX Kullanarak Yıldızlar İle Kullanıcı Oylama Uygulaması

makale.baslik
PHP

Bu uygulama ile PHP, MYSQL ve JQUERY-AJAX kullanarak yıldızlar ile kullanıcı oylama uygulamasının nasıl yapılacağını öğreneceksiniz.

Öncelikle “stardb”  adında veri tabanın da “yildiz” adında aşağıdaki alanlar olan tablo oluşturuyoruz.

PHP MYSQL JQUERY AJAX Kullanarak Yıldızlar İle Kullanıcı Oylama Uygulaması

 

config.php sayfasında pdo ile mysql veri tabanına bağlantımızı oluşturuyoruz. Diğer sayfalardan include ederek çağıracağız.

<?php
$host = 'localhost';
$dbname = 'stardb';
$username = 'root';
$password = '';
$charset = 'utf8';
//$collate = 'utf8_unicode_ci'; //isteğe bağlı
$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;
}

?>

 

index.php sayfasında yıldız ile oylamayı yapacağız. Burada AJAX kullanarak işlemlerinizi gerçekleştireceğiz.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="utf-8"/>
    <title>PHP MYSQL JQUERY AJAX Kullanarak Yıldızlar İle Puanlama Uygulaması</title>

    <link type="text/css" rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="css/jquery.min.js"></script>
</head>
<body>
<?php
require_once 'config.php';
$post_id = '1';
?>
<!-- yıldızlar -->
<div class="tuto-cnt">
    <div class="rate-ex2-cnt">
        <div id="1" class="rate-btn-1 rate-btn"></div>
        <div id="2" class="rate-btn-2 rate-btn"></div>
        <div id="3" class="rate-btn-3 rate-btn"></div>
        <div id="4" class="rate-btn-4 rate-btn"></div>
        <div id="5" class="rate-btn-5 rate-btn"></div>
    </div>
    <br>

    <div class="box-result-cnt">
        <?php
        //veri tabanından ortalama sonuç ve kaç adet oylama yapılmış verisini alıyoruz.
        $sorgu = $baglanti->prepare("select avg(rate) as ortalama, count(*) as adet from yildiz");
        $sorgu->execute();
        $sonuc = $sorgu->fetch();//sorgu çalıştırılıp veriler alınıyor

        $rate_times = $sonuc['adet'];;
        $rate_value = $sonuc['ortalama'];

        //ortalama sonucun yıldızlarını css ile background yüzde olarak verip boyuyoruz.
        $rate_bg = (($rate_value) / 5) * 100;
        ?>
        <hr>
        <h3>İçerik <strong><?php echo $rate_times; ?></strong> oylandı.</h3>
        <hr>
        <h3>Otalama oylama <strong><?php echo $rate_value; ?></strong> .</h3>
        <hr>
        <div class="rate-result-cnt">
            <div class="rate-bg" style="width:<?php echo $rate_bg; ?>%"></div>
            <div class="rate-stars"></div>
        </div>
        <hr>
    </div>
</div>
<script>

    $(function () {
        $('.rate-btn').hover(function () {
            $('.rate-btn').removeClass('rate-btn-hover');
            var therate = $(this).attr('id');
            for (var i = therate; i >= 0; i--) {
                $('.rate-btn-' + i).addClass('rate-btn-hover');
            }
            ;
        });

        $('.rate-btn').click(function () {
            var therate = $(this).attr('id');
            var dataRate = 'act=rate&post_id=<?php echo $post_id; ?>&rate=' + therate; //
            $('.rate-btn').removeClass('rate-btn-active');
            for (var i = therate; i >= 0; i--) {
                $('.rate-btn-' + i).addClass('rate-btn-active');
            }
            ;
            $.ajax({
                type: "POST",
                url: "ajax.php",
                data: dataRate,
                success: function () {
                }
            });

        });
    });
</script>
</body>
</html>

ajax.php ile de arka tarafta veritabanı işlemlerini yapıp oylamayı kaydediyoruz.

<?php
require_once 'config.php';

    if($_POST['act'] == 'rate'){
       //ip adresini veri tabanından
       $ip = $_SERVER["REMOTE_ADDR"];
       $therate = $_POST['rate'];
       $thepost = $_POST['post_id'];

        $sorgu = $baglanti->prepare("SELECT count(*) as sayi FROM yildiz where ip=:ip");
        $sorgu->execute(['ip' => $ip]);
        $sonuc = $sorgu->fetch();

       if($sonuc['sayi'] == 0 ){

            $satir = [
                'id_post' => $thepost,
                'ip' => $ip,
                'rate' => $therate,

            ];
            // Veri güncelleme sorgumuzu yazıyoruz.
            $sql = "INSERT INTO yildiz SET id_post=:id_post, ip=:ip, rate=:rate;";
            $durum = $baglanti->prepare($sql)->execute($satir);

       }else{
            $satir = [
                'rate' => $therate,
                'ip' => $ip,
            ];
            // Veri güncelleme sorgumuzu yazıyoruz.
            $sql = "UPDATE yildiz SET rate=:rate WHERE ip=:ip;";
            $durum = $baglanti->prepare($sql)->execute($satir);
       }
    } 
?>

Örnek web sitesi dosyalarını ve veri tabanını indirmek için: yildiz.zip  

 
Paylaş:

Yorumlar

  1. ne css kodunu vermişsin nede jquery kodunu. nerede yıldız iconları?

    1. Örnek uygulamayı alta mevcut, indirebilirsiniz.

Kategoriler

En çok okunan yazılar.

 Etiketler