ساخت اپیلیکیشن “لایک کنید!”

ساخت اپیلیکیشن “لایک کنید!”

در این آموزش ما به شما نحوه ساخت اپیلیکیشن “لایک”را اموزش می دهیم که شما میتونید از این اپیلیکیشن برای محبوب شدن مطلب یا هر چیز دیگری که در سایت دارید استفاده کنید تا کاربران شما بدانند که هر کدام از مطالب شما چقدر طرفدار دارد.

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

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

i11

i21

اولین جدول مشخصات صفحه را که “لایک کنید!”برای آن فعال است را نگه میدارد و دومی مشخصات IP کسی را که رای داده است نگه میدارد.

خوب در ادامه ما کد های مربوط به HTML را مینویسیم که مثل همیشه ما در آن کتابخانه ها و استایل ها را وارد می کنیم.

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>

همانطور که در بالا مشاهده می کنید ما دوتا استایل وارد کردیم یکی برای صفحه(styles.css) و دیگری برای دکمه لایک(appreciate.css)

i3(1)

 

PHP

از کدهای PHP برای دستکاری در دیتابیس، البته با دستور های AJAX در پشت صحنه استفاده می کنیم.بیشتر کدهای اسکریپت در داخل فایل script.php قرار دارند که شما در زیر مشاهده می کنید البته اجازه دهید اول به connect.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");

واما کد  script.php

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			= ۰;
$appreciated	= ۰;
$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 را دستکاری می کند،read only request  و write requests 

​همانطور که در قطعه کد بالا مشاهده می کنید ،یکی از کارهایی که اسکریپت انجام می دهد محاسبه  MD5 hash صفحه می باشد،این به عنوان یک کلید منحصر به فرد در دیتابیس استفاده می شود.

در آخر کد ما ارایه  jsonArray$ ​را با استفاده از تابع پی اچ پی ( json_encode) به یک شی معتبر JSON تبدیل می کنیم و خروجی زیر را مشاهده می کنیم.

i3-1

 

jQuery

در داخل دایرکتوری  appreciateMe شما میتونید فایل  plugin.js  را پیدا کنید.شما باید آن را در داخل صفحه ای که میخواهید دکمه لایک مشاهده شود،وارد می کنید.آن  از AJAX استفاده میکند تا اطلاعات را از بخش مدیریت PHPدرخواست کند و هنگامی که پاسخ را دریافت کرد دکمه لایک را ایجاد کند.

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.
    });

});

 

CSS

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

styles.css

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

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

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;
}

پایان

 

+2
0


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

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

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

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

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

*


× 6 = پنجاه چهار

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>