JQuery biblioteca de JavaScriptLenguaje PHP

Agregar comentarios de edición mediante jQuery

Agregar comentarios de edición mediante jQuery. Las ventanas modales son los popup más utilizados para solicitar la entrada, edición y/o eliminación de un determinado registro. Sin embargo, en este artículo veremos cómo agregar comentarios haciendo uso de ventanas modal.

Hay varias maneras de mostrar los popovers de BootStrap, veamos una lista.

  1. Ventanas emergentes
  2. Cuadros de diálogo o superposiciones.

Por lo tanto, en esta entrada mostraremos el uso de cuadros de diálogo para mostrar el formulario agregar y/o editar un comentario.

¿Que necesito para que funcione este sistema?

Necesitaremos de una serie de recursos para que todo marche con normalidad.

  • Una biblioteca basada en jQuery Dialogify para mostrar la ventana modal.
  • jQuery Dialogify es un plugin fácil, ligero y personalizable.
  • Dialogify plugin permite a los usuarios incluir cualquier tipo de HTML en un cuadro de diálogo.

¿Cómo funciona el sistema de comentarios?

En este sistema de comentarios AJAX de PHP y MySQL, las ventanas modales se utilizan para mostrar el formulario HTML el cual nos permite ingresar información a la base de datos.

También, para la edición de un determinado comentario. Sin embargo, usa las funciones AJAX de jQuery se utilizan para implementar el sistema de comentarios basado en AJAX en PHP.

Cuando el usuario presiona el botón “Crear Comentario” desencadena el llamado al jQuery el cual automáticamente muestra la venta modal con el formulario HTML.

Agregar comentarios de edición mediante jQuery

A continuación, veremos una serie de procesos que nos servirán para entender la secuencia del sistema.

Base de datos (php_comentarios.sql)

Les dejare las consultas listas para ser ejecutados en el PHPMyAdmin con sus respectivos registros.

CREATE TABLE IF NOT EXISTS `tbl_comentarios` (
`id` int(11) NOT NULL,
  `nombres` varchar(150) NOT NULL,
  `website` varchar(255) NOT NULL,
  `contenido` text NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8 COMMENT='Tabla Comentarios';

INSERT INTO `tbl_comentarios` (`id`, `nombres`, `website`, `contenido`) VALUES
(1, 'Lenguaje PHP', 'http://php.net/', 'PHP es un lenguaje de código abierto muy popular especialmente adecuado para el desarrollo web y que puede ser incrustado en HTML.'),
(2, 'JavaScript', 'https://www.javascript.com/', 'JavaScript es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos'),
(3, 'Python', 'https://www.python.org/', 'Python es un lenguaje de programación interpretado cuya filosofía hace hincapié en una sintaxis que favorezca un código legible.');

-- Indices de la tabla `tbl_comentarios`

ALTER TABLE `tbl_comentarios`
 ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT de la tabla `tbl_comentarios`
--
ALTER TABLE `tbl_comentarios`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=4;

Página HTML con lista de comentarios.

Esta es la página principal de destino que carga los registros de la base de datos para ser mostrada en esta página. Por lo tanto, para poder cargar los registros nos apoyaremos en el ciclo WHILE para generar comentarios dinámicos.

Sin embargo, cada fila de comentarios tendrá una opción con un botón de edición. Ahora, al ejecutar el evento de clic de los controles “Agregar” y “Editar” activará el plugin Dislogify. Si desea una opción de eliminación en cada fila de comentarios, puede encontrar un ejemplo en el artículo vinculado.

<?php
require_once ('db.php');
?>
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Agregar comentarios de edición mediante jQuery Dialog | BaulPHP</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>

<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/sticky-footer-navbar.css" rel="stylesheet">
<script type="text/javascript" src="vendor/jquery/jquery-3.2.1.min.js"></script>

<script type="text/javascript" src="vendor/dialogify/dialog-polyfill.js"></script>
<script type="text/javascript" src="vendor/dialogify/dialogify.js"></script>

<script type="text/javascript"
    src="vendor/dialogify/dialogify.min.js?v2"></script>

<script type="text/javascript" src="js/editRecords.js"></script>

<link rel="stylesheet" type="text/css" media="all"
    href="vendor/dialogify/dialogify.css">
</head>

<body>
<header> 
  <!-- Fixed navbar -->
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="#">BaulPHP</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active"> <a class="nav-link" href="index.php">Inicio <span class="sr-only">(current)</span></a> </li>
      </ul>
      <form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Buscar" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Busqueda</button>
      </form>
    </div>
  </nav>
</header>

<!-- Begin page content -->

<div class="container">
  <h3 class="mt-5">Agregar comentarios de edición mediante jQuery Dialog</h3>
  <hr>
  <div class="row">
    <div class="col-12 col-md-10"> 
      <!-- Contenido -->
   
            <?php
            $selectQuery = "SELECT * FROM tbl_comentarios";
            $result = $conn->query($selectQuery);
            if ($result->num_rows > 0) {
                while ($row = $result->fetch_assoc()) {
                    ?>
                    <div class="comment-row">

            <div id="editFrame">

                <div id="name_val<?php echo $row['id']; ?>" style="font-weight:bold">
                                        <?php echo $row['nombres']; ?>
                                    </div>
                <div id="website_val<?php echo $row['id']; ?>" style="color: #006621;font-style: normal;">
                      <?php echo $row['website'];?>
                                    </div>

                <div id="content_val<?php echo $row['id']; ?>" class="comment-message">
                                        <?php echo $row['contenido']; ?>
                                    </div>
<input type='button' class="btn-edit" id="<?php echo $row['id']; ?>" value="Editar" onclick="edit_row('<?php echo $row['id']; ?>');" />

            </div>
        </div>

                    <?php
                }
            }
            ?><br>
            <input id="insert_button" type="button" class="btn btn-primary" value="Crear Comentario" />




      <!-- Fin Contenido --> 
    </div>
  </div>
  <!-- Fin row --> 
  
</div>
<!-- Fin container -->
<footer class="footer">
  <div class="container"> <span class="text-muted">
    <p>Códigos <a href="https://www.baulphp.com/" target="_blank">BaulPHP</a></p>
    </span> </div>
</footer>

<!-- Bootstrap core JavaScript
    ================================================== --> 
<script src="dist/js/bootstrap.min.js"></script> 
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>

jQuery codigo para llamar a funciones para agregar comentarios de edición

Todo el código de jQuery se encuentran en el archivo “js/editRecords. js“. Sin embargo, este archivo contiene los controladores de eventos y también incluye los controladores de acción de edición de registro. En este código, se inicializa el plugin “Dialogify” de jQuery y carga el formulario de agregar comentarios de edición correspondiente en el evento de clic de los controles de inserción y/o edición de registros MySQL.

$(document).ready(function () {
	var options = {
		    ajaxPrefix: ''
		};

    $('#insert_button').click(function () {
    
    		new Dialogify('add-form.php', options)
                .title('Create New Comment')
                .buttons([
                    {
                        text: 'Cancel',
                        click: function (e) {
                            console.log('cancel click');
                            this.close();
                        }
                    },
                    {
                        text: 'Okay',
                        type: Dialogify.BUTTON_PRIMARY,
                        click: function (e) {
                            var name = document.getElementById("username").value;
                            var website = document.getElementById("website").value;
                            var content = document.getElementById("new_content").value;
                            $.ajax
                                    ({
                                        type: 'post',
                                        url: 'comment-add.php',
                                        data: {
                                            insert_row: 'insert_row',
                                            name: name,
                                            website: website,
                                            content: content
                                        },
                                        success: function (response) {
                                            if (response != "")
                                            {
                                                var id = response;
                                                var row = "<div id='name_val" + id + "'>" + name + "</div><div id='website_val" + id + "'>" + website + "</div><div id='content_val" + id + "'>" + content + "</div><input type='button' class='edit_button' id='edit_button" + id + "' value='Edit' onclick='edit_row(" + id + ");'/>";
                                                $('#container').append(row);
                                                document.getElementById("username").value = "";
                                                document.getElementById("website").value = "";
                                                document.getElementById("new_content").value = "";
                                            }

                                            location.reload();
                                        }
                                    });
                            this.close();
                        }
                    }
                ]).show();
    });
});

function edit_row(id)
{
            var name = $.trim(document.getElementById("name_val" + id).innerHTML);
            var website = $.trim(document.getElementById("website_val" + id).innerHTML);
            var content = $.trim(document.getElementById("content_val" + id).innerHTML);
			localStorage.setItem('name',name);
			localStorage.setItem('website',website);
			localStorage.setItem('content',content);
			
		var options = {
		    ajaxPrefix: '',
			 
		};

    new Dialogify('edit-form.php', options)
            .title('Edit Comment')
            .buttons([
                {
                    text: 'Cancel',
                    click: function (e) {
                        console.log('cancel click');
                        this.close();
                    }
                },
                {
                    text: 'Okay',
                    type: Dialogify.BUTTON_PRIMARY,
                    click: function (e) {
					  					   
                        var name = $('#username').val();
                        var website = $('#website').val();
                        var content = $('#edit_content').val();
                        $.ajax
                                ({
                                    type: 'post',
                                    url: 'comment-edit.php',
                                    data: {
                                        edit_row: 'edit_row',
                                        id: id,
                                        name: name,
                                        website: website,
                                        content: content
                                    },
                                    success: function (response) {
                                        if (response == "success")
                                        {
                                            document.getElementById("name_val" + id).innerHTML = name;
                                            document.getElementById("website_val" + id).innerHTML = website;
                                            document.getElementById("content_val" + id).innerHTML = content;
                                        }
                                    }
                                });
                        this.close();

                    }
                }
            ]).show();
			
    $('#username').val(name);
    $('#website').val(website);
    $('#edit_content').val(content);
}

Personalizar sistema de comentarios de edición HTML

En esta sección, el agregar comentarios de edición de HTML. He utilizado el método de inicialización de la biblioteca Dialogify para cargar un origen externo. Al especificar el origen de archivo externo, el contenido HTML se cargará a la ventana modal mostrada por el plugin Dialogify.

a) Fichero: Add-Form. php

El archivo Add-Form. php se escribe para mostrar el formulario de agregar comentario en una ventana de diálogo. Este es el formulario HTML que contiene el nombre, el sitio web y los campos de mensaje de comentario para obtener la entrada del usuario. Al hacer clic en el botón OK, estos campos se cargan en el objeto local y se envían al script del lado del servidor para procesar la acción de agregar.

Agregar comentarios con jQuery MySQL
Agregar comentarios con jQuery MySQL
<input type="text" class="text-field form-control" id="username" placeholder="Nombres"/>
<input type="text" class="text-field form-control" id="website" placeholder="Website"/>
<textarea type="text" class="text-field form-control" id="new_content" placeholder="Contenido"></textarea>

b) Fichero: Edit-Form. php

El archivo Edit-Form. php también contiene los mismos tres campos que en el formulario de comentario-agregar. Sin embargo, los datos de comentario se rellenarán previamente en los campos de formulario de edición. Esta pre-población se realiza mediante programación a través de jQuery. El nombre, el sitio web y los datos de contenido de comentario se tienen desde el objeto local que se crea una instancia antes.

<input type="text" class="text-field form-control" id="username"
    placeholder="Name" />
<input type="text" class="text-field form-control" id="website" placeholder="link" />
<textarea type="text" class="text-field form-control" id="edit_content"
 placeholder="content"></textarea>

<script>
 $(document).ready(function () {
     var name = localStorage.getItem('name');
	 var website = localStorage.getItem('website');
	 var content = localStorage.getItem('content');
    $('#username').val(name);
    $('#website').val(website);
    $('#edit_content').val(content);
 });
 </script>

Código PHP para añadir editar comentarios con base de datos en PHP los comentarios agregan solicitud de edición y los parámetros se reciben de la llamada AJAX. Basándose en el tipo de solicitud, la consulta se creará para realizar la acción de agregar o editar en la base de datos de comentarios. Los siguientes fragmentos de código muestran cómo se realiza la acción agregar comentarios de edición y se actualiza a la base de datos.

Me conecto a la base de datos y utilizo la instrucción preparada de MySQLi para la consulta INSERT o UPDATE para realizar la acción solicitada en la entidad de comentario. Los datos publicados y su tipo se utilizan para compilar el valor de parámetro de consulta y el tipo de parámetro param respectivamente.

c) Fichero: Comment-Add. php

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

if (isset($_POST['insert_row'])) {
    $sql = $conn->prepare("INSERT INTO tbl_comments (name,website,content) VALUES (?, ?, ?)");
    $name = $_POST['name'];
    $website = $_POST['website'];
    $content = $_POST['content'];
    $sql->bind_param("sss", $name, $website, $content);
    if ($sql->execute()) {
        $success_message = "Added Successfully";
    } else {
        $error_message = "Problem in Adding New Record";
    }
    $sql->close();
    $conn->close();
    exit();
}
?>

d) Fichero: comment-edit.php

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

if (isset($_POST['edit_row'])) {
    $sql = $conn->prepare("UPDATE tbl_comments SET name=? , website=? , content=?  WHERE id=?");
    $id = $_POST['id'];
    $name = $_POST['name'];
    $website = $_POST['website'];
    $content = $_POST['content'];

    $sql->bind_param("sssi", $name, $website, $content, $id);
    if ($sql->execute()) {
        print "success";
    } else {
        $error_message = "Problem in Editing Record";
    }
}
?>

Script de base de datos

Agregar comentarios de edición con jQuery

El resultado final. Esta captura muestra el formulario, Comentarios, agregar en una ventana modal mediante la biblioteca Dialogify. El modal de edición también tendrá el mismo aspecto, pero con el nombre de los datos de comentarios rellenados previamente, el sitio web y el contenido.

Resultado final en el navegador.

CONCLUSIÓN

  • El uso de librerías externas en muy recomendable cuando estamos realizando algún proyecto. Por tal motivo en este artículo veremos cómo generar comentarios dinámicos sin recargar la página, ahorrando recursos del servidor.
  • Usaremos ventanas modales para insertar comentario y/o editar comentario.
  • Su uso es muy recomendado y les dejare un ejemplo completo para que puedan implementarlo en sus proyectos web.

DESCARGAR SCRIPT

Pueden descargar el script del ejemplo completo incluido la base de datos.

[sociallocker id=5099] Descargar Ahora [/sociallocker]

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

Un comentario

  1. hola realmente es muy bueno. lo implemente como preguntas y respuestas (website=pregunta / content= respuesta) solo que no se como hacer que deshabilite el boton editar al no estar vacio content. podrias ayudarme. gracias

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba