آموزش ساخت نظرسنجی

آموزش ساخت نظرسنجی

نظر سنجی یکی از راه های ارتباط با مشتری و کاربران در دنیای مجازی است و به مدیران وبسایت ها کمک می کند تا نظرات کاربران خود را در مورد مطالب و محتویات و یا هر موضوع دیگری را بداند.ما در این آموزش به شما نحوه ایجاد این اپیلیکیشن را می دهیم.خوب ما کار را شروع می کنیم.

برای مشاهده لینک وارد شود

مثل همیشه ما کار را با نوشتن کد های HTML آغاز می کنیم که در آن هر چیزی را که لازم داشته باشیم وارد می کنیم از قبیل استایل ها و….

suggestions.php

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Feature Suggest w/ PHP, jQuery & MySQL | 8np Demo</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>

<div id="page">

    <div id="heading" class="rounded">
    	<h1>Feature Suggest<i>for 8np.ir</i></h1>
    </div>

    <!-- The generated suggestion list comes here -->

    <form id="suggest" action="" method="post">
        <p>
            <input type="text" id="suggestionText" class="rounded" />
            <input type="submit" value="Submit" id="submitSuggestion" />
        </p>
    </form>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

 

پس از تگ head ما در تگ body ،تگ page را داریم که برای ما لیست نظرسنجی و سرتیتر ها و فرم خبر رسانی را نگه می دارد.

11

این اپیلیکیشن دارای ۲ جدول MySQL برای ذخیره اطلاعات دارد.گزینه ها(Suggestions) و تعداد انتخاب های هرگزینه (Suggestions_votes) .جدول اول شامل متن گزینه ها و تعداد ارا می باشد و جدول دوم IP کاربران را نگه می دارد تا هر کاربر نتواند بیشتر از یک رای بدهد.

i4

i3

 

PHP

​قبل از اینکه ما به کدهای AJAX و غیره بپردازیم شما به کد های مربوط به کلاس گزینه ها(Suggestions) توجه کنید.در آن از قابلیت های جادویی PHP برای بهتر شدن کد استفاده شده است.هنگامی که صفحه اول ایجاد شدPHP با استفاده از دیتابیس گزینه ها را فراخوانی می کند و اشیا کلاس را ایجاد می کند.

suggestion.class.php

class Suggestion
{
    private $data = array();

    public function __construct($arr = array())
    {
        if(!empty($arr)){

            // The $arr array is passed only when we manually
            // create an object of this class in ajax.php

            $this->data = $arr;
        }
    }

    public function __get($property){

        // This is a magic method that is called if we
        // access a property that does not exist.

        if(array_key_exists($property,$this->data)){
            return $this->data[$property];
        }

        return NULL;
    }

    public function __toString()
    {
        // This is a magic method which is called when
        // converting the object to string:

        return '
        <li id="s'.$this->id.'">
            <div class="vote '.($this->have_voted ? 'inactive' : 'active').'">
                <span class="up"></span>
                <span class="down"></span>
            </div>

            <div class="text">'.$this->suggestion.'</div>
            <div class="rating">'.(int)$this->rating.'</div>
        </li>';
    }
}

 

متد toString باعث تولید متن اشیا کلاس میشود.حالا اجازه دهید تا لیست گزینه ها را در صفحه اول تولید کنیم

 

suggestions.php

require "connect.php";
require "suggestion.class.php";

// Converting the IP to a number. This is a more effective way
// to store it in the database:

$ip	= sprintf('%u',ip2long($_SERVER['REMOTE_ADDR']));

// The following query uses a left join to select
// all the suggestions and in the same time determine
// whether the user has voted on them.

$result = $mysqli->query("
    SELECT s.*, if (v.ip IS NULL,0,1) AS have_voted
    FROM suggestions AS s
    LEFT JOIN suggestions_votes AS v
    ON(
        s.id = v.suggestion_id
        AND v.day = CURRENT_DATE
        AND v.ip = $ip
    )
    ORDER BY s.rating DESC, s.id DESC
");

$str = '';

if(!$mysqli->error)
{
    // Generating the UL

    $str = '<ul class="suggestions">';

    // Using MySQLi's fetch_object method to create a new
    // object and populate it with the columns of the result query:

    while($suggestion = $result->fetch_object('Suggestion')){

        $str.= $suggestion;	// Uses the __toString() magic method.

    }

    $str .='</ul>';
}

کدPHP همچنین درخواست های AJAX ارسال شده توسط jQuery را نیز مدیریت می کند .این کار توسط ajax.phpانجام می پذیرد.

ajax.php

require "connect.php";
require "suggestion.class.php";

// If the request did not come from AJAX, exit:
if($_SERVER['HTTP_X_REQUESTED_WITH'] !='XMLHttpRequest'){
    exit;
}

// Converting the IP to a number. This is a more effective way
// to store it in the database:

$ip	= sprintf('%u',ip2long($_SERVER['REMOTE_ADDR']));

if($_GET['action'] == 'vote'){

    $v = (int)$_GET['vote'];
    $id = (int)$_GET['id'];

    if($v != -1 && $v != 1){
        exit;
    }

    // Checking to see whether such a suggest item id exists:
    if(!$mysqli->query("SELECT 1 FROM suggestions WHERE id = $id")->num_rows){
        exit;
    }

    // The id, ip and day fields are set as a primary key.
    // The query will fail if we try to insert a duplicate key,
    // which means that a visitor can vote only once per day.

    $mysqli->query("
        INSERT INTO suggestions_votes (suggestion_id,ip,day,vote)
        VALUES (
            $id,
            $ip,
            CURRENT_DATE,
            $v
        )
    ");

    if($mysqli->affected_rows == 1)
    {
        $mysqli->query("
            UPDATE suggestions SET
                ".($v == 1 ? 'votes_up = votes_up + 1' : 'votes_down = votes_down + 1').",
                rating = rating + $v
            WHERE id = $id
        ");
    }

}
else if($_GET['action'] == 'submit'){

    // Stripping the content
    $_GET['content'] = htmlspecialchars(strip_tags($_GET['content']));

    if(mb_strlen($_GET['content'],'utf-8')<3){
        exit;
    }

    $mysqli->query("INSERT INTO suggestions SET suggestion = '"
        .$mysqli->real_escape_string($_GET['content'])."'");

    // Outputting the HTML of the newly created suggestion in a JSON format.
    // We are using (string) to trigger the magic __toString() method.

    echo json_encode(array(
        'html'	=> (string)(new Suggestion(array(
            'id'			=> $mysqli->insert_id,
            'suggestion'	=> $_GET['content']
        )))
    ));
}

واکنون ما کد های jQuery را مینویسیم.تمام کد های jQuery داخل فابل script.js قرار دارند.این به کلیک روی فلش گوش می کند و هنگامی که آنها فشرده شدند باعث افزایش یا کاهش امتیاز هر کدام از گزینه ها میشود.

script.js

$(document).ready(function(){

    var ul = $('ul.suggestions');

    // Listening of a click on a UP or DOWN arrow:

    $('div.vote span').live('click',function(){

        var elem		= $(this),
            parent		= elem.parent(),
            li			= elem.closest('li'),
            ratingDiv	= li.find('.rating'),
            id			= li.attr('id').replace('s',''),
            v			= ۱;

        // If the user's already voted:

        if(parent.hasClass('inactive')){
            return false;
        }

        parent.removeClass('active').addClass('inactive');

        if(elem.hasClass('down')){
            v = -1;
        }

        // Incrementing the counter on the right:
        ratingDiv.text(v + +ratingDiv.text());

        // Turning all the LI elements into an array
        // and sorting it on the number of votes:

        var arr = $.makeArray(ul.find('li')).sort(function(l,r){
            return +$('.rating',r).text() - +$('.rating',l).text();
        });

        // Adding the sorted LIs to the UL
        ul.html(arr);

        // Sending an AJAX request
        $.get('ajax.php',{action:'vote',vote:v,'id':id});
    });

    $('#suggest').submit(function(){

        var form		= $(this),
            textField	= $('#suggestionText');

        // Preventing double submits:
        if(form.hasClass('working') || textField.val().length<3){
            return false;
        }

        form.addClass('working');

        $.getJSON('ajax.php',{action:'submit',content:textField.val()},function(msg){
            textField.val('');
            form.removeClass('working');

            if(msg.html){
                // Appending the markup of the newly created LI to the page:
                $(msg.html).hide().appendTo(ul).slideDown();
            }
        });

        return false;
    });
});

ودر پایان نیز  تعدادی کد CSS برای جذابیت بیشتر به اپیلیکیشن خود اضافه می کنیم.

styles.css

.rounded,
#suggest,
.suggestions li{
    -moz-border-radius-topleft:12px;
    -moz-border-radius-bottomright:12px;

    -webkit-border-top-left-radius:12px;
    -webkit-border-bottom-right-radius:12px;

    border-top-left-radius:12px;
    border-bottom-right-radius:12px;
}

پایان

 

+3
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


نُه × = 81

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>