Заходи
Гость

Хостинг

Статистика
Яндекс.Метрика Счетчик PR-CY.Rank
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Ccылки

Свежак

Главная » 2013 » Март » 31 » Создание собственного опроса AJAX системой
15:24
Создание собственного опроса AJAX системой

Создание собственного опроса AJAX системой


Сегодня я подготовил новый интересный урок - мы будем заниматься созданием собственной системой опроса (AJAX) для ваших проектов с PHP.Вопросы, ответы и результаты, я буду держать в одной таблице SQL. Когда мы будем голосовать за один из вариантов - JQuery будет размещать данные, а затем мы будем анимировать наши результаты в реальном времени.  

СМОТРЕТЬ ДЕМО                СКАЧАТЬ ИСХОДНИК


 

Шаг 1. SQL

Нам нужно будет добавить одну таблицу в нашей базе данных:

01

CREATE TABLE `s183_polls` (

02

  `id` int(10) unsigned NOT NULL auto_increment,

03

  `title` varchar(255) default '',

04

  `answers` text NOT NULL,

05

  `results` varchar(60) NOT NULL default '',

06

  `total_votes` int(10) NOT NULL default '0',

07

  `when` int(10) NOT NULL,

08

  PRIMARY KEY  (`id`)

09

) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

10

 

11

INSERT INTO `s183_polls` (`id`, `title`, `answers`, `results`, `total_votes`, `when`) VALUES

12

(NULL, 'First poll question', 'Answer 1<sep>Answer 2<sep>Answer 3<sep>Answer 4', '', 0, UNIX_TIMESTAMP()),

13

(NULL, 'Second poll question', 'Answer 21<sep>Answer 22<sep>Answer 23<sep>Answer 24', '', 0, UNIX_TIMESTAMP()+1),

14

(NULL, 'Third poll question', 'Answer 31<sep>Answer 32<sep>Answer 33<sep>Answer 34', '', 0, UNIX_TIMESTAMP()+2),

15

(NULL, 'Forth poll question', 'Answer 41<sep>Answer 42<sep>Answer 43<sep>Answer 44', '', 0, UNIX_TIMESTAMP()+3),

16

(NULL, 'Fifth poll question', 'Answer 51<sep>Answer 52<sep>Answer 53<sep>Answer 54', '', 0, UNIX_TIMESTAMP()+4);

 

Это PUR основная таблица голосований.

Шаг 2. PHP

Вот исходный код нашего основного файла:

index.php

001

<?php

002

// disable  warnings

003

if (version_compare(phpversion(), "5.3.0", ">=")  == 1)

004

  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);

005

else

006

  error_reporting(E_ALL & ~E_NOTICE);

007

 

008

require_once('classes/CMySQL.php'); // including service class to work with database

009

 

010

if ($_POST['do'] == 'vote') { // in case if we submitted poll

011

    $iPollId = (int)$_POST['id'];

012

    $iAnswer = (int)$_POST['answer'];

013

 

014

    if ($iPollId && $iAnswer >= 0 && ! isset($_COOKIE['av' . $iPollId])) {

015

        // get poll info

016

        $aPollInfo = $GLOBALS['MySQL']->getRow("SELECT * FROM `s183_polls` WHERE `id` = '{$iPollId}'");

017

 

018

        // updating of poll results

019

        $aAnswers = explode('<sep>', $aPollInfo['answers']);

020

        $iCnt = count($aAnswers);

021

        $aVotes = ($aPollInfo['results'] == '') ? array_fill(0, $iCnt, 0) : explode('<sep>', $aPollInfo['results']);

022

        $aVotes[$iAnswer]++;

023

        $iVotesCount = array_sum($aVotes);

024

        $sVotes = implode('<sep>', $aVotes);

025

        $GLOBALS['MySQL']->res("UPDATE `s183_polls` SET `results` = '{$sVotes}', `total_votes` = {$iVotesCount} WHERE `id` = {$iPollId}");

026

 

027

        // recalculation of percents

028

        $iVotesCnt = $aPollInfo['total_votes'] + 1;

029

        $aPercents = array();

030

        foreach ($aAnswers as $i => $sAnswer) {

031

            $aPercents[$i] = round( (0 != $iVotesCnt ? (( $aVotes[$i] / $iVotesCnt ) * 100) : 0), 1);

032

        }

033

 

034

        setcookie('av' . $iPollId, '1', time() + 24*3600, '/'); // easy protection from duplicate votes

035

 

036

        // return back to JS

037

        echo json_encode($aPercents);

038

        exit;

039

    } else {

040

        exit;

041

    }

042

}

043

 

044

$sCode = '';

045

$iItemId = (int)$_GET['id'];

046

if ($iItemId) { // View item output

047

    $aItemInfo = $GLOBALS['MySQL']->getRow("SELECT * FROM `s183_polls` WHERE `id` = '{$iItemId}'"); // get poll info

048

 

049

    $aAnswers = explode('<sep>', $aItemInfo['answers']);

050

    $iCnt = count($aAnswers);

051

    $aVotes = ($aItemInfo['results'] == '') ? array_fill(0, $iCnt, 0) : explode('<sep>', $aItemInfo['results']);

052

 

053

    $iVotesCnt = $aItemInfo['total_votes'];

054

 

055

    $sAnswers = '';

056

    foreach ($aAnswers as $i => $sAnswer) {

057

        $fPercent = round((0 != $iVotesCnt ? (($aVotes[$i] / $iVotesCnt) * 100) : 0), 1);

058

        $sAnswers .= "<div id='{$i}'><div>{$sAnswer} (<span>{$aVotes[$i]}</span>)</div><div class='row' style='width:{$fPercent}%'>{$fPercent}%</div></div>";

059

    }

060

 

061

    ob_start();

062

    ?>

063

<h1><?= $aItemInfo['title'] ?></h1>

064

<h3><?= date('F j, Y', $aItemInfo['when']) ?></h3><hr />

065

<div class="answers"></div>

066

<hr /><h3><a href="<?= $_SERVER['PHP_SELF'] ?>">back</a></h3>

067

<script>

068

$(function(){

069

    $('.answers > div').click(function () {

070

 

071

        var answer = $(this).attr('id');

072

        var $span = $(this).find('span');

073

 

074

        $.post('<?= $_SERVER['PHP_SELF'] ?>', {id: , answer: answer, do: 'vote'},

075

            function(data){

076

                if (data) {

077

                    var da = eval('(' + data + ')');

078

                    for (var p in da) {

079

                        $($('.answers > div .row')[p]).animate({

080

                            width: da[p] + "%"

081

                        }, 500);

082

                        $($('.answers > div .row')[p]).text(da[p] + "%");

083

                    }

084

                    $span.text(parseInt($span.text()) + 1);

085

                }

086

            }

087

        );

088

    });

089

});

090

</script>

091

    <?

092

    $sCode .= ob_get_clean();

093

} else {

094

    $sCode .= '<h1>List of polls:</h1>';

095

 

096

    // taking info about all polls from database

097

    $aItems = $GLOBALS['MySQL']->getAll("SELECT * FROM `s183_polls` ORDER by `when` ASC");

098

    foreach ($aItems as $i => $aItemInfo) {

099

        $sCode .= '<h2><a href="'.$_SERVER['PHP_SELF'].'?id='.$aItemInfo['id'].'">'.$aItemInfo['title'].'</a></h2>';

100

    }

101

}

102

 

103

?>

104

<!DOCTYPE html>

105

<html lang="en" >

106

    <head>

107

        <meta charset="utf-8" />

108

        <title>Creating own ajax poll system | Script Tutorials</title>

109

 

110

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

111

        <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>

112

    </head>

113

    <body>

114

        <div class="container">

115

           

116

        </div>

117

        <footer>

118

            <h2>Creating own own ajax poll system</h2>

119

            <a href="http://www.script-tutorials.com/creating-own-ajax-poll-system/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>

120

        </footer>

121

    </body>

122

</html>

 

Когда мы открываем эту страницу в первый раз - это будет список опросов. Каждый опрос имеет собственные страницы. На этой странице мы будем показывать название опроса, дату добавления и все возможные ответы. 


СМОТРЕТЬ ДЕМО                       СКАЧАТЬ ИСХОДНИК


Источник урока

Категория: PHP | Просмотров: 695 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск

Статьи
[Прогараммирование]
Как работает CSS?
[Прогараммирование]
ЛЕКЦИЯ. Язык Pascal
[Прогараммирование]
Статический анализ: ошибки в медиаплеере и безглючная аська
[Устронение ошибок систем]
Устранение неполадок при возникновении (синего экрана) Blue Screen Of Death (BSOD) (2)
[Операционные системы]
Особенности применения технологий Lotus Domino и Notes в современных информационных системах
[Менеджмент]
Факторы микросреды организации
[Прогараммирование]
Разработка ПО с открытыми исходными текстами как особый вид прикладной науки
[Прогараммирование]
ПОДПРОГРАММЫ. ПРОЦЕДУРЫ И ФУНКЦИИ
[Прогараммирование]
Строковый тип данных
[Прогараммирование]
Подпрограммы

Категории
HTML/CSS [21]
jQuery/JS [36]
PHP [4]
Для Ucoz [38]

Популярный софт
Iron Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Iron Virtual DJ
Virtual DJ
Iron SoundForge 11
SoundForge 11
Iron Alcohol 120
Alcohol 120
Iron Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Жми

Copyright MyCorp © 2024Конструктор сайтов - uCoz