Odrobina sensu w widokach i szczypta logiki

Odrobina sensu w widokach i szczypta logiki

[info] Jeśli pracujesz na laboratorium, aby rozpocząć realizację kolejnego modułu, musisz wykonać poniższe operacje

• sklonuj repozytorium ze swoim kodem (git clone ŚCIEŻKA_DO_REPOZYTORIUM),

• zainstaluj potrzebne gemy (bundle install --path vendor/bundle),

• dokonaj migracji bazy danych (rails db:migrate)

• uruchom serwer (rails server)

Niestety, nie wszystko w naszej aplikacji da się wygenerować automatycznie. W tym module zaimplementujemy więc nietypowe akcje, charakterystyczne dla naszej aplikacji, jak na przykład śledzenie kursów.

Dla wygody, najpierw rozszerzymy odrobinę prymitywny interfejs dla całej aplikacji.

Elementy obecne na każdej stronie

Uzupełniamy nagłówek w application.html.erb tak, aby móc szybko przenieść się do każdej podstrony.

<ul>
  <li><%= link_to "Strona główna", root_path %></li>
  <li><%= link_to "Kursy", courses_path %></li>
  <li><%= link_to "Studenci", students_path %></li>
  <% if logged_in? %>
    <li><%= link_to current_student.name, current_student %></li>
    <li><%= link_to "Wyloguj", logout_path, method: :delete %></li>
  <% else %>
    <li><%= link_to "Zaloguj", login_path %></li>
  <% end %>
</ul>

Lista naszych kursów i najnowszych wpisów na stronie głównej.

Uzupełniamy widok główny aplikacji (static/index.html.erb) tak, aby wyświetlał listę kursów, do których będzie zapisany aktualnie zalogowany student.

<% if logged_in? %>
  <h2>Moje kursy</h2>
  <% current_student.courses.each do |course| %>
    <h3><%= course.name %></h3>
    <% course.topics.each do |topic| %>
      <h4><%= topic.title %> by <%= topic.student.name %></h4>
      <% topic.posts.each do |post| %>
        <p>
          <%= post.body %>
        </p>
        <h6>by <%= post.student.name %></h6>
      <% end %>
    <% end %>
  <% end %>
<% else %>
  Nie jesteś zalogowany.
<% end %>

Jeśli odwiedzimy teraz stronę główną, zobaczymy, że nie jesteśmy zapisani do żadnego kursu. I nawet nie ma jak tego zrobić.

Strona kursu

Rozszerzmy więc widok kursu (views/courses/show.html.erb), dodając na nim możliwość zapisu (subskrybcji), jeśli ktoś jest właśnie zalogowany.

<p id="notice"><%= notice %></p>

<h1><%= @course.name %></h1>
<h4><%= @course.code %></h4>
<p><%= @course.description %></p>

<% if logged_in? %>
  Zapisz się do kursu
<% end %>

<hr>
<h1>Zapisani studenci</h1>
<ul>
<% @course.students.each do |student| %>
  <li><%= link_to student.name, student %></li>
<% end %>
</ul>

<hr>
<% @course.topics.each do |topic| %>
  <h4><%= topic.title %> by <%= topic.student.name %></h4>
  <% topic.posts.each do |post| %>
    <p>
      <%= post.body %>
    </p>
    <h6>by <%= post.student.name %></h6>
  <% end %>
<% end %>

<hr>

<%= link_to 'Edit', edit_course_path(@course) %> |
<%= link_to 'Back', courses_path %>

Śledzenie kursów

Przycisk śledzenia kursu musi odnosić się do jakiejś akcji. Rozszerzmy więc plik routingu o akcję follow w kontrolerze kursu.

get '/courses/:id/follow', to: 'courses#follow'

Widok kursu (app/views/courses/show.html.erb) uzupełniamy o łącze do tej akcji.

<% if logged_in? %>
  <%= link_to( "Zapisz się do kursu", action: :follow) %>
<% end %>

Od razu dodajemy akcję follow do kontrolera kursów. Na tę chwilę niech przenosi do kursu, nie robiąc niczego więcej.

def follow
  redirect_to @course
end

Spróbujmy więc kliknąć w link zapisywania do kursu. Niestety, nawet to jeszcze nie działa, a serwer twierdzi, że nie istnieje pole @course. Pamiętając o regule DRY, możemy zauważyć, że na początku kontrolera znajduje się dyrektywa before_action, nakazująca uruchomić metodę set_course przed wywołaniem każdej z wymienionych po niej akcji. Metoda ta odpowiada za zainicjalizowanie zmiennej @course zgodnie z parametrem id przekazanym w zapytaniu. Uzupełnijmy więc listę metod o akcję follow.

before_action :set_course, only: [:show, :edit, :update, :destroy, :follow]

Następuje radość, ponieważ kliknięcie w zapis do kursu nie zwraca już błędu. Uzupełnijmy teraz metodę follow o faktyczne zapisywanie studenta do kursu. Robimy to przez dodanie do atrybutu courses aktualnie zalogowanego studenta (current_student) aktualnego kursu (@course).

def follow
  current_student.courses.append(@course)
  redirect_to @course
end

Po przetestowaniu zapisu możemy zauważyć, że mamy możliwość zapisywania się w nieskończoność, po miliony razy do tego samego kursu. Nie brzmi to przesadnie sensownie. Dodajmy więc do modelu studenta (student.rb) metodę sprawdzającą, czy jest on do danego kursu zapisany.

def follows?(course)
  self.courses.include?(course)
end

Zaktualizujmy widok kursu tak, aby wyświetlał link do subskcrypcji tylko w wypadku, w który jeszcze nie jesteśmy zapisani do kursu.

<% if logged_in? %>
  <% unless current_student.follows?(@course) %>
    <%= link_to( "Zapisz się do kursu", action: :follow) %>
  <% else %>
    Wypisz się z kursu.
  <% end %>
<% end %>

Pozornie wszystko jest w porządku. Jednak, nadal możemy dokonać wielokrotnej subskrypcji wywołując przez url zapytanie /courses/1/follow. Zablokujmy więc zapisywanie się ponad stan już w samym kontrolerze.

def follow
  unless current_student.follows?(@course)
    current_student.courses.append(@course)
  end
  redirect_to @course
end

Wspaniale. Możemy zapisać się do kursu jedynie jeden jedyny raz. Nie możemy jednak się z niego wypisać. Dodajmy więc łącze do wypisywania się z kursu.

<% if logged_in? %>
  <% unless current_student.follows?(@course) %>
    <%= link_to( "Zapisz się do kursu", action: :follow) %>
  <% else %>
    <%= link_to( "Wypisz się z kursu", action: :unfollow) %>
  <% end %>
<% end %>

Uzupełnijmy plik routes.rb o odpowiednią ścieżkę.

get '/courses/:id/follow', to: 'courses#follow'
get '/courses/:id/unfollow', to: 'courses#unfollow'

I stwórzmy odpowiednią akcję. Najpierw rozszerzmy listę metod uzyskujących aktualny kurs z metody set_course o metodę unfullow.

before_action :set_course, only: [:show, :edit, :update, :destroy, :follow, :unfollow]

Następnie zaimplementujmy akcję usuwania studenta z listy zapisanych do kursu.

def unfollow
  if current_student.follows?(@course)
    @course.students.delete(current_student)
  end
  redirect_to @course
end

I działa.

Dodawanie tematów

Skoro udało nam się zrealizować obsługę zapisywania na kurs, wypadałoby również rozszerzyć nasz serwis o możliwość zakładania tematów w kursie. Na początek musimy poprawić routing zgodnie z zagnieżdżeniem, które wynika z naszego diagramu ERD. Studenci się nie zmieniają, będąc zasobem obocznym. Posty jednak, przez relację wiele do jednego, należą do tematów, a tematy, w ten sam sposób, do kursów.

resources :students
resources :courses do
  resources :topics, only: [:new, :create, :edit, :update, :show, :destroy] do
    resources :posts, only: [:new, :create, :edit, :update, :show, :destroy]
  end
end

Zauważmy, że przy okazji pozbyliśmy się metody index z obu zagnieżdżonych zasobów, zakładając, że wyświetlenie konkretnego kursu będzie od razu indeksować wszystkie tematy, a konkretnego tematu, indeksować wszystkie posty. Użyjmy komendy rake routes aby zobaczyć wynik zmian.

                Prefix Verb   URI Pattern                                                   Controller#Action
                  root GET    /                                                             static#index
                 login GET    /login(.:format)                                              sessions#new
                       POST   /login(.:format)                                              sessions#create
                logout DELETE /logout(.:format)                                             sessions#destroy
                       GET    /courses/:id/follow(.:format)                                 courses#follow
                       GET    /courses/:id/unfollow(.:format)                               courses#unfollow
    course_topic_posts POST   /courses/:course_id/topics/:topic_id/posts(.:format)          posts#create
 new_course_topic_post GET    /courses/:course_id/topics/:topic_id/posts/new(.:format)      posts#new
edit_course_topic_post GET    /courses/:course_id/topics/:topic_id/posts/:id/edit(.:format) posts#edit
     course_topic_post GET    /courses/:course_id/topics/:topic_id/posts/:id(.:format)      posts#show
                       PATCH  /courses/:course_id/topics/:topic_id/posts/:id(.:format)      posts#update

                       PUT    /courses/:course_id/topics/:topic_id/posts/:id(.:format)      posts#update
                       DELETE /courses/:course_id/topics/:topic_id/posts/:id(.:format)      posts#destroy
         course_topics POST   /courses/:course_id/topics(.:format)                          topics#create
      new_course_topic GET    /courses/:course_id/topics/new(.:format)                      topics#new
     edit_course_topic GET    /courses/:course_id/topics/:id/edit(.:format)                 topics#edit
          course_topic GET    /courses/:course_id/topics/:id(.:format)                      topics#show
                       PATCH  /courses/:course_id/topics/:id(.:format)                      topics#update
                       PUT    /courses/:course_id/topics/:id(.:format)                      topics#update
                       DELETE /courses/:course_id/topics/:id(.:format)                      topics#destroy
               courses GET    /courses(.:format)                                            courses#index
                       POST   /courses(.:format)                                            courses#create
            new_course GET    /courses/new(.:format)                                        courses#new
           edit_course GET    /courses/:id/edit(.:format)                                   courses#edit
                course GET    /courses/:id(.:format)                                        courses#show
                       PATCH  /courses/:id(.:format)                                        courses#update
                       PUT    /courses/:id(.:format)                                        courses#update
                       DELETE /courses/:id(.:format)                                        courses#destroy

Zaktualizujmy widok kursu, aby wyświetlał listę tematów.

<h1>Lista tematów</h1>
<% if @course.topics.length == 0 %>
  Nie ma żadnego tematu
<% else %>
  <% @course.topics.each do |topic| %>
    <%= link_to [@course, topic] do %>
    <h4><%= topic.title %> by <%= topic.student.name %></h4>
    <% end %>
    <% topic.posts.each do |post| %>
      <p>
        <%= post.body %>
      </p>
      <h6>by <%= post.student.name %></h6>
    <% end %>
  <% end %>
<% end %>

<hr>

<% if logged_in? && current_student.follows?(@course) %>
  <%= link_to "Dodaj temat", new_course_topic_path(@course) %>
<% end %>

Przy okazji dodaliśmy do strony kursu link do tworzenia nowego tematu, wyświetlający się, jeśli student jest zapisany do kursu. Musimy również poprawić kontroler tematu tak, aby przy tworzeniu nowego kursu, pobierał z parametru course_id kurs, w którym zgodnie z URL się gnieździmy.

def new
  @course = Course.find(params[:course_id])
  @topic = @course.topics.new
end

Z powodu zagnieżdżenia musimy również poprawić formularz tematu (app/views/topic/_form.html.erb). Dotychczas wyglądał on jak poniżej.

<%= form_with(model: topic, local: true) do |form| %>

W poprawkach, musimy rozpocząć go od dyrektywy wskazującej zarówno kurs, jak i temat.

<%= form_for [@course, @topic] do |form| %>

Poprawmy również topics/new.html.erb, aby zamiast do listy wszystkich tematów, łącze Back kierowało do strony kursu.

<h1>New Topic</h1>

<%= render 'form', topic: @topic %>

<%= link_to 'Back', @course %>

Na koniec poprawek, skracamy formularz tematu do niezbędnych pól. Nie musimy podawać w nim już identyfikatora studenta, ponieważ będzie on tym aktualnie zalogowanym, ani identyfikatora kursu, który pobierzemy sobie ze ścieżki.

<%= form_for [@course, @topic] do |form| %>
  <% if topic.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(topic.errors.count, "error") %> prohibited this topic from being saved:</h2>

      <ul>
      <% topic.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :title %>
    <%= form.text_field :title, id: :topic_title %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

Spróbujmy teraz wysłać nasz formularz z nowym tematem. Oczywiście nie da się go wysłać, bo występuje błąd. To metoda create. Musimy poprawić jej nagłówek, tak samo jak przy metodzie new, inicjalizując zmienną @course kursem zgodnym z tym podanym w URL-u.

def create
  @course = Course.find(params[:course_id])
  @topic = @course.topics.new(topic_params)
  @topic.student = current_student

  respond_to do |format|
    if @topic.save
      format.html { redirect_to [@course, @topic], notice: 'Topic was successfully created.' }
      format.json { render :show, status: :created, location: @topic }
    else
      format.html { render :new }
      format.json { render json: @topic.errors, status: :unprocessable_entity }
    end
  end
end

Pole kursu ustawia się automagicznie w drugiej linii, a w trzeciej ręcznie przypisujemy do tematu aktualnie zalogowanego studenta. Z kolei Redirect (redirect_to) wymaga tablicy kolejnych zagnieżdżeń URL-a.

Ustawmy jeszcze od razu, przy pamięci, metodę update.

def update
  respond_to do |format|
    if @topic.update(topic_params)
      format.html { redirect_to [@course, @topic], notice: 'Topic was successfully updated.' }
      format.json { render :show, status: :ok, location: @topic }
    else
      format.html { render :edit }
      format.json { render json: @topic.errors, status: :unprocessable_entity }
    end
  end
end

Dla poprawnego ustawiania pola @course w metodach innych niż create i update poprawmy set_topic.

def set_topic
  @course = Course.find(params[:course_id])
  @topic = Topic.find(params[:id])
end

Na koniec możemy zaktualizować widok tematu tak, aby wyświetlał wszystkie posty i posiadał link do tworzenia nowej odpowiedzi.

<p id="notice"><%= notice %></p>

<h1><%= @topic.title %> by <%= link_to @topic.student.name, @topic.student %></h1>
<h2><%= link_to @course.name, @course %></h2>

<hr>
<h1>Lista odpowiedzi</h1>
<% if @topic.posts.length == 0 %>
  Nie ma żadnych odpowiedzi
<% else %>
  <ul>
  <% @topic.posts.each do |post| %>
    <li>
      <strong><%= post.student.name %> pisze:</strong> <%= post.body %>
    </li>
  <% end %>
  </ul>
<% end %>

<hr>

<% if logged_in? && current_student.follows?(@course) %>
  <%= link_to "Dodaj odpowiedź", new_course_topic_post_path(@course,@topic) %>
<% end %>

<hr>

<%= link_to 'Edit', edit_course_topic_path(@course, @topic) %> |
<%= link_to 'Back', @course %>

Obsługa tworzenia nowego tematu gotowa.

Dodawanie postów

Zrealizowaliśmy dodawanie tematów zagnieżdżonych w kursach. Obsłużmy jeszcze drugie zagnieżdżenie — postów do danego tematu.

Analogicznie do pierwszego zagnieżdżenia, w metodzie new wskażmy na wszystkie trzy zasoby (@course, @topic i nowy @post).

# GET /posts/new
def new
  @course = Course.find(params[:course_id])
  @topic = Topic.find(params[:topic_id])
  @post = @topic.posts.new
end

Formularz nowego posta powinien być w stanie powrócić do widoku tematu. Poprawiamy więc posts/new.html.erb tak, aby odnosił do wskazanego tematu we wskazanym kursie.

<h1>New Post</h1>

<%= render 'form', post: @post %>

<%= link_to 'Back', [@course, @topic] %>

Później, sam formularz rozpoczynamy znów od dyrektywy wskazującej kolejne stadia zagnieżdżenia. (Bardzo ważna jest tutaj spacja po przecinku).

<%= form_for [@course, @topic, @post] do |form| %>

Znów skracamy sam formularz do niezbędnych pól. Tym razem potrzebne nam jest tylko zawartość (body) posta. Student będzie tym aktualnie zalogowanym, a kurs i temat pobierzemy z URL-a.

<%= form_for [@course, @topic, @post] do |form| %>
  <% if post.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2>

      <ul>
      <% post.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :body %>
    <%= form.text_field :body, id: :post_body %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

Jak poprzednio, formularza początkowo nie uda się wysłać, z powodu niepoprawnej metody create. Poprawiamy więc jej początek, analogicznie do zmian w metodzie new.

def create
  @course = Course.find(params[:course_id])
  @topic = Topic.find(params[:topic_id])
  @post = @topic.posts.new(post_params)
  @post.student = current_student

  respond_to do |format|
    if @post.save
      format.html { redirect_to [@course, @topic], notice: 'Post was successfully created.' }
      format.json { render :show, status: :created, location: @post }
    else
      format.html { render :new }
      format.json { render json: @post.errors, status: :unprocessable_entity }
    end
  end
end

Pole kursu znów ustawia się automagicznie w drugiej linii, a studenta ustawiamy ręcznie. Redirect ponownie wymaga tablicy kolejnych złamań URL-a. Ustawmy jeszcze, przy pamięci, metodę update.

def update
  respond_to do |format|
    if @post.update(topic_params)
      format.html { redirect_to [@course, @topic], notice: 'Topic was successfully updated.' }
      format.json { render :show, status: :ok, location: @topic }
    else
      format.html { render :edit }
      format.json { render json: @topic.errors, status: :unprocessable_entity }
    end
  end
end

Poprawmy set_post.

def set_post
  @course = Course.find(params[:course_id])
  @topic = Topic.find(params[:topic_id])
  @post = Post.find(params[:id])
end

I mamy w pełni działającą aplikację. Jest w niej sporo dziur i niedoróbek, ale jej schemat operacyjny jest już pełen i wystarczy spokojnie jako pierwszy projekt studencki w technologii Ruby on Rails.

[info] Aktualny kod

Na koniec każdego modułu znajduje się łącze do pełnej wersji kodu, który powinien być jego wynikiem.

• Wprowadzone zmiany

• Pełen kod