WebFund 2016W Lecture 5

From Soma-notes
Jump to navigation Jump to search

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
Retrieved from "https://homeostasis.scs.carleton.ca/wiki/index.php?title=WebFund_2016W_Lecture_5&oldid=20585"