Live. Learn. Love.

Shan's Scratch Pad.

March 15, 2013 at 6:01pm

Creating a Rails App from Scratch : Part 1

It was a couple of weekends back that i decided to finally make a web-app for my lab. The aim was to build a simple web-app which listed all the electronic components we used and also kept track of what we had in stock and what we didn’t. 

Knowing the destination i decided to sit down on a saturday night and code it up up through till Monday. So, since i graduate in about 80 days i decided to give back a simple good looking ‘easily editable’ web-app rather than a sucked-up HTML page. This is what i ultimately ended up making. (patience, free heroku accounts are slow). Here is how i did what i did, 

Front-end - Twitter Bootstrap 

Nothing can beat the ease with which this gets you into business. And all this at with that sexy-cum-clean look. Best for throwing in stuff for prototypes and quickies.

Back-end - Rails (yeah the Ruby one)

I did go over all the Ruby and Rails structure over my last winter vacations. Reason - Inquisitiveness. It was just that there was so much talk about it. I just had to get my hands dirty and find out what the mess was about. Post End Semesters and my Graduate Applications i had plenty of time on me, so i decided to learn a few tricks of the trade.

Rails works on a MVC (Model-View-Controller) Architecture. You’ll need to understand what goes into each folder and how databases, models and attributes are set and everything. Best to go look up some full tutorial on this. I will be making use of the Postgresql database as it most conveniently puts up with heroku

Step 1. 

Coding the front end was pretty straight forward. I made two html pages, one, the initial landing page for the app which showed the purpose and the frameworks used, second the main web app page where simple Ruby is embedded into the page (Search erb ruby). Here is the code for both.

Landing Page

Main Page

Don’t worry about the <html>, <head> and other tags, they along with the necessary javascript files are added to these files. Look up <rails-project-directory>/app/views/layouts/application.html.erb, <rails-project-directory>/app/assets/javascritps/application.js <rails-project-directory>/app/assets/stylesheets/application.css. (After you’ve created your rails project)

Its important that you read the basic rails app structure and download the twitter bootstrap files to the necessary locations before you attempt to get these pages running. Look up the stylesheets and javascript directories again, you’ll know what i am talking about. 

Don’t worry about the <% and <%= . <% %> is used to embed ruby code. <%= %> signifies that the code embedded should output something on to the html page. 

Now onto Rails, 

Create your Rails app with

rails new partlister —skip-bundle —database=postgresql

Install the Postgresql prerequisites and make sure you create three different databases for each the Development, Testing and Production stage. Here is how i create them, 

su postrges #Switch to postgres account


create DATABASE partlister_development;

create DATABASE partlister_testing;

create DATABASE partlister_production;

ALTER DATABASE partlister_development OWNER TO cuil; #For changing the owner. 

ALTER DATABASE partlister_testing OWNER TO cuil; #For changing the owner. 

ALTER DATABASE partlister_production OWNER TO cuil; #For changing the owner. 

\q #Quit 

After making these databases, edit you database.yml file inside the <rails-project-directory>/config/ location. Also remove your index.html page from the <rails-project-directory>/public location. 

Everything else (Models, Controllers) and more(Heroku deployment, Rake, Rails Admin) in the next tutorials.


  1. shanjitsingh posted this