Jak stworzyć Strony Statyczne w aplikacji Ruby on Rails

Przez: Lukasz Muzyka, Z dnia: 2014-08-19

Dobrze, stworzyliśmy naszą pierwszą aplikację w Ruby on Rails. Problem jest taki, że ona tylko pokazuje domyślną stronę automatycznie wygenerowaną przez Rails. To nie jest użyteczne. Chcemy żeby nasza aplikacja dostarczała jakąś treść, która będzie istotna dla użytkowników naszej aplikacji.

Pierwszym krokiem w budowaniu funkcjonalności w naszej aplikacji będzie wyświetlanie użytkownikowi statycznych stron, na przykład strony domowej lub kontaktowej. Oczywiście, "statycznych" nie znaczy, że strony te nie będą posiadały fajnych rzeczy.

Krok 1: Stwórz kontroler

Zaczniemy od stworzenia "Kontrolera". Jest on jednym z trzech głównych typów plików, których w międzyczasie bedziemy używać. Pozostałe dwa to "Model" i "Widok". Wszystkie trzy wzięły się z architektury MVC (Model, Widok, Kontroler), która jest używana do organizacji kodu aplikacji. Każdy element MVC odgrywa inną rolę i z czasem nauczymy się jak wykorzystywać ich umiejętności.

Dalej, użyjmy generatora Rails. W terminalu przejdź do folderu aplikacji.

bash

$ cd Documents/projects #depending where you put your application

Jako przypomnienie: użyj $ ls by zobaczyć zawartość folderu, w którym obecnie się znajdujesz. Jeśli jesteś już wewnątrz folderu aplikacji możemy stworzyć nowy kontroler:

$ rails generate controller static_pages

Ta komenda stworzy kilka plików:

create  app/controllers/static_pages_controller.rb
invoke  erb
create  app/views/static_pages
invoke  test_unit
create  test/controllers/static_pages_controller_test.rb
invoke  helper
create  app/helpers/static_pages_helper.rb
invoke  test_unit
create  test/helpers/static_pages_helper_test.rb
invoke  assets
invoke  coffee
create  app/assets/javascripts/static_pages.js.coffee
invoke  scss
create  app/assets/stylesheets/static_pages.css.scss

• app/controllers/static_pages_controller.rb - dokładnie ten kontroler
• app/views/static_pages - tutaj będziemy przechowywać szablony HTML kontrolera
• test/controllers/static_pages_controller_test.rb - plik testowy kontrolera
• app/helpers/static_pages_helper.rb - plik asystent
• test/helpers/static_pages_helper_test.rb - plik testowy asystenta
• app/assets/javascripts/static_pages.js.coffee - plik skryptowy coffee
• app/assets/stylesheets/static_pages.css.scss - plik CSS

W tym tutorialu bedziemy używać kontrolera i foldera widoków. Naszym celem nie jest robienie właściwego TDD (Test Driven Development). Jeżeli jesteś zainteresowany pisaniem testów Rspec, bardzo polecam stronę z Michael Hartl's tutorialem.

Krok 2: Modyfikuj Strony Statyczne

Spójrzmy na kontroler:

app/controllers/static_pages_controller.rb

class StaticPagesController < ApplicationController
end

Obecnie jest on pusty. Widzisz dwie linijki, które zostały automatycznie stworzone przez generator. Pomiędzy linią otwirającą i wyrazem "end" będziemy umieszczać nasz nowy kod. Stwórzmy teraz naszą pierwszą "akcję" dla strony domowej:

class StaticPagesController < ApplicationController
    def home
    end
end

Krok 3: Stwórz plik domowy

We have defined a custom action and called it "home." The Rails framework is smart enough and will try to send to the user an HTML template that matches name of the controller action, so we need to create one. Inside the folder app/views/static_pages create a new file and call it home.html.erb

Zdefiniowaliśmy własną akcję i nazwaliśmy ją "home". Framework Rails jest na tyle mądry, że będzie próbował wysłać szablon HTML o takej samej nazwie do użytkownika, więc taki stwórzmy. Wewnątrz folderu app/views/static_pages stwórz nowy plik i nazwij go home.html.erb.

app/views/static_pages/home.html.erb

<h1>This is the home page</h1>

Krok 4: Stwórz ruter

Prawie skończyliśmy. Wszystko co jeszcze pozostało to powiedzenie aplikacji pod jakim adresem akcja powinna być osiągnięta. Musimy stworzyć "ruter". Wszystkie są określone w folderze config:

config/routes.rb

Rails.application.routes.draw do
  # The priority is based upon order of creation: first created -> highest priority.
  # See how all your routes lay out with "rake routes".

  # You can have the root of your site routed with "root"
  # root 'welcome#index'

  # Example of regular route:
  #   get 'products/:id' => 'catalog#view'

  # Example of named route that can be invoked with purchase_url(id: product.id)
  #   get 'products/:id/purchase' => 'catalog#purchase', as: :purchase

  # Example resource route (maps HTTP verbs to controller actions automatically):
  #   resources :products

  # Example resource route with options:
  #   resources :products do
  #     member do
  #       get 'short'
  #       post 'toggle'
  #     end
  #
  #     collection do
  #       get 'sold'
  #     end
  #   end

  # Example resource route with sub-resources:
  #   resources :products do
  #     resources :comments, :sales
  #     resource :seller
  #   end

  # Example resource route with more complex sub-resources:
  #   resources :products do
  #     resources :comments
  #     resources :sales do
  #       get 'recent', on: :collection
  #     end
  #   end

  # Example resource route with concerns:
  #   concern :toggleable do
  #     post 'toggle'
  #   end
  #   resources :posts, concerns: :toggleable
  #   resources :photos, concerns: :toggleable

  # Example resource route within a namespace:
  #   namespace :admin do
  #     # Directs /admin/products/* to Admin::ProductsController
  #     # (app/controllers/admin/products_controller.rb)
  #     resources :products
  #   end
end

Wszystkie linie zaczynające się od # są ignorowane przez aplikację.

Polecam Ci przeczytać wykomentowane linijki. Ostatecznie bedziemy większoci używać. Jednakże jak na razie, zdefiniujmy "root" naszej aplikacji. To będzie strona "lądowania" naszej aplikacji. Ta, którą ludzie zobaczą jak wejdą na źródło strony, czyli kiedy adres będzie zawierał tylko podstawowy adres, n.p.: www.peoplecancode.com.

By tego dokonać, usuńmy komentarz (poprzez usunięcie symbolu #) z linijki z "root" i zmieńmy ją tak, żeby kierowała do właśnie stworzonych kontrolera i akcji:

root 'static_pages#home'

To może być czytane jak: Kiedy użytkownik wpisał adres strony zabierz go  do kontrolera "static_pages" i jego akcji "home".

Krok 5: Odpal serwer Rails

Możesz teraz zapisać wszystkie utworzone przez nas pliki i, jeżeli nie masz włączonego serwera, odpalić go. Wreszcie wpisz w terminalu:

bash

$ rails server

Otwórz przeglądarkę i przejdź do adresu: localhost:3000.

Powinieneś teraz widzieć "This is the home page".

Komentarze

• Z dnia: 2014-06-07 Frank napisał:

  Nice, straightforward, easy to follow!

Z dnia: 2015-02-25 4goodapp napisał:

+1

• Z dnia: 2015-01-09 Marius napisał:

  i like it . easy.

• Z dnia: 2016-05-02 richard.Garcia napisał:

  +1

• Z dnia: 2018-08-28 agorneo napisał:

  Great work Thank you very much for all this amazing work in your website I am grateful to you :)

Dodaj komentarz

Możesz się zalogować by skomentować