@dominikcProsta strona w Ruby - Sinatra (cz. 1)

Prosta strona w Ruby - Sinatra (cz. 1)

5 maja 2012, 14:59

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.