WebFund 2016W Lecture 5: Difference between revisions

Latest revision as of 19:51, 24 January 2016

Video

The video from the lecture given on January 21, 2016 is now available.

Notes

formtest.html

<html>
  <head>
   <title>A simple web page</title>
  </head>
  <body>
    <h1>A SIMPLE WEB PAGE (really)</h1>
    <p>It isn't so bad.</p>
    <form action="useName" method="POST">
      What is your name?
      <input name="theName" type="text"></input>
      <input type="submit"value="Done!" />
    </form>
  </body>
</html>

Student Notes

Assignment 1

NOTE: The solutions for assignment 1 are posted on the wiki

In the async version "Finished" should be output using a callback function for wrtieFile() so that it only runs when the work is truly complete
- Note that writing fs.writeFile('output.txt', data, console.log('Finished')); will not use the console.log() as a callback. Instead, this passes the return value of the console.log(), which is undefined, as the callback.
If you want something to happen after a specific function you have to use a callback
Values given to the arguments of callback functions come from the function that calls the callback, in other words, the function to which the callback was passed as an argument
To find out what the specific arguments for a given callback are you can check the documentation for that function
Always cite any sources you use!!
Don't use fancy things that you don't understand while coding. It is a bad habit and can lead to errors that you won't know how to solve
There might be a midterm question about the filter() method

Quick Talk About Functions

Functions can be written in different ways

function theFunction(a,b){...}

function(err, param){...} --> anonymous function

var theFunction = function(a,b){...} --> this syntax is a reminder that functions are just objects

Anonymous functions are useful for one time use
You can make your own callback functions

Forms

What is a form used for?

A form is used when you want to send information to the server
The HTML syntax for a from is simply

<form action="someAction" method="GET or POST">
     What is your name? <input type="text" name="theName"/>
     <input type="submit" value="Done!"/>
</form>

A form has a method attribute and an action attribute
- The method is used to specify the type of HTTP request that will be sent when the form is submitted (usually either a POST or a GET)
  - POST is used to send data to the server
  - GET is used to ask the server for data
- The action is similar to a path on the server where the request is sent
Tinywebserver.js can't handle data being sent to it (can't handle POST)
Tinywebserver.js can currently only handle GET requests
- There is no code in it that can process POST requests
- Only processes files
A form also has nested input tags
- A self closing tag (<input ... />) can be used when there is no content that would appear between the opening and closing tags
- An input tag (of type text) displays an input field that the user can use to enter data
- For example, after the question "What is your name?" there is an input tag, which is being used to display an input field
- The second input tag, <input type="submit"...>, is used to display a button that will submit the data to the server
- The 'name' attribute of the input tag identifies the name of the input
  - This becomes part of the URL (when the method is GET) and is paired with the data that was entered in the input field
  - The name of the field gets sent to the server along with the value
  - Ideally we don't want this to all be in the URL
    - By using a POST request instead, the data is stored elsewhere in the request when it is sent to the server
    - You can see what is sent by using the developer tools on your browser and looking under 'Params'
We need code in the Web server to handle forms
The first way to process forms was by using Perl
- The problem with Perl is that it's not efficient
- Need to run Perl for every incoming request
- Solution was to run Perl continuously and integrate it into the server
Then PHP was used
- People liked PHP in the beginning because it was integrated with HTML
  - PHP allowed for programmatic parts to be added to HTML documents
- A lot of the modern Web uses PHP (Facebook, Wordpress)
  - They have separate files that are just PHP, it is not embedded in the webpage.
Why is PHP not a good thing?
- It is messy because there is code mixed in with the document
The modern solution is to separate the code and the HTML by leaving place holders in the document

Jade

Has PHP-like functionality
This is a template engine that we will be using in class
It uses HTML and its own embedded programming language
Instead of nesting Jade uses indentation
Instead of start and end tags Jade has only starts tags and without angle brackets
The server runs the Jade code
The browser only sees HTML
Anything that can be done in HTML can be done in Jade

Express

This is a Web application framework we will be using in class
This is useful because we won't have to work from scratch
Node.js is the platform that Express runs on

@@ Line 7: / Line 7: @@
 ===formtest.html===
-<source lang="html">
+<source lang="html4strict">
 <html>
    <head>
@@ Line 23: / Line 23: @@
 </html>
 </source>
+===Student Notes===
+====Assignment 1====
+NOTE: The solutions for assignment 1 are posted on the wiki
+*In the async version "Finished" should be output using a callback function for <code>wrtieFile()</code> so that it only runs when the work is truly complete
+**Note that writing <code>fs.writeFile('output.txt', data, console.log('Finished'));</code> will not use the <code>console.log()</code> as a callback. Instead, this passes the return value of the <code>console.log()</code>, which is undefined, as the callback.
+*If you want something to happen after a specific function you have to use a callback
+*Values given to the arguments of callback functions come from the function that calls the callback, in other words, the function to which the callback was passed as an argument
+*To find out what the specific arguments for a given callback are you can check the documentation for that function
+*Always cite any sources you use!!
+*Don't use fancy things that you don't understand while coding. It is a bad habit and can lead to errors that you won't know how to solve
+*There might be a midterm question about the <code>filter()</code> method
+====Quick Talk About Functions====
+*Functions can be written in different ways
+<code>function theFunction(a,b){...}</code>
+<code>function(err, param){...}</code> --> anonymous function
+<code>var theFunction = function(a,b){...}</code> --> this syntax is a reminder that functions are just objects
+*Anonymous functions are useful for one time use
+*You can make your own callback functions
+====Forms====
+What is a form used for?
+*A form is used when you want to send information to the server
+*The HTML syntax for a from is simply
+<code><pre>
+<form action="someAction" method="GET or POST">
+     What is your name? <input type="text" name="theName"/>
+     <input type="submit" value="Done!"/>
+</form>
+</pre></code>
+*A form has a method attribute and an action attribute
+**The method is used to specify the type of HTTP request that will be sent when the form is submitted (usually either a POST or a GET)
+***POST is used to send data to the server
+***GET is used to ask the server for data
+**The action is similar to a path on the server where the request is sent
+*Tinywebserver.js can't handle data being sent to it (can't handle POST)
+*Tinywebserver.js can currently only handle GET requests
+**There is no code in it that can process POST requests
+**Only processes files
+*A form also has nested input tags
+**A self closing tag (<code><input ... /></code>) can be used when there is no content that would appear between the opening and closing tags
+**An input tag (of type text) displays an input field that the user can use to enter data
+**For example, after the question "What is your name?" there is an input tag, which is being used to display an input field
+**The second input tag, <code><input type="submit"...></code>, is used to display a button that will submit the data to the server
+**The 'name' attribute of the input tag identifies the name of the input
+***This becomes part of the URL (when the method is GET) and is paired with the data that was entered in the input field
+***The name of the field gets sent to the server along with the value
+***Ideally we don't want this to all be in the URL
+****By using a POST request instead, the data is stored elsewhere in the request when it is sent to the server
+****You can see what is sent by using the developer tools on your browser and looking under 'Params'
+*We need code in the Web server to handle forms
+*The first way to process forms was by using Perl
+**The problem with Perl is that it's not efficient
+**Need to run Perl for every incoming request
+**Solution was to run Perl continuously and integrate it into the server
+*Then PHP was used
+**People liked PHP in the beginning because it was integrated with HTML
+***PHP allowed for programmatic parts to be added to HTML documents
+**A lot of the modern Web uses PHP (Facebook, Wordpress)
+***They have separate files that are just PHP, it is not embedded in the webpage.
+*Why is PHP not a good thing?
+**It is messy because there is code mixed in with the document
+*The modern solution is to separate the code and the HTML by leaving place holders in the document
+====Jade====
+*Has PHP-like functionality
+*This is a template engine that we will be using in class
+*It uses HTML and its own embedded programming language
+*Instead of nesting Jade uses indentation
+*Instead of start and end tags Jade has only starts tags and without angle brackets
+*The server runs the Jade code
+*The browser only sees HTML
+*Anything that can be done in HTML can be done in Jade
+====Express====
+*This is a Web application framework we will be using in class
+*This is useful because we won't have to work from scratch
+*Node.js is the platform that Express runs on