Ajax CRUD [CReate Update Delete] con base de datos PHP y MySQL

En este tutorial, creamos un sistema de comentarios básico que consiste en un formulario con dos campos de entrada: nombre y comentario. Un usuario puede agregar un comentario en la página sin que la página se vuelva a cargar (usando Ajax) y este comentario se almacena en la tabla de comentarios en la base de datos.

Todos los comentarios de la base de datos se muestran en la página y el usuario puede eliminar un comentario simplemente colocando el cursor sobre él y haciendo clic en el botón ‘x’ que aparece en el comentario. Esto elimina el comentario sin volver a cargar la página también.

Esta aplicación requiere solo una tabla de base de datos. En este caso, llamemos a la mesa comentarios.

Entonces, crea una base de datos llamada ajax_crud. En esa base de datos, cree una tabla con los siguientes campos:

id – int (11)
nombre – varchar (255)
comentario – texto

A continuación, creamos los archivos del proyecto. Vamos a crear cuatro archivos a saber:

Un archivo index.php que muestra los comentarios y los comentarios de
Un server.php que contiene el código PHP responsable de comunicarse con la base de datos a través de consultas.
Un archivo scripst.js que es donde se encuentra todo el código Ajax y JQuery. Aquí es donde se realizan las llamadas ajax que se realizan sin recargar la página.
Un archivo styles.css para contener los estilos CSS para agregar algo de belleza a nuestra página

Ahora, antes de continuar, hay un archivo más que debemos agregar. Ajax es una tecnología de JQuery y, como ya habrá adivinado, vamos a necesitar JQuery. Descargue JQuery del sitio web de JQuery y agréguelo a la raíz de su aplicación.

Bien, ahora en nuestra aplicación tenemos cinco archivos. Sin embargo, todavía están vacíos.

Codifiquemos ahora, ¿de acuerdo?

Abra el archivo index.php y coloque este código en él:

<?php include('server.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Insert and Retrieve data from MySQL database with ajax</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="wrapper">
  	<?php echo $comments; ?>
  	<form class="comment_form">
      <div>
        <label for="name">Name:</label>
      	<input type="text" name="name" id="name">
      </div>
      <div>
      	<label for="comment">Comment:</label>
      	<textarea name="comment" id="comment" cols="30" rows="5"></textarea>
      </div>
      <button type="button" id="submit_btn">POST</button>
      <button type="button" id="update_btn" style="display: none;">UPDATE</button>
  	</form>
  </div>
</body>
</html>
<!-- Add JQuery -->
<script src="jquery.min.js"></script>
<script src="scripts.js"></script>

Nada fuera de lo común, ¿verdad?

Solo tenga en cuenta que hemos incluido enlaces a nuestro archivo styles.css, jquery.min.js (que se descargó) y nuestro archivo scripts.js.

Ahora abra el archivo styles.css y pegue este código CSS en él:

.wrapper {
  width: 45%;
  height: auto;
  margin: 10px auto;
  border: 1px solid #cbcbcb;
  background: white;
}
/*
* COMMENT FORM
**/
.comment_form {
  width: 80%;
  margin: 100px auto;
  border: 1px solid green;
  background: #fafcfc;
  padding: 20px;
}
.comment_form label {
  display: block;
  margin: 5px 0px 5px 0px;
}
.comment_form input, textarea {
  padding: 5px;
  width: 95%;
}
#submit_btn, #update_btn {
  padding: 8px 15px;
  color: white;
  background: #339;
  border: none;
  border-radius: 4px;
  margin-top: 10px;
}
#update_btn {
  background: #1c7600;
}
/*
* COMMENT DISPLAY AREA
**/
#display_area {
  width: 90%;
  padding-top: 15px;
  margin: 10px auto;
}
.comment_box {
  cursor: default;
  margin: 5px;
  border: 1px solid #cbcbcb;
  padding: 5px 10px;
  position: relative;
}
.delete {
  position: absolute;
  top: 0px;
  right: 3px;
  color: red;
  display: none;
  cursor: pointer;
}
.edit {
  position: absolute;
  top: 0px;
  right: 45px;
  color: green;
  display: none;
  cursor: pointer;
}
.comment_box:hover .edit, .comment_box:hover .delete {
  display: block;
}
.comment_text {
  text-align: justify;
}
.display_name {
  color: blue;
  padding: 0px;
  margin: 0px 0px 5px 0px;
}

Eso es todo por el CSS. Ahora los guiones.

Abra scripts.js y pegue este código dentro de él:

$(document).ready(function(){
  // save comment to database
  $(document).on('click', '#submit_btn', function(){
    var name = $('#name').val();
    var comment = $('#comment').val();
    $.ajax({
      url: 'server.php',
      type: 'POST',
      data: {
        'save': 1,
        'name': name,
        'comment': comment,
      },
      success: function(response){
        $('#name').val('');
        $('#comment').val('');
        $('#display_area').append(response);
      }
    });
  });
  // delete from database
  $(document).on('click', '.delete', function(){
  	var id = $(this).data('id');
  	$clicked_btn = $(this);
  	$.ajax({
  	  url: 'server.php',
  	  type: 'GET',
  	  data: {
    	'delete': 1,
    	'id': id,
      },
      success: function(response){
        // remove the deleted comment
        $clicked_btn.parent().remove();
        $('#name').val('');
        $('#comment').val('');
      }
  	});
  });
  var edit_id;
  var $edit_comment;
  $(document).on('click', '.edit', function(){
  	edit_id = $(this).data('id');
  	$edit_comment = $(this).parent();
  	// grab the comment to be editted
  	var name = $(this).siblings('.display_name').text();
  	var comment = $(this).siblings('.comment_text').text();
  	// place comment in form
  	$('#name').val(name);
  	$('#comment').val(comment);
  	$('#submit_btn').hide();
  	$('#update_btn').show();
  });
  $(document).on('click', '#update_btn', function(){
  	var id = edit_id;
  	var name = $('#name').val();
  	var comment = $('#comment').val();
  	$.ajax({
      url: 'server.php',
      type: 'POST',
      data: {
      	'update': 1,
      	'id': id,
      	'name': name,
      	'comment': comment,
      },
      success: function(response){
      	$('#name').val('');
      	$('#comment').val('');
      	$('#submit_btn').show();
      	$('#update_btn').hide();
      	$edit_comment.replaceWith(response);
      }
  	});		
  });
});

El código en scripst.js como se mencionó anteriormente son las llamadas ajax que se realizan al archivo server.php. La primera parte del script envía una solicitud con datos al servidor cuando un usuario hace clic en el botón de publicación. El segundo envía una solicitud con un comment_id para identificar el comentario específico en la base de datos por ese id y eliminarlo.

Para el código del servidor, abra server.php y pegue el siguiente código en él:

<?php 
  $conn = mysqli_connect('localhost', 'root', '', 'ajax');
  if (!$conn) {
    die('Connection failed ' . mysqli_error($conn));
  }
  if (isset($_POST['save'])) {
    $name = $_POST['name'];
  	$comment = $_POST['comment'];
  	$sql = "INSERT INTO comments (name, comment) VALUES ('{$name}', '{$comment}')";
  	if (mysqli_query($conn, $sql)) {
  	  $id = mysqli_insert_id($conn);
      $saved_comment = '<div class="comment_box">
      		<span class="delete" data-id="' . $id . '" >delete</span>
      		<span class="edit" data-id="' . $id . '">edit</span>
      		<div class="display_name">'. $name .'</div>
      		<div class="comment_text">'. $comment .'</div>
      	</div>';
  	  echo $saved_comment;
  	}else {
  	  echo "Error: ". mysqli_error($conn);
  	}
  	exit();
  }
  // delete comment fromd database
  if (isset($_GET['delete'])) {
  	$id = $_GET['id'];
  	$sql = "DELETE FROM comments WHERE id=" . $id;
  	mysqli_query($conn, $sql);
  	exit();
  }
  if (isset($_POST['update'])) {
  	$id = $_POST['id'];
  	$name = $_POST['name'];
  	$comment = $_POST['comment'];
  	$sql = "UPDATE comments SET name='{$name}', comment='{$comment}' WHERE id=".$id;
  	if (mysqli_query($conn, $sql)) {
  		$id = mysqli_insert_id($conn);
  		$saved_comment = '<div class="comment_box">
  		  <span class="delete" data-id="' . $id . '" >delete</span>
  		  <span class="edit" data-id="' . $id . '">edit</span>
  		  <div class="display_name">'. $name .'</div>
  		  <div class="comment_text">'. $comment .'</div>
  	  </div>';
  	  echo $saved_comment;
  	}else {
  	  echo "Error: ". mysqli_error($conn);
  	}
  	exit();
  }

  // Retrieve comments from database
  $sql = "SELECT * FROM comments";
  $result = mysqli_query($conn, $sql);
  $comments = '<div id="display_area">'; 
  while ($row = mysqli_fetch_array($result)) {
  	$comments .= '<div class="comment_box">
  		  <span class="delete" data-id="' . $row['id'] . '" >delete</span>
  		  <span class="edit" data-id="' . $row['id'] . '">edit</span>
  		  <div class="display_name">'. $row['name'] .'</div>
  		  <div class="comment_text">'. $row['comment'] .'</div>
  	  </div>';
  }
  $comments .= '</div>';
?>

Esto nos lleva al final de este tutorial.

Gracias por seguir esta publicación. Espero que te haya ayudado. Si tiene alguna inquietud o comentario, simplemente colóquelos en la sección de comentarios a continuación.

¡Disfruta tu día!

Relacionado:

4.5/5 - (487 votos)

Relacionado:

Deja una respuesta Cancelar la respuesta

Entradas recientes

Archivos

Categorías

Meta

Relacionado:

Related Posts

Uso de Process Monitor (ProcMon) para rastrear cambios en archivos y registros – 2xsoftware

¿Cómo migrar perfiles de usuario con la herramienta de migración de estado de usuario (USMT) en Windows 10? – 2xsoftware

¿Cómo cerrar la sesión del usuario de forma remota con la línea de comandos? – 2xsoftware

Deja una respuesta Cancelar la respuesta

Entradas recientes

Archivos

Categorías

Meta