برنامه نویسی سیستم ساده ثبت نظرات با PHP/MySQL و jQuery به صورت AJAX

تبلیغات
کانال تلگرام فتولیا

سلام دوستان

در این مقال می خواهیم با هم یک سیستم ساده ارسال نظرات با 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 استاندارد و حاضر برای نمایش در صفحه است.شما می توانید نحوه تعریف ساختار این متد و کلاس را در پایین مشاهده کنید.

در همین رابطه :   آموزش شروع کار با Zend framework

کلاس یک ردیف را از دیتابیس می گیرد(به وسیله تابع ()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 ارسال شده اند.

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

در همین رابطه :   آموزش کامل برنامه نویسی یک وبلاگ با php به صورت شی گرا(OOP)

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

{
    "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 وارد کنید.

منبع

36 Comments

  1. سلام
    آموزش مفیدی بود
    فقط میشه کاری کرد که کاربر بتونه برای خودش عکس انتخاب کنه؟
    سایت بنده طوری هست که فقط اعضا میتونند توش فعالیت داشته باشند
    البته سایت کاملا رایگان هست
    فقط میخواستم اگر بشه، کاری کنم که اعضا از طریق کنترل پنلشون بتونند برای خودشون آواتار بذارن
    چون خیلی ها هستند که هنوز از gravatar استفاده نمیکنند

  2. با سلام
    من میخوام وب سایت خبری طراحی کنم که توی صحفه اول مثلا ۱۰ خبر باشه و هر وقت بیشتر از ۱۰تا شده
    خودش به صفحه بعد بره
    مثل سرچ گوگل که پایین صفحات رو زده

  3. سلام و بسیار بسیار ممنون بابت این آموزش خوب و کاملتون.
    اما میخواستم بدونم که چطوری میشه سیستم مدیریت نظرات رو هم ایجاد کرد. البته نه مدیریت به اون صورت!! منظورم اینه که چطوری میشه کاری کرد که نظر پس از تایید به نمایش دربیاد. و همینطور اینکه بشه نظرات ارسال شده رو حذف کرد.
    یعنی یه سیستم مدیریت برای تایید و حذف نظرات :)

  4. بازتاب: آموزش ساخت سی ام اس نظر دهی برای سایت ها و چتروم ها | مکث پاتوق
  5. سلام در مورد سیستم پرسش و پاسخ ممنون که جواب ما رادادید اقای زمانی
    در کل یه توضیح کاملی بدید چون زیاد اشنایی با این کار ندارم خواهشمندم توضیح که چطور میتوانم این صفحه ها را ایجاد کنم جواب شما به سوال من این بود
    ………………..
    می تونید یه صفحه داشته باشید برای اضافه کردن سوال و تو همون صفحه هم سوالات رو لیست کنید.بعد اگر کاربر روی یک سوال کلیک کرد ،بره به صفحه ی دیگری که اونجا هم لیست جواب ها به اون سوال خاص هست و زیرش هم یه فرم دیگه برای ثبت پاسخ
    …………………

    که زیاد متوجح نشدم ممنون میشم توضیح کاملی بدید .
    یا حق

    1. خواهش می کنم ، خوب توضیح فکر کنم کافی بوده ولی باز کمی راحت تر عرض می کنم
      این فرم رو می تونید برای ثبت سوال استفاده کنید .ولی اگر کسی خواست به یه سوالی جواب بده ،باید بتونه روی اون سوال کلیک کنه و بره به یه صفحه دیگه که کارش لیست کردن جواب هایی است که ممکنه قبلا بهش داده شده باشه.به علاوه اینکه یه فرم هم باید تو این صفحه باشه برای ثبت جواب .یعنی دو صفحه :
      ۱.صفحه اول : کارش ثبت سوال و لیست کردن سوالات
      ۲.صفحه دوم : کارش ثبت جواب ها و لیست جواب های یک سوال خاص
      امیدوارم روشن گفته باشم

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

More in PHP, طراحي وب
چگونه در PHP نوع Array را به Object و نوع Object را به Array تبدیل کنیم؟

در زبان برنامه نویسی php دو نوع داده خیلی مهم بنام اشیا (objects) و آرایه ها(Arrays) داریم . در بعضی...

Close