لديك حساب بالفعل؟ دخول
دخول  سجل الأن 
شرح عمل نظام استفتائات اجاكس متحرك بالجى كويرى + اجوبة ملونة حسب النسبة المئوية
[تحسين] نظام استفتائات متحرك بخاصية تدرج الالوان

مشاهدة مثال حى

تحميل

يمكنك تحميل ملفات الدرس كامل + ملفات المثال من الاسفل
[تحسين] الجافا سكربت
الان سنرى سويا الاكواد المسئولة عن الحركة والشكل اى اكواد جهة المستخدم او الجافا سكربت وسنستخدم اطار عمل وهو الجى كويرى

اللون حسب النسبة المئوية - التفاصيل

var percentColors = [
    { pct: 0.0, color: { r: 0xff, g: 0x00, b: 0 } },
    { pct: 0.5, color: { r: 0xff, g: 0xff, b: 0 } },
    { pct: 1.0, color: { r: 0x00, g: 0xff, b: 0 } } ];

var getColorForPercentage = function (pct) {
        for (var i = 0; i < percentColors.length; i++) {
            if (pct <= percentColors[ i ].pct) {
                var lower = percentColors[i - 1] || {
                    pct: 0.1,
                    color: {
                        r: 0x0,
                        g: 0x00,
                        b: 0
                    }
                };
                var upper = percentColors[ i ];
                var range = upper.pct - lower.pct;
                var rangePct = (pct - lower.pct) / range;
                var pctLower = 1 - rangePct;
                var pctUpper = rangePct;
                var color = {
                    r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
                    g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
                    b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper)
                };
                return 'rgb(' + [color.r, color.g, color.b].join(',') + ')';
            }
        }
    }
هذه الدالة تأخد نسبة مئوية من 0 الى 1 (0.10 = 10%, 0.05 = 5% الخ) وتعود ب اللون (0 = احمر | 1 = اخضر | اى نسبة اخرى بين 0 و 1 ستأخذ لون بين الاحمر والاخضر - كلما اقتربت للمئة تقترب للون الاخضر)
تطبيق
document.write("<span style='background-color: "+getColorForPercentage(0)+";'></span>");
document.write("<span style='background-color: "+getColorForPercentage(0.20)+";'></span>");
document.write("<span style='background-color: "+getColorForPercentage(0.40)+";'></span>");
document.write("<span style='background-color: "+getColorForPercentage(0.60)+";'></span>");
document.write("<span style='background-color: "+getColorForPercentage(0.80)+";'></span>");
document.write("<span style='background-color: "+getColorForPercentage(1)+";'></span>");

حاول بنفسك »اضغط على "حاول بنفسك" لكى ترى كيف تعمل فى الحقيقة

الجى كويرى (jQuery)

$(document).ready(function ($) {
    // اخذ النسب الاولية ووضعها على اجابات الاستفتاء
    $('div.polls').find('span.option').each(function () {
        $(this).css({
            backgroundColor: getColorForPercentage($(this).attr('title') / 100)
        });
    });
    // التصويت واضافة الالوان عند الضغط
    $("div.polls > form > p").click(function () {
        var loader = $('<img src="lib/loading.gif" />');

        var poll = $(this).parents("div.polls");
        var form = $(this).parents("form");

        var poll_id = poll.attr("id");

        if (form.hasClass("closed")) {
            return false;
        }
        var option_id = $(this).find('input').val();

        $(":radio", form).hide();
        $("em", $(this)).html(loader).show();
        form.addClass("closed");
        //ارسال الاى دى الخاص بالاستفتاء والاى دى الخاص بالاجابة المختارة
        $.post('vote.php', {
            poll: poll_id,
            option: option_id
        }, function (data) {

            $("img", form).remove();
            //تطبيق النسب الجديدة + الحركة + الالوان
            $.each(data.results, function (option, value) {
                $("p#option_" + option).find("span").show().css({
                    width: 0,
                    opacity: 0
                }).animate({
                    width: value + "%",
                    backgroundColor: getColorForPercentage(value / 100),
                    opacity: 1
                }, "slow", "swing", function () {
                    $("p#option_" + option).find("em").text(value + "%").fadeIn("slow");
                })
            });

        }, "json");
        return false;
    });
});

كيف لون الخلفية يعمل مع دالة .animate() ؟

من المعروف انك لا تستطيع اضافة الحركة على الخلفية اى حركة تدرج الوان الخلفية لان دالة الجى كويرى .animate() لا تعمل مع backgroundColor الا فى حالة واحدة وهى حالة وجود مكتبة jQuery UI لذلك سنستخدم اضافة jQuery اخرى تجعل لون الخلفية متحرك وهى backgroundColor.js معنى هذا انك تجب ان تستخدم هذا الكود فى حالة عدم وجود مكتبة jQuery UI
[تحسين] PHP & MYSQL

هذه االاكواد هى اكواد جهة السرفر اكواد احتساب الاصوات والنسب وتسجيلها فى قاعدة البينات

index.php
<?php
    
    $id = (isset($_GET['id'])) ? intval($_GET['id']) : 1;

    if(!$row = get_poll($id)){
        exit('not found');
    }
    
    
?>
<div id="<?php echo $row['poll_id'];?>" class="polls">
    <h2><?php echo $row['title'];?></h2>
	<form <?php if(get_votes($row['poll_id'])){ echo 'class="closed"';}?> method="post">
    
        <?php
            foreach (poll_options($id) as $option) {
        ?>    
        	<p id="option_<?php echo $option['id'];?>">
        		<span class="option" style="width:<?php echo $option['percent'];?>%;" title="<?php echo $option['percent'];?>"></span>
        		<input id="<?php echo $option['id'];?>" name="vote" value="<?php echo $option['id'];?>" type="radio" />
        		<label for="<?php echo $option['id'];?>"><?php echo $option['title'];?></label>
        		<em><?php echo $option['percent'];?>%</em>
        	</p>            
        <?php    	
            }	
        ?>    

	</form>
</div>
vote.php

لتسجيل واحتساب الاصوات والعودة بالنسب الجديدة

    if ( isset($_POST['poll']) and isset($_POST['option'])){
        
        $poll_id = intval($_POST['poll']);
        $option_id = intval($_POST['option']);
        
            add_vote( $option_id,$poll_id );
            setcookie('poll_'.$poll_id, 1, time() * (60 * 60 * 5),'/');
            
        exit( json_encode(array('results' => results($poll_id))) );
    }

الدوال المستعملة

هذه هى الدوال التى تم استعمالها مع شرح كل واحدة منهم

get_poll()

هذه الدالة وظيفتها هى استدعاء معلومات التصويت نفسه من قاعدة البينات اى عنوان التصويت
    function get_poll($id){
        $query = mysql_query("SELECT * FROM `polls` WHERE `poll_id` = '$id'");    
            return mysql_fetch_array($query, MYSQL_ASSOC ); 	
    }

poll_options()

وظيفتها هى الحصول على جميع الاختيارات او الاجابات الخاصة باستفتاء معين مع احتساب النسب المئوية
    function poll_options($poll_id){
        $query = mysql_query("SELECT x . * , z.rates 
                                FROM poll_options x
                                    LEFT JOIN (SELECT option_id, COUNT( id ) AS `rates`
                                            FROM poll_votes 
                                                GROUP BY option_id) z 
                                                    ON x.id = z.option_id
                              where x.poll_id = '$poll_id' ORDER BY x.id asc");   
        $total =  total_votes($poll_id);
            while( $row = mysql_fetch_array( $query, MYSQL_ASSOC ) ){   
                $row['percent'] = @round((($row['rates'] / $total) * 100),1);
                $list[] = $row;
            }
       return $list;     
    }

results()

وظيفة هذه الدالة هى الاتيان ب ID كل اجابة ومعها النسبة المئوية
    function results($poll_id){
        foreach (poll_options($poll_id) as $value) {
        	$list[$value['id']] = $value['percent'];
        }
            return $list;
    } 

total_votes()

وظيفة هذه الدالة هى احتساب عدد الاصوات للاستفتاء كله
    function total_votes($poll_id){
    	$query = mysql_query("SELECT sum(z.rates) as total
                                FROM poll_options x
                                    JOIN (SELECT option_id, COUNT( id ) AS `rates`
                                            FROM poll_votes 
                                                GROUP BY option_id) z 
                                                    ON x.id = z.option_id
                              where x.poll_id = '$poll_id'");
            $row = mysql_fetch_array( $query, MYSQL_ASSOC );
                return $row['total'];
    }

get_votes()

وظيفة هذه الدلة هى التأكد اذا كان المستخدم قام بالتصويت مسبقا ام لا عن طريق رقم الاى بى والكوكيز
    function get_votes($poll_id){
        $query = mysql_query("SELECT * FROM `poll_votes` where `poll_id` = '$poll_id' and `ip` = '{$_SERVER["REMOTE_ADDR"]}'");
           $row = mysql_fetch_array( $query );
           if($row or isset($_COOKIE['p_'.$poll_id])){
                return $row;
           }else{
                return false;
           }    
    }

add_vote()

وظيفة هذه الدالة هى اضافة تصويت جديد
    function add_vote($option_id,$poll_id){
        $row = get_votes($poll_id);
            if(!$row){
                mysql_query("INSERT INTO `poll_votes` (`poll_id` ,`option_id` ,`ip`) VALUES ( '$poll_id','$option_id', '{$_SERVER["REMOTE_ADDR"]}')");      
            }else{
                mysql_query("UPDATE `poll_votes` set `option_id` = '$option_id' where `id` = '{$row['id']}'");                               
            }    	
    }
هل لديك سؤال او مشكلة؟
فى حالة وجود اى سؤال او مشكلة لا تتردد فى طلب المساعدة وامنحنا هذه الفرصة لكى نجيب على اى عدد من الاسئلة او المشاكل او الاستفسارات وفى اقل وقت ممكن فقط عليك استخدام قسم مشاكل وحلول البرمجة
استفتئاء 26 / سبتمبر / 2011 الساعة 22:45
{ "lang": "ar" }