Formulario de creación con ventana Modal - Laravel y Vuejs

↑ Me gusta (0)

Vamos a dedicarnos en el diseño para preparar la vista de nuestro formulario de creación, utilizando la tecnología de Bootstrap con una ventana Modal que aparece al hacer clic en el botón para crear una nueva tarea. Para la creación de nuestro formulario de registro de una nueva tarea, vamos a preparar una ventana modal que va activarse al presionar el botón Nueva tarea que fue colocado desde el comienzo de este curso y que ahora vamos a proceder a configurarlo.

Configuración del Botón

El botón que va a invocar a la ventana modal o flotante, está ubicado dentro de la vista resources\views\dashboard.blade.php y editamos las propiedades del botón de la siguiente manera:

  1. Agregamos el parámetro data-toggle="modal" para indicar que el botón al ser presionado va llamar a una ventana de tipo modal.
  2. Después agregamos el parámetro data-target="#create" para hacer la referencia al div con identificador create y que va a contener la ventana a presentarse.
<a href="#" class="btn btn-primary pull-right" data-toggle="modal" data-target="#create">
    Nueva tarea
</a>
  1. Finalmente vamos a incluir la ventana que vamos a crear más adelante con ayuda del método include de blade. Para esto, nos ubicamos al final de la tabla de nuestro archivo dashboard.blade.php y colocamos lo siguiente: @include('create').

Creación de la ventana Modal

Vamos a crear un nuevo archivo dentro de nuestra carpeta que contiene las vistas de nuestro proyecto y le asignamos el siguiente nombre resources\views\create.blade.php.

  1. Dentro de este archivo lo primero que hacemos es crear un div con la clase modal y también la clase fade para proporcionar el efecto de deslizamiento de la ventana. Además agregamos el identificador create con el cual será llamada la flotante desde el botón antes configurado.

  2. Luego ya simplemente ayudándonos de las clases de bootstrap creamos los div necesarios para separar la cabecera, el cuerpo y el pie de la ventana.

  3. Dentro del div “modal-header” de la ventana, añadimos un botón que será utilizado para cerrar la flotante con el atributo data-dismiss="modal". También añadimos un título con el texto Crear.

  4. Finalmente dentro del div “modal-body” por ahora solo colocamos puntos seguidos, y dentro del div “modal-footer” añadimos otro botón que será utilizado para la acción de guardar todo lo ingresado en el formulario más adelante.

<div class="modal fade" id="create">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
                <h4>Crear</h4>
            </div>
            <div class="modal-body">
                ….
            </div>
            <div class="modal-footer">
                <input type="submit" class="btn btn-primary" value="Guardar">
            </div>
        </div>
    </div>
</div>

Con esto ya podemos probar nuestra aplicación y observar como al presionar el botón de Nueva tarea aparece de forma muy vistosa una ventana flotante con todos los componentes que hemos añadido por el momento.

En el siguiente video vamos a continuar con el diseño del formulario dentro de esta ventana y la programación necesaria para guardar lo ingresado.

Italo Morales F. Italo Morales F. 3,230.00 XP

1

Tecnologías Webpack y Laravel Mix

Bienvenido a una de las series más esperadas y solicitadas en Rimorsoft, y no es para menos. La mezcla de dos grandes frameworks como lo son...

2

Controllers, Routes, Views, Database para el CRUD

En este video vamos a comenzar formalmente con la preparación del proyecto para realizar el CRUD utilizando VUE y Laravel. Se realiza la cre...

3

Conexión VUEjs y Laravel - API

En este video vamos a crear el código necesario para iniciar el API, como primer paso utilizaremos datos de ejemplo (seeder) y configuramos...

4

Lista de datos con Laravel y VUEjs

En este video veremos realmente la integración de Laravel y Vue, el objetivo será crear el diseño con su tablas, los botones, el título y la...

5

Eliminar registros con VUEjs y LARAVEL

Ha llegado la hora de adentrarnos un poco más en el funcionamiento del CRUD y en este video vamos a trabajar con la letra D, es deci...

6

Notificaciones con TOASTR - Uso de Jquery, Laravel y Vuejs

En este video vamos a culminar el proceso de eliminación de un registro, haciéndole saber al usuario que la acción se ha realizado con éxito...

7

Formulario de creación con ventana Modal - Laravel y Vuejs

Vamos a dedicarnos en el diseño para preparar la vista de nuestro formulario de creación, utilizando la tecnología de Bootstrap con una vent...

8

Guardar datos con LARAVEL y VUEjs – Método STORE

En este video vamos a continuar con el formulario de creación para añadir una nueva tarea a nuestra base de datos, utilizando Vue para h...

9

Formulario para Editar con LARAVEL y VUEjs

Vamos a preparar el terreno para la edición de un registro de nuestra lista de tareas, es decir crearemos el formulario y su respectiva vent...

10

Actualizar registros con LARAVEL y VUEjs

Tenemos que continuar con el proceso de edición de un registro y es por esto que en este video vamos a crear el bloque de código necesario p...

11

X-XSRF-TOKEN LARAVEL, VUE y AXIOS

Este video será el Bonus número 1 dentro de esta serie y en el cual vamos aprender un poco sobre seguridad y como Laravel nos ayuda en ese s...

12

Paginación usando VUEjs y LARAVEL - Parte 1

Video Bonus número 2, en el que vamos aprender paso a paso cómo realizar la paginación de varios registros de la base de datos en una lista,...

13

Paginación VUEjs y LARAVEL Computed Property - Parte 2

Video Bonus número 3, en el que vamos a continuar con la práctica de la paginación de varios registros utilizando Laravel y Vuejs, enfocándo...

14

Paginación VUEjs y LARAVEL Cálculo de páginas - Parte 3

Video Bonus número 4, vamos a continuar con la programación de la propiedad pagesNumber para obtener los números de página con cálculos...

15

Paginación VUEjs y LARAVEL Cálculo de páginas - Parte 4 (FINAL)

Video Bonus número 5, donde vamos a continuar básicamente con la creación del html o diseño de la paginación, utilizando los métodos y varia...

16

CRUD en Laravel y VUEjs - Despedida

Último video y despedida de la serie Crud en Laravel y Vuejs, corto resumen de todo lo visto a lo largo de los videos y corrección d...

Libro de Laravel Engineer Compra el libro Laravel Engineer