Creating a simple Ruby on Rails application using Devise

If you have heard about rails and not yet experienced the power or features that , only rails can give !  this tutorial will help you to create a Simple Ruby on Rails application without worrying too much about the syntax or working of Ruby on Rails.

Here in this tutorial we will create a database backed simple Rails community website application, so that all members can register and sign-in to the website.

About Rails :

Rails is a web development frame work written in ruby language,which has a general MVC     ( Model, View, Controller ) architecture.Using a Rails framework will make everything effortless for the developers,who wants to build a powerful/fast application with a less set of code and rails will also help them to achieve more than any other framework can provide.

About Devise :

Simply Devise is a flexible authentication solution for Rails based on Warden. It:

• Is Rack based.
• Is a complete MVC solution based on Rails engines.
• Allows you to have multiple roles (or models/scopes) signed in at the same time.
• Is based on a modularity concept: use just what you really need.

Lets start coding:

We are going to create a simple rails community website with the help of devise,Before wr entering to our application you should have to gone through the basics of devise.please refer the following link if you want to learn more about devise and rails.

• http://railsforzombies.org/ (one of the best tutorial session for Rails beginners )
• https://github.com/plataformatec/devise
• http://guides.rubyonrails.org/
• http://railscasts.com/episodes/310-getting-started-with-rails

Installation :

I am using ubuntu 11.04, if you are using ubuntu you can follow the below link to install rails in your system.You can also install rails in windows or mac as well.

•  http://stuffingabout.blogspot.com/2011/04/installing-rails-3-on-ubuntu-1104.html

Creating your application :

Once you have installed every dependencies,you can start creating your first application in rails.

Use “rails new” command to create your application in rails,here we are going to create an application named rails-club.rails

$ rails new rails-club

$ cd rails-club

once you run the above command in your system, you can see that rails has generated so many files and folders inside your rails-club directory.

Editing the Gemfile :

We are going to create this application by using a devise, i have already told you that this is a database backed application.If you are using mysql as your database system then you have to edit your ‘Gemfile’ inside your rails-club directory and add the following line to your ‘Gemfile’.

$ gem 'mysql2', '0.3.6'

Once you have edited the Gemfile,please go through the files and directories the rails has generated,there is file called “database.yml “ in your “config” directory.Change the adapter to mysql2,and then specify your database,username and password . My “database.yml” file contains the following data.

Filepath : config/database.yml

development:
adapter: mysql2
encoding: utf8
reconnect: false
database: mydb
pool: 5
username: root
password: asdfgh

production:
adapter: mysql2
encoding: utf8
reconnect: false
database: mydb
pool: 5
username: root
password: asdfgh
socket: /var/run/mysqld/mysqld.sock

test:
adapter: mysql2
encoding: utf8
reconnect: false
database: mydb_testing
pool: 5
username: root
password: asdfgh
socket: /var/run/mysqld/mysqld.sock

Once you have done all the changes then run the “bundle install” command. This command tells “bundler”, a library used by Rails, to fetch and install all the libraries it needs.

$ bundle install

Installing Devise :

You can use the latest Rails 3 gem with the latest Devise gem, to install the Devise run the following command.

$ gem install devise

After you have installed Devise, you should have to specify the Devise gem to your Gemfile.

$ gem 'devise'

After that you need to run the generator by using the command below.

$ rails generate devise:install

The generator will install an initializer which describes ALL Devise’s configuration options and you MUST take a look at it. When you are done, you are ready to add Devise to any of your models using the generator.

Creating Models :

Here in this application we mainly needs 2 models,one is member model and the other one is contact model,the Member model should contain the member name, email, password, password confirmation etc.So now we are going to create our member model using devise.

$ rails generate devise member

This will create a model member and configure it with default Devise modules.And will also create some more files in your directory. The migration file will located in db/migrate/devise_create_members.rb.After that you should have to run db:migrate as the generator will have created a migration file.

$ rake db:migrate

== DeviseCreateMembers: migrating ============================================
-- create_table(:members)
-> 0.2575s
-- add_index(:members, :email, {:unique=>true})
-> 0.3146s
-- add_index(:members, :reset_password_token, {:unique=>true})
-> 0.4259s
== DeviseCreateMembers: migrated (0.9986s) ===================================

Once you run the db:migrate command,rails will create a table called members with the following field that the Devise specified in the migration file.Check the tables has created successfully.

Now we have successfully generated our model.Just run the server by typing “rails server”.

$ rails server

=> Booting WEBrick
=> Rails 3.1.3 application starting in development on http://0.0.0.0:3000
=> Call with -d to detach
=> Ctrl-C to shutdown server
[2012-01-01 16:40:49] INFO WEBrick 1.3.1
[2012-01-01 16:40:49] INFO ruby 1.9.2 (2011-07-09) [i686-linux]
[2012-01-01 16:40:49] INFO WEBrick::HTTPServer#start: pid=5268 port=3000

copy and past the address http://0.0.0.0:3000/ to your browser search bar,you can see the rails home page .then you also try the following one. The Devise’s magic is comes here.

http://0.0.0.0:3000/members/sign_up

http://0.0.0.0:3000/members/sign_in

Here you could see that devise has generated the sign-up and sign-in forms for you.

Here the sign-up form contains only 3 fields email,password & password confirmation,No we have to add the username to the sign-up form.

run the following command to add the username field to members migration.

rails generate migration add_username_to_members username:string

This command will generate another migration file in your “db/migrate” directory.

And then again you have to run the “db:migrate” command.Then only the field will add to the members table.

$ rake db:migrate

== AddUsernameTomembers: migrating =======================================
-- add_column(:members, :username, :string)
-> 0.3149s
== AddUsernameTomembers: migrated (0.3151s) ==============================

Now you check the members table,username field will be added to it.

Creating Views :

Once you have done this you have to generate the Devise views,then only we can edit the sign-up form and add the username field to the form.

$ rails generate devise:views

Once you run this command the devise will generate the whole view files for the members.check “app/views/devise” ,you could see the whole form structure for sign-in,sign-up,forgot password etc.

Then edit the form for sign-up and add the username field to it.Go to “app/views/devise/registration/new.html.erb” and then edit the form like given below.

<h2>Sign up</h2>

<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>

<div><%= f.label :username %><br />
<%= f.text_field :username %></div>

<div><%= f.label :email %><br />
<%= f.email_field :email %></div>

<div><%= f.label :password %><br />
<%= f.password_field :password %></div>

<div><%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation %></div>

<div><%= f.submit "Sign up" %></div>
<% end %>

<%= render :partial => "devise/shared/links" %>

Now check the sign-up form again you can see the username field in it.

Lets create our second model Contact.Here we doesn’t use devise generator ,in contact model we need only 2 fields, phone number, address.

$ rails generate model contact

Edit the migration file of contact and specify the 2 fields as shown below.

class CreateContacts < ActiveRecord::Migration
def up
create_table :contacts do |t|

t.string :mobile , :null => false, :default => “”
t.string :address , :null => false, :default => “”

end

end

def down
drop_table :contacts

end
end

After that run db:migrate command to create a table contacts in our database.

$ rake db:migrate

== CreateContacts: migrating =================================================

-- create_table(:contacts)
-> 0.2141s
== CreateContacts: migrated (0.2142s) ========================================

Creating Controller :

We haven’t created an home page yet,so now we are going to create a controller for that.

$ rails generate controller home

And then create a new index file for home controller like “app/views/home/index.html.erb” and then add the following .

<% if member_signed_in? %>

<h3>you have succesfully signed in</h3>
<%= link_to "Sign Out", destroy_member_session_path, :method => :delete %>

<% else %>

<h1> welcom to rails community</h1>
<%= link_to "Sign In", new_member_session_path, :method => :get %>
<%= link_to "Sign up", new_member_registration_path, :method => :get %>

<% end %>

Once you have done ,you have to remove the index page in public folder,and then you should have to reset the root path to “home#index” page.

app/config/routes.rb

add the line

root :to =>'home#index'

Now we have to override the devise controller ,then only we can call the objects from 2 models (contact,members),so now we are going to create a new controller called “registration”.

$ rails generate controller registration

Open the controller file in “app/controllers/registration_controller.rb”,and then edit the file as shown below.

Filepath : app/controllers/registration_controller.rb

class RegistrationController < Devise::RegistrationsController

def new

@member= Member.new
@contact = Contact.new
end

def create

@member = Member.new
@member.username = params[:member][:username]
@member.email = params[:member][:email]
@member.password = params[:member][:password]
@member.password_confirmation =params[:member][:password_confirmation]

@contact = Contact.new
@contact.mobile = params[:contact][:mobile]
@contact.address = params[:contact][:address]
@member.valid?
if @member.errors.blank?

@member.save
@contact.member = @member
@contact.save
redirect_to dashboard_path
else
render :action => "new"
end
end

end

Once you have done the above step,we are going to create a view for our registration controller, create file called “new.html.erb”,in your “app/views/registration/” directory and then add the following.

Filepath : app/views/registration/new.html.erb

<h2>Sign up</h2>

<%= form_tag(member_registration_path,:method => 'post') %>
<%= devise_error_messages! %>
<table>

<tr>
<td>Username : </td>
<td><%=text_field_tag "member[username]",@member.username %></td>
</tr>

<tr>
<td>Email : </td>
<td><%=email_field_tag "member[email]",@member.email %></td>
</tr>

<tr>
<td>Password : </td>
<td><%=password_field_tag "member[password]",@member.password %></td>
</tr>

<tr>
<td>Retype password : </td>
<td><%=password_field_tag "member[password_confirmation]",@member.password_confirmation %></td>
</tr>

<tr>
<td>Mobile : </td>
<td><%=text_field_tag "contact[mobile]" ,@contact.mobile %></td>
</tr>

<tr>
<td>Address : </td>
<td><%=text_area_tag "contact[address]" ,@contact.address ,:rows => 10, :cols => 25 %></td>
</tr>

<tr>
<td><%= submit_tag nil, :class => "form_submit"%></td>
</tr>
</table>
<br />
<%= render :partial => "devise/shared/links" %>

We have to mention the relationships between 2 models (member ,contact ).here the relationship will be as follows.

Filepath : app/models/member.rb

class Member < ActiveRecord::Base

devise :database_authenticatable, :registerable,
:recoverable, :rememberable, :trackable, :validatable

attr_accessible :email, :password, :password_confirmation, :remember_me, :username
has_one :contact
end

Filepath : app/models/contact.rb

class Contact < ActiveRecord::Base
belongs_to :member
end

Now refer the registration controller file in app/controllers/registration,here after completing the registration & the values that the member entered is stored in the table successfully ,i just redirected the member to the dashboard page.So we have to add that page to our home controller.

Filepath : app/views/home/dashboard.html.erb

<p>hi welcome to Ruby community. you have successfully registered to your rails club account</p>
<%= link_to "Sign out", destroy_member_session_path, :method => :delete %>

You have to specify this path in our routes.rb file

Filepath : app/config/routes.rb

devise_for :members,:controllers => { :registrations =>'registration'}
match 'dashboard' => 'home#dashboard'

Conclusion :

Finally  the application has almost done,so run the server and try our application in your machine whether everything working perfectly or not.This is just a skeleton of our application,we can add a lot more css to design our application to make everything looks perfect.

I hope that this tutorial will help you to start experiencing on Ruby on Rails application.If you facing any problems when you start trying out this application on your working environment,feel free to shoot your questions or suggestions. If you wants to get the fullcode of this application,please refer.

https://github.com/sreeharikmarar/simple-application-in-rails-using-devise

I have also uploaded this application in Heroku.Check out the following link.

http://railscommunity.herokuapp.com/