167 Сегодня мы вам покажем, как сделать виджет «Кто в онлайн» на PHP, MySQL & Jquery. Он будет показывать количество посетителей онлайн на вашем сайте, а также благодаря, Hostip's free IP to location API, будет в состоянии обнаружить страны посетителей и отображать их в слайд-панели.
Шаг 1 — XHTML
Как обычно, мы начнем с XHTML. Код, приведенный здесь, возможно, не так уж красив и компактен, но работоспособен и нагляден, а этого достаточно, чтобы показать его работу, которая была проделана за выходные. Виджет имеет выдвижную панель с Geo данными посетителей.
demo.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="onlineWidget"> <div class="panel"> <!-- Работает совместно с 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> |
Как вы можете видеть из разметки, расположенной выше, основным контейнером является — «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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
.onlineWidget,.panel{ /* Стили для виджета и панели */ background-color:#F9F9F9; border:2px solid #FFFFFF; height:25px; padding:4px 8px; position:relative; width:130px; cursor:pointer; /* CSS3 правила для скругленных углов, блоков и теней: */ -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{ /* Изменение изображения для зеленой стрелки при наведении: */ background-position:bottom center; } .count{ /* Общее количество посетителей онлайн */ color:#777777; float:left; font-size:26px; font-weight:bold; margin-top:-3px; text-align:center; width:30px; } .label{ /* Лейбл онлайн */ float:left; font-size:10px; padding:7px 0 0 7px; text-transform:uppercase; } |
Из кода видно, что мы указываем стили и для виджета и для выдвижной панели. Это сделано для того, чтобы в дальнейшем их можно было править. Некоторые правила для панели являются уникальными, поэтому мы специально включаем еще один набор правил, во второй части кода.
Мы также определим стили блоков при наведении курсора мыши, лейбла и количества посетителей.
who-is-online/styles.css – Часть 2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
.arrow{ /* Зеленая стрелка справа */ background:url(img/arrow.png) no-repeat top center; position:absolute; right:6px; width:25px; height:25px; } .panel{ /* Выдвижная панель */ position:absolute; cursor:default; bottom:50px; left:0; height:auto; display:none; margin:-2px; z-index:1000; } .preloader{ /* Изображение загрузки */ display:block; margin:10px auto; } .geoRow{ /* Div который включает каждую страну */ 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; } |
Во второй части файла, мы пишем стиль для Geo данных, которые находятся в слайд-панели, после ответа от jQuery. Переходим к следующему шагу.
Перейти ко второй части
Перевод статьи с tutorialzine.com
PS. Как птица без крыльев, как рыба без плавников, так и вебмастер без машины, не способен быть мобильным и успешным в нашем современном мире. Если, например Вы собрались приобрести автомобиль, то вам самое время в автомагазин за вашей красавицей. Удачи в выборе)
