Lecture 4 - Comm Lab: Web @ ITP
-
Upload
yucefmerhi -
Category
Technology
-
view
459 -
download
1
Transcript of 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 [email protected]
Example: ssh [email protected] 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.