Ejemplo sencillo para crear una base de datos y tablas, junto con las páginas PHP para alta, baja, modificación y listado de registros. Usaremos una base de datos llamada ejcrud1 y una tabla llamada items con tres campos: id, nombre, y descripcion.
Crear la Base de Datos y la Tabla
Ejecuta el siguiente script SQL en tu servidor MySQL para crear la base de datos y la tabla:
-- Crear base de datos
CREATE DATABASE ejcrud1;
-- Usar la base de datos
USE ejcrud1;
-- Crear tabla
CREATE TABLE items (
id INT AUTO_INCREMENT PRIMARY KEY,
nombre VARCHAR(100) NOT NULL,
descripcion TEXT
);Página de Conexión (db.php)
Esta página se encarga de la conexión a la base de datos:
<?php
// db.php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "ejcrud1";
// Crear conexión
$conn = new mysqli($servername, $username, $password, $dbname);
// Verificar conexión
if ($conn->connect_error) {
die("Conexión fallida: " . $conn->connect_error);
}
?>Código alta.php
<?php
// alta.php
// Incluimos el archivo de conexión a la base de datos
include 'db.php';
// Verificamos si se ha enviado el formulario mediante el método POST
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Recogemos los datos del formulario y los asignamos a variables
$nombre = $_POST['nombre'];
$descripcion = $_POST['descripcion'];
// Preparamos la consulta SQL para insertar un nuevo registro en la tabla 'items'
$sql = "INSERT INTO items (nombre, descripcion) VALUES ('$nombre', '$descripcion')";
// Ejecutamos la consulta y verificamos si se realizó correctamente
if ($conn->query($sql) === TRUE) {
// Si la inserción es exitosa, redirigimos a la página de listado después de 2 segundos
header("Refresh: 2; url=listado.php");
$message = "Registro agregado exitosamente";
} else {
// Si ocurre un error, lo almacenamos en la variable $message
$message = "Error: " . $sql . "<br>" . $conn->error;
}
// Cerramos la conexión a la base de datos
$conn->close();
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Agregar Registro</title>
<style>
/* Estilos para la página */
body {
font-family: Arial, sans-serif; /* Fuente para el texto */
margin: 20px; /* Margen alrededor de la página */
background-color: #f4f4f4; /* Color de fondo de la página */
}
.container {
max-width: 600px; /* Ancho máximo del contenedor */
margin: auto; /* Centra el contenedor horizontalmente */
padding: 20px; /* Relleno dentro del contenedor */
background: #fff; /* Color de fondo del contenedor */
border-radius: 8px; /* Bordes redondeados del contenedor */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra alrededor del contenedor */
}
h1 {
color: #333; /* Color del texto del encabezado */
}
form {
display: flex; /* Usamos flexbox para el diseño del formulario */
flex-direction: column; /* Coloca los elementos del formulario en columna */
}
label {
margin-bottom: 5px; /* Margen inferior de las etiquetas */
font-weight: bold; /* Texto en negrita para las etiquetas */
}
input[type="text"], textarea {
margin-bottom: 10px; /* Margen inferior para los campos de entrada */
padding: 10px; /* Relleno dentro de los campos de entrada */
border: 1px solid #ddd; /* Borde de los campos de entrada */
border-radius: 4px; /* Bordes redondeados de los campos de entrada */
font-size: 16px; /* Tamaño de fuente para los campos de entrada */
}
input[type="submit"] {
background-color: #007BFF; /* Color de fondo del botón de envío */
color: #fff; /* Color del texto del botón de envío */
border: none; /* Sin borde en el botón de envío */
padding: 10px; /* Relleno dentro del botón de envío */
border-radius: 4px; /* Bordes redondeados del botón de envío */
cursor: pointer; /* Cursor en forma de mano al pasar sobre el botón */
font-size: 16px; /* Tamaño de fuente del botón de envío */
}
input[type="submit"]:hover {
background-color: #0056b3; /* Color de fondo del botón al pasar el ratón */
}
.message {
font-size: 18px; /* Tamaño de fuente para el mensaje */
margin-bottom: 20px; /* Margen inferior para el mensaje */
color: #007BFF; /* Color del texto del mensaje */
}
.back-link {
display: block; /* Hace que el enlace sea un bloque para centrarlo */
text-align: center; /* Centra el texto del enlace */
margin-top: 20px; /* Margen superior para el enlace */
font-size: 16px; /* Tamaño de fuente del enlace */
}
</style>
</head>
<body>
<div class="container">
<h1>Agregar Registro</h1>
<!-- Muestra el mensaje si existe -->
<?php if (isset($message)): ?>
<p class="message"><?php echo $message; ?></p>
<?php endif; ?>
<!-- Formulario para agregar un nuevo registro -->
<form method="post" action="alta.php">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required><br>
<label for="descripcion">Descripción:</label>
<textarea id="descripcion" name="descripcion" rows="4" cols="50" required></textarea><br>
<input type="submit" value="Agregar">
</form>
<a href="listado.php" class="back-link">Volver al Listado</a>
</div>
</body>
</html>
Explicación del Código
Inclusión del Archivo de Conexión:
include 'db.php';Incluye el archivo que establece la conexión con la base de datos.
Verificación del Método de Solicitud:
if ($_SERVER["REQUEST_METHOD"] == "POST") {Comprueba si el formulario ha sido enviado mediante el método POST.
Recogida de Datos del Formulario:
$nombre = $_POST['nombre'];
$descripcion = $_POST['descripcion'];Asigna los valores enviados del formulario a variables.
Preparación de la Consulta SQL:
$sql = "INSERT INTO items (nombre, descripcion) VALUES ('$nombre', '$descripcion')";Prepara la consulta SQL para insertar un nuevo registro en la tabla items.
Ejecución de la Consulta y Manejo de Resultados:
if ($conn->query($sql) === TRUE) {
header("Refresh: 2; url=listado.php");
$message = "Registro agregado exitosamente";
} else {
$message = "Error: " . $sql . "<br>" . $conn->error;
}
Ejecuta la consulta y, dependiendo del resultado, redirige a la página de listado o muestra un mensaje de error.
Cierre de Conexión:
$conn->close();Cierra la conexión a la base de datos.
Código HTML y CSS:
- Estructura del HTML: Define la estructura básica del formulario y el contenedor de la página.
- Estilos CSS: Aplica estilos para mejorar la apariencia del formulario y la página en general, como el diseño del formulario, botones, y mensajes.
Formulario:
<form method="post" action="alta.php">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required><br>
<label for="descripcion">Descripción:</label>
<textarea id="descripcion" name="descripcion" rows="4" cols="50" required></textarea><br>
<input type="submit" value="Agregar">
</form>Define los campos del formulario para agregar un nuevo registro.
Enlace de Regreso:
<a href="listado.php" class="back-link">Volver al Listado</a>Proporciona un enlace para volver a la página de listado de registros.
Este archivo alta.php es un formulario simple para agregar nuevos registros a una base de datos, con validación básica y mensajes de confirmación o error. La página está diseñada para ser visualmente clara y funcional. ¿Listo para continuar con el siguiente archivo?
Código baja.php
<?php
// baja.php
// Incluimos el archivo de conexión a la base de datos
include 'db.php';
// Verificamos si se ha pasado un ID a través de la URL
if (isset($_GET['id'])) {
// Recogemos el ID del registro a eliminar
$id = $_GET['id'];
// Preparamos la consulta SQL para eliminar el registro con el ID dado
$sql = "DELETE FROM items WHERE id = $id";
// Ejecutamos la consulta y verificamos si se realizó correctamente
if ($conn->query($sql) === TRUE) {
// Si la eliminación es exitosa, redirigimos a la página de listado después de 2 segundos
header("Refresh: 2; url=listado.php");
$message = "Registro eliminado exitosamente";
} else {
// Si ocurre un error, lo almacenamos en la variable $message
$message = "Error: " . $sql . "<br>" . $conn->error;
}
// Cerramos la conexión a la base de datos
$conn->close();
} else {
// Si no se ha pasado un ID, mostramos un mensaje de error
$message = "ID no especificado";
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Eliminar Registro</title>
<style>
/* Estilos para la página */
body {
font-family: Arial, sans-serif; /* Fuente para el texto */
margin: 20px; /* Margen alrededor de la página */
background-color: #f4f4f4; /* Color de fondo de la página */
}
.container {
max-width: 600px; /* Ancho máximo del contenedor */
margin: auto; /* Centra el contenedor horizontalmente */
padding: 20px; /* Relleno dentro del contenedor */
background: #fff; /* Color de fondo del contenedor */
border-radius: 8px; /* Bordes redondeados del contenedor */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra alrededor del contenedor */
}
h1 {
color: #333; /* Color del texto del encabezado */
}
.message {
font-size: 18px; /* Tamaño de fuente para el mensaje */
margin-bottom: 20px; /* Margen inferior para el mensaje */
color: #007BFF; /* Color del texto del mensaje */
}
.back-link {
display: block; /* Hace que el enlace sea un bloque para centrarlo */
text-align: center; /* Centra el texto del enlace */
margin-top: 20px; /* Margen superior para el enlace */
font-size: 16px; /* Tamaño de fuente del enlace */
}
</style>
</head>
<body>
<div class="container">
<h1>Eliminar Registro</h1>
<!-- Muestra el mensaje si existe -->
<?php if (isset($message)): ?>
<p class="message"><?php echo $message; ?></p>
<?php endif; ?>
<a href="listado.php" class="back-link">Volver al Listado</a>
</div>
</body>
</html>Explicación del Código
Inclusión del Archivo de Conexión:
include 'db.php';Incluye el archivo que establece la conexión con la base de datos.
Verificación del ID en la URL:
if (isset($_GET['id'])) {Comprueba si se ha pasado un ID a través de la URL.
Recogida del ID:
$id = $_GET['id'];Asigna el valor del ID a una variable.
Preparación de la Consulta SQL:
$sql = "DELETE FROM items WHERE id = $id";Prepara la consulta SQL para eliminar el registro con el ID dado.
Ejecución de la Consulta y Manejo de Resultados:
if ($conn->query($sql) === TRUE) {
header("Refresh: 2; url=listado.php");
$message = "Registro eliminado exitosamente";
} else {
$message = "Error: " . $sql . "<br>" . $conn->error;
}Ejecuta la consulta y, dependiendo del resultado, redirige a la página de listado o muestra un mensaje de error.
Cierre de Conexión:
$conn->close();Cierra la conexión a la base de datos.
Manejo del Caso sin ID:
} else {
$message = "ID no especificado";
}Si no se pasa un ID en la URL, muestra un mensaje de error.
Código HTML y CSS:
- Estructura del HTML: Define la estructura básica de la página de eliminación, que solo muestra un mensaje.
- Estilos CSS: Aplica estilos para mejorar la apariencia del mensaje y la página en general, como el diseño del contenedor y el enlace de regreso.
Enlace de Regreso:
<a href="listado.php" class="back-link">Volver al Listado</a>- Proporciona un enlace para volver a la página de listado de registros.
Este archivo baja.php maneja la eliminación de un registro basado en el ID proporcionado en la URL. La página muestra un mensaje de éxito o error y permite regresar a la lista de registros. ¿Listo para continuar con el siguiente archivo?
Código modificar.php
<?php
// modificar.php
// Incluimos el archivo de conexión a la base de datos
include 'db.php';
// Verificamos si se ha enviado el formulario mediante el método POST
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Recogemos los datos del formulario y los asignamos a variables
$id = $_POST['id'];
$nombre = $_POST['nombre'];
$descripcion = $_POST['descripcion'];
// Preparamos la consulta SQL para actualizar el registro con el ID dado
$sql = "UPDATE items SET nombre='$nombre', descripcion='$descripcion' WHERE id=$id";
// Ejecutamos la consulta y verificamos si se realizó correctamente
if ($conn->query($sql) === TRUE) {
// Si la actualización es exitosa, redirigimos a la página de listado después de 2 segundos
header("Refresh: 2; url=listado.php");
$message = "Registro actualizado exitosamente";
} else {
// Si ocurre un error, lo almacenamos en la variable $message
$message = "Error: " . $sql . "<br>" . $conn->error;
}
// Cerramos la conexión a la base de datos
$conn->close();
} else {
// Si no se ha pasado un ID, mostramos un mensaje de error
if (isset($_GET['id'])) {
// Recogemos el ID de la URL
$id = $_GET['id'];
// Preparamos la consulta SQL para obtener los datos del registro con el ID dado
$sql = "SELECT * FROM items WHERE id = $id";
$result = $conn->query($sql);
// Verificamos si se encontró el registro
if ($result->num_rows > 0) {
// Si se encontró el registro, lo almacenamos en una variable
$row = $result->fetch_assoc();
$nombre = $row['nombre'];
$descripcion = $row['descripcion'];
} else {
$message = "Registro no encontrado";
}
} else {
$message = "ID no especificado";
}
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Modificar Registro</title>
<style>
/* Estilos para la página */
body {
font-family: Arial, sans-serif; /* Fuente para el texto */
margin: 20px; /* Margen alrededor de la página */
background-color: #f4f4f4; /* Color de fondo de la página */
}
.container {
max-width: 600px; /* Ancho máximo del contenedor */
margin: auto; /* Centra el contenedor horizontalmente */
padding: 20px; /* Relleno dentro del contenedor */
background: #fff; /* Color de fondo del contenedor */
border-radius: 8px; /* Bordes redondeados del contenedor */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra alrededor del contenedor */
}
h1 {
color: #333; /* Color del texto del encabezado */
}
form {
display: flex; /* Usamos flexbox para el diseño del formulario */
flex-direction: column; /* Coloca los elementos del formulario en columna */
}
label {
margin-bottom: 5px; /* Margen inferior de las etiquetas */
font-weight: bold; /* Texto en negrita para las etiquetas */
}
input[type="text"], textarea {
margin-bottom: 10px; /* Margen inferior para los campos de entrada */
padding: 10px; /* Relleno dentro de los campos de entrada */
border: 1px solid #ddd; /* Borde de los campos de entrada */
border-radius: 4px; /* Bordes redondeados de los campos de entrada */
font-size: 16px; /* Tamaño de fuente para los campos de entrada */
}
input[type="submit"] {
background-color: #007BFF; /* Color de fondo del botón de envío */
color: #fff; /* Color del texto del botón de envío */
border: none; /* Sin borde en el botón de envío */
padding: 10px; /* Relleno dentro del botón de envío */
border-radius: 4px; /* Bordes redondeados del botón de envío */
cursor: pointer; /* Cursor en forma de mano al pasar sobre el botón */
font-size: 16px; /* Tamaño de fuente del botón de envío */
}
input[type="submit"]:hover {
background-color: #0056b3; /* Color de fondo del botón al pasar el ratón */
}
.message {
font-size: 18px; /* Tamaño de fuente para el mensaje */
margin-bottom: 20px; /* Margen inferior para el mensaje */
color: #007BFF; /* Color del texto del mensaje */
}
.back-link {
display: block; /* Hace que el enlace sea un bloque para centrarlo */
text-align: center; /* Centra el texto del enlace */
margin-top: 20px; /* Margen superior para el enlace */
font-size: 16px; /* Tamaño de fuente del enlace */
}
</style>
</head>
<body>
<div class="container">
<h1>Modificar Registro</h1>
<!-- Muestra el mensaje si existe -->
<?php if (isset($message)): ?>
<p class="message"><?php echo $message; ?></p>
<?php endif; ?>
<!-- Formulario para modificar un registro existente -->
<form method="post" action="modificar.php">
<input type="hidden" name="id" value="<?php echo $id; ?>">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" value="<?php echo isset($nombre) ? htmlspecialchars($nombre) : ''; ?>" required><br>
<label for="descripcion">Descripción:</label>
<textarea id="descripcion" name="descripcion" rows="4" cols="50" required><?php echo isset($descripcion) ? htmlspecialchars($descripcion) : ''; ?></textarea><br>
<input type="submit" value="Actualizar">
</form>
<a href="listado.php" class="back-link">Volver al Listado</a>
</div>
</body>
</html>
Explicación del Código
Inclusión del Archivo de Conexión:
include 'db.php';Incluye el archivo que establece la conexión con la base de datos.
Verificación del Método de Solicitud:
if ($_SERVER["REQUEST_METHOD"] == "POST") {Comprueba si el formulario ha sido enviado mediante el método POST.
Recogida de Datos del Formulario:
$id = $_POST['id'];
$nombre = $_POST['nombre'];
$descripcion = $_POST['descripcion'];Asigna los valores del formulario a variables.
Preparación de la Consulta SQL para Actualizar:
$sql = "UPDATE items SET nombre='$nombre', descripcion='$descripcion' WHERE id=$id";Prepara la consulta SQL para actualizar el registro con el ID dado.
Ejecución de la Consulta y Manejo de Resultados:
if ($conn->query($sql) === TRUE) {
header("Refresh: 2; url=listado.php");
$message = "Registro actualizado exitosamente";
} else {
$message = "Error: " . $sql . "<br>" . $conn->error;
}Ejecuta la consulta y, dependiendo del resultado, redirige a la página de listado o muestra un mensaje de error.
Cierre de Conexión:
$conn->close();Cierra la conexión a la base de datos.
Manejo del Caso GET:
if (isset($_GET['id'])) {
$id = $_GET['id'];
$sql = "SELECT * FROM items WHERE id = $id";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$row = $result->fetch_assoc();
$nombre = $row['nombre'];
$descripcion = $row['descripcion'];
} else {
$message = "Registro no encontrado";
}
} else {
$message = "ID no especificado";
}Si se pasa un ID a través de la URL, se busca el registro correspondiente para rellenar el formulario con los datos actuales. Si no se encuentra el registro o no se especifica un ID, se muestra un mensaje de error.
Código HTML y CSS:
- Estructura del HTML: Define el formulario para modificar el registro, utilizando campos ocultos para el ID y los campos para el nombre y la descripción.
- Estilos CSS: Aplica estilos para mejorar la apariencia del formulario y la página en general, como el diseño del formulario
Código listado.php
<?php
// listado.php
// Incluimos el archivo de conexión a la base de datos
include 'db.php';
// Preparamos la consulta SQL para obtener todos los registros de la tabla 'items'
$sql = "SELECT * FROM items";
// Ejecutamos la consulta y almacenamos el resultado
$result = $conn->query($sql);
// Verificamos si se obtuvieron registros
if ($result->num_rows > 0) {
// Creamos un array para almacenar los registros
$items = [];
while ($row = $result->fetch_assoc()) {
$items[] = $row;
}
} else {
$message = "No se encontraron registros";
}
// Cerramos la conexión a la base de datos
$conn->close();
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Listado de Registros</title>
<style>
/* Estilos para la página */
body {
font-family: Arial, sans-serif; /* Fuente para el texto */
margin: 20px; /* Margen alrededor de la página */
background-color: #f4f4f4; /* Color de fondo de la página */
}
.container {
max-width: 800px; /* Ancho máximo del contenedor */
margin: auto; /* Centra el contenedor horizontalmente */
padding: 20px; /* Relleno dentro del contenedor */
background: #fff; /* Color de fondo del contenedor */
border-radius: 8px; /* Bordes redondeados del contenedor */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra alrededor del contenedor */
}
h1 {
color: #333; /* Color del texto del encabezado */
}
table {
width: 100%; /* Ancho de la tabla ocupa todo el contenedor */
border-collapse: collapse; /* Colapsa los bordes de la tabla */
}
th, td {
border: 1px solid #ddd; /* Borde de las celdas de la tabla */
padding: 10px; /* Relleno dentro de las celdas */
text-align: left; /* Alineación del texto a la izquierda */
}
th {
background-color: #f2f2f2; /* Color de fondo de los encabezados de columna */
}
.action-links {
text-align: center; /* Centra el texto de los enlaces de acción */
}
.action-links a {
margin: 0 5px; /* Espaciado entre los enlaces */
text-decoration: none; /* Sin subrayado en los enlaces */
color: #007BFF; /* Color del texto de los enlaces */
}
.action-links a:hover {
text-decoration: underline; /* Subrayado al pasar el ratón sobre el enlace */
}
.back-link {
display: block; /* Hace que el enlace sea un bloque para centrarlo */
text-align: center; /* Centra el texto del enlace */
margin-top: 20px; /* Margen superior para el enlace */
font-size: 16px; /* Tamaño de fuente del enlace */
}
</style>
</head>
<body>
<div class="container">
<h1>Listado de Registros</h1>
<!-- Muestra el mensaje si existe -->
<?php if (isset($message)): ?>
<p class="message"><?php echo $message; ?></p>
<?php endif; ?>
<!-- Tabla para mostrar los registros -->
<table>
<thead>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Descripción</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<!-- Recorremos el array de registros y mostramos cada uno en una fila de la tabla -->
<?php if (isset($items)): ?>
<?php foreach ($items as $item): ?>
<tr>
<td><?php echo htmlspecialchars($item['id']); ?></td>
<td><?php echo htmlspecialchars($item['nombre']); ?></td>
<td><?php echo htmlspecialchars($item['descripcion']); ?></td>
<td class="action-links">
<!-- Enlaces para modificar y eliminar el registro -->
<a href="modificar.php?id=<?php echo $item['id']; ?>">Modificar</a>
<a href="baja.php?id=<?php echo $item['id']; ?>">Eliminar</a>
</td>
</tr>
<?php endforeach; ?>
<?php endif; ?>
</tbody>
</table>
<a href="alta.php" class="back-link">Agregar Nuevo Registro</a>
</div>
</body>
</html>Explicación del Código
Inclusión del Archivo de Conexión:
include 'db.php';Incluye el archivo que establece la conexión con la base de datos.
Preparación y Ejecución de la Consulta SQL:
$sql = "SELECT * FROM items";
$result = $conn->query($sql);Prepara y ejecuta la consulta para obtener todos los registros de la tabla items.
Verificación de Registros:
if ($result->num_rows > 0) {
$items = [];
while ($row = $result->fetch_assoc()) {
$items[] = $row;
}
} else {
$message = "No se encontraron registros";
}Verifica si se han obtenido registros. Si es así, almacena los registros en un array. Si no hay registros, establece un mensaje de error.
Cierre de Conexión:
$conn->close();Cierra la conexión a la base de datos.
Código HTML y CSS:
- Estructura del HTML: Define una tabla para mostrar los registros con columnas para ID, nombre, descripción y acciones. Incluye enlaces para modificar y eliminar registros.
- Estilos CSS: Aplica estilos para mejorar la apariencia de la tabla y la página en general, incluyendo el diseño de la tabla y los enlaces de acción.
Recorrido de Registros:
<?php foreach ($items as $item): ?>
<tr>
<td><?php echo htmlspecialchars($item['id']); ?></td>
<td><?php echo htmlspecialchars($item['nombre']); ?></td>
<td><?php echo htmlspecialchars($item['descripcion']); ?></td>
<td class="action-links">
<a href="modificar.php?id=<?php echo $item['id']; ?>">Modificar</a>
<a href="baja.php?id=<?php echo $item['id']; ?>">Eliminar</a>
</td>
</tr>
<?php endforeach; ?>Recorre el array de registros y muestra cada uno en una fila de la tabla. Incluye enlaces para modificar y eliminar el registro.
Enlace para Agregar Nuevo Registro:
<a href="alta.php" class="back-link">Agregar Nuevo Registro</a>Proporciona un enlace para agregar un nuevo registro.