![Ajax CRUD [CReate Update Delete] con base de datos PHP y MySQL](https://2xsoftware.es/wp-content/uploads/2021/12/ajax_crud.png.2017-10-06.1507315208.png)
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!