Networked Media Class 2

NPM

npm is the node package manager. It is the common way to install any node package which add to the base functionality of node.

Search for Packages and install:

npm install package_name

Express

Express is a framework for making HTTP servers with node.

To install Express you use npm in the directory that will contain your project:

npm install express

Routes

A "route" is how the server responds to a specific request based on the request's "path"

Here is a basic Express server which responds with "Hello World" when the client requests the path "/":

var express = require('express')
var app = express()

app.get('/', function (req, res) {
  res.send('Hello World!')
})

app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
})

http://IP:3000/

Of course a route can be for any "path", here is an example for "/somethingelse":

app.get('/somethingelse', function (req, res) {
  res.send('Hello World!');
});

More information:
Express Routing Guide

Static files

Express can be configured to serve static files as well as dynamic routes. In this example any file in the "public" directory will be served if it's name is requested:

app.use(express.static('public'));

Dynamic files

If you would like to dynamically serve a file based upon a request to a "route" you can use the "sendFile" function:

app.get('/randomfile', function (req, res) {
	var fileToSend = "somerandomfile.txt";
	res.sendfile(fileToSend, {root: './public'}); // Files inside "public" folder
});

HTML Forms

Forms allow the page to take input from a user and send it to a server for processing. Also, using JavaScript the page can be made responsive or interactive by respond to form related data or events.

Putting a form on a page is as simple as using the various form tags nested within a <form> element.

	<form>
	
	</form>

Form Elements

Input

There is an entire class of input type form elements Text Field:

<input type="text" name="textfield" value="The Value" />

Allows text to be entered. The "value" attribute can be used to specify a default value.

Hidden Field:

<input type="hidden" name="hiddenfield" value="The Value" />

> Allows a value to be in the form but not displayed to the user. The "value" attribute specifies the value.

Button:

<input type="button" name="pushbutton" value="Button" />

Button that can be pressed by the user. The "value" attribute is what displays on the page. Generally this is used to trigger an event that will call some JavaScript.

Submit:

<input type="submit" name="submitbutton" value="Submit" />

A button that is used to submit the form to the server. The "value" attribute is what display inside the button.

Reset:

<input type="reset" name="resetbutton" value="Reset" />

A button that is used to reset the form to the state it was when loaded. The "value" attribute is what display inside the button.

Radio Buttons:
Radio 1:
Radio 2:

<input type="radio" name="radiobutton" value="Radio 1" />
<input type="radio" name="radiobutton" value="Radio 2" />

A series of radio buttons that allow the user to choose between a series of options. Each one has the same "name" attribute but a different "value" attribute.

Select List:

<select name="selectlist">
	<option value="option1">Option 1</option>
	<option value="option2">Option 2</option>
</select>

A drop down list of options that allows the user to select one. Multiple selections can be enabled by adding the keyword "multiple" in the "select" tag.

HTML 5 Input Elements

With HTML 5 came a whole new set of input elements Color:

<input type="color" name="somecolor">

Allows the user to select a color using a standard color picker.

Range:

<input type="range" name="arange" min="0" max="10">

Allows the user to input a possible range of values.

and a whole bunch more: HTML5 Input Types

Sending Data

In order for a form to submit information to a server for processing, we need to use the "action" and "method" attributes.

method="POST"

Using method="POST" on a form sends the data along with the request to the server behind the scenes (with the HTTP headers) and isn't visible to the user so it can't be book marked or otherwise saved. It might be a bit more private in this manner.

method="GET"

Using method="GET" on a form sends the data "url encoded" as a query string to the server which displays on the URL. You would want to use this for search results that are to be shared or bookmarked for later retrieval.

action

The "action" attribute is where to send the form data when the submit button is pressed.

<form method="GET" action="/processit">
	<input type="text" name="textfield" value="The Value" />

	<input type="submit" name="submitbutton" value="Submit" />

</form>

Receiving Data

Express receives the data from the form as part of the request. You have to make a "route" for "post" if the method is post or "get" if the method is get.

POST route

First we need to install a piece of "middleware" to work with POST data in Express. The body-parser will take care of parsing the post as it comes in making the variables available to us in the the "route":

npm install body-parser

at the top of our server.js we need to add these lines (after "var app = express()")

var bodyParser = require('body-parser');
var urlencodedParser = bodyParser.urlencoded({ extended: true }); // for parsing form data
app.use(urlencodedParser);

Now, each "name" from the form elements will come in as part of the req.body object.

app.post('/processit', function(req, res) {
    var textvalue = req.body.textfield;

    res.send("You submitted: " + textvalue);
});

GET Route

If a form is submitted with a method="GET" the data will come in on the query string and can be parsed as follows:

app.get('/processit', function(req, res) {
    var textvalue = req.query.textfield;

    res.send("You submitted: " + textvalue);
});