Cómo crear un sistema de comentarios con PHP y AJAX

En este tutorial vamos a ver cómo crear un sistema de comentarios utilizando Ajax y PHP. Este sistema de comentarios cuenta con características como realizar respuestas en cualquier comentario añadido por cualquier usuario. Utilizaremos jQuery AJAX para añadir cualquier comentario o respuesta en la base de datos y mostrarlos en la zona pública. Al utilizar AJAX, proporcionará una experiencia fluida al usuario.

Cada comentario tendrá un ID único y este ID será utilizado para referirnos al elemento HTML que lo mostrará en la parte pública. Pasaremos el ID del comentario a la petición AJAX y así realizar operaciones relativas a los comentarios, como insertar respuestas.

Código HTML para mostrar comentarios

Este código mostrará los campos inputs para que el usuario pueda introducir su nombre y el comentario que quiera que se publique. Una vez se envía, se realizará la petición AJAX para añadir los datos en la base de datos. El código AJAX añadirá y agregará el comentario/respuesta enviada por el usuario después de las operaciones AJAX necesarias.

<div class="comment-form-container">
    <form id="frm-comment">
        <div class="input-row">
            <input type="hidden" name="comment_id" id="commentId"
                placeholder="Name" /> <input class="input-field"
                type="text" name="name" id="name" placeholder="Name" />
        </div>
        <div class="input-row">
            <textarea class="input-field" type="text" name="comment"
                id="comment" placeholder="Add a Comment">  </textarea>
        </div>
        <div>
            <input type="button" class="btn-submit" id="submitButton"
                value="Publish" />
            <div id="comment-message">Comments Added Successfully!</div>
        </div>

    </form>
</div>
<div id="output"></div>
<script>
	function postReply(commentId) {
		$('#commentId').val(commentId);
		$("#name").focus();
	}

	$("#submitButton").click(function() {
		$("#comment-message").css('display', 'none');
		var str = $("#frm-comment").serialize();

		$.ajax({
			url : "comment-add.php",
			data : str,
			type : 'post',
			success : function(response) {
				var result = eval('(' + response + ')');
				if (response) {
					$("#comment-message").css('display', 'inline-block');
					$("#name").val("");
					$("#comment").val("");
					$("#commentId").val("");
					listComment();
				} else {
					alert("Failed to add comments !");
					return false;
				}
			}
		});
	});

	$(document).ready(function() {
		listComment();
	});

	function listComment() {
		$
				.post(
						"comment-list.php",
						function(data) {
							var data = JSON.parse(data);

							var comments = "";
							var replies = "";
							var item = "";
							var parent = -1;
							var results = new Array();

							var list = $("<ul class='outer-comment'>");
							var item = $("<li>").html(comments);

							for (var i = 0; (i < data.length); i++) {
								var commentId = data[i]['comment_id'];
								parent = data[i]['parent_comment_id'];

								if (parent == "0") {
									comments = "<div class='comment-row'>"
											+ "<div class='comment-info'><span class='commet-row-label'>from</span> <span class='posted-by'>"
											+ data[i]['comment_sender_name']
											+ " </span> <span class='commet-row-label'>at</span> <span class='posted-at'>"
											+ data[i]['date']
											+ "</span></div>"
											+ "<div class='comment-text'>"
											+ data[i]['comment']
											+ "</div>"
											+ "<div><a class='btn-reply' onClick='postReply("
											+ commentId + ")'>Reply</a></div>"
											+ "</div>";

									var item = $("<li>").html(comments);
									list.append(item);
									var reply_list = $('<ul>');
									item.append(reply_list);
									listReplies(commentId, data, reply_list);
								}
							}
							$("#output").html(list);
						});
	}

	function listReplies(commentId, data, list) {
		for (var i = 0; (i < data.length); i++) {
			if (commentId == data[i].parent_comment_id) {
				var comments = "<div class='comment-row'>"
						+ " <div class='comment-info'><span class='commet-row-label'>from</span> <span class='posted-by'>"
						+ data[i]['comment_sender_name']
						+ " </span> <span class='commet-row-label'>at</span> <span class='posted-at'>"
						+ data[i]['date'] + "</span></div>"
						+ "<div class='comment-text'>" + data[i]['comment']
						+ "</div>"
						+ "<div><a class='btn-reply' onClick='postReply("
						+ data[i]['comment_id'] + ")'>Reply</a></div>"
						+ "</div>";
				var item = $("<li>").html(comments);
				var reply_list = $('<ul>');
				list.append(item);
				item.append(reply_list);
				listReplies(data[i].comment_id, data, reply_list);
			}
		}
	}
</script>

Código PHP para publicar comentarios/respuestas

En este código PHP, recibiremos la petición AJAX y añadiremos el comentario/respuesta publicado por el usuario. Una vez se agregue el comentario a la base de datos, el PHP se encargará de imprimir el comentario que será leído como una respuesta al script AJAX. Esta respuesta se adjuntará al contenedor HTML de los comentarios.

El siguiente código muestra el proceso de agregar y mostrar comentarios publicados por el usuario a través de AJAX.

comment-list.php

<?php
require_once ("db.php");

$sql = "SELECT * FROM tbl_comment ORDER BY parent_comment_id asc, comment_id asc";

$result = mysqli_query($conn, $sql);
$record_set = array();
while ($row = mysqli_fetch_assoc($result)) {
    array_push($record_set, $row);
}
mysqli_free_result($result);

mysqli_close($conn);
echo json_encode($record_set);
?>

comment-add.php

<?php
require_once ("db.php");
$commentId = isset($_POST['comment_id']) ? $_POST['comment_id'] : "";
$comment = isset($_POST['comment']) ? $_POST['comment'] : "";
$commentSenderName = isset($_POST['name']) ? $_POST['name'] : "";
$date = date('Y-m-d H:i:s');

$sql = "INSERT INTO tbl_comment(parent_comment_id,comment,comment_sender_name,date) VALUES ('" . $commentId . "','" . $comment . "','" . $commentSenderName . "','" . $date . "')";

$result = mysqli_query($conn, $sql);

if (! $result) {
    $result = mysqli_error($conn);
}
echo $result;
?>