—»     —»   Виджет, отображающий пользователей он-лайн (PHP, MySQL и jQuery)
  Раздел: Виджеты, Руководства   Нет комментариев  

Виджет, отображающий пользователей он-лайн (PHP, MySQL и jQuery)



Недавно в редакцию одного из веб-сайтов наших друзей пришло интересное письмо, содержание которого было примерно таким:

Мой руководитель частенько заходит ко мне и просит, чтобы я напичкал веб-сайты наших клиентов различными плагинами и виджетами. Отмечу, что чаще всего клиенты просят оснастить их веб-сайт виджетом с отображением пользователей он-лайн. Не могли бы вы подробно рассказать мне о разработке подобного плагина? Кстати, гео-карта с расположением посетителей тоже будет полезна!

Спасибо вам за всё!


Сегодня мы расскажем вам о разработке виджета полезного плагина с отображение посетителей, которые находятся на сайте в текущий момент. Для этого мы воспользуемся возможностями PHP, MySQL и jQuery. Виджет будет отображать число посетителей, которые в данный момент просматривают страницы веб-сайта, а также, благодаря бесплатному АПИ привязки IP к расположению от Hostip, виджет будет определять и отображать страну, из которой посетитель просматривает страницу.

Посмотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.


Этап 1 – XHTML

Как обычно, начнем с XHTML-кода. Представленный здесь код может выглядеть не обязательно так, но здесь мы пытались показать вам, каким он должен быть. Виджет также представляет выдвигающуюся панель с данными о гео-расположении посетителей, которая отображается при наведении курсора мыши.

Demo.html

<div class="onlineWidget">

<div class="panel">

    <!-- Fetched with AJAX: -->

    <div class="geoRow">
    <div class="flag"><img src="who-is-online/img/famfamfam-countryflags/us.gif" width="16" height="11"></div>
    <div class="country" title="UNITED STATES">UNITED STATES</div>
    <div class="people">2</div>
    </div>

    <div class="geoRow">
    <div class="flag"><img src="who-is-online/img/famfamfam-countryflags/uk.gif" width="16" height="11"></div>
    <div class="country" title="UNITED KINGDOM">UNITED KINGDOM</div>
    <div class="people">1</div>
    </div>

</div>

<div class="count">8</div>
<div class="label">online</div>
<div class="arrow"></div>
</div>

Как видно в коде, представленном выше, основной div «onlineWidget» содержит в себе выдвигающуюся панель (div с классовым именем «panel»), общее число посетителей на сайте (div «count»), надпись «online» и зелёную стрелочку справа.

Виджет, отображающий пользователей он-лайн (PHP, MySQL и jQuery)

Div «panel» динамично заполняется посредством AJAX, в нем отображаются страны из которых на данный момент на сайте сидит большее число посетителей. Стандартное наполнение div’а представляет собой вращающееся gif-изображение предварительной загрузки, которое затем заменяется гео-данными, как только AJAX выполнит запрос (обычно это занимает меньше секунды). Мы ещё вернёмся к обсуждению данного вопроса.

Этап 2 – База данных

В отличие от обыденной рутины, здесь мы подробно рассмотрим структуру базы данных, так это основная составляющая скрипта.

Все данные виджета хранятся в таблице tz_who_is_online. Она состоит из шести полей (колонок). Первая – ID, стандартный основной ключ / автоматически заполняемое поле. Далее идёт поле IP, где хранятся ip-адреса посетителей (конвертированные в целое число посредством php-функции ip2long).

Далее идут три поля от АПИ Hostip – Страна, код страны и город. Виджет не использует поле города, но оно не будет лишним, если кто-то вдруг захочет им воспользоваться. Далее (последнее поле) идёт поле даты, наполнение которого обновляется при каждом обновлении страницы, что позволяет нам отслеживать за тем, кто из пользователей он-лайн (пользователи, которые не обновляли страницу около 10 минут, уже, вероятно, покинули веб-сайт).

Виджет, отображающий пользователей он-лайн (PHP, MySQL и jQuery)

Этап 3 – CSS-код

Виджет практически не использует изображений, здесь всё оформлено посредством CSS. Давайте подробнее рассмотрим оформление, прописанное в styles.css. Код поделён на две части, так что в нём будет легче ориентироваться.

who-is-online/styles.css – часть 1

.onlineWidget,.panel{

    /* Styling the widget and the sliding panel at once */

    background-color:#F9F9F9;
    border:2px solid #FFFFFF;
    height:25px;
    padding:4px 8px;
    position:relative;
    width:130px;

    cursor:pointer;

    /* CSS3 rules for rounded corners, box and text shadows: */

    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;

    -moz-box-shadow:0 0 3px #CCCCCC;
    -webkit-box-shadow:0 0 3px #CCCCCC;
    box-shadow:0 0 3px #CCCCCC;

    text-shadow:0 2px 0 white;
}

.onlineWidget:hover{
    background-color:#fcfcfc;
}

.onlineWidget:hover .arrow{
    /* Changing the background image for the green arrow on hover: */
    background-position:bottom center;
}

.count{
    /* The total number of people online div */

    color:#777777;
    float:left;
    font-size:26px;
    font-weight:bold;
    margin-top:-3px;
    text-align:center;
    width:30px;
}

.label{
    /* The online label */

    float:left;
    font-size:10px;
    padding:7px 0 0 7px;
    text-transform:uppercase;
}

В первой части представленного выше кода вы можете увидеть, что мы оформили виджет и выдвигающуюся панель. Это нужно для того, чтобы быть уверенными в том, что у панели и у виджета будет схожий вид, и что их всегда можно будет отличить. Некоторые правила индивидуально применены только лишь к панели, так что мы включим индивидуально-направленный набор правил во вторую часть кода.

Мы определим положение при наведении курсора и отформатируем заголовок, а также div’ы со счётчиками.

who-is-online/styles.css – часть 2

.arrow{
    /* The green arrow on the right */

    background:url(img/arrow.png) no-repeat top center;
    position:absolute;
    right:6px;

    width:25px;
    height:25px;
}

.panel{
    /* The slideout panel */

    position:absolute;
    cursor:default;

    bottom:50px;
    left:0;
    height:auto;
    display:none;
    margin:-2px;
    z-index:1000;
}

.preloader{
    /* The rotating gif preloader image */
    display:block;
    margin:10px auto;
}

.geoRow{
    /* The div that contains each country */

    height:16px;
    overflow:hidden;
    padding:2px 0;
}

.flag{
    float:left;
    margin:0 4px;
}

.country, .people{
    float:left;
    font-size:10px;
    padding:2px;
}

.country{
    width:85px;
    overflow:hidden;
}

.people{
    font-weight:bold;
}

Во второй части файла мы стилизуем отображение данных гео-положения в выдвигающейся панели уже после того, как jQuery внесёт данные в поля. С этим мы можем перейти на следующий этап разработки.

Виджет, отображающий пользователей он-лайн (PHP, MySQL и jQuery)

Этап 4 – PHP

Именно здесь начинается магия. PHP поддерживает базы пользователей в актуальном состоянии, а также извлекает данные о местонахождении ip-адреса из АПИ от Hostip. Далее это записывается в кукисы на пользовательском ПК.

who-is-online/online.php

require "connect.php";
require "functions.php";

// We don't want web bots altering our stats:
if(is_bot()) die();

$stringIp = $_SERVER['REMOTE_ADDR'];
$intIp = ip2long($stringIp);

// Checking wheter the visitor is already marked as being online:
$inDB = mysql_query("SELECT 1 FROM tz_who_is_online WHERE ip=".$intIp);

if(!mysql_num_rows($inDB))
{
    // This user is not in the database, so we must fetch
    // the geoip data and insert it into the online table:

    if($_COOKIE['geoData'])
    {
        // A "geoData" cookie has been previously set by the script, so we will use it

        // Always escape any user input, including cookies:
        list($city,$countryName,$countryAbbrev) = explode('|',mysql_real_escape_string(strip_tags($_COOKIE['geoData'])));
    }
    else
    {
        // Making an API call to Hostip:

        $xml = file_get_contents('http://api.hostip.info/?ip='.$stringIp);

        $city = get_tag('gml:name',$xml);
        $city = $city[1];

        $countryName = get_tag('countryName',$xml);
        $countryName = $countryName[0];

        $countryAbbrev = get_tag('countryAbbrev',$xml);
        $countryAbbrev = $countryAbbrev[0];

        // Setting a cookie with the data, which is set to expire in a month:
        setcookie('geoData',$city.'|'.$countryName.'|'.$countryAbbrev, time()+60*60*24*30,'/');
    }

    $countryName = str_replace('(Unknown Country?)','UNKNOWN',$countryName);

    mysql_query("    INSERT INTO tz_who_is_online (ip,city,country,countrycode)
                    VALUES(".$intIp.",'".$city."','".$countryName."', '".$countryAbbrev."')");
}
else
{
    // If the visitor is already online, just update the dt value of the row:
    mysql_query("UPDATE tz_who_is_online SET dt=NOW() WHERE ip=".$intIp);
}

// Removing entries not updated in the last 10 minutes:
mysql_query("DELETE FROM tz_who_is_online WHERE dt<SUBTIME(NOW(),'0 0:10:0')");

// Counting all the online visitors:
list($totalOnline) = mysql_fetch_array(mysql_query("SELECT COUNT(*) FROM tz_who_is_online"));

// Outputting the number as plain text:
echo $totalOnline;

PHP-скрипт изначально вызывается jQuery в целях размещения div’а с текущим количеством посетителей. За кулисами, тем не менее, скрипт записывает ip-адрес посетителя в базу данных и получает данные об их местонахождении.

Это наилучшая стратегия организации данных, так как мы сохраняем запросы каждого пользователя к АПИ при его первом посещении страниц веб-сайта.

Ещё один метод заключается в том, чтобы хранить только ip-адреса посетителей и создавать очередь отображения гео-положения на панели. Т.е. будет осуществляться приём сразу множества ip-адресов, что не даст скрипту нормально работать и, тем самым, занесёт его в черный лист АПИ. Совсем не круто.

Вы можете составить очередь в АПИ от Hostip, открыв соединения к URL, схожее с таким http://api.hostip.info/?ip=128.128.128.128. В ответ вы получите валидный XML-ответ, который будет содержать все типы данных, включая страну и город, привязанные к ip-адресу, аббревиатуру страны, а также абсолютные координаты. Мы извлекаем эти данные посредством PHP-функции file_get_contents() и вставляем лишь нужные нам типы.

who-is-online/geodata.php

require "connect.php";
require "functions.php";

// We don't want web bots accessing this page:
if(is_bot()) die();

// Selecting the top 15 countries with the most visitors:
$result = mysql_query("    SELECT countryCode,country, COUNT(*) AS total
                        FROM tz_who_is_online
                        GROUP BY countryCode
                        ORDER BY total DESC
                        LIMIT 15");

while($row=mysql_fetch_assoc($result))
{
    echo '
    <div class="geoRow">
        <div class="flag"><img src="who-is-online/img/famfamfam-countryflags/'.strtolower($row['countryCode']).'.gif" width="16" height="11" /></div>
        <div class="country" title="'.htmlspecialchars($row['country']).'">'.$row['country'].'</div>
        <div class="people">'.$row['total'].'</div>
    </div>
    ';
}

Geodata.php извлекается посредством jQuery для наполнения выдвигающейся панели. Файл, в основном, выстраивает очередь из данных, полученных из базы данных, а затем группирует отдельных пользователей по стране и выдаёт результат в уменьшающемся порядке.

Что касается флагов стран, мы используем набор иконок флагов famfamfam. Что ещё классно касательно АПИ Hostip, это то, что код страны возвращается в стандартном формате в две буквы, что можно без труда связать с набором иконок флагов famfamfam. Т.е. нам будет крайне легко найти нужный нам флаг: можно просто запрограммировать прописные символы названия стран и указать расширение GIF.

Этап 5 – jQuery

javascript создаёт AJAX-запрос и выдвигает панель. Это достаточно сложно реализовать посредством чистого кода javascript, и именно по этой причине мы также воспользуемся новейшей версией библиотеки jQuery.

Теперь давайте посмотрим на наш код.

who-is-online/widget.js

$(document).ready(function(){
    // This function is executed once the document is loaded

    // Caching the jQuery selectors:
    var count = $('.onlineWidget .count');
    var panel = $('.onlineWidget .panel');
    var timeout;

    // Loading the number of users online into the count div with the load AJAX method:
    count.load('who-is-online/online.php');

    $('.onlineWidget').hover(
        function(){
            // Setting a custom 'open' event on the sliding panel:

            clearTimeout(timeout);
            timeout = setTimeout(function(){panel.trigger('open');},500);
        },
        function(){
            // Custom 'close' event:

            clearTimeout(timeout);
            timeout = setTimeout(function(){panel.trigger('close');},500);
        }
    );

    var loaded=false;    // A flag which prevents multiple AJAX calls to geodata.php;

    // Binding functions to custom events:

    panel.bind('open',function(){
        panel.slideDown(function(){
            if(!loaded)
            {
                // Loading the countries and the flags
                // once the sliding panel is shown:

                panel.load('who-is-online/geodata.php');
                loaded=true;
            }
        });
    }).bind('close',function(){
        panel.slideUp();
    });

});

Возможно, вас немного собьёт с толку принцип применения параметра setTimeout в меню. Это нужно для того, чтобы создать небольшой промежуток времени между наведением курсора и выдвижением панели. Таким образом, непреднамеренные движения курсора мыши по виджету не будут открывать его и, более того, панель не закроется сразу после того, как вы уберёте курсор.

На этом наш виджет готов!

Настройка демо

На данном этапе вы, возможно, захотите внедрить виджет в собственный веб-сайт. Для того, чтобы он работал, вам нужно будет выполнить SQL-код, который вы можете найти в table.sql в архиве. Это создаст новую таблицу под названием tz_who_is_online в вашей базе данных. Она используется виджетом. Позже вам понадобится загрузить файлы на ваши сервер и включить widget.js в раздел head в коде вашей страницы (а также библиотеку jQuery). После этого вы заполните поля авторизации в базе данных mysql в файле connect.php и добавите разметку из файла demo.html на вашу страницу. Готово!

Заключение

Каждый веб-мастер мечтает иметь постоянный доступ к актуальной статистике посетителей собственного веб-сайта. Инструменты типа Google Analytics дают отличную информацию, но для их настройки и использования нужно время, поэтому можно использовать простенький виджет, который однажды был разработан и будет работать всегда!

Как бы вы модифицировали данный код? Поделитесь собственными мыслями и разработками в комментариях!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: PHP, MySQL, jQuery, визуализация
Опубликовал Mysterious Master   Прочитано (раз): 8828   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код




















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Январь 2017    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031