Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

PHP → AJAX кнопка - "Спасибо"

AJAX кнопка - "Спасибо"


Демо: смотреть
Скачать: appreciate.zip [116,72 Kb] (cкачиваний: 269)


В интернете есть не так уж много способов, сказать о том что например статья в блоге понравилась пользователям. По крайне мере я знаю 3 примера, это: комментарии, опрос в новости, и рейтинг. Комментарии часто пользователям просто лень оставлять. И для того чтобы определить понравилась ли статья или нет сегодня мы будем создавать кнопочку Спасибо. При нажатии на которую будет считаться сколько пользователей поблагодарили вас за статью. Повторно благодарить нельзя! Кнопка работает на ajax, php, mysql.

Схема базы данных
Мы будем использовать две таблицы. Первая состоит в одной записи для каждой из страниц (статьи), которые оценивают пользователи. Во второй таблице будет, список IP людей, которые проголосовали вместе с уникальным идентификатором страницы. Таким образом, мы можем легко определить, является ли человек ранее благодарившим или нет, и отображать активную или отключеную кнопку.

AJAX кнопка - "Спасибо"

AJAX кнопка - "Спасибо"


Шаг 1 - XHTML

Давайте начнем первой части урок . Разметка страницы очень проста. Чтобы оценить кнопку функционирования, нужно просто обеспечить контейнер, в котором кнопка вставлена, и необязательный элемент, который содержит число кликов.

page.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>An AJAX Click To Appreciate Badge</title>

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

<body>

<div id="countDiv"></div>
<div id="main"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="appreciateMe/plugin.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>

</body>
</html>


Наша страница выглядит примерно так:
AJAX кнопка - "Спасибо"


Шаг 2 - PHP

appreciateMe / connect.php это файл в котором будут прописываться настройки конекта к базе.
$db_host = 'localhost';
$db_user = 'YourUsername';
$db_pass = 'YouPassword';
$db_name = 'NameOfDB';

@$mysqli = new mysqli($db_host, $db_user, $db_pass, $db_name);

if (mysqli_connect_errno()) {
    die('<h1>Could not connect to the database</h1>');
}

$mysqli->set_charset("utf8");


Далее сам скрипт. За него отвечает файл appreciateMe/script.php.
/* Setting the error reporting level */
error_reporting(E_ALL ^ E_NOTICE);
include 'connect.php';

if(!$_GET['url'] || !filter_input(INPUT_GET,'url',FILTER_VALIDATE_URL)){
    exit;
}

$pageID            = 0;
$appreciated    = 0;
$jsonArray        = array();
$hash            = md5($_GET['url']);
$ip                = sprintf('%u',ip2long($_SERVER['REMOTE_ADDR']));

// $result is an object:
$result = $mysqli->query("SELECT id,appreciated FROM appreciate_pages WHERE hash='".$hash."'");

if($result)
{
    list($pageID,$appreciated) = $result->fetch_row();
    // fetch_row() is a method of result
}

// The submit parameter denotes that we need to write to the database

if($_GET['submit'])
{
    if(!$pageID)
    {
        // If the page has not been appreciated yet, insert a new
        // record to the database.

        $mysqli->query("
            INSERT INTO appreciate_pages
            SET
                hash='".$hash."',
                url='".$mysqli->real_escape_string($_GET['url'])."'"
        );

        if($mysqli->affected_rows){

            // The insert_id property contains the value of
            // the primary key. In our case this is also the pageID.

            $pageID = $mysqli->insert_id;
        }
    }

    // Write the vote to the DB, so the user can vote only once

    $mysqli->query("
        INSERT INTO appreciate_votes
        SET
            ip = ".$ip.",
            pageid = ".$pageID
    );

    if($mysqli->affected_rows){
        $mysqli->query("
            UPDATE appreciate_pages
            SET appreciated=appreciated+1 WHERE id=".$pageID
        );

        // Increment the appreciated field
    }

    $jsonArray = array('status'=>1);
}
else
{
    // Only print the stats

    $voted = 0;

    // Has the user voted?
    $res = $mysqli->query("
        SELECT 1 FROM appreciate_votes
        WHERE ip=".$ip." AND pageid=".$pageID
    );

    if($res->num_rows){
        $voted = 1;
    }

    $jsonArray = array('status'=>1,'voted'=>$voted,'appreciated'=>$appreciated);
}

// Telling the browser to interpret the response as JSON:
header('Content-type: application/json');

echo json_encode($jsonArray);


Вот так будет выглядеть кнопка после того как пользователь нажмет на неё.
AJAX кнопка - "Спасибо"


Шаг 3 - JQuery
Далее мы подключаем jawa скрипты для обмена иформации с базой без перезагрузки страницы.

appreciateMe / plugin.js
function(){

    $.appreciateButton = function(options){

        // The options object must contain a URL and a Holder property
        // These are the URL of the Appreciate php script, and the
        // div in which the badge is inserted

        if(!'url' in options || !'holder' in options){
            return false;
        }

        var element = $(options.holder);

        // Forming the url of the current page:

        var currentURL =     window.location.protocol+'//'+
                    window.location.host+window.location.pathname;

        // Issuing a GET request. A rand parameter is passed
        // to prevent the request from being cached in IE

        $.get(options.url,{url:currentURL,rand:Math.random()},function(response){

            // Creating the appreciate button:

            var button = $('<a>',{
                href:'',className:'appreciateBadge',
                html:'Appreciate Me'
            });

            if(!response.voted){
                // If the user has not voted previously,
                // make the button active / clickable.
                button.addClass('active');
            }
            else button.addClass('inactive');

            button.click(function(){
                if(button.hasClass('active')){

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

                    if(options.count){
                        // Incremented the total count
                        $(options.count).html(1 + parseInt(response.appreciated));
                    }

                    // Sending a GET request with a submit parameter.
                    // This will save the appreciation to the MySQL DB.

                    $.getJSON(options.url,{url:currentURL,submit:1});
                }

                return false;
            });

            element.append(button);

            if(options.count){
                $(options.count).html(response.appreciated);
            }
        },'json');

        return element;
    }

})(jQuery);


script.js
$(document).ready(function(){

    // Creating an appreciate button.

    $.appreciateButton({
        url        : 'appreciateMe/script.php',    // URL to the PHP script.
        holder    : '#main',                // The button will be inserted here.
        count    : '#countDiv'            // Optional. Will show the total count.
    });

});


Шаг 4 - CSS
Теперь, когда у нас есть вся разметка, рабочие скрипты осталось только украсить css стилями.

appreciateMe / appreciate.css
.appreciateBadge{
    width:129px;
    height:129px;
    display:block;
    text-indent:-9999px;
    overflow:hidden;
    background:url('sprite.png') no-repeat;
    text-decoration:none;
    border:none;
}

.appreciateBadge.active{
    background-position:left top;
}

.appreciateBadge.active:hover{
    background-position:0 -129px;
}

.appreciateBadge.inactive{
    background-position:left bottom;
    cursor:default;
}


styles.css
#main{
    margin:80px auto;
    width:130px;
}

#countDiv{
    color:#eee;
    font-size:35px;
    margin-right:120px;
    position:absolute;
    right:50%;
    top:265px;
}

Мы закончили нашу разработку. Удачи.

Демо: смотреть
Скачать: appreciate.zip [116,72 Kb] (cкачиваний: 269)
Опубликовал dimas_ua, 30-03-2011, 00:00 Комментариев: 1
 (голосов: 12)
Пишет Влад, 22 апреля 2011 16:06
  • Сообщений: 0
  • Новостей: 0
Большое спасибо)