Creando una Sencilla Plataforma de Blogs- Mostrando las Publicaciones

Por:, en:

ES:This tutorial assumes you have already completed:

  1. Install Ruby on Rails
  2. Create Ruby on Rails application
  3. Create Static Pages - without this deploy will not work
  4. Install Git
  5. Create Remote Git Repository - optional but recommended
  6. Deploy application to Heroku
  7. Manage users with Devise
  8. How to add Twitter Bootstrap to Ruby on Rails application - Advised
  9. Creating Simple Blogging Platform - Creating Model
  10. 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:

Rails throwing error due to lack of 'end' in posts controller

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

index page

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

Website with list of all posts for the database

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.

Si tu Inicio de sesión serás capaz de marcar esto tutorial Como vas avanzando tu progreso



Comentar

Tú puedes Inicio de sesión Comentar