CTEC2712 Web application development

Hypermedia controls

Hypermedia as the engine of application state

Dr Graeme Stuart

Contents

  1. Hypertext & Hypermedia
  2. HTTP
  3. Hypermedia as the engine of application state
  4. HTTP Request Methods
  5. Hypermedia controls
  6. The input element
  7. The label element
  8. Input types
  9. More input types
  10. Fieldsets and required fields
  11. Select boxes
  12. Categorical data
  13. Input validation
  14. Form data
  15. Response Codes
  16. 303 See other

Hypertext & Hypermedia

Ted Nelson, Brief Words on the Hypertext, 23 January 1967

Ted Nelson a diagram of a hypertext document

“Hypertext is a recent coinage. Hyper- is used in the mathematical sense of extension and generality (as in hyperspace, hypercube) rather than the medical sense of excessive (hyperactivity).”

1

HTTP

HyperText Transfer Protocol is the core mechanism for communicating between web clients (browsers) and web servers.

A diagram showing HTTP request and response

MDN has a great set of pages describing HTTP.

2

Hypermedia as the engine of application state

The architectural style of the web is known as REpresentational State Transfer (REST).

Roy Fielding

One of the key pillars of RESTful architecture is HyperMedia as the engine of application state (HATEOAS).

In HATEOAS, the client (browser) has no knowledge of your application. All it knows is the entry point URL (possibly a hyperlink from another site). It receives hypermedia controls embedded in HTML.

Hypermedia controls allow the user to make subsequent requests that change the state of the application.

This is Roy Fielding. He described REST in his PhD thesis in 2000.

3

HTTP Request Methods

HTML only allows two request methods, GET and POST. They imply a different intent.

GET requests are safe and idempotent.

They imply a read-only request for a representation of a given resource. They can be issued and reissued many times without any problem.

  • GET /items (give me the items)
  • GET /items/123 (give me item number 123)

POST requests are neither safe nor are they guaranteed to be idempotent

They imply a request to change server state. Issuing the same POST request multiple times may change the state each time. e.g. by adding duplicate records into a collection.

Fundamentally, they submit data for the resource to process.

HTTP semantics is about intent, GET requests are for read-only operations, POST requests modify state.

4

Hypermedia controls

In a normal scenario, we load a page using a GET request, e.g. with a hyperlink.

1

<a href="#">link</a>

It is also possible to load a page by submitting a form. Forms issue GET requests by default, but can have their method attribute set to POST.

1
2
3

<form method="POST">
    <button>submit</button>
</form>

Anchors and forms are examples of hypermedia controls.

5

The input element

<input> elements are inline and void (i.e. they have no content and don’t need closing tags). The <input> element is extremely versatile, attributes are used to change its behaviour.

The default <input> is a text input like this:

1

<input>

Adding placeholder text is easy:

1

<input placeholder="enter your name">

Default values can also be provided:

1

<input value="My name">

We will only cover some of the basics.

6

The label element

For accessibility, <input> elements should have an associated <label> element.

1
2
3
4

<form>
    <label for="username">User name:</label>
    <input id="username">
</form>

1
2
3
4

<form>
    <input aria-label="search">
    <button type="submit">Search</button>
</form>

In some use cases, you may not want/need a visible <label>. In this case, you can use an aria-label attribute.

7

Input types

By default <input> elements are generic text fields but they can be modified with the type attribute.

1
2
3
4

<form>
    <label for="number">number: </label>
    <input id="number" type="number" value="90">
</form>

1
2
3
4

<form>
    <label for="range">range: </label>
    <input id="range" type="range" value="75">
</form>

1
2
3
4

<form>
    <label for="color">color: </label>
    <input id="color" type="color" value="#bb0060">
</form>

There are many input field types available. Some of these were introduced with HTML5.

8

More input types

Getting dates and times.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<form>
    <label for="date">date: </label>
    <input id="date" type="date">
    <label for="time">time: </label>
    <input id="time" type="time">
    <label for="datetime-local">datetime-local: </label>
    <input id="datetime-local" type="datetime-local">
    <label for="month">month: </label>
    <input id="month" type="month">
</form>

Make sure you use these where possible.

9

Fieldsets and required fields

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<form action="/login" method="post">
  <fieldset>
    <legend>Sign in</legend>
    <label for="username">Username: </label>
    <input id="username" name="username" required>
    <label for="password">Password: </label>
    <input id="password" name="password" type="password" required>
    <input type="submit">
  </fieldset>
</form>

1
2
3
4
5
6
7
8
9

<form>
  <fieldset>
    <legend>Options</legend>
    <label for="a">Option A:</label> <input id="a" type="checkbox">
    <label for="b">Option B:</label> <input id="b" type="checkbox">
    <label for="c">Option C:</label> <input id="c" type="checkbox" checked="1">
    <label for="d">Option D:</label> <input id="d" type="checkbox">
  </fieldset>
</form>

We can use <fieldset> elements to organise <inputs> into groups.

10

Select boxes

Select boxes need nested options.

1
2
3
4
5
6
7
8

<form>
    <label for="colour">Colour:</label>
    <select name="colour" id="colour">
        <option value="red" selected>Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
    </select>
</form>

Only one option can be selected

11

Categorical data

Radio buttons need to be grouped using the name attribute.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<form>
    <fieldset>
        <legend>Colour</legend>
        <label for="red">Red: </label>
        <input type="radio" id="red" name="colour" value="red">
        <label for="green">Green: </label>
        <input type="radio" id="green" name="colour" value="green">
        <label for="blue">Blue: </label>
        <input type="radio" id="blue" name="colour" value="blue">
    </fieldset>
    <input type="submit">
</form>

The value attribute will be submitted as the value of the name key.

12

Input validation

Validation used to be really annoying, now its easy. Inputs with type="tel", type="url" and type="email" provide basic checking which is detected by the pseudo-classes :valid and :invalid. We can also add the required attribute to activate the :invalid state on empty values.

1
2
3
4
5
6
7
8

<form class="validation-demo">
    <label for="phone">Tel:</label>
    <input type="tel" id="phone" name="phone" 
      pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required>
    <label for="email">email: </label>
    <input id="email" type="email" required>
    <input type="submit">
</form>

Forms will only submit when all inputs are valid. They also have the same pseudo-classes so can also be styled.

13

Form data

Submitting forms passes data to the server only for elements with a name attribute.

1
2
3
4
5
6

<form>
    <label for="nope">Not included</label>
    <input id="nope" value="data ignored">
    <label for="yep">Included!</label>
    <input id="yep" name="key" value="data submitted">
</form>

GET requests will include data as search parameters within the URL and are useful for adding detail to a request, e.g. filtering or sorting results.

POST requests include data in the request body and (when served over HTTPS) can be used for sensitive data.

The web application server needs to understand what is being requested by interpreting the URL the method and the data.

14

Response Codes

Code

HTTP Response Codes should reflect the status of the processed request.

200 OK

No problem, your request was processed successfully.

303 See Other

The result can be seen at another location. The browser will GET the provided URL.

400 Bad request

This doesn’t make sense. Your request was not processed.

401 Unauthorized

Poorly named as this really means unauthenticated, i.e “I don’t know who you are”.

403 Forbidden

I know you, but you can’t have the requested resource.

404 Not found

I’m not sure what you were trying to do because this resource doesn’t exist.

500 Internal server error

Wait… something went wrong. I don’t feel well.

15

303 See other

The POST method is not idempotent so successful requests must be handled carefully.

Successful POST requests cannot return simple HTML responses with 200 OK. If they do, then the browser can refresh to reissue the same request.

Unsuccessful POST requests can be reissued safely so they can return an HTML response.

A common solution is to return a 303 See Other and add a Location header with a path to a resource which shows the change.

They can return a failure status code (such as 400, 404, 401 etc) to explain why they didn’t work. The HTML response should include advice as to how the user should proceed.

A browser receiving a 303 See Other status code will look for the Location header and immediately issue a GET request, thus loading a new resource.

16

Hypermedia controls

If you have any questions, now is a good time to ask.

Thanks for listening
Dr Graeme Stuart