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 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 en la sección del encabezado de su archivo index.php:</p> <pre><code class="language-php"><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. Creemos el archivo styles.css y agreguemos este código de estilo en él.</p> <pre><code class="language-css">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 alt="" src="https://2xsoftware.es/wp-content/uploads/2021/12/1639596723_931_PHP-CRUD-Cree-edite-actualice-y-elimine-publicaciones-con-la.png" style="height:30%; width:90%"/></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 abre php_code.php y pega el siguiente código en él:</p> <pre><code class="language-php"><?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. Al igual que:</p> <pre><code class="language-php"><?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 CReate de CRUD. Procedamos con los demás.</p> <p>Ahora visite su archivo index.php nuevamente y agregue este código justo debajo de la etiqueta <body data-rsssl=1>:</p> <pre><code class="language-php">// ... <body> <?php if (isset($_SESSION['message'])): ?> <div class="msg"> <?php echo $_SESSION['message']; unset($_SESSION['message']); ?> </div> <?php endif ?></code></pre> <p><span id="ezoic-pub-ad-placeholder-113" class="ezoic-adpicker-ad"/><span class="ezoic-ad banner-1 banner-1113 adtester-container adtester-container-113" data-ez-name="codewithawa_com-banner-1"><span id="div-gpt-ad-codewithawa_com-banner-1-0" ezaw="300" ezah="250" style="position:relative;z-index:0;display:inline-block;padding:0;width:100%;max-width:1200px;margin-left:auto !important;margin-right:auto !important;min-height:250px;min-width:300px;" class="ezoic-ad"/></span>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. </p> <p><!-- codewithawa.com_728x90: Begin --></p> <p> <!-- codewithawa.com_728x90 End --></p> <p>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:</p> <pre><code class="language-php"><?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 alt="" src="https://2xsoftware.es/wp-content/uploads/2021/12/1639596723_376_PHP-CRUD-Cree-edite-actualice-y-elimine-publicaciones-con-la.png" style="height:23%; width:96%"/></p> <p>..y voilá !! ¡Funciona perfecto!</p> <p>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:</p> <pre><code class="language-php"><?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 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 <strong>valor</strong> atributo de los campos del formulario.<span id="ezoic-pub-ad-placeholder-114" class="ezoic-adpicker-ad"/><span class="ezoic-ad large-leaderboard-2 large-leaderboard-2114 adtester-container adtester-container-114" data-ez-name="codewithawa_com-large-leaderboard-2"><span id="div-gpt-ad-codewithawa_com-large-leaderboard-2-0" ezaw="300" ezah="250" style="position:relative;z-index:0;display:inline-block;padding:0;width:100%;max-width:1200px;margin-left:auto !important;margin-right:auto !important;min-height:250px;min-width:300px;" class="ezoic-ad"/></span></p> <p><!-- codewithawa.com_728x90: Begin --></p> <p> <!-- codewithawa.com_728x90 End --></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 class="language-php">// 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 la entrada </p> <form>.</p> <p>Ahora, si hacemos clic en el botón editar en un registro en 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 actualización en el formulario y al crear, mostramos el botón de guardar. Hacemos esto usando el <strong>actualizar </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 de guardar en el formulario de esta manera:</p> <p>Reemplazar ..</p> <pre><code class="language-php"><button class="btn" type="submit" name="save" >Save</button></code></pre> <p> con …</p> <pre><code class="language-php"><?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 editar, obtenemos esto:<span id="ezoic-pub-ad-placeholder-115" class="ezoic-adpicker-ad"/><span class="ezoic-ad leader-1 leader-1115 adtester-container adtester-container-115" data-ez-name="codewithawa_com-leader-1"><span id="div-gpt-ad-codewithawa_com-leader-1-0" ezaw="300" ezah="250" style="position:relative;z-index:0;display:inline-block;padding:0;width:100%;max-width:1200px;margin-left:auto !important;margin-right:auto !important;min-height:250px;min-width:300px;" class="ezoic-ad"/></span></p> <p><img alt="" src="https://2xsoftware.es/wp-content/uploads/2021/12/1639596724_747_PHP-CRUD-Cree-edite-actualice-y-elimine-publicaciones-con-la.png" style="height:33%; width:96%"/></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 class="language-php">// ... 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 alt="" src="https://2xsoftware.es/wp-content/uploads/2021/12/1639596724_422_PHP-CRUD-Cree-edite-actualice-y-elimine-publicaciones-con-la.png" style="height:20%; width:96%"/></p> <p>¡Estupendo!</p> <p>Una última cosa: borrar registros. Simplemente agregue este código al final de su archivo php_code.php y listo:</p> <pre><code class="language-php">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><span id="ezoic-pub-ad-placeholder-116" class="ezoic-adpicker-ad"/><span class="ezoic-ad large-mobile-banner-1 large-mobile-banner-1116 adtester-container adtester-container-116" data-ez-name="codewithawa_com-large-mobile-banner-1"><span id="div-gpt-ad-codewithawa_com-large-mobile-banner-1-0" ezaw="250" ezah="250" style="position:relative;z-index:0;display:inline-block;padding:0;width:100%;max-width:1200px;margin-left:auto !important;margin-right:auto !important;min-height:250px;min-width:250px;" class="ezoic-ad"/></span>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> <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 olvide consultar mis otros tutoriales en este sitio. </p> <p>Gracias</p> <p>Awa Melvine</p> <h2>Relacionado:</h2> </p></div> <p><script>(function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11&appId=187693445124711"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script></p> <div style="display: none;" class="kk-star-ratings kksr-valign-bottom kksr-align-center kksr-disabled" data-id="1120" data-slug=""> <div class="kksr-stars"> <div class="kksr-stars-inactive"> <div class="kksr-star" data-star="1"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </div> <div class="kksr-star" data-star="2"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </div> <div class="kksr-star" data-star="3"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </div> <div class="kksr-star" data-star="4"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </div> <div class="kksr-star" data-star="5"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </div> </div> <div class="kksr-stars-active" style="width: 0px;"> <div class="kksr-star"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </div> <div class="kksr-star"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </div> <div class="kksr-star"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </div> <div class="kksr-star"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </div> <div class="kksr-star"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </div> </div> </div> <div class="kksr-legend"> <span class="kksr-muted"></span> </div> </div> </div> <footer class="entry-meta"> <span class="cat-links"><span class="gp-icon icon-categories"><svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em"> <path d="M0 112c0-26.51 21.49-48 48-48h110.014a48 48 0 0 1 43.592 27.907l12.349 26.791A16 16 0 0 0 228.486 128H464c26.51 0 48 21.49 48 48v224c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112z" fill-rule="nonzero"/> </svg></span><span class="screen-reader-text">Categorías </span><a href="https://2xsoftware.es/category/tutoriales/" rel="category tag">Tutoriales</a></span> <nav id="nav-below" class="post-navigation"> <span class="screen-reader-text">Navegación de entradas</span> <div class="nav-previous"><span class="gp-icon icon-arrow-left"><svg viewBox="0 0 192 512" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"> <path d="M178.425 138.212c0 2.265-1.133 4.813-2.832 6.512L64.276 256.001l111.317 111.277c1.7 1.7 2.832 4.247 2.832 6.513 0 2.265-1.133 4.813-2.832 6.512L161.43 394.46c-1.7 1.7-4.249 2.832-6.514 2.832-2.266 0-4.816-1.133-6.515-2.832L16.407 262.514c-1.699-1.7-2.832-4.248-2.832-6.513 0-2.265 1.133-4.813 2.832-6.512l131.994-131.947c1.7-1.699 4.249-2.831 6.515-2.831 2.265 0 4.815 1.132 6.514 2.831l14.163 14.157c1.7 1.7 2.832 3.965 2.832 6.513z" fill-rule="nonzero"/> </svg></span><span class="prev" title="Anterior"><a href="https://2xsoftware.es/2021/12/15/creacion-de-un-sistema-de-comentarios-y-respuestas-php-y-mysql/" rel="prev">Creación de un sistema de comentarios y respuestas PHP y MySQL</a></span></div><div class="nav-next"><span class="gp-icon icon-arrow-right"><svg viewBox="0 0 192 512" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"> <path d="M178.425 256.001c0 2.266-1.133 4.815-2.832 6.515L43.599 394.509c-1.7 1.7-4.248 2.833-6.514 2.833s-4.816-1.133-6.515-2.833l-14.163-14.162c-1.699-1.7-2.832-3.966-2.832-6.515 0-2.266 1.133-4.815 2.832-6.515l111.317-111.316L16.407 144.685c-1.699-1.7-2.832-4.249-2.832-6.515s1.133-4.815 2.832-6.515l14.163-14.162c1.7-1.7 4.249-2.833 6.515-2.833s4.815 1.133 6.514 2.833l131.994 131.993c1.7 1.7 2.832 4.249 2.832 6.515z" fill-rule="nonzero"/> </svg></span><span class="next" title="Siguiente"><a href="https://2xsoftware.es/2021/12/15/como-crear-un-blog-en-php-y-base-de-datos-mysql/" rel="next">Cómo crear un blog en PHP y base de datos MySQL</a></span></div> </nav> </footer> </div> </article> <div class="comments-area"> <div id="comments"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Deja un comentario <small><a rel="nofollow" id="cancel-comment-reply-link" href="/2021/12/15/php-crud-cree-edite-actualice-y-elimine-publicaciones-con-la-base-de-datos-mysql/#respond" style="display:none;">Cancelar la respuesta</a></small></h3><form action="https://2xsoftware.es/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-form-comment"><label for="comment" class="screen-reader-text">Comentario</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" required></textarea></p><label for="author" class="screen-reader-text">Nombre</label><input placeholder="Nombre *" id="author" name="author" type="text" value="" size="30" /> <label for="email" class="screen-reader-text">Correo electrónico</label><input placeholder="Correo electrónico *" id="email" name="email" type="email" value="" size="30" /> <label for="url" class="screen-reader-text">Web</label><input placeholder="Web" id="url" name="url" type="url" value="" size="30" /> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Guarda mi nombre, correo electrónico y web en este navegador para la próxima vez que comente.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Publicar comentario" /> <input type='hidden' name='comment_post_ID' value='1120' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- #comments --> </div> </main> </div> <div id="right-sidebar" class="widget-area sidebar is-right-sidebar" itemtype="https://schema.org/WPSideBar" itemscope> <div class="inside-right-sidebar"> <aside id="search-2" class="widget inner-padding widget_search"><form method="get" class="search-form" action="https://2xsoftware.es/"> <label> <span class="screen-reader-text">Buscar:</span> <input type="search" class="search-field" placeholder="Buscar..." value="" name="s" title="Buscar:"> </label> <button class="search-submit" aria-label="Buscar"><span class="gp-icon icon-search"><svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em"> <path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"/> </svg></span></button></form> </aside> <aside id="recent-posts-2" class="widget inner-padding widget_recent_entries"> <h2 class="widget-title">Entradas recientes</h2> <ul> <li> <a href="https://2xsoftware.es/2021/12/16/5-aplicaciones-que-aumentaran-enormemente-su-productividad/">5 aplicaciones que aumentarán enormemente su productividad</a> </li> <li> <a href="https://2xsoftware.es/2021/12/16/me-gusta-y-no-me-gusta-el-sistema-que-usa-php-y-la-base-de-datos-mysql/">Me gusta y no me gusta el sistema que usa PHP y la base de datos MySQL</a> </li> <li> <a href="https://2xsoftware.es/2021/12/16/me-gusta-el-sistema-no-me-gusta-con-php-y-mysql/">Me gusta el sistema No me gusta con PHP y MySQL</a> </li> <li> <a href="https://2xsoftware.es/2021/12/16/validacion-de-formularios-con-javascript-codewithawa/">Validación de formularios con javascript | CodeWithAwa</a> </li> <li> <a href="https://2xsoftware.es/2021/12/16/gestion-de-cuentas-de-usuario-roles-permisos-autenticacion-php-y-mysql/">Gestión de cuentas de usuario, roles, permisos, autenticación PHP y MySQL</a> </li> </ul> </aside><aside id="recent-comments-2" class="widget inner-padding widget_recent_comments"><h2 class="widget-title">Comentarios recientes</h2><ul id="recentcomments"></ul></aside> </div> </div> </div> </div> <div class="site-footer"> <footer class="site-info" itemtype="https://schema.org/WPFooter" itemscope> <div class="inside-site-info grid-container"> <div class="copyright-bar"> ©2xsoftware 2022 </div> </div> </footer> </div> <!--[if lte IE 11]> <script src='https://2xsoftware.es/wp-content/themes/generatepress/assets/js/classList.min.js?ver=3.0.3' id='generate-classlist-js'></script> <![endif]--> <script id='wpacu-combined-js-body-group-2' type='text/javascript' src='https://2xsoftware.es/wp-content/cache/asset-cleanup/js/body-26d376868ec89eb37a4c9cfe2ca55b03a3f1f24e.js'></script> </body> </html>