HTML and JavaScript interface

In the first part we've built a web server capable to serve static files and expose each CRUD (create, read, update and delete) operation. In this second part we will develop a minimal interface to demonstrate the communication between the frontend and the backend components.
Note that frontend development is an iterative process. You usually start from some sketches and aim to get then validated with the users. Then you move into more details as you create a high fidelity design. 
In the end you turn the design into HTML and CSS. Design principles are not covered here since we will be focusing on the technologies and we will be using frameworks like Bootstrap or Material UI.
HTML Document
This is the html document to start from. It contains the table and the form we will be using to implement the CRUD operations.
1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <title>Message list</title>
5
    </head>
6
    <body>
7
        <h1>Messages</h1>
8
    </body>
9
    <div id="content">
10
        <table style="width:100%;">
11
        <tr>
12
            <th>ID</th>
13
            <th>Subject</th>
14
            <th>Name</th> 
15
            <th>Message</th>
16
            <th>Actions</th>
17
        </tr>
18
        <tr>
19
            <td>1</td>
20
            <td>Subject data</td>
21
            <td>Name data</td>
22
            <td>Message data</td>
23
            <td>
24
                <button>Edit</button>
25
                <button>Delete</button>
26
            </td>
27
        </tr>
28
    </table>
29
    
30
    <form>
31
      <input type="hidden" name="id" id="id" /><br />
32
      Name:<br />
33
      <input type="text" name="name" id="name" /><br />
34
      Subject:<br />
35
      <input type="text" name="subject" id="subject"><br/>
36
      Message:<br />
37
      <textarea name="message" id="message"></textarea> <br/>
38
      <input type="submit" value="Save message">
39
      <input type="reset" value="Cancel">
40
    </form>
41
</div>
42
</html>
Copied!
Displaying data on load
Each time a page is loaded the onload event is triggered. We will use this event to fire the showMessages() function
1
<script type="text/javascript">
2
    window.onload = () => {
3
        console.log('Page loaded')
4
    }
5
</script>
Copied!
Reading messages from the backend (GET)
1
async function showMessages() {
2
    try {
3
        let results = await fetch('/messages').then(response => response.json())
4
    
5
    
6
        let html = ` <table style="width:500px;">
7
                <tr>
8
                    <th>ID</th>
9
                    <th>Subject</th>
10
                    <th>Name</th> 
11
                    <th>Message</th>
12
                    <th>Actions</th>
13
                </tr>`
14
    
15
        results.forEach(function(element) {
16
            html += `<tr>
17
                        <td>${element.id}</td>
18
                        <td>${element.name}</td>
19
                        <td>${element.subject}</td>
20
                        <td>${element.message}</td>
21
                        <td>
22
                            <button onClick="editMessage(${element.id})">Edit</button>
23
                            <button onClick="deleteMessage(${element.id})">Delete</button>
24
                        </td>
25
                    </tr>`
26
        })
27
    
28
        html += `</table>`
29
        document.getElementById('content').innerHTML = html
30
    } catch (error) {
31
        console.log(error)
32
    }
33
}
Copied!
Add the function on the eventonload
1
<script type="text/javascript">
2
    window.onload = () => {
3
        console.log('Page loaded')
4
        showMessages()
5
    }
6
</script>
Copied!
Handling form submit
We noticed that the default behavior of a form is to submit data via the GET method. We need to override this by passing a function on the onSubmit handle. This function will get the event that was triggered as a parameter.
1
<form onSubmit="saveMessage(event)">
2
    ...
3
</form>
Copied!
1
async function saveMessage(event) {
2
    event.preventDefault()
3
​
4
    let id = event.target.id.value
5
    
6
    let data = {
7
        name: event.target.name.value,
8
        subject: event.target.subject.value,
9
        message: event.target.message.value
10
    }
11
    
12
    let url = ''
13
    let method = ''
14
    
15
    if(id) {
16
        //make a request to PUT /messages/:id
17
        url = '/messages/' + id
18
        method = 'PUT'
19
    } else {
20
        url = '/messages'
21
        method = 'POST'
22
    }
23
    
24
    try {
25
        let result = await fetch(url, {
26
            method: method, 
27
            headers: {
28
            'Content-Type': 'application/json'
29
            },
30
            body: JSON.stringify(data)
31
        }).then(response => response.json())
32
        
33
        showMessages()
34
    } catch(err) {
35
        alert('unable to save message')
36
    }
37
    
38
}
Copied!
Delete method
DELETE/messages/:id
1
async function deleteMessage(id) {
2
    try {
3
        let url = '/messages/' + id
4
        let result = await fetch(url, {method: 'DELETE'})
5
        showMessages()
6
     } catch(err) {
7
         alert('unable to delete message')
8
     }
9
     
10
}
Copied!

Tutorial frontend-backend - Previous

RESTful API

Next - PROGRESSIVE WEB APPS (PWA)

WebTech Hub app

Last modified 1yr ago

Copy link

Contents

HTML Document

Displaying data on load

Reading messages from the backend (GET)

Handling form submit

Delete method