Server-Side Scripting/Requests

This lesson introduces HTTP GET and HTTP POST request processing.

Objectives and Skills

Objectives and skills for this lesson include:

• Understand HTTP GET and POST requests
• Understand query strings
• Create server-side HTML forms
• Process HTTP GET and POST requests

Readings

1. Wikipedia: Hypertext Transfer Protocol
2. Wikipedia: Query string
3. Wikipedia: Form (HTML)

Multimedia

1. YouTube: Handling HTTP Requests with Express JS
2. YouTube: Handling HTTP Requests with Express JS
3. YouTube: Node.js + Express - Tutorial - GET and POST Requests
4. YouTube: Flask Tutorial #4 - HTTP Methods (GET/POST) & Retrieving Form Data
5. YouTube: Using Go for a simple HTTP Request
6. YouTube: PHP Get & Post Tutorial

Examples

• Go
• Node.js (Express)
• PHP
• Python (FastAPI)
• Python (Flask)

Activities

Complete the following activities using HTML, CSS, and a server-side scripting language. Apply best practices for user interface design and your selected scripting language, including modules, comments, indentations, naming conventions, and constants. Use HTML forms and input elements for input, server-side scripts for processing, and HTML elements for output. Use separate functions for each type of processing. Create test data to validate the accuracy of each program. Avoid global variables by passing parameters and returning results. Add comments at the top of code modules and include references to any resources used. Add the completed code to your website as /lesson3.

HTML

1. Review MathsIsFun: Measurement Index. Create a unit conversion calculator for either length, volume, or weight. For the given type of conversion, include at least three units to covert from and to. For example, length might convert from/to yards, feet, and inches or kilometers, meters, and centimeters, etc. See Calculator.net: Conversion Calculator for an advanced example of how the user interface could be designed. Include a Convert button that submits the form to the server-side script for processing.
2. Review MathsIsFun: Area of Plane Shapes. Create an area calculator. Include at least three different shapes to calculate the area for. See Calculator.net: Area Calculator for an advanced example of how the user interface could be designed. Include Calculate buttons that submit the form to the server-side script for processing.

HTML and CSS

1. Review Wikipedia: Body mass index and MathsIsFun: Metric - US/Imperial Conversion Charts. Create a BMI calculator. Allow the user to enter their height and weight in either US or metric units. Display the full BMI scale using a format of your choice and highlight the user's place on the scale with your choice of CSS formatting (background color, border, color, font style, font weight, etc.). See Calculator.net: BMI Calculator for an advanced example of how the user interface could be designed. Include a Calculate button that submits the form to the server-side script for processing.
2. Review UMN: Saffir-Simpson and Fujita Scale. Create a wind speed categorization program. Allow the user to enter a wind speed and select either hurricane or tornado. Display the corresponding wind scale and highlight the user's entry on the scale using your choice of CSS formatting (background color, border, color, font style, font weight, etc.). Include a Display button that submits the form to the server-side script for processing.

Lesson Summary

Additional items may be contributed by course participants

• A method is how a server responds to an HTTP request. There is a method to corresponds to every HTTP verb or method, but the most common are: GET, POST, PUT, PATCH and DELETE.
  • GET - used to request data from a specified source. It can be bookmarked and cached. The method is less secured because the data sent is part of the URL.
  • POST - used to send data to a server to create/update a resource. It can not be bookmarked and cached. The method is more secured because the parameters are not stored in browser history or in web server logs.
  • PUT - used to send data to a server to create/update a resource. Calling the same PUT request multiple times will always produce the same result.
  • PATCH - applies partial modifications to a resource.
  • DELETE - method deletes the specified resource.
• After a request is made, the server sends a response to the client with a code that tells the client the state of the data requested.
• When a form uses the GET method to send form data to the server, the data is appended to the URL in a query string. The user will be able to see the name/value pairs in the browser address bar and can copy/paste the URL. This is useful if the user wants to send the URL to another user or bookmark it. This method should not be used in cases where the user should not see the data being sent, for example, login information. When a form uses the POST method to send form data to the server, the data is sent to the server in the body of the HTTP request. The user will not see the name/value pairs in the URL of the request. The server will retrieve the name/value pairs from the body object of the request.
• Server side processing of HTML forms allows for some things client side processing cannot, like authenticating logins.

Key Terms

Additional items may be contributed by course participants

app.param()

app.param() is a function in Express module to define parameter middleware that executes before the route is called. It is commonly used to validate the request parameter.

body-parser

The body-parser package is middleware that parses data that has been posted to a route. The body-parser parses URL-encoded data or JSON data and adds the parsed values to the request.body object.

query string

A string of characters in a URL with values and parameters. The format generally is "/?parameter1=value1parameter&parameter2=value2...".

request

A message sent from the client to the server.

response code

After the server receives a request from the client, it sends back a response to the client. That response includes a code that will tell the user the status of the data sent. The most common ones are 200(Ok) and 404 (Not found).

See Also

• W3Schools: HTTP Methods GET vs. POST
• Handle GET and POST Request in Express

References

← Routes and Templates

Server-Side Scripting

Iteration →