سلام دوستان

در این مقال می خواهیم با هم یک سیستم ساده ارسال نظرات با php و ajax بنویسیم.این سیستم به صورت یکپارچه با gravatar (سیستم مدیریت آواتار) هماهنگ خواهد شد و به صورت موثر ،نحوه ارتباط بین jQuery با PHP/MySQL را به کمک JSON نمایش خواهد داد.

قدم ۱ – XHTML

ابتدا اجازه دهید نگاهی به ساختار نظرات بندازیم.این کد به وسیله php در کلاس Comment ایجاد می شود ولی فعلا می خواهیم نگاهی گذرا به آن داشته باشیم

demo.php

<div class="comment">
    <div class="avatar">
        <a href="http://fotolia.ir/">
        <img src="http://www.gravatar.com/avatar/112fdf7a8fe3609e7af2cd3873b5c6bd?size=50&default=http%3A%2F%2Fdemo.tutorialzine.com%2F2010%2F06%2Fsimple-ajax-commenting-system%2Fimg%2Fdefault_avatar.gif">
        </a>
    </div>

    <div class="name"><a href="http://fotolia.ir/">Person's Name</a></div>
    <div title="Added at 06:40 on 30 Jun 2010" class="date">30 Jun 2010</div>
    <p>Comment Body</p>
</div>

دیو avatar شامل یک لینک (اگر کاربر هنگام نظر دادن ، لینکی وارد کرده باشد) استو یک تصویر آواتار که از سایت gravatar.com گرفته شده است.در بخش های بعدی و قسمت php به این گزینه می رسیم.در انتها نیز دیو هایی برای اسم ، زمان و متن نظر داریم.

یک بخش مهم دیگر هم در قیمت HTML،همین فرم ثبت نظر است.این فرم به طریق POST ارسال می شود و تکمیل تمام فیلد های آن غیر از آدرس سایت ، ضروری است.

demo.php

<div id="addCommentContainer">
	<p>Add a Comment</p>
	<form id="addCommentForm" method="post" action="">
    	<div>
        	<label for="name">Your Name</label>
        	<input type="text" name="name" id="name" />

            <label for="email">Your Email</label>
            <input type="text" name="email" id="email" />

            <label for="url">Website (not required)</label>
            <input type="text" name="url" id="url" />

            <label for="body">Comment Body</label>
            <textarea name="body" id="body" cols="20" rows="5"></textarea>

            <input type="submit" id="submit" value="Submit" />
        </div>
    </form>
</div>

فرم به وسیله آژاکس ارسال می شود . رویه اعتبار سنجی فیلدها نیز در کاملا در پشت خط توسط فایل submit.php انجام میشود که در ادامه و در بخش jQuery به آن می رسیم.هر فیلد نیز یک عنصر label مشابه دارد که به وسیله خصیصه for مشخص میشود.

قدم ۲ – PHP

کار php هندل کردن داده ها بوسیل دیتابیس mysql و نیز ایجاد کدهای مربوط به نمایش نظرات است.همچنین با کمک درخواست های آژاکس می تواند اطلاعات نظر جدید را در جدول comments دیتابیس ذخیره کند.می توانید کدی را که موجب چاپ نظرات می شود را در ذیل مشاهده کنید

demo.php

/*
/	Select all the comments and populate the $comments array with objects
*/

$comments = array();
$result = mysql_query("SELECT * FROM comments ORDER BY id ASC");

while($row = mysql_fetch_assoc($result))
{
	$comments[] = new Comment($row);
}

پرس و جوی mysql، تمام داده های موجود در دیتابیس را انتخاب کرده و سپس متغیر comments$ توسط آرایه ای از اشیا که از روی کلاس comment ساخته شده اند ، پر می شود.این آرایه بعدا چاپ خواهد شد.

demo.php

/*
/	Output the comments one by one:
*/

foreach($comments as $c){
	echo $c->markup();
}

هر نظر یک متد ()markup دارد که کارش تولید کدهای HTML استاندارد و حاضر برای نمایش در صفحه است.شما می توانید نحوه تعریف ساختار این متد و کلاس را در پایین مشاهده کنید.

کلاس یک ردیف را از دیتابیس می گیرد(به وسیله تابع ()mysql_fetch_assoc) و آن را در خاصیت (همان متغیر که چون داخل کلاس است ، خاصیت نامیده میشود) خصوصی data$ ذخیره می کند.استفاده از خاصیت خصوصی باعث میشود که این متغیر فقط در داخل کلاس و توسط متدهای آن قابل دسترسی باشد و از بیرون نتوان به آن دست یافت.

comment.class.php – Part 1

class Comment
{
	private $data = array();

	public function __construct($row)
	{
		/*
		/	The constructor
		*/

		$this->data = $row;
	}

	public function markup()
	{
		/*
		/	This method outputs the XHTML markup of the comment
		*/

		// Setting up an alias, so we don't have to write $this->data every time:
		$d = &$this->data;

		$link_open = '';
		$link_close = '';

		if($d['url']){

			// If the person has entered a URL when adding a comment,
			// define opening and closing hyperlink tags

			$link_open = '<a href="'.$d['url'].'">';
			$link_close =  '</a>';
		}

		// Converting the time to a UNIX timestamp:
		$d['dt'] = strtotime($d['dt']);

		// Needed for the default gravatar image:
		$url = 'http://'.dirname($_SERVER['SERVER_NAME'].$_SERVER["REQUEST_URI"]).
				'http://cdn.tutorialzine.com/img/default_avatar.gif';

		return '

			<div class="comment">
				<div class="avatar">
					'.$link_open.'
					<img src="http://www.gravatar.com/avatar/'.
				md5($d['email']).'?size=50&default='.
				urlencode($url).'" />
					'.$link_close.'
				</div>

				<div class="name">'.$link_open.$d['name'].$link_close.'</div>
				<div class="date" title="Added at '.
				date('H:i \o\n d M Y',$d['dt']).'">'.
				date('d M Y',$d['dt']).'</div>
				<p>'.$d['body'].'</p>
			</div>
		';
	}

این اسکریپت از gravatar برای نمایش آواتار نظردهندگان استفاده می کند.این سرویس برای همه حتی کسانی که از آن استفاده نمی کنند ، کاملا کاربردی است .زیرا شما را قادر می سازد تا به هر ایمیل تان یک آواتار قرار دهید و اگر همان ایمیل را در هنگام نظر دادن وارد کنید ، آواتار مربوط به آن توسط این سایت برای ارسال میشود.این عکس آواتار را به راحتی و با ارسال یک هش ()md5 از ایمیل به سایت gravatar.com استخراج کرد.دقیقا همان کاری که در خط ۴۸ از کد انجام شده است.

در بالای آن و در خط ۳۹ ، اسکریپت سعی می کند آدرس ثابت برای آواتار پیش فرض (default_avatar.gif) را تعیین کند.این تصویر gif به سایت gravatar به صورت هش md5 پاس داده میشود تا اگر برای ایمیل وارد شده ، آواتاری تعریف نشده بود، این تصویر پیش فرض به جای آن نمایش داده شود.

comment.class.php – Part 2

public static function validate(&$arr)
{
	/*
	/	This method is used to validate the data sent via AJAX.
	/
	/	It return true/false depending on whether the data is valid, and populates
	/	the $arr array passed as a paremter (notice the ampersand above) with
	/	either the valid input data, or the error messages.
	*/

	$errors = array();
	$data	= array();

	// Using the filter_input function introduced in PHP 5.2.0

	if(!($data['email'] = filter_input(INPUT_POST,'email',FILTER_VALIDATE_EMAIL)))
	{
		$errors['email'] = 'Please enter a valid Email.';
	}

	if(!($data['url'] = filter_input(INPUT_POST,'url',FILTER_VALIDATE_URL)))
	{
		// If the URL field was not populated with a valid URL,
		// act as if no URL was entered at all:

		$url = '';
	}

	// Using the filter with a custom callback function:

	if(!($data['body'] = filter_input(INPUT_POST,'body',FILTER_CALLBACK,
					array('options'=>'Comment::validate_text'))))
	{
		$errors['body'] = 'Please enter a comment body.';
	}

	if(!($data['name'] = filter_input(INPUT_POST,'name',FILTER_CALLBACK,
					array('options'=>'Comment::validate_text'))))
	{
		$errors['name'] = 'Please enter a name.';
	}

	if(!empty($errors)){

		// If there are errors, copy the $errors array to $arr:

		$arr = $errors;
		return false;
	}

	// If the data is valid, sanitize all the data and copy it to $arr:

	foreach($data as $k=>$v){
		$arr[$k] = mysql_real_escape_string($v);
	}

	// Ensure that the email is in lower case (for a correct gravatar hash):
	$arr['email'] = strtolower(trim($arr['email']));

	return true;

}

همانطور که مشاهده می کنید ، متد ()validate کلاس به صورت static تعریف شده است.این به این معنی است که می توان آن را به صورت مستقیم ()Comment::validate فراخوانی کرد و نیازی به ایجاد شی از روی کلاس و سپس فراخوانی متد نیست.کار این متد چیست ؟ جواب : اعتبارسنجی ورودی های فرم که با ajax ارسال شده اند.

این متد از توابع جدید فیلتر استفاده می کند که در PHP 5.2.0 ارائه شده اند.این توابع به شما کمک می کنند تا هر نوع ورودی را به راحتی اعتبارسنجی کرده و ذخیره کند.

برای مثال (filter_input(INPUT_POST,’url’,FILTER_VALIDATE_URL به این معنی است که آیا $_POST['url'] حاوی یک url صحیح است یا نه.اگر درست باشد ، تابع مقدار متغیر را بر می گرداند وگرنه مقدار false را می دهد.

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

همچنین امکان تعریف یک متد دلخواه برای اعتبارسنجی وجود دارد و بدین ترتیب می توان کنترل بیشتری روی این روند داشت.چیزی که در خط های ۳۱ تا ۳۷ کد بالا می بینید.در این خط ها کار validate به متد Comment::validate_text واگذار شده است که در ادامه این متد را تعریف می کنیم

 comment.class.php – Part 3

private static function validate_text($str)
	{
		/*
		/	This method is used internally as a FILTER_CALLBACK
		*/

		if(mb_strlen($str,'utf8')<1)
			return false;

		// Encode all html special characters (<, >, ", & .. etc) and convert
		// the new line characters to <br> tags:

		$str = nl2br(htmlspecialchars($str));

		// Remove the new line characters that are left
		$str = str_replace(array(chr(10),chr(13)),'',$str);

		return $str;
	}

}

این متد کاراکترهای خاص را به صورت مقاوم در برابر حملات XSS در می آورد و نیز کاراکترهای خط جدید را با تگ < / br> جایگزین می کند.

submit.php

/*
/	This array is going to be populated with either
/	the data that was sent to the script, or the
/	error messages:
/*/

$arr = array();

$validates = Comment::validate($arr);

if($validates)
{
	/* Everything is OK, insert to database: */

	mysql_query("	INSERT INTO comments(name,url,email,body)
					VALUES (
						'".$arr['name']."',
						'".$arr['url']."',
						'".$arr['email']."',
						'".$arr['body']."'
					)");

	$arr['dt'] = date('r',time());
	$arr['id'] = mysql_insert_id();

	/*
	/	The data in $arr is escaped for the mysql insert query,
	/	but we need the unescaped text, so we apply,
	/	stripslashes to all the elements in the array:
	/*/

	$arr = array_map('stripslashes',$arr);

	$insertedComment = new Comment($arr);

	/* Outputting the markup of the just-inserted comment: */

	echo json_encode(array('status'=>1,'html'=>$insertedComment->markup()));

}
else
{
	/* Outputting the error messages */
	echo '{"status":0,"errors":'.json_encode($arr).'}';
}

submit.php نظرات را بوسیله درخواست های ajax دریافت می کند و بعد از اعتبارسنجی ، یک شی JSON و کدهای html نظراتی را بر می گرداند که با موفقیت ذخیره شده اند در غیر این صورت لیستی از خطاها.jQuery از وضعیت ارسالی تشخیص می دهد که خطاها را نمایش دهد و یا کدهای نظر اضافه شده را به صفحه اضافه کند.
در پایین می توانید دو نوع درخواست ممکن را ببینید :

جواب موفقیت آمیز

{
    "status": 1,
    "html": "Html Code Of The Comment Comes Here..."
}

خاصیت html در اینجا شامل کدهای نظر خواهد بود .همان طوری که در قدم ۱ دیدیم

جواب ناموفق

{
    "status": 0,
    "errors": {
        "email": "Please enter a valid Email.",
        "body": "Please enter a comment body.",
        "name": "Please enter a name."
    }
}

در صورت بروز خطا ، جی کوئری خطاها را در یک حلقه قرار داده و هر کدام را کنار ورودی مربوطه نمایش می دهد

قدم ۳ – CSS

حالا که می توانیم نظرات را نمایش دهیم و ذخیره کنیم ، می توانیم برویم سراغ زیباتر کردن کارمان .

styles.css – Part 1

.comment,
#addCommentContainer{

	/* Syling the comments and the comment form container */

	padding:12px;
	width:400px;
	position:relative;
	background-color:#fcfcfc;
	border:1px solid white;
	color:#888;
	margin-bottom:25px;

	/* CSS3 rounded corners and drop shadows */

	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;

	-moz-box-shadow:2px 2px 0 #c2c2c2;
	-webkit-box-shadow:2px 2px 0 #c2c2c2;
	box-shadow:2px 2px 0 #c2c2c2;
}

.comment .avatar{

	/*
	/	The avatar is positioned absolutely,
	/	and offset outside the comment div
	/*/

	height:50px;
	left:-70px;
	position:absolute;
	width:50px;
	background:url('img/default_avatar.gif') no-repeat #fcfcfc;

	/* Centering it vertically: */

	margin-top:-25px;
	top:50%;

	-moz-box-shadow:1px 1px 0 #c2c2c2;
	-webkit-box-shadow:1px 1px 0 #c2c2c2;
	box-shadow:1px 1px 0 #c2c2c2;
}

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

styles.css – Part 2

.comment .avatar img{
	display:block;
}

.comment .name{
	font-size:20px;
	padding-bottom:10px;
	color:#ccc;
}

.comment .date{
	font-size:10px;
	padding:6px 0;
	position:absolute;
	right:15px;
	top:10px;
	color:#bbb;
}

.comment p,
#addCommentContainer p{
	font-size:18px;
	line-height:1.5;
}

#addCommentContainer input[type=text],
#addCommentContainer textarea{

	/* Styling the inputs */

	display:block;
	border:1px solid #ccc;
	margin:5px 0 5px;
	padding:3px;
	font-size:12px;
	color:#555;
	font-family:Arial, Helvetica, sans-serif;
}

#addCommentContainer textarea{
	width:300px;
}

label{
	font-size:10px;
}

label span.error{
	color:red;
	position:relative;
	right:-10px;
}

#submit{

	/* The submit button */

	background-color:#58B9EB;
	border:1px solid #40A2D4;
	color:#FFFFFF;
	cursor:pointer;
	font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
	font-size:14px;
	font-weight:bold;
	padding:4px;
	margin-top:5px;

	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
}

#submit:hover{
	background-color:#80cdf5;
	border-color:#52b1e2;
}

در بخش دوم از استایل شیت مان ، نظر و عناصر فرم را سبک دهی کردیم.فقط توجه کنید که منظور از [input[type=text ،انتخاب تمام عناصر input ای است که خصیصه type شان برابر با text باشد.یعنی تمام فیلدهای متنی.

قدم ۴ – jQuery

حالا اجازه دهید کارمان را با jquery ادامه دهیم ، آخرین بخش از آموزشمان .بعد از افزودن کتابخانه jquery به آخر صفحه (بهترین مکان از نظر بازدهی) می توانیم کار کدنویسی را شروع کنیم.

script.js

$(document).ready(function(){
	/* The following code is executed once the DOM is loaded */

	/* This flag will prevent multiple comment submits: */
	var working = false;

	/* Listening for the submit event of the form: */
	$('#addCommentForm').submit(function(e){

 		e.preventDefault();
		if(working) return false;

		working = true;
		$('#submit').val('Working..');
		$('span.error').remove();

		/* Sending the form fileds to submit.php: */
		$.post('submit.php',$(this).serialize(),function(msg){

			working = false;
			$('#submit').val('Submit');

			if(msg.status){

				/*
				/	If the insert was successful, add the comment
				/	below the last one on the page with a slideDown effect
				/*/

				$(msg.html).hide().insertBefore('#addCommentContainer').slideDown();
				$('#body').val('');
			}
			else {

				/*
				/	If there were errors, loop through the
				/	msg.errors object and display them on the page
				/*/

				$.each(msg.errors,function(k,v){
					$('label[for='+k+']').append('<span class="error">'+
						v+'</span>');
				});
			}
		},'json');

	});

});

سیستم نظردهی آژاکسی ما تکمیل شد !

حرف آخر

اگر بخواهید سیستم را روی سرور اجرا کنید بایستی یک جدول بنام comments ایجاد کنید.برای این کار می توانید فایل table.sql را از پایین دانلود کرده و در phpmyadmin اجرا کنید.بعد از آن نیز اطلاعات تماس با دیتابیس را در فایل connect.php وارد کنید.

منبع