Eric Goodwin

The Liquid Chronicles - The Setup
06/12/04

I've been playing with liquid templates in rails now for about a month. When I first started there wasn't a great deal of nice, easy to follow, step by step tutorials. There are a few good wiki's but putting all the information together can be a bit quite a bit of work.This guide is meant to be super simple and easy to follow. It will be a start to finish guide on how to install and use liquid in you ruby on rails application. This is part one. Enjoy!
First let's create our project and add the liquid rails plugin.

server:/# cd /rails
server:/# rails liquid
server:/# cd liquid/vendor/plugins
server:/# svn export svn://home.leetsoft.com/liquid/trunk/liquid/
server:/# cd ../../
server:/# rake rails:freeze:edge
server:/# ruby script/server

After starting the server you should be able to see the default rails page.
Now that you have your server up and running create your database and add the right settings to your database.yml.
Now let's get rid of the default rails page and add a couple routes so we'll be able to see our new page that we are going to create a bit later.
server:/# rm public/index.html
server:/# pico config/routes.rb

Add the following lines to the routes.rb file.
1
2

map.resources :posts
map.connect '', :controller => "posts"

Now we need to create our database table. We are going to create a super simple blog, so let's add a posts table.
server:/# cd db
server:/# mkdir migrate
server:/# cd migrate
server:/# pico 001_create_posts.rb

Here is our code for the migration
1
2
3
4
5
6
7
8
9
10
11
12
13

class CreatePosts < ActiveRecord::Migration
  def self.up
    create_table :posts do |t|
      t.column :title, :string
      t.column :body, :text
      t.column :created_at, :datetime
    end
  end

  def self.down
    drop_table :posts
  end
end

Now lets run a migration to generate the table in our database. After that we'll create our post resource and then restart the server to make sure that everything is still working properly.
server:/# rake db:migrate
server:/# ruby script/generate scaffold_resource post
server:/# ruby script/server

You should now be able to go to http://localhost:3000 and see the scaffolding for your new site. Now all we have to do is add some liquid.
Let's edit our posts controller first.
server:/# pico app/controllers/posts_controller.rb

In the index method let's change the default find statement.
1
2

#@posts = Post.find(:all)
@posts = Post.find(:all).collect(&:attributes)

This last line might be a bit confusing. Basically all that it is doing is grabbing all of our posts and then creating hashes for each one with all of its attributes. Since liquid likes to use hashes we need to do this conversion.
Now that we have some hashes to work with we need to create our liquid view.
server:/# cd app/views/post
server:/# mv index.rhtml index.liquid
server:/# pico index.liquid

We're going to simplify our index view a little and take out all the editing capabilities and add some liquid methods. For liquid syntax, check out this site.
1
2
3
4
5
6
7
8
9
10

<h1>Our Posts</h1>
<div id="posts">
{% for post in posts %}
        <div class="post">
                <h2>{{ post.title }}</h2>
                <p class="date">{{ post.created_at | date:"%b %d, %Y" }}</p>
                <p>{{ post.body }}</p>
        </div>
{% endfor %}
</div>

Ok .. now that that's all done we can add a couple records to the database. When we restart the server we should be able to see the records. We should probably add our main layout as a liquid template as well. 
server:/# pico app/controllers/posts_controller.rb

Add this line just after the class definition


layout 'default'

Now we just have to make the default liquid template in our views/layout directory.
server:/# pico app/views/layouts/default.liquid

Here is what we're going to start with.
1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>My Liquid Enabled Site</title>
  <link rel="Stylesheet" href="/stylesheets/scaffold.css" type="text/css" media="screen" />
</head>
<body>
{{ content_for_layout }}
</body>
</html>

Now your on your way to becoming a pro liquid user. Stay tuned for our next installment, Liquid Drops.
For more information on liquid check out these resources

7 comments

Comments

  1. 07/01/03 - Paul Says:

    I think you are missing an end in your migration code.

  2. 07/01/09 - Eric Says:

    Thanks Paul. I’ve fixed it up.

  3. 07/03/30 - Antonio Says:

    Part 2 anytime soon :-) thanks for the writeup..

  4. 07/06/03 - Luc Says:

    Thanks a lot mate. Got the part two ready yet ?

  5. 08/07/14 - joanne Says:

    Thanks alot!!!

    For the code below can i know where should i place it? In the controller?

    @posts = Post.find(:all)

    @posts = Post.find(:all).collect(&:attributes)

  6. 08/07/15 - Eric Says:

    Correct. It will go in the controller.

  7. 08/07/21 - Den Says:

    What if i just want to grab only 1 post from the table?

    can i do this: @posts = Post.find(:params[:id]).collect(&:attributes)

Have your say

A name is required. You may use HTML in your comments.




About

Eric Goodwin is a web developer living in Victoria BC, Canada. You can contact him at eric@ericgoodwin.com

Open Source

Projects

Elsewhere

Archives