How to Handle Forms in JavaScript

After going through the entire MVC architecture, you are probably itching to move on to a real project. But wait, there is still something we must talk about first.

At the end of the controller's lesson, we went over the entire lifecycle of a GET request.

But in practice, you must also consider how to POST data to the backend. Previously, we relied on Thunder Client to do this, but obviously, to create a fully featured web application, you'll need an actual user interface.

As a refresher, recall that this is our project structure:

1.
2├── controllers
3│   └── userController.js
4├── database.sqlite
5├── index.js
6├── models
7│   └── user.js
8└── views
9    ├── index.pug
10    ├── layout.pug
11    └── user.pug

Inside the user.js model, there are five functions that enable you to interact with the corresponding users table.

models/user.js

1class User {
2  constructor(id, username, email) {
3    this.id = id;
4    this.username = username;
5    this.email = email;
6  }
7
8  static getAll() {. . .} // Get all user items in the table.
9  static getById() {. . .} // Get a single user item based on id.
10  static create() {. . .} // Create a new user, and save it in the database.
11  static update() {. . .} // Update an existing user item.
12  static delete() {. . .} // Remove a user item from the database.
13}

And lastly, these are our routes: