6. Maquetación Módulo Seleccionar

 Maquetación del Módulo de Selección en Laravel

En este post, vamos a explorar el proceso de maquetación del módulo de selección para el inicio de sesión en un sistema desarrollado con Laravel. Este módulo permite a los usuarios elegir cómo desean ingresar al sistema según su rol: Secretaria, Doctor, Paciente o Administrador.

Estructura del Proyecto

El sistema sigue la estructura estándar de Laravel con algunas carpetas clave:

text
Clinted-18/
├── app/
├── bootstrap/
├── config/
├── database/
├── public/
├── resources/
│   ├── css/
│   ├── js/
│   ├── lang/
│   └── views/
│       ├── auth/
│       ├── layouts/
│       └── modules/      # Aquí crearemos nuestro módulo
├── routes/
│   ├── web.php           # Configuración de rutas
├── storage/
├── tests/
└── vendor/

Configuración de Rutas

En el archivo routes/web.php, configuramos la ruta principal para que redirija al módulo de selección:

php
Route::get('/', function () {
    return view('modules.seleccionar');
});

Creación de la Vista

Dentro de resources/views/modules/, creamos el archivo seleccionar.blade.php que extiende de nuestra plantilla principal:

php
@extends('plantilla')

@section('content')
<section class="content login-page">
    <center>
        <h1>Seleccione como desea Ingresar al Sistema</h1>
    </center>

    <div class="row">
        <!-- Tarjeta Secretaria -->
        <div class="col-lg-3 col-xs-6">
            <div class="small-box" style="background-color: #F781D8; color: white;">
                <div class="inner">
                    <h3>Secretaria</h3>
                    <p>Inicie Sesión</p>
                </div>
                <div class="icon">
                    <i class="fa fa-female"></i>
                </div>
                <a href="#" class="small-box-footer">Ingresar <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>

        <!-- Tarjeta Doctor -->
        <div class="col-lg-3 col-xs-6">
            <div class="small-box" style="background-color: #00c0ef; color: white;">
                <div class="inner">
                    <h3>Doctor</h3>
                    <p>Inicie Sesión</p>
                </div>
                <div class="icon">
                    <i class="fa fa-user-md"></i>
                </div>
                <a href="#" class="small-box-footer">Ingresar <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>

        <!-- Tarjeta Paciente -->
        <div class="col-lg-3 col-xs-6">
            <div class="small-box" style="background-color: #f39c12; color: white;">
                <div class="inner">
                    <h3>Paciente</h3>
                    <p>Inicie Sesión</p>
                </div>
                <div class="icon">
                    <i class="fa fa-users"></i>
                </div>
                <a href="#" class="small-box-footer">Ingresar <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>

        <!-- Tarjeta Administrador -->
        <div class="col-lg-3 col-xs-6">
            <div class="small-box" style="background-color: #dd4b39; color: white;">
                <div class="inner">
                    <h3>Administrador</h3>
                    <p>Inicie Sesión</p>
                </div>
                <div class="icon">
                    <i class="fa fa-mail"></i>
                </div>
                <a href="#" class="small-box-footer">Ingresar <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
    </div>
</section>
@endsection

Características Clave

  1. Diseño Responsivo: Utiliza clases de Bootstrap (col-lg-3 col-xs-6) para adaptarse a diferentes tamaños de pantalla.

  2. Tarjetas de Acceso: Cada rol tiene una tarjeta con:

    • Color distintivo

    • Icono representativo

    • Título del rol

    • Opción para iniciar sesión

  3. Extensión de Plantilla: La vista extiende de una plantilla principal (plantilla.blade.php) para mantener la consistencia en el diseño.

  4. Estilos Personalizados: Cada tarjeta tiene colores específicos para diferenciar visualmente los roles.

Próximos Pasos

En el siguiente tutorial, implementaremos la funcionalidad de inicio de sesión para cada uno de los roles, conectando estas tarjetas con sus respectivas vistas de autenticación.

Este módulo de selección proporciona una interfaz clara y amigable para que los usuarios puedan acceder al sistema según sus permisos y necesidades específicas

Comentarios

Publicar un comentario

Entradas más populares de este blog

8-Creación de una API RESTful con Laravel

  Creación de una API RESTful con Laravel En este tutorial, te guiaré paso a paso para crear una API RESTful básica con Laravel, incluyendo autenticación, rutas, controladores y migraciones. Requisitos previos PHP ≥ 8.1 Composer instalado Laravel instalado globalmente Conocimientos básicos de PHP y Laravel Base de datos configurada (MySQL, PostgreSQL, SQLite, etc.) Paso 1: Crear un nuevo proyecto Laravel bash laravel nuevo mi-api-laravel # O usando composer composer create-project laravel/laravel mi-api-laravel Accede al directorio del proyecto: bash cd mi-api-laravel Paso 2: Configurar la base de datos Abre el archivo  .env  y configura las credenciales de tu base de datos: env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=mi_api_laravel DB_USERNAME=root DB_PASSWORD= Paso 3: Crear un modelo con migración, controlador y factory Vamos a crear un modelo  Producto  como ejemplo: bash php artisan make:model Producto -mcr Esto creará: Un modelo ( ...
Leer más

02 -Rutas en Laravel

  Rutas en Laravel: Explicación y Ejemplos Las rutas en Laravel son el mecanismo que permite definir cómo responde tu aplicación a las solicitudes HTTP entrantes. Todas las rutas de Laravel se definen en los archivos dentro del directorio  routes/ . Tipos básicos de rutas 1. Rutas básicas php Copy Download Route :: get ( '/saludo' , function ( ) { return '¡Hola Mundo!' ; } ) ; Cuando se visita  /saludo  en el navegador, se mostrará "¡Hola Mundo!". 2. Rutas con parámetros php Copy Download Route :: get ( '/usuario/{id}' , function ( $id ) { return 'Usuario ' . $id ; } ) ; Esta ruta capturará el ID de la URL y lo pasará a la función. 3. Rutas con parámetros opcionales php Copy Download Route :: get ( '/post/{titulo?}' , function ( $titulo = 'Título por defecto' ) { return $titulo ; } ) ; El parámetro  titulo  es opcional y tiene un valor por defecto. 4. Rutas con restricciones php Copy Download Rout...
Leer más

3-Rutas

  Rutas en Laravel: Explicación y Ejemplos Las rutas en Laravel son el mecanismo que permite definir cómo responde tu aplicación a las solicitudes HTTP entrantes. Todas las rutas de Laravel se definen en los archivos dentro del directorio  routes/ . 2. Rutas con parámetros php Copy Download Route :: get ( '/usuario/{id}' , function ( $id ) { return 'Usuario ' . $id ; } ) ; Esta ruta capturará el ID de la URL y lo pasará a la función. 3. Rutas con parámetros opcionales php Copy Download Route :: get ( '/post/{titulo?}' , function ( $titulo = 'Título por defecto' ) { return $titulo ; } ) ; El parámetro  titulo  es opcional y tiene un valor por defecto. 5. Rutas con nombre php Copy Download Route :: get ( '/perfil' , function ( ) { // ... } ) -> name ( 'perfil' ) ; Puedes generar URLs a esta ruta usando  route('perfil') . Rutas hacia controladores php Copy Download Route :: get ( '/productos'...
Leer más