WebFund 2016W Lecture 5

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