آموزش ساخت سیستم نظر دهی Ajax در PHP

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

در این آموزش که شامل 4 فایل می باشد :
1- index.php دارای فرم ارسال نظر و لیست نظرات است
2- app.js ارسال اطلاعات نظر به سرور با کمک فناوری Ajax ، حذف و تایید نظرات
3- comment.php دریافت نظرات و ذخیره در دیتابیس
4- moderate.php تایید یا حذف نظرات ( صفحه admin )

1- index.php فرم ارسال نظر

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RapidCode.IR - سیستم نظر دهی</title>
    <style>
        body {
        text-align: center;
        overflow-x: hidden;
    }

    #introduce {
        color: white;
        text-decoration: none;
        font-weight: bold;
        display: block;
        width: 100%;
        padding: 5px 10px;
        background-color: #4CAF50;
        text-align: center;
        font-size: 25px;
        margin-bottom: 45px;
    }

    .ds-none{
        display: none;
    }

    .container{
        width: 70%;
        margin: 15px auto;
    }

    #the-content{
        border:2px solid lightblue;
        color: black;
        direction: rtl;
        border-radius: 4px;
        margin: 15px auto;
        padding: 15px;
    }

    /* Comment Form */

    .comment-wrapper h3{
        background-color: #03A9F4;
        color: white;
        padding: 15px;
        display: inline-block;
        width: 400px;
        border-radius: 2px;
        border-bottom: 2px solid black;
        margin-bottom: 20px;
    }

    .inp-cls{
        border: 3px solid lime;
        color: black;
        outline: none;
        border-radius: 2px;
        padding: 5px;
        display: block;
        margin-bottom: 5px;
        width: 80%;
        margin-right: 10%;
        height: 32px;
        font-size: medium;
    }

    #cmt-form{
        direction: rtl;
        width: 70%;
        margin-left: 15%;
    }

    #cmt-email{
        direction: ltr;
        text-align: left;
    }

    #cmt-content{
        height: 120px;
        font-size: large;
    }

    #cmt-submit{
        width: 40%;
        margin-right: 30%;
        cursor: pointer;
    }

    #cmt-submit:hover{
        background-color: lime;
    }

    /* Comment List */

    .comment-user{
        width: 50%;
        margin-left: 25%;
        margin-bottom: 30px;
        border: 3px solid #FF9800;
        padding: 10px;
        border-radius: 8px;
    }

    .comment-user #comment-user-fullname{
        font-weight: bold;
        border-bottom: 2px solid #4CAF50;
        padding-bottom: 5px;
    }

    .comment-user #comment-user-content{
        text-align: right;
        line-height: 2;
        direction: rtl;
    }

    /* Modal Style */
    
    .modal{
        width: 70%;
        position: fixed;
        left: 15%;
        bottom: 25px;
        opacity: 0.95;
        z-index: 5;
        background-color: #ccc;
        color: white;
        font-weight: bold;
        font-size: 30px;
        padding: 100px 0;
    }

    .modal.warning{
        background-color: red;
    }

    .modal.success{
        background-color: #4CAF50;
    }


    </style>
</head>


<?php 
require_once "inc/class-DB.php";
$db = new DB();
?>


<body>
    <a id="introduce" target="_blank" href="https://rapidcode.ir">رپید کد - کتابخانه مجازی برنامه نویسان</a>

    <section class="modal ds-none"></section>

    <div class="container">
        <article id="the-content">
            <img width="250" src="https://rapidcode.ir/wp-content/uploads/2020/04/online-quiz.png" alt="">
            <h1>عنوان مقاله</h1>
            <p>1- index.php که شامل فرم ، کد های js به صورت Inline است که فرم را کنترل می کند
                2- quiz-data.json که به جای پایگاه داده استفاده می شود برای راحتی کار اما شدیدا توصیه میشود از پایگاه داده برای پروژه</p>
        </article>
        <section class="comment-wrapper">
            <section class="comment-form">
                <h3>ارسال نظر</h3>
                <form id="cmt-form" method="POST" action="comment.php">
                    <input class="inp-cls" type="text" name="cmt-name" id="cmt-name" placeholder="نام">
                    <input class="inp-cls" type="email" name="cmt-email" id="cmt-email" placeholder="EMAIL">
                    <textarea class="inp-cls" name="cmt-content" id="cmt-content" placeholder="نظر شما"></textarea>
                    <input type="hidden" name="cmt-post-id" id="cmt-post-id" value="<?php echo POST_ID ?>">
                    <input class="inp-cls" type="button" id="cmt-submit" onclick="submitFormHandler(event)" value="ثبت نظر">
                </form>
            </section>

            <section class="comment-list">
                
                <h3>نظرات</h3>

                <?php 
                $comment_list = $db->row_select([

                    "table" => "comment",
                    "content" => "`post_id`=? AND `approved`=? ORDER BY `id` ASC",
                    "types" => 'ii',
                    "values" => [POST_ID , 1]

                ]);

                $comment_counter = 0;

                foreach($comment_list as $comment):
                    $comment_counter++;
                ?>

                <div class="comment-user" id="comment-<?php echo $comment_counter ?>">
                    <span id="comment-user-fullname"><?php echo $comment['fullname'] ?></span>
                    <p id="comment-user-content"><?php echo $comment['comment'] ?></p>
                </div>


                <?php endforeach; ?>

            </section>
            
        </section>
    </div>
    <script src="app.js"></script>
</body>

</html>

2- app.js برای client-side

دارای 2 تابع است :
1- submitFormHandler : جهت ثبت نظر که فرم آن در index.php وجود دارد
2- actionFormHandler : تایید یا حذف نظرات به عنوان نقش admin که در فایل moderate.php وجود دارد

function submitFormHandler(e) {
	const thisElement = e.target;
	const commentForm = document.querySelector("#cmt-form");
	thisElement.setAttribute("disabled" , "disabled");

    const xhr = new XMLHttpRequest();
    xhr.responseType = "json";

    xhr.open("POST", location.origin + "/comment.php");

    xhr.onload = function(e) {

    	const modal = document.querySelector(".modal");

        const message = this.response.msg;

        console.log(message);

        if(message.search("required fields") !== -1){
        	modal.innerHTML = "لطفا تمامی فیلد ها را پر کنید";
        	modal.classList.add("warning");
        }else{
        	modal.innerHTML = "نظرتان با موفقیت ثبت گردید و پس از تایید نمایش داده خواهد شد";
        	modal.classList.add("success");
        	commentForm.reset();
        }

        modal.classList.remove("ds-none");


        setTimeout(function(btn){
        	modal.classList.remove("warning");
        	modal.classList.remove("success");
        	modal.classList.add("ds-none");
        	modal.innerHTML = "";
        	btn.removeAttribute("disabled");
        },3000 , thisElement)

    }

    xhr.onerror = function(e) {

        console.log("error");

    }

    const frmData = new FormData(commentForm);
    xhr.send(frmData);

};

function actionFormHandler(e){
	const thisElement = e.target;
	const commentID = thisElement.dataset['commentId'];
	const action = thisElement.dataset['action'];

	const formAction = document.querySelector("#form-action");
	const inpAction = document.querySelector("#form-action #action");
	const inpCommentID = document.querySelector("#form-action #comment-id");

	inpAction.value = action;
	inpCommentID.value = commentID;


	formAction.submit();

}

3- comment.php برای کنترل اطلاعات ارسال شده از فرم فایل index.php

header("Content-Type: application/json");

$post_data = $_POST;
$post_data_keys = ["cmt-name" , "cmt-email" , "cmt-content" , "cmt-post-id"];
$is_form_valid = true;


foreach($post_data_keys as $key){
    if(empty($post_data[$key])){
        $is_form_valid = false;
        break;
    }
}

if($is_form_valid){
require_once "inc/class-DB.php";
$db = new DB();

$timestamp = time();

$comment_id = $db->row_insert([

	"table" => "comment",
	"content" => "(`post_id` , `fullname` , `email` , `comment` , `timestamp`) VALUES (? , ? , ? , ? , ?)",
	"types" => "issss",
	"values" => [
		$post_data['cmt-post-id'],
		$post_data['cmt-name'],
		$post_data['cmt-email'],
		$post_data['cmt-content'],
		$timestamp,
	],

]);

$message = ["comment_id" => $comment_id , "msg"=>"success" , "status" => 1];

}else{
    $message = ["msg"=>"Please fill in the required fields" , "status" => 0];
}

echo json_encode($message);

4- moderate.php که برای تایید و حذف نظرات استفاده می شود

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RapidCode.IR - سیستم نظر دهی</title>
    <style>
        body {
        text-align: center;
        overflow-x: hidden;
    }

    #introduce {
        color: white;
        text-decoration: none;
        font-weight: bold;
        display: block;
        width: 100%;
        padding: 5px 10px;
        background-color: #4CAF50;
        text-align: center;
        font-size: 25px;
        margin-bottom: 45px;
    }

    .ds-none{
        display: none;
    }

    .container{
        width: 70%;
        margin: 15px auto;
    }

    table{
    	width: 80%;
    	margin-left: 10%;
    	border-collapse: collapse;
    }

    table td , table th{
		border: 1px solid;
    }

    table td .action{
    	border:none;
    	font-size: medium;
    	font-weight: bold;
    	padding: 5px 15px;
    	cursor: pointer;
    	outline: none;
    }

    table td .action#approve{
		background-color: greenyellow;
    }

    table td .action#delete{
    	background-color: tomato;
    }


    </style>
</head>


<?php
require_once "inc/class-DB.php";
$db = new DB();

if (!empty($_GET['comment-id']) && !empty($_GET['action'])) {

	$comment_id = $_GET['comment-id'];

	if (strtolower($_GET['action']) == "delete") {
		$res = $db->row_delete([

			"table" => "comment",
			"content" => "`id`=? AND `approved`=?",
			"types" => 'ii',
			"values" => [$comment_id, 0],

		]);
	} else if (strtolower($_GET['action']) == "approve") {

		$res = $db->row_update([

			"table" => "comment",
			"content" => "`approved`=? WHERE `id`=?",
			"types" => 'ii',
			"values" => [1 , $comment_id],

		]);

	}

}

?>


<body>
    <a id="introduce" target="_blank" href="https://rapidcode.ir">رپید کد - کتابخانه مجازی برنامه نویسان</a>

    <div class="container">

		<table>
			<thead>
				<tr>
					<th>نام</th>
					<th>نظر</th>
					<th>اعمال</th>
				</tr>
			</thead>

			<tbody>

				<?php

$comment_list = $db->row_select([

	"table" => "comment",
	"content" => "`post_id`=? AND `approved`=? ORDER BY `id` ASC",
	"types" => 'ii',
	"values" => [POST_ID, 0],

]);

foreach ($comment_list as $comment):

?>

               <tr>
					<td><?php echo $comment['fullname'] ?></td>
					<td><?php echo $comment['comment'] ?></td>
					<td>
						<button data-comment-id="<?php echo $comment['id'] ?>" data-action="approve" class="action" id="approve" onclick="actionFormHandler(event)">تایید</button>
						<button data-comment-id="<?php echo $comment['id'] ?>" data-action="delete" class="action" id="delete" onclick="actionFormHandler(event)">حذف</button>
					</td>
				</tr>


                <?php endforeach;?>


			</tbody>
		</table>

		<form id="form-action" action="" method="get">
			<input type="hidden" id="action" name="action" value="">
			<input type="hidden" id="comment-id" name="comment-id" value="" >
		</form>

    </div>


    <script src="app.js"></script>
</body>

</html>

دموی پروژه ساخت سیستم نظر دهی Ajax در PHP

قبل از اجرای برنامه وارد پوشه comment DATABASE to import شده دیتابیس را import کنید

دانلود پروژه سیستم نظر دهی Ajax در PHP

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید . لغو پاسخ

لیست نظرات

arghavan
ارور میده به این بخش ها مربوطه $this->stmt->close(); $this->mysqli->close(); $this->stmt->prepare($query); Fatal error: Uncaught mysqli_sql_exception: Unknown column 'approved' in 'where clause' in J:\xamp\htdocs\comment\comment-system\inc\class-DB.php:65 Stack trace: #0 J:\xamp\htdocs\comment\comment-system\inc\class-DB.php(65): mysqli_stmt->prepare('SELECT * FROM `...') #1 J:\xamp\htdocs\comment\comment-system\index.php(184): DB->row_select(Array) #2 {main} thrown in J:\xamp\htdocs\comment\comment-system\inc\class-DB.php on line 65 Fatal error: Uncaught Error: mysqli_stmt object is not fully initialized in J:\xamp\htdocs\comment\comment-system\inc\class-DB.php:26 Stack trace: #0 J:\xamp\htdocs\comment\comment-system\inc\class-DB.php(26): mysqli_stmt->close() #1 [internal function]: DB->__destruct() #2 {main} thrown in J:\xamp\htdocs\comment\comment-system\inc\class-DB.php on line 26
13 اسفند 1402 | 14:00:22
پاسخ

حسین باقری
درود ، احتمالا مقدار دهی درستی برای column های تیبل انجام ندادید یا از تیبل ضمیمه شده رو وارد دیتابیس نکردید . داخل پروژه وجود داره به نام ( comment DATABASE to import )
13 اسفند 1402 | 17:16:02
پاسخ

Hide

سلام وقت بخیر اسم table چیه ؟ و اینکه سورس کار‌نمیکنه

19 آذر 1401 | 19:13:58

پاسخ

حسین باقری
درود ، به 2 مورد باید توجه داشته باشید . 1- دیتابیسی با نام comment رو که در سورس پروژه هست وارد کنید و اطلاعات mysql رو متناسب با هاست تنظیم کنید . 2- پروژه روی یک دامنه مستقل مثل example.com اجرا بشه
19 آذر 1401 | 20:16:32
پاسخ

رضا

عالی بود

04 اسفند 1399 | 19:33:31

sara jafari

سلام وقتی دکمه ثبت زده میشه هیچ کامنتی ثبت نمیشه کلا کار نمیکنه

15 آذر 1399 | 20:42:24

حسین باقری
سلام. برنامه تست شده هست و به درستی کار می کنه مطمئن بشید که آدرس server رو برای api درست ثبت شده هست یا نه
17 آذر 1399 | 13:43:16
پاسخ

sara jafari
بله فقط فکر میکنم باید بجای button از نوع submit استفاده کنیم. ممنون از سایت خوبتون
22 آذر 1399 | 14:34:00
پاسخ

حسین باقری
بله ، خود button رو هم می تونیم به صورت submit داشته باشیم که پیشفرضش هم همینه
22 آذر 1399 | 15:31:46
پاسخ

مهدی
من هم همین مشکل رو دارم چه کاری باید بکنم؟(ادرس سرور برای api هم درست ثبت شده است)
14 اسفند 1399 | 17:54:49
پاسخ

حسین باقری
لطفا مجدد بررسی کنید احتمالا یک بخشی از آدرس رو درست وارد نکردید !
16 اسفند 1399 | 19:28:36
پاسخ