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

5 minuto(s)

En esta página:

Demo

En este Post continuaremos con la parte anterior Como crear un CRUD con Ruby on Rails 6 y Bootstrap 4 – Parte 2, en donde configuramos la Base de Datos, el Modelo Postres y creamos y ejecutamos la migración de la tabla Postres, ahora continuaremos con los siguientes pasos para crear el Sistema CRUD, vamos con este Post.

Partes

Parte 1
Parte 2
Parte 3
Parte 4
Parte 5 (Final – Código Fuente GitHub)

Antes de continuar con este Post, si no has escuchado sobre Ruby on Rails, te recomiendo leer el artículo: Que es Ruby on Rails (RoR) y otros detalles, de esta manera estarás familiarizado con este Post.

Controlador

En Ruby on Rails podemos crear un controlador y al mismo tiempo las vistas HTML que usarán este controlador que vamos a crear, para crear el controlador con las vistas HTML del CRUD ejecutamos el siguiente comando:


rails g controller postres index leer crear actualizar 

      create  app/controllers/postres_controller.rb
       route  get 'postres/index'
get 'postres/leer'
get 'postres/crear'
get 'postres/actualizar'
      invoke  erb
      create    app/views/postres
      create    app/views/postres/index.html.erb
      create    app/views/postres/leer.html.erb
      create    app/views/postres/crear.html.erb
      create    app/views/postres/actualizar.html.erb
      invoke  test_unit
      create    test/controllers/postres_controller_test.rb
      invoke  helper
      create    app/helpers/postres_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    scss
      create      app/assets/stylesheets/postres.scss

rails g controller postres index leer crear actualizar

create app/controllers/postres_controller.rb

route get 'postres/index'

get 'postres/leer'

get 'postres/crear'

get 'postres/actualizar'

invoke erb

create app/views/postres

create app/views/postres/index.html.erb

create app/views/postres/leer.html.erb

create app/views/postres/crear.html.erb

create app/views/postres/actualizar.html.erb

invoke test_unit

create test/controllers/postres_controller_test.rb

invoke helper

create app/helpers/postres_helper.rb

invoke test_unit

invoke assets

invoke scss

create app/assets/stylesheets/postres.scss

Tras ejecutar el comando anterior se ha creado un archivo llamado postres_controller.rb, este archivo se ha creado en app > controllers > postres_controller.rb


/app 
├── /app
    ├── /assets 
    ├── /channels 
    ├── /controllers 
        ├── /concerns 
        ├── application_controller.rb 
        ├── postres_controller.rb // Se ha creado este Archivo
    ├── /helpers
    ├── /javascript
    ├── /jobs
    ├── /mailers
    ├── /models
    ├── /views
├── /bin
├── /config
├── /db
├── /lib
├── /log
├── /public
├── /storage
├── /test
├── /tmp
├── /vendor
├──  .gitignore
├──  .ruby-version
├──  config.ru
├──  Gemfile  
├──  Gemfile.lock
├──  package.json
├──  Rakefile
├──  Gemfile.lock
├──  README.md

/app

├── /app

├── /assets

├── /channels

├── /controllers

├── /concerns

├── application_controller.rb

├── postres_controller.rb // Se ha creado este Archivo

├── /helpers

├── /javascript

├── /jobs

├── /mailers

├── /models

├── /views

├── /bin

├── /config

├── /db

├── /lib

├── /log

├── /public

├── /storage

├── /test

├── /tmp

├── /vendor

├── .gitignore

├── .ruby-version

├── config.ru

├── Gemfile

├── Gemfile.lock

├── package.json

├── Rakefile

├── Gemfile.lock

├── README.md

Abre el archivo postres_controller.rb y agregamos los métodos Crear, Leer, Actualizar y Eliminar (En el código he colocado comentarios para explicar que hace bloque de código)


class PostresController < ApplicationController

  @root_url = "/postres/index"

  layout 'application'

  add_flash_types :notice

  # Listar todos los registros de la Base de Datos 
  def index
  	@postres = Postre.all()
  end

  # Leer los detalles de un registro 
  def leer
    @postres = params[:url]
    @postres = Postre.where(url: @postres)
  end

  # Llamamos a la vista con el formulario para crear un registro 
  def crear
  	@postres = Postre.new
  end

  # Procesamos la creación de un registro en la base de datos
  def insertar

    # Subimos el Archivo al servidor
    uploaded_file = params[:img]
    File.open(Rails.root.join('public', 'assets/img', uploaded_file.original_filename), 'wb') do |file|
        file.write(uploaded_file.read)
    end
  	
  	@postres = Postre.new(parametros)

  	# Insertamos un registro en la base de datos
    if @postres.save
      
      @postres.update_column(:img, uploaded_file.original_filename)
  		
  	else
  		render :new
  	end

    # Redireccionamos a la vista principal con mensaje 
    @ini = "/postres/index"
    flash[:notice] = "Creado Correctamente !"
    redirect_to @ini 

  end

  # Llamamos a la vista con el formulario para actualizar un registro 

  def actualizar
    # Pasamos el 'id' del registro a actualizar (método index)   
    @postres = Postre.find(params[:id])
    @postres = Postre.where(id: @postres)

  end

  # Procesamos la actualización de un registro en la base de datos 
  def editar

    # Pasamos el 'id' del registro a actualizar (método editar)    
    @postres = Postre.find(params[:id])    

    # Actualizamos el Archivo al servidor
    uploaded_file = params[:img]

    if params[:img].present?

      # Eliminamos el archivo (imagen) anterior 
      simg = Postre.where(:id => @postres).pluck(:img)    
      imgeliminar = Rails.root.join('public', 'assets/img', simg.join)
      File.delete(Rails.root + imgeliminar)

      # Subimos el nuevo archivo (imagen) 
      File.open(Rails.root.join('public', 'assets/img', uploaded_file.original_filename), 'wb') do |file|
          file.write(uploaded_file.read)
      end

    else
      #
    end  
    
    # Actualizamos un determinado registro en la base de datos
    if @postres.update(parametros)
      
      # Actualizamos la columna 'img' de la base de datos
      if params[:img].present?
        @postres.update_column(:img, uploaded_file.original_filename)
      else
        #
      end          

    else
      render :edit
    end

      # Redireccionamos a la vista principal con mensaje 
      @ini = "/postres/index"
      flash[:notice] = "Actualizado Correctamente !"
      redirect_to @ini 

  end

  # Procesamos la eliminación de un registro de la base de datos
  def eliminar
    
    # Eliminamos un determinado registro en la base de datos, pasamos el 'id' del registro a eliminar
    @postres = Postre.find(params[:id])

    # Eliminamos la imagen perteneciente al registro 
    simg = Postre.where(:id => @postres).pluck(:img)    
    imgeliminar = Rails.root.join('public', 'assets/img', simg.join)
    File.delete(Rails.root + imgeliminar)

    Postre.where(id: @postres ).destroy_all    
    
    # Redireccionamos a la vista principal con mensaje 
    @ini = "/postres/index"
    flash[:notice] = "Eliminado Correctamente !"
    redirect_to @ini 

  end

  # Parámetros o campos que insertamos o actualizamos en la base de datos 
  private
  def parametros
  	params.permit(:nombre, :precio, :stock, :img, :url)
  end

end

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

class PostresController < ApplicationController

@root_url = "/postres/index"

layout 'application'

add_flash_types :notice

# Listar todos los registros de la Base de Datos

def index

@postres = Postre.all()

end

# Leer los detalles de un registro

def leer

@postres = params[:url]

@postres = Postre.where(url: @postres)

end

# Llamamos a la vista con el formulario para crear un registro

def crear

@postres = Postre.new

end

# Procesamos la creación de un registro en la base de datos

def insertar

# Subimos el Archivo al servidor

uploaded_file = params[:img]

File.open(Rails.root.join('public', 'assets/img', uploaded_file.original_filename), 'wb') do |file|

file.write(uploaded_file.read)

end

@postres = Postre.new(parametros)

# Insertamos un registro en la base de datos

if @postres.save

@postres.update_column(:img, uploaded_file.original_filename)

else

render :new

end

# Redireccionamos a la vista principal con mensaje

@ini = "/postres/index"

flash[:notice] = "Creado Correctamente !"

redirect_to @ini

end

# Llamamos a la vista con el formulario para actualizar un registro

def actualizar

# Pasamos el 'id' del registro a actualizar (método index)

@postres = Postre.find(params[:id])

@postres = Postre.where(id: @postres)

end

# Procesamos la actualización de un registro en la base de datos

def editar

# Pasamos el 'id' del registro a actualizar (método editar)

@postres = Postre.find(params[:id])

# Actualizamos el Archivo al servidor

uploaded_file = params[:img]

if params[:img].present?

# Eliminamos el archivo (imagen) anterior

simg = Postre.where(:id => @postres).pluck(:img)

imgeliminar = Rails.root.join('public', 'assets/img', simg.join)

File.delete(Rails.root + imgeliminar)

# Subimos el nuevo archivo (imagen)

File.open(Rails.root.join('public', 'assets/img', uploaded_file.original_filename), 'wb') do |file|

file.write(uploaded_file.read)

end

else

end

# Actualizamos un determinado registro en la base de datos

if @postres.update(parametros)

# Actualizamos la columna 'img' de la base de datos

if params[:img].present?

@postres.update_column(:img, uploaded_file.original_filename)

else

end

else

render :edit

end

# Redireccionamos a la vista principal con mensaje

@ini = "/postres/index"

flash[:notice] = "Actualizado Correctamente !"

redirect_to @ini

end

# Procesamos la eliminación de un registro de la base de datos

def eliminar

# Eliminamos un determinado registro en la base de datos, pasamos el 'id' del registro a eliminar

@postres = Postre.find(params[:id])

# Eliminamos la imagen perteneciente al registro

simg = Postre.where(:id => @postres).pluck(:img)

imgeliminar = Rails.root.join('public', 'assets/img', simg.join)

File.delete(Rails.root + imgeliminar)

Postre.where(id: @postres ).destroy_all

# Redireccionamos a la vista principal con mensaje

@ini = "/postres/index"

flash[:notice] = "Eliminado Correctamente !"

redirect_to @ini

end

# Parámetros o campos que insertamos o actualizamos en la base de datos

private

def parametros

params.permit(:nombre, :precio, :stock, :img, :url)

end

Si te diste cuenta, en el comando anterior al ejecutar el comando para crear el controlador Postres, le indique que se crearan 4 vistas HTML: rails g controller postres index leer crear actualizar

Estas 4 vistas se crearon dentro de una carpeta llamada postres es decir en app > views > postres


/app 
├── /app
    ├── /assets 
    ├── /channels 
    ├── /controllers 
        ├── /concerns 
        ├── application_controller.rb 
        ├── postres_controller.rb 
    ├── /helpers
    ├── /javascript
    ├── /jobs
    ├── /mailers
    ├── /models
    ├── /views
        ├── /layouts
        ├── /postres // Se ha creado este directorio llamado 'postres' con las vistas del sistema CRUD 
            ├── actualizar.html.rb 
            ├── crear.html.rb 
            ├── index.html.rb 
            ├── leer.html.rb 
├── /bin
├── /config
├── /db
├── /lib
├── /log
├── /public
├── /storage
├── /test
├── /tmp
├── /vendor
├──  .gitignore
├──  .ruby-version
├──  config.ru
├──  Gemfile 
├──  Gemfile.lock
├──  package.json
├──  Rakefile
├──  Gemfile.lock
├──  README.md

/app

├── /app

├── /assets

├── /channels

├── /controllers

├── /concerns

├── application_controller.rb

├── postres_controller.rb

├── /helpers

├── /javascript

├── /jobs

├── /mailers

├── /models

├── /views

├── /layouts

├── /postres // Se ha creado este directorio llamado 'postres' con las vistas del sistema CRUD

├── actualizar.html.rb

├── crear.html.rb

├── index.html.rb

├── leer.html.rb

├── /bin

├── /config

├── /db

├── /lib

├── /log

├── /public

├── /storage

├── /test

├── /tmp

├── /vendor

├── .gitignore

├── .ruby-version

├── config.ru

├── Gemfile

├── Gemfile.lock

├── package.json

├── Rakefile

├── Gemfile.lock

├── README.md

En cuanto a la vista Delete o eliminar, pues no la voy a crear, porque usaré JavaScript para eliminar los registros directamente en el listado principal de todos los registros, esto lo veremos en la parte de las Vistas HTML con Bootstrap 4.

Bien con esto tenemos creado el controlador Postres y la manera en que lo hice es genial, es algo que que me encanta de Ruby on Rails 6, me permite crear el controlador y al mismo tiempo las vistas del sistema CRUD.

Rutas

En cuanto a las rutas Ruby on Rails 6, ya me ha creado las rutas automáticamente, luego de crear el controlador con las vistas en el paso anterior, esto es genial. Para verificar las rutas que se han creado ve al archivo routes.rb que se encuentra en config > routes.rb


/app 
├── /app
├── /bin
├── /config
    ├── routes.rb // En este archivo se han creado las rutas para el sistema CRUD 
├── /db
├── /lib
├── /log
├── /public
├── /storage
├── /test
├── /tmp
├── /vendor
├──  .gitignore
├──  .ruby-version
├──  config.ru
├──  Gemfile 
├──  Gemfile.lock
├──  package.json
├──  Rakefile
├──  Gemfile.lock
├──  README.md

/app

├── /app

├── /bin

├── /config

├── routes.rb // En este archivo se han creado las rutas para el sistema CRUD

├── /db

├── /lib

├── /log

├── /public

├── /storage

├── /test

├── /tmp

├── /vendor

├── .gitignore

├── .ruby-version

├── config.ru

├── Gemfile

├── Gemfile.lock

├── package.json

├── Rakefile

├── Gemfile.lock

├── README.md

Dentro del archivo routes.rb puedes ver las rutas respectivas del sistema CRUD (En el código explico que hace cada ruta):


Rails.application.routes.draw do  
  get 'postres/index' => 'postres#index' # Ruta de la vista principal de los registros 
  get 'postres/leer/:url', to: 'postres#leer' # Ruta de la vista leer o ver los detalles de un registro 
  get 'postres/crear' => 'postres#crear' # Ruta de la vista para crear un registro 
  post 'postres/insertar' => 'postres#insertar' # Ruta que procesa la creación de un registro en la base de datos 
  get 'postres/actualizar/:id', to: 'postres#actualizar' # Ruta de la vista para actualizar un registro 
  post 'postres/editar/:id', to: 'postres#editar' # Ruta que procesa la actualización de un registro en la base de datos 
  post 'postres/eliminar/:id', to: 'postres#eliminar' # Ruta para eliminar un registro de la base de datos 
  
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

Rails.application.routes.draw do

get 'postres/index' => 'postres#index' # Ruta de la vista principal de los registros

get 'postres/leer/:url', to: 'postres#leer' # Ruta de la vista leer o ver los detalles de un registro

get 'postres/crear' => 'postres#crear' # Ruta de la vista para crear un registro

post 'postres/insertar' => 'postres#insertar' # Ruta que procesa la creación de un registro en la base de datos

get 'postres/actualizar/:id', to: 'postres#actualizar' # Ruta de la vista para actualizar un registro

post 'postres/editar/:id', to: 'postres#editar' # Ruta que procesa la actualización de un registro en la base de datos

post 'postres/eliminar/:id', to: 'postres#eliminar' # Ruta para eliminar un registro de la base de datos

# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html

end

Entonces con esto verificamos que las rutas se encuentran creadas correctamente, esto es genial y personalmente me encanta esto de Ruby on Rails 6, me ayuda a crear el proyecto de manera ágil.

Bueno con esto ya tengo creado el controlador Postres, y las Vistas iniciales y configurada las rutas 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)

Los Pasos y opciones mencionadas en este capitulo del tutorial pueden cambiar, esto no depende de nosotros, si no de los Desarrolladores que dan soporte a Ruby on Rails, que suelen cambiar sus opciones de despliegue y configuración en futuras versiones.
En el siguiente capitulo continuaré con la creación del código del Controlador Postres y otros detalles.

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