پلاگین نمایش نظرات بصورت Google Wave

پلاگین نمایش نظرات بصورت Google Wave

ما در این آموزش با استفاده از PHP و Jquery به شما نحوه ایجاد یک سیستم نظردهی را یاد خواهیم داد .ما به کاربرانمان این امکان را خواهیم داد که  به عقب بر گشته و نظرات را بر حسب زمان نمایش بدهند.

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

خوب ما کار را با نوشتن کدهای HTML آغاز می کنیم.ابتدا به کدهای زیر نوجه کنید:

demo.php

<div id="main"><p id="orig">View the <a href="http://tutorialzine.com/2009/10/google-wave-history-slider-jquery/" target="_blank">original tutorial &raquo;</a></p><h1>Google Wave-like</h1><h2>History Slider</h2><div id="wave"><div id="topBar">Your Demo Wave</div><div id="subBar"><img src="img/tutorialzine.png" alt="Tutorialzine" /><img src="img/demo.png" alt="Demo" /><img src="img/curious.png" alt="Curious" /></div><div id="sliderContainer"><div id="slider"></div><div class="clear"></div></div><div id="commentArea"><?phpforeach($comments as $c){	showComment($c);	// Showing each comment}?></div><input type="button" class="waveButtonMain" value="Add a comment" onclick="addComment()" /><div id="bottomBar"></div></div></div>

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

i11

نکته مهمی که شما باید در مورد جی کوئری بدانید این است که شما میتوانید به لطف CDN گوگل کتابخانه Jquery  خود را بطور مستقیم وارد وبسایت خود بکنید و دیگر نگران دانلود شدن و ذخیره شده آن در سرور خود نباشید.همچنین این کار باعث بالا رفتن سرعت لود صفحه وبسایت شما میشود.به هر حال شما بخشی از کدهای مهم CSS  را که ما در این پلاگین استفاده کرده ایم در زیر مشاهده می کنید(کدهای کامل در داخل فایل دانلود قرار دارند).

demo.css

#orig{	/* The link that float to the right of the title */	float:right;	font-family:"MyRiad Pro",Arial;	font-size:10px;	letter-spacing:1px;	text-transform:uppercase;	padding-top:10px;}.clear{	/* Clearfix, needed by IE6 */	clear:both;}#main{	/* The main container */	width:600px;	margin:30px auto;}#wave{	/* CSS rounded corners */	-moz-border-radius:6px;	-khtml-border-radius: 6px;	-webkit-border-radius: 6px;	border-radius:6px;	background:white;	width:100%;	overflow:hidden;}#topBar{	background:url(img/bg.jpg) repeat-x;	font-size:12px;	color:white;	height:20px;	overflow:hidden;	padding:5px 0 0 10px;	border-bottom:1px solid #e4f1ff;	-moz-border-radius:6px 6px 0 0;	/* A Firefox fix, for once */}#bottomBar{	height:40px;	background-color:#c9e2fc;	-moz-border-radius:0 0 6px 6px;	border-top:1px solid #CCCCCC;}#subBar{	background-color:#c9e2fc;	padding-left:10px;}#subBar img{	/* The avatars at the top of the page */	margin:8px 8px 8px 0;	border:1px solid #cccccc;}.waveButton,.waveButtonMain{	/* The submit buttons */	background:url(img/button_bg.jpg) repeat-x 50% 50%;	border:1px solid #DDDDDD;	padding:4px;	cursor:pointer;}.waveButtonMain{	display:block;	margin:10px 20px;}.textArea{	padding:4px;	font-family:Arial,Helvetica,Sans-serif;	font-size:12px;	color:#666666;	border:1px solid #66aff9;	margin-bottom:10px;}.replyLink{	float:right;}#commentArea{	padding:10px;	color:#444444;}.commentText{	margin-left:40px;}.waveComment .waveComment{	padding-left:30px;}.waveComment .waveComment .replyLink{	/* Hiding the reply link on the comment replies -	only 2 levels of ancestry are allowed */	display:none;}.waveTime{	color:#999999;	float:right;	font-size:10px;}#slider{	width:400px;	font-size:10px;	float:right;	margin-right:10px;}#sliderContainer{	background:url(img/dark_bg.jpg) repeat-x #f5f5f5 50% 50%;	padding:9px 10px;	border:1px solid #bbbbbb;	border-left:0;	border-right:0;	height:10px;	padding:9px 10px;}div.ui-widget-content{	/* Styling the slider */	background:#FFFFFF;	border:1px solid #CCCCCC;}.comment{	margin:5px 10px;	padding:8px 10px;	border:2px solid #cccccc;	/* Rounding the comment */	-moz-border-radius:6px;	-khtml-border-radius: 6px;	-webkit-border-radius: 6px;	border-radius:6px;	overflow:hidden;}span.name{	font-weight:bold;	color:#999999;}.commentAvatar{	width:30px;	height:30px;	float:left;	margin-right:10px;}

i11

حال به سراغ کدهای PHP میرویم.فایل های اصلی PHP  عبارتند از:۱-demo.php:تولید خروجی نظر ها۲-ajax/saveComment.php:نوشتن نظر جدید۳-founctions.php:نگهداری تعدادی از توابع مورد استفادهdemo.php4-connect.php:جهت برقراری ارتباط با دیتابیسما در زیر ۳ فایل اولی را مشاهده می کنیم.

demo.php

define("INCLUDE_CHECK",1);require 'connect.php';require 'functions.php';// Including the files for the DB connection and our custom functions// Removing comments that are older than an hour.mysql_query("DELETE FROM wave_comments WHERE id>5 AND dt<SUBTIME(NOW(),'0 1:0:0')");$comments_result = mysql_query("SELECT * FROM wave_comments ORDER BY id ASC");// Selecting all the comments ordered by id in ascending order$comments=array();$js_history='';while($row=mysql_fetch_assoc($comments_result)){	if($row['parent']==0)	// If the comment is not a reply to a previous comment, put it into $comments directly	$comments[$row['id']] = $row;	else	{		if(!$comments[$row['parent']]) continue;		$comments[$row['parent']]['replies'][] = $row;		// If it is a reply, put it in the 'replies' property of its parent	}	$js_history.='addHistory({id:"'.$row['id'].'"});'.PHP_EOL;	// Adds JS history for each comment}$js_history='<script type="text/javascript">'.$js_history.'</script>';// This is later put into the head and executed on page load

نظرات شامل دو بخش هستند:نظر اصلی و پاسخ هایی که به آن نظر داده میشوند.سپس نظرات توسط تابع showComment به نمایش در می آیند.

ajax / saveComment.php

define("INCLUDE_CHECK",1);require'../connect.php';if(empty($_POST['comment'])) die("0");// If there isn't a comment text, exit$comment = mysql_real_escape_string(nl2br(strip_tags($_POST['comment'])));$user='Demo';// This would be a nice place to start customizing - the default user// You can integrate it to any site and show a different username.$addon='';if($_POST['parent']) $addon=',parent='.(int)$_POST['parent'];mysql_query("INSERT INTO wave_comments SET usr='".$user."', comment='".$comment."', dt=NOW()".$addon);if(mysql_affected_rows($link)==1)	echo mysql_insert_id($link);	// If the insert was successful, echo the newly assigned IDelse	echo '0';

حالا تابع functio.php را برایتان مینویسیم

functions.php

if(!defined('INCLUDE_CHECK')) die('You are not allowed to execute this file directly');function showComment($arr){	echo '	<div class="waveComment com-'.$arr['id'].'">		<div class="comment">		<div class="waveTime">'.waveTime($arr['dt']).'</div>		<div class="commentAvatar">		<img src="img/'.strtolower($arr['usr']).'.png" width="30" height="30" alt="'.$arr['usr'].'" />		</div>		<div class="commentText">		<span class="name">'.$arr['usr'].':</span> '.$arr['comment'].'		</div>		<div class="replyLink">		<a href="" onclick="addComment(this,'.$arr['id'].');return false;">add a reply &raquo;</a>		</div>		<div class="clear"></div>	</div>';	// Output the comment, and its replies, if any	if($arr['replies'])	{		foreach($arr['replies'] as $r)		showComment($r);	}	echo '</div>';}function waveTime($t){	$t = strtotime($t);	if(date('d')==date('d',$t)) return date('h:i A',$t);	return date('F jS Y h:i A',$t);	// If the comment was written today, output only the hour and minute	// if it was not, output a full date/time}

خوب حالا نوبت کدهای جاوا اسکریپت است.ما کدها رو در دو بخش توضیح می دهیم.

script.js – part 1

$(document).ready(function(){	// Executed once all the page elements are loaded	lastVal = totHistory;	// Create the slider:	$("#slider").slider({		value:totHistory,		min: 1,		max: totHistory,		animate: true,		slide: function(event, ui) {			if(lastVal>ui.value)			$(buildQ(lastVal,ui.value)).hide('fast').find('.addComment').remove();			// Using buildQ to build the jQuery selector			// If we are moving the slider backward, hide the previous comment			else if(lastVal<ui.value)			$(buildQ(lastVal,ui.value)).show('fast');			// Otherwise show it			lastVal = ui.value;		}	});});var totHistory=0;// Holds the number of commentsvar positions = new Array();var lastVal;function addHistory(obj){	/* Gets called on page load for each comment, and on comment submit */	totHistory++;	positions.push(obj.id);}function buildQ(from,to){	/* Building a jQuery selector from the begin	and end point of the slide */	if(from>to)	{		var tmp=to;		to=from;		from=tmp;	}	from++;	to++;	var query='';	for(var i=from;i<to;i++)	{		if(i!=from) query+=',';		query+='.com-'+positions[i-1];	}	/* Each comment has an unique com-(Comment ID) class	that we are using to address it */	return query;}

اگر یادتان باشد ما یک رشته مخصوص PHPتولید کردیم که ارتباط را با تابع addHistory نگه میداشت.هر موقع این تابع اجرا بشود شمارنده تابع totHistory افزایش پیدا می کند.پس از بارگذاری تمام نظرات ،()document.ready$ اجرا میشود . اسلایدر بر حسب بیشترین مقدار totHistory مقدار دهی میشود.کمترین مقدار totHistory برابر با ۱ است چون ما میخواهیم حداقل یک نظر نمایش داده بشود.حالا بخش دوم کدهای اسکریپت را مینویسیم

script.js – part 2

function addComment(where,parent){	/*	This functions gets called from both the "Add a comment" button	on the bottom of the page, and the add a reply link.	It shows the comment submition form */	var $el;	if($('.waveButton').length) return false;	// If there already is a comment submition form	// shown on the page, return and exit	if(!where)		$el = $('#commentArea');	else		$el = $(where).closest('.waveComment');	if(!parent) parent=0;	// If we are adding a comment, but there are hidden comments by the slider:	$('.waveComment').show('slow');	lastVal = totHistory;	$('#slider').slider('option','value',totHistory);	// Move the slider to the end point and show all comments	var comment = '<div class="waveComment addComment">\	\	<div class="comment">\	<div class="commentAvatar">\	<img src="img/demo.png" width="30" height="30" />\	</div>\	\	<div class="commentText">\	\	<textarea class="textArea" rows="2" cols="70" name="" />\	<div><input type="button" class="waveButton" value="Add comment" onclick="addSubmit(this,'+parent+')" /> or <a href="" onclick="cancelAdd(this);return false">cancel</a></div>\	\	</div>\	</div>\	\	</div>';	$el.append(comment);	// Append the form}function cancelAdd(el){	$(el).closest('.waveComment').remove();}function addSubmit(el,parent){	/* Executed when clicking the submit button */	var cText = $(el).closest('.commentText');	var text = cText.find('textarea').val();	var wC = $(el).closest('.waveComment');	if(text.length<4)	{		alert("Your comment is too short!");		return false;	}	$(el).parent().html('<img src="img/ajax_load.gif" width="16" height="16" />');	// Showing the loading gif animation	// Send an AJAX request:	$.ajax({		type: "POST",		url: "ajax/saveComment.php",		data: "comment="+encodeURIComponent(text)+"&parent="+parent,		/* Sending both the text and the parent of the comment */		success: function(msg){			/* PHP returns the automatically assigned ID of the new comment */			var ins_id = parseInt(msg);			if(ins_id)			{				wC.addClass('com-'+ins_id);				addHistory({id:ins_id});				$('#slider').slider('option', 'max', totHistory).slider('option','value',totHistory);				lastVal=totHistory;			}			transForm(text,cText);			// Hiding the form and showing the newly-added comment in its place		}	});}function transForm(text,cText){	var tmpStr ='<span class="name">Demo:</span> '+text;	cText.html(tmpStr);}
+1
-1


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

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

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

۲ دیدگاه ها

  1. سلام
    این دکمه های حمایت مالی سایتتون رو چطوری ساختین؟

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

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

*


× 6 = چهل هشت