NodeJS/Express – POST/GET form data to MySQL using Sequelize ORM – Ajax JQuery + Bootstrap view example

nodejs-express-save-form-data-to-mysql-using-sequelize-orm-ajax-jquery-bootstrap-view-feature-image

In the tutorial, we show how to save form data to MySQL in NodeJS/Express application using Sequelize ORM with Ajax JQuery & Bootstrap view.

Related posts:
Sequelize ORM – Build CRUD RestAPIs with NodeJs/Express, Sequelize, MySQL
Integrate NodeJS/Express – JQuery Ajax POST/GET – Bootstrap view

Overview

Goal

Technologies
– NodeJS/Express
– Sequelize ORM
– MySQL
– JQuery Ajax
– Bootstrap

We create a NodeJS/Express project as below structure:

Run above project then makes Post/Get requests, results:

-> Bootstrap view:

NodeJS-Express-save-form-data-to-MySQL-with-Ajax-JQuery-Bootstrap-view-results

-> MySQL’s table:

NodeJS-Express-save-form-data-to-MySQL-with-Ajax-JQuery-Bootstrap-view-database-tables

Demo

Practice

Setting up NodeJS/Express project

Create a folder: ‘NodeJS-Express-Ajax-JQuery-Bootstrap-MySQL’:

Then init NodeJS project, see prompts:

Install Express, Body-Parser, Sequelize, MySQL:

-> see package.json file:

Frontend
Create Bootstrap view

./views/index.html file:

./views/404.html file:

Implement Ajax JQuery to Post/Get data

– For JQuery Ajax POST request, we implement a ./resources/static/js/postrequest.js file:

– For JQuery Ajax Get request, we implement a ./resources/static/js/getrequest.js file:

Backend
Create Sequelize model

./app/models/user.model.js file:

Configure MySQL connection

./app/config/env.js file:

./app/config/db.config.js file:

Create Express Routes

./app/routes/user.route.js file:

Implement Controllers

./app/controllers/user.controller.js file:

Implement Server.js

./app.js file:

Run & Check results

Start NodeJS server:
-> Logs:

Post Users:
-> Logs:

Get all Users:
-> Logs:

-> Bootstrap view:

NodeJS-Express-save-form-data-to-MySQL-with-Ajax-JQuery-Bootstrap-view-results

-> MySQL tables:

NodeJS-Express-save-form-data-to-MySQL-with-Ajax-JQuery-Bootstrap-view-database-tables

Sourcecode

NodeJS-Express-Ajax-JQuery-Bootstrap-MySQL

By grokonez | May 5, 2018.

Last updated on September 7, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*