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.
document.getElementById('content').innerHTML = html
30
}catch(error){
31
console.log(error)
32
}
33
}
Copied!
Add the function on the eventonload
1
<scripttype="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.