WebFund 2016W Lecture 5: Difference between revisions

From Soma-notes
← Older edit
LeeCroft (talk | contribs)
71 edits
No edit summary
 
Line 23: Line 23:
</html>
</html>
</source>
</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

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