پلاگین نمایش افراد آنلاین

پلاگین نمایش افراد آنلاین

ما امروز در این آموزش قصد داریم تا به شما نحوه ساخت یکویجت رو بدهیم که به شما  افرادی راکه در وبسایت شما آنلاین هستند رو نشان میدهد.

برای مشاهده لینک وارد شود

خوب کار رو با نوشتن کدهای html آغاز میکنیم.کدی که در زیر مشاهده می کنید شاید زیاد به نظر نیاید ولی تمام کارهای که برای مدیریت ویجت به نیاز خواهیم داشت در داخل آن قرار دارد.از ویژگی های بارز این ویجت،دارا بودن یک لیست کشویی است که موقعیت جغرافیایی کاربران آنلاین را نمایش میدهد.

demo.html

UNITED STATES
۲
UNITED KINGDOM
۱
۸
online

همانطور که شما در بالا مشاهده می کنید،تگ اصلی onlineWidget شامل پنل اسلاید(تگی با کلاس panel)،مجموع افراد آنلاین(کلاس count)،لیبل online و یک مکان نما در سمت راست.

i1

تگ پنل براساس بیشترین بازدید از هر کشور توسط Ajax به صورت داینامیکی  پر میشود.
در زیر ما شمای کلی دیتا بیس را براتون قرار میدهیم که کار هر فیلد عبارتند از:

ID:کلید اصلی برای دستیابی راحتتر است.

IP:آی پی هر کاربر آنلاین را ذخیره می کند.

CountryCode,CITY,COUNTERY:کدکشور وکشور و شهر هر کاربر را ذخیره می کند.(البته ما از شهر در این ویجت استفاده نخواهیم کرد.)

DT:در هر بارگذاری مجدد صفحه به ما تعداد افراد آنلاین را برمیگرداند.

i1

خوب حالا به نوشتن کدهای css میپردازیم.ما کدها رو به دو بخش تقسیم میکنیم تا یادگیری آنها آسان شود.

who-is-online/styles.css – Part 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;
}

همانطور که در بالا مشاهده می کنید ما در بالا اول به نوشتن استایل های مربوط به widget و slide panel پرداختیم.در بخش دوم کد که در زیر به آن میپردازیم ،جزئیات بیشتری به استایل هامون اضافه می کنیم.

who-is-online/styles.css – Part 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;
}

در بخش دوم کد ما به نحوه نمایش اطلاعات در اسلایدپنل پرداختیم که به دلیل سادگی نیازی به توضیح ندارند.

i1

اینجا جایی است که  گشفتی رخ خواهد داد.کاری که PHP انجام خواهد داد حفظ پایگاه داده افراد آنلاین و اتصال IP آنها به موقعیت جغرافیایی کاربران توسط Hostip’s API.خوب به سراغ کدها میرویم.

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;

این کد توسط Jquery برای نمایش افراد آنلاین فعلی،فراخوانی میشود.این اسکریپت IP کاربران را در دیتابیس ذخیره می کند و آن را به کشور مربوطه تبدیل میکند. با استفاده از این روش ما API را همواره در حالت فراخوانی قرار میدهیم(که بسیار هزینه بر است.)  تا کاربرانی که برای اولین بار از وبسایت مشاهده می کنند را نیز شناسایی کنیم.

روش دیگر ذخیره فقط IP کاربران و موقعیت جغرافیایی آنها فقط برای بارگذاری اولیه اسلاید پنل است.این به معنی این است که ما میتوانیم تعداد زیادی IP به طور همزمان ذخیره کنیم .

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 '
    
'.$row['country'].'
'.$row['total'].'
'; }

کاری اصلی که در تکه کد بالا انجام دادیم این است که کشورهایی را که بیشترین بازدید از آنها انجام شده است را به نمایش در آوردیم.

جاوااسکریپت  درخواست های Ajax و اسلایدپنل را مدیریت میکند.اکنون نگاهی به کدهای جاوااسکریپت می کنیم.

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 در منو ممکن است کمی گیج کننده باشد.ولی برای اینکه بین حرکت موس روی مکان نما و بازشده اسلایدپنل کمی تاخیر باشد ما این کار را انجام دادیم.به این ترتیب با رفتن موس روی مکانما  چند لحظه طول میکشد تا لیست باز شود و همچنین پس از کشیدن موس از روی مکانما نیز چند لحظه طول میکشد تا لیست دوباره بسته شود.

پایان

+5
-2


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


× 1 = دو

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>