Creación de Formularios en PHP con HTML y Bootstrap

Clase 22 de 37 • Curso de Introducción a Laravel 6

Resumen

¿Cómo se crea un formulario para la creación de nuevos elementos?

La creación de formularios en aplicaciones web es una de las tareas esenciales para permitir la interacción del usuario con el sistema. En esta sección, exploraremos cómo construir un formulario dirigido a la creación de elementos, en este caso, artículos para un blog. El enfoque es sencillo y directo, usando el lenguaje de PHP para gestionar vistas y formularios.

¿Cómo estructurar las vistas para el formulario?

Primero, es crucial definir la vista correcta en la estructura de nuestro proyecto. Para el formulario de creación de artículos, debemos:

Retornar la vista adecuada desde el controlador. Esta debe estar ubicada en la carpeta resources/views/posts.
Crear un nuevo archivo llamado create.blade.php que contendrá el HTML formateado por el framework elegido.

public function create()
{
    return view('posts.create');
}

¿Qué debe contener el formulario?

El formulario es un elemento HTML que debe ser cuidadosamente configurado para cumplir con los requisitos de interacción con el servidor. Los pasos básicos incluyen:

Formulario y su acción: Definimos el formulario con la ruta donde se enviarán los datos y especificamos el método POST.
```
<form action="{{ route('posts.store') }}" method="POST" enctype="multipart/form-data">
```
Configuración del método y tipo de datos: Es necesario asegurar que el formulario tenga un protocolo de encriptación.
```
<form enctype="multipart/form-data">
```
Campos del formulario: Añadimos los input para el título, la imagen, el contenido y un embebido, cada uno con su respectiva etiqueta y configuraciones CSS para la clase form-control.

¿Cómo organizar los elementos del formulario?

Para un diseño efectivo y limpio, organizamos los inputs dentro de divs configurados con clases de Bootstrap:

Campo de Título: Campo obligatorio de texto.
Campo de Imagen: No es obligatorio, tipo archivo.
Contenido del artículo: Uso de un textarea para permitir más caracteres, configurado a nivel de filas.
Campo de Embebido: Un campo no obligatorio similar al contenido.
Botón de Envío: Configurado con la clase btn btn-primary.

<div class="form-group">
    <label for="title">Título *</label>
    <input type="text" name="title" class="form-control" required>
</div>

<div class="form-group">
    <label for="image">Imagen</label>
    <input type="file" name="image" class="form-control">
</div>

<div class="form-group">
    <label for="content">Contenido *</label>
    <textarea name="body" rows="6" class="form-control" required></textarea>
</div>

<div class="form-group">
    <label for="embed">Embebido</label>
    <textarea name="embed" class="form-control"></textarea>
</div>

<div class="form-group">
    <button type="submit" class="btn btn-primary">Enviar</button>
</div>

¿Qué aspectos adicionales debemos considerar?

Validation visual: HTML ofrece una validación visual directamente en el frontend. Sin embargo, se debe complementar con validación del lado del servidor.
Pruebas: Después de crear el formulario, es crucial probarlo para asegurarse de que todos los campos funcionan correctamente y los datos se envían al servidor como se espera.

La implementación de este formulario te permite establecer una base sólida para futuras funcionalidades, donde los datos se procesarán y almacenarán en tu aplicación. Mantente motivado praticando y experimentando más con formularios y otras funcionalidades de la web.