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

Como Crear Un CRUD Con Ruby on Rails 7 – Parte 4

Como Crear Un CRUD Con Ruby on Rails 7 – Parte 4

Como Crear Un CRUD Con Ruby on Rails 7 – Parte 4

Demo

En la parte anterior de este tutorial, creamos el controlador el cual contiene los métodos Crear, Leer, Actualizar y Eliminar.

Asimismo, creamos las vistas HTML, en donde más adelante agregaremos los elementos necesarios con Bootstrap. Por último, creamos las rutas, las cuales permiten cargar las vistas respectivas del sistema CRUD.

En esta penúltima y cuarta parte continuaremos con el tutorial Como Crear Un CRUD Con Ruby on Rails 7, vamos con ello.

Partes

Con Ruby on Rails puedes crear sistemas web para diferentes propósitos

Vamos a crear las vistas HTML con el framework Bootstrap, el cual instalamos en la parte 1 de este tutorial.

Vistas HTML (Bootstrap)

Cuando creamos el controlador, también creamos 4 archivos HTML: crear.html.erb, leer.html.erb, actualizar.html.erb y el archivo principal index.erb para listar todos los registros en una tabla.

Los 4 archivos HTML se encuentran en crud-rails-7 > app > views > postres:


Pasemos a usar estos 4 archivos HTML para crear las interfaces correspondientes a cada vista del CRUD.

Ahora pasemos a crear las vistas para las tareas CRUD.

Crear (Create)

Para esta vista crearemos un formulario que servirá para insertar los datos a la base de datos, específicamente a la tabla postres.

Los campos que usaré en el formulario son: nombre, precio, stock, img y url (Este último es la url o slug del registro o postre).

Abrimos el archivo crear.html.erb y agregamos el siguiente formulario:


En el código anterior, si ves el campo nombre llama a la función JavaScript crearUrlAmigable() en los eventos onload y onkeypress:


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


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:


Dentro del 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).

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

Nuestra vista Crear se ve de la siguiente manera:

El formulario para crear un registro tiene 5 campos

Ahora pasemos a crear la vista Leer.

Leer (Read)

Nuestra vista Leer, nos servirá para ver los detalles de un registro independiente.

Haremos uso de un foreach para llamar a los datos de un determinado registro por el id.

Agregamos el siguiente código al archivo leer.html.erb:


Nuestra vista Leer se ve de la siguiente manera:

En esta vista encontramos todos los datos de un registro

Pasemos a crear la vista Actualizar.

Actualizar (Update)

Esta vista la usaremos para colocar los datos de un determinado registro en un formulario y poder editarlos y enviar los cambios a la base de datos

Lo que haremos es usar un foreach para obtener y colocar los datos de un determinado registro (por id) en los campos correspondientes del formulario.

Abrimos el archivo actualizar.html.erb y le agregamos lo siguiente:


Nuestra vista Actualizar se ve de la siguiente manera:

Puedes editar uno o varios campos del registro

Ahora pasemos a crear la vista Eliminar, que no es exactamente una vista, sino una funcionalidad en la vista principal del sistema CRUD.

Eliminar (Delete)

Para eliminar un registro no necesitaré una vista, ya que lo haremos con JavaScript en la vista principal en el archivo index.html.erb

Nuestra vista principal servirá para listar todos los registros en una tabla HTML y al lado derecho de cada registro colocaré 3 botones que digan Detalles, Editar y Eliminar:

Abrimos el archivo index.html.erb y agregamos lo siguiente:


La vista principal se ve así:

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


Al llamar a la función eliminarRegistro() 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 hace clic en el botón Cancelar el sistema no hace nada:

Cada registro siempre tendrá un botón para Eliminarse

Bien, hasta aquí ya tenemos creadas las vistas HTML con Bootstrap 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