Una vez más aquí. Hoy vengo a dejar un pequeño artículo por que esta semana me ha escrito un usuario para preguntarme si tenía algún ejemplo sobre cómo crear un CRUD. Ya que este, por lo que me ha contando, no tenía muy claro que es un CRUD. Bueno, pues buscando un poco, encontré un CRUD con PHP y MySQL que escribí hace ya algún tiempo, y que voy a dejar publicado en las siguientes líneas.
Para quien no lo sepa, un CRUD con PHP y MySQL, es una aplicación web que realiza las cuatro operaciones básicas de la gestión de datos, como son; Crear (Create), Leer (Read), Actualizar (Update) y Borrar (Delete) en una base de datos MySQL, utilizando el lenguaje de programación PHP para realizar todas estas operaciones.
La aplicación CRUD en PHP y MySQL utiliza el lenguaje SQL para realizar las operaciones en la base de datos. Por ejemplo, para agregar un nuevo registro, se utiliza la sentencia SQL INSERT INTO. Para actualizar un registro, se utiliza la sentencia SQL UPDATE. Para eliminar un registro, se utiliza la sentencia SQL DELETE.
Por lo general, un CRUD en PHP y MySQL consta de una interfaz de usuario que permite al usuario interactuar con la base de datos. Por ejemplo, el usuario puede ver una lista de registros, agregar nuevos registros, actualizar registros existentes o eliminarlos. Y esto será lo que vamos a ver a continuación.
Crear un CRUD en PHP y MySQL
Este pequeño ejemplo, nos va a servir para poder interactuar con una base de datos MySQL, mediante la interfaz creada con PHP (PDO), HTML, CSS y un poco de JavaScript. En esta base de datos, podremos consultar un listado de usuarios, con sus nombres, apellidos, contraseña, nombre de usuario y email.
Al lado de cada usuario, vamos a ver dos opciones. Desde ella podremos editar o eliminar el registro del usuario seleccionado. Además, también nos va a permitir añadir más usuarios a la base de datos utilizando el botón azul que dice «Añadir usuario» que se puede encontrar justo encima del listado de usuarios.
Esta tabla se adapta de forma correcta en dispositivos móviles, haciendo que las cabeceras se muevan al lado izquierdo para que se puedan seguir viendo todos los datos que muestra la tabla. Para crear este estilo de tabla, utilicé la misma que publiqué hace un tiempo en el artículo llamado Tabla responsive, crea una usando solo HTML y CSS.
Para crear este CRUD en PHP y MySQL, solo necesitaremos crear seis archivo php y uno más para añadir las reglas CSS. Además, vamos a añadir también un favicon para que se muestre en la página.
Archivos necesarios para crear este CRUD con PHP y MySQL
Archivo connection.php
Para empezar vamos a crear el archivo connection.php para conectar nuestro proyecto a la base de datos MySQL.
En el código que vamos a ver a continuación, definiremos una función llamada «connection». Esta va a crear una conexión a una base de datos MySQL utilizando la extensión PDO de PHP. La función acepta los parámetros necesarios para establecer la conexión, como la dirección del servidor MySQL, el nombre de usuario, la contraseña y el nombre de la base de datos.
Dentro de la función, vamos a crear una nueva instancia de PDO utilizando los valores de los parámetros de conexión. Después se configura PDO para que lance excepciones, en caso de que ocurra un error durante la ejecución de una consulta a la base de datos.
Finalmente, la función devuelve la instancia de PDO recién creada, para que pueda ser utilizada en otras partes del código y así interactuar con la base de datos. Es común que en proyectos más grandes, se encapsule la conexión a la base de datos dentro de una función, para así evitar tener que repetir el código de la conexión en varias partes del código.
El código que vamos a guardar dentro de este archivo es el siguiente:
<?php
function connection()
{
$host = "localhost";
$user = "TU-USUARIO";
$pass = "XXXXX";
$db = "crud-php";
// Crea una nueva instancia de PDO
$dsn = "mysql:host=$host;dbname=$db;charset=utf8mb4";
$pdo = new PDO($dsn, $user, $pass);
// Configura PDO para que lance excepciones en caso de error
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// Devuelve la instancia de PDO
return $pdo;
}
Archivo delete_user.php
El código que vamos a guardar dentro del archivo delete_user.php, tiene como objetivo eliminar un registro de la tabla «users» de una base de datos MySQL. Para ello utilizaremos una conexión PDO, previamente establecida en el archivo «connection.php«.
En primer lugar, el código verifica si se ha proporcionado un valor de ID válido y lo sanitiza usando la función «filter_input» de PHP. Si el valor de ID no es válido, se emite un mensaje de error y se detiene la ejecución del script.
Luego, se crea una instancia de PDO utilizando la función «connection()» previamente definida. Además se prepara una consulta SQL para eliminar un registro de la tabla «users» donde el valor de la columna «id» coincide con el valor proporcionado.
Se utiliza la función «bindParam» de PDO para asegurarnos de que el valor de ID se trata como un entero. Así evitaremos posibles vulnerabilidades de inyección SQL. A continuación, se ejecuta la consulta SQL mediante la función «execute» de PDO. Si todo va bien, se redirige al usuario a la página principal «index.php» mediante la función «Header» de PHP.
Si se produce algún error durante la ejecución de la consulta, se captura la excepción «PDOException» y se emite un mensaje de error. Finalmente, se cierra la conexión a la base de datos mediante la asignación de «null» a la variable «con» en el bloque «finally».
El código que acabamos de explicar, es el siguiente:
<?php
require("connection.php");
// Validamos y sanitizamos el valor de ID
$id = filter_input(INPUT_GET, 'id', FILTER_VALIDATE_INT);
if (!$id) {
// manejo del error
echo "SE HA PRODUCIDO UN ERROR EN EL ID DEL USUARIO QUE SE QUIERE BORRAR";
die();
}
try {
$con = connection();
$sql = "DELETE FROM users WHERE id = ?";
$stmt = $con->prepare($sql);
// Nos aseguramos de que $id es un entero
$stmt->bindParam(1, $id, PDO::PARAM_INT);
$stmt->execute();
Header("Location: index.php");
} catch (PDOException $e) {
echo "SE HA PRODUCIDO UN ERROR AL ELIMINAR EL USUARIO";
die();
} finally {
$con = null; // Cerrar la conexión
}
Archivo edit_user.php
El código que vamos a guardar dentro del archivo edit_user.php, tiene como objetivo actualizar un registro existente en la tabla «users» de la base de datos MySQL.
En primer lugar, se incluye el archivo «connection.php» que contiene la función «connection()» para establecer la conexión a la base de datos.
El siguiente paso será crear una instancia de PDO utilizando la función «connection()» previamente definida. Para empezar, se recopilan los valores del formulario que se enviaron mediante el método POST. Cada uno de estos valores se filtra y se sanitiza utilizando la función «filter_input» de PHP, asegurando que no haya valores maliciosos.
Después, se verifica que el valor de «email» sea una dirección de correo electrónico válida utilizando la función «filter_var» de PHP con el filtro «FILTER_VALIDATE_EMAIL«. Si la dirección de correo electrónico no es válida, se lanza una excepción.
Luego, se prepara una consulta SQL para actualizar el registro en la tabla «users» correspondiente al ID proporcionado. La consulta utiliza marcadores de posición «?» para los valores que se van a actualizar.
A continuación, se prepara la consulta SQL para su ejecución mediante la función «prepare» de PDO. Además se asignan los valores actualizados a un array llamado «values«.
Continuamos ejecutando la consulta SQL utilizando la función «execute» de PDO y se verifica si la consulta se ejecutó correctamente. Si la ejecución de la consulta falla, se emite un mensaje de error.
En caso de que se produzca algún error durante la ejecución de la consulta, se captura la excepción «PDOException» o «Exception» y se emite un mensaje de error.
Se cierra la conexión a la base de datos mediante la asignación de «null» a la variable «con» en el bloque «finally«.
El código que vamos a guardar en este archivo, es el siguiente:
<?php
require("connection.php");
try {
$con = connection();
$id = $_POST["id"];
$name = filter_input(INPUT_POST, 'name', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$lastname = filter_input(INPUT_POST, 'lastname', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$username = filter_input(INPUT_POST, 'username', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$password = filter_input(INPUT_POST, 'password', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$email = $_POST["email"];
// Comprobamos si $email tiene un formato de email válido
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
throw new Exception('La dirección de correo electrónico no es válida');
}
$sql = "UPDATE users SET name=?, lastname=?, username=?, password=?, email=? WHERE id=?";
$query = $con->prepare($sql);
$values = array($name, $lastname, $username, $password, $email, $id);
if ($query->execute($values)) {
Header("Location: index.php");
} else {
echo "ERROR AL EDITAR EL USUARIO";
}
} catch (PDOException $e) {
echo "SE HA PRODUCIDO UN ERROR AL EDITAR EL USUARIO";
die();
} catch (Exception $e) {
echo "Error: " . $e->getMessage();
die();
} finally {
$con = null; // Cerrar la conexión
}
Archivo index.php
En el código que vamos a guardar dentro del archivo index.php, será donde veremos nuestra aplicación web CRUD (Create, Read, Update, Delete) utilizando PHP y MySQL para gestionar usuarios en una base de datos.
En primer lugar, vamos a establecer la conexión a la base de datos MySQL. Para ello utilizaremos la función que se encuentra en el archivo «connection.php«. Después, se realiza una consulta SQL para obtener todos los usuarios de la tabla «users» de la base de datos. Se van a almacenar los resultados en la variable «$users«, utilizando la función «fetchAll» de PDO.
A continuación, se muestra una página HTML que contiene una tabla que muestra los detalles de cada usuario obtenido en la consulta anterior. Cada fila de la tabla contiene información de un usuario. Además nos va a ofrecer dos opciones, editar y eliminar, a través de enlaces que dirigen a otras páginas.
Finalmente, la página HTML contiene un script de JavaScript que implementa la funcionalidad de la ventana modal. Esta se abre al pulsar el botón «+ Añadir usuario«. La ventana modal permite agregar nuevos usuarios a la base de datos mediante un formulario. Aquí también encontraremos un enlace que permite cerrar la ventana modal.
El código que vamos a guardar dentro del archivo index.php, es el siguiente:
<?php
require_once "connection.php";
try {
$pdo = connection();
$sql = "SELECT * FROM users"; // Buscamos todos los usuarios de la base de datos
$stmt = $pdo->query($sql);
// Obtenemos los resultados de la consulta
$users = $stmt->fetchAll(PDO::FETCH_ASSOC);
// Cerramos la conexión
$pdo = null;
} catch (PDOException $e) {
// Manejo de errores
echo "Error: " . $e->getMessage();
die();
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./CSS/style.css" rel="stylesheet">
<link rel="icon" type="image/jpg" href="./Img/favicon.ico" />
<title>CRUD PHP y MySQL</title>
</head>
<body>
<div class="wrapper">
<header>
<div class="titulo">C.R.U.D. RESPONSIVE <br/> CON PHP (PDO), MySQL, <br/> ETC ...</div>
<p>
<button id="open-modal" class="metro-button">+ Añadir usuario</button>
</p>
</header>
<main>
<br />
<div class="users-table">
<h2>Usuarios registrados</h2>
<table>
<thead>
<!-- Cabeceras de la tabla de resultados -->
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Apellidos</th>
<th>Username</th>
<th>Password</th>
<th>Email</th>
<th colspan="2">Opciones</th>
</tr>
</thead>
<tbody>
<?php foreach ($users as $row) : ?>
<tr>
<td data-column='Id'><?= $row['id'] ?></td>
<td data-column='Nombre'><?= $row['name'] ?></td>
<td data-column='Apellido'><?= $row['lastname'] ?></td>
<td data-column='Nombre Usuario'><?= $row['username'] ?></td>
<td data-column='Contraseña'><?= $row['password'] ?></td>
<td data-column='Email'><?= $row['email'] ?></td>
<td data-column='Opción #1'><a href="update.php?id=<?= $row['id'] ?>" class="users-table--edit">Editar</a></td>
<td data-column='Opción #2'><a href="#" onclick="confirmDelete(<?= $row['id'] ?>)" class="users-table--delete">Eliminar</a></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</main>
<footer>
<script>
// Función para eliminar el usuario
function confirmDelete(userId) {
if (confirm("¿Está seguro de que desea eliminar este usuario?")) {
window.location.href = "delete_user.php?id=" + userId;
}
}
// Obtener el botón para abrir la ventana modal
var btn = document.getElementById("open-modal");
// Obtener la ventana modal
var modal = document.createElement("div");
modal.className = "modal";
// Agregar el contenido del formulario en la ventana modal
modal.innerHTML = `
<div class="users-form">
<h1 class="titulo">Crear usuario</h1>
<form action="insert_user.php" method="POST">
<input type="text" name="name" placeholder="Nombre">
<input type="text" name="lastname" placeholder="Apellidos">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<input type="email" name="email" placeholder="Email">
<input type="submit" value="Añadir">
</form>
</div>
`;
// El botón para cerrar la ventana modal
var closeButton = document.createElement("button");
closeButton.className = "close-button";
closeButton.textContent = "X Cerrar ventana";
modal.appendChild(closeButton);
// Agregar la ventana modal al documento
document.body.appendChild(modal);
// Agregar un manejador de eventos para abrir la ventana modal
btn.onclick = function() {
modal.style.display = "block";
}
// Agregar un manejador de eventos para cerrar la ventana modal
closeButton.onclick = function() {
modal.style.display = "none";
}
</script>
<span><a href="https://entreunosyceros.net/about" title="about entreunosyceros" target="_blank">entreunosyceros.net</span>
</footer>
</div>
</body>
</html>
Archivo insert_user.php
El código que vamos a guardar dentro del archivo insert_user.php, es un script PHP que inserta datos de usuario en una base de datos MySQL utilizando PDO.
Para empezar, vamos a incluir el archivo «connection.php«. Este contiene la función que establece la conexión con la base de datos.
El bloque try-catch se utiliza para manejar cualquier excepción que se pueda generar al intentar insertar los datos en la base de datos. En el bloque try, la función connection() se llama para establecer la conexión con la base de datos. Después se filtran y asignan los valores de $_POST a las variables $name, $lastname, $username, $password y $email utilizando la función filter_var(). Aquí se utiliza también el filtro FILTER_SANITIZE_FULL_SPECIAL_CHARS para evitar inyecciones de código.
El siguiente bloque if se asegura de que el correo electrónico tenga un formato válido utilizando la función filter_var() con el filtro FILTER_VALIDATE_EMAIL. Si la dirección de correo electrónico no es válida, se lanza una excepción con un mensaje de error.
A continuación, se prepara una sentencia SQL INSERT utilizando la función prepare() de PDO. Aquí se vinculan los valores de las variables a los marcadores de posición de la sentencia SQL utilizando la función bindParam(). Finalmente, se ejecuta la sentencia INSERT utilizando la función execute().
Si ocurre una excepción dentro del bloque try, se manejará en el bloque catch correspondiente, y se imprimirá un mensaje de error en la pantalla.
El bloque finally se utiliza para cerrar la conexión con la base de datos utilizando la función PDO::null.
Si el INSERT se realiza sin ningún problema, este código nos llevará al archivo index.php utilizando HEADER.
El código que tendremos que guardar dentro de este archivo, será el siguiente:
<?php
require("connection.php");
try {
$pdo = connection();
// Limpiamos las cosas que llegan por $_POST
$name = filter_var($_POST['name'], FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$lastname = filter_var($_POST['lastname'], FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$username = filter_var($_POST['username'], FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$password = filter_var($_POST['password'], FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$email = filter_var($_POST['email'], FILTER_SANITIZE_FULL_SPECIAL_CHARS);
// Comprobamos si $email tiene un formato de email válido
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
throw new Exception('La dirección de correo electrónico no es válida');
}
// Preparamos al sentencia
$stmt = $pdo->prepare("INSERT INTO users (name, lastname, username, password, email) VALUES (?, ?, ?, ?, ?)");
$stmt->bindParam(1, $name);
$stmt->bindParam(2, $lastname);
$stmt->bindParam(3, $username);
$stmt->bindParam(4, $password);
$stmt->bindParam(5, $email);
// Ejecutamos la sentencia con sus correspondientes valores
$stmt->execute();
header("Location: index.php");
} catch (PDOException $e) {
echo "Error: " . $e->getMessage();
die();
} catch (Exception $e) {
echo "Error: " . $e->getMessage();
die();
} finally {
$pdo = null;
}
?>
Archivo update.php
El código que vamos a guardar en el archivo update.php, comienza por intentar conectarse a una base de datos mediante la función connection(). Si la conexión es exitosa, se recupera el valor de la variable id que se recibe mediante el método GET, y se prepara una consulta SQL para buscar un usuario con el id correspondiente. A continuación, se ejecuta la consulta y se almacenan los resultados en la variable $row mediante el método fetch(PDO::FETCH_ASSOC).
En caso de que se produzca alguna excepción en la conexión o en la consulta, se captura mediante un bloque catch y se muestra un mensaje de error. Por último, se cierra la conexión a la base de datos mediante un bloque finally.
A continuación, se presenta un formulario HTML que permite editar los datos del usuario recuperado de la base de datos. El formulario se envía mediante el método POST al archivo edit_user.php, y contiene campos para el nombre, apellidos, nombre de usuario, contraseña y correo electrónico del usuario. Además, se incluye un botón para actualizar los datos y otro para volver a la página anterior.
En resumen, este código PHP se encarga de recuperar los datos de un usuario a partir de su ID. Después los muestra en un formulario HTML, que permite editarlos y actualizarlos en la base de datos.
Dentro de este archivo, el código que vamos a pegar es el siguiente:
try {
$pdo = connection();
$id = $_GET['id'];
// Preparamos la sentencia, buscando el usuario por su ID, recibida por GET
$stmt = $pdo->prepare("SELECT * FROM users WHERE id=:id");
$stmt->bindParam(':id', $id);
$stmt->execute();
// Almacenamos los resultados de la consulta en $row, para mostrarlos en el formulario
$row = $stmt->fetch(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
// manejo de excepción
echo "Error: " . $e->getMessage();
die();
} finally {
// cerrar la conexión
$pdo = null;
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./CSS/style.css" rel="stylesheet">
<link rel="icon" type="image/jpg" href="./Img/favicon.ico" />
<title>Editar usuario</title>
</head>
<body>
<div class="wrapper">
<header>
<div class="titulo">EDICIÓN DE USUARIO</div>
</header>
<main>
<div class="users-form">
<!-- Fomulario para la edición de usuarios -->
<form action="edit_user.php" method="POST">
<input type="hidden" name="id" value="<?= $row['id'] ?>">
<input type="text" name="name" placeholder="Nombre" value="<?= $row['name'] ?>">
<input type="text" name="lastname" placeholder="Apellidos" value="<?= $row['lastname'] ?>">
<input type="text" name="username" placeholder="Username" value="<?= $row['username'] ?>">
<input type="text" name="password" placeholder="Password" value="<?= $row['password'] ?>">
<input type="text" name="email" placeholder="Email" value="<?= $row['email'] ?>">
<input type="submit" value="Actualizar">
</form>
<p><button class="back-btn" onclick="window.history.back()">Volver</button></p>
</div>
</main>
<footer>
<span><a href="https://entreunosyceros.net/about" title="about entreunosyceros" target="_blank">entreunosyceros.net</span>
</footer>
</div>
</body>
</html>
Archivo style.css
Este archivo lo vamos a guardar dentro de una carpeta llamada CSS. Con las reglas que aquí vamos a pegar, le vamos a dar un poco de color y de estilo a nuestro CRUD en PHP y MySQL.
Dentro del archivo, solo tendremos que pegar el siguiente código:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-family: 'Segoe UI', sans-serif;
text-align: center;
}
a{
text-decoration: none;
}
.users-form form{
display: flex;
flex-direction: column;
gap: 24px;
width: 30%;
margin: 20px auto;
text-align: center;
}
.users-form form input{
font-family: 'Segoe UI', sans-serif;
}
.users-form form input[type=text],
.users-form form input[type=password],
.users-form form input[type=email]{
padding: 8px;
border:2px solid #aaa;
border-radius:4px;
outline:none;
transition:.3s;
}
.users-form form input[type=text]:focus,
.users-form form input[type=password]:focus,
.users-form form input[type=password]:focus{
border-color:dodgerBlue;
box-shadow:0 0 6px 0 dodgerBlue;
}
.back-btn, .users-form form input[type=submit]{
border: none;
padding: 12px 50px;
text-decoration: none;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 5px;
background-color: white;
color: black;
border: 2px solid #ff4d4d;
font-size: .95em;
}
.back-btn:hover, .users-form form input[type=submit]:hover {
background-color: #ff4d4d;
color: white;
}
table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: 4px;
}
table th{
padding: 16px;
text-align: center;
font-size: .85em;
}
table {
width: 750px;
border-collapse: collapse;
margin:50px auto;
}
/* linea superior de cabeceras */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #ff4d4d;
color: white;
font-weight: bold;
}
td, th {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
font-size: 18px;
}
/*Enlace opciones*/
.users-table--edit{
background: #009688;
padding: 6px;
color: #fff;
text-align: center;
font-weight: bold;
cursor: pointer; /* Cambia el cursor al pasar por encima */
border-radius: 5px; /* Bordes redondeados */
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Sombra */
}
.users-table--delete{
background: #b11e1e;
padding: 6px;
color: #fff;
text-align: center;
font-weight: bold;
cursor: pointer; /* Cambia el cursor al pasar por encima */
border-radius: 5px; /* Bordes redondeados */
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Sombra */
}
.users-table--delete:hover{
color:#000000;
background: #a56666;
}
.users-table--edit:hover{
color: #000000;
background: #598d88;
}
/* Estilo para la ventana modal */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(60, 60, 60, 0.89);
}
/* Estilo para el botón de abrir la ventana modal */
.metro-button{
background-color: #0080c6; /* Color de fondo */
color: white; /* Color del texto */
border: none; /* Sin borde */
padding: 10px 20px; /* Padding */
font-size: 16px; /* Tamaño de fuente */
cursor: pointer; /* Cambia el cursor al pasar por encima */
border-radius: 5px; /* Bordes redondeados */
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Sombra */
}
/* Estilo para el botón de cerrar la ventana modal */
.metro-button .close-button {
background-color: white; /* Color de fondo */
color: #0080c6; /* Color del texto */
font-size: 20px; /* Tamaño de fuente */
line-height: 1; /* Altura de línea */
padding: 5px 10px; /* Padding */
border-radius: 50%; /* Bordes redondeados */
border: 2px solid #0080c6; /* Borde sólido */
margin: -20px -20px 0 0; /* Margen */
float: right; /* Flotar a la derecha */
cursor: pointer; /* Cambia el cursor al pasar por encima */
}
/* Título */
.titulo {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
border: none;
font: normal 38px / normal "Warnes", Helvetica, sans-serif;
color: rgba(255, 255, 255, 1);
text-decoration: normal;
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
white-space: pre;
text-shadow: 0 0 10px rgb(255, 0, 0), 0 0 20px rgba(255, 0, 0),
0 0 30px rgba(255, 0, 0), 0 0 40px #727272, 0 0 70px #727272,
0 0 80px #4e4e4e, 0 0 100px #2b2b2b;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
width: 100%;
margin-top: 10px;
}
.titulo:hover {
text-shadow: 0 0 10px rgb(27, 27, 27), 0 0 20px rgba(27, 27, 27),
0 0 30px rgba(27, 27, 27), 0 0 40px #000000, 0 0 70px #000000,
0 0 80px #000000, 0 0 100px #000000;
}
/*Footer*/
.wrapper {
position: relative;
min-height: 100vh;
}
footer {
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
font-weight: bold;
padding-top: 2%;
}
/*
Ancho máximo de esta tabla EN PARTICULAR.
Esta consulta surtirá efecto para cualquier pantalla de menos de 760px.
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
table {
width: 100%;
}
/* Forzar la tabla para que ya no sea como en pantalla completa */
table, thead, tbody, th, td, tr {
display: block;
}
/* Ocultar encabezados de tabla (no se usa display: none; por lo de la accesibilidad) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #000000; }
td {
/* Comportarse como una "fila" */
border: none;
border-bottom: 1px solid #c6c6c6;
position: relative;
padding-left: 50%;
}
td:before {
/* Ahora como un encabezado de tabla */
position: absolute;
left: 10px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
/* Etiquetar los datos con el valor de data-column*/
content: attr(data-column)": ";
color: #000;
font-weight: bold;
}
}
Y bueno, decir que a este proyecto le faltaría el favicon, que se guardaría dentro de una carpeta llamada Img. Si quieres descargar el código completo, incluyendo el favicon.ico, solo tienes que dirigirte al repositorio en GitHub donde he alojado este proyecto.
Archivo .SQL
En este repositorio se encuentra también el archivo .SQL para generar la base de datos con la que trabaja este ejemplo de CRUD.
En caso de que quieras ver funcionando este proyecto, para asegurarte de que es lo que estás buscando y que encaja con lo que buscas, puedes probarlo en la sección de ejemplos de esta web.