Tutoriales

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

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:

Formulario HTML

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 decoding="async" alt="" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" style="height:30%; width:90%" data-lazy-src="https://2xsoftware.es/wp-content/uploads/2021/12/1639596723_931_PHP-CRUD-Cree-edite-actualice-y-elimine-publicaciones-con-la.png"/><noscript><img decoding="async" 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%"/></noscript></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 decoding="async" alt="" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" style="height:23%; width:96%" data-lazy-src="https://2xsoftware.es/wp-content/uploads/2021/12/1639596723_376_PHP-CRUD-Cree-edite-actualice-y-elimine-publicaciones-con-la.png"/><noscript><img decoding="async" 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%"/></noscript></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 decoding="async" alt="" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" style="height:33%; width:96%" data-lazy-src="https://2xsoftware.es/wp-content/uploads/2021/12/1639596724_747_PHP-CRUD-Cree-edite-actualice-y-elimine-publicaciones-con-la.png"/><noscript><img decoding="async" 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%"/></noscript></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 decoding="async" alt="" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" style="height:20%; width:96%" data-lazy-src="https://2xsoftware.es/wp-content/uploads/2021/12/1639596724_422_PHP-CRUD-Cree-edite-actualice-y-elimine-publicaciones-con-la.png"/><noscript><img decoding="async" 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%"/></noscript></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 id="seccion-1"> </h3> <h2 id="conclusion">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 id="relacionado">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> <footer class="article-footer"> </footer> </article> <aside class="article-cta"> <div> <p class="kicker">Sigue resolviendo</p> <h2>Encuentra la siguiente guía que necesitas</h2> </div> <form role="search" method="get" class="search-form" action="https://2xsoftware.es/"> <label> <span class="screen-reader-text">Buscar:</span> <input type="search" class="search-field" placeholder="¿Qué necesitas resolver?" value="" name="s"> </label> <button type="submit">Buscar</button> </form> </aside> <section class="related"> <div class="section-heading"><h2>Guías relacionadas</h2></div> <div class="post-grid post-grid--three"> <article class="post-card post-5728 post type-post status-publish format-standard has-post-thumbnail hentry category-tutoriales tag-2xsoftware tag-archivos tag-cambios tag-monitor tag-para tag-process tag-procmon tag-rastrear tag-registros tag-uso"> <a class="post-card__media" href="https://2xsoftware.es/2023/08/15/uso-de-process-monitor-procmon-para-rastrear-cambios-en-archivos-y-registros-2xsoftware/" tabindex="-1" aria-hidden="true"> <img width="596" height="243" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20596%20243'%3E%3C/svg%3E" class="attachment-txs-card size-txs-card wp-post-image" alt="" loading="lazy" decoding="async" data-lazy-srcset="https://2xsoftware.es/wp-content/uploads/2023/08/Uso-de-Process-Monitor-ProcMon-para-rastrear-cambios-en-archivos.png 596w, https://2xsoftware.es/wp-content/uploads/2023/08/Uso-de-Process-Monitor-ProcMon-para-rastrear-cambios-en-archivos-300x122.png 300w" data-lazy-sizes="auto, (max-width: 596px) 100vw, 596px" data-lazy-src="https://2xsoftware.es/wp-content/uploads/2023/08/Uso-de-Process-Monitor-ProcMon-para-rastrear-cambios-en-archivos.png" /><noscript><img width="596" height="243" src="https://2xsoftware.es/wp-content/uploads/2023/08/Uso-de-Process-Monitor-ProcMon-para-rastrear-cambios-en-archivos.png" class="attachment-txs-card size-txs-card wp-post-image" alt="" loading="lazy" decoding="async" srcset="https://2xsoftware.es/wp-content/uploads/2023/08/Uso-de-Process-Monitor-ProcMon-para-rastrear-cambios-en-archivos.png 596w, https://2xsoftware.es/wp-content/uploads/2023/08/Uso-de-Process-Monitor-ProcMon-para-rastrear-cambios-en-archivos-300x122.png 300w" sizes="auto, (max-width: 596px) 100vw, 596px" /></noscript> </a> <div class="post-card__body"> <a class="eyebrow" href="https://2xsoftware.es/category/tutoriales/">Tutoriales</a> <h2 class="post-card__title"><a href="https://2xsoftware.es/2023/08/15/uso-de-process-monitor-procmon-para-rastrear-cambios-en-archivos-y-registros-2xsoftware/">Uso de Process Monitor (ProcMon) para rastrear cambios en archivos y registros – 2xsoftware</a></h2> <div class="post-card__excerpt"><p>1.1K El Monitoreo de procesos (ProcMon) La herramienta se utiliza para rastrear la actividad de varios procesos en el sistema operativo Windows. Esta utilidad le permite mostrar cómo…</p> </div> <div class="post-card__meta"><span class="meta-item"><time datetime="2023-08-15T04:56:14+02:00">agosto 15, 2023</time></span></div> </div> </article> <article class="post-card post-5725 post type-post status-publish format-standard has-post-thumbnail hentry category-tutoriales tag-2xsoftware tag-como tag-con tag-estado tag-herramienta tag-migracion tag-migrar tag-perfiles tag-usmt tag-usuario tag-windows"> <a class="post-card__media" href="https://2xsoftware.es/2023/08/15/como-migrar-perfiles-de-usuario-con-la-herramienta-de-migracion-de-estado-de-usuario-usmt-en-windows-10-2xsoftware/" tabindex="-1" aria-hidden="true"> <img width="558" height="405" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20558%20405'%3E%3C/svg%3E" class="attachment-txs-card size-txs-card wp-post-image" alt="" loading="lazy" decoding="async" data-lazy-srcset="https://2xsoftware.es/wp-content/uploads/2023/08/Como-migrar-perfiles-de-usuario-con-la-herramienta-de-migracion.png 620w, https://2xsoftware.es/wp-content/uploads/2023/08/Como-migrar-perfiles-de-usuario-con-la-herramienta-de-migracion-300x218.png 300w" data-lazy-sizes="auto, (max-width: 558px) 100vw, 558px" data-lazy-src="https://2xsoftware.es/wp-content/uploads/2023/08/Como-migrar-perfiles-de-usuario-con-la-herramienta-de-migracion.png" /><noscript><img width="558" height="405" src="https://2xsoftware.es/wp-content/uploads/2023/08/Como-migrar-perfiles-de-usuario-con-la-herramienta-de-migracion.png" class="attachment-txs-card size-txs-card wp-post-image" alt="" loading="lazy" decoding="async" srcset="https://2xsoftware.es/wp-content/uploads/2023/08/Como-migrar-perfiles-de-usuario-con-la-herramienta-de-migracion.png 620w, https://2xsoftware.es/wp-content/uploads/2023/08/Como-migrar-perfiles-de-usuario-con-la-herramienta-de-migracion-300x218.png 300w" sizes="auto, (max-width: 558px) 100vw, 558px" /></noscript> </a> <div class="post-card__body"> <a class="eyebrow" href="https://2xsoftware.es/category/tutoriales/">Tutoriales</a> <h2 class="post-card__title"><a href="https://2xsoftware.es/2023/08/15/como-migrar-perfiles-de-usuario-con-la-herramienta-de-migracion-de-estado-de-usuario-usmt-en-windows-10-2xsoftware/">¿Cómo migrar perfiles de usuario con la herramienta de migración de estado de usuario (USMT) en Windows 10? – 2xsoftware</a></h2> <div class="post-card__excerpt"><p>En esta guía−Migración de perfiles de usuario mediante USMTGuardar un perfil de usuario con USMTMigración e implementación de un perfil de usuario con USMT 2K Una de las…</p> </div> <div class="post-card__meta"><span class="meta-item"><time datetime="2023-08-15T03:53:41+02:00">agosto 15, 2023</time></span></div> </div> </article> <article class="post-card post-5719 post type-post status-publish format-standard has-post-thumbnail hentry category-tutoriales tag-2xsoftware tag-cerrar tag-comandos tag-como tag-con tag-del tag-forma tag-linea tag-remota tag-sesion tag-usuario"> <a class="post-card__media" href="https://2xsoftware.es/2023/08/15/como-cerrar-la-sesion-del-usuario-de-forma-remota-con-la-linea-de-comandos-2xsoftware/" tabindex="-1" aria-hidden="true"> <img width="695" height="72" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20695%2072'%3E%3C/svg%3E" class="attachment-txs-card size-txs-card wp-post-image" alt="" loading="lazy" decoding="async" data-lazy-srcset="https://2xsoftware.es/wp-content/uploads/2023/08/Como-cerrar-la-sesion-del-usuario-de-forma-remota-con.png 695w, https://2xsoftware.es/wp-content/uploads/2023/08/Como-cerrar-la-sesion-del-usuario-de-forma-remota-con-300x31.png 300w" data-lazy-sizes="auto, (max-width: 695px) 100vw, 695px" data-lazy-src="https://2xsoftware.es/wp-content/uploads/2023/08/Como-cerrar-la-sesion-del-usuario-de-forma-remota-con.png" /><noscript><img width="695" height="72" src="https://2xsoftware.es/wp-content/uploads/2023/08/Como-cerrar-la-sesion-del-usuario-de-forma-remota-con.png" class="attachment-txs-card size-txs-card wp-post-image" alt="" loading="lazy" decoding="async" srcset="https://2xsoftware.es/wp-content/uploads/2023/08/Como-cerrar-la-sesion-del-usuario-de-forma-remota-con.png 695w, https://2xsoftware.es/wp-content/uploads/2023/08/Como-cerrar-la-sesion-del-usuario-de-forma-remota-con-300x31.png 300w" sizes="auto, (max-width: 695px) 100vw, 695px" /></noscript> </a> <div class="post-card__body"> <a class="eyebrow" href="https://2xsoftware.es/category/tutoriales/">Tutoriales</a> <h2 class="post-card__title"><a href="https://2xsoftware.es/2023/08/15/como-cerrar-la-sesion-del-usuario-de-forma-remota-con-la-linea-de-comandos-2xsoftware/">¿Cómo cerrar la sesión del usuario de forma remota con la línea de comandos? – 2xsoftware</a></h2> <div class="post-card__excerpt"><p>1.1K Un administrador de Windows puede utilizar el desconectarse Comando para cerrar una sesión de usuario de forma remota desde cualquier computadora con Windows en la red. En…</p> </div> <div class="post-card__meta"><span class="meta-item"><time datetime="2023-08-15T01:40:16+02:00">agosto 15, 2023</time></span></div> </div> </article> </div> </section> </main> <footer class="site-footer"> <div class="site-footer__grid wrap"> <div> <a class="footer-brand" href="https://2xsoftware.es/">2xSoftware</a> <p>Soluciones prácticas para Windows, software y administración de sistemas.</p> </div> <div> <h2>Explorar</h2> <ul> <li class="cat-item cat-item-2"><a href="https://2xsoftware.es/category/tutoriales/">Tutoriales</a> </li> <li class="cat-item cat-item-39"><a href="https://2xsoftware.es/category/wordpress/">Wordpress</a> </li> <li class="cat-item cat-item-1012"><a href="https://2xsoftware.es/category/windows/">Windows</a> </li> </ul> </div> <div> <h2>Información</h2> <ul> <li><a href="https://2xsoftware.es/privacy-policy/">Política de privacidad</a></li> </ul> </div> </div> <div class="site-footer__bottom wrap"> <p>© 2026 2xSoftware</p> <a href="#top">Volver arriba ↑</a> </div> </footer> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/2xsoftware-premium/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script id="daim-track-internal-links-js" src="https://2xsoftware.es/wp-content/plugins/interlinks-manager/public/assets/js/track-internal-links.js?ver=1.25"></script> <script id="rocket-browser-checker-js-after"> "use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var RocketBrowserCompatibilityChecker=function(){function RocketBrowserCompatibilityChecker(options){_classCallCheck(this,RocketBrowserCompatibilityChecker),this.passiveSupported=!1,this._checkPassiveOption(this),this.options=!!this.passiveSupported&&options}return _createClass(RocketBrowserCompatibilityChecker,[{key:"_checkPassiveOption",value:function(self){try{var options={get passive(){return!(self.passiveSupported=!0)}};window.addEventListener("test",null,options),window.removeEventListener("test",null,options)}catch(err){self.passiveSupported=!1}}},{key:"initRequestIdleCallback",value:function(){!1 in window&&(window.requestIdleCallback=function(cb){var start=Date.now();return setTimeout(function(){cb({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-start))}})},1)}),!1 in window&&(window.cancelIdleCallback=function(id){return clearTimeout(id)})}},{key:"isDataSaverModeOn",value:function(){return"connection"in navigator&&!0===navigator.connection.saveData}},{key:"supportsLinkPrefetch",value:function(){var elem=document.createElement("link");return elem.relList&&elem.relList.supports&&elem.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype}},{key:"isSlowConnection",value:function(){return"connection"in navigator&&"effectiveType"in navigator.connection&&("2g"===navigator.connection.effectiveType||"slow-2g"===navigator.connection.effectiveType)}}]),RocketBrowserCompatibilityChecker}(); //# sourceURL=rocket-browser-checker-js-after </script> <script id="rocket-preload-links-js-extra"> var RocketPreloadLinksConfig = {"excludeUris":"/(.+/)?feed/?.+/?|/(?:.+/)?embed/|/(index\\.php/)?wp\\-json(/.*|$)|/wp-admin/|/logout/|/wp-login.php","usesTrailingSlash":"1","imageExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif","fileExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|php|pdf|html|htm","siteUrl":"https://2xsoftware.es","onHoverDelay":"100","rateThrottle":"3"}; //# sourceURL=rocket-preload-links-js-extra </script> <script id="rocket-preload-links-js-after"> (function() { "use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var t=function(){function n(e,t){i(this,n),this.browser=e,this.config=t,this.options=this.browser.options,this.prefetched=new Set,this.eventTime=null,this.threshold=1111,this.numOnHover=0}return e(n,[{key:"init",value:function(){!this.browser.supportsLinkPrefetch()||this.browser.isDataSaverModeOn()||this.browser.isSlowConnection()||(this.regex={excludeUris:RegExp(this.config.excludeUris,"i"),images:RegExp(".("+this.config.imageExt+")$","i"),fileExt:RegExp(".("+this.config.fileExt+")$","i")},this._initListeners(this))}},{key:"_initListeners",value:function(e){-1<this.config.onHoverDelay&&document.addEventListener("mouseover",e.listener.bind(e),e.listenerOptions),document.addEventListener("mousedown",e.listener.bind(e),e.listenerOptions),document.addEventListener("touchstart",e.listener.bind(e),e.listenerOptions)}},{key:"listener",value:function(e){var t=e.target.closest("a"),n=this._prepareUrl(t);if(null!==n)switch(e.type){case"mousedown":case"touchstart":this._addPrefetchLink(n);break;case"mouseover":this._earlyPrefetch(t,n,"mouseout")}}},{key:"_earlyPrefetch",value:function(t,e,n){var i=this,r=setTimeout(function(){if(r=null,0===i.numOnHover)setTimeout(function(){return i.numOnHover=0},1e3);else if(i.numOnHover>i.config.rateThrottle)return;i.numOnHover++,i._addPrefetchLink(e)},this.config.onHoverDelay);t.addEventListener(n,function e(){t.removeEventListener(n,e,{passive:!0}),null!==r&&(clearTimeout(r),r=null)},{passive:!0})}},{key:"_addPrefetchLink",value:function(i){return this.prefetched.add(i.href),new Promise(function(e,t){var n=document.createElement("link");n.rel="prefetch",n.href=i.href,n.onload=e,n.onerror=t,document.head.appendChild(n)}).catch(function(){})}},{key:"_prepareUrl",value:function(e){if(null===e||"object"!==(void 0===e?"undefined":r(e))||!1 in e||-1===["http:","https:"].indexOf(e.protocol))return null;var t=e.href.substring(0,this.config.siteUrl.length),n=this._getPathname(e.href,t),i={original:e.href,protocol:e.protocol,origin:t,pathname:n,href:t+n};return this._isLinkOk(i)?i:null}},{key:"_getPathname",value:function(e,t){var n=t?e.substring(this.config.siteUrl.length):e;return n.startsWith("/")||(n="/"+n),this._shouldAddTrailingSlash(n)?n+"/":n}},{key:"_shouldAddTrailingSlash",value:function(e){return this.config.usesTrailingSlash&&!e.endsWith("/")&&!this.regex.fileExt.test(e)}},{key:"_isLinkOk",value:function(e){return null!==e&&"object"===(void 0===e?"undefined":r(e))&&(!this.prefetched.has(e.href)&&e.origin===this.config.siteUrl&&-1===e.href.indexOf("?")&&-1===e.href.indexOf("#")&&!this.regex.excludeUris.test(e.href)&&!this.regex.images.test(e.href))}}],[{key:"run",value:function(){"undefined"!=typeof RocketPreloadLinksConfig&&new n(new RocketBrowserCompatibilityChecker({capture:!0,passive:!0}),RocketPreloadLinksConfig).init()}}]),n}();t.run(); }()); //# sourceURL=rocket-preload-links-js-after </script> <script data-wp-strategy="defer" defer id="txs-site-js" src="https://2xsoftware.es/wp-content/themes/2xsoftware-premium/assets/js/site.js?ver=1785062242"></script> <script>window.lazyLoadOptions={elements_selector:"img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}};window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){continue} if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){continue} images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1} if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://2xsoftware.es/wp-content/plugins/wp-rocket/assets/js/lazyload/16.1/lazyload.min.js"></script><script>function lazyLoadThumb(e){var t='<img loading="lazy" data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<div class="play"></div>';return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.dataset.query.length?'':'&'+this.dataset.query;e.setAttribute("src",t.replace("ID",this.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.replaceChild(e,this)}document.addEventListener("DOMContentLoaded",function(){var e,t,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id),e.onclick=lazyLoadYoutubeIframe,a[t].appendChild(e)});</script><script>"use strict";var wprRemoveCPCSS=function wprRemoveCPCSS(){var elem;document.querySelector('link[data-rocket-async="style"][rel="preload"]')?setTimeout(wprRemoveCPCSS,200):(elem=document.getElementById("rocket-critical-css"))&&"remove"in elem&&elem.remove()};window.addEventListener?window.addEventListener("load",wprRemoveCPCSS):window.attachEvent&&window.attachEvent("onload",wprRemoveCPCSS);</script><noscript><link data-minify="1" rel='stylesheet' id='txs-site-css' href='https://2xsoftware.es/wp-content/cache/min/1/wp-content/themes/2xsoftware-premium/assets/css/site-fb10ab7d497dfafc70bee44493582107.css' media='all' /><link data-minify="1" rel='stylesheet' id='txs-visual-v2-css' href='https://2xsoftware.es/wp-content/cache/min/1/wp-content/themes/2xsoftware-premium/assets/css/visual-v2-b006310eaa8e05fb3a7b80a60127a23c.css' media='all' /></noscript></body> </html> <!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me - Debug: cached@1786775901 -->