Crear, editar, actualizar y eliminar contenido en un sitio web es lo que hace que el sitio sea dinámico. Eso es lo que haremos 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, crea una base de datos con nombre cruel. En la base de datos sin procesar, 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í. así que 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:
No parece la mejor forma del mundo, ¿verdad? Arreglemos eso. Agregue esta línea directamente debajo de la etiqueta
<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 en él.
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 en el navegador nuevamente:
¡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.
Así que abre php_code.php y pega 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 su archivo index.php nuevamente y agregue este código justo debajo de la etiqueta
// ...
<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 decirle 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 encima 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 editar. 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, debemos poner los valores antiguos en el formulario para que se puedan modificar. 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 valor atributo de los campos del formulario.
También agregue un campo oculto para contener la identificación del registro que actualizaremos para que pueda ser reconocido en la base de datos únicamente 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