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 este post.
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 editar y eliminar para permitir que el usuario actualice las publicaciones y también las elimine.
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:
-
identificación - 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, obtiene algo como esto:
No parece la mejor forma del mundo, ¿verdad? Arreglemos eso. Agregue esta línea directamente debajo de la etiqueta
en la sección principal de su archivo index.php:</P> <pre><code><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <p>
Ese es el enlace para cargar el estilo desde el archivo de hoja de estilo. Vamos a crear el archivo styles.css y agregarle este código de estilo.</P> <pre><code>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;
}</code></pre> <p>
Ahora revisemos nuestro formulario en el navegador nuevamente:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463381.png" /></P> <p>
¡Eso es mejor! </P> <p>
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.</P> <p>
Así que abra php_code.php y pegue el siguiente código en él:</P> <pre><code><?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');
}
// ...</code></pre> <p>
Ahora incluya este archivo en la parte superior (la primera línea) de su archivo index.php. Así:</P> <pre><code><?php include('server.php'); ?></code></pre> <p>
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 CREAR de CRUD. Sigamos con los demás.</P> <p>
Ahora visite nuevamente su archivo index.php y agregue este código justo debajo de la etiqueta <body>:</P> <pre><code>// ...
<body>
<?php if (isset($_SESSION['message'])): ?>
<div class="msg">
<?php
echo $_SESSION['message'];
unset($_SESSION['message']);
?>
</div>
<?php endif ?></code></pre> <p>
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. </P> <p>
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:</P> <pre><code><?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>
// ...</code></pre> <p>
Creemos un nuevo registro y veamos si esto funciona:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463338.png" /></P> <p>
..¡¡y voilá!! ¡Funciona perfecto!</P> <p>
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:</P> <pre><code><?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'];
}
}
?></code></pre> <p>
Al editar un registro de la base de datos, necesitamos poner los valores antiguos en el formulario para que puedan ser modificados. Para hacerlo, modifiquemos nuestros campos de entrada en el formulario y establezcamos los valores tomados de la base de datos ($nombre, $dirección) como valores para el <strong>valor</strong> atributo de los campos del formulario.</P> <p>
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:</P> <pre><code>// 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; ?>"></code></pre> <p>
Recuerde que todo eso está en el <formulario> de entrada.</P> <p>
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. Dado que estamos editando en el mismo formulario 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 actualizar en el formulario y al crear, mostramos el botón de guardar. Hacemos esto usando la <strong>actualización </strong> variable que es booleana. Cuando la actualización es verdadera, se muestra el botón de actualización y, si es falsa, se muestra el botón de guardar.</P> <p>
Reemplace su botón Guardar en el formulario de esta manera:</P> <p>
Reemplazar ..</P> <pre><code><button class="btn" type="submit" name="save" >Save</button></code></pre> <p>
con...</P> <pre><code><?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 ?></code></pre> <p>
Ahora, si ejecutamos esto en el navegador y hacemos clic en el botón de edición, obtenemos esto:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463388.png" /></P> <p>
Ahora puede ver que es el botón de actualización que se muestra. Agreguemos el código que se ejecutará cuando se haga clic en este botón.</P> <p>
Abra el archivo php_code.php y agregue este código en el botón:</P> <pre><code>// ...
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');
}</code></pre> <p>
Ahora cambie los valores en el formulario y haga clic en el botón Actualizar. </P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463390.png" /></P> <p>
¡Genial!</P> <p>
Una última cosa:borrar registros. Simplemente agregue este código al final de su archivo php_code.php y estará listo para comenzar:</P> <pre><code>if (isset($_GET['del'])) {
$id = $_GET['del'];
mysqli_query($db, "DELETE FROM info WHERE id=$id");
$_SESSION['message'] = "Address deleted!";
header('location: index.php');
}</code></pre> <p>
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.</P> <p>
</P> <h3> </h3> <h2>Conclusión</h2> <p>
Esto nos lleva al final de este tutorial. Espero que haya sido útil y valga la pena su tiempo. Me siento muy honrado por su paciencia al 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 olvides revisar mis otros tutoriales en este sitio. </P> <p>
Gracias</P> <br>
</section>
</article>
<section id="turn-page" class="flexcenter">
<div class="page up flexalign">
<i class="prev"></i>
<a class='LinkPrevArticle' href='http://www.sqldat.com/es/ges/rpl/1001019451.html' >Completo sistema de registro de usuarios utilizando PHP y base de datos MySQL </a>
</div>
<div class="page down flexalign">
<a class='LinkNextArticle' href='http://www.sqldat.com/es/ges/rpl/1001019453.html' >Cómo subir y descargar archivos PHP y MySQL </a>
<i class="next"></i>
</div>
</section>
<div class="ad5">
<script language='javascript' src='http://www.sqldat.com/css/ad/2.js'></script>
</div>
<section class="list2">
<ul class="flexbetween">
<li class="img_article flexbetween">
<div class="ibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051413511058_S.jpg' width='300' height='220' border='0'>
</div>
<section>
<a href="https://www.sqldat.com/es/ges/rpl/1001019975.html">
<p class="row row-3">Cómo obtener nuevos usuarios por día en MySQL </p>
</a>
</section>
</li>
<li class="img_article flexbetween">
<div class="ibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051209133292_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://www.sqldat.com/es/ges/ljr/1001015454.html">
<p class="row row-3">¿Qué es SQL Server Management Studio (SSMS)? </p>
</a>
</section>
</li>
<li class="img_article flexbetween">
<div class="ibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051014351053_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://www.sqldat.com/es/ges/rpl/1001000515.html">
<p class="row row-3">Cómo eliminar una base de datos en MySQL/MariaDB </p>
</a>
</section>
</li>
<li class="img_article flexbetween">
<div class="ibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051214360814_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://www.sqldat.com/es/ges/wul/1001016881.html">
<p class="row row-3">Cómo configurar la fragmentación de PostgreSQL con ClusterControl </p>
</a>
</section>
</li>
</ul>
</section>
</section>
<aside class="right">
<section class="share">
<div class="share_title">
<i></i>
<h2>Cuota</h2>
</div>
<ul class="share_ico flexstart">
<li><a class="facebook" title="Share on Facebook" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://www.sqldat.com/es/ges/rpl/1001019452.html"></a></li>
<li><a class="twitter" title="Tweet" target="_blank" href="https://twitter.com/intent/tweet?source=http://www.sqldat.com/es/ges/rpl/1001019452.html&text=PHP CRUD Crea, edita, actualiza y elimina publicaciones con la base de datos MySQL:http://www.sqldat.com/es/ges/rpl/1001019452.html"></a></li>
<li><a class="linked-in" title="Share on LinkedIn" target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=http://www.sqldat.com/es/ges/rpl/1001019452.html&title=PHP CRUD Crea, edita, actualiza y elimina publicaciones con la base de datos MySQL&summary=&source=http://www.sqldat.com/es/ges/rpl/1001019452.html"></a></li>
<li><a class="print" title="Print" target="" href="javascript:window.print && window.print();"></a></li>
</ul>
</section>
<section class="type_list">
<ol>
<li><a class='childclass' href='http://www.sqldat.com/es/ges/jhe/' target="_self">Database</a></li> <li><a class='childclass' href='http://www.sqldat.com/es/ges/rpl/' target="_self">Mysql</a></li> <li><a class='childclass' href='http://www.sqldat.com/es/ges/ome/' target="_self">Oracle</a></li> <li><a class='childclass' href='http://www.sqldat.com/es/ges/ljr/' target="_self">Sqlserver</a></li> <li><a class='childclass' href='http://www.sqldat.com/es/ges/wul/' target="_self">PostgreSQL</a></li> <li><a class='childclass' href='http://www.sqldat.com/es/ges/uss/' target="_self">Access</a></li> <li><a class='childclass' href='http://www.sqldat.com/es/ges/ywe/' target="_self">SQLite</a></li> <li><a class='childclass' href='http://www.sqldat.com/es/ges/igb/' target="_self">MariaDB</a></li>
</ol>
</section>
<section class="list1 article1_list">
<ul class="flexbetween">
<li>
<section class="flexalign">
<div class="ibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051215051718_S.png' width='300' height='220' border='0'>
</div>
<a href="https://www.sqldat.com/es/ges/rpl/1001017114.html">
<p class="row row-3">
Cómo instalar dbWatch para monitorear el rendimiento de MySQL en Linux </p>
</a>
</section>
<ol>
<li class="flexstart">
<a href="https://www.sqldat.com/es/ges/rpl/1001014502.html">
<p class="row row-2">
Solucione el "ERROR 1136 (21S01):el recuento de columnas no coincide con el recuento de valores en la fila 2" al usar la instrucción VALUES en MySQL </p>
</a>
</li>
<li class="flexstart">
<a href="https://www.sqldat.com/es/ges/rpl/1001003213.html">
<p class="row row-2">
¿Es mysqli_real_escape_string suficiente para evitar la inyección de SQL u otros ataques de SQL? </p>
</a>
</li>
<li class="flexstart">
<a href="https://www.sqldat.com/es/ges/rpl/1001003716.html">
<p class="row row-2">
consulta de longitud y latitud mySQL para otras filas dentro de un radio de x millas </p>
</a>
</li>
<li class="flexstart">
<a href="https://www.sqldat.com/es/ges/rpl/1001014395.html">
<p class="row row-2">
Función MySQL PI():devuelve el valor de π (pi) </p>
</a>
</li>
<li class="flexstart">
<a href="https://www.sqldat.com/es/ges/rpl/1001003395.html">
<p class="row row-2">
¿Puede Hibernate funcionar con la sintaxis ON DUPLICATE KEY UPDATE de MySQL? </p>
</a>
</li>
<li class="flexstart">
<a href="https://www.sqldat.com/es/ges/rpl/1001003227.html">
<p class="row row-2">
¿Cómo puedo verificar el tipo de motor MySQL para una tabla específica? </p>
</a>
</li>
</ol>
</li>
</ul>
</section>
</aside>
</section>
<footer>
<section class="container flexbetween footer_info flexalign">
<a href="https://www.sqldat.com/" class="bottom_logo">
<img src="http://www.sqldat.com/css/img/logo.svg" alt="">
</a>
<span class="flexstart">
© DERECHOS DE AUTOR
<a href="https://www.sqldat.com/">http://www.sqldat.com/</a>
RESERVADOS TODOS LOS DERECHOS
</span>
</section>
</footer>
<script language='javascript' src='http://www.sqldat.com/css/ad/c.js'></script>
</body>
</html>