Ruby on Rails Tutorial : All you need to know about Web Applications

Millions of businesses use the Internet as a cost-effective communications channel. It lets them exchange information with their target market and make fast, secure transactions. Frameworks are libraries that help you develop your application faster and smarter. Ruby on Rails is one of the most extremely productive web application framework. This Ruby on Rails Tutorial will provide you an in-depth knowledge about the web application framework.

The following topics are covered in this Ruby on Rails Tutorial:

• What is Ruby on Rails?
• Why use Ruby on Rails?
• Introduction to Ruby
• Advantages of Ruby
• Frameworks of Ruby
• Benefits of Ruby on Rails
• Ruby on Rails MVC Framework
• Installation Steps
• Building a Web Page using Ruby on Rails (Demo)

What is Ruby on Rails?

Ruby on Rails, also known as Rails, is a server-side web application framework written in Ruby programming language. It is a model-view-controller framework that provides a structure for a database and web pages.One can develop an application at least ten times faster with Rails than a typical Java framework. 

Let’s move ahead with the Ruby on Rails Tutorial and find out more reasons to use this framework.

Why use Ruby on Rails?

The full-stack web framework comes with features to facilitate both client-side and server-side web development. It provides the basic structure required by developers to create web pages, web services, and databases. Also, it enables developers to build user interfaces by combining HTML, CSS, JavaScript, and XML. Let’s have a look at some of the reasons why we should choose Ruby on Rails over other frameworks :

• It’s Perfect for Web Technologies
• Saves Money
• Saves Time
• Active and Helpful Community
• Build your Own Plug & Play Apps
• Used by Big Companies

Now that we know why we should prefer Ruby on Rails more than other frameworks, let’s move on with our Ruby on Rails Tutorial and know about the programming language it is written in.

Introduction to Ruby

Ruby is a dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write. In Ruby, absolutely everything is an object, meaning everything operates in the same paradigm of sending and receiving messages.

Let’s move ahead with our Ruby on Rails Tutorial and have a look at some of the advantages of Ruby programming language.

Advantages of Ruby

Ruby is often recommended to beginners because it’s easy to use and master. Another reason is that it comes with a long list of benefits when compared to other languages. It is one of the most popular programming languages and powers a lot of booming applications. Let’s have a look at some of the advantages of the programming language:

Simplicity – The syntax of Ruby is very simple and readable. It enables Ruby developers to do more with less code. The readability also makes Ruby almost self-documenting and reduces the burden of writing out separate comments or help text for the developers.

Faster Development – Web development with Ruby on Rails is faster due to the object-orientation of Ruby programming language. a line of code in Ruby may be worth six lines of Java code sometimes. It offers a powerful infrastructure from the onset and spares a considerable time and effort for the developers to build one from scratch.

Easy Code maintenance and updates – Ruby  is known for its stability and predictability. It is pretty easy to modify the existing code and add new features to a site. This is particularly valuable for long-term projects and startups.

Cost-effectiveness – It can run on the free open-source Linux and works well with many free web servers and databases. The whole development process and code updates are performed faster. thus, the business owners tend to spend less money on the development of their website and its upgrade.

Now that you know about some of the advantages of Ruby programming language, let’s move ahead with our Ruby on Rails Tutorial and check out some of the popular frameworks of Ruby.

Dive into the world of full stack development and unleash your creativity with our Full Stack Developer Course.

Frameworks of Ruby

The expressive syntax rules of Ruby enable programmers to build web applications by writing easy-to-read code. Many developers even opt for Ruby to create prototypes without putting extra time and effort. But the developers cannot write large and complex web applications in Ruby without leveraging web frameworks. The tools, libraries, and utilities provided by Ruby web frameworks enable programmers to write web applications according to varied business requirements.

Some of the famous Ruby Frameworks include:

• Ruby on Rails
• Roda
• Sinatra
• Cuba
• Hanami
• Scorched
• Trail blazer

So let’s move ahead and focus on one of the most popular frameworks of Ruby and know more about Rails Framework in this Ruby on Rails Tutorial.

Elevate your web development skills with our industry-relevant Node JS Course and stay ahead in the ever-evolving tech world.

Ruby on Rails

Ruby on Rails is the most popular web framework for Ruby programming language. The full-stack web framework comes with features to facilitate both client-side and server-side web development. It provides the basic structure required by developers to create web pages, web services, and databases.

Now let’s move ahead with our Ruby on Rails Tutorial and list out some of the reasons why Rails is chosen out of hundreds of other programming languages.

Benefits of Ruby on Rails

1. Strong adherence to standards – One of the most notable advantages Ruby on Rails is a strong backing of web standards for every part of an application, from the user interface to data transfer. It makes the language much easier for beginners to learn and much more enjoyable for professionals to use. Not just that, it also minimizes the amount of code you need to write to implement a feature.
2. Huge and active community – Around 10% of the most popular websites in the world use Ruby on Rails which puts it in the top 3 most used web development tools. There is a huge community of RoR developers on GitHub and hundreds of different helpful community-created gems and libraries that you can use as a part of your own software.
3. Time efficiency – There are hundreds of tools in Ruby on Rails that can both accelerate and simplify your overall coding experience, as well as spare your time from simple, yet time-consuming tasks. Basically, this means that you can make more money in the same amount of time.
4. Popularity among the big companies – Most of the big companies with professional analysts make good decisions about the tools they use for their projects. Ruby on Rails has definitely earned such a reputation as there are a lot of really massive projects that still use it. Some of the big companies include GitHub, Airbnb, shopify etc.

Now let’s move ahead with our Ruby on Rails Tutorial and find out some of the primary tasks performed by Rails while building an application.

Rails framework

A framework is a program, set of programs and code library that writes most of your application for you. When you use a framework, your job is to write the parts of the application that make it do the specific things you want. While setting out to write a Rails application, it is important to perform three primary tasks such as:

1. Describe and model your application’s domain – The domain is the universe of your application. The domain may be a music store, a university, a dating service, an address book, or a hardware inventory. So here you have to figure out what’s in it, what entities exist in this universe and how the items in it relate to each other. This is equivalent to modeling a database structure to keep the entities and their relationship.
2. Specify what can happen in this domain− The domain model is static and we have to make it dynamic. Addresses can be added to an address book, musical scores can be purchased from music stores and users can log in to a dating service. You need to identify all the possible scenarios or actions that the elements of your domain can participate in.
3. Choose and design the publicly available views of the domain− At this point, you can start thinking in Web-browser terms. Once you’ve decided that your domain has students, and that they can register for classes, you can envision a welcome page, a registration page, and a confirmation page, etc. Each of these pages, or views, shows the user how things stand at a certain point.

Based on the above three tasks, Ruby on Rails deals with a Model View Controller framework. So let’s move ahead with our Ruby on Rails Tutorial and find out more about the MVC Framework.

Ruby on Rails MVC Framework

The Model View Controller principle divides the work of an application into three separate but closely cooperative subsystems.

• Model (ActiveRecord ) – It maintains the relationship between the objects and the database and handles validation, association, transactions, and more. This subsystem is implemented in ActiveRecord library, which provides an interface and binding between the tables in a relational database and the Ruby program code that manipulates database records. Ruby method names are automatically generated from the field names of database tables.
• View ( ActionView ) – It is a presentation of data in a particular format, triggered by a controller’s decision to present the data. They are script-based template systems like JSP, ASP, PHP, and very easy to integrate with AJAX technology. This subsystem is implemented in ActionView library, which is an Embedded Ruby (ERb) based system for defining presentation templates for data presentation. Every Web connection to a Rails application results in the displaying of a view.
• Controller ( ActionController ) – The facility within the application that directs traffic, on the one hand, querying the models for specific data, and on the other hand, organizing that data into a form that fits the needs of a given view. This subsystem is implemented in ActionController, which is a data broker sitting between ActiveRecord and ActionView.

Now that you know what is Ruby on Rails and why we should use this framework, Let’s move ahead and have a look at the installation process of Ruby and Rails.

Installation Steps

To develop a web application using Ruby on Rails Framework, we need to install the following software first:

• Ruby
• The Rails Framework
• A Web Server
• A Database System

Rails works with many database systems, including MySQL, PostgreSQL, SQLite, Oracle, DB2 and SQL Server. Please refer to a corresponding Database System Setup manual to set up your database.

Rails installation on Windows

Step 1 : Install Ruby

download an installation package from rubyinstaller.org. Follow the download link, and run the resulting installer. You can install the latest available version of Ruby in a single click. It’s a very small package, and you’ll get RubyGems as well along with this package. After installation, you can also check the version by typing ruby -v in the command prompt.

Step 2 : Install Rails

With Rubygems loaded, you can install all of Rails and its dependencies using the following command through the command line −

C:> gem install rails

Step 3 : Check rails Version

Use the following command to check the rails version.

C:> rails -v

Output

Rails 5.2.2

Once you are done with the above steps, you have successfully installed Ruby on Rails over windows.

Now that you have an idea of Ruby on Rails Framework and how to install it, let’s move ahead with our Ruby on Rails Tutorial and understand a simple implementation of building a web page using the framework.

Building a Web Page using Ruby on Rails (Demo)

Here we are going to use PostgreSQL as our database. It is a popular choice among Ruby On Rails community. First you have to navigate to the directory where you want to save your project and open the command prompt.

To generate a new app run the following code:

rails new collabfield --database=postgresql

With this, we have successfully generated our new application and we can navigate to the new directory using the following command:

cd collabfield

Once we are inside the directory, we can run the app by using the following command:

rails s

With this, we have started our app and now you have to open the browser and go to http://localhost:3000 where you will find the Rails welcome page.

Now we will change the Rails welcome page to our home page and for that we need to generate a new controller called pages using the following command:

rails g controller pages

We are going to use this PagesController to manage our special and static pages. We can use Notepad++ or Sublime text to open the file pages_controller.rb.

app/controllers/pages_controller.rb

When we open pages_controller.rb, we see this:

class PagesController < ApplicationController
end

All the controllers that we create are going to inherit from ApplicationController class. Thus, all methods defined inside this class are going to be available across all our controllers.

We’ll define a public method named index, so it can be callable as an action:

class PagesController < ApplicationController

def index
end

end

Now let’s define a route so that Rails knows which controller and its action to call when we open our root page. Open a routes.rb file in app/config/routes.rb and insert the following line:

root to: 'pages#index'

Rails.application.routes.draw do
root to: 'pages#index'
end

Now let’s create a new template for our index action. Go to app/views/pages and create an index.html.erb file inside this directory. Inside this file we can write our regular HTML+ Embedded Ruby code.

<h1>Welcome to edureka!</h1>

Now when we go to our home page, we see something like this:

It’s finally time to design our web page:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

/* Style the body */
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}

/* Header/logo Title */
.header {
padding: 80px;
text-align: center;
background: #1abc9c;
color: white;
}

/* Increase the font size of the heading */
.header h1 {
font-size: 40px;
}

/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
.navbar {
overflow: hidden;
background-color: #333;
position: sticky;
position: -webkit-sticky;
top: 0;
}

/* Style the navigation bar links */
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}

/* Right-aligned link */
.navbar a.right {
float: right;
}

/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}

/* Active/current link */
.navbar a.active {
background-color: #666;
color: white;
}

/* Column container */
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
-ms-flex: 30%; /* IE10 */
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}

/* Main column */
.main {
-ms-flex: 70%; /* IE10 */
flex: 70%;
background-color: white;
padding: 20px;
}

/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}

/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>

<div class="header">
<h1>Welcome to edureka!</h1>
<p>A <b>Ruby on Rails</b> web page example.</p>
</div>

<div class="navbar">
<a href="#" class="active">Home</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>

<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>

<div class="footer">
<h2>Footer</h2>
</div>

</body>
</html>

To learn more about HTML  : ***Click Here***

Now when we go back to our homepage, it will look like this:

Now with this, we come to an end to this Ruby on Rails Tutorial. I Hope you guys enjoyed this article and understood how to use Ruby on Rails framework for web applications. So, if you have read this, you are no longer a newbie to Ruby on Rails. Try out these examples and let me know if there are any challenges you are facing while deploying the code.

Now that you have learnt about Ruby on Rails Framework, check out the Ruby on Rails Certification Training by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. This Certification Training is curated by industry professionals as per the industry requirements & demands. Explore about full-stack web development practices with ‘Ruby on Rails’ to build highly scalable applications in shorter time span compared to its counterparts using concepts like MVC, Gems, Action View, Action Controller, Active Record & Deployment and Web Application Projects.Got a question for us? Please mention it in the comments section of “Ruby on Rails Tutorial” and we will get back to you.