NodeJS/Express – POST/GET to MySQL using Sequelize – AngularJS + Bootstrap form example

In the tutorial, we show how to POST/GET form data to/from MySQL in NodeJS/Express application using Sequelize with AngularJS & Bootstrap view.

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

Goal

Technologies

– NodeJS/Express
– Sequelize
– MySQL
– AngularJS
– Bootstrap

We create a NodeJS/Express project as below structure:

Run above project then makes POST/GET requests, results:

-> Bootstrap view:

NodeJS-Express-AngularJS-Bootstrap-Sequelize-MySQL-POST-GET-views

-> MySQL’s table:

NodeJS-Express-AngularJS-Bootstrap-Sequelize-MySQL-POST-GET-records

Practice

Setting up NodeJS/Express project

Create a folder: ‘NodeJS-Express-Angular-Bootstrap-MySQL’:

Then init NodeJS project, see prompts:

-> Install Express, Body-Parser, Sequelize, MySQL:

-> see package.json file:

Frontend
Create Bootstrap views

./view/index.html file:

./views/404.html file:

Implement AngularJS to Post/Get data

– For AngularJS Ajax POST/GET request, we implement a file ./resources/static/js/controller.js:

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

./server.js file:

Run & Check results

Start NodeJS server:
-> Logs:

-> Post’s Logs:

-> Get’s Logs:

-> All Requests:

NodeJS-Express-AngularJS-Bootstrap-Sequelize-MySQL-POST-GET-requests

-> Bootstrap view:

NodeJS-Express-AngularJS-Bootstrap-Sequelize-MySQL-POST-GET-views

-> MySQL’s records:

NodeJS-Express-AngularJS-Bootstrap-Sequelize-MySQL-POST-GET-records

Sourcecode

To run below sourcecode, follow the guides:


step 0: download & extract zip file -> we have a folder ‘NodeJS-Express-AngularJS-Bootstrap-MongoDB’
step 1: cd NodeJS-Express-AngularJS-Bootstrap-MongoDB
step 2: npm install express body-parser mongoose –save
step 3: node app.js

-> Sourcecode:
NodeJS-Express-Angular-Bootstrap-MySQL

By JavaSampleApproach | May 7, 2018.

Related Posts


Got Something To Say:

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

*