En esta página:
Demo Github
En la parte 5 creamos las vistas HTML con el framework Bootstrap.
Cada una de estas vistas fueron creadas para las tareas, crear, leer, actualizar y la última tarea, eliminar, que no es una vista exactamente, sino una funcionalidad en la vista principal del sistema CRUD.
Llegamos a la parte final de este tutorial en donde vamos a realizar ciertas configuraciones para que el proyecto funcione correctamente, vamos con ello.
Partes
Directorio Para Las Imágenes
Las imágenes necesitan de un directorio en donde deben ser subidas.
Creo un directorio llamado img en public > assets > img:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
/crud-rails-7 ├── /app ├── /bin ├── /config ├── /db ├── /lib ├── /log ├── /public ├── /assets ├── /img // Creo este directorio para las imágenes ├── mm.png ├── pm.jpg ├── tc.jpg ├── 404.html ├── 422.html ├── 500.html ├── apple-touch-icon-precomposed.png ├── apple-touch-icon.png ├── favicon.ico ├── robots.txt ├── /storage ├── /test ├── /tmp ├── /vendor ├── .gitignore ├── .ruby-version ├── config.ru ├── Gemfile ├── Gemfile.lock ├── package.json ├── Rakefile ├── Gemfile.lock ├── README.md |
Cuando insertamos un nuevo registro, las imágenes se suben al directorio img, esta ruta la especifique en el controlador, en los métodos, crear, actualizar y eliminar en la parte 3 de este tutorial.
Archivo CSS
Cuando creamos el proyecto inicial en la primera parte de este tutorial, Ruby on Rails me creo el archivo application.css en la ruta app > assets > stylesheets > application.css:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
/crud-rails-7 ├── /app ├── /assets ├── /config ├── /images ├── /stylesheets ├── application.scss // Este archivo antes estaba como application.css ├── /channels ├── /controllers ├── /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 |
Para usar Bootstrap mediante la importación @import “bootstrap”; y agregar mis propios estilos personalizados, tuve que cambiar el formato del archivo de application.css a application.scss, es decir al formato SASS.
SASS es un preprocesador CSS avanzando y Ruby on Rails lo trae integrado.
Mi archivo application.scss tiene el siguiente contenido:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's * vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * *= require_tree . *= require_self */ @import "bootstrap"; .mt-100 { margin-top: 100px; } .negrita { font-weight: bold; } |
Con ello Bootstrap y mis estilos personalizados, funcionan sin problemas.
Protección CSRF
Los formularios del sistema CRUD para crear, actualizar y la tarea eliminar (Vista Principal), les he agregado protección CSRF, esto le da seguridad a las tareas y permite mostrar los mensajes Flash como el mensaje luego de actualizar un registro: Actualizado Correctamente !
|
1 2 3 4 5 6 7 8 9 10 |
<form method="POST" action="/postres/insertar" accept-charset="UTF-8" role="form" id="crearpostre" name="crearpostre" enctype="multipart/form-data"> <!-- Protección CSRF --> <%= token_tag nil %> ... ... (Continua el formulario) ... |
Mensajes
Arriba de la tabla de la vista principal en donde se listan todos los registros de la base de datos, he colocado el siguiente código:
|
1 2 3 4 5 6 7 8 |
<!-- Mensajes --> <% if flash[:notice] %> <div class="alert alert-success" role="alert" id="notice" class="notice"> <%= flash[:notice] %> </div> <% end %> |
El código anterior muestra un mensaje cada ves que se realiza una tarea CRUD, por ejemplo si actualizamos un registro, se nos mostrará el mensaje Actualizado Correctamente !:
Bien hemos terminado de crear nuestro sistema CRUD, al inicio de esta última parte del tutorial, he colocado una Demo para que veas el sistema CRUD en acción, asimismo he colocado el código fuente en GitHub.
Conclusión
En este tutorial que esta dividido en 5 partes, has aprendido a Como Crear Un CRUD Con Ruby on Rails 7.
Saber crear este sistema CRUD, te será útil para crear proyectos más avanzados con Ruby on Rails y una base de datos.
Recuerda practicar mucho, solo así dominarás el proceso de integración de una base de datos y Ruby on Rails.
Nota (s)
- Los pasos y opciones mencionadas en esta parte 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.