Implementación del formulario de creación

Curso de Introducción a Laravel 6

Entender Laravel

¡Actualizamos este curso!

¿Qué es Laravel?

Herramientas necesarias para trabajar con PHP y Laravel

Entendiendo el ciclo de vida de las solicitudes web

Qué es un CRUD y cómo implementarlo

Lógica de controladores y vistas con datos de prueba

Creando un formulario

Comprender los Fundamentos de Laravel

Sistema de rutas y controladores

Uso de Middlewares

Validación de datos (rutas, vistas, formularios y controladores)

Blade: sistema de plantillas avanzado

Trabajando con el componente Laravel/UI

Aprender sobre Eloquent ORM

Eloquent: trabajando con este ORM

Relaciones de tablas

Colecciones y serialización de datos

Formato de valores en tablas y presentación de datos

Crear PlatziPress

Proyecto Blog: presentación y configuración inicial

Creación de tablas, entidades y datos de prueba

Plantillas de trabajo y entendiendo el login

Diseño visual con Bootstrap

Vista index y botones de acción

Implementación del formulario de creación

Implementación del guardado

Creando la función de editar un post

Actualizando nuestros posts

Integrando contenido audiovisual

Construir Proyecto Final: API con TDD (Intermedio)

Introducción al testing

Metodología TDD y testing HTTP

Proyecto API con TDD: presentación y configuración inicial

Store con TDD

Refactorización y validación en Store

Show con TDD

Update y validación con TDD

Delete con TDD

Index con TDD

Protección de una API con Login

Cierre del curso

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

¿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.

Aportes 13

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Miguel Ángel Muñoz Pozos

hace 5 años

Hola así quedaría

![](

<form 
                        action="{{ route('posts.store') }}" 
                        method="POST" enctype="multipart/form-data"
                    >
                        <div class="form-group">
                            <label for="title" class="font-weight-bold">Titulo *:</label>
                            <input type="text" name="title" id="title" class="form-control" placeholder="Titulo" required>
                        </div>

                        <div class="form-group custom-file">
                            <input type="file" class="custom-file-input" name="image" id="image">
                            <label class="custom-file-label" for="image" data-browse="Elige una imagen"><i class="far fa-file-image"></i> Elige una imagen</label>                           
                        </div>
                        
                        <div class="form-group">
                            <label for="body" class="font-weight-bold">Contenido *:</label>
                            <textarea class="form-control" name="body" id="body" rows="5" required></textarea>
                        </div>

                         <div class="form-group">
                            <label for="iframe" class="font-weight-bold">Contenido embebido:</label>
                            <textarea class="form-control" name="iframe" id="iframe"></textarea>
                        </div>

                        <div class="form-group text-center">
                            @csrf
                            <input type="submit" value="Enviar" class="btn btn-outline-primary col-2 btn-lg">
                        </div>

                    </form>

RetaxMaster

hace 5 años

Recomiendo ponerle la clase “form-control-file” al input de tipo file para que Bootstrap le de algunos formatos igual:D

Jhon Fabio Cardona Martinez

hace 4 años

Para los que trabajan o desarrollan en VSCode recomiendo la extensión Bootstrap v4 Snippets
Ayuda mucho en la maquetación.

https://marketplace.visualstudio.com/items?itemName=Zaczero.bootstrap-v4-snippets

T-gold

hace 5 años

Formulario de Creacion
Ya tenemos el boton de crear blog con la ruta posts.create
asi que debemos crear ese method en en el PostController
9 
//ruta ya esta echa en el boton 
A)Controller
B)Views

A)
"PostController.php"
   public function create()
    {
        //carpeta/archivo
        return view("posts.create");
    }


B)
"Creamos /resources/views/posts/create.blade.php


```<form 
                        action="{{ route('posts.store') }}" 
                        method="POST" 
                        enctype="multipart/form-date"
                    >

                        <div class="form-group">
                            <label >Titulo *</label>
                            <input type="text" name="titulo" class="form-control" required>
                        </div>

                        <div class="form-group">
                            <label >Image </label>
                            <input type="file" name="file">
                        </div>

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

                        <div class="form-group">
                            <label >Contenido embebido</label>
                            <textarea name="iframe" class="form-control"></textarea>
                        </div>

                        <div class="form-group">
                            @csrf
                            <input type="submit" value="Crear !" class="btn btn-sm btn-primary">
                        </div>

                    </form>