A continuación tenemos que crear un archivo de modelo bajo blog/app/models…
article.rb
<<< MAYO 2019 ACTUALIZACIÓN DEL AUTOR >>>
En lugar de utilizar el editor de texto visual, también puedes crear el archivo a través del terminal:
cd app/models
touch article.rb
<<< END UPDATE >>>
Ahora de vuelta en el editor de texto visual y dentro del artículo.rb model…
class Article < ActiveRecord::Baseend
Paso 7: Dentro de la consola de Rails
Ahora, podemos saltar dentro de la consola de Rails y probar la conexión a la tabla…
$ rails c
Luego llama a todos los artículos…
$ Article.all
Deberías ver una consulta SQL que se parece a…
(Si has estado navegando dentro de la línea de comandos a través del directorio del blog, puedes obtener un error aquí. Asegúrate de volver al directorio de la aplicación o el comando Article.all que aparece a continuación devolverá un error.)
Escribiendo sólo ‘Article’ te dará todos los atributos de la tabla…
Más comandos…
article = Article.new
Creará un nuevo artículo almacenado dentro de la variable ‘article’ con los atributos:
Ahora, podemos añadir un título y una descripción manualmente a través de la consola de rails…
Ahora tenemos que guardar estos datos..
article.save
Este comando generará una consulta SQL para insertar estos nuevos valores en la tabla de artículos…
Podemos crear otro artículo de una vez utilizando la «asignación masiva»…
article = Article.new(title: "This is my second article", description: "This is my second description")
De nuevo, necesitamos guardar el artículo..
article.save
Walah…
Podemos hacerlo de una tercera manera usando el método de creación…
Article.create(title: "This is my third title", description: "This is my third description")
Y automáticamente guardará el artículo…
Ahora supongamos que queremos editar uno de estos artículos… Primero tenemos que coger el artículo…
article = Article.find(2)
Entonces podemos editar el artículo y guardar el artículo…
article.title = "This is an edited second article"
Y luego guardar…
article.save
Generará la consulta SQL necesaria…
Ahora vamos a borrar un artículo… Primero coge el artículo…
article = Article.find(3)
Entonces borra…
article.destroy
Walah…
Paso 8: Añadir validaciones para reforzar las restricciones en los artículos
En el artículo.rb…
class Article < ActiveRecord::Base
validates :title, presence: trueend
Esto requerirá que todos los nuevos artículos contengan un título. Podemos probar esto en la consola de rails (¡no olvides reiniciar la consola de rails después de actualizar el modelo! Gracias Mike Boyd y Andrew Linck por los recordatorios)…
article = Article.new
luego intenta guardar sin actualizar el título…
article.save
boom…
Podemos hacer lo mismo para la descripción…
class Article < ActiveRecord::Base
validates :title, presence: true
validates :description, presence: trueend
Y evitará que crees un artículo sin descripción aunque tenga título… (de nuevo, asegúrate de reiniciar la consola de rails después de actualizar el modelo.)
Puedes comprobar tus errores con estos comandos…
article.errors.any?
article.errors.full_messages
A continuación, añadiremos validaciones de longitud…
Cool.¡
A continuación queremos que los usuarios puedan realizar estas mismas acciones en el navegador, así que tendremos que configurar rutas, controladores y vistas para crear y guardar artículos!
Paso 9: Añadir la capacidad de crear artículos desde el navegador
El ciclo de vida de un nuevo artículo…
Revisa los primeros 2 minutos del Curso Udemy de la Sección 4, Clase 63 para una visión completa…
Primero, vamos a abordar nuestras rutas…
En el archivo routes.rb, añade esta línea …
resources :articles
Esto nos da todo tipo de rutas para actualizar, borrar, crear, mostrar, etc.
Comprueba las nuevas rutas con… PERO ESPERA, antes de comprobar las rutas asegúrate de que vuelves a salir de la consola de rails introduciendo:
exit
entonces,
$ rake routes
Cool.
Ahora, necesitamos un nuevo controlador… Crea este archivo en app/controllers.
touch articles_controller.rb#or just create the file using the visual text editor
Y luego dentro del nuevo archivo del controlador…
class ArticlesController < ApplicationControllerend
Ahora, necesitamos crear una nueva carpeta bajo las vistas para guardar nuestros archivos de vista de artículos… La carpeta debe llamarse ‘articles’
<<< ACTUALIZACIÓN DEL AUTOR >>>
Intenta usar la línea de comandos en lugar del editor de texto visual:
cd views
mkdir articles
cd articles
<<< END UPDATE >>>
Ahora, vamos a crear un nuevo archivo bajo ‘articles’ llamado…
touch new.html.erb# or create using the visual text editor
Y luego debemos actualizar nuestro articles_controller.rb:
class ArticlesController < ApplicationController
def new
end
end
Guardar.
Dentro de esta página new.html.erb, vamos a guardar nuestro formulario para capturar el título y la descripción.
Pero primero, vamos a asegurarnos de que la página funciona.
<h1>Create an article</h1>
Y luego cargar el servidor…
Nos da…
Genial. Funciona.
Ahora, vamos a crear el formulario respaldado por el modelo. Rails proporciona métodos de ayuda para el formulario aquí.
En el archivo new.html.erb…
<h1>Create an Article</h1><%= form_for @article do |f| %><% end %>
Y hemos iniciado una variable de instancia, así que ahora tenemos que crear la variable en nuestro controlador…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
endend
Genial. Todo funciona bien…
Ahora, vamos a recoger algunos datos…
<h1>Create an Article</h1><%= form_for @article do |f| %>
<p>
<%= f.label :title %>
<%= f.text_field :title %>
</p><% end %>
Y cargamos la página para ver lo que hemos hecho…
Genial. Funciona…
Ahora, vamos a terminar el formulario…
Grandioso. Todo lo que necesitamos…
Ahora, tenemos que crear una acción ‘create’ en el controlador…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
enddef create
render plain: params.inspect
endend
Cuando rellenes el formulario y luego lo envíes, verás estos datos:
Pero queremos que estos datos se guarden en la base de datos…
Pero eso no es suficiente… También queremos mostrar el artículo….
Utilizaremos una ruta que ya hemos creado, y pasaremos la variable de instancia para el nuevo artículo…
redirect_to articles_show(@article)
Todo el código…
Pero eso no es suficiente, ¿verdad? Queremos refactorizar este código para que dé un aviso si el artículo se ha creado con éxito:
Y ahora vamos a asegurarnos de que nuestros mensajes flash puedan verse en todas las páginas…
En el cuerpo del archivo application.html.erb…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
Y ahora queremos asegurarnos de que los errores también se muestren…
En el archivo new.html.erb…
Genial. Ahora nos mostrará los errores en la URL articles/new:
Ahora asegúrate de que se ha creado la acción show…
def show
@article = Article.find(params)
end
Ahora tenemos que crear una página para mostrar la información en…
Vamos a llamar a ese archivo…
show.html.erb
Dentro de esa página…
<h1>Showing selected article</h1><p>
Title: <%= @article.title %>
</p><p>
Description: <%= @article.description %>
</p>
Y eso va a renderizar…
(¿Obtiene un error? Aquí está la solución a un error común: crear el archivo show.html.erb en el lugar equivocado)
Hurra. A continuación trabajaremos en la edición de artículos…
Paso 10: Edición de artículos
Necesitamos crear la acción de edición en el controlador… ¿Qué controlador? El controlador de artículos por supuesto!
def edit
end
Y tenemos que crear la plantilla de edición en las vistas… ¿En qué carpeta? En la carpeta de vistas de los artículos, por supuesto!
edit.html.erb
Ahora necesitamos construir un formulario para editar…
En realidad podemos copiar/pegar del formulario new.html.erb. Utilizaremos el mismo formulario para actualizar un artículo actual que utilizamos para crear un nuevo artículo.
Ahora, vamos a completar nuestra acción de edición en el controlador…
def edit
@article = Article.find(params)
end
Ahora, tenemos que añadir una acción de actualización…
Paso 11: Añadir listado de índice de artículos, y añadir enlaces de edición/muestra
Añadir acción de índice en articles_controller.rb…
def index
@articles = Article.all
end
Luego tenemos que crear la plantilla… ¿En qué directorio de views colocaremos este archivo?
index.html.erb
Y dentro de ese archivo…
Esto nos da…
Cool. Ahora vamos a añadir los enlaces de editar y mostrar para cada artículo…
<td><%= link_to 'Edit', edit_article_path(article) %></td>
<td><%= link_to 'Show', article_path(article) %></td>
El código parece…
Eso nos da…
Ahora vamos a añadir algunos enlaces ‘Back’ a la edición, mostrar y nueva página… Sigue adelante y salta a las respectivas páginas y añade los nuevos enlaces así:
<%= link_to 'Back', articles_path %>
Yo añadí el mío en la parte inferior de cada archivo.
Y vamos a añadir un enlace de edición en la página de presentación…
<%= link_to "Edit", edit_article_path(@article) %>
Paso 12: Refactorizar los formularios en un único parcial
Crea un nuevo archivo en las vistas/artículos directamente.
_form.html.erb
Copia/pega los datos del formulario en este archivo…
Luego renderiza el formulario en la página nueva y de edición…
<%= render 'form' %>
Deberías haber desechado toda la información del formulario antiguo y haber añadido el fragmento de código sobre a la página nueva y de edición para que cada uno se vea algo así:
<h1>Edit Article</h1><%= render 'form' %><%= link_to 'Back', articles_path %>
Ahora, vamos a añadir la acción de destrucción…
Paso 13: Añadir la acción de destrucción
En el controlador…
¿Qué controlador? Ya lo sabes.
Ahora, tenemos que añadir los enlaces a las páginas desde las que queremos poder borrar. Usando el enlace de abajo…
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
…añade a las páginas donde quieras que el usuario pueda borrar.
Si añado a nuestra página de índice, quedará como…
Si añadimos a nuestra página de presentación, tendremos que modificar el enlace de destruir sólo ligeramente para imitar la estructura del enlace de edición. ¿Ves lo que quiero decir?
Esto:
<%= link_to 'Delete', article_path(@article), method: :delete, data: {confirm: "Are you sure?"} %>
En lugar de esto:
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
Paso 14: Refactorizar Artículos Controlador
Uno de los principios del desarrollo es DRY.
Es posible que ya sepas lo que significa: «NO TE REPITAS»
Nos estamos repitiendo bastante, así que vamos a hacer un poco de refactorización.
Esta línea de código aparece en todas nuestras acciones…
@article = Article.find(params)
Así que crearemos un método privado y almacenaremos esta línea allí…
def set_article
@article = Article.find(params)
end
Después, elimina la línea de código de las acciones…
Se incluye en destroy, show, update, edit…
Justo debajo de la primera línea del controlador…
before_action :set_article, only:
El archivo del controlador actualizado quedará así:
Paso 15: Instalar Bootstrap
Añadir el gemfile de la página de github…
gem 'bootstrap-sass', '~> 3.4.1'
gem 'sassc-rails', '>= 2.1.0'
Después en la línea de comandos, asegurándote de que estás en el directorio de la app y no en uno de los subdirectorios, instala….
$ bundle install
También tendrás que crear un nuevo archivo CSS… El nombre del archivo puede ser como el siguiente y lo crearás bajo app/assets/stylesheets
custom.css.scss
Y añade…
Entonces, en la aplicación.js en app/assets/javascripts…
//= require jquery
//= require bootstrap-sprockets
Y, si usas Rails 5, instala la gema jQuery…
gem 'jquery-rails'
¿No estás seguro de qué versión estás usando? Ejecuta lo siguiente en la terminal:
$ rails -v
Ahora ya lo sabes. Si necesitas instalar jquery, añade la gema anterior al archivo de gemas y haz un bundle install.
$ bundle install
Paso 16: Instalar la barra de navegación
Crea un parcial bajo la carpeta layouts…
_navigation.html.erb
Ahora, ve a la página principal de bootstrap…
Coge el código de la navbar por defecto… Es el primer ejemplo y se parece a esto:
Y pega en tu _navigation parcial… Guarda.
Ahora renderiza el parcial dentro del <head> </cabeza> de la aplicación.html.erb…
<%= render 'layouts/navigation' %>
Ahora todo el archivo se parece a esto:
Reinicia el servidor (en un mac: control + c) porque has añadido recientemente algunas gemas nuevas, y luego vuelve a iniciarlo:
$ rails s
Y luego cuando actualices tu servidor local, verás:
Niiiiice…. Se ve bien, ¿no?
¡Ahora, empecemos a estilizar! ¡O más bien, vamos a conseguir el estilo de nuestro camino muy rápidamente para que podamos mantener nuestro enfoque en la construcción de la aplicación en lugar de estilo de la aplicación 🙂
En el archivo custom.css.scss copiar / pegar y luego guardar:
Paso 17: Añadir enlaces a la barra de navegación
Ahora, vamos a abordar la barra de navegación y asegúrese de que los enlaces de la barra de navegación apuntan a los lugares que queremos que apunten!
Esto…
<a class="navbar-brand" href="#">Alpha Blog</a>
se convierte en esto:
<%= link_to "Alpha Blog", root_path, class: "navbar-brand", id: "logo" %>
Refresca tu página y verás:
Y ahora en cualquier página, puedes navegar al root_path (la página índice) haciendo clic en ALPHA BLOG.
A continuación, vamos a añadir un enlace a la página de Índice de Artículos:
En lugar del primer «Enlace» en la Navbar:
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
Añadir:
<li><%= link_to "Articles", articles_path %></li>
Y en lugar del segundo «Enlace» en la Navbar:
<li><a href="#">Link</a></li>
Añadir:
<li><%= link_to "Create Article", new_article_path %></li>
Ahora podemos eliminar el otro enlace a «Crear Artículo» en el índice.html.erb. Sólo hay que localizarlo y eliminarlo.
También voy a eliminar la barra de búsqueda. No vamos a usarla.
Elimina todo lo que hay debajo:
Tampoco necesitamos el primer menú desplegable, así que fuera. Simplemente encuentra esto y elimínalo:
Guarda el archivo. Refresca tu servidor localhost y verás:
Paso 18: Estilizar la plantilla del formulario
Puedes encontrar el código en bootstrap aquí.
Vamos a mezclar ruby embebido con bootstrap para obtener el resultado que queremos.
Dentro del _form.html.erb, cambia esto…
Por esto…
Nota un cambio importante que hemos hecho al principio de la sentencia do del formulario…
<%= form_for(@article, :html => {class: "form-horizontal", role: "form"}) do |f| %>
Y observa la sintaxis dentro de los elementos del formulario…
<%= f.text_field :title, class: "form-control", placeholder: "Title of article", autofocus: true %>
Paso 19: Dale estilo a los mensajes & Refactoriza en parciales
Ahora vamos a actualizar también el estilo de los mensajes de error. Actualizar el estilo de…
a:
Eso cambia los mensajes de error a:
Ahora vamos a extraer a un parcial..
Crea una nueva carpeta bajo las vistas llamada ‘shared’…
Crea un nuevo archivo llamado _errors.html.erb…
Copia/pega el mensaje de error en ese archivo… Guarda.
Ahora elimina el mensaje de error de _form.html.erb, y reemplaza el código con:
<%= render 'shared/errors' %>
Creemos también un archivo _messages.html.erb y lo guardamos bajo la carpeta compartida. Dentro de ese archivo, añade el código de los mensajes flash:
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
Guarda ese archivo. Asegúrese de reemplazar el código en el archivo layouts/application.html.erb con:
<%= render 'shared/errors' %>
El archivo completo actualmente tiene el siguiente aspecto:
A continuación, daremos estilo a los mensajes flash…
En el parcial _messages.html.erb parcial, cambiar esto…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
a esto:
También tendremos que cambiar todo el flash en el archivo articles_controller.rb en flash para completar este paso.
Paso 20: Actualizar las variables de la instancia del artículo para que funcionen para los usuarios
Esto es un poco prematuro ya que aún no hemos creado usuarios ni acciones de usuario para nuestro blog, pero crearemos usuarios y querremos que nuestros mensajes de error funcionen para los usuarios igual que funcionan para los artículos. ¿Sabes lo que quiero decir?
Tenemos todas estas funciones que funcionan para los artículos: creación de nuevos artículos, edición de artículos antiguos, y los mensajes de error de flash que nos hacen saber lo que ha ido mal… Queremos que estos mensajes de error de flash nos comuniquen cuando estamos tratando de crear un nuevo usuario o editar un usuario actual.
Lograremos esto actualizando la variable de instancia @article en una que funcione para artículos o usuarios…
En el archivo shared/_errors.html.erb, actualiza la variable de instancia @article a una variable de instancia @obj…
Ahora, necesitamos actualizar la declaración de renderización parcial… La que está en articles/_form.html.erb
Era…
<%= render 'shared/errors' %>
y ahora debe decir…
<%= render 'shared/errors', obj: @article %>
A continuación, vamos a trabajar en la vista «show»…
Paso 21: Estilizar la página Show Article
Actualiza la página views/articles/show.html.erb página a…
Esto hará que:
A continuación, vamos a añadir algunos ‘simple_format’…
Cambia esto…
<%= @article.description %>
A esto…
<%= simple_format(@article.description) %>
Luego, algo más de estilo para los botones…
<%= link_to "Edit", edit_article_path(@article), class: "btn btn-xs btn-primary" %> |
<%= link_to 'Back', articles_path, class: "btn btn-xs btn-success" %>
Nos dará unos bonitos botoncitos…
Entonces, añade un botón de borrado…
Un bonito y colorido botón de borrado…
Todo el bloque de código se ve así ahora:
Paso 22: Estilizar la página de índice del listado de artículos
Vamos a actualizar esta página de aspecto horriblemente cutre…
La página index.html.erb debe ser reemplazado con el siguiente código:
Styling para el cuerpo del artículo:
.article-body {
border-top: 1px solid #eaeaea;
padding-top: 15px;
padding-bottom: 15px;
}
Styling para el título del artículo:
.article-title {
font-weight: bold;
font-size: 1.5em;
}
Su página ahora se verá así:
Lovely.
Paso 23: Crear usuarios + Crear una rama de características en Github
¡A continuación, vamos a crear usuarios! Genial. Nuestro modelo de usuarios se llamará «Usuario». A continuación hay una tabla útil que explica cómo se formará la tabla de usuarios y cuáles serán las diferentes estructuras de nombres para los archivos:
Ya hemos creado artículos. Podemos crear, leer, editar y borrar artículos.
Pero ahora mismo cualquiera que acceda al blog puede leer, editar y borrar cualquier otro artículo.
Sólo queremos que los usuarios que se hayan registrado puedan hacer estas funciones, y sólo queremos que puedan editar y borrar los artículos que hayan creado.
Así que necesitamos usuarios, por supuesto, y también necesitamos una forma de rastrear a los usuarios que crean artículos. Esto se puede hacer teniendo el id de usuario para el usuario que crea el artículo almacenado en la tabla de artículos en la fila de artículos. Se trata de una asociación de clave foránea:
Añadir la columna user_id a la tabla articles nos dará la posibilidad de «v-lookup» al resto de la información del usuario.
Un artículo en el que trabajan varias personas sería una asociación de muchos a muchos…
Un artículo en el que trabaja una persona, donde una persona puede crear muchos artículos, es una asociación de uno a muchos…
Las categorías de artículos, si las creamos, serían una asociación de muchos a muchos.
Bueno, ya está bien de chorradas, vamos a crear la tabla de usuarios…