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

آموزش ساخت سیستم نظر دهی 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

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


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



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

ارسال نظر