Make a simple MVC Sinatra app

Overview

This stripped-down boilerplate and accompanying explanation gets the roster of a kickball team up on your browser by drawing from a database, and looks like this;

End Result

Our database is found in the models folder and looks like this:

I’m going to show you how to cycle through this file and throw the names of the teams up onto a webpage.

Example Setup:

  1. Clone :https://github.com/LeslieWilson/SinatraApp_Boilerplate.git

2. ‘bundle install’ your Ruby gems

3. Identify your model, view and controller files and ignore all else

stripped Sinatra file structure

You’ll see a Sinatra app stripped down to bare bones. For now, only worry about your models folder, your views folder and your server file which is your controller.

The Controller — Server.rb

The server file is translating between the data in your models and the junk people see on the browser.

server.rb (your controller)
  • ‘require Sinatra’ activates the Sinatra gem you bundle installed.
  • ‘require pry’ installs the pry library that will let you debug if you ever want to!
  • sinatra reloader’ makes it so you don’t need to restart your server in terminal every time you make a change to the code- just refresh the browser
  • Finally, our model (our database) is required. In this example you’ll see there is only one ‘model’ right now containing data- ‘league.rb’. If we had more data in other files we’d need to require “model/moredata.rb”- but we don’t.

First, make a homepage;

1. Create a ‘/’ route for your homepage in your server

2. Create a corresponding ‘home.erb’ file in your views

To explain what you’re seeing here, the ‘get’ is getting the url for your homepage and erb :home is rendering stuff from the corresponding ‘home.erb’ file you’ll need to make in your ‘views’ folder.

Quick note- ‘erb’ stands for embedded ruby file, which means we are injecting ruby into your html in views. So lets make the corresponding erb file in views;

Views folder- your layout.erb and home.erb files.

Create a file in your ‘views’ folder called “home.erb”:

Anytime you want to make another page for your site n’ when you need another url, you can set that url in your “server.rb” file like this.

Just be careful to make another corresponding erb and link in your server like “erb :another_file”

Layout.erb

Now lets check out your “layout.erb” file:

The html in your ‘home.erb’ file is actually what is showing up in the ‘layout.erb’ file where <%yield%> is.

The <%yield%> marker acts as a placeholder where the body of your views html will render.

The ‘title’ in this layout file will be the title of your tab!

Models

So we’ve talked about the views, and we’ve discussed the controller, and how you link those two up by setting routes in your server file and hooking each route up to a corresponding erb file in your views folder.

But how do we actually access data in our model (that “league.rb” hash) and get it onto the browser?

Usually a hash of data won’t just be kept right in models like in league.rb. Rather it would be stored in a database or csv. But for this example we are getting this big piece of static data which is the roster and it is conveniently located in our league.rb file. It’s easy to connect to a database in your models folder instead, if you are make something more complex.

Rinse and Repeat to Make Another Page

Lets make a page that lists all the teams. We can repeat the steps we took to make a homepage but this time make a ‘teams’ page- first setting a route in our server, then creating a ‘teams.erb’ file in our views folder.

1. Go to teams.erb and follow hash convention to iterate through the teams in the data and put them up.

2. Go to server.rb and set up the url for “/teams” and define “@teams” as your data and connect it to the data and link it with “erb :teams”

Making the teams page!

Here as we set the “/teams” route in our server file, we are creating the instance variable “@teams” because we need to cycle through the league.rb hash with an “each do” statement to spit out all teams individually onto the browser. Define your variable and link “@teams” with the database. Lets look how we might refer to our database;

How might we link our @teams variable to this database?

Answer: @teams = League::ROSTER.

This says, “@teams contains the roster data within this league hash!” So we’re going to iterate through this data next in our teams.erb file.

teams.erb

Since @teams is connected to both the team names and team players of the hash, you have access to both. We’re only displaying names here, though. Stick ’em in an <a href> tag and you have yourself a web browser that shows the team names only as a link!

End result

…Also check out that sweet ‘/teams’ route you set in your server file and see how the URL displays it here!

url