Tworzenie Prostej Platformy Blogerskiej - Wyświtlanie Postów

Przez:, Z dnia:

Ten tutorial zakłada, że już ukończyłeś:

  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

Stworzyliśmy rutery, które pozwolą nam wpisać w przeglądarce adresy, które odpowiadają "akcjom" w naszym "kontrolerze". Ale czym są kontrolery i akcje? Prostymi słowy, kontroler to istota w naszym kodzie, która ma za zadanie zarządzać pewnym zasobem. W tym przypadku będą to posty. Kontroler to miejsce gdzie będziemy decydować się na interakcje pomiędzy naszą aplikacją i użytkownikami. Natomiast akcja jest "podzbiorem" kontrolera. Na przykład, będziemy mieć akcję, która tworzy post.

W naszym tutorialu zwrócimy uwagę na 7 standardowych akcji:

Nazwa Akcji Rola
Show Wyświetlanie pojedynczego rekordu
Index Wyświetlanie listy rekordów
New Wyświetlanie formularza nowego rekordu
Create Zapisywanie nowego rekordu do bazy danych
Edit Wyświetlanie formularza do edycji rekordu
Update Zapisywanie zmian z akcji "edit"
Destroy Usuwanie rekordu

Krok 1: Stwórz kontroler

Podczas budowania dalej przyjrzymy się im uważnie pojedynczo, ale najpierw stwórzmy nowy, pusty kontroler dla postów.

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

Zauważ, że używamy liczby mnogiej ('posts'). Kiedy tworzyliśmy model używaliśmy liczby pojedynczej ('Post'). To jest jedna z konwencji Rails.

Szybka Rada: Jako nazw modeli zawsze używaj rzeczowników, które mają liczbę mnogą. W przeciwnym razie, kontrolery i modele będą miały problemy z poprawnym komunikowaniem się.

Krok 2: Wyświetl posty i zdefiniuj akcję

Dwie akcje odpowiadają za wyświetlanie rekordów: "Show" i "Index". Na początek zajmiemy się "index". Otwórz nowo stworzony posts_controller.rb.

/app/controllers/posts_controller.rb

class PostsController < ApplicationController
end

Zaczniemy od zdefiniowania akcji index:

class PostsController < ApplicationController

    def index

    end

end

Zwyczajnie dodaliśmy pusty block, który zaczyna się od deklaracji def index i kończy z end, prawie jak wszystko w Rails. Zawsze pamiętaj o zamykaniu bloków z end. Jeżeli zapomnisz tego zrobić, wywołasz błąd, który będzie wyglądał jak ten:

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

Krok 3: Stwórz szablon HTML

Po tym, jak stworzyliśmy akcję w kontrolerze, by coś wyświetlić musimy abudować szablon HTML dla akcji. Zaczniemy od stworzenia prostego pliku wewnątrz folderu app/views/posts i nazwiemy go index.html.erb, dodamy mu jedną linijkę HTML:

/app/views/posts/index.html.erb

<h1>This will be a list of posts</h1>

Ponieważ nazwaliśmy szablon tak samo jak naszą akcję - "index". Rails dopasuje je do siebie, więc nie musimy niczego precyzować. Teraz możemy zrestartować naszą aplikajcę z rails server i otworzyć adres URL, który wskazuje na indeks postów: http://localhost:3000/posts.

index page

Wspaniale, wiemy, że apliakacja działa. Następną rzeczą, którą się zajmiemy będzie wyświtlanie wszystkich postów, które mamy w bazie danych. Musimy wykonać te dwa kroki:

  • Pierwszy: musimy znaleźć posty w bazie danych - kontroler
  • Drugi: wyświetlić listę na stronie - szablon HTML

Krok 4: Zmodyfikuj Kontroler

Otwórzmy kontroler i dodajmy trochę kodu:

/app/controllers/posts_controller.rb

class PostsController < ApplicationController

    def index
        @posts = Post.all
    end

end

@posts - to nazwa zmiennej, której użyjemy do przechowywania postów znalezionych w bazie dancyh. Na tę chwilę, wyciągniemy wszystkie znalezione posty. Oczywiście, będziemy musieli znaleźć lepszy sposób w przypadku, gdy w naszej bazie danych będzie dużo postów. Ale jak na razie, jesteśmy okej z tą prostą metodą.

Krok 5: Zmodyfikuj szblon HTML

Przez nadanie naszej zmiennej symbolu "@" zezwoliliśmy jesj na podróżowanie między kontrolerem a widokiem. Dlatego też, możemy jej użyć do wyświetlenia listy postów.

/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>

Przejdź teraz na stronę http://localhost:3000/posts.

Website with list of all posts for the database

Krok 6: Użyj Bootstrap

W tym momencie możemy dodać link do naszych postów w menu strony, tak więc nie będziemy musieli więcej ręcznie wpisywać adresu URL. Wykorzystamy do tego Bootstrap CSS. Do application.html.erb dodaj poniższy kod:

/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>

Krok 7: Zdefiniuj Akcję w Kontrolerze

Kontunuujmy i dodajmy stronę oddaną wyświtlaniu indywidualnych postów. Będzie to strona, na której ostatecznie będziemy mogli dodać system komentarzy.

Na początek, tak jak przedtem, musimy zdefiniować akcję wewnątrz kontrolera:

/app/controllers/posts_controller.rb

class PostsController < ApplicationController

    def index
        @posts = Post.all
    end

    def show

    end

end

Krok 8: Dopasuj Nazwy

Następnie musimy dodać szablon HTML wewnątrz folderu /app/views/posts o nazwie takiej samej, co nazwa akcji.

/app/views/posts/show.html.erb

<h1>This will be a individual post page</h1>

Krok 9: Uruchom rake Routes

Pojawia się pytanie: Kiedy użytkownik wpisze adres posta, jak znajdujemy ten właściwy po adresie URL? Spójrzmy na rutery, które poprzednio stworzyliśmy:

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

Tym razem przyjrzyjmy się temu uważniej.

Nazwa Rutera Typ Rządania URI Kontroelr#Akcja Wymaga :ID
posts GET /posts(.:format) posts#index nie
  POST /posts(.:format) posts#create nie
new_post GET /posts/new(.:format) posts#new nie
edit_post GET /posts/:id/edit(.:format) posts#edit TAK
post GET /posts/:id(.:format) posts#show TAK
  PATCH /posts/:id(.:format) posts#update TAK
  PUT /posts/:id(.:format) posts#update TAK
  DELETE /posts/:id(.:format) posts#destroy TAK

Krok 10: Zrozum Kolumny

Pierwsza kolumna pokazuje ścieżkę, której możemy użyć w linku. Dodamy do tej nazy albo _path, albo _url by zbudować stronę indeksową:

<%= link_to "All Posts", posts_path %>

Zwyczajnie bierzemy przedrostek posts, dodajemy _path i rails już wie, że chcemy stworzyć link do kontrolera posts i akcji index.

Druga kolumna przedstawia metodę przy pomocy której dokonujemy transferu informacji pomiędzy serwerem i przeglądarką. Zasadniczo GET znaczy, że przegladarka "daje" dane z serwera i nic więcej nie robi (PUT, POST, PATCH, DELETE). Na przykład "edit" dostaje post z serwera. Ten formularz będzie wypełniony istniejącymi już tytułem i treścią posta. Kiedy klikniemy "Save" będzie on wysłany do serwera do akcji "update" przy użyciu metody PUT.

Trzecia kolumna to URI (Uniform Resource Identifier). Jest to mniej więcej to, co zobaczymy w pasku adresu przeglądarki. Ważną rzeczą do odnotowania tutaj są wszystki symbole z ":". Te parametry są wymagane przez nasz ruter żeby mógł on skierować nas do właściwego posta. Weźmy edit_post dla przykładu. Tutaj URI to /posts/:id/edit(.:format). :id jest identyfiaktorem samego posta. Uzyjemy go by znaleźć post w bazie danych. Na przykład, jeżeli chcemy edytować post z numerem ID 124, URI będzie wyglądał tak: http://localhost:3000/posts/124/edit.

Dodałem jedną kolumnę żebyście jasno widzielu, które akcje wymagają podania parametrów.

Czwarta kolumna wskazuje kontroler i akcję, z którymi ruter oddziałowuje.

Krok 11: Użyj Parametru i szablonu edycji HTML

Z całą tą wiedzą możemy wrócić do kontrolera i znaleźć pojedyncze posty przy użyciu parametrów z URI.

/app/controllers/posts_controller.rb

class PostsController < ApplicationController

    def index
        @posts = Post.all
    end

    def show
        @post = Post.find(params[:id])
    end

end

Tym razem stworzyliśmy zmienną @post, w której zapiszemy rezultat wyszukiwania posta wśród wszystikch postów po jego parametrze :id. Ten id znajduje się w URI. Możemy teraz uzyć tej zmiennej do wyświetlenia posta na jego stronie.

/app/views/posts/show.html.erb

<h1><%= @post.title %></h1>
<p><%= @post.body %></p>

Na konieć przejdź do pliku index.html.erb, musimy tylko zmienić tytuł posta na link do jego strony.

/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>

Powyżej możesz zobaczyć jak dodaliśmy _path do przedrostka post i jak użylismy p.id jako parametru dla linka.

Musisz się zalogować by móc oznaczyć tutorial jako ukończony żeby śledzić swój postęp



Dodaj komentarz

Możesz się zalogować by skomentować