Post Top Ad

Your Ad Spot

jueves, 7 de mayo de 2020

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

En este tutorial, creamos un sistema básico de comentarios 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 en la base de datos se muestran en la página y el usuario puede eliminar un comentario simplemente pasando 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, simplemente llamemos a los comentarios de la tabla 
Entonces, cree 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:
  1. Un archivo index.php que muestra los comentarios y los comentarios de
  2. Un server.php que contiene el código PHP responsable de comunicarse con la base de datos a través de consultas
  3. 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 recarga de página.
  4. 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 JQuery y, como ya habrás adivinado, necesitaremos JQuery. Descargue JQuery del sitio web de JQuery y agréguelo en 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 nuestros estilos.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 anterior como se mencionó anteriormente es las llamadas ajax que se realizan en el 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 publicar. El segundo envía una solicitud que tiene un comment_id para identificar el comentario específico en la base de datos por esa identificación 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 preocupación o comentario, simplemente colóquelos en la sección de comentarios a continuación. 
¡Disfruta tu día!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas