سیستم ارسال نظرات

سیستم ارسال نظرات

در این آموزش ما قصد داریم تا به شما نحوه ساخت یک سیستم ارسال نظر رو بهتون آموزش بدیم.همانطور که میدانید ارسال نظر به هر مطلب میتواند در بهبود عملکرد مدیر وبسایت در ارائه خدمات مطلوب موثر باشد و همانطور که شما می دانید ارسال نظر یکی از اجزای جدانشدنی هر وبسایت و مطالب آن می باشد.

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

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

demo.php

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

    <div class="name"><a href="http://tutorialzine.com/">نام شخص</a></div>
    <div title="Added at 06:40 on 30 Jun 2010" class="date"> جولای۳۰ ۲۰۱۰</div>
     <p>متن پیام</p></div>

تگ avatar شامل یک لینک و یک عکس از سایت gravatar.com است.ما در بخش کدهای PHP به این بخش آموزش بر می گردیم .در آخر کد هم ما تگ های name و time و متن پیام را داریم.

بخش مهم دیگر کد 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>

این فرم توسط AJAX ارسال می شود.اعتبارسنجی فیلدهای وارد شده توسط submit.php بررسی میشود که شما در قسمت jQuery مشاهده خواهید کرد.هر فیلد با برچسب مناسب خودش مشخص شده است.

i11

 

PHP

کدهای PHP برای دستکاری ارتباط با دیتابس MySQL و تولید نشانه ای خاص برای هر نظر به کار می رود.همچنین برای دریافت درخواست های پایان دریافت  AJAX و قرار دادن پیام های در داخل جدول به کار می روند.شما میتونید کد آن را در زیر مشاهده کنید.

 

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 تمام ورودی های دیتابیس ر انتخاب می کند و آرایه comment$ را با اشیای کلاس comment پر می کند که شما میتونید در زیر آن را مشاهده کنید.

 

demo.php

 

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

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

هر کامنت داری یک متد ()markup که برای مقدار دهی کد HTML برای نمایش درصفحه بک کار می رود.شما میتونید نحوه تعریف متد را در کد زیر مشاهده کنید.

کلاس یک سطر از دیتابیس را انتخاب می کند و آن را در متغییر اختصاصی data$ ذخیره می کند.لازم به ذکر است که این متغییر فقط در داخل همین کلاس قابل استفاده است.شما تمام کدهای استفاده شده دراین کلاس را مشاهده می کنید.

 

comment.class.php

 

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>
        ';
    }

 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;

    }

 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;
    }

}

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 اطلاعات فرم نظرات را دریافت می کند و آن ها را ارزیابیمی کند و در صورت بروز مشکل خطای مناسب با آن را نمایش می دهد و در صورت نبود مشکل آنها را ذخیره می کند.

شما میتونید نمونه از پاسخ صحیح و غلط را ببینید.

 

Successful response

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

Failure response

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

i21

 

CSS

ما در زیر استایل های مورد نیاز برای پلاگینمان را نوشته ایم که  به دلیل سادگی نیازی به توضیح ندارند

styles.css

.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;
}

.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;
}

 

jQuery

پس از وارد کردن کتابخانه های مورد نیاز به آخر کد HTML ما کدهای مربوطه را می نویسیم.

 

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');

    });

});

از بالا شروع می کنیم،ما  ()document).ready)$ را فراخوانی می کنیم که تابع را به ایونت DOM content loaded متصل می کند.کار متغییر به عنوان یک پرچم (flag) است که به اسکریپت می گوید که کدام دستور AJAX در حال اجرا است.

در پاسخ تابع نسبت به درخواست متد POST AJAX ما بررسی می کنیم که آیا متنبا موفقیت  وارد شده است یا نه که اگر وارد شده ما آن را به عنوان آخرین نظر وارد کنیم.

اگر دراینجا مشکلی باشد با نمایش پیغام خطا مناسب آن را اعلام می کنیم.

 

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

پایان

 

+1
0


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

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

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

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

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

*


شش − = 2

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>