Creando una Sencilla Plataforma de Blogs- Mostrando las Publicaciones
Por: Lukasz Muzyka, en:
ES:This tutorial assumes you have already completed:
- Install Ruby on Rails
- Create Ruby on Rails application
- Create Static Pages - without this deploy will not work
- Install Git
- Create Remote Git Repository - optional but recommended
- Deploy application to Heroku
- Manage users with Devise
- How to add Twitter Bootstrap to Ruby on Rails application - Advised
- Creating Simple Blogging Platform - Creating Model
- Creating Simple Blogging Platform - Routes
Hemos creado rutas que nos permiten escribir en nuestro navegador la dirección que coincide con la "acción" en nuestro "controlador". Pero, ¿cuáles son los controladores y las acciones? En términos simples, un controlador es la entidad en nuestro código que se dedica a gestionar determinado recurso. En nuestro caso, serán las publicaciones. Controller es el lugar donde vamos a decidir sobre la interacción lógica entre nuestra aplicación y los usuarios. Action, por otro lado, es un "subconjunto" de un controlador. Por ejemplo, vamos a tener una acción que crea una publicación.
En nuestro tutorial, vamos a ver siete acciones estándar:
| Action Name | Role |
|---|---|
| Show | Displaying single record |
| Index | Displaying list of records |
| New | Displaying form new record |
| Create | Saving new record to the database |
| Edit | Displaying form for editing of a record |
| Update | Saving changes made in "edit" form |
| Destroy | Deleting record |
Paso 1: Crea el controlador
Checaremos las acciones estándar una por una a medida que construyamos nuestra aplicación, pero primero vamos a generar nuevos controladores vacíos para las publicaciones.
bash
$ rails generate controller posts
create app/controllers/posts_controller.rb
invoke erb
create app/views/posts
invoke test_unit
create test/controllers/posts_controller_test.rb
invoke helper
create app/helpers/posts_helper.rb
invoke test_unit
create test/helpers/posts_helper_test.rb
invoke assets
invoke coffee
create app/assets/javascripts/posts.js.coffee
invoke scss
create app/assets/stylesheets/posts.css.scss
Nota que estamos utilizando la palabra plural 'posts' (con s al final). Cuando estábamos generando el modelo, utilizamos la forma singular y en mayúsculas "Post". Esta es una convención de Rails.
Un consejo rápido: Para los nombres de tus modelos, siempre utiliza los sustantivos que tienen formas plurales en inglés. De lo contrario, los controladores y los modelos pueden tener problemas para comunicarse correctamente.
Paso 2: Visualiza Las Publicaciones y Define la Acción
Hay dos acciones que se realizan para la visualización de los registros: "Show" e "Index". Primero veamos el “index” (índice). Abra el archivo que acabamos de crear posts_controller.rb
/app/controllers/posts_controller.rb
class PostsController < ApplicationController
end
Empezaremos definiendo nuestra acción de index:
class PostsController < ApplicationController
def index
end
end
Acabamos de agregar un block vacío que comienza con la declaración def index y termina con endcomo casi todo en Rails. . Recuerde siempre cerrar los bloques conend. Si se te olvida hacerlo, evocaras un error que se parece a este:
Paso 3: Crea una plantilla HTML
Después de que hemos creado la acción en el controlador, necesitamos construir una plantilla HTML para que la acción se vea. Para empezar, vamos a crear un archivo sencillo con una sola línea de código HTML dentro de las carpetas de app/views/posts y lo llamaremos "index.html.erb":
/app/views/posts/index.html.erb
<h1>This will be a list of posts</h1>
Debido a que llamamos la plantilla de la misma manera que a nuestra acción - "index". Rails los emparejara de manera que no necesitamos especificar que queremos que estos dos archivos trabajen juntos. Ahora, podemos reiniciar nuestro servidor con rails serverServer y abrir la URL que apunta al índice: http://localhost:3000/posts
Muy bien, ahora sabemos que nuestra aplicación funciona. Lo siguiente que tenemos que hacer es mostrar todas las publicaciones que tenemos en nuestra base de datos. Se trata de dos pasos:
- Primero: tenemos que encontrar los mensajes en la base de datos – El controlador
- Segundo: tenemos que mostrar la lista como un sitio web – plantillas de HTML (view-vista)
Paso 4: Modifica el Controlador
Abre el controlador y añade un poco de código:
/app/controllers/posts_controller.rb
class PostsController < ApplicationController
def index
@posts = Post.all
end
end
@posts -es un nombre de la variable que vamos a utilizar para almacenar los mensajes que hemos encontrado en la base de datos. Por ahora, nos limitaremos a tirar de todos los mensajes que podemos encontrar. Por supuesto, vamos a tener que encontrar una mejor manera en caso de que haya una gran cantidad de publicaciones en nuestra base de datos. Pero por ahora, estamos bien con este simple enfoque.
Paso 5: Modifica la plantilla HTML
Al dar a nuestra variable el símbolo de "@", hemos permitido que viaje desde el controller a la view (la plantilla de HTML). Por lo tanto, ahora podemos utilizarlo para iterar sobre la lista de publicaciones.
/app/views/posts/index.html.erb
<h1>This is a list of posts</h1>
<ul>
<% @posts.each do |p| %>
<li>
<h3><%= p.title %></h3>
<p><%= p.body %></p>
</li>
<% end %>
</ul>
Ahora ve a http://localhost:3000/posts
Paso 6: Usa Bootstrap
En este punto, podemos agregar los enlaces de las publicaciones en el menú de nuestro sitio web, así que no necesitamos escribir URL manualmente cada vez que queremos ir a la lista de mensajes. Vamos a tomar ventaja de Bootstrap CSS. En application.html.erb agrega el siguiente código:
/app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<% flash.each do |key, value| %>
<div class="alert alert-<%= key %> alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<%= value %>
</div>
<% end %>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to "Demo App", root_path, class: 'navbar-brand' %>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to 'Posts', posts_path %></li>
<% if current_user %>
<li><%= link_to 'Logout', destroy_user_session_path, method: :delete %></li>
<% else %>
<li><%= link_to 'Login', new_user_session_path %></li>
<% end %>
</ul>
</div>
</div>
</nav>
<div class="container">
<%= yield %>
</div>
</body>
</html>
Paso 7: Define la Acción dentro del Controlador
Ahora agreguemos una página dedicada a mostrar las publicaciones individuales. Esta será la página donde finalmente podemos añadir algún tipo de sistema de comentarios.
Primero, al igual que antes, tenemos que definir la acción dentro del controlador:
/app/controllers/posts_controller.rb
class PostsController < ApplicationController
def index
@posts = Post.all
end
def show
end
end
Paso 8: Empareja los Nombres
Segundo, necesitamos la plantilla HTML en la carpeta /app/views/posts que coincide con el nombre de la acción show.html.erb
/app/views/posts/show.html.erb
<h1>This will be a individual post page</h1>
Paso 9: Ejecuta “Route Rake”
Ahora, la pregunta es: Cuando los usuarios escriben la dirección de un puesto, ¿cómo encontraran el mensaje mediante URL? Echémosle un vistazo a las rutas que hemos creado anteriormente:
bash
$ rake routes
posts GET /posts(.:format) posts#index
POST /posts(.:format) posts#create
new_post GET /posts/new(.:format) posts#new
edit_post GET /posts/:id/edit(.:format) posts#edit
post GET /posts/:id(.:format) posts#show
PATCH /posts/:id(.:format) posts#update
PUT /posts/:id(.:format) posts#update
DELETE /posts/:id(.:format) posts#destroy
Chequemos esta lista un poco más de cerca.
| Route Name | Request Type | URI | Controller#Action | Needs :ID |
|---|---|---|---|---|
| posts | GET | /posts(.:format) | posts#index | no |
| POST | /posts(.:format) | posts#create | no | |
| new_post | GET | /posts/new(.:format) | posts#new | no |
| edit_post | GET | /posts/:id/edit(.:format) | posts#edit | YES |
| post | GET | /posts/:id(.:format) | posts#show | YES |
| PATCH | /posts/:id(.:format) | posts#update | YES | |
| PUT | /posts/:id(.:format) | posts#update | YES | |
| DELETE | /posts/:id(.:format) | posts#destroy | YES |
Paso 10: Entiende las Columnas
La primera columna muestra la ruta que podemos utilizar para crear un enlace. Vamos a añadir a la misma, ya sea _path o_url para construir un enlace a la página de índice:
<%= link_to "All Posts", posts_path %>
Simplemente tomamos el prefijo posts y lo añdimos a _path, ahora sabe que queremos crear un enlace al controlador de mensajes y al índice de la acción.
La segunda columna es un método para transferir información entre el servidor y el navegador. Básicamente GET significa que el navegador "entiende" los datos del servidor y cualquier otra cosa. (PUT POST PARCH DELETE) son los datos que van desde el navegador al servidor. Por ejemplo, "edit" consigue un formulario de envío al servidor. En esta forma vendrá con el título y el cuerpo de la publicación existente. Cuando hacemos clic en "Save" este será enviado al servidor para "actualizar" la acción utilizando PUT.
La tercera columna es el URI (Uniform Resource Identifier). Esto es, más o menos, lo que va a ver en la barra de URL en nuestro navegador. Una cosa importante que hay que notar aquí son todos los símbolos con ":". Esos parámetros son requeridos por nuestra ruta para que nos orientare en la dirección correcta. Usemos edit_post como ejemplo. URI aquí es /posts/:id/edit(.:format). : id es un identificador del mensaje en sí. Lo utilizaremos para encontrar el mensaje en la base de datos. Por ejemplo, si queremos editar el mensaje con el número de identificación 124 la URL sería: http://localhost:3000/posts/124/edit.
He añadido una columna para que puedas ver claramente que la acción requiere pasar los parámetros de la misma.
La cuarta columna indica cual acción y cual controlador la ruta está apuntando.
Paso 11: Usa el parámetro y edita los archivos de HTML
Con toda esta información, podemos volver al controlador y encontrar nuestra publicación individual utilizando el formulario parámetro URI.
/app/controllers/posts_controller.rb
class PostsController < ApplicationController
def index
@posts = Post.all
end
def show
@post = Post.find(params[:id])
end
end
Esta vez hemos creado la variable@post dentro de los cuales podemos guardar el resultado de una consulta en todos los mensajes que se utiliza:id como parametro. Este ID viene de la URI. Ahora podemos utilizar esta variable para mostrar el mensaje en su página.
/app/views/posts/show.html.erb
<h1><%= @post.title %></h1>
<p><%= @post.body %></p>
Por último, ve al archivoindex.html.erb.Sólo tenemos que cambiar el título de la entrada al enlace que nos lleva al show page.
/app/views/posts/index.html.erb
<h1>This is a list of posts</h1>
<ul>
<% @posts.each do |p| %>
<li>
<h3><%= link_to p.title, post_path(p.id) %></h3>
<p><%= p.body %></p>
</li>
<% end %>
</ul>
Arriba se puede ver cómo hemos añadido el prefijo_pathen post y usado p.id para proporcionar parámetros para el enlace.
Comentar
Tú puedes Inicio de sesión Comentar