Www.srmuniv.ac.in Sites Default Files Files Comm Lab Manual Final%281%29
Lecture 4 - Comm Lab: Web @ ITP
-
Upload
yucefmerhi -
Category
Technology
-
view
459 -
download
1
Transcript of Lecture 4 - Comm Lab: Web @ ITP
![Page 1: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/1.jpg)
Communications Lab :: Web
Lecture 4: Sinatra and Datamapper
![Page 2: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/2.jpg)
Reminders
1.Next week is Columbus Day, no class. 2.Assignment #3 due today
![Page 3: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/3.jpg)
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
![Page 4: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/4.jpg)
Data Structures
![Page 5: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/5.jpg)
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
![Page 6: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/6.jpg)
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
![Page 7: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/7.jpg)
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
![Page 8: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/8.jpg)
DataMapper
• Object-relational mapper library that helps us save and retrieve data in Sinatra
• Easy to set up with Sinatra
![Page 9: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/9.jpg)
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'
![Page 10: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/10.jpg)
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
![Page 11: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/11.jpg)
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
![Page 12: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/12.jpg)
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
![Page 13: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/13.jpg)
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
![Page 14: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/14.jpg)
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
![Page 15: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/15.jpg)
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
![Page 16: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/16.jpg)
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
![Page 17: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/17.jpg)
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
![Page 18: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/18.jpg)
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
![Page 19: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/19.jpg)
DataMapper
• Other property types you can store
property :name, String property :time_stored, DateTime
![Page 20: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/20.jpg)
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
![Page 21: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/21.jpg)
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.
![Page 22: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/22.jpg)
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.
![Page 23: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/23.jpg)
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
![Page 24: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/24.jpg)
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
![Page 25: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/25.jpg)
YAML
--- - x: 11 y: 22 id: 1
![Page 26: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/26.jpg)
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
![Page 27: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/27.jpg)
YAML Structure and Syntax
• Mappings use colon and space: "key: value"• Use colons to separate pairs
Example:--- - x: 11 y: 22 id: 1
![Page 28: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/28.jpg)
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
![Page 29: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/29.jpg)
YAML Structure and Syntax
• Three dashes separate documents "---"
Example:--- - x: 11 y: 22 id: 1--- - apples: 3 bananas: 7
![Page 30: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/30.jpg)
YAML Structure and Syntax
• Three dots indicate the end of a document "..."• Optional
Example:--- - x: 11 y: 22 id: 1...
![Page 31: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/31.jpg)
YAML Structure and Syntax
• Hashes indicate comments "#"
Example:--- # x and y values for our rectangles- x: 11 y: 22 id: 1
![Page 32: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/32.jpg)
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
![Page 33: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/33.jpg)
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
![Page 34: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/34.jpg)
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
![Page 35: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/35.jpg)
Reading back the data
• Notice the syntax for the FOR LOOP
for r in Rectangle.all output += <<-HTML#{r.x},#{r.y}HTML end
![Page 36: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/36.jpg)
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
![Page 37: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/37.jpg)
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
![Page 38: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/38.jpg)
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
![Page 39: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/39.jpg)
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
![Page 40: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/40.jpg)
Deleting entries
get "/clearRectangles" do for rectangle in Rectangle.all rectangle.destroy end "deleted all rectangles"end
![Page 41: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/41.jpg)
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
![Page 42: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/42.jpg)
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
![Page 43: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/43.jpg)
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.
![Page 44: Lecture 4 - Comm Lab: Web @ ITP](https://reader035.fdocuments.us/reader035/viewer/2022062319/5559300fd8b42a4f3d8b48d1/html5/thumbnails/44.jpg)
Assignment #4
• Due next class, in two weeks• Covers Datamapper, storing and retrieving data.