Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Como crear un CRUD con Ruby on Rails 6 y Bootstrap 4 – Parte 4

Demo

En este Post continuaremos con la parte anterior llamada Como crear un CRUD con Ruby on Rails 6 y Bootstrap 4 – Parte 3 en donde creamos el Controlador Postres con las vistas HTML y las rutas, en este Parte 4 vamos a trabajar en la creación de las Vistas del sistema CRUD (Create, Read, Update y Delete), estas vistas las trabajaremos con Bootstrap 4.

Partes

Antes de continuar con este Post te invito a escuchar el Podcast: “Que Hacer Cuando Estamos En Casa”:

Spotify:

Sound Cloud:

Bien ahora continuemos con el Post: Como crear un CRUD con Ruby on Rails 6 y Bootstrap 4 – Parte 4.

En la Parte 3 creamos el Controlador Postre y al hacerlo creamos de paso las vistas HTML para nuestro sistema CRUD, estas vistas las vamos a estilizar usando Bootstrap 4.

Los archivos que usaremos son 4: crear.html.erb, leer.html.erb, actualizar.html.erb y el archivo principal para listar todos los registros en una tabla index.html.erb. Para eliminar un registro no necesitaré una vista, ya que usaré JavaScript en la vista principal (index.html.erb) para eliminar un registro.

Los 4 archivos crear.html.erb, leer.html.erb, actualizar.html.erb e index.html.erb se encuentran en app > views > postres


Bueno ahora usaremos estos 4 archivos para empezar a crear las interfaces correspondientes a cada vista HTML del CRUD.

Crear (Vista)

Esta vista va contener diferentes elementos, pero centrémonos en el formulario que es la parte más importante a mi parecer, ya que mediante el se insertarán los datos a la Base de datos, específicamente a la tabla postres, los campos que usaré en mi el formularios son: nombre, precio, stock, img y url (Este último es la url o slug del registro o postre)

El archivo para esta vista es crear.html.erb


Aquí he realizado un truco temporal hasta que encuentre una mejor forma de hacerlo, si te das cuenta el campo nombre llama a la función JavaScript crearUrlAmigable() en los eventos onload y onkeypress


La función crearUrlAmigable() crea la url en base al nombre que el usuario tipee en el campo nombre, el código JavaScript es el siguiente:


Asimismo he creado un truco para obtener el nombre de la imagen y almacenarlo en la base de datos, lo que hago es que el campo nimg llame a la función JavaScript cargarImagen() en el evento onchange,


El código de la función cargarImagen() es el siguiente:


En el campo url se genera la url en base al nombre que el usuario tipee, esto se genera con la función JavaScript crearUrlAmigable(), asimismo he colocado el campo img que obtiene el nombre de la imagen con la función JavaScript cargarImagen()


El campo url esta como solo lectura (readonly) y el campo img esta como solo lectura (readonly) y oculto (hidden).

Bueno con esto la vista Crear se ve de la siguiente manera:

Leer (Vista)

Esta vista va servir para ver los Detalles de un registro, es sencilla pero muy útil. Mediante un foreach llamamos a los datos de un determinado registro por el id

El archivo para esta vista es leer.html.erb


Bien, esta vista parece muy sencilla, pero es muy importante, en ella se muestran los detalles de un determinado registro, la vista Leer se vería de la siguiente manera:

Actualizar (Vista)

En esta vista vamos a colocar los datos de un determinado registro para poder editarlos y enviar los cambios a la Base de Datos, lo que hago es mediante un foreach obtener y colocar los datos de un determinado registro (por id) en los campos correspondientes del formulario.

El archivo para esta vista es actualizar.html.erb


Bueno la vista Actualizar se ve de la siguiente manera:

Eliminar

Por último he creado una vista principal en donde listaremos todos los registros en una tabla HTML y al lado derecho de cada registro colocaré 3 botones: Detalles, Editar y Eliminar

Para esta vista usare el archivo index.html.erb


Con esto la Vista Principal se ve de la siguiente manera:

Cuando el usuario hace clic en el botón Eliminar, este llama a la función JavaScript ConfirmDelete(), el código de esta función es el siguiente:


La función ConfirmDelete() lanza una alerta preguntándole al usuario: Estas seguro de Eliminar? y si el usuario le de clic en el botón aceptar, el sistema procede a borrar el registro y si da clic en cancelar el sistema no hace nada.

Hasta aquí ya tenemos creadas las vistas HTML con Bootstrap 4 para el sistema CRUD.

Ten Paciencia, lo que quiero es que entiendas todo el proceso para Crear este Proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje.

Nota (s)

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Salir de la versión móvil