Виджет «Кто в онлайн» на PHP, MySQL & jQuery

Виджет “Кто в онлайн” на PHP, MySQL & jQuery. Часть 1

Сегодня мы вам покажем, как сделать виджет «Кто в онлайн» на PHP, MySQL & Jquery. Он будет показывать количество посетителей онлайн на вашем сайте, а также благодаря, Hostip's free IP to location API, будет в состоянии обнаружить страны посетителей и отображать их в слайд-панели.

Шаг 1 — XHTML

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

demo.html

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

Панель динамически заполняется странами посетителей онлайн с помощью AJAX. По умолчанию, содержимым Div является gif рисунок вращающегося прелоадера, который заполняется геоданными после AJAX запроса (как правило, меньше секунды). Мы вернемся к этому чуть позже.

Шаг 2 — база данных

Сейчас мы рассмотрим структуру базы данных, так как она имеет основополагающее значение для остальной части скрипта. Все данные виджета хранятся в таблице tz_who_is_online. Она состоит из шести полей (или столбцов). Первый — идентификатор ID, стандартный первичный ключ с автоинкрементом. После идет поле IP, в котором хранится IP-адрес посетителя (в пересчете на целые числа (использовали функцию PHP ip2long).

Дальше идут три полях, заполняющиеся через API Hostip's — Country (страна), CountryCode (код страны) и City (город). На данном этапе в виджете не используется поле city, но это хороший вариант на случай возможной будущей реализации. Последним является поле DT (метка времени), которая обновляется при каждой загрузке страницы и позволяет нам отследить, кто на сайте (пользователи, без загрузки страниц за последние 10 минут, вероятно, покинули сайт).

Шаг 3 — CSS

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

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

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

Мы также определим стили блоков при наведении курсора мыши, лейбла и количества посетителей.

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

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

Перейти ко второй части

Перевод статьи с tutorialzine.com

PS. Как птица без крыльев, как рыба без плавников, так и вебмастер без машины, не способен быть мобильным и успешным в нашем современном мире. Если, например Вы собрались приобрести автомобиль, то вам самое время в автомагазин за вашей красавицей. Удачи в выборе)


Оставить комментарий