11 Formulario de NUEVO USUARIO en el Sistema de Ventas con (PHP y MySql) FullStack

Duración: 11 min
Módulo: 👤 CRUD de Usuarios y Roles (Seguridad Lógica) Lección 3 de 17

Descripción

📝 Lección 11: Formulario de Nuevo Usuario

🏗️ Diseño de la Interfaz para el Registro (CRUD - CREATE)

Esta lección se enfoca en la creación de la interfaz (el formulario) para el registro de nuevos usuarios, completando la primera parte de la operación CREATE (Crear) del CRUD. El objetivo es diseñar un formulario funcional y visualmente coherente con la plantilla, listo para enviar datos al controlador en el siguiente video.

Contenido Esencial que Cubre la Lección:

1. Estructura y Estilo de la Vista (views/usuarios/create.php)

  • Distribución del Layout: Se establece el formulario dentro de un contenedor de columna 5 (col-md-5) para centrar y reducir su tamaño en la página [06:08].
  • Tarjeta de Creación (Card): Se utiliza el componente Card de AdminLTE. Se le asigna la clase Card success para darle un color verde [02:35], identificando que esta interfaz es para una acción de creación o registro.
    • El título del Card es "Llene los datos con cuidado" [02:56].

2. Diseño de los Campos del Formulario

Se definen los tres campos necesarios para el registro del usuario (según la tabla de la base de datos):

CampoEtiqueta (<label>)Tipo de InputClase de BootstrapPlaceholder/AyudaObservaciones
NombresNombrestextform-control"Escriba aquí el nombre del nuevo usuario" [04:07] 
EmailEmailemailform-control"Escriba aquí el correo del nuevo usuario" [04:58]Se usa el tipo email para forzar la validación de formato por parte del navegador [05:29].
ContraseñaContraseñapasswordform-control(Vacío) [06:31]Se usa el tipo password para ocultar el texto de la contraseña [06:47].
VerificaciónRepita la contraseñatextform-control(Vacío) [07:23]Se mantiene como tipo text momentáneamente para facilitar la prueba de ingreso de datos [07:03].

3. Definición del Envío de Datos

  • Botones de Acción: Se añaden los botones "Guardar" (btn-primary) y "Cancelar" (btn-secondary) [08:21]. El botón "Guardar" se establece como tipo submit para enviar el formulario [10:43].
  • Destino de la Acción (<form>): Se configura el tag <form> para enviar los datos al controlador que procesará la inserción:
    • Método: POST [10:36].
    • Acción: Se establece la ruta a un nuevo controlador llamado create.php dentro de la carpeta controllers/usuarios [10:02].

¡El formulario está listo para que, en el próximo video, se desarrolle el controlador que recibirá y procesará estos datos para su registro en la base de datos!