من دقیقاً با همین قسمت آخر ماجرا کار دارم. این که یک صفحه‌ای داشته باشم و از طریق آن با یک یا چند نفر دیگر به‌صورت زنده گفت‌وگو کنم و ضمناً تایپ‌کردن من را ببینند و من هم تایپ‌کردن آن‌ها را. آماده‌اید؟

مواد لازم پی اچ پی هست و مای اس کیو ال و کتاب‌خانه‌ی جی کوئری.

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

<form action="" id="htForm">
     <textarea name="chatbox" class="chatbox" id="chatbox"></textarea>
</form>

دیتابیس

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

CREATE TABLE IF NOT EXISTS `tbl_chat` (
`id` int(11) NOT NULL auto_increment,
`chat` LONGTEXT CHARACTER SET utf8  NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_general_ci AUTO_INCREMENT=1 ;

INSERT INTO `tbl_chat` (`chat`) VALUES ('type here...');

پی‌اچ‌پی

حالا یک فایل با نام config.php می‌سازم و با آن به دیتابیسی که ساختم، وصل می‌شوم:

<?php
// Mysql Config; enter your host name, database name, database username and password.
define('DB_HOST', 'localhost');
define('DB_NAME', 'database_name');
define('DB_USER', 'database_username');
define('DB_PASSWORD', 'database_password');

// Connecting to database...
$connection = @mysql_connect(DB_HOST, DB_USER, DB_PASSWORD) or die('Database Error!');
@mysql_select_db(DB_NAME,$connection);
?>

یک فایل دیگر می‌سازم برای ارسال متن به دیتابیس. نام این فایل send.php هست:

<?php
@include('config.php');

$chat = $_POST['chatbox'];
$query = "UPDATE tbl_chat SET chat = '$chat' WHERE id = 1";
$do = @mysql_query($query);
?>

و فایلی دیگر با نام recive.php برای گرفتن متن از دیتابیس:

<?php
@include('config.php');

$query = "SELECT * FROM tbl_chat WHERE id = 1";
$do = @mysql_query($query);
$row = @mysql_fetch_array($do);
echo ($row[chat]);
?>

جی‌کوئری

حالا دیگر کارم با پی‌اچ‌پی تمام شده است؛ می‌روم سراغ جی‌کوئری.

با توابع load() و ajax() قبلاً کارهایی کرده‌ایم (این‌جا و این‌جا). این‌بار هم به این دو تابع پرکاربرد نیاز داریم و اصل کارمان را همین دو تابع انجام می‌دهند.

ابتدا باید متنی که در کادر متن نوشته می‌شود را با تابع ajax() بفرستم برای فایل send.php و این فایل هم متن را می‌گیرد و می‌فرستد به دیتابیس. و البته باید به‌خاطر داشته باشید که می‌خواهم هم‌زمان که در حال تایپ‌کردن هستم، شخص مقابل تایپ‌کردن ِ من را مشاهده کند. پس باید تابع ajax() را در یک رویدادی مثل keyup() قرار بدهم تا با هربار فشردن و رهاکردن یک دکمه‌ی کی‌برد، متن‌ها به دیتابیس ارسال شوند. به‌این‌صورت هر حرف جدیدی که تایپ می‌کنم، ذخیره می‌شود و به این ترتیب، تایپ کردن ِ من به‌صورت زنده مشاهده می‌شود.

$(document).ready(function() {
     $('#chatbox').keyup(function () {

     var chatbox = $('#chatbox');
     var data = 'chatbox=' + chatbox.val();

     $.ajax({
          url: 'send.php',
          type: 'POST',
          data: data,
          cache: false,
          success: function(){}
     });
     return false;
     });
});

تا به اینجای کار، فقط متن گفت‌وگو ذخیره می‌شود و هنوز چیزی از دیتابیس لود نشده است تا شخص مقابل مشاهده نماید. همان‌طور که پیش‌تر هم اشاره کردم، از تابع load() برای لود کردن متن از دیتابیس استفاده می‌کنم و خب باید متن گفت‌وگو درهمان کادرمتن لود شود، پس به این صورت عمل می‌کنم:

$(document).ready(function() {
	$('#chatbox').load('receive.php');
});

فایل recive.php را به تابع لود دادم و از این طریق متن گفت‌وگو لود شده و در کادرمتن #chatbox نمایش داده می‌شود.

اما مسئله این است که به این شکل فقط یک‌بار متن‌ها از دیتابیس لود می‌شوند و متن‌های جدید دیگر مشاهده نخواهند شد. راه حل ساده‌ست، من تابع لود را می‌سپارم به دست یک حلقه تا دائماً اجرا شود و متن‌های جدیدتر نیز لود و دیده شوند. بازه‌ی زمانی حلقه را روی ۱۰۰ میلی‌ثانیه می‌گذارم تا هر تغییر کوچکی که در متن‌های گفت‌وگو ایجاد شود خیلی سریع به شخص مقابل نمایش داده شود:

$(function(){
var timer = setInterval(receive_chat, 100);
});
function receive_chat() {
 $(document).ready(function() {
	$('#chatbox').load('receive.php');
 });
}

کار دیگر تمام است و می‌توانم نتیجه را در صفحه‌ی index.php ببینم.

مشکلی که وجود دارد این است که در چنین روش‌هایی با سرور ریکوئست بالایی روبه‌رو هستیم. این یعنی برای اجرا در پروژه‌های بزرگ، به سرورهای قوی نیاز داریم. تصور کنید که در هر ۱۰۰ میلی‌ثانیه یک ریکوئست فرستاده می‌شود و فایل recive.php اجرا می‌شود. جدا از این، با هربار فشردن یک دکمه از کی‌برد، باز یک ریکوئست ارسال می‌شود و فایل send.php اجرا می‌شود.

منابع:
jQuery ajax()
jQuery load()

به دلیل برخی محدودیت‌ها نمی‌توانم نسخه‌ی دمو از این نمونه قرار بدهم اما می‌توانید آن را همین پایین کامل دریافت کنید:

• ای‌جکس‌بازی » حذف رکورد از بانک‌اطلاعاتی با جی‌کوئری
• معرفی ۵ فرم تماس ِ رایگان ِ ای جکس
• آموزش ویدئویی » شروع کار با CodeIgniter
• ای‌جکس‌بازی » بارگذاری محتوای صفحات با جی‌کوئری
• پلاگین Lightbox ِ جی کوئری برای افکت دادن به نمایش تصاویر

چیز‌هایی که لازم داریم پی اچ پی هست و این کلاس mobile dectect که توسط ایشان نوشته شده.

یک پروژه ایجاد می‌کنم و در آن صفحه‌ای دارم با نام index.php که می‌خواهم اگر کسی با موبایل وارد این صفحه شد، با یک پیغام مواجه شود. کد زیر را در فایل index.php می‌نویسم:

    include('Mobile_Detect.php');

    if ($detect->isMobile()) {
        echo 'you are on mobile!';
    }else{
        // the content here...
    }

ابتدا کلاس مربوطه را در ایندکس اینکلود کردم (خط اول) و سپس یک شرط ساده دادم که اگر کاربر محترم با موبایل وارد صفحه شد، پیغام فلان را بده و اگر با موبایل نبود هم محتوای صفحه را نشان بده.

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

همه‌ی پلتفرم‌های موبایل:

if ($detect->isMobile()) {}

Iphone:

if ($detect->isIphone()) {}

Ipod:

if ($detect->isIpod()) {}

Android:

if ($detect->isAndroid()) {}

Blackberry:

if ($detect->isBlackberry()) {}

Opera mini:

if ($detect->isOpera()) {}

Windows Mobile:

if ($detect->isWindows()) {}

Palm:

if ($detect->isPalm()) {}

برای تشخیص پلتفرم‌هایی مانند پی‌اس‌پی، پی‌دی‌ای، پاکت پی‌سی، اسمارت فون و چیزهایی از این قبیل:

if ($detect->isGeneric()) {}

دریافت کلاس mobile detect

• ای‌جکس بازی » به‌یاد هایپرترمینال
• آموزش ویدئویی » شروع کار با CodeIgniter
• رُبات‌های تحت وب درخدمت شما هستند!
• ای‌جکس‌بازی » حذف رکورد از بانک‌اطلاعاتی با جی‌کوئری
• بیایید کمی سربه‌سر دزدهای پوسته بگذاریم – یک کُد کوچولو!

برای ورود به سایت CodeIgniter اینجا کلیک کنید.
می‌توانید این ویدئو را با حجم ۲۵ مگابایت و کیفیت HD 720p دریافت نمایید.

• ای‌جکس‌بازی » حذف رکورد از بانک‌اطلاعاتی با جی‌کوئری
• ای‌جکس بازی » به‌یاد هایپرترمینال
• تشخیص پلتفرم‌های مختلف با پی اچ پی
• رُبات‌های تحت وب درخدمت شما هستند!
• بیایید کمی سربه‌سر دزدهای پوسته بگذاریم – یک کُد کوچولو!

صاحاب: آب حوض رو عوض کن
رُبات: آب حوض عوض شد
صاحاب: پنج کیلو سیب‌زمینی بگیر
رُبات: گرفتم
صاحاب: ناهار بپز
رُبات: پُختم
صاحاب: پیراهنام رو اتو کن
رُبات: اتو کردم
…

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

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

بخش برنامه‌نویسی رُبات، پای خودمان است. البته خبر خوش این هست که با هر زبان سمت سروری می‌شود برای رُبات‌مان برنامه بنویسیم. پی‌اچ‌پی، پرل، پایتون و … .

شروع کار با imified

قبل از هرچیز باید در imified عضو بشوید (از اینجا). بعد از عضویت وارد اکانت خود شوید. در سمت راست صفحه، دکمه‌ی Create a new bot را بزنید.

Bot Name: در این قسمت یک نام برای رُبات‌تان انتخاب کنید.
Screen Name: نامی که در این قسمت وارد می‌کنید نامی است که برای ارتباط با رُبات از طریق مسنجرها، به آن اضافه می‌کنید. یعنی یک همچین چیزی: mybot@bot.im و این را در مسنجر خود اد می‌کنید تا بتوانید با این رُبات ارتباط برقرار کنید.
Bot URL: در این قسمت، باید آدرس فایلی که برنامه‌ی رُبات‌تان در آن نوشته شده است را بدهید. برای مثال اگر با پی‌اچ‌پی برنامه نوشته‌اید و نام فایل برنامه mybot.php هست، باید یک همچین آدرسی وارد کنید: http://yourdomain.com/bots/mybot.php. و گفتن هم ندارد که ما برنامه‌مان را باید روی سروری آپلود کنیم که پی‌اچ‌پی روی‌ش اجرا شود (باتوجه به مثال بالا پی‌اچ‌پی را عرض کردم. با هر زبانی که برنامه را نوشته‌ایم، سرورمان باید بتواند آن زبان را اجرا کند).

بعد از پُر کردن این سه فیلد، روی Create new bot کلیک کنید تا رُبات ساخته شود. این کل ماجرا بود. حالا با هم یک رُبات کوچک درست می‌کنیم؛

ساخت رُبات Hello World با پی‌اچ‌پی

اول مانند بالا یک رُبات جدید ایجاد کنید و بعد یک فایل با نام helloworld.php بسازید و کد زیر را در آن قرار دهید و بعد روی یک سروری که پی‌اچ‌پی را اجرا می‌کند آپلودش کنید (و آدرس این فایل را هم که قبلا در Bot URL رُبات‌تان وارد کرده‌اید):

<?php
switch ($_REQUEST['step']) {
case 1:
echo "Hi, what's your name?";
break;
case 2:
echo "Hi " . $_REQUEST['value1'] . ", where do you live?";
break;
case 3:
echo "Well, welcome to this hello world bot, " . $_REQUEST['value1'] . "<br>from " . $_REQUEST['value2'] . ".<reset>";
break;
}
?>

در ابتدا شما یک پی‌ام در مسنجر به رُبات می‌دهید. مثلا سلام می‌کنید و رُبات در جواب، جمله‌ی ” Hi, what’s your name?” را می‌فرستد (خط ۴). حالا شما اسم‌تان را به رُبات می‌گویید و او هم با تابع $_REQUEST نام شما را می‌گیرد و این جمله را می‌فرستد: “Hi [your name], where do you live?” (خط ۷). باز هم شما در جواب نام جایی که در آن زندگی می‌کنید را می‌دهید و باز رُبات با تابع $_REQUEST اسم مکان زندگی‌تان را می‌گیرد و این جمله را می‌فرستد: “Well, welcome to this hello world bot, [your name] from [your city].” (خط ۱۰). یک تابع هم خود imified دارد که در انتهای خط ۱۱ می‌بینید. <reset>. این تابع باعث می‌شود تا رُبات ریست شود و کارش را دوباره از اول شروع کند.
یک بخش Debugger هم در imified وجود دارد برای خطایابی برنامه‌ای که برای رُبات‌مان نوشتیم و خیلی به‌درد بخور است.

با این رُبات‌ها خیلی کارها می‌شود کرد. کافی است کمی ایده و خلاقیت داشته باشید و بتوانید این ایده را پیاده کنید و رُبات‌هایی با کارایی‌های جالب بسازید. مثلا از طریق API مترجم گوگل، یک رُبات مترجم بسازید. خود من همان چندوقت پیش که با imified آشنا شده بودم یک رُبات ساختم که می‌شود با آن توییت کرد، ایمیل فرستاد و به فرندفید مطلب ارسال کرد. کافی است این را در یک مسنجری اد کنید aliha@bot.im و به‌ش سلام کنید و بعد از اینکه پرسید چه کاری می‌خواهید انجام دهید، تایپ کنید twitt یا email یا friendfeed.

خب دیگر کافی‌ست؛ بروید رُبات بسازید ببینیم چه‌کار می‌کنید :)

• یک اپلیکیشن ساده و کاربردی با کمک API ِ توییتر بنویسید
• ای‌جکس بازی » به‌یاد هایپرترمینال
• تشخیص پلتفرم‌های مختلف با پی اچ پی
• آموزش ویدئویی » شروع کار با CodeIgniter
• ای‌جکس‌بازی » حذف رکورد از بانک‌اطلاعاتی با جی‌کوئری

اتصال به بانک‌اطلاعاتی

برای وصل‌شدن به بانک‌اطلاعاتی، قبل از هرکاری، یک فایل با نام config.php می‌سازیم و آن را با ادیتورمان باز می‌کنیم و کد زیر را در آن می‌نویسیم:

<?php
$db_host = 'localhost';
$db_name = 'your database name';
$db_user = 'your username';
$db_pass = 'your password';
?>

کار خاصی نکردیم، فقط چند متغیر به‌نام‌های db_host، db_name، db_user و db_pass تعریف کردیم که مقادیر آن‌ها را به‌ترتیب، نوع هاست (که اصولا همان localhost می‌باشد)، نام بانک‌اطلاعاتی، نام‌کاربری‌ای که با آن به بانک اطلاعاتی دسترسی پیدا می‌کنیم و در آخر هم رمزعبور را دادیم.

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

حذف رکورد

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

<html>
<head>
<title>حذف رکورد از بانک‌اطلاعاتی با جی‌کوئری</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/delete.js" type="text/javascript"></script>
</head>
<body>
<?php
include("config.php");

$connect = @mysql_connect($db_host, $db_user, $db_pass) or die('Database Connection Error!');
@mysql_select_db($db_name);

$query = "SELECT * FROM my_tbl ORDER BY id DESC";
$result = @mysql_query($query) or die(mysql_error());
while($row = @mysql_fetch_array($result))
{
?>
<div class="record">
<div class="content"><?php echo($row[content]); ?></div>
<div class="date"><?php echo($row[content_date]); ?></div>
<div class="tools"><a class="delete" id="<?php echo($row[id]); ?>" href="#">حذف</a></div>
</div>
<?php
}
mysql_close($connect);
?>
</body>
</html>

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

حالا دیگر فقط دو مرحله پیش ِ رو داریم. اولی نوشتن اسکریپت ِ حذف رکورد با پی‌اچ‌پی و دومی نوشتن کد جی‌کوئری‌ای که درخواست ِ ما (همان حذف رکورد) را بفرستد به اسکریپتی که در مرحله‌ی اول نوشتیم و آن را اجرا کند.

پس اول یک فایل با نام delete.php می‌سازیم و کدهای زیر را در آن می‌نویسیم:

<?php
include("config.php");

$connect = @mysql_connect($db_host, $db_user, $db_pass) or die('Connection Error');
@mysql_select_db($db_name);

$id = $_GET['id'];

$query = "DELETE FROM my_tbl WHERE id = '$id'";
mysql_query($query);

mysql_close($connect);
?>

باز هم در ابتدا فایل کانفیگ را فراخوانی کردیم و بعد از آن هم به بانک‌اطلاعاتی وصل شدیم. در خط هفتم یک متغیر با نام id تعریف کردیم که جلوتر در مورد ماهیتش توضیح می‌دهم. در خط نهم و دهم هم کد مربوط به حذف رکورد را نوشتیم و در پایان اتصال به بانک‌اطلاعاتی را بستیم.

حالا می‌رویم سراغ کد جی‌کوئری‌مان. یک فایل با نام delete.js می‌سازیم و آن را با ادیتورمان باز می‌کنیم. کدهای زیر را در آن می‌نویسیم:

$(function() {
$(".delete").click(function(){
var element = $(this);
var del_id = element.attr("id");
var info = 'id=' + del_id;
 if(confirm("مطمئنید که قصد حذف این رکورد را دارید؟ این غیرقابل‌بازگشت خواهد بود!"))
		  {
 $.ajax({
   type: "GET",
   url: "delete.php",
   data: info,
   success: function(){
   }
 });
	$(this).parents(".record").css({ backgroundColor: "red" }, "fast")
	.animate({ opacity: "hide" }, "slow");
 }

return false;
});
});

اگر دقت کرده باشید، در صفحه‌ای که رکوردهای‌مان نمایش داده می‌شوند یک دکمه‌ای قرار دادیم که کلاس ِ آن delete هست. به همین خاطر در کد بالا، قبل از هرچیز می‌گوییم که وقتی روی دکمه‌ی حذف کلیک شد، آن‌وقت اتفاقاتی که در ادامه می‌گویم، بی‌اُفتند.

اولین‌کاری که باید بکنیم این هست که شناسه‌ی رکوردی که دکمه‌ی حذف ِ آن را زده‌ایم، مشخص شود. برای این‌کار، در صفحه‌ای که رکوردها نمایش داده می‌شوند، در آی‌دی ِ هر رکورد، شناسه‌ی آن را برمی‌گرداندیم. حالا دیگر کارمان راحت شد و در کد بالا می‌بینید که شناسه‌ی رکورد را خیلی راحت در می‌آوریم (خط‌های ۳ تا ۵). یادتان هست که در فایل delete.php، متغیر ِ $id را ایجاد کرده بودیم؟ مقدار آن برابر با شناسه‌ی رکورد که در کد بالا مشخصش می‌کنیم می‌شود. حالا باید یک پیغام به کاربر بدهیم که اگر آن را تایید کند، آن‌وقت عملیات ِ حذف ِ رکورد انجام بشود.

اصل ماجرا این‌جاست. ما از تابع $.ajax() برای ارسال اطلاعات به اسکریپتی که برای حذف رکورد نوشته بودیم استفاده می‌کنیم. مقدار ِ متد ِ url، را برابر با آدرس فایل delete.php قرار می‌دهیم. این تابع یک متدی دارد به‌نام success. کار اصلی این متد این است که وقتی عملیات با موفقیت انجام شد، یک رویدادی انجام گیرد. مثلاً یک پیغام نمایش داده شود و بگوید که رکورد حذف شد یا یک همچین‌چیزی.
یک افکتی هم در آخر درست می‌کنیم که وقتی رکورد حذف شد، از دید‌مان پنهان شود که در خط‌های پانزده و شانزده، کد ِ مربوط به افکت را می‌بینید. ابتدا رنگ‌زمینه‌ی رکورد را قرمز و بعد از آن، مخفی‌اش می‌کنیم. همین!

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

• ای‌جکس بازی » به‌یاد هایپرترمینال
• آموزش ویدئویی » شروع کار با CodeIgniter
• معرفی ۵ فرم تماس ِ رایگان ِ ای جکس
• ای‌جکس‌بازی » بارگذاری محتوای صفحات با جی‌کوئری
• پلاگین Lightbox ِ جی کوئری برای افکت دادن به نمایش تصاویر

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

فرض می‌کنیم یک صفحه‌ای داریم به‌نام 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 می‌کنیم.

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

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

• ای‌جکس بازی » به‌یاد هایپرترمینال
• تشخیص پلتفرم‌های مختلف با پی اچ پی
• آموزش ویدئویی » شروع کار با CodeIgniter
• رُبات‌های تحت وب درخدمت شما هستند!
• ای‌جکس‌بازی » حذف رکورد از بانک‌اطلاعاتی با جی‌کوئری

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

پیش‌نیاز

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

شروع

یک فایل با نام 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 را اجرا کنید و نتیجه را ببینید.
نام‌کاربری یا ایمیل ِ خود در فرندفید به هم‌راه کلید ریموت ِ خود را وارد کنید. عنوان ِ پست را بنویسید و در آخر می توانید یک دیدگاه نیز هم‌راه ِ پست ارسال کنید (می‌توانید آن را خالی هم بگذارید). روی انتشار در فرندفید کلیک کنید و تمام :)

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

• یک اپلیکیشن ساده و کاربردی با کمک API ِ توییتر بنویسید
• رُبات‌های تحت وب درخدمت شما هستند!
• ای‌جکس بازی » به‌یاد هایپرترمینال
• تشخیص پلتفرم‌های مختلف با پی اچ پی
• آموزش ویدئویی » شروع کار با CodeIgniter

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

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

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

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

قبل از شروع

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

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

نصب Services Twitter

پکیج ِ 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;
}

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

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

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

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

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

• کمی API ِ فرندفید، کمی PHP، یک اپلیکیشن ِ کوچولو موچولو!
• رُبات‌های تحت وب درخدمت شما هستند!
• ای‌جکس بازی » به‌یاد هایپرترمینال
• تشخیص پلتفرم‌های مختلف با پی اچ پی
• آموزش ویدئویی » شروع کار با CodeIgniter

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

۱- فرم تماس با استفاده از پی اچ پی و جی کوئری – نمایش نمونه

یک فرم تماس متناسب که با استفاده از PHP و JQuery نوشته شده است. هنگام ارسال، فیلدها را چک می کند و در صورت وجود مشکل، پیغام خطای مربوط به آن را نمایش می دهد.

۲- فرم تماس با استفاده از xAjax و PHPMailer – نمایش نمونه

فرم تماسی خوب و امن. برای چک کردن فیلدها و نمایش پیغام خطا از جاوا اسکریپت استفاده می کند.
از توابع xAjax در آن استفاده شده و برای ارسال ایمیل از PHPMailer ِ معروف بهره گرفته است.

۳- فرم تماس جی کوئری – نمایش نمونه

این فرم تماس به طور کامل از جی کوئری استفاده می کند و برای چک کردن فیلدها هم از Jquery form plugin استفاده می کند.

۴- فرم تماس مدرن – نمایش نمونه

در این فرم تماس از script.aculo.us و WForms استفاده شده است.
یکی از ویژگی های منحصر به فرد آن این است که ابتدا به سروری که بر روی آن نصب شده است، متصل می شود و پس از بررسی ِ صحت اطلاعات تماس، اجازه ی ارسال ایمیل را می دهد.
همچنین می توان برای تعداد کاراکترهای به کار رفته در متن تماس، محدودیت ایجاد کرد و تعداد کاراکترها را هم نمایش می دهد.

۵- فرم تماس LightForm – نمایش نمونه

لایتفرم، یک فرم تماس جذاب است. از FormCheck2 برای چک کردن صحت فیلدها و از NiceForms برای استایل دهی به اجزای فرم استفاده کرده است.
یک captcha-like هم دارد برای جلوگیری از اسپم شدن که حاصل جمع ۲ عدد را از کاربر می پرسد. سیستم ارسال ایمیل آن با پی اچ پی نوشته شده است و همچنین آی پی، یوزر ایجنت و صفحه ی ارجاع دهنده ی کاربر را به همراه ایمیل می فرستد.

• ای‌جکس بازی » به‌یاد هایپرترمینال
• ای‌جکس‌بازی » حذف رکورد از بانک‌اطلاعاتی با جی‌کوئری
• ای‌جکس‌بازی » بارگذاری محتوای صفحات با جی‌کوئری
• پلاگین Lightbox ِ جی کوئری برای افکت دادن به نمایش تصاویر
• تشخیص پلتفرم‌های مختلف با پی اچ پی