Communications Lab :: Web Lecture 4: Sinatra and Datamapper
Reminders <ul><ul><li>Next week is Columbus Day, no class.  </li></ul></ul><ul><ul><li>Assignment #3 due today </li></ul><...
Today <ul><ul><li>Sinatra review </li></ul></ul><ul><li>  </li></ul><ul><ul><li>How to create more applications in Sinatra...
Data Structures
Sinatra Review <ul><li>Routes </li></ul><ul><ul><li>paths in urls </li></ul></ul><ul><ul><li>you can define the code that ...
Creating a new application <ul><ul><li>First... </li></ul></ul><ul><ul><ul><li>Download the script at https://gist.github....
Creating a new application <ul><ul><li>Type in the following commands to connect to your remote server account (the one fr...
DataMapper <ul><ul><li>Object-relational mapper library that helps us save and retrieve data in Sinatra </li></ul></ul><ul...
Setting up DataMapper <ul><ul><li>Add the following line  at the top of the document : </li></ul></ul><ul><li>require 'dm-...
Setting up DataMapper <ul><ul><li>Next,  add this line in app.rb  to setup DataMapper </li></ul></ul><ul><li>DataMapper::s...
DB folder <ul><ul><li>In your sinatra app folder,  a folder named &quot;db&quot; (if you don't have it yet, Sinatra will a...
DataMapper <ul><ul><li>Create a class with the name of the object you want to store. </li></ul></ul><ul><ul><li>In this ex...
DataMapper <ul><ul><li>First, always  start with the word &quot;class&quot;  followed by space and the name of the object ...
DataMapper <ul><ul><li>The first statement inside of the block specifies that we are  working with DataMapper . </li></ul>...
DataMapper <ul><ul><li>Next, specify the  properties  we are storing or retrieving. </li></ul></ul><ul><ul><li>This means ...
DataMapper <ul><ul><li>Take note of the syntax used.  The word &quot;property&quot;  is used before each property, followe...
DataMapper <ul><ul><li>You need to have the  :id  property. </li></ul></ul><ul><ul><li>The ID  assigns a number to each en...
DataMapper <ul><li>Example of  :id  property. This is what the stored data will look like. </li></ul><ul><li>---  </li></u...
DataMapper <ul><ul><li>Other property types you can store </li></ul></ul><ul><li>   property :name,                 String...
Storing Data with POST <ul><li>get ' /db_rectangle ' do </li></ul><ul><li>     form = &quot;&quot; </li></ul><ul><li>     ...
Storing Data <ul><li>post &quot; /create_rectangle &quot; do </li></ul><ul><li>   rectangle =  Rectangle.new </li></ul><ul...
Storing Data <ul><li>post &quot;/create_rectangle&quot; do </li></ul><ul><li>   rectangle = Rectangle.new </li></ul><ul><l...
Storing Data <ul><li>post &quot;/create_rectangle&quot; do </li></ul><ul><li>   rectangle = Rectangle.new </li></ul><ul><l...
YAML <ul><ul><li>Abbreviation for  “YAML Ain’t Markup Language” </li></ul></ul><ul><ul><li>File extension  .yml  Example: ...
YAML <ul><li>---  </li></ul><ul><li>- x: 11 </li></ul><ul><li>   y: 22 </li></ul><ul><li>   id: 1 </li></ul>
YAML Structure and Syntax <ul><ul><li>Use  indentation  to define structure and syntax (tab spaces) </li></ul></ul><ul><li...
YAML Structure and Syntax <ul><ul><li>Mappings use  colon and space : &quot;key: value&quot; </li></ul></ul><ul><ul><li>Us...
YAML Structure and Syntax <ul><ul><li>Dashes are used to create “bullet” lists.  Each entry starts with a dash and a space...
YAML Structure and Syntax <ul><ul><li>Three dashes  separate documents &quot;---&quot; </li></ul></ul><ul><li>Example: </l...
YAML Structure and Syntax <ul><ul><li>Three dots indicate  the end of a document &quot;...&quot; </li></ul></ul><ul><ul><l...
YAML Structure and Syntax <ul><ul><li>Hashes indicate  comments &quot;#&quot; </li></ul></ul><ul><li>Example: </li></ul><u...
Reading back the data <ul><ul><li>Set a variable for the HTML and return at the end </li></ul></ul><ul><li>   output = &qu...
Reading back the data <ul><ul><li>Loop through all the data in the YAML file </li></ul></ul><ul><li>   output = &quot;&quo...
Reading back the data <ul><ul><li>Set a variable named  &quot;r&quot;  which becomes equal to each entry in the YAML file ...
Reading back the data <ul><ul><li>Notice the syntax for the FOR LOOP </li></ul></ul><ul><li>   for  r  in  Rectangle.all <...
Reading back the data <ul><ul><li>Add all the pairs as HTML strings in the output variable </li></ul></ul><ul><ul><li>For ...
Retrieving a certain entry <ul><ul><li>This is why the id is useful. We can keep close track of all entries and retrieve t...
Retrieving a certain entry <ul><ul><li>Displaying the  x value  for a certain entry: </li></ul></ul><ul><li>get &quot;/rec...
Updating a certain entry <ul><ul><li>Displaying the  x value  for a certain entry: </li></ul></ul><ul><li>get &quot;/recta...
Deleting entries <ul><li>get &quot;/clearRectangles&quot; do </li></ul><ul><li>   for rectangle in Rectangle.all </li></ul...
Deleting entries <ul><ul><li>Let's create a company employee list. </li></ul></ul><ul><ul><li>List first name, last name a...
Next Time... <ul><ul><li>JavaScript </li></ul></ul><ul><ul><ul><li>Programming language on client side </li></ul></ul></ul...
Your Final Project <ul><li>Think about all the tools we've studied so far: </li></ul><ul><ul><li>HTML - especially forms <...
Assignment #4 <ul><ul><li>Due next class, in two weeks </li></ul></ul><ul><ul><li>Covers Datamapper, storing and retrievin...
Upcoming SlideShare
Loading in …5
×

Lecture 4 - Comm Lab: Web @ ITP

601 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
601
On SlideShare
0
From Embeds
0
Number of Embeds
140
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lecture 4 - Comm Lab: Web @ ITP

  1. 1. Communications Lab :: Web Lecture 4: Sinatra and Datamapper
  2. 2. Reminders <ul><ul><li>Next week is Columbus Day, no class.  </li></ul></ul><ul><ul><li>Assignment #3 due today </li></ul></ul>
  3. 3. Today <ul><ul><li>Sinatra review </li></ul></ul><ul><li>  </li></ul><ul><ul><li>How to create more applications in Sinatra </li></ul></ul><ul><ul><li>Datamapper and Sinatra - we'll take a look at how to store and retrieve data </li></ul></ul>
  4. 4. Data Structures
  5. 5. Sinatra Review <ul><li>Routes </li></ul><ul><ul><li>paths in urls </li></ul></ul><ul><ul><li>you can define the code that runs on each route </li></ul></ul><ul><li>Parameters </li></ul><ul><ul><li>variable values used to pass from url or from one route to another </li></ul></ul><ul><li>Including HTML through Sinatra </li></ul><ul><ul><li>Storing HTML in variables </li></ul></ul><ul><ul><li>Adding strings </li></ul></ul><ul><ul><li>Returning the variable containing HTML </li></ul></ul>
  6. 6. Creating a new application <ul><ul><li>First... </li></ul></ul><ul><ul><ul><li>Download the script at https://gist.github.com/1258552 </li></ul></ul></ul><ul><ul><ul><li>Rename it to new_sinatra_app.rb </li></ul></ul></ul><ul><ul><li>Next.. </li></ul></ul><ul><ul><ul><li>Open Terminal </li></ul></ul></ul><ul><ul><ul><ul><li>If you have Windows, download  Putty </li></ul></ul></ul></ul>
  7. 7. Creating a new application <ul><ul><li>Type in the following commands to connect to your remote server account (the one from FTP) </li></ul></ul><ul><ul><ul><li>ssh netID@stu.itp.nyu.edu </li></ul></ul></ul><ul><ul><ul><ul><li>Example: ssh irs221@stu.itp.nyu.edu </li></ul></ul></ul></ul><ul><ul><ul><li>type in password when prompted </li></ul></ul></ul><ul><ul><ul><li>cd sinatra </li></ul></ul></ul><ul><ul><ul><li>ruby new_sinatra_app.rb name_of_app </li></ul></ul></ul><ul><ul><ul><ul><li>Replace &quot;name_of_app&quot; with the name you want </li></ul></ul></ul></ul>
  8. 8. DataMapper <ul><ul><li>Object-relational mapper library that helps us save and retrieve data in Sinatra </li></ul></ul><ul><ul><li>Easy to set up with Sinatra </li></ul></ul>
  9. 9. Setting up DataMapper <ul><ul><li>Add the following line at the top of the document : </li></ul></ul><ul><li>require 'dm-core' </li></ul><ul><ul><li>You need this line whenever you are creating a Sinatra app that handles data </li></ul></ul><ul><ul><li>You can add this line right after these: </li></ul></ul><ul><li>require 'rubygems' </li></ul><ul><li>require 'sinatra' </li></ul>
  10. 10. Setting up DataMapper <ul><ul><li>Next, add this line in app.rb to setup DataMapper </li></ul></ul><ul><li>DataMapper::setup(:default, {:adapter => 'yaml', :path => 'db'}) </li></ul><ul><ul><li>This creates a connection to your data </li></ul></ul><ul><ul><li>We will be accessing data in YAML files </li></ul></ul><ul><ul><li>Sets the path to where the data is , in our case the &quot; db &quot; folder </li></ul></ul>
  11. 11. DB folder <ul><ul><li>In your sinatra app folder,  a folder named &quot;db&quot; (if you don't have it yet, Sinatra will automatically create it for you when you store the first data) </li></ul></ul><ul><ul><li>&quot;db&quot; is short for database </li></ul></ul><ul><ul><li>This is where you'll put your data files </li></ul></ul><ul><ul><li>These data files are called YAML files , and they have the .yml file extension </li></ul></ul>
  12. 12. DataMapper <ul><ul><li>Create a class with the name of the object you want to store. </li></ul></ul><ul><ul><li>In this example, we will store rectangles.  </li></ul></ul><ul><li>class Rectangle </li></ul><ul><li>   include DataMapper::Resource </li></ul><ul><li>   property :id,     Serial </li></ul><ul><li>   property :x,      Integer </li></ul><ul><li>   property :y,      Integer </li></ul><ul><li>end </li></ul>
  13. 13. DataMapper <ul><ul><li>First, always start with the word &quot;class&quot; followed by space and the name of the object data you are storing. </li></ul></ul><ul><ul><li>Have the first letter of the name capitalized . </li></ul></ul><ul><li>class Rectangle </li></ul><ul><li>   include DataMapper::Resource </li></ul><ul><li>   property :id,     Serial </li></ul><ul><li>   property :x,      Integer </li></ul><ul><li>   property :y,      Integer </li></ul><ul><li>end </li></ul>
  14. 14. DataMapper <ul><ul><li>The first statement inside of the block specifies that we are working with DataMapper . </li></ul></ul><ul><li>class Rectangle </li></ul><ul><li>   include DataMapper::Resource </li></ul><ul><li>   property :id,     Serial </li></ul><ul><li>   property :x,      Integer </li></ul><ul><li>   property :y,      Integer </li></ul><ul><li>end </li></ul>
  15. 15. DataMapper <ul><ul><li>Next, specify the properties we are storing or retrieving. </li></ul></ul><ul><ul><li>This means we are making clear which parameters we are storing. </li></ul></ul><ul><li>class Rectangle </li></ul><ul><li>   include DataMapper::Resource </li></ul><ul><li>   property :id,     Serial </li></ul><ul><li>   property :x,      Integer </li></ul><ul><li>   property :y,      Integer </li></ul><ul><li>end </li></ul>
  16. 16. DataMapper <ul><ul><li>Take note of the syntax used. The word &quot;property&quot; is used before each property, followed by space , colon , property name , comma and the type of the property. </li></ul></ul><ul><li>class Rectangle </li></ul><ul><li>   include DataMapper::Resource </li></ul><ul><li>   property :id,     Serial </li></ul><ul><li>   property :x,      Integer </li></ul><ul><li>   property :y,      Integer </li></ul><ul><li>end </li></ul>
  17. 17. DataMapper <ul><ul><li>You need to have the :id  property. </li></ul></ul><ul><ul><li>The ID assigns a number to each entry . </li></ul></ul><ul><ul><li>The Serial Type means it is a unique number that will auto-increment (increases by 1 every time) </li></ul></ul><ul><li>class Rectangle </li></ul><ul><li>   include DataMapper::Resource </li></ul><ul><li>   property :id,     Serial </li></ul><ul><li>   property :x,      Integer </li></ul><ul><li>   property :y,      Integer </li></ul><ul><li>end </li></ul>
  18. 18. DataMapper <ul><li>Example of  :id  property. This is what the stored data will look like. </li></ul><ul><li>---  </li></ul><ul><li>- x: 11 </li></ul><ul><li>   y: 22 </li></ul><ul><li>   id: 1 </li></ul><ul><li>- x: 522 </li></ul><ul><li>   y: 15 </li></ul><ul><li>   id: 2 </li></ul>
  19. 19. DataMapper <ul><ul><li>Other property types you can store </li></ul></ul><ul><li>   property :name,                 String </li></ul><ul><li>   property :time_stored,         DateTime </li></ul>
  20. 20. Storing Data with POST <ul><li>get ' /db_rectangle ' do </li></ul><ul><li>     form = &quot;&quot; </li></ul><ul><li>     form += '<form action=&quot;/~irs221/sinatra/example1 /create_rectangle &quot; method=&quot; POST &quot;>' </li></ul><ul><li>     form += '<p><label>text:</label> <input type=&quot;text&quot; name=&quot;text&quot; /></p>' </li></ul><ul><li>     form += '<p><label>x:</label> <input type=&quot;text&quot; name=&quot;x&quot; /></p>' </li></ul><ul><li>     form += '<p><label>y:</label> <input type=&quot;text&quot; name=&quot;y&quot; /></p>' </li></ul><ul><li>     form += '<p><label>color:</label> <input type=&quot;text&quot; name=&quot;color&quot; /></p>' </li></ul><ul><li>     form += '<p><input type=&quot;submit&quot; value=&quot;create&quot; /></p>' </li></ul><ul><li>     form += '</form>' </li></ul><ul><li>     form </li></ul><ul><li>end </li></ul>
  21. 21. Storing Data <ul><li>post &quot; /create_rectangle &quot; do </li></ul><ul><li>   rectangle = Rectangle.new </li></ul><ul><li>end </li></ul><ul><ul><li>Create an instance of the Rectangle class </li></ul></ul><ul><ul><li>This creates a Rectangle with the properties defined in &quot;class Rectangle&quot;: x, y, and id. </li></ul></ul>
  22. 22. Storing Data <ul><li>post &quot;/create_rectangle&quot; do </li></ul><ul><li>   rectangle = Rectangle.new </li></ul><ul><li>   rectangle.x = params[:x] </li></ul><ul><li>   rectangle.y = params[:y] </li></ul><ul><li>end </li></ul><ul><ul><li>Set the value of the properties defined, here x and y, to the value of the inputs from the form. </li></ul></ul><ul><ul><li>No need to set the value of the ID . That will get set automatically.  </li></ul></ul><ul><li>  </li></ul>
  23. 23. Storing Data <ul><li>post &quot;/create_rectangle&quot; do </li></ul><ul><li>   rectangle = Rectangle.new </li></ul><ul><li>   rectangle.x = params[:x] </li></ul><ul><li>   rectangle.y = params[:y] </li></ul><ul><li>   rectangle.save </li></ul><ul><li>end </li></ul><ul><ul><li>Save the values to the database/file </li></ul></ul><ul><ul><li>Puts the values in the YAML file named rectangles.yml. If the file doesn't exist, it will create it automatically </li></ul></ul><ul><li>  </li></ul>
  24. 24. YAML <ul><ul><li>Abbreviation for  “YAML Ain’t Markup Language” </li></ul></ul><ul><ul><li>File extension .yml  Example: rectangles.yml </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Language for organizing data </li></ul></ul><ul><ul><li>Both easy to read by humans and easy to use by programming language </li></ul></ul><ul><li>  </li></ul>
  25. 25. YAML <ul><li>---  </li></ul><ul><li>- x: 11 </li></ul><ul><li>   y: 22 </li></ul><ul><li>   id: 1 </li></ul>
  26. 26. YAML Structure and Syntax <ul><ul><li>Use indentation to define structure and syntax (tab spaces) </li></ul></ul><ul><li>---  </li></ul><ul><li>- name: </li></ul><ul><li>     first_name: Sarah </li></ul><ul><li>     last_name: Banks </li></ul><ul><li>- x: 522 </li></ul><ul><li>   y: 15 </li></ul><ul><li>   id: 2 </li></ul>
  27. 27. YAML Structure and Syntax <ul><ul><li>Mappings use colon and space : &quot;key: value&quot; </li></ul></ul><ul><ul><li>Use  colons  to separate pairs </li></ul></ul><ul><li>Example: </li></ul><ul><li>---  </li></ul><ul><li>- x : 11 </li></ul><ul><li>   y : 22 </li></ul><ul><li>   id : 1 </li></ul>
  28. 28. YAML Structure and Syntax <ul><ul><li>Dashes are used to create “bullet” lists. Each entry starts with a dash and a space &quot;- &quot; </li></ul></ul><ul><li>Example: </li></ul><ul><li>---  </li></ul><ul><li>- x: 11 </li></ul><ul><li>   y: 22 </li></ul><ul><li>   id: 1 </li></ul><ul><li>- x: 522 </li></ul><ul><li>   y: 15 </li></ul><ul><li>   id: 2 </li></ul>
  29. 29. YAML Structure and Syntax <ul><ul><li>Three dashes separate documents &quot;---&quot; </li></ul></ul><ul><li>Example: </li></ul><ul><li>---  </li></ul><ul><li>- x: 11 </li></ul><ul><li>   y: 22 </li></ul><ul><li>   id: 1 </li></ul><ul><li>---  </li></ul><ul><li>- apples: 3 </li></ul><ul><li>   bananas: 7 </li></ul>
  30. 30. YAML Structure and Syntax <ul><ul><li>Three dots indicate the end of a document &quot;...&quot; </li></ul></ul><ul><ul><li>Optional </li></ul></ul><ul><li>Example: </li></ul><ul><li>---  </li></ul><ul><li>- x: 11 </li></ul><ul><li>   y: 22 </li></ul><ul><li>   id: 1 </li></ul><ul><li>... </li></ul>
  31. 31. YAML Structure and Syntax <ul><ul><li>Hashes indicate comments &quot;#&quot; </li></ul></ul><ul><li>Example: </li></ul><ul><li>---  </li></ul><ul><li># x and y values for our rectangles </li></ul><ul><li>- x: 11 </li></ul><ul><li>   y: 22 </li></ul><ul><li>   id: 1 </li></ul>
  32. 32. Reading back the data <ul><ul><li>Set a variable for the HTML and return at the end </li></ul></ul><ul><li>   output = &quot;&quot; </li></ul><ul><li>   for r in Rectangle.all </li></ul><ul><li>     output += <<-HTML </li></ul><ul><li>#{r.x},#{r.y} </li></ul><ul><li>HTML </li></ul><ul><li>   end </li></ul><ul><li>   output </li></ul>
  33. 33. Reading back the data <ul><ul><li>Loop through all the data in the YAML file </li></ul></ul><ul><li>   output = &quot;&quot; </li></ul><ul><li>   for r in Rectangle.all </li></ul><ul><li>     output += <<-HTML </li></ul><ul><li>#{r.x},#{r.y} </li></ul><ul><li>HTML </li></ul><ul><li>   end </li></ul><ul><li>   output </li></ul>
  34. 34. Reading back the data <ul><ul><li>Set a variable named &quot;r&quot; which becomes equal to each entry in the YAML file incrementally. </li></ul></ul><ul><ul><li>Rectangle.all retrieves all the entries in the YAML File </li></ul></ul><ul><li>   for r in Rectangle.all </li></ul><ul><li>     output += <<-HTML </li></ul><ul><li>#{r.x},#{r.y} </li></ul><ul><li>HTML </li></ul><ul><li>   end </li></ul>
  35. 35. Reading back the data <ul><ul><li>Notice the syntax for the FOR LOOP </li></ul></ul><ul><li>   for r in Rectangle.all </li></ul><ul><li>     output += <<-HTML </li></ul><ul><li>#{r.x},#{r.y} </li></ul><ul><li>HTML </li></ul><ul><li>   end </li></ul>
  36. 36. Reading back the data <ul><ul><li>Add all the pairs as HTML strings in the output variable </li></ul></ul><ul><ul><li>For each Rectangle, take the value of the x property and the y property and separate them by a comma. </li></ul></ul><ul><li>   for r in Rectangle.all </li></ul><ul><li>     output += <<-HTML </li></ul><ul><li>#{ r.x },#{ r.y } </li></ul><ul><li>HTML </li></ul><ul><li>   end </li></ul>
  37. 37. Retrieving a certain entry <ul><ul><li>This is why the id is useful. We can keep close track of all entries and retrieve them individually </li></ul></ul><ul><li>get &quot;/rectangles/ :id &quot; do </li></ul><ul><li>  Rectangle.get params[:id] </li></ul><ul><li>end </li></ul>
  38. 38. Retrieving a certain entry <ul><ul><li>Displaying the x value for a certain entry: </li></ul></ul><ul><li>get &quot;/rectangles/:id&quot; do </li></ul><ul><li>   output = &quot;&quot; </li></ul><ul><li>   r = Rectangle.get params[:id] </li></ul><ul><li>   output += String(r.x) </li></ul><ul><li>   output </li></ul><ul><li>end </li></ul>
  39. 39. Updating a certain entry <ul><ul><li>Displaying the x value for a certain entry: </li></ul></ul><ul><li>get &quot;/rectangles/:id&quot; do </li></ul><ul><li>   output = &quot;&quot; </li></ul><ul><li>   r = Rectangle.get params[:id] </li></ul><ul><li>   r.update(:x => 1000) </li></ul><ul><li>   output += String(r.x) </li></ul><ul><li>   output </li></ul><ul><li>end </li></ul>
  40. 40. Deleting entries <ul><li>get &quot;/clearRectangles&quot; do </li></ul><ul><li>  for rectangle in Rectangle.all </li></ul><ul><li>    rectangle.destroy </li></ul><ul><li>  end </li></ul><ul><li>  &quot;deleted all rectangles&quot; </li></ul><ul><li>end </li></ul>
  41. 41. Deleting entries <ul><ul><li>Let's create a company employee list. </li></ul></ul><ul><ul><li>List first name, last name and position </li></ul></ul><ul><ul><li>Show only the designers </li></ul></ul><ul><ul><li>Add in a stylesheet </li></ul></ul>
  42. 42. Next Time... <ul><ul><li>JavaScript </li></ul></ul><ul><ul><ul><li>Programming language on client side </li></ul></ul></ul><ul><ul><ul><li>We'll add interaction to pages </li></ul></ul></ul><ul><ul><ul><li>Heavily uses classes and ids from the HTML </li></ul></ul></ul><ul><ul><li>Start thinking about what you want to do for your final project </li></ul></ul>
  43. 43. Your Final Project <ul><li>Think about all the tools we've studied so far: </li></ul><ul><ul><li>HTML - especially forms </li></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>Sinatra routes and parameters </li></ul></ul><ul><ul><li>Datamapper </li></ul></ul><ul><li>E. g. could be another choose your own adventure game, but you could have it more intricate, include videos, pictures, have it more styled.  </li></ul><ul><li>For next class, make a proposal with your idea. </li></ul>
  44. 44. Assignment #4 <ul><ul><li>Due next class, in two weeks </li></ul></ul><ul><ul><li>Covers Datamapper, storing and retrieving data. </li></ul></ul>

×