Antes de avanzar más en el proyecto, vamos a crear la página principal de nuestro sistema, con un menú de navegación, el cual no será el index, ya que más adelante, utilizaremos un inicio de sesión con login y el index será reservado para dicha función.
Aquí tienes un ejemplo de un archivo menu.php que contiene enlaces de imágenes para las categorías de «Pacientes» y «Citas.» Los enlaces te llevarán a las respectivas páginas para registrar, consultar, actualizar y borrar pacientes y citas. A continuación, explico el código:
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" type="text/css" href="estilos.css">
<meta charset="UTF-8">
<title>Menú de Gestión</title>
</head>
<body>
<h1>Menú de Gestión</h1>
<div class="menu-container">
<div class="menu-category">
<h2>Pacientes</h2>
<a href="registro_paciente.html">
<img src="imagen_registrar.png" alt="Registrar Paciente" width="128">
</a>
<a href="consultar_paciente.php">
<img src="imagen_consultar.png" alt="Consultar Paciente" width="128">
</a>
<a href="actualizar_paciente.php">
<img src="imagen_actualizar.png" alt="Actualizar Paciente" width="128">
</a>
<a href="borrar_paciente.php">
<img src="imagen_borrar.png" alt="Borrar Paciente" width="128">
</a>
</div>
<div class="menu-category">
<h2>Citas</h2>
<a href="registro_cita.html">
<img src="imagen_registrar.png" alt="Registrar Cita" width="128">
</a>
<a href="consultar_cita.php">
<img src="imagen_consultar.png" alt="Consultar Cita" width="128">
</a>
<a href="actualizar_cita.php">
<img src="imagen_actualizar.png" alt="Actualizar Cita" width="128">
</a>
<a href="borrar_cita.php">
<img src="imagen_borrar.png" alt="Borrar Cita" width="128">
</a>
</div>
</div>
</body>
</html>
En este código, hemos creado un menú de gestión con dos categorías: «Pacientes» y «Citas.» Cada categoría tiene cuatro opciones: Registrar, Consultar, Actualizar y Borrar. Se utilizan imágenes (cambiar "imagen_registrar.png", "imagen_consultar.png", etc., por las rutas reales de tus imágenes) de 128px de ancho para representar estas acciones.
Estas reglas CSS deben estar en tu archivo estilos.css:
.menu-container {
background-color: #FFFFFF;
padding: 20px;
margin: 20px auto;
width: 50%;
box-shadow: 0px 0px 10px #AAAAAA;
}
.menu-category {
text-align: center;
margin-bottom: 20px;
}
.menu-category h2 {
color: #333333;
}
.menu-category a {
display: inline-block;
margin: 10px;
text-decoration: none;
color: #333333;
}
.menu-category img {
border: 1px solid #AAAAAA;
border-radius: 5px;
transition: transform 0.2s;
}
.menu-category img:hover {
transform: scale(1.05);
}
La vista previa del menú puede verse asi:
Puedes descargar desde «iconfinder.com» las imágenes que más te agraden, solo recuerda cambiar los nombres por los utilizados en este ejercicio.
Para agregar el nombre de cada función debajo de las imágenes del menú, simplemente debes incluir un elemento de texto (por ejemplo, un párrafo o un <span>) debajo de cada imagen. Aquí tienes el código modificado:
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" type="text/css" href="estilos.css">
<meta charset="UTF-8">
<title>Menú de Gestión</title>
</head>
<body>
<h1>Menú de Gestión</h1>
<div class="menu-container">
<div class="menu-category">
<h2>Pacientes</h2>
<a href="registrar-paciente.html">
<img src="imagen_registrar.png" alt="Registrar Paciente" width="128">
<span>Registrar</span>
</a>
<a href="consultar_paciente.php">
<img src="imagen_consultar.png" alt="Consultar Paciente" width="128">
<span>Consultar</span>
</a>
<a href="actualizar_paciente.php">
<img src="imagen_actualizar.png" alt="Actualizar Paciente" width="128">
<span>Actualizar</span>
</a>
<a href="borrar_paciente.php">
<img src="imagen_borrar.png" alt="Borrar Paciente" width="128">
<span>Borrar</span>
</a>
</div>
<div class="menu-category">
<h2>Citas</h2>
<a href="registro_cita.html">
<img src="imagen_registrar.png" alt="Registrar Cita" width="128">
<span>Registrar</span>
</a>
<a href="consultar_cita.php">
<img src="imagen_consultar.png" alt="Consultar Cita" width="128">
<span>Consultar</span>
</a>
<a href="actualizar_cita.php">
<img src="imagen_actualizar.png" alt="Actualizar Cita" width="128">
<span>Actualizar</span>
</a>
<a href="borrar_cita.php">
<img src="imagen_borrar.png" alt="Borrar Cita" width="128">
<span>Borrar</span>
</a>
</div>
</div>
</body>
</html>
Debe verse así:
Recuerda verificar cada uno de los links con los que tenemos previamente ya creados, hasta este paso deben funcionar bien ambos botones de Registrar:
NOTA: Existen varias formas de hacer un CRUD, hay quienes utilizan paginas por separado, hay quienes agregan las funciones dentro de «Consultar», hay quienes ordenan con carpetas el contenido, etc. Lo importante es que empieces a programar y entiendas el funcionamiento, poco a poco crearás tu propia forma de programación de acuerdo a tus gustos.