Noupe » Ruby

A Simple Twitter App with Ruby on Rails – Building Friendships

Editorial — Thu, 13 Aug 2009 01:41:05 +0000

Introduction

This is the third and final part of series on how to create a twitter style web application with Ruby on Rails. This part will cover how to add friendships between users.

The first part of this tutorial: A Simple Twitter App with Ruby on Rails – Messages With Ajax
The second part of this tutorial: A Simple Twitter App with Ruby on Rails – User Authentication

Self-Referential Relationship

To create friendships between users we have to deal with a special type of association, which is called a self referential relationship. It is called this because the model (in this case, User) references itself. Why? Well if a given “user” has many “friends”, those “friends” are also “users”. Furthermore, each of those friends can also have friends, so we are dealing with a many to many relationship.

The relationship can affectively be called a “friendship” because friendships can be gained and lost (as in real life). So, let’s create the friendship model with two foreign keys.


  > ruby script/generate model friendship user_id:integer friend_id:integer

Now, migrate the database:-

  > rake db:migrate

Making and Losing Friends

We will need to create and destroy friendships and for this we will need a controller for friendships:-

  > ruby script/generate controller friendships

Now add the create and destroy methods as shown below:-

class FriendshipsController < ApplicationController
  def create
    @friendship = current_user.friendships.build(:friend_id => params[:friend_id])
    if @friendship.save
      flash[:notice] = "Added friend."
      redirect_to root_url
    else
      flash[:error] = "Error occurred when adding friend."
      redirect_to root_url
    end
  end

  def destroy
    @friendship = current_user.friendships.find(params[:id])
    @friendship.destroy
    flash[:notice] = "Successfully destroyed friendship."
    redirect_to root_url
  end
end

So, what exactly do we relate the user model to?? Well, first we need to specify that the friendship model belongs to a friend (which is actually a user!). You can do this by adding some more lines to the user model:-

class Friendship < ActiveRecord::Base
  ...
  belongs_to :friend, :class_name => "User"
end

We need to add two lines to the User model. A User has many friendships and has many friends through friendships. This reads almost exactly as it is coded, which is a testament to Ruby on Rails.

class User < ActiveRecord::Base
  has_many :friendships
  has_many :friends, :through => :friendships
  ...
end

Listing your Friends

If we want to list all the registered users and allow the current user to befriend other users, then we will need to create a new view in the users folder called index.html.erb:-


  < % @users.each do |user| %>

      < % if user.username != current_user.username %>
        < %=h user.username %>
        < %= link_to "Add Friend", friendships_path(:friend_id => user), :method => :post %>
      < % end %>
    

  < % end %>

Now, let’s put the controller actions in place. Open the users_controller file and add the index and show methods.

class UsersController < ApplicationController
  def index
    @users = User.all
  end

  def show
    @user = current_user
  end
  ...
end

We need to do two more things before we can give this a whirl. First add the friendships resource to the routes file:-

map.resources :friendships

…and finally, we can add some links on the posts/index.html.erb file:-

...

< %= link_to "Make Friends", users_path %>

< %= link_to "My Friends", { :controller => "users", :action => "show", :id => current_user } %>

Ok, we can now start up the server and browse to http://localhost:3000 to have a look.

Summary

Obviously there are several directions you could take this application. A lot of features could be added and it could be spruced up, somewhat. I hope these tutorials have helped you in some way and again, I would highly recommend that you try Ruby on Rails, if you haven’t already.

Author: Phil McClure

Phil McClure is a Software Developer from Belfast, Northern Ireland. His main interests are software architecture, design patterns and how these can be applied to web development. Phil blogs at Therailworld. Follow him on Twitter.

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

A Simple Twitter App with Ruby on Rails – User Authentication

Editorial — Thu, 16 Jul 2009 02:58:35 +0000

This article is the second part in a three part series. In the first part we created some basic functionality to allow the user to post messages in a similar way to Twitter. If you have not completed the first part of this tutorial, please do so now.

In this instalment, we will learn how to add some basic user authentication using a useful plugin called nifty_generators. So lets get started!

The first part of this tutorial: A Simple Twitter App with Ruby on Rails – Messages With Ajax
The third part of this tutorial: A Simple Twitter App with Ruby on Rails – Building Friendships

Get the Gem!

The nifty_generators gem was created by Ryan Bates, better known for his great RailsCast tutorials. It provides a useful generator for setting up user authentication in a few simple steps.

It’s worth noting that there are other tools for integrating authentication, for instance technoweenie’s Restful Authentication is very good. However, to keep things simple, we will stick with nifty_generators.

At a command prompt key the following command:-

  > gem install nifty-generators

Generating the Authentication

Now, make sure your current directory is set to the project folder of your Rails project and run the following commands:-

  > ruby script/generate nifty_authentication
  > ruby script/generate nifty_layout

The first command creates the relevant files for achieving authentication. The second command creates, among other things, a helper file which is required for some of the authentication view files to function correctly.

Don’t forget to migrate your database!

  > rake db:migrate

Making use of the Authentication Module

Ok, so we now have the functionality, which is required for authenticating users, it’s just a matter of using it. First, we will create a partial allowing the user to sign up or login.

Create a file called “_login.html.erb” in the views/users folder and add the following code:

< % if logged_in? %>
  Welcome < %= current_user.username %>! Not you?
  < %= link_to "Log out", logout_path %>
< % else %>
  < %= link_to "Sign up", signup_path %> or
  < %= link_to "log in", login_path %>.

< % end %>

We will simply render the login partial in the “posts.html.erb” layout file (to keep things simple). This file is located in the views/layouts folder. Edit the file to include the “render” method call, as shown below.

.
.

  
    <%= render :partial => "users/login" %>

    <%= yield %>
  

.
.

Further to this, we only want users to be able to post messages if they are logged in so change the “_message_form.html.erb” file, in the views/posts folder, to have the following condition:

<% if logged_in? %>

  <% form_remote_tag(:controller => "posts", :action => "create") do %>
    <%= label_tag(:message, "What are you doing?") %>

    <%= text_area_tag(:message, nil, :size => "60x2") %>

    <%= submit_tag("Update") %>

  <% end %>
<% end %>

Let’s Give it a Go!

Fire up the server.

  > ruby script/server

On the home page we now have “Sign up” and “Login” links.

You’ll also notice that you cannot post a message until you have a user account. So you will need to sign up first

Then you can login…

Once you have logged in, you will be able to post messages again.

View Demo of Twitter App with Ruby on Rails

Summary

In this tutorial, you have leanrt how to integrate authentication into your applications and how to make use of it. In the third and final part of this series you will learn how to add functionality, which allows users to follow other users.

Author: Phil McClure

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

A Simple Twitter App with Ruby on Rails – Messages With Ajax

Editorial — Wed, 24 Jun 2009 01:01:11 +0000

Ruby on Rails is a web application framework that promotes rapid development. Clients’ demands are ever increasing yet they still expect the same quality of output.

Frameworks, like Rails, help to achieve this; why?… here are some of the reasons:

The second part of this tutorial: A Simple Twitter App with Ruby on Rails – User Authentication
The third part of this tutorial: A Simple Twitter App with Ruby on Rails – Building Friendships

Convention over Configuration (CoC):

This is used to reduce the amount of up-front configuartion. The idea is; if you abide by certain coding conventions, you will have little, to none, configuration to do.
Object-Relational Mapping (ORM):

ORM reducing coupling to the database. This abstraction allows you changed the DBMS provider with little trouble.
Structured Code:

The MVC pattern forces you to organise your code in a clean, structured way. This results in more maintainable code.
Plugins:

Plugins save you from re-inventing the wheel every time you want to add functionality to your app. For instance, making you web app capable of performing searches can be easily added with the acts_as_ferret plugin. There are many more plugins!

Who is this Tutorial for?

This tutorial is for people who have learnt the basics of Rails and want to take things to the next level. This tutorial is not a beginners guide for getting started with Rails. If you are just starting out with Rails I suggest this article from Six Revisions.

What this Tutorial Covers

In the first part of this three part series, we cover setting up a simple message model, which will hold the messages posted. Further to this, we will learn how to post a message asynchronously, using AJAX.

View Demo of Twitter App with Ruby on Rails

Basic Application Design

Ok, so you’ve decided to create a “twitter” style micro-blog using Ruby on Rails. First, we need to think about our basic requirements and from this we can model our application.

There are many ways that this can be done, but we will use a simple technique in which you jot down a few paragraphs about how and what the application is expected to do then highlight the nouns. So, lets try it.

My web app should work in a similar way to twitter. Users should be able to register with the site and create short posts. Users should be able to follow other users. Each user should be able to see their own posts plus the users they are following.

Note that I’ve been selective in what nouns I’ve highlighted. You only really need to take notice of the nouns which you feel will need to store data to the database.

I know there is more to twitter than this, but lets leave it simple. As you can see the “nouns”, which will need to store data to the database are “posts” and “users”. So we require two models:

In the first part of the tutorial, we are going to deal with posts only.

Post
User

Creating the Project Files

Before we do anything we need to create a project for our twitter web app.

  > rails twitter -d mysql

As you can see, I will be using MySQL as the DBMS, however, feel free to use whatever database you want.

Open the database.yml file in the config folder and modify the password as required. An example is shown below.

development:
  adapter: mysql
  encoding: utf8
  database: twittest_development
  pool: 5
  username: root
  password: yourpassword
  host: localhost

Now, create the database with the “rake” command.

  > rake db:create

Implementing the basic Message Model

So let’s go right ahead and generate the “Post” model and migrate it.

  > ruby script/generate model post message:text
  > rake db:migrate

Controller

Now, let’s create a controller for the post model.

  > ruby script/generate controller posts

We need to set up some methods for interacting with the model. Edit your “posts_controller.rb” file and add the following methods:

class PostsController < ApplicationController
  def index
    @posts = Post.all(:order => "created_at DESC")
    respond_to do |format|
      format.html
    end
  end

  def create
    @post = Post.create(:message => params[:message])
    respond_to do |format|
      if @post.save
        format.html { redirect_to posts_path }
      else
        flash[:notice] = "Message failed to save."
        format.html { redirect_to posts_path }
      end
    end
  end
end

We only need two methods, “index” and “create”. The index method creates an instance variable containing all the posts in descending order. The create method is used to create a new post.

Views

Let’s create the “index” view. First, we’ll create a partial for posts. Create a file called “_post.html.erb” in the views/posts folder and add the code below.

Posted <%= time_ago_in_words(post.created_at) %> ago
<%= post.message %>

The index view is now very simple. Create a file called “index.html.erb” in the views/posts folder and add the code below.

<%= render :partial => @posts %>

Create some Posts

Open a console session and create a few new messages, as shown below.

  > ruby script/console
  Loading development environment (Rails 2.3.2)
  >> Post.create!(:message => "My first post" )
  >> Post.create!(:message => "Post number two!" )

Create a Form for Posts

Obviously you’re not going to get the user to use the console to create messages. So, our next task is to inject some functionality into our web app to allow the user to create messages. Twitter has an input box above the indexed messages, which is used for submitting a new message; We will keep our web app the same.

First, we will create a partial for the form, then we will render that partial at the top of the index view. Create a file called “_message_form.html.erb” in the posts view folder and add the following code:

<% form_tag(:controller => "posts", :action => "create") do %>
  <%= label_tag(:message, "What are you doing?") %>

  <%= text_area_tag(:message, nil, :size => "44x6") %>

  <%= submit_tag("Update") %>
<% end %>

Now, we need to modify the index view to render this partial at the top. Open the index.html.erb file and modify the code as follows:

< %= render :partial => "message_form" %>
< %= render :partial => @posts %>

For this to work we need to make one last modification. Open the route.rb file and map a new “posts” resource, as shown below. (Note: the comments from this file have been removed).

ActionController::Routing::Routes.draw do |map|
  map.resources :posts
  map.connect ':controller/:action/:id'
  map.connect ':controller/:action/:id.:format'
end

This creates a few named routes. If you look back to the “create” method in the posts controller, you’ll see that we make use of the posts_path named route; Defining the posts resource makes this named route available.

So, lets fire up the web server and a see how things look.

  > ruby script/server

Now open a browser and go to http://localhost:3000/posts. You should see a screen, as shown below.

Adding some AJAX

AJAX allows you to make asynchronous requests to the server using JavaScript. We will make use of AJAX to make the posting a message a bit smoother.

When the user clicks on the “Update” button, we want the message to update without refreshing the browser. We have a few things to do to add AJAX functionality. First, lets change the “create” method in the posts controller:

  def create
    @post = Post.create(:message => params[:message])
    respond_to do |format|
      if @post.save
        format.html { redirect_to posts_path }
        format.js
      else
        flash[:notice] = "Message failed to save."
        format.html { redirect_to posts_path }
      end
    end
  end

The only change here is the “format.js” code, allowing the create method to respond to JavaScript. Next, we need to create a posts layout file. In the views/layout folder create a file called “posts.html.erb” and add the following code:




  <%= javascript_include_tag :all %>


  
    <%= yield %>

The main purpose of this is to make use of the “javascript_include_tag” call, which includes the relevant JavaScript files for AJAX and some visual effects. Next, we need to make a small addition to the index view (“index.html.erb”).

<%= render :partial => "message_form" %>

  <%= render :partial => @posts %>

As you can see all we have added is a div block surrounding the posts partial. This will be used later when we are specifying where the AJAX response should be placed. Nearly there! Now we will add a div_for block to our post partial (“_post.html.erb”).

<% div_for post do %>
  Posted <%= time_ago_in_words(post.created_at) %> ago
  <%= post.message %>
<% end %>

Edit the “_message_form.html.erb” partial and change the form_tag call to form_remote_tag as show in the code extract below:

<% form_remote_tag(:controller => "posts", :action => "create") do %>

The div_for operation create a div block with a unique id, this is especially useful when looping through several records. Finally, we need to create the rjs template. To do this, create a file called “create.js.rjs” in the views/posts folder and add the following code.

page.insert_html :top, :posts, :partial => @post
page[@post].visual_effect :highlight

The first line specifies that a new post partial will be rendered at the top of the posts div when the asynchronous call responds. The second line specifies that a “highlight” visual effect will be applied to that block when it is rendered.

That’s it! Start you web server again, browse to http://localhost:3000/posts and give it a go.

Make it Look Pretty!

I’ve created a stylesheet, which we can use to make things look a bit more respectful. Create a file called layout.css in the public/stylesheets folder then add the following CSS code:

body
{
  font-family: tahoma, sans-serif;
  font-size: 18px;
  background-color: #4B7399;
  width: 100%;
  color: #ffffff;
  margin: 0;
  text-align: center;
}

#content
{
  width: 800px;
  margin: 0 auto;
  text-align: left;
}

.post
{
  padding: 5px 20px 5px 20px;
  background-color: #ffffff;
  margin: 20px 0 20px 0;
  color: #000000;
}

Finally, you will need to add stylesheet_link_tag call to the posts.html.erb layout file. As per below, the call should be placed in the head tag.


  <%= javascript_include_tag :all %>
  <%= stylesheet_link_tag 'layout' %>

OK! It doesn’t look that pretty, but it will do for our purposes.

Setting up a Home Page

To have the root URL (http://localhost:3000) direct the user towards your posts you will first need to delete the public/index.html file. Do this now.

The second thing you need to do is set up a route in your config\routes.rb file. Open routes.rb in notepad and add a new line to the end using map.root, as shown below.

ActionController::Routing::Routes.draw do |map|
  map.resources :posts
  map.connect ':controller/:action/:id'
  map.connect ':controller/:action/:id.:format'
  map.root :controller => "posts"
end

For more on routes, try the Rails API Documentation

Now if you browse to http://localhost:3000. The request will be routed to the posts controller.

Summary

This concludes the first part of the series. Depending on the popularity of this article, parts 2 and 3 will follow shortly.

What have we Learnt?

You’ve learnt how to carry out basic application design and how to use this design to work out what models are required. Further to this, you’ve learnt how to use the console to help with the development of your application. Finally, you used AJAX to perform asynchronous requests to the server.

Author: Phil McClure

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.