The Anatomy of A Rails Set Up. A Step by Step Process for Beginners.
By: Jaime David
Tags: Ruby on Rails, Programming, Ruby, Restful Routes

Learning Rails for the first time can be very intimidating & utterly confusing.

A lot of new concepts & connecting methods between front end & back end, all at the same time. You just find yourself stuck not knowing where to really start. Here’s a step by step break down of how to set up a rails application in a way that helped me piece all this new information together.

Rails will help you create a web application that can be hosted on your browser. Rails is just a cycle of requests and responses.

Any internet browser is just an application like any other application, the purpose of your browser is to make a request to a server & the server’s response is to give you back the information you asked for.

The response that you get in return depends on the request that you give.

Being a full stack developer means YOU are in charge of setting up the requests AND the responses yourself & rails is just one of many tools that can help you do just that.

In your computer terminal, type in: “gem install rails”

This will install the rails gem into your computer. It’s just like downloading google chrome. Now let’s create a new rails project:

In your computer terminal, type in: “rails new (Name of project)”

ex.: rails new Scientists_App, rails new Pizza_App.. etc.

This will create all the folders, files & bundle install everything you need for a new rails project. Run “ls” in your terminal. This will give you a list of folders you can access.

Now “cd” into the repository project you just created:

in your terminal type in: “cd Scientists_App” then type in “code .” ; this will open the project in VS Code.

3 folders to pay attention to:

Inside the app folder there’s a folder for models/ views & controllers.

That’s all you need to pay attention to, for now.

There’s a lot of files in this rails project & the limits of rails is seemingly none existent, so for set up. just focused on these set of files.

rails console: is the command you would run to put you in an environment to play around with your code. kind of like an irb.

Now let’s create our first model for a scientist:

“rails g model Scientist name:string age:integer”

This will create a model & migration files needed for a “Scientist” model. This model holds a name attribute that holds a “string” data type & an age that holds an “integer” data type.

“rails g controller Scientists” (plural)

This will create the views folder & controller for our Scientist model.

Routes:

There are two ways we primarily define routes:

Using “resources” : Rails will automatically create the RESTful routes for a given model.

ex. resources :students, only: [:index, show]

will create the following routes:

get '/students', to: 'students#index', as: 'students'

get '/students/:id', to: 'students#show', as: 'student'

Custom routes: You need to specify the HTTP verb + path, controller + method, and optionally the path helper. These are helpful if you need to create routes outside of the seven RESTful routes provided by resources.

ex: patch /students/:id/toggle, to: 'students#toggle', as: 'toggle_student'

Let’s say we want to show a full list of all the scientists from our database into our webpage.

It’s always a good idea to start with your routes then build from there, let’s take a deeper look at the anatomy of a rails routes:

Inside the “config” folder, you will find “routes.rb”:

Inside that file is where we’re going to write all our routes:

ROUTES.rb :

get ‘/scientists’, to: ‘scientists#index’, as: ‘scientists’

“get” is the HTTP verb

is the HTTP verb “ ‘/scientists’ “ is the path or the URL you would type in your browser

is the path or the URL you would type in your browser “to: ‘scientists’ “ is the controller you want the path to refer to. in this case it’s our “scientists_controller.rb” file inside the “controller” folder within the “app” folder.

is the controller you want the path to refer to. in this case it’s our “scientists_controller.rb” file inside the “controller” folder within the “app” folder. “ #index “ is the method the URL look for inside “scientists_controller.rb” file for instructions on what to do.

is the method the URL look for inside “scientists_controller.rb” file for instructions on what to do. “ as: ‘scientists’ “ is the path helper we set to redirect back to this page specifically. (more on that later)

So this is the beginning structure of your website’s URL & ultimately what it will do when we type in ‘www.website-example.com/scientists’.

Now we have to define where that URL will go & what it’s response to this request from our browser:

Inside the “controllers” folder within the “app” folder you should see a file named: “scientists_controller.rb”

This is where “ to: ‘scientists’ ” is sending ‘/scientists’ to go to from our route. Within that file, ‘ to: ‘scientists#index’ ‘ is looking for an ‘#index’ method. We currently don’t have this so let’s define it:

SCIENTIST_CONTROLLER.rb:

We just defined an instance method of scientists to refer to our Scientists class in our html webpage. Now that we can access the information that we need from our database through our model, we can now make our html webpage.

Within the “app” folder, inside the “views” folder: ‘ to: ‘scientists#index’ will look for an “index.html.erb” file inside a “scientists” folder. If you’re missing the “scientist” folder & the “index.html.erb” files, feel free to make those files in the appropriate locations.

This is rails magic. If you don’t break away from the naming conventions, rails will automatically connect all the dots for you.

Now that we have all of these files set up, let’s make our HTML webpage!

Inside the empty “index.html.erb” file. Write the following code:

INDEX.HTML.ERB:

#INDEX.HTML.ERB

<h1>Scientists List</h1>

This is our html main header with plain text inside.

<% @scientists.each do |s|%>

You can hard code ruby codes within an html file by typing the code inside a ‘<% (code here) %>’ tag. Here we started looping through our instances of our ‘scientist’ model.

<p> Name: <%= s.name%> </p>

This is a continuation of our ruby loop code at the line above. The “=” sign added inside the “<% (code here) %>” tag means you would like to show the output of this code into the webpage itself along with regular html codes.

<% end %>

End of ruby code.

If you did it correctly, you can run “rails s” & check out “http://localhost:3000/scientists” on your browser, your webpage should be up & running.

Congratulations!

You fully coded your own webpage from start to finish!

Now you should have the basic understanding to preform the 7 Restful Routes! ( https://blog.techatpower.com/the-magnificent-7-restful-routes-8fd25b949c14 )

Give them a try and happy coding!