Skip to content

Instantly share code, notes, and snippets.

@ashleygwilliams
Last active December 18, 2015 22:08
Show Gist options
  • Save ashleygwilliams/5852138 to your computer and use it in GitHub Desktop.
Save ashleygwilliams/5852138 to your computer and use it in GitHub Desktop.
part 1

Sinatra: Part 1

Objective

Re-create the student website as a dynamic web application using Sinatra and the Student Class you created in the Student Class DB lab.

Student ORM files Note1: If you use this ORM, it has a dependency on the Persistable module, you must grab and require this file. Note2: You MUST USE THE GEMFILE. All gems go in the gemfile, and no longer do we do "require 'sqlite3'" in our actual program. Files you wrote (like student.rb) are required as normal. Part 1: Rendering a list of students.

Bootstrap the app

  1. Add your student.rb file to the repository, and require it in app.rb, giving us access to the Student class. Note:You can either use your current student.rb file from the student ORM, or use the working one Avi built for the class.
require './student.rb'
  1. Add your students.db file to the repository or create a new one and populate it with the data you scraped from the static student website. Note: This is a SQLITE database file, that will either be created by you, or already exists from the student ORM project we worked on.

  2. Add the sqlite gem and resolve any other necessary dependencies to get your app working.

  3. Make sure everything is working by running rackup from the command-line and visiting localhost:9292 in your browser.

Add some routes

We are going to create some routes to our app. In a Sinatra application, the route and the controller are defined in the same place, but for our purposes we will just refer to them as routes.

  1. Add a '/students' route. It should include a block that populates an instance variable @students with an Array of all the students in your students.db. Do this by using methods you defined in your Student class. Note: Here we're combining our student ORM with Sinatra. Hopefully your student ORM knows how to retrieve an array of student object instances from the database and return them as an array. This might be a big conceptual leap, so let us know if you get stuck.

  2. Add directory called 'views' to the project. This is where you will put your ERB templates. By default, Sinatra assumes this is where your templates are located.

Templates are assumed to be located directly under the ./views directory. To use a different views directory: set :views, settings.root + '/templates'

http://www.sinatrarb.com/intro.html#Views%20/%20Templates

In this directory, create another directory called students. Note that this directory is the same name as the '/students' route you added above. This isn't a Sinatra convention like the views directory, but is a strong convention for organizing our code based on the resource it is concerned with that we are going to adopt. Rails generators use this same convention.

Now that you have the directory structure set, time to create a template for rendering a list of students. For the purposes of this lab you'll be using ERB.

  1. Create an ERB template in the /views/students directory that will be used to render html responsible for presenting a list all the students in the database. Eventually you will style this to look like the main index page on the current student website. For this example we'll call it index.erb, but

some_file_name.erb

This template will be rendering a complete html document, so you'll want to add html, head, and body tags.

# views/students/some_file_name.erb

<html>
  <head>
  </head>
  <body>
    Hello ERB!
  </body>
</html>
  1. Back in app.rb, find the '/students' route you created earlier. Add a new line below the @students instance variable you created. Here you will tell Sinatra to use the ERB filter to render your .erb template.
erb :'students/some_file_name'

In the body section of this template, use ERB tags to render a block that will iterate through each student in the @students Array and output (<%= %>) the attributes for the students.

Start the app, and visit the '/students' route to make sure it worked!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment