lecture 4 - comm lab: web @ itp

Communications Lab :: Web

Lecture 4: Sinatra and Datamapper

Reminders

1.Next week is Columbus Day, no class. 2.Assignment #3 due today

Today

• Sinatra review • How to create more applications in Sinatra

• Datamapper and Sinatra - we'll take a look at how to store and retrieve data

Data Structures

Sinatra Review

Routes• paths in urls• you can define the code that runs on each route

Parameters• variable values used to pass from url or from one route to

another

Including HTML through Sinatra• Storing HTML in variables• Adding strings• Returning the variable containing HTML

Creating a new application

• First...o Download the script

at https://gist.github.com/1258552o Rename it to new_sinatra_app.rb

• Next..o Open Terminal

If you have Windows, download Putty

Creating a new application

• Type in the following commands to connect to your remote server account (the one from FTP)o ssh netID@stu.itp.nyu.edu

Example: ssh irs221@stu.itp.nyu.eduo type in password when promptedo cd sinatrao ruby new_sinatra_app.rb name_of_app

Replace "name_of_app" with the name you want

DataMapper

• Object-relational mapper library that helps us save and retrieve data in Sinatra

• Easy to set up with Sinatra

Setting up DataMapper

• Add the following line at the top of the document:

require 'dm-core'

• You need this line whenever you are creating a Sinatra app that handles data

• You can add this line right after these:

require 'rubygems'require 'sinatra'

Setting up DataMapper

• Next, add this line in app.rb to setup DataMapper

DataMapper::setup(:default, {:adapter => 'yaml', :path => 'db'})

• This creates a connection to your data• We will be accessing data in YAML files

• Sets the path to where the data is, in our case the "db" folder

DB folder

• In your sinatra app folder, a folder named "db" (if you don't have it yet, Sinatra will automatically create it for you when you store the first data)

• "db" is short for database

• This is where you'll put your data files

• These data files are called YAML files, and they have the .yml file extension

DataMapper

• Create a class with the name of the object you want to store.

• In this example, we will store rectangles. 

class Rectangle  include DataMapper::Resource

  property :id,     Serial  property :x,      Integer  property :y,      Integerend

DataMapper

• First, always start with the word "class" followed by space and the name of the object data you are storing.

• Have the first letter of the name capitalized.

class Rectangle  include DataMapper::Resource

  property :id,     Serial  property :x,      Integer  property :y,      Integerend

DataMapper

• The first statement inside of the block specifies that we are working with DataMapper.

class Rectangle  include DataMapper::Resource

  property :id,     Serial  property :x,      Integer  property :y,      Integerend

DataMapper

• Next, specify the properties we are storing or retrieving.

• This means we are making clear which parameters we are storing.

class Rectangle  include DataMapper::Resource

  property :id,     Serial  property :x,      Integer  property :y,      Integerend

DataMapper

• Take note of the syntax used. The word "property" is used before each property, followed by space, colon, property name, comma and the type of the property.

class Rectangle  include DataMapper::Resource

  property :id,     Serial  property :x,      Integer  property :y,      Integerend

DataMapper

• You need to have the :id property.• The ID assigns a number to each entry.• The Serial Type means it is a unique number that will

auto-increment (increases by 1 every time)class Rectangle  include DataMapper::Resource

  property :id,     Serial  property :x,      Integer  property :y,      Integerend

DataMapper

Example of :id property. This is what the stored data will look like.

--- - x: 11  y: 22  id: 1- x: 522  y: 15  id: 2

DataMapper

• Other property types you can store

  property :name,                String  property :time_stored,         DateTime

Storing Data with POST

get '/db_rectangle' do    form = ""

    form += '<form action="/~irs221/sinatra/example1/create_rectangle" method="POST">'

    form += '<p><label>text:</label> <input type="text" name="text" /></p>'    form += '<p><label>x:</label> <input type="text" name="x" /></p>'    form += '<p><label>y:</label> <input type="text" name="y" /></p>'    form += '<p><label>color:</label> <input type="text" name="color" /></p>'

    form += '<p><input type="submit" value="create" /></p>'    form += '</form>'

    formend

Storing Data

post "/create_rectangle" do  rectangle = Rectangle.newend

• Create an instance of the Rectangle class

• This creates a Rectangle with the properties defined in "class Rectangle": x, y, and id.

Storing Data

post "/create_rectangle" do  rectangle = Rectangle.new  rectangle.x = params[:x]  rectangle.y = params[:y]end

• Set the value of the properties defined, here x and y, to the value of the inputs from the form.

• No need to set the value of the ID. That will get set automatically. 

Storing Data

post "/create_rectangle" do  rectangle = Rectangle.new  rectangle.x = params[:x]  rectangle.y = params[:y]  rectangle.saveend

• Save the values to the database/file• Puts the values in the YAML file named

rectangles.yml. If the file doesn't exist, it will create it automatically

YAML

• Abbreviation for “YAML Ain’t Markup Language”

• File extension .yml Example: rectangles.yml • Language for organizing data

• Both easy to read by humans and easy to use by programming language

YAML

--- - x: 11  y: 22  id: 1

YAML Structure and Syntax

• Use indentation to define structure and syntax (tab spaces)

--- - name:    first_name: Sarah    last_name: Banks- x: 522  y: 15  id: 2

YAML Structure and Syntax

• Mappings use colon and space: "key: value"• Use colons to separate pairs

Example:--- - x: 11  y: 22  id: 1

YAML Structure and Syntax

• Dashes are used to create “bullet” lists. Each entry starts with a dash and a space "- "

Example:--- - x: 11  y: 22  id: 1- x: 522  y: 15  id: 2

YAML Structure and Syntax

• Three dashes separate documents "---"

Example:--- - x: 11  y: 22  id: 1--- - apples: 3  bananas: 7

YAML Structure and Syntax

• Three dots indicate the end of a document "..."• Optional

Example:--- - x: 11  y: 22  id: 1...

YAML Structure and Syntax

• Hashes indicate comments "#"

Example:--- # x and y values for our rectangles- x: 11  y: 22  id: 1

Reading back the data

• Set a variable for the HTML and return at the end

  output = ""

  for r in Rectangle.all    output += <<-HTML#{r.x},#{r.y}HTML  end

  output

Reading back the data

• Loop through all the data in the YAML file

  output = ""

  for r in Rectangle.all    output += <<-HTML#{r.x},#{r.y}HTML  end

  output

Reading back the data

• Set a variable named "r" which becomes equal to each entry in the YAML file incrementally.

• Rectangle.all retrieves all the entries in the YAML File

  for r in Rectangle.all    output += <<-HTML#{r.x},#{r.y}HTML  end

Reading back the data

• Notice the syntax for the FOR LOOP

  for r in Rectangle.all    output += <<-HTML#{r.x},#{r.y}HTML  end

Reading back the data

• Add all the pairs as HTML strings in the output variable

• For each Rectangle, take the value of the x property and the y property and separate them by a comma.

  for r in Rectangle.all    output += <<-HTML#{r.x},#{r.y}HTML  end

Retrieving a certain entry

• This is why the id is useful. We can keep close track of all entries and retrieve them individually

get "/rectangles/:id" do  Rectangle.get params[:id]end

Retrieving a certain entry

• Displaying the x value for a certain entry:

get "/rectangles/:id" do  output = ""  r = Rectangle.get params[:id]  output += String(r.x)  outputend

Updating a certain entry

• Displaying the x value for a certain entry:

get "/rectangles/:id" do  output = ""  r = Rectangle.get params[:id]  r.update(:x => 1000)  output += String(r.x)  outputend

Deleting entries

get "/clearRectangles" do  for rectangle in Rectangle.all    rectangle.destroy  end  "deleted all rectangles"end

Deleting entries

1.Let's create a company employee list.2.List first name, last name and position3.Show only the designers4.Add in a stylesheet

Next Time...

• JavaScripto Programming language on client sideo We'll add interaction to pageso Heavily uses classes and ids from the HTML

• Start thinking about what you want to do for your final project

Your Final Project

Think about all the tools we've studied so far:• HTML - especially forms• CSS• Sinatra routes and parameters• Datamapper

E. g. could be another choose your own adventure game, but you could have it more intricate, include videos, pictures, have it more styled. 

For next class, make a proposal with your idea.

Assignment #4

• Due next class, in two weeks• Covers Datamapper, storing and retrieving data.