Comm Lab Web Syllabus Fall 2012
Week 1: Hello, Sinatra
Readings For This Week
- Intro to Sinatra (up to “Hello Worlds: What is a route?)
- Is HTML a programming language?
Introduction
- 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
HTML
-
Intro to HTML
- Tags that open and close
- Mark up content
- Nested tags
-
Tags
<html>, <title>, <body>, <em>, <strong>, <h1-h5>, <a>, <img>, <ol>, <ul>, <p>- Introduce
<form>and<input>types
Dynamic HTML with Sinatra and HTML form
- Your Sinatra folder
- Simple Sinatra script
- Simple HTML form example in Sinatra
Assignment
Part 1
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.
Requirements
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")
Reference
- Read WHATWG: Forms
- If you're stuck, look at this basic form example for guidance.
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.
- Complete levels 1 - 3 of the Try Ruby tutorial - optional
- Read Intro to Sinatra to “Hello Worlds: What is a route?"
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)
Review
- HTML basics
- Class Homework
Sinatra
- Ruby
- General (no types, etc)
- Syntax
- Variables
- Functions
- Loops
- Gems
- Basic Sinatra App
- Routes
- Returning something
- Returning something with views
- Params
- GET request in URL params
- POST request
- Params in route
- First route gets picked up
HTML Forms
- Render HTML with Sinatra
- Send to route in Sinatra
Setting up a Sinatra app on the ITP server
- Open Terminal (Putty for Windows)
- run
ssh [email protected]. Remember to put in your netid instead of “netid” - Type in your password when prompted
- run
ruby /etc/new_sinatra_app.rb nameofapp. Remember to replace “nameofapp” with the name of your application. - Go to your blank Sinatra app here (using your netid and the name of your app):http://itp.nyu.edu/ ~ netID /sinatra/ nameofapp
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.
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
- Datamapper basics
- Datamapper create
- Datamapper find
- Datamapper read
- Datamapper update
- Datamapper delete
Homework For Next Week
For next week, you will use datamapper to save the information from the form you built last week. These are the steps you need to create:
- A GET route - this route returns a form for the user to fill out. You will need to:
- Create the get route
- Create a .erb file with the HTML for the form
- This form will need an action attribute that points to your post route
- A POST route - this route saves the values from the form, retrieves all saved values, and inserts them in the HTML response. You will need to:
- Create the post route
- Copy/paste the basic datamapper setup code
- Create a datamapper class, with at least the basic setup and a property (besides the id)
- Create a new object from your class, and assign values from the params array
- Call "save" on the object to save it to the database
- Create a global variable and assign all objects from the database
- Create a .erb file with the HTML
- Loop through this global variable in the erb file, and output all values of the objects
Again, all of this code is in the example from the class. You can use it for reference, but please write the assignment code yourself.
Week 4: Advanced Sinatra
Readings For This Week
Sinatra Up and Running, p. 21-30
Creating a Blog in Sinatra
Advanced routes
- Conditional programming
Homework For Next Week
- Build a small web application that demonstrates the usage of:
- get and post routes
- .erb views
- datamapper class
- saving data with datamapper
- retrieving data with datamapper (.all or .get)
- :colon in route
- The application should have:
- A get route that shows all objects from DB
- a get route to show form
- a post route to save new object from form
- a permalink get route to show each object
- 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
- Birthday Registration Example
- More Datatypes
- Serial
- String
- Boolean
- Integer
- DateTime
- Example of all of these
- Datatype options
- Required
- Default
- Length
- Finding Records
- first
- all
- first_or_new
- Conditions (gt, lt, gte, lte, not, eql, like)
- Ordering (desc, asc)
- Counting
Some hints about CSS
Homework For Next Week
- Start developing your final project.
- Example of a big final project
Week 6: More Clients and Project Help
Image Upload
Processing
- loadStrings to your app
- Making calls fromHTTProcessing
- Other file formats (XML and JSON)
Ruby
Calling your site with a Ruby script on your machine
APIs
If we have time, let’s use other people’s APIs.
Week 7: Final Project Presentations
Let’s present your sites!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent