Ruby on Rails is a popular web development framework, with a Model-View-Controller architecture. It's ‘convention over configuration’ philosophy enables quick web development and hence is popular among startups.
In this tutorial series, we are going to develop a movie rating website, a site which shows a list of movies and asks the user to rate movies for ranking. (a mini IMDB).
In this part, we get familiar with working mechanism of rails. We will also start with our project and build two simple pages –
1. Index page
2. About page
Ensure that you have rails installed on your system by running the following command :
If not, goto this tutorial to install rails on your system.
Step 1 : Create a new project
Fire up your terminal and run the following command
rails new moviemax
This command creates a new folder while automatically creating files and folders of a typical rails app. Now switch to this new directory by
Launch the rails server by executing the following command and go to http://localhost:3000 to check if everything is fine.
Views, Controllers and routing:
Before we proceed, let us understand what happens when a web browser makes request to a rails server.
Web Request: The user first inputs url on the web browser or clicks a link on a web page to generate a request to the server.
Router: The router receives the request, analyses the url and the http keywords (e.g. GET, POST) and calls the corresponding controller with the appropriate action.
Controller: Contains code on the server which contains the action requested by the url.
Action: A ruby method, called inside the controller, which performs server side actions and passes data to the view.
View: The code which is rendered to generate the HTML/CSS/JS elements displayed on the web browser.
Step 2: Create routes, controllers and views for index page and about us page
For creating controllers, actions and corresponding routes, rails has got some shortcut commands, called generators. Open terminal and go to the rails project directory and enter the following command:
rails generate controller Home index about
This will automatically generate some files and folders in the rails project.
Step 3 : Run server and open links in browser
In the above command, following important files are generated:
app/controllers/home_controller.rb: The ruby source which contains the actions as methods (index and about) of the controller, all in ruby.
app/views/home/index.html.erb: The view file for index action of home controller, it contains code in HTML + Ruby, thus embedded ruby HTML. Embedded ruby allows data from server (action/controller) to be transported to the views.
app/views/home/about.html.erb: The view file for about action of home controller.
config/routes.rb: This file is not created but modified to add routing information of the new controller and actions we just created.
This instructs the router that if a request with url “home/index” is received, the go to the home controller and run the index action. So to test that, open your browser and go to http://localhost:3000/home/index and http://localhost:3000/home/about.
This shows the default content of the index and about views. We need to modify that to our content.
Step 4: Modify index and about view content
Before proceeding, ensure you have a text editor application installed on your system. I personally prefer to use Sublime Text 2. But your choice may differ so choose accordingly.
Also, ensure your text editor can open folders and allows easy access to files in the folder. This will help a lot later as you deal with different files in the rails folder when working with a rails project.
To modify the index view, open the index view file which isapp/views/home/index.html.erb and change the content to following :
<h1> MovieMax – Movie Database </h1>
And for about view, open file app/views/home/about.html.erb and set the content to :
<h2> About MovieMax </h2> <p> This website will contain a list of movies. Each movie will have information on director, a cover picture, movie title, language </p>
Recently graduated, majoring in Mathematics and Computing from IIT Kharagpur, Rohan is a technology enthusiast and passionate programmer. Likes to apply Mathematics and Artificial Intelligence to devise creative solutions to common problems.