Post Top Ad

Your Ad Spot

jueves, 7 de mayo de 2020

PHP CRUD Cree, edite, actualice y elimine publicaciones con la base de datos MySQL

Crear, editar, actualizar y eliminar contenido en un sitio web es lo que hace que el sitio sea dinámico. Eso es lo que vamos a hacer en esta publicación. 
Un usuario que visite nuestro sitio podrá crear publicaciones que se guardarán en una base de datos mysql, recuperar las publicaciones de la base de datos y mostrarlas en la página web. Cada publicación se mostrará con un botón de edición y eliminación para permitir al usuario actualizar las publicaciones y eliminarlas.
Primero, cree una base de datos llamada crud. En la base de datos crud, cree una tabla llamada  info.  La tabla de información debe tener las siguientes columnas:
  • id - int (11)
  • nombre - varchar (100)
  • dirección - varchar (100)
¡Ladrar! Solo dos campos. Estoy tratando de mantener las cosas simples aquí. entonces, pasemos al siguiente paso.
Cree un archivo llamado index.php y pegue en él el siguiente código:
<!DOCTYPE html>
<html>
<head>
 <title>CRUD: CReate, Update, Delete PHP MySQL</title>
</head>
<body>
 <form method="post" action="server.php" >
  <div class="input-group">
   <label>Name</label>
   <input type="text" name="name" value="">
  </div>
  <div class="input-group">
   <label>Address</label>
   <input type="text" name="address" value="">
  </div>
  <div class="input-group">
   <button class="btn" type="submit" name="save" >Save</button>
  </div>
 </form>
</body>
</html>
Si guarda y abre el sitio en su navegador, obtendrá algo como esto:
Formulario HTML
No se ve como la mejor forma del mundo, ¿verdad? Vamos a arreglar eso. Agregue esta línea directamente debajo de la etiqueta <title> en la sección de cabecera de su archivo index.php:
<link rel="stylesheet" type="text/css" href="style.css">
Ese es el enlace para cargar el estilo desde el archivo de hoja de estilo. Creemos el archivo styles.css y agreguemos este código de estilo.
body {
    font-size: 19px;
}
table{
    width: 50%;
    margin: 30px auto;
    border-collapse: collapse;
    text-align: left;
}
tr {
    border-bottom: 1px solid #cbcbcb;
}
th, td{
    border: none;
    height: 30px;
    padding: 2px;
}
tr:hover {
    background: #F5F5F5;
}

form {
    width: 45%;
    margin: 50px auto;
    text-align: left;
    padding: 20px; 
    border: 1px solid #bbbbbb; 
    border-radius: 5px;
}

.input-group {
    margin: 10px 0px 10px 0px;
}
.input-group label {
    display: block;
    text-align: left;
    margin: 3px;
}
.input-group input {
    height: 30px;
    width: 93%;
    padding: 5px 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid gray;
}
.btn {
    padding: 10px;
    font-size: 15px;
    color: white;
    background: #5F9EA0;
    border: none;
    border-radius: 5px;
}
.edit_btn {
    text-decoration: none;
    padding: 2px 5px;
    background: #2E8B57;
    color: white;
    border-radius: 3px;
}

.del_btn {
    text-decoration: none;
    padding: 2px 5px;
    color: white;
    border-radius: 3px;
    background: #800000;
}
.msg {
    margin: 30px auto; 
    padding: 10px; 
    border-radius: 5px; 
    color: #3c763d; 
    background: #dff0d8; 
    border: 1px solid #3c763d;
    width: 50%;
    text-align: center;
}
Ahora revisemos nuestro formulario nuevamente en el navegador:
¡Eso es mejor! 
Por lo general, me gusta separar mi código HTML de mi código PHP tanto como sea posible. Considero que es una buena práctica. En esa nota, creemos otro archivo llamado php_code.php donde implementamos todas las funcionalidades de php como conectarse a la base de datos, consultar la base de datos y similares.
Entonces abra php_code.php y pegue el siguiente código en él:
<?php 
 session_start();
 $db = mysqli_connect('localhost', 'root', '', 'crud');

 // initialize variables
 $name = "";
 $address = "";
 $id = 0;
 $update = false;

 if (isset($_POST['save'])) {
  $name = $_POST['name'];
  $address = $_POST['address'];

  mysqli_query($db, "INSERT INTO info (name, address) VALUES ('$name', '$address')"); 
  $_SESSION['message'] = "Address saved"; 
  header('location: index.php');
 }

// ...
Ahora incluya este archivo en la parte superior (la primera línea) de su archivo index.php. Al igual que:
<?php  include('server.php'); ?>
En este punto, todo lo que hace este código es conectarse a la base de datos, inicializar algunas variables y guardar los datos enviados desde el formulario a la base de datos en la información que creamos anteriormente. Esa es solo la parte CReate de CRUD. Procedamos con los demás.
Ahora visite nuevamente su archivo index.php y agregue este código justo debajo de la etiqueta <body>:
// ...
<body>
<?php if (isset($_SESSION['message'])): ?>
 <div class="msg">
  <?php 
   echo $_SESSION['message']; 
   unset($_SESSION['message']);
  ?>
 </div>
<?php endif ?>
Este código muestra un mensaje de confirmación para indicarle al usuario que se ha creado un nuevo registro en la base de datos. 
Para recuperar los registros de la base de datos y mostrarlos en la página, agregue este código inmediatamente arriba del formulario de entrada:
<?php $results = mysqli_query($db, "SELECT * FROM info"); ?>

<table>
 <thead>
  <tr>
   <th>Name</th>
   <th>Address</th>
   <th colspan="2">Action</th>
  </tr>
 </thead>
 
 <?php while ($row = mysqli_fetch_array($results)) { ?>
  <tr>
   <td><?php echo $row['name']; ?></td>
   <td><?php echo $row['address']; ?></td>
   <td>
    <a href="index.php?edit=<?php echo $row['id']; ?>" class="edit_btn" >Edit</a>
   </td>
   <td>
    <a href="server.php?del=<?php echo $row['id']; ?>" class="del_btn">Delete</a>
   </td>
  </tr>
 <?php } ?>
</table>

<form>
    // ...
Creemos un nuevo registro y veamos si esto funciona:
..¡¡y voilá!! ¡Funciona perfecto!
Ahora pasamos a la edición. En la parte superior de su archivo index.php (inmediatamente después de la declaración de inclusión) agregue el siguiente código:
<?php 
 if (isset($_GET['edit'])) {
  $id = $_GET['edit'];
  $update = true;
  $record = mysqli_query($db, "SELECT * FROM info WHERE id=$id");

  if (count($record) == 1 ) {
   $n = mysqli_fetch_array($record);
   $name = $n['name'];
   $address = $n['address'];
  }
 }
?>
Al editar un registro de base de datos, necesitamos poner los valores antiguos en el formulario para que puedan modificarse. Para hacerlo, modifiquemos nuestros campos de entrada en el formulario y establezcamos esos valores tomados de la base de datos ($ nombre, $ dirección) como valores al  atributo de valor de los campos del formulario.
Agregue también un campo oculto para contener la identificación del registro que actualizaremos para que pueda reconocerse en la base de datos de manera única por su identificación. Esto lo explica mejor:
// newly added field
<input type="hidden" name="id" value="<?php echo $id; ?>">

// modified form fields
<input type="text" name="name" value="<?php echo $name; ?>">
<input type="text" name="address" value="<?php echo $address; ?>">
Recuerde que todo eso está en la entrada <form>.
Ahora, si hacemos clic en el botón editar en un registro particular de la base de datos, los valores se completarán en el formulario y podremos editarlos. Como estamos editando en la misma forma que cuando estamos creando, tenemos que poner una condición que determine el botón apropiado que se mostrará. Por ejemplo, al editar, mostramos el botón de actualización en el formulario y al crear, mostramos el botón Guardar. Hacemos esto usando la variable de actualización  que es booleana. Cuando la actualización es verdadera, se muestra el botón de actualización y, si es falso, se muestra el botón Guardar.
Reemplace su botón de guardar en el formulario de esta manera:
Reemplazar ..
<button class="btn" type="submit" name="save" >Save</button>
 con...
<?php if ($update == true): ?>
 <button class="btn" type="submit" name="update" style="background: #556B2F;" >update</button>
<?php else: ?>
 <button class="btn" type="submit" name="save" >Save</button>
<?php endif ?>
Ahora, si ejecutamos esto en el navegador y hacemos clic en el botón editar, obtenemos esto:
Ahora puede ver que se muestra el botón de actualización. Agreguemos el código que se ejecutará cuando se haga clic en este botón.
Abra el archivo php_code.php y agregue este código en el botón:
// ... 

if (isset($_POST['update'])) {
 $id = $_POST['id'];
 $name = $_POST['name'];
 $address = $_POST['address'];

 mysqli_query($db, "UPDATE info SET name='$name', address='$address' WHERE id=$id");
 $_SESSION['message'] = "Address updated!"; 
 header('location: index.php');
}
Ahora cambie los valores en el formulario y haga clic en el botón Actualizar. 
¡Excelente!
Una última cosa: eliminar registros. Simplemente agregue este código al final de su archivo php_code.php y estará listo:
if (isset($_GET['del'])) {
 $id = $_GET['del'];
 mysqli_query($db, "DELETE FROM info WHERE id=$id");
 $_SESSION['message'] = "Address deleted!"; 
 header('location: index.php');
}
Si hace clic en el botón Eliminar, elimina el registro de la base de datos y muestra el mensaje al igual que las otras acciones.

Curso recomendado de Udemy: el curso  profesional PHP MySQL completo con 5 proyectos

 

Conclusión

Esto nos lleva al final de este tutorial. Espero que haya sido útil y valga la pena. Me siento muy honrado por su paciencia en haber seguido esto hasta el final. Si te gusta este tutorial, compártelo con tus amigos haciendo clic en cualquiera de los íconos de redes sociales a continuación. No olvide consultar mis otros tutoriales en este sitio. 
Gracias

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas