A Simple App with Ruby on Rails

A brief introduction to Ruby on Rails was given in one of the previous posts. As you all are aware, Ruby is a simple and easy-to-adapt language to build web applications. To refresh the memory a bit, Rails is a framework for Ruby which has the MVC architecture. Through this post, we’ll look at creating a simple blog using Ruby on Rails.

1st Step: Make a folder where the project should be located using

mkdir (Project_Name)

2nd Step: Go to the directory using the cd command. In order to create a new rails app type the following command.

rails new <name_of_the_project>

i.e.: rails new MySite

Navigate into the folder which was created and check the files that has been created using a text editor. Within the file structure, there will be a folder named “Apps”.

Apps —> Views –> Layouts will contain a file named “application.html.erb“. The extension .erb stands for Embedded Ruby which means we could insert ruby code in these HTML files.

Another important file in the file structure is the “Routes” file (routes.rb), which is in the Config folder in the file structure. Initially there is nothing much in the routes file as we haven’t built anything yet.

3rd Step: In order to run the default rails server (WEBrick), type the command

rails s

If this gives an error and request to install bundle, do so first and run the command again. Installing bundle may also ask you to install several dependancies. This would be as follows. When trying to install bundle, if an error occurs and a request to install json appears, you need to install json first. However, this may also give an error saying some header files are missing.

Therefore before installing json, type the following command.

sudo apt-get install ruby-dev

Next install json by the command

sudo gem install json -v 1.8.6

Next run bundle install on the terminal. Then all the dependancies would be installed. Now you would be able to start the rails server without an error using the command rails s.

Getting back to the rails app, we have now started the server. You would see some information related to the server on the terminal, once it has started correctly.

Visit https://localhost:3000 in order to visit the server we just started. All changes to our app will be displayed here. If the configuration was successful, it would say “Welcome Aboard”.

4th Step: In order to create pages, the following generate command is used.

rails g controller Pages home about contact

This would create a controller named Pages (The “P” should be uppercase) and 3 views namely; home, about and contact. The changes would be visible in the routes.rb file.

However, the server at localhost:3000 would not reflect any changes yet since we did not define an index page yet. As you all know, the index page is very important in an web application and it acts as the root.

5th Step: To set up an index page, open the routes.rb file and type the below code above the three views which was newly created.

root 'pages#home'

This would tell the application that the home view is the index file or the root view. Now once you restart the server, localhost:3000 will directly navigate into the home page we created. This view can be edited using the home.html.erb file in app –> view –> pages folder.

6th Step: The home.html.erb file can be edited to reflect the changes we need to see in the home page. For example, it can have html code and embedded ruby code as follows.

<h1>Hello World!</h1>
<%= 'Hello World!' %>

Once the server is restarted and the localhost page is refreshed, two Hello World! sentences will appear on the screen.

The embedded ruby does not appear on the front-end inspect element sources which makes it an appropriate method to hide front-end logic implementations.

Stay tuned for more posts of Ruby on Rails!

Thank you!


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

Blog at WordPress.com.

Up ↑

%d bloggers like this: