Quick Rails!
A quick reference for creating a Rails site. Not a complete introduction. More of a cheatsheet. Here’s how to build a sample web application — a web design portfolio:
- Host a domain on a server with Rails support (e.g. Dreamhost shared hosting).
- Create three MySQL databases. Call them portfolio_development, portfolio_production, and portfolio_test.
- Create the Rails application skeleton (folder structure, config files, etc.).
[host]$ pwd
/home/username
[host]$ rails portfolio
create
create app/controllers
create app/helpers
create app/models
create app/views/layouts
***
create public/stylesheets
***
create config/database.yml
create config/routes.rb
***
create script/generate
*** - Configure your new skeletal app.
- Edit config/database.yml — set up database hostname, username, and password.
- Edit config/routes.rb — direct the root to “admin”: change line 14 to:
map.connect '', :controller => "admin" - Link from webroot (here, a folder called “domain.com”) to rails public directory (”portfolio/public”). This is good for security. We don’t want our source files to be under the webroot, where they may accidentally be exposed.
ls -lwill confirm that we’ve correctly created the link.
[host]$ ln -s ../portfolio/public domain.com/portfolio
[host]$ ls -l domain.com
total 176
***
lrwxrwxrwx 1 username unixgid 16 2006-11-22 13:40 portfolio -> ../portfolio/public
*** - Rename index.html to index.html.old.
[host]$ cd portfolio
[host]$ mv public/index.html public/index.html.old - Check the setup by browsing to http://domain.com/portfolio — which gives an error. That’s expected, though, because we haven’t created the “Admin” controller that it needs.
- Create the database table needed for our app. Save the following as db/create.sql and execute it on portfolio_development:
drop table if exists designs;
create table designs (
id int not null auto_increment,
title varchar(255) not null,
about text null,
image varchar(255) not null,
caption varchar(255) null,
primary key (id)
); - Generate a scaffold. Rails will look for the corresponding table, and automagically give us CRUD (Create, Retrieve, Update, Delete) functionality for it!
[host]$ ruby script/generate scaffold Design Admin
***
create app/models/design.rb
create test/unit/design_test.rb
create test/fixtures/designs.yml
create app/views/admin/_form.rhtml
create app/views/admin/list.rhtml
create app/views/admin/show.rhtml
create app/views/admin/new.rhtml
create app/views/admin/edit.rhtml
create app/controllers/admin_controller.rb
create test/functional/admin_controller_test.rb
create app/helpers/admin_helper.rb
create app/views/layouts/admin.rhtml
create public/stylesheets/scaffold.css
“Design” is the name of the model, “Admin” is the name of the controller. Now that we have created the AdminController, we should see something cool at http://domain.com/portfolio! It’s our bare-bones (but working!) application. - Time to pretty it up. Let’s customize the listing view.
- Edit app/views/admin.rhtml to something like this:
<div id="wrap"><div id="wrap2"><h1>Design List</h1>
<%
odd_or_even = 0
for design in @designs
odd_or_even = 1 - odd_or_even
%>
<div class="ListLine<%= odd_or_even %>">
<div class="ListActions">
<%= link_to 'Show', :action => 'show', :id => design %>
<%= link_to 'Edit', :action => 'edit', :id => design %>
<%= link_to 'Destroy', { :action => 'destroy', :id => design }, :confirm => 'Are you sure?', :post => true %>
</div>
<h3 class="ListTitle"><%= h(design.title) %></h3>
<div class="ListImage">
<a xhref="<%= design.image %>"><img xsrc="<%= design.image %>"/></a><br/>
<span class="ListCaption"><%= h(design.caption) %></span>
</div>
<span class="ListAbout"><%= design.about %></span><br/>
</div>
<% end %>
<%= link_to 'Previous', { :page => @design_pages.current.previous } if @design_pages.current.previous %>
<%= link_to 'Next', { :page => @design_pages.current.next } if @design_pages.current.next %><br/>
<%= link_to 'New design', :action => 'new' %>
</div></div> - Edit public/stylesheets/scaffold.css to something like this:
body { background-color: #AAA; color: #333; }
***
.ListTitle { color:#244; font-weight:bold; font-size:x-large; }
.ListAbout { color:#244; }
div.ListImage { float:left; width:173px; margin:0 10px 0 0; }
div.ListImage img { width:173px; border:none; }
.ListCaption { font-style:italic; font-size:x-small; }
.ListActions { font-size:x-small; text-align:right; padding-left:1em; float:right; }
.ListLine0 { background: #D3E9CB; }
.ListLine1 { background: #F7F9DF; }
.ListLine0, .ListLine1 { padding:10px; border:2px solid #333; margin:20px; }
h1 { text-align:center; }
#wrap { width:787px; margin:10px auto; background:#FFF; border:4px solid #444; }
#wrap2 { padding:10px; } - Look at your pretty, pretty site and think of the possibilities.
