یک طراح وب http://aliha.ir آدم ها را نمی توان فقط به یک یا چند موضوع ِ خاص، محدود ساخت. آدمی که این پشت نشسته است، از هر موضوعی می نویسد! Mon, 08 Mar 2010 06:07:47 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 بیایید کمی سربه‌سر دزدهای پوسته بگذاریم – یک کُد کوچولو! http://aliha.ir/2010/02/21/css-file-protection/ http://aliha.ir/2010/02/21/css-file-protection/#comments Sun, 21 Feb 2010 16:14:55 +0000 علیها http://aliha.ir/?p=1351 ساعت‌ها وقت می‌گذاریم برای نوشتن دستورات ِ سی‌اس‌اس ِ پوسته‌مان. مسلماً دوست نداریم یک نفر بیاید در عرض چند ثانیه کدهای‌مان را کش برود. حالا ما می‌خواهیم یک کاری بکنیم که وقتی آقای دزد، پرونده‌ی سی‌اس‌اس را در مرورگرش باز کرد، به‌جای کدها، مثلاً یک شکلک عین بُز لبخند بزند برایش :)

برای این‌کار از پی‌اچ‌پی و اچ‌تی‌اکسس استفاده می‌کنیم.

فرض می‌کنیم یک صفحه‌ای داریم به‌نام index.php؛ کدهای اچ‌تی‌ام‌ال زیر را هم در آن داریم:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
سلام جهان!
</body>
</html>

حالا کد پی‌اچ‌پی زیر را به بالای index.php اضافه می‌کنیم، یعنی قبل از شروع شدن <html> باید قرار بگیرد:

<?php
session_start();
$_SESSION["csskey"] = "user";
?>

با این‌کار برای کاربر در هنگام ورود یک سشن با نام csskey که برابر با user است، ست کردیم.

سپس یک فایل با نام style.php می سازیم و تکه‌کد پی‌اچ‌پی زیر را در ابتدای آن قرار می‌دهیم و بعد از آن، دستورات سی‌اس‌اس‌مان را اضافه می‌کنیم:

<?php
session_start();
header("Content-type: text/css");
if ($_SESSION["csskey"] != "user") {die(":-)");}

$_SESSION["csskey"] = "somethingelse";
?>

body {background-color: #000; color: #fff; direction: rtl;}

فکر کنم متوجه شده باشید که چه اتفاقی قرار است بی‌اُفتد. Content-type را از نوع text/css می‌گذاریم تا مرورگر آن را به‌عنوان یک فایل سی‌اس‌اس تفسیر کند.
سپس می‌گوییم اگر csskey برابر با user نبود، دستورات سی‌اس‌اس را بارگذاری نکن و در خروجی «:-)» را چاپ کن.
اما اگر csskey برابر با user بود، آن‌وقت دوباره csskey را برابر با somethingelse می‌کنیم و در خروجی دستورات سی‌اس‌اس را برمی‌گردانیم.

و در آخر فقط کافی است دو خط زیر را به فایل .htaccess اضافه کنیم:

RewriteEngine on
RewriteRule style.css style.php

درواقع ما عملاً هیچ فایلی به‌نام style.css نداریم و با کمک اچ‌تی‌اکسس style.php را تبدیل به style.css می‌کنیم.

شاید تنها ایرادی که این روش داشته باشد این است که برای هربار بارگذاری شدن سایت، باید تعدادی دستور پی‌اچ‌پی اجرا و کامپایل شود و این برای سایت‌هایی که بازدید بالا دارند اصلاً خوب نیست چرا که فشار زیادی به سرور وارد می‌شود و مورد دیگر اینکه حتی با استفاده از این روش نیز دستورات سی‌اس‌اس‌مان همچنان با فایرباگ قابل روئیت می‌باشند!

این روش را ایشان ارائه کرده‌اند.

]]> http://aliha.ir/2010/02/21/css-file-protection/feed/ 29 افکت نقطه‌نقطه برای تصاویر با سی‌اس‌اس http://aliha.ir/2010/01/07/dotdot-effect-for-images-with-css/ http://aliha.ir/2010/01/07/dotdot-effect-for-images-with-css/#comments Thu, 07 Jan 2010 11:27:25 +0000 علیها http://aliha.ir/?p=1330 با یک‌خط کد ِ سی‌اس‌اس می‌خواهیم یک افکت ِ جالب برای تصاویری که در صفحات وب قرار می دهیم درست کنیم. مراحل ِ کار بسیار ساده هست.

ابتدا در پرونده‌ی اچ‌تی‌ام‌ال‌مان یک همچین‌چیزی می‌نویسیم:

<div id="content">
<div id="dot-effect"></div>
<img src="img.jpg" />
</div>

سپس فتوشاپ‌مان را آتیش می‌کنیم و یک سند جدید با طول و عرض مثلا 3 پیکسل ایجاد می‌کنیم و دقیقا در وسط ِ آن یک نقطه‌ی ریز با طول و عرض 1 پیکسل و رنگ ِ مشکی قرار می‌دهیم. به‌تر هست که شفافیت نقطه را تا حدودی کم کنیم. مثلا روی 60 درصد بگذاریم! البته این نقطه را من قبلا درست کرده‌ام و در فایلی که دریافت می‌کنید، موجود است، و می‌توانید از همان استفاده کنید.
خب، حالا این نقطه‌ای که طراحی کرده‌ایم را با پسوند ِ پی‌ان‌جی (png) ذخیره می‌کنیم. یادتان هم باشد که این نقطه نباید زمینه داشته باشد، یعنی Transparent باشد.

حالا نوبت به دستورات ِ سی‌اس‌اس می‌رسد:

#dot-effect {background: transparent url(dot.png) repeat; position: absolute; width: 500px; height: 374px;}

نقطه‌ای که درست کرده بودیم را در زمینه‌ی dot-effect قرار می‌دهیم. پوزیشنش را هم ابسُلوت می‌کنیم تا مستقل از عناصر ِ دیگر ِ صفحه شود و بی‌آید روی تصویر. طول و عرضش را هم برابر با طول و عرض ِ تصویرمان می‌کنیم.

تمام شد. به همین راحتی یک جلوه‌ی زیبا برای تصاویرمان درست کردیم. از این افکت به‌نظرم به‌تر هست که در نمایش‌های اسلایدی یا چیزهایی شبیه آن استفاده شود. مثلا همان نمایش اسلایدی‌ای که چند وقت پیش یاد گرفتیم. این افکت را به آن اضافه کنید و نتیجه را ببینید که چقدر جالب می‌شود :)

نمونه‌ی این افکت را این‌جا ببینید و آن را از زیر دریافت کنید:

]]> http://aliha.ir/2010/01/07/dotdot-effect-for-images-with-css/feed/ 10 سه نرام‌افزار رایگانی که در هنگام از دست دادن اطلاعات، به کمک‌تان می‌آیند! http://aliha.ir/2009/12/13/3-free-data-recovery-software/ http://aliha.ir/2009/12/13/3-free-data-recovery-software/#comments Sun, 13 Dec 2009 15:54:37 +0000 علیها http://aliha.ir/?p=1310 یکی از تلخ‌ترین حوادثی که ممکن است برای اطلاعاتی که مدت‌ها برای جمع‌آوری‌شان زحمت کشیده‌ایم پیش بی‌آید، این است که به هر دلیلی آن‌ها را از دست بدهیم. مثلا هنگام پارتیشن‌بندی هارد یا نصب یک سیستم‌عامل، اشتباها بخشی از این اطلاعات و یا همه‌ی آن از بین برود. عکس‌ها، ویدئوها، آهنگ‌ها، پروژه‌ها و خیلی اطلاعات ِ حیاتی دیگر…

data-recovery

خب، بعید می‌دانم که ندانید نرم‌افزارهایی برای بازگردانی یا به اصطلاح ریکاوری فایل‌ها و اطلاعات وجود دارند و معمولا حتی در بدترین حالت هم می‌توانند درصد ِ قابل‌توجهی از اطلاعات ِ پاک‌شده را برگردانند.

در این پست سه‌تا از قدرتمندترین ِ آن‌ها را بررسی می‌کنیم که البته یک تفاوت بزرگ هم با سایر برنامه‌های مشابه ِ خود دارند و آن این است که رایگان هستند.
به‌تر هست از مقدمه‌چینی بگذریم و برویم سراغ اولین برنامه…

Recuva

ریکووا یکی از به‌ترین‌هاست. محیط ساده و کاربرپسند ِ آن باعث می‌شود خیلی سریع کار با آن را یاد بگیرید و شروع به بازگردانی اطلاعات ِ ازدست‌رفته بکنید. در همان ابتدا می‌توانید نوع ِ فایل‌ها اعم از عکس یا ویدئو یا موزیک و یا موارد دیگر را مشخص کنید. سپس مسیر ِ تقریبی و یا دقیق ِ فایل‌های پاک‌شده را به‌ش بدهید. و اینکه هرگونه فایلی را می‌تواند برای‌تان برگرداند. ضمنا وقتی آن را تست می‌کردم، متوجه‌ی بالاتر بودن ِ سرعت ِ آن به نسبت ِ دیگر برنامه‌ها هم شدم و خب این خیلی خوب است.

Undelete Plus

این برنامه نیز بسیار کارآمد و قدرتمند است. یک ویژگی خیلی خوب دارد و آن ایجاد ِ فیـلتـر برای دقیق‌تر شدن ِ جستجو در بین ِ اطلاعات ِ پاک شده است. مثلا می‌خواهید از بین اطلاعات ِ پاک‌شده، فقط فایل‌های مهم‌تان را بازیابی کنید که در این‌صورت، اطلاعاتی مانند ِ بخشی از نام ِ فایل‌های پاک‌شده، تاریخ ِ ایجاد و حجم تقریبی ِ آن‌ها و از این قبیل مشخصات را در فیـلتـر ِ آن تعیین می‌کنید تا خیلی زودتر به اطلاعات ِ موردنظر برسید. قابل نصب بر روی تمامی نسخه‌های ویندوز و سازگار با سیستم‌های فایل ِ ویندوزی.

Restoration

ری‌استوریشن خیلی ساده است و شاید ظاهر چندان جالبی نداشته باشد و یا بعضی از امکانات ِ پیشرفته‌ی دو برنامه‌ی بالا را دارا نباشد، اما در نوع خودش یک برنامه‌ی عالی‌ای هست و اگر خدای‌نکرده یک روزی اطلاعات‌تان را از دست دادید، می‌توانید روی ری‌استوریشن حساب کنید. بر روی همه‌ی نسخه‌های ویندوز هم نصب می‌شود.

هر سه برنامه‌ی معرفی‌شده ویژگی‌های خاص ِ خود را دارند و هرگز نمی‌توان به طور قطعی گفت که کدام به‌تر است. از من می‌شنوید، هر سه عالی هستند و هرکدام برای شرایطی خاص، می‌توانند مفید باشند. با این‌حال دیدم که بد نیست یک نظرسنجی هم در این رابطه داشته باشیم :)

Note: There is a poll embedded within this post, please visit the site to participate in this post's poll.
]]> http://aliha.ir/2009/12/13/3-free-data-recovery-software/feed/ 14 هک سی‌اس‌اس – دستورات اختصاصی برای مرورگر اُپرا http://aliha.ir/2009/12/05/css-hack-for-opera-browser/ http://aliha.ir/2009/12/05/css-hack-for-opera-browser/#comments Sat, 05 Dec 2009 13:55:57 +0000 علیها http://aliha.ir/?p=1304 فکر می‌کنم با دستورات اختصاصی مرورگرها آشنا باشید. زمانی از این دستورات اختصاصی استفاده می‌کنیم که بخواهیم بعضی از دستورات ِ سی‌اس‌اس‌مان، در مرورگری خاص، متفاوت باشد.

css-hack-for-opera

فرض کنید یک کادر در صفحه داریم که اندازه‌ی ارتفاعش در فایرفاکس دقیقا همانی هست که در سی‌اس‌اس تعیین کرده‌ایم، اما در اینترنت‌اکسپلورر 6 کمی ارتفاع بیشتر است. در این‌جا از دستورات اختصاصی اینترنت‌اکسپلورر استفاده می‌کنیم و در آن، اندازه‌ی ارتفاع ِ کادر ِ موردنظر را کمتر می‌کنیم تا متناسب شود و این فقط شامل اینترنت‌اکسپلورر (6) خواهد بود و فایرفاکس و دیگر مرورگرها، هم‌چنان از همان مقدار اولیه برای ارتفاع تبعیت می‌کنند.

خب، برگردیم سر ِ بحث ِ اصلی‌مان. برای اُپرا در حالت عادی، دستور اختصاصی وجود ندارد و باید از راه‌هایی که اصولا توصیه نمی‌شود، استفاده کرد. اما هک ِ زیر به ما در این مورد کمک بزرگی می‌کند و می‌‌توانیم خیلی راحت در بین دستورات سی‌اس‌اس، دستورات اختصاصی برای اُپرا بنویسیم:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{

your css codes here..

}

یک مثال هم می‌زنم که کاملا متوجه‌ی ماجرا بشوید. به فرض، می‌خواهیم یک متن که در تگ P قرار دارد را در اُپرا با رنگ سبز نشان دهیم و در مرورگرهای دیگر با رنگ مشکی دیده شود. به این صورت عمل می‌کنیم:

p {
color: #000;
}

کد بالا، متن‌مان را مشکی می‌کند و کاری با نوع مرورگر ندارد.

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{

p {
color: #45c705;
}

}

واضح هست؟ با کد بالا گفتیم که متن موردنظر در اُپرا سبز باشد. همین :)

]]> http://aliha.ir/2009/12/05/css-hack-for-opera-browser/feed/ 3 ساخت ِ یک نمایش اسلایدی ساده به‌وسیله‌ی جی‌کوئری http://aliha.ir/2009/10/28/a-simple-jquery-slideshow/ http://aliha.ir/2009/10/28/a-simple-jquery-slideshow/#comments Wed, 28 Oct 2009 16:38:20 +0000 علیها http://aliha.ir/?p=1297 نمایش اسلایدی یا همان SlideShow، برای نمایش تصاویر، به‌صورت متحرک و پشت ِ سرهم به‌کار می‌رود. احتمالا نمونه‌هایی‌ از نمایش اسلایدی را در سایت‌های مختلف مشاهده کرده‌اید.

به روش‌های مختلف می‌شود نمایش اسلایدی ساخت، اما جی‌کوئری کارمان را در این مورد بسیار آسان و حجم کدمان را مقادیری کم‌تر کرده است. در ادامه، روش ِ ایجاد ِ نمایش اسلایدی‌ای که ایشان ساخته‌اند را باهم مرور می‌کنیم ببینیم چه می‌شود :)

jquery slideshow

لازم هم نیست که بگویم کتاب‌خانه‌ی جی‌کوئری را ابتدا از این‌جا بگیرید و اگر نشد، می‌توانید آن را از این‌جا بگیرید؟

کدهای اچ‌تی‌ام‌ال ِ زیر را می‌نویسم:

<div id="slideshow">
    <img src="01.jpg" alt="Slideshow Image 1" class="active" />
    <img src="02.jpg" alt="Slideshow Image 2" />
    <img src="03.jpg" alt="Slideshow Image 2" />
</div>

نکته: حتما باید کلاس ِ اولین تصویر، active باشد.

دستورات ِ سی‌اس‌اس ِ زیر را هم اضافه می‌کنیم و آن را خوب هَم می‌زنیم :دی

#slideshow {
    position:relative;
    height:350px;
}
#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}
#slideshow IMG.active {
    z-index:10;
}
#slideshow IMG.last-active {
    z-index:9;
}

خب، حالا یک فانکشن با نام ِ slideswitch تعریف می‌کنیم و کدهای مربوط به افکت ِ نمایش اسلایدی‌مان را در آن می‌نویسیم:

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

مدت‌زمان توقف هرعکس بسته به مقداری‌ست که به setInterval() می‌دهید (خط 19). الان روی 5000 یعنی 5 ثانیه می‌باشد که باتوجه به نیاز خود می‌توانید آن را تغییر دهید.

حالا بفرمایید این‌جا و نتیجه را مشاهده کنید و این نمونه را کامل دریافت کنید:

download-zips

]]> http://aliha.ir/2009/10/28/a-simple-jquery-slideshow/feed/ 17 با کمک جی‌کوئری، یک شمارنده برای افتتاح سایت‌تان طراحی کنید http://aliha.ir/2009/10/08/coming-soon-page-with-jquery/ http://aliha.ir/2009/10/08/coming-soon-page-with-jquery/#comments Thu, 08 Oct 2009 15:55:38 +0000 علیها http://aliha.ir/?p=1256 از من می‌پرسید به نظرم به‌تر هست همیشه برای کارهای‌تان ارزش قائل شوید. چون اولین گام ِ موفقیت، اهمیت دادن به آن کار است. پس چه به‌تر که از همان آغاز، یک شروع ِ جالب داشته باشیم.

بگذریم. می‌خواهیم یک چیز ِ کوچولو درست کنیم که تا زمان ِ آغاز به‌کار ِ سایت یا وبلاگ و یا هرچیز ِ دیگری که هست، تعداد روزها و ساعات ِ باقی‌مانده را برای بازدیدکننده‌گان بشمارد. مثلا بگوید “به‌زودی تا 5 روز و 8 ساعت و 27 دقیقه و 40 ثانیه‌ی دیگر سایت افتتاح خواهد شد” یا یک همچین‌چیزی :)

coming-soon

کار ِ سختی نیست. اول، کتاب‌خانه‌ی جی‌کوئری را از اینجا بگیرید (اگر اجازه نداد، از اینجا بگیرید).

سپس این اسکریپت را دریافت کنید.

یک فایل با نام index.html بسازید و کدهای زیر را در آن بگذارید:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>به‌زودی...</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="countdown.js"></script>
</head>
<body>
<center><div id="count_down_container"></div></center>
<script type="text/javascript">
var currentyear=new Date().getFullYear()
var target_date=new cdtime("count_down_container", "december 31, "+currentyear+" 18:0:00")
target_date.displaycountdown("days", displayCountDown)
</script>
</body>
</html>

در خط ِ 12، تاریخ ِ مربوط به پایان ِ شمارنده را باید تعیین کنید. مثلا من آن را روی آخرین روز ِ سال گذاشته‌ام. یعنی 31اُم دسامبر و همچنین هجده ساعت هم به آن اضافه کرده‌ام.

حالا دستورات ِ سی‌اس‌اس ِ زیر را هم اضافه کنید:

body {background-color: #ddeef6;}
#count_down_container {color: #e43c01; font: bold 150px Georgia; direction: rtl;}
sup {font: bold 13px Tahoma; color: #666; margin-left: 60px;}

در انتخاب‌گر ِ count_down_container، دستورات مربوط به فونت و ظاهر ِ اعداد ِ شمارنده را تعریف می‌کنیم.

خب، تمام شد دیگر. نمونه‌ی این شمارنده را اینجا ببینید و آن را کامل دریافت کنید:

download-zips

]]> http://aliha.ir/2009/10/08/coming-soon-page-with-jquery/feed/ 24 راهی آسان برای واردکردن خودکار خوراک‌ها به وبلاگ وردپرسی‌تان http://aliha.ir/2009/10/03/a-simple-way-to-syndicate-feeds-to-your-wordpress-blog/ http://aliha.ir/2009/10/03/a-simple-way-to-syndicate-feeds-to-your-wordpress-blog/#comments Sat, 03 Oct 2009 12:40:07 +0000 علیها http://aliha.ir/?p=1237 شاید تا الان فکر می‌کردید که پیاده‌سازی ِ یک همچین‌چیزی کمی دشوار است. این که خوراک ِ یک سایتی به‌صورت ِ خودکار، هرزمان که به‌روز شد، به‌شکل ِ یک پست در وبلاگ ِ شما هم منتشر شود. به‌عنوان مثال، هر توییتی که می‌فرستید، یک نسخه‌اش هم به‌صورت ِ یک پست، در وبلاگ‌تان انتشار یابد.

feedwordpress

برای خودم یک‌بار احتیاج ِ زیادی ایجاد شد برای انجام این‌کار و بعد از مدتی جستجو، پلاگینی فوق‌العاده با اسم ِ FeedWordPress برایش پیدا کردم که تقریبا نیازی در این زمینه برای‌مان باقی نمی‌گذاشت.

نصب پلاگین (+)

  • 1. دریافت پلاگین و استخراج فایل‌های آن از حالت زیپ‌شده و آپلود ِ آن‌ها در مسیر پلاگین‌های وردپرس (wp-content/plugins).
  • 2. آپگرید کردن ِ فایل‌های rss.php و rss-function.php در شاخه ی wp-includes. برای این‌کار، فایل‌های rss.php و rss-function.php که در پوشه‌ی MagpieRSS-upgrade به‌همراه پلاگین موجودند، را در پوشه‌ی wp-includes کپی کنید تا جای‌گزین فایل‌های قبلی شوند. “این مورد اختیاری می‌باشد، اما ممکن است با انجام ندادن‌اش، برخی امکانات را از دست بدهید.”
  • 3. وارد داشبورد ِ وردپرس ِ خود شوید و پلاگین را فعال‌سازی کنید.

استفاده

feedwordpress-add-newپس از نصب، یک قسمت با نام Syndication در ستون کناری ِ داشبورد‌تان اضافه می‌شود. روی Syndication کلیک کنید و از قسمت ِ Add new source، آدرس ِ خوراک ِ موردنظرتان را وارد کنید و Syndicate را بزنید. در صفحه‌ی بعد، اطلاعاتی درباره‌ی خوراکی که داده‌اید به‌شما نشان داده می‌شود. روی use this feed کلیک کنید تا خوراک ذخیره شود.
حالا هر مطلبی که به این خوراک اضافه شود، در وبلاگ ِ شما هم منتشر می‌گردد.

می‌توانید تنظیمات ِ مختلفی روی آن اعمال کنید. مثلا یک نویسنده‌ی جدید ایجاد کنید و آن را به خوراک ِ اضافه‌شده، نسبت دهید. یا از منتشر‌شدن ِ خودکار  جلوگیری کنید و پس از تایید ِ مطلب، اجازه‌ی انتشار بدهید و خیلی موارد ِ دیگر که کشف ِ آن‌ها را به عهده‌ی خودتان می‌گذارم :)

]]> http://aliha.ir/2009/10/03/a-simple-way-to-syndicate-feeds-to-your-wordpress-blog/feed/ 8 کمی API ِ فرندفید، کمی PHP، یک اپلیکیشن ِ کوچولو موچولو! http://aliha.ir/2009/09/30/a-simple-friendfeed-application-with-api-and-php/ http://aliha.ir/2009/09/30/a-simple-friendfeed-application-with-api-and-php/#comments Wed, 30 Sep 2009 16:11:45 +0000 علیها http://aliha.ir/?p=1229 فرندفید هم مانند خیلی از سرویس‌های وب‌2، مثلا توییتر، API ِ نسبتا کاملی دارد که می‌توان با به‌کارگیری آن، بسیاری از پراسه‌ها مانند ایجاد ِ انتری یا لایک زدن و…، را از راه دور انجام داد. احتمالا fftogo را دیده‌اید. این سایت با کمک ِ همان ای‌پی‌آی ِ فرندفید کار می‌کند.

حالا ما هم می‌خواهیم یک اپلیکیشن ِ ساده برای ارسال ِ پست به فرندفید با پی‌اچ‌پی درست کنیم.

ff-app

پیش‌نیاز

  • یک سرور ِ آپاچی که روی آن پی‌اچ‌پی نصب شده باشد.
  • کلاس ِ ای‌پی‌آی ِ فرندفید برای پی‌اچ‌پی که خود ِ فرندفید آن را ارائه کرده است و می توانید از این‌جا دریافت کنید (اگر نشد، از این‌جا بگیرید).
  • اندکی آشنایی با پی‌اچ‌پی!

شروع

یک فایل با نام index.php بسازید. و کدهای زیر را در آن قرار دهید:

<?php
require_once("friendfeed.php");
$uploaded = false;
$entry = null;
if ($_POST["title"]) {
    $uploaded = true;
    $friendfeed = new FriendFeed($_POST["nickname"], $_POST["remotekey"]);
    $entry = $friendfeed->publish_link($_POST["title"], $_POST["comment"]);
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>FriendFeed</title>
</head>
<body>
<div id="notes">
<?php if ($uploaded) { ?>
<?php if (!$entry) { ?>
<div class="error">اوه! ما نمی‌توانیم پست ِ شما را ارسال کنیم! مطمئنید که نام‌کاربری یا کلید ریموت را درست وارد کرده‌اید؟</div>
<?php } else { ?>
<div class="success"><b>منتشر شد!</b> » <a href="http://friendfeed.com/e/<?= $entry->id ?>">پست ِ خود را در فرندفید ببینید...</a></div>
<?php } ?>
<?php } ?>
</div>
<form action="<?= $_SERVER['PHP_SELF'] ?>" method="post" enctype="multipart/form-data">
<label class="float" for="nickname">نام‌کاربری یا ایمیل ِ فرندفیدی:</label>
<input id="nickname" type="text" size="15" name="nickname"/><br />
<label class="float" for="remotekey">کلید ریموت [<a href="http://friendfeed.com/remotekey" target="_blank">پیدا‌کردن کلید</a>]:</label>
<input id="remotekey" type="password" size="15" name="remotekey"/><br />
<label class="nofloat" for="title-entry">عنوان ِ پست:</label><br />
<input id="title-entry" type="text" name="title"/><br />
<label class="nofloat" for="comment">دیدگاه ِ پست:</label><br />
<input id="comment" type="text" name="comment"/><br />
<input id="submit" type="submit" value="انتشار در فرندفید"/>
</form>
</body>
</html>

فایل ِ friendfeed.php را هم که دریافت کردید، در همان مسیر ِ فایل ِ index.php قرار دهید.

اجرا

حالا index.php را اجرا کنید و نتیجه را ببینید.
نام‌کاربری یا ایمیل ِ خود در فرندفید به هم‌راه کلید ریموت ِ خود را وارد کنید. عنوان ِ پست را بنویسید و در آخر می توانید یک دیدگاه نیز هم‌راه ِ پست ارسال کنید (می‌توانید آن را خالی هم بگذارید). روی انتشار در فرندفید کلیک کنید و تمام :)

نمونه‌ی این اپلیکیشن را این‌جا ببینید. می‌توانید آن را کامل و به همراه استایل دریافت کنید:

download-zips

]]> http://aliha.ir/2009/09/30/a-simple-friendfeed-application-with-api-and-php/feed/ 6 phpanywhere، چیزی فراتر از یک ادیتور آنلاین http://aliha.ir/2009/09/08/phpanywhere/ http://aliha.ir/2009/09/08/phpanywhere/#comments Tue, 08 Sep 2009 14:46:01 +0000 علیها http://aliha.ir/?p=1224 phpanywhere

همیشه به دنبال راهی بودم که بتوانم در هر جا و مکانی به پروژه هایی که روی آن ها کار می کنم به ساده ترین شکل ممکن دسترسی داشته باشم. پروژه هایی که روی یک سرور بارگذاری شده اند و در حالت عادی، نظارت و ویرایش آن ها کمی زمان بر و دشوار است. کاری که من می کنم این هست که مثلا ادیتورم را با اف تی پی به سرور ِ موردنظر وصل می کنم و پروژه هایم را ویرایش می کنم، اما این درحالی است که من به سیستم ِ شخصی ام دسترسی داشته باشم.

فرض کنید به یک مسافرت رفته ام و نوت بوکم را فراموش کرده ام با خودم همراه داشته باشم – البته همچین چیزی محال است و امکان ندارد که من جایی باشم و نوت بوک با من نباشد :) – و مجبورم مثلا از یک کافی نت و یا سیستم ِ یک دوست برای وایرایش پروژه ای استفاده کنم. اولین مشکل اینجاست که احتمالا این کافی نت و یا این دوست ِ عزیز، روی سیستم اش ادیتور ِ جالبی نصب نکرده است و یا اگر هم دارد، من حافظه ام آنقدر قوی نیست که مثلا رمز عبور ِ اف تی پی ِ یک سرور را به یاد داشته باشم و حتما مشکلات دیگری هم وجود خواهد داشت.

بحث ِ اصلی ام دقیقا همین جاست! قرار هست سرویسی به نام phpanywhere به ما برای حل این مشکل کمک کند. همانطور که از اسمش پیداست، این امکان را برای تان فراهم می کند که در هرجایی بتوانید پروژه های تان را ویرایش کنید. یک ادیتور ِ خوب دارد و مهم ترین ویژگی اش این است که می توانید به سرورهایی که روی آن ها پروژه های تان قرار دارد متصل شوید، پروژه های جدید ایجاد کنید و جدا از آن، یک مدیریت قدرتمند روی فایل ها و پوشه های سرورها می توانید داشته باشید. جالب است، نه؟

phpanywhere-2

کار با phpanywhere بسیار آسان است. کافی است از این قسمت در آن ثبت نام کنید و مدیریت پروژه های تان را آغاز کنید. تا آنجایی هم که دیدم، با فارسی هیچگونه مشکلی ندارد و از قسمت تنظیماتش می توانید یونیکد ِ ادیتور را روی utf-8 بگذارید. من که شخصا از این به بعد مشتری ِ این سرویس خواهم بودم :دی

]]> http://aliha.ir/2009/09/08/phpanywhere/feed/ 20 یک اپلیکیشن ساده و کاربردی با کمک API ِ توییتر بنویسید http://aliha.ir/2009/08/20/a-simple-application-with-twitters-api/ http://aliha.ir/2009/08/20/a-simple-application-with-twitters-api/#comments Thu, 20 Aug 2009 14:30:41 +0000 علیها http://aliha.ir/?p=1205 با توییتر آشنا هستید. در 140 کاراکتر، آنچه در اکنون دارد رخ می دهد را می نویسید که به اصطلاح می گوییم داریم توییت می کنیم…

API هم احتمالا می دانید چیست. به زبان ساده، چیزی است که بین نرم افزارها ارتباط ایجاد می کند (Application Programming Interface).

حالا بگذریم از این ها. گاهی اوقات ممکن است به هر دلیلی نتوانید از خود سایت توییتر، توییت بکنید. مواردی مثل فـ.یـ.لـ.تـ.ر شدن از مهم ترین آن هاست. یا حتی ممکن است کلاینت های مورد علاقه تان بعضی وقت ها کار نکنند و یا اصلن شاید دلتان می خواهد یک اپلیکیشن ِ شخصی و با سلیقه و نیاز ِ خودتان داشته باشید.

twitter-app

خب، API ِ توییتر که حی و حاضر هست، پی اچ پی هم مثل شیر دارد نگاه مان می کند و سایت ِ گلابی(!) هم یک افزونه پی اچ پی ِ کامل بر اساس API ِ توییتر، برای توییتر ارائه کرده است. می ماند مخلوط کردن ِ این ها با هم که الان قصد همین کار را داریم. چه می کند اوپن سورس :)

از طریق این اپلیکیشنی که می نویسیم، می توانیم با آن توییت کنیم، بدون اینکه مستقیما با سایت توییتر کاری داشته باشیم.

قبل از شروع

  • یک. فرض ِ من بر این است که شما با پی اچ پی تا حدودی آشنا هستید.
  • دو. مهم ترین پیش نیازتان، دراختیار داشتن یک سرور آپاچی هست.
  • سه. نسخه ی پی اچ پی ِ نصب شده بر روی سرورتان باید افزونه ی cURL را پشتیبانی کند. برای چگونگی ِ فعال کردن cURL، اینجا بروید.
  • چهار. افزونه ی Services Twitter را هم باید نصب کرده باشید (در ادامه، توضیحات لازم در رابطه با نصب Services Twitter را خواهم داد). این افزونه را از سایت گلابی دریافت کنید. در این مقاله، من از نسخه ی 0.2.1 (بتا) استفاده کرده ام.
  • پنج. گفتن ندارد این که حتما باید یک حساب هم در توییتر داشته باشید :)

خب، اگر در رابطه با این 5 مورد مشکلی ندارید، می توانیم برویم سراغ مرحله ی بعدی.

نصب Services Twitter

twitter-files-and-folders-directoryپکیج ِ Services Twitter را که دریافت کردید، ابتدا پوشه ی Services را در مسیر اصلی اپلیکیشن کپی کنید.
فایل twitter.php را به twitter-class.php تغییرنام دهید و در مسیر اصلی اپلیکیشن کپی کنید.
وجود یا عدم ِ وجود ِ پوشه ی tests هم مهم نیست. در آن، نمونه های مختلف برای امکانات دیگر وجود دارد که می توانید از آن ها برای توسعه ی این اپلیکیشن استفاده کنید. یعنی چیزی بیشتر از فقط ارسال توییت!

به جز این ها، به پکیج Validate هم نیاز داریم. از اینجا دریافت کنید. پوشه ی docs و فایل validate.php را در مسیر اصلی اپلیکیشن قرار دهید. با مابقی ِ محتویات ِ پکیج ِ Validate هم کاری نداریم.

در آخر باید ساختار ِ فایل ها و پوشه ها چیزی شبیه به تصویر ِ کناری شود.

فراموش نشود: آدرس هایی که در فایل های twitter-class.php، common.php و sample_multiple.php فراخوانی شده اند، به بررسی و ویرایش نیاز دارند.

طراحی محیط اپلیکیشن

حالا باید در مسیر اصلی اپلیکیشن، یک فایل با نام index.php بسازید و با ادیتورتان بازش کنید و کدهای زیر را در آن قرار دهید:

<html>
<head>
<title>توییت توییت...</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
<div id="content">
<h1><a href="/index.php"><img src="logo.png" border="0" alt="توییت توییت..." title="" /></a></h1>

    <?php
    if (!isset($_POST['submit'])) {
    ?>
<form method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
<label>یوز:</label> <br/>
<input class="user" type="text" name="user" /><br/>
<label>پسورد:</label> <br/>
<input class="pass" type="password" name="pass" /><br/>
<label>چی کار می کنی؟</label> <br/>
<textarea class="message" name="status" cols="15"></textarea><br/>
<center><input class="submit" type="submit" name="submit" value="توییت" /></center>
</form>
    <?php
    } else {
      // include class
      include_once 'twitter-class.php';
      try {
        // read form input
        $user = $_POST['user'];
        $pass = $_POST['pass'];
        $status = $_POST['status'];

        // initialize service object
        $service = new Services_Twitter($user, $pass);
        // update status
        $service->statuses->update($status);
        // perform logout
        $service->account->end_session();
        echo 'توییت شد!';
      } catch (Exception $e) {
        die('اوپس: ' . $e->getMessage());
      }
    }
    ?>
<br />
<hr />
<p style="direction: ltr; text-align: left;">created by <a href="http://aliha.ir/" target="_blank">Aliha</a> | <a href="http://twitter.com/alihaa" target="_blank">follow me on twitter</a></p>
</div>
</body>
</html>

در همان مسیر اصلی، یک فایل style.css هم بسازید و دستورات سی اس اس زیر را در آن قرار دهید:

body {
background: #e8fbff url(bg.jpg) no-repeat left top;
color: #666;
}
a {
color: #0CC;
}
#content {
direction: rtl;
font: 12px Tahoma;
margin: 0 auto;
width: 294px;
}
h1 {
font: bold 23px Arial;
color: #0CF;
}
form input.user, form input.pass {
width: 190px;
background-color: #fafafa;
border: 1px solid #ebebeb;
margin: 3px 0 8px 0;
font: 12px Tahoma;
color: #666;
direction: ltr;
}
form input.user:focus, form input.pass:focus {
background-color: #fcffff;
border: 1px solid #41efff;
color: #666;
}
form textarea.message {
width: 250px;
height: 100px;
background-color: #fafafa;
border: 1px solid #ebebeb;
margin: 5px 0 8px 0;
font: 12px Tahoma;
color: #666;
}
form textarea.message:focus {
background-color: #fcffff;
border: 1px solid #41efff;
color: #666;
}
form input.submit {
background-color: #07d7f6;
font: 12px Tahoma;
width: 80px;
height: 25px;
color: #fff;
cursor: pointer;
border: none;
}
form input.submit:hover {
background-color: #43e6fe;
}
form input.submit:focus {
background-color: #ff6d25;
}
label {
color: #666;
}

حالا آدرس ِ اپلیکیشن را در مرورگر وارد می کنیم تا نتیجه را ببینیم.

twitter-app-index

نام کاربری توییتری و رمزعبور را وارد می کنیم و توییت ِ موردنظر را هم می نویسیم و روی توییت کلیک می کنیم:

twitter-app-success

توییت ارسال شده است! حالا می رویم ببینیم اپلیکیشن مان واقعا کار می کند و راست می گوید یا سرکار گذاشته است ما را :)

twitter-twitt-scrshot

این طور که معلوم است، مثل اینکه کار می کند. خب کارمان دیگر تمام شده است.

می توانید این اپلیکیشن را آماده و بی نقص دریافت کنید، یعنی مراحل ِ بالا دیگر فِرت :)
نمونه ی آن را هم اینجا می توانید ببینید.

download-zips

]]> http://aliha.ir/2009/08/20/a-simple-application-with-twitters-api/feed/ 30