Prosta strona w Ruby - Sinatra (cz. 1)
Jeżeli chcemy stworzyć prostą aplikację webową w Ruby, w której nie potrzebujemy frameworka, to Sinatra będzie dla nas idealnym rozwiązaniem.
Zaczynamy
RubyGems
Zacznijmy najpierw od instalacji RubyGems. RubyGems to menedżer pakietów dla języka Ruby. Pakiety (gemy) zawierają programy i biblioteki, które wykorzystamy w naszych aplikacjach.
sudo apt-get install rubygems # apt-get zastąp swoim ulubionym menedżerem pakietów :)
Polecenie zainstaluje nam RubyGems wraz z zależnościami (m. in. interpreter Ruby). Teraz możemy doinstalować Sinatrę.
<sudo> gem install sinatra
Pierwsza aplikacja
Utwórzmy plik app.rb z następującym kodem:
vim app.rb
#!/usr/bin/env ruby require 'sinatra' get '/' do 'Hello World!' end
W powyższym kodzie możemy wyróżnić 2 linijki: require 'sinatra' - spowoduje załadowanie tej biblioteki. get '/' do - ta linijka odpowiada za routing - dzięki temu aplikacja wykona kod znajdujący się w odpowiednim bloku zależnie od żądania.
Teraz możemy uruchomić serwer wpisując w terminalu:
ruby -rubygems app.rb
Polecenie uruchomi serwer na porcie 4567.
http://localhost:4567/
Jeżeli wszystko poszło dobrze, to powinniśmy zobaczyć taką stronę:
Szablony
Na początku użyjmy wbudowanego w Ruby systemu szablonów - ERB. W tym celu musimy zastąpić 'Hello World!' linijką:
erb :index
Dzięki temu żądanie zwróci nam kod załadowany z szablonu. Otwórzmy więc ponownie plik app.rb:
vim app.rb
#!/usr/bin/env ruby require 'sinatra' get '/' do erb :index end
Po edycji pliku app.rb powinniśmy zrestartować serwer. (Ctrl-C, ruby -rubygems app.rb) Jak łatwo możemy się domyślić, zawartość strony będzie wczytywana z pliku index.erb
Utwórzmy więc katalog 'views', w którym umieszczane będą pliki szablonu.
mkdir -p views
W pliku views/index.erb dodajmy następujący kod:
<h1>Hello World</h1>
Tworzymy podstrony
Tutaj wykorzystamy routing. Każdy blok składa się z metody HTTP (GET, POST, PUT, DELETE, itp), reguły URL oraz kodu wykoywanego przy żądaniu.
#!/usr/bin/env ruby require 'sinatra' get '/' do erb :index end get '/contact' do erb :contact end
Teraz wystarczy utworzyć plik: views/contact.erb
vim views/contact.erb
<h2>Kontakt</h2>
A w pliku views/index.erb:
<h2>Strona główna</h2>
Layout
Mając już podstrony, możemy stworzyć prosty layout. Sinatra domyślnie używa layoutu znajdującego się w pliku 'views/layout.erb'. Utwórzmy więc ten plik:
vim views/layout.erb
<!DOCTYPE html> <html> <head> <title>foo</title> </head> <body> <div id="header"> <ul> <li><a href="/">Strona główna</a></li> <li><a href="/contact">Kontakt</a></li> </ul> </div> <div id="content"> <%= yield %> </div> </body> </html>
Ważna jest tutaj linijka "<%= yield %>". Odpowiada ona za wyświetlenie właściwej treści.
Teraz nasza aplikacja powinna wyglądać tak:
Pliki statyczne - arkusze stylów, skrypty, etc
Wszystkie pliki statyczne powinny się znajdować w katalogu public. Utwórzmy więc katalog z arkuszami stylów:
mkdir -p public/stylesheets
Teraz możemy dodać arkusz stylów:
vim public/stylesheets/application.css
body { background: #CCC; font-family: Helvetica; } a { color: #0000FF; } ul { padding: 0; } li { display: inline; margin-right: 10px; }
Dodajmy teraz następujący kod do sekcji head w pliku views/layout.erb:
<link rel="stylesheet" type="text/css" href="/stylesheets/application.css" />
Końcowy efekt powinien wyglądać tak:
Uprzedzając pytania dlaczego nie użyłem Sass albo Haml - te tematy poruszę w następnych częściach.