Skip to content
Switch branches/tags
This branch is 57 commits ahead, 14 commits behind ITPNYU:master.

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Comm Lab Web

The goal of Comm Lab Web is to develop creative web applications.

#Posting your HW

If you miss more then 1 assignment you will not pass!

Week 1: Hello, Sinatra

Readings For This Week


  • Introduction and software  we’ll use in this class
  • Map of interaction: User to Client, over Network, to Server, to Datastore, and back.
  • Web / HTTP
    • Basics of client/server/datastore interaction
    • Using the web to allow access to remote resources, to respond to multiple clients, to apply conditional logic, to persist data, to accumulate data.
  • HTTP Requests
  • Examples of clients


  • Intro to HTML

  • Tags

Dynamic HTML with Sinatra and HTML form


Part 1

Option 1: Etzy App

You've got a great idea for the next big thing: it's called Etzy, and it's a place to sell artwork online. You want to drum up interest and get some visitor feedback, so you decide to create a signup form!

For this assignment you must create a page where a visitor can input his or her name and email, and some preferences. We're not worried about doing anything with the form data right now, or even making it pretty. Just focus on getting the markup complete.


The page should include the following:

  • a heading for the name of the business
  • a sentence describing what it does
  • a text input for a name
  • a text input for an email address
  • a checkbox for receiving an email newsletter
  • a dropdown menu for "How you heard about us" ("google", "from a friend", "online ad", etc.)
  • a radio button group for choosing a role ("buyer", "seller", or "both")

You should also create a 3 page site with a Home (which can be your form) and 2 other links with text and image

Option 2: Making your own text Game! Create your character form:
  • Name
  • Small back story
  • Dropdown menu for "Weapon choice" (“Sword”, “Ax”, “Wand”)
  • A radio button group for choosing a role ("Male", "Female", or "Ambiguous")
  • Check boxes “What to carry:” (“Potions”, “Food”, “etc”)

Most text adventures operate in the following: Your character enters a room and is able to investigate. Your investigations leads to consequences. Click on the link for an example



Part 2

We will also start looking at Ruby and Sinatra this week too, so we can start building a backend for our signup form.

Week 2: Basics of a Sinatra script

Readings For This Week

Sinatra Up and Running, p. 15-21 (It’s not much, so please read it thoroughly)


  • HTML basics
  • Class Homework


Setting up a Sinatra app on the ITP server

  1. Open Terminal (Putty for Windows)
  2. run ssh Remember to put in your netid instead of “netid”
  3. Type in your password when prompted
  4. run ruby /etc/new_sinatra_app.rb nameofapp. Remember to replace “nameofapp” with the name of your application.
  5. Go to your blank Sinatra app here (using your netid and the name of your app): ~ netID /sinatra/ nameofapp

HTML Forms

  • Render HTML with Sinatra
  • Send to route in Sinatra

The components of a for have 2 parts, the form tag and the body

<input type="text" name="name" ></input>
  • Form Tag

    • Action - Route where the form data will be processed
    • Method - Which Http request protocol to use
  • Body - Form inputs

    • type - The method of input
    • name - The reference for the value
    • value - The user input selection or text

Intro to Sinatra

Sinatra works by declaring routes. Routes are the URLs associated with your application. A simple route looks like this:

get '/home' do 
    "Code goes in here"

Think of routes as litte programs that are going to run when you you visit the link. The route is composed of 2 imporant parts the method and the link.

Methods include: GET, POST, DELETE, PUT, etc. After the method you declare the link. In class, we mostly use GET and POST.

GET - Requests data from a specified resource POST - Submits data to be processed to a specified resource

GET requests can be used in routes that: * Serve up content * Process form * Form data public * The form data is sent in the URL in name and value pairs

POST requests can be used in routes that: * Process form * Form data private * Information is sent in the HTTP message body

For more differences visit click here.

What about the form data?

Sinatra uses a global variable called parameters. The syntax for parameters is params[:name]. The :name is the reference name pulled from the form. Parameters can also be pulled from a url route. When used in a route /home/:name , this can be referenced by params[:name]

This is an example for taking in a value from a form:

post '/home' do 
    name = params[:name]

This is an example for taking in a value from a url

get '/home/:name' do 
    name = params[:name]

When we want to output variables from sinatra from our route:

post '/home' do 
    name = params[:name]
    "This is my name #{name}"


When we want to output variables from sinatra to our erb:

The @ symbol is use to signify that the variable can be accessed from the erb template


post '/home' do 
    @name = params[:name]

    erb :name




You can run ruby code in your erb.

name.erb <% name = "zeven" %>

My name is <%=name%>

This will output the HTML code:

<p>My name is zeven</p> 

The <% %> escape characters are used to write ruby code:

<% name = "zeven" %>

This will not output anything in your template

To output variables to your template:

The sinatra reads the = sign and understands to render the variable


Homework For Next Week

Create a new Sinatra application on the ITP Server. Create a GET “/form” route that returns an HTML form with a few different input types. Create a POST “/form” route that reads these parameters and sends back a dynamic HTML page. This HTML page should at least have an image that changes depending on the input from the form.

###Putting images into your app directory.

You need to make a folder called public. Inside of that make a folder called images and place your images there. Double click into your app folder. Right click and add new folder. Type public. Double click to go into the new public folder you created. Right click and add new folder called images. Put your images in there. You should put the full path to your file in the image src. It will look something like this: <img src=""/>

If your image does not appear there could be another issue with permissions. Right click on your public folder you just created and select info. Click on the permissions tab. Where it says unix permissions type 755 and click apply changes recursively.

Week 3: Basics of Datamapper

Readings For This Week

An Introduction to Datamapper  - (Skip “Installing” part)

What is a database?

  • Simplest model: a database can be a file
  • Read and write to a file as a simple model of persistence
  • YAML


  • Datamapper is a library that enables you to save to a database in Sinatra
  • Setup Datamapper
  • Write your Datamapper class
    • Properties: Serial, Boolean, String, Text, Float, Integer, Datetime,

Setting up the Database

First you need to add the library:

require 'dm-core'

Second add the basic database setup:

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

We are using a yaml database saved to the path db

Setting up the Database Class

The Class is what Datamapper uses to create the database model

class BlogPost

include DataMapper::Resource #This line makes sure Datamapper uses this class to build our database structure

property :id, Serial #We always need a Serial property. This ensures every new data entry has a unique number attributed with it. property :title, String property :body, Text


Acessing the Data

Asking for entry based on the Serial property. This returns a single entry

@entry = BlogPost.get(params[:id])

To access the data you use the instance name @entry followed by a . and the name of the property you want to access i.e. @entry.title, will return the title of your current query

Asking for all entries in the database. This returns an array of objects

@allEntries = BlogPost.all

To display the data in your erb you need to loop through an array:

<%@allEntries.each do |content|%>

Here are some more Datamapper Query types:

Get a user by id #user = Visitor.get(1)

Get first user with name "rune" #users = Visitor.first(:username => "rune")

Get last user with name "rune" #user = Visitor.last(:name => "rune")

Get all users with name "rune" #user = Visitor.all(:name => "rune")

Find all users with age between 18 and 60 #user = Visitor.all( => 18, => 60)

You can use all of these conditions

gt, greater than

lt, less than

gte, greater than or equal

lte, less than or equal

not, not equal

eql, equal

like, like

Order visitors by age (you also use .asc) #user = Visitor.all(:order => [ :age.desc ])

Find the number of visitors in your database with age greater than 18 #count = Visitor.count( => 18)

Find the youngest age in the database #min_age = Visitor.min(:age)

Find the oldest age in the database #max_age = Visitor.max(:age)

Using Datamapper with Forms

Homework For Next Week

Write a sinatra app that shows a user form, and on the POST request recognize whether the user is returning.

Week 4: Advanced Sinatra

Readings For This Week

Sinatra Up and Running, p. 21-30

Creating a Blog in Sinatra

Advanced routes

Homework For Next Week

  • Create a mini-website with a menu and a couple of pages. All HTML has to exist in .erb views, and some of the actual data has to be retrieved and outputted from Datamapper.
  • Start planning your final project. Be prepared to talk about your idea next class.

Week 5: Advanced Datamapper

Readings For This Week

Look at theDatamapper Documentation . See if you can find features that you can use.

Final Project Discussion

What do you want to do? What is preventing you from doing it?

Advanced Datamapper

Class Example

  • More Datatypes

    • Serial - is your unique identifier
    • String - use when you want to save text
    • Boolean - true and false
    • Integer - numbers
    • DateTime - To save a Time object
  • Datatype options

    • Required - property :firstname, String, :required => true
    • Default - property :catlover, Boolean, :default => false
    • Length - property :content, Text, :length => 0..500

Birthday Registration Example

Example of all of these

Some hints about CSS

Homework For Next Week

Week 6: More Clients and Project Help

Image Upload






Calling your site with a Ruby script on your machine


If we have time, let’s use other people’s APIs.

Week 7: Final Project Presentations

Let’s present your sites!


The main repo for Comm Lab Web at ITP. See forks for individual teacher repos.



No releases published


No packages published