середа, 5 травня 2010 р.

Meet Padrino! Part 2

У попередній статті ми познайомитись з веб-фреймворком Padrino. Створили проект і розглянули його структуру. Також навчились генерувати інтерфейс адміністратора, контролери і моделі. Сьогодні ми продовжимо наше знайомство з цим чудовим фреймворком.
Минулого разу ми додали можливість керувати(створювати, редагувати і видаляти) повідомленнями блогу і відображати їх на головній сторінці. Але ми пропустили одну важливу властивість у моделі Post - дату створення/редагування повідомлення.


Модифікація моделі Post

Оновимо модель Post і додамо дві нових властивості created_at і updated_at
# app/models/post.rb
class Post
  include DataMapper::Resource

  # property <name>, <type>
  property :id, Serial
  property :title, String
  property :body, Text
  property :created_at, DateTime
  property :updated_at, DateTime
end

Властивість created_at по замовчуванню заповнюється часом створення запису, а updated_at - часом оновлення запису. Докладно про ці поля можна дізнатися з офіційної документації DataMapper.

Далі генеруємо нову міграцію для бази даних.
$ /opt/ruby191/bin/padrino-gen migration AddTimestamp
=> Located unlocked Gemfile for development
       apply  orms/datamapper
      create  db/migrate/003_add_timestamp.rb

Редагуємо db/migrate/003_add_timestamp.rb.
migration 3, :add_timestamp do
  up do
    modify_table :posts do
      add_column :created_at, DateTime
      add_column :updated_at, DateTime
    end
  end

  down do
    modify_table :posts do
      remove_column :created_at, DateTime
      remove_column :updated_at, DateTime
    end

  end

end

І власне здійснюємо саму міграцію.
$ /opt/ruby191/bin/padrino rake dm:migrate
=> Executing Rake dm:migrate ...
 == Performing Up Migration #3: add_timestamp
   ALTER TABLE "posts" ADD COLUMN "created_at" TIMESTAMP
   -> 0.0232s
   ALTER TABLE "posts" ADD COLUMN "updated_at" TIMESTAMP
   -> 0.0029s
 -> 0.0266s
<= dm:migrate:up  executed

Тепер все готово. І у моделі Post з’явилося дві нових властивості. Зробимо, щоб повідомлення виводилися на головну сторінку в порядку спадання дати створення.
# app/controllers/posts.rb
SampleBlog.controllers :posts do
  get :index do
    @posts = Post.all(:order => [:created_at.desc])
    render 'posts/index'
  end
end

Асоціація між моделями Post і Account

Переглянемо модель Post. Почнемо з додавання нової міграції, щоб приєднати облікові записи(Account) до повідомлень(Post).
$ /opt/ruby191/bin/padrino-gen migration AddAccountToPost account_id:integer
=> Located unlocked Gemfile for development
       apply  orms/datamapper
      create  db/migrate/004_add_account_to_post.rb

Це створить нову міграцію з необхідними полями, щоб приєднати account_id до повідомлення. Повернемося до моделі Post, щоб встановити асоціації і додати деякі перевірки.
# app/models/post.rb
class Post

  belongs_to :account

  validates_present :title
  validates_present :body
end

Виконуємо міграцію бази даних.
$ /opt/ruby191/bin/padrino rake dm:migrate
=> Executing Rake dm:migrate ...
 == Performing Up Migration #4: add_account_to_post
   ALTER TABLE "posts" ADD COLUMN "account_id" INTEGER
   -> 0.0068s
 -> 0.0071s
<= dm:migrate:up  executed

Оновлення інтерфейсу адміністратора

Тепер коли модель Post має відповідні асоціації і перевірки, перейдемо в інтерфейс адміністратора Padrino і внесемо деякі зміни, щоб включити облікові записи у повідомлення. Відкриваємо файл admin/controllers/posts.rb і включаємо current_account до створення нового повідомлення.

# admin/controllers/posts.rb
Admin.controllers :posts do
# ...
  post :create do
    @post = Post.new(params[:post])
    @post.account = current_account # <-- add
    if @post.save
      flash[:notice] = 'Повідомлення було успішно створене.'
      redirect url(:posts, :edit, :id => @post.id)
    else
      render 'posts/new'
    end
  end
# ...
end

Оновимо форму для додавання нових повідомлень, щоб показати зміни, які ми зробили.
# app/views/posts/show.haml
- @title = @post.title
#show
  .post
    .title= @post.title
    .date= time_ago_in_words(@post.created_at || Time.now) + ' тому'
    .body= simple_format(@post.body)
    .details
      .author Написано #{@post.account.email}
%p= link_to 'Дивитись всі записи', url_for(:posts, :index)

# app/views/posts/_post.haml
.post
  .title= link_to post.title, url_for(:posts, :show, :id => post.id)
  .date= time_ago_in_words(post.created_at || Time.now) + ' тому'
  .body= simple_format(post.body)
  .details
    .author Написано #{post.account.email}

Тепер ми можемо створити декілька користувачів, які можуть писати повідомлення до блогу.

Макет сайту

Тепер коли додаток налаштований і сервер запущений, давайте створимо кілька основних стилів CSS.
По-перше, створимо макет нашого додатку. Макет являє собою файл, який діє як контейнер для утримання шаблону. Він використовується для створення єдиного дизайну для кожної сторінки сайту. Ми створимо макет, просто додавши файл у директорію app/views/layout.
-# app/views/layouts/application.haml
!!! Strict
%html
  %head
    %title= [@title, "Блоґ"].compact.join " | "
    = stylesheet_link_tag 'application'
    = javascript_include_tag 'jquery', 'application'
    = yield_content :include
  %body
    #header
      %h1 Мій персональний блоґ
      %ul.menu
        %li= link_to "Блоґ", url_for(:posts, :index)
    #container
      #main= yield
      #sidebar
        - form_tag url_for(:posts, :index), :method => 'get' do
          Пошук
          = text_field_tag 'query', :value => params[:query]
          = submit_tag 'Пошук'
        %p Останні повідомлення
        %ul.bulleted
          %li Item 1 - Lorem ipsum dolorum itsum estem
          %li Item 2 - Lorem ipsum dolorum itsum estem
          %li Item 3 - Lorem ipsum dolorum itsum estem
        %p Останні коментарі
        %ul.bulleted
          %li Item 1 - Lorem ipsum dolorum itsum estem
          %li Item 2 - Lorem ipsum dolorum itsum estem
          %li Item 3 - Lorem ipsum dolorum itsum estem
    #footer
      Copyright (c) 2010 ruby-ua

Цей макет створюю базову структуру нашого майбутнього блогу, і потребує необхідних стилів CSS і файлів JavaScript для контролювання вигляду і поведінки сайту. Також він включає декілька порожніх елементів, таких як рядок пошуку та блоки для останніх повідомлень і коментарів.
Далі нам просто потрібно налаштувати стиль, який ми вказали у рядку
= stylesheet_link_tag 'application'

Це робиться шляхом редагування файлу app/stylesheets/application.sass. Створення стилю CSS не розглядається в рамках цієї статті і віддається на відкуп читачу.
За основу цієї статті було взяте керівництво Blog Tutorial з офіційного сайту Padrino. Відповідно, у якості стилю можна використати application.sass з репозиторію. Після цього, наш блог матиме наступний вигляд:

Немає коментарів: