Building your first Ruby on Rails application from scratch!

Hello everybody! It’s been a couple of weeks since my last post here. I’ve been focused on ruby on rails, and didn’t have much free time.

Well, now I’m going to guide you to your first app with ruby on rails. Everybody who have started working with RoR knows that scaffold is a powerful tool. So I won’t explain how to use it, it’s simple and I guess you already know that!

I will try to build a very simple application from scratch, writing your own methods, creating separated models, controllers and views. Pretty simple, just easier to understand every step, that you kind of lose when using scaffold.

By the way, I’m using rails 3.0.4 and ruby 1.8.7. Installed exactly like here.

06

Ok, enough the talking and let’s code.
Starting by creating a new rails project.

1 $ rails new myfirstapp

And then going into its folder:

1 $ cd myfirstapp

We’re going to start by creating our model, and then our controller/view and then the view’s pages (.html.erb). If you are not familiar with MVC concepts, I hardly recommend you to read more about it, it’s not complicated and very important on ruby on rails.

I thought a lot about what kind of app I should build, since every single book you get they are teaching you how to create a blog in 15 minutes, I’m also going through this. But, instead of scaffold, it’s going to be from scratch and a little bit different.

At first, let’s create our model:

1 $ rails g model post title:string description:text 2 visible:boolean date:date

PS. rails g, where g is abbreviation for generate.

PS2. Here we have 4 different kind of fields, that’s why I said it’s going to be a little bit different.

As far as it’s everything right until here, let’s go to our controller and views.

1 $ rails g controller posts

PS. Controller always in plural.

We should go now to our view folder and create the web pages.

1 $ cd app/views/posts 2 $ touch new.html.erb 3 $ touch index.html.erb 4 $ touch edit.html.erb 5 $ touch show.html.erb

PS. I’m still not 100% familiar with the concept of partials, so I’ll have same code in different pages, but so far it’s not a big deal.

Before start coding, let’s make the migration, since I didn’t chose another database, I’m using sqlite by default.

1 $ rake db:migrate

Now you open your text editor, the one you feel more confortable with.

I’m using Ubuntu 10.10 and have installed gmate, so:

1 $ gmate .

Ok, until now we have everything already created.

Not following the same order, let’s start coding our controller, then the model and finally the views.

Just one step before the ruby code, let’s already put the correct route into /config/routes.rb file. Open that up and follow the code bellow.

1 root :to => "posts#index" 2 resources :posts

PS. Don’t forget to delete the /public/index.html file, that allows you to use the first line above.

Now the Rails magic! 1289462052_136894697_1-Ruby-on-Rails-Adyar

1. Open the /app/controllers/post_controller.rb

2. We need 6 actions here (action will be our methods)

– index

– new

– create

– edit

– update

– destroy

– show

Follow the code bellow.

1 def index 2 @posts = Post.all 3 end 4 5 def new 6 @post = Post.new 7 end 8 9 def create 10 @post = Post.new(params[:post]) 11 12 if @post.save 13 flash[:notice] = "Post created" 14 redirect_to posts_path 15 else 16 render :new 17 end 18 end 19 20 def edit 21 @post = Post.find(params[:id]) 22 end 23 24 def update 25 @post = Post.find(params[:id]) 26 27 if @post.update_attributes(params[:post]) 28 flash[:notice] = "Post updated" 29 redirect_to posts_path 30 else 31 flash[:notice] = "Ops, an error occurred" 32 redirect_to posts_path 33 end 34 end 35 36 def destroy 37 @post = Post.find(params[:id]) 38 39 if @post.destroy 40 flash[:notice] = "Post deleted" 41 redirect_to posts_path 42 else 43 flash[:notice] = "Ops, an error occurred" 44 redirect_to posts_path 45 end 46 end 47 48 def show 49 @post = Post.find(params[:id]) 50 end

Ok, we have now our controller set up! Going to the model, we will validate the data.

Open /app/models/post.rb and follow the code bellow:

1 validates :title, :presence => true 2 validates :text, :presence => true

PS. That should vallidate the title and the text, note that we are now using the rails 3 version of validation. It’s common to find the rails 2 version, which is "validates_presence_of :field".

Controller and model set up, let’s go to our views.

Getting started by the index view, open /app/views/posts/index.html.erb

1 <br/> 2 <p> 3 <b>List of posts</b> 4 </p> 5 <% @posts.each do |p| %> 6 <b><%= p.title %></b><br/> 7 <%= p.description.truncate(150) %><br/> 8 <% if p.visible? %> 9 <p>Visible: true</p> 10 <% else %> 11 <p>Visible: false</p> 12 <% end %> 13 <p> Date: <%= p.date %></p> 14 <%= link_to "Show", posts_path(p) %> 15 <%= link_to "Edit", edit_posts_path(p) %> 16 <%= link_to "Delete", p, :method => :destroy %> 17 <% end %>

Next, open /app/views/posts/new.html.erb

1 <%= form_for @post do |f| %> 2 3 <div class="field"> 4 <%= f.label :Visible %><br/> 5 <%= f.check_box :visible %> 6 </div> 7 8 <div class="field"> 9 <%= f.label :title %><br/> 10 <%= f.text_field :title %> 11 </div> 12 13 <div class="field"> 14 <%= f.label :text %><br /> 15 <%= f.text_area :text, :rows => 15, :cols => 50 %> 16 </div> 17 18 <div class="field"> 19 <%= f.label :date %><br /> 20 <%= f.date_select :date %> 21 </div> 22 23 <div class="actions"> 24 <%= submit_tag "Insert"%> 25 </div> 26 27 <% end %>

Next, open /app/views/posts/edit.html.erb

1 <% form_for @post do |a| %> 2 3 <p> 4 Visible: <br/> 5 <%= a.check_box :visible %> 6 </p> 7 8 <p> 9 Title: <br/> 10 <%= a.text_field :title %> 11 </p> 12 13 <p> 14 Date: <br/> 15 <%= a.text_area :text, :rows => 15, :cols => 50 %> 16 </p> 17 18 <p> 19 Date: <br/> 20 <%= a.date_select :date %> 21 </p> 22 23 <p> 24 <%= submit_tag "Save" %> 25 <% link_to "Back", posts_path %> 26 </p> 27 28 <% end %>

And finally open /app/views/posts/show.html.erb

1 <br/> 2 <p><b><%= @post.title %></b></p> 3 <p><%= @post.date %></p> 4 <p><%= @post.text %></p> 5 <%= link_to "Back", posts_path %>

Everything coded, let’s test our application.

1 $ rails server

Go to http://0.0.0.0:3000 and Hooray! Tired? Relax, it’s done for today!

Here a couple of printscreens showing how you application should look like.

aaaabbb

You can get the entire code here !

I’d like to thank two friends of mine, Igor Bozato and Jhimy F. Villar who are helping me a lot with ruby on rails. Thanks guys!

If you have anything to add, use the comment are bellow!

Thanks for all the attention!

Advertisements

4 comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s