This tutorial will go over the basic steps to create a forums app. The forums will extend from my previous blog post about integrating Rails 3 with AuthLogic. If you are new to rails I’d high recommend reading it, otherwise continue. First download the source code from the AuthLogic App and move the code to more logically named directory for this project.
$ mkdir forums
$ git init
$ git clone git://github.com/baileylo/login_app.git forums
$ cd forums
$ rake db:migrate
$ rails -s
Feel free to verify that everything is working, you should be able to register and login at /users.
The Backend
Rails has reserved “thread” has a model name so this will create a weird model name but the other two model names are straight forward: Board, Conversation, Comment.
Board is a set of boards, groupings of conversations. Conversation, probably more commonly referred to as “Thread”, is list of Comments made by users. In our forum we’ll keep it simple, A Board will contain only a name and an id, a Conversation will belong to a board. A Conversation will have a title and a creating user. Comments will have only a body a posting user and a reference to the conversation they belong to.
$ rails g scaffold board id:integer title:string
$ rails g scaffold conversation id:integer title:string board_id:integer user_id:integer
$ rails g scaffold comment id:integer user_id:integer conversation_id:integer body:text
This created all the controllers, views, models, and migration files needed. Open up the three migration files created, and edit them to look as follows.
class CreateBoards < ActiveRecord::Migration
def self.up
create_table :boards do |t|
t.integer :id
t.string :title, :limit => 50
t.timestamps
end
end
def self.down
drop_table :boards
end
end
class CreateComments < ActiveRecord::Migration
def self.up
create_table :comments do |t|
t.integer :id
t.integer :user_id
t.integer :conversation_id
t.text :body
t.timestamps
end
add_index :comments, :conversation_id
add_index :comments, :user_id
end
def self.down
drop_table :comments
end
end
class CreateConversations < ActiveRecord::Migration
def self.up
create_table :conversations do |t|
t.integer :id
t.string :title, :limit => 50
t.integer :board_id
t.integer :user_id
t.timestamps
end
add_index :conversations, :board_id
add_index :conversations, :user_id
end
def self.down
drop_table :conversations
end
end
These changes add indexes to our Conversations and Comments tables. These will add a much needed performance boost when querying the database. They also added size limitations to board.title and conversation.title of 50 characters.
Now create the database tables by running:
$ rake db:migrate
Some Quick Backend Additions
Feel free to browse around the site, you’ll notice all the forms work correctly, but none of the objects are linked together. To tell active record that these models are linked we must edit the Model Classes.
Open up your newly created model classes and edit them to look like this:
class Board < ActiveRecord::Base
has_many :conversations
end
class Comment < ActiveRecord::Base
belongs_to :conversation
belongs_to :user
validates_presence_of :body
end
class Conversation < ActiveRecord::Base
has_many :comments
belongs_to :user
belongs_to :board
validates_presence_of :title
end
In this we see two very important ideas. We’ve added form validation as well as ORM hooks that define relationships between our models. In board.rb and conversation.rb we added has_many :conversations and has_many :comments, respectively, this informs Rails these are 1 to many relationships. You can see the rails docs for has_many here. This makes the relationship from one conversation to many comments. In conversation.rb and comments.rb you can see the belongs_to function, this function tells rails that these objects belong to another specific object, you can see the docs for belongs_to here.
validates_presence_of is called when a save, update, or create are called on an object. This function makes sure that there is data stored in these member variables. We specified that conversation.title and comment.body must be required, we don’t want any empty posts. Board.title was purposefully skipped, it is not for general use.
If you navigate to your conversations page: http://localhost:3000/conversations and try to create a message, not including a title, you will get a nice error saying that it is a required field. You will how ever notice that you can make this field as long as you like even though we specified it should only be 50 characters long. Lets fix this, add the following line of code to your conversation.rb file:
validates_length_of :title, :maximum=>50
If you try again you will see an error message stating that the “the input must be less than 50 characters”.
If you’ve created any data, you may want to clean it up now, it may cause problems later in this demonstration.
Routes!
Now that we have the backend in order, lets create the routes needed to use this message board. Open up your config/routes.rb file and change it to look like this:
LoginApp::Application.routes.draw do
resources :boards do
resources :conversations
end
root :to => "boards#index"
resources :users, :user_sessions
match 'login' => 'user_sessions#new', :as => :login
match 'logout' => 'user_sessions#destroy', :as => :logout
end
Delete your public/index.html file, it’s no longer needed.
Now localhost:3000/ will display a list of your Boards, instead of the rails information page.
In your console type:
$ rake routes
This is a list of every url that your app can handle, the most important are the top few. We’ve now created a url hierarchy. All of a conversations will be listed by /boards/:board_id/conversations/:id.
Jumping into the view
Our site looks okay, but lets try and spiff it up a bit. Open up your views/layouts/index.html and change it to look like:
<!DOCTYPE html>
<html>
<head>
<title>Rails Message Boards</title>
<%= stylesheet_link_tag :all %>
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>
</head>
<body>
<div id="wrapper">
<div id="top_nav">
<h1><%= image_tag("rails.png", :size => '50x50') %> Rails Boards</h1>
<% if current_user %>
<%= link_to "Edit Profile", edit_user_path(current_user.id)%> |
<%= link_to "Logout", :logout%>
<% else %>
<%= link_to "Register", new_user_path%> |
<%= link_to "Login", :login %>
<% end %>
<div class="bclear"></div>
</div>
<div id="content">
<%= yield %>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Create a new file in public/stylesheets called style.css and copy this style sheet, http://gist.github.com/627780
.
At localhost:3000 you should be greeted by a much friendlier page:
If you haven’t created a board yet, feel free to create one now using the “Create Board” Link at the bottom of the page. You can put in you own ID if you want, if you leave it blank rails will auto increment the id.
Lets fix up that homepage a bit and make it look slightly more professional. Open up views/boards/index.html, and change it to look like this:
<h1 id="page_title">Message Boards</h1>
<p id="notice"><%= notice %></p>
<table>
<tr>
<th align="left">Title</th>
</tr>
<% @boards.each do |board| %>
<tr>
<td><%= link_to board.title, board %></td>
</tr>
<% end %>
</table>
Now that our landing page looks decent, lets see what happens when we view our message board:
Not what anybody envisions a messageboard to be looking like, lets make some quick cosmetic changes before moving into the controller. Open up app/views/boards/show.html.erb and make it the following changes:
<h1 id="page_title"><%= @board.title %></h1>
<p id="notice"><%= notice %></p>
<%= link_to 'Rails Boards', boards_path %> > <%= link_to @board.title, @board %> <br />
<%= link_to 'Post New Message', new_board_conversation_url(@board) %>
As you can see here we added a “Post New Message” link, the url function did not come out of thin air, if you run rake routes again. You’ll see there is a path named “new_board_conversation”, you can use any of those as a url by appending _url or _path to them.
If you click on the link to post new message you’ll get “No Routes Matches” error. We’ll fix that in a minute, but first lets make some adjustments to our conversation controller, open up app/controllers/conversation.rb and make the follow changes:
class ConversationsController < ApplicationController
before_filter :load_board
# GET /conversations
# GET /conversations.xml
def index
@conversations = Conversation.all
respond_to do |format|
format.html # index.html.erb
format.xml { render :xml => @conversations }
end
end
# CODE REMOVED FOR CLARITY SAKE
private
def load_board
if Board.exists?(params[:board_id])
@board = Board.find(params[:board_id]);
end
unless @board
redirect_to(boards_path, :notice =>"Please specify a valid board")
end
end
end
We added a private function that tries to load a Board off a passed in parameter. This function will be called on any page that goes through this controller.
Modify AuthLogic
If you have tried to login you may have noticed that we skipped a step. The login, logout, and register functions are not exactly tied to our application. To fix this we need to correct links in the views and redirect the controllers. While we’re doing this it will be a good time to remove functions that the app won’t be using. Open up app/controllers/users_controller.rb and edit it to look like so:
class UsersController < ApplicationController
# GET /users/1
def show
@user = User.find(params[:id])
end
# GET /users/new
def new
@user = User.new
if current_user
redirect_to(homepage_url, :notice => 'Already registered')
end
end
# GET /users/1/edit
def edit
is_user
end
# POST /users
# POST /users.xml
def create
@user = User.new(params[:user])
@user_session = UserSession.new(params[:user])
respond_to do |format|
if @user.save && @user_session.save
format.html { redirect_to(homepage_url, :notice => 'Registration successfull.') }
else
format.html { render :action => "new" }
end
end
end
# PUT /users/1
def update
is_user
respond_to do |format|
if @user.update_attributes(params[:user])
format.html { redirect_to(@user, :notice => 'User was successfully updated.') }
else
format.html { render :action => "edit" }
end
end
end
private
def is_user
if User.exists?(params[:id])
@user = User.find(params[:id]);
if !current_user || current_user.id != @user.id
redirect_to(homepage_url, :notice =>"You do not have access to that page")
end
else
redirect_to(homepage_url, :notice =>"You do not have access to that page")
end
end
end
In this controller we added a function is_user. This function determines if the user is logged in and they are the correct user to be viewing specific pages. We also changed redirect urls to the site homepage and removed a lot of unused code. Now lets update our User View: We’ll have to change the links on all the pages as well as display less confidential information on the Profile page.
<h1 id="page_title">Edit Your Profile</h1>
<%= render 'form' %>
<%= link_to 'Show', @user %> |
<%= link_to 'Back', homepage_url %>
<h1 id="page_title">Registration</h1>
<%= render 'form' %>
<%= link_to 'Back', homepage_url %>
<h1 id="page_title"><%= @user.username %>'s Profile</h1>
<p id="notice"><%= notice %></p>
<p>
<b>Username:</b>
<%= @user.username %>
</p>
<p>
<b>Email:</b>
<%= @user.email %>
</p>
<%= link_to 'Rails Boards', homepage_url %>
Now we just have to fix the Login view and the login/logout controller. These files need to have some cosmetic changes and fix issues with redirects open up app/views/user_sessions/new.html.erb and app/controllers/user_sessions_controller.rb and edit them to look like the following:
<h1 id="page_title">Login</h1>
<%= render 'form' %>
<%= link_to 'Back', homepage_url %>
class UserSessionsController < ApplicationController
# GET /user_sessions/new
def new
@user_session = UserSession.new
end
# POST /user_sessions
def create
@user_session = UserSession.new(params[:user_session])
if @user_session.save
redirect_to(homepage_url, :notice => 'Login Successful')
else
render :action => "new"
end
end
# DELETE /user_sessions/1
def destroy
@user_session = UserSession.find
@user_session.destroy
redirect_to(homepage_url, :notice => 'Goodbye!')
end
end
Now we just changed all the automatic form rerouting to point to our default homepage, added some basic styling, and changed the links in the site to point to more logical places. Lets create some content
Creating a New Post
There are four parts to our new posts: author, board, title, body. Author will be determined by the user_session, board will be determine through the URL, what our form needs to get from the user is title and body. We must modify the Conversation controller to create a Comment object which we can use in the view.
Open up app/controllers/conversation.rb and modify create and new functions to look like this:
# GET /conversations/new
def new
@conversation = Conversation.new
@comment = @conversation.comments.build
respond_to do |format|
format.html # new.html.erb
end
end
# POST /conversations
def create
@conversation = Conversation.new(params[:conversation])
@comment = @conversation.comments.build(params[:comment])
@conversation.user_id = @comment.user_id = current_user.id
@conversation.board = @board
respond_to do |format|
if current_user && @conversation.save
format.html { redirect_to(board_path(@board), :notice => 'Your Post was created') }
else
format.html { render :action => "new" }
end
end
end
The build function was automatically created when we used has_many :comments in the model, it creates an unsaved object using default values. In the create function we’ve added the board and author variable assignment, we also check to see if the user is logged in before we save.
if current_user && @conversation.save
We create @comment in both places for simplicity. Both of these function use the same view, create if there is an error and new by default, thus we need the same variables in scope. In the create function we pass in params[:comment] to build, this will build a Comment object with any data passed in the comment parameter.
Now lets setup our views, change app/views/conversations/index.html.erb, app/views/conversations/_form.html.erb to look like this:
<%= form_for(@conversation, :url => board_conversations_path) do |f| %>
<% if @conversation.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(@conversation.errors.count, "error") %> prohibited this conversation from being saved:</h2>
<ul>
<% @conversation.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :title %><br />
<%= f.text_field :title %>
</div>
<%= fields_for(@comment) do |cf|%>
<div class="field">
<%= cf.label :body %><br />
<%= cf.text_area(:body, :size => "60x10")%>
</div>
<% end %>
<div class="actions">
<%= f.submit :as => "Create Post"%>
</div>
<% end %>
<h1 id="page_title">New conversation</h1>
<%= link_to @board.title, @board %>
<%= render 'form' %>
<%= link_to @board.title, @board %>
The changes to new.html.erb are fairy straight forward. We added an id to the h1 tag, and changed the link to display the name of the current table and link to the current table. We modified_form.html.erb pretty heavily, we removed alot of the input fields that will be assigned in the controller. We also modified the error printing at the top to include any errors from @comment. fields_for works like form_for but does not create a new form tag. This allows us to create fields that are related to other objects.
Lets create our first post. When you’re done it should look something like this:
[img new_post.jpg]
Viewing Our Post
You may be wondering where your posts are? Clearly they’re in the database but they’re not showing up in our view. Lets fix that, open up app/views/boards/show.html.erb
<h1 id="page_title"><%= @board.title %></h1>
<p id="notice"><%= notice %></p>
<%= link_to 'Rails Boards', boards_path %> > <%= link_to @board.title, @board %> <br />
<table>
<tr>
<th>Post / Author</th>
<th>Last Reply</th>
<th>Number of Replies</th>
</tr>
<% @board.conversations.each do |conversation| %>
<tr>
<td>
<%= link_to conversation.title, board_conversation_path(:board_id => @board, :id => conversation) %><br />
<%= conversation.user.username %>
</td>
<td>
<%= conversation.comments.find(:last).created_at %><br />
by <%= conversation.comments.find(:last).user.username %>
</td>
<td>
<%= conversation.comments.count - 1%>
</td>
</tr>
<% end %>
</table>
<%= link_to 'Post New Message', new_board_conversation_url(@board) %>
We display all the conversations in that board along with some basic meta data. Most of this code is rather straight forward, the link to uses one of the routes that can be easily found using $ rake routes . We use the find function which was also provided when we used has_many. We subtract one for the number of replies so that we do not count the post it self. But all in all this view is as straight forward as they come.
Now lets work on the message view itself. Open up app/views/conversation/show.html.erb and edit to look like this:
<%= link_to @conversation.board.title, @conversation.board%>
<p id="notice"><%= notice %></p>
<table>
<tr>
<th colspan="2"><%= @conversation.title %></th>
</tr>
<% @conversation.comments.each do |comment| %>
<tr>
<td style="width:25%;">
<%= link_to comment.user.username, comment.user %> <br />
Posted At <br />
<%= comment.created_at%>
</td>
<td>
<p><%=comment.body%></p>
</td>
</tr>
<% end %>
</table>
<%= link_to 'Reply', reply_board_conversation_url(:board_id=>@board, :id=>@conversation)%> |
<%= link_to @conversation.board.title, @conversation.board%>
Once again nothing to exciting happening here, the more astute of you may have realized we created a url function that we don’t currently have mapped. Lets create that route, add
get '/boards/:board_id/conversations/:id/reply' => "conversations#reply", :as => :reply_board_conversation
post '/boards/:board_id/conversations/:id/reply' => "conversations#save_reply", :as => :reply_board_conversation
This will create two different url matches, one for GET requests and one for POST, one when the page is called and one when the form is submitted.
Lets got and create the reply and save_reply functions in the conversation controller, they should look fairly similar to the new and create functions, or like these:
# GET /conversations/reply
def reply
@conversation = Conversation.find(params[:id])
@comment = @conversation.comments.build
respond_to do |format|
format.html #reply.html.erb
end
end
# POST /conversations/reply
def save_reply
if !current_user
redirect_to(:login, :notice =>"Please login before posting")
return 1;
end
if Conversation.exists?(params[:id])
@conversation = Conversation.find(params[:id])
@comment = @conversation.comments.build(params[:comment])
@comment.user_id = current_user.id
else
redirect_to(boards_path, :notice =>"Please specify a valid board")
end
respond_to do |format|
if current_user && @comment.save
format.html { redirect_to(board_path(@board), :notice => 'Your reply was posted') }
else
format.html { render :action => "new" }
end
end
end
Once again here nothing is too revolutionary. reply handles the page load. It creates a @conversation and @comment for use in the view to generate forms. The @conversation is loaded from the url, as is a @board. @comment is empty. save_reply handles POST requests, so form submissions. It verifies that the user is logged in and that the parent conversation exists. It then creates the comment from the conversation, assigns the user, and assigns the values passed in from the form. It saves the data and redirects the user to the board overview with a friendly reminder.
Reply function uses reply.html.erb as it’s view, since that hasn’t been created yet lets do that now. Create another file as well _reply_form.html.erb. They should look like this:
<%= form_for(@comment, :url => reply_board_conversation_url(:board_id=>@board, :id=>@conversation)) do |f| %>
<% if @comment.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(@comment.errors.count, "error") %> prohibited this reply from being saved:</h2>
<ul>
<% @comment.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :body %><br />
<%= f.text_area(:body, :size => "60x10")%>
</div>
<div class="actions">
<%= f.submit(:value => "Create Reply")%>
</div>
<% end %>
<h1 id="page_title">Reply To <%= @conversation.title %></h1>
<%= link_to @board.title, @board %>
<%= render 'reply_form' %>
<%= link_to @board.title, @board %>
There is nothing we haven’t seen before in these files by themselves. Reply.html.erb includes _reply_form.html.erb you can tell this by the render statement, ‘reply_form’ is prepended with ‘_’ so you know it’s not a controller view. _reply_form.html.erb uses the same action as we saw to generate the url to this page, and only has a text area input field.
Feel free to try it now out now. The complete forum/message board should be working. If you have any questions feel free to leave a comment or view the working code base on my GitHub For Rails boards
