A Guide to Creating A CRUD App with Ruby On Rails

Image for post
Image for post

What is Ruby On Rails?

Ruby on Rails is a server-side web application framework that was written in Ruby in 2005 under the MIT License. Rails is a MVC (model–view–controller) framework, providing default structures for a database, a web service, and web pages. It was designed to create MVC applications quicker, easier, and intuitively. In fact, you’ve probably used some of the applications created with rails — GitHub, Shopify, SoundCloud, Airbnb, Twitch, and many, many more.

What is CRUD?

CRUD stands for Create, Read, Update, and Delete. It is also sometimes used to describe user interface conventions that facilitate viewing, searching, and changing information; often through computer-based forms and reports. CRUD also requires a specific path. What does that mean? It means that website URLs are fairly standardized! If, after creating a new article on Medium, you decide to edit it, you’ll see that the URL path has /edit on the end of it.

Image for post
Image for post

Or, if you want to view all of your public stories, you can follow the logical path through the URL link: View my profile (/me), my stories (/stories), and then all of my public stories(/public).

Image for post
Image for post

Creating the CRUD App

  1. Generate a new application with rails. We’re going to be building an application that allows trainers to heal their Pokemon at a PokeCenter.
Image for post
Image for post

2. CD into your application:

Image for post
Image for post

3. Generate models for your application. The ‘g’ is short for ‘generate’ and the two can be used interchangeably. We’ll be creating a Pokemon model that has a table with two columns: name and level. After generating the model, two files will be created: a pokemon.rb file in your models folder and [date_time]_create_pokemons.rb file in your migrations folder.

Image for post
Image for post

4. Next we’ll be creating a controller for the Pokemon model but, unlike the model, the controller must be plural. (Unfortunately, the plural of Pokemon has to be Pokemons for this example.) This will automatically create a few things for us!

  • “pokemons_controller.rb” inside the Controllers folder
  • “dogs” folder that contains the four html.erb files we specified (index, show, new, edit)
Image for post
Image for post

5. The config/routes.rb file will automatically be updated. Since we want a fully functioning app, we’ll specify all of the resources we want to allow.

Image for post
Image for post

6. Next we will want to set up our database tables and migrate our database to create a schema file. You’ll want to double check your migration files that were created before and tweak everything before running ‘rails db:migrate’.

7. Next we’re going to test our app to make sure it works. Add some pokemon to the db/migrate/seeds.rb file before running rails db:seed.
Tip: make sure to have a clear_all function before your seed data so that you refresh your database every time you run rails db:seed!

Image for post
Image for post

8. Type “rails console” or “rails c” to start up the rails testing console. Type in “Pokemon.all” to make sure that the database seeded correctly.

Adding the Read Function

Our goal here is to be able to see all Pokemon at the pokemons_path (a.k.a. the url path /pokemons).

Go to the pokemon controller in app/controllers/pokemons_controller.rb and create an instance variable to access all the Pokemon inside the index view.

Image for post
Image for post

Go to the index view inside the views folder views/pokemons/index.html.erb and use the <% (evaluates but doesn’t print) and <%= (evaluates and prints) operators to write a simple block to output each pokemon’s name and level.

Image for post
Image for post

Next we want to add a way to show each specific Pokemon on their own page. Our goal now is to show a specific pokemon at a pokemon_path.

We need to go to the pokemon controller again and create an instance variable to access one specific Pokemon inside the show view. We’ll be finding the pokemon by their database key id number.

Image for post
Image for post

After that, we’ll be going to the show view inside the views folder views/pokemons/show.html.erb, using the <% and <%= operators again to output the pokemon’s details.

Image for post
Image for post

Adding the Create Function

Our goal this time to be able to create a new Pokemon!

Again, go to the pokemon controller, but this time we’ll be creating two methods. One to populate the new form with an empty pokemon object shell, and one to save the information gathered into that shell as a new pokemon and then redirect us to view the new pokemon we created.

Image for post
Image for post

Go to the new view inside the views folder. We want to create the form that can be filled out. Since pokemon have names and levels we added fields for both to be filled in.

Image for post
Image for post

Making the Edit Function

Uh oh, what if someone made a mistake while typing their new pokemon’s name? We should make a way for them to change it!

Back to the pokemon controller we go, but this time we’re making an edit and an update method! The edit method is finding the pokemon we would like to edit and the update method is updating that pokemon with the params (the allowed editable things) and then redirecting to that newly updated pokemon’s show page.

Image for post
Image for post

Go to the edit view inside the views folder. The form will be auto-populated with the current information to make it easier to edit!

Image for post
Image for post

Making the Delete Function

We also need to give our users a way to delete pokemon. This will be done inside the pokemon controller, but this time the delete button will be on the show page instead of on it’s own view! We’ll be finding the pokemon we want to delete, performing the destroy action, and redirecting to the pokemon index page (pokemons_path).

Image for post
Image for post

There are so many different ways and places to put a delete button, but for now, we’ll just put it as a button inside a form. Not the best, but it’ll do.

Image for post
Image for post

What Now?

Well, now you celebrate because you have a fully functioning app! But, also, maybe add some styling, navigation, and other stuff to make it easier to use. At the end of the day, though, you just made an entire CRUD app from scratch! Now get out there and google on how to make it bigger and better!

Full-Stack Developer, Software Engineer, and UX/UI Aficionado

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store