- If you like this project, please consider giving it a star (*) and follow me at GitHub & YouTube.
HTML Bootstrap Angular 9.0 MYSQL NodeJS CRUD Operation
GPS Mobile Location Tracking App
send an email to [email protected] for Pro version download. This repository is updated to Angular 9.0Video Tutorials Link!
In this app, I am going to demostrate how to use most common, popular and widely used technologies.I believe, HTML, CSS, Javascript and Bootstrap are still used in 90% of iOS and Android we see today in market.
And MYSQL is no doubt king of all databases.
I am also going to make use of advance Angular 7 framework at front end which will connect to MYSQL database at the backend through NOdeJS Javascript engine.
My Objective is to show how to make a complete CRUD operations in MYSQL & Angular 9.
However, instead of making a simple manual or tutorial, I am going to demostrate this in a real-life app.
One other reason, I want to show CRUD in an app is, because writing CRUD in production is very different than what do you see in tutorials or manuals.
In real-life App, each of the CRUD operations should be authenticated and authroized before it's allowed to access database and perform any operations.
Each and every database call, whether is read or write, should be properly authenticated and authorized based on invididual user privileges and busines operations.
For example, User can only update their own settings and admin can update someone else password.
Tools:
front-end: Angular 9.0, HTML CSS JS & Bootstrapback-end: MYSQL
middleware: JWT, CORS, NodeJS, Express etc.
Let's get started :-
Front end :-
At first, We are going to work on a static website using HTML, CSS and Bootstrap.We are going to use part of this website in our Angular App.
If you are using VisualCode editor, please install a live-server extension.
Otherwise, you can use any webserver to host your website.
Now, let's create index.html, login.html, signup.html, aboutus.html, dashboard.html, reports.html and settings.html and host this to your webserver.
At this point, we only want to make sure that individual html pages work fine only, these pages don't need to be connected or have any business logic because we are going to write all business, routing and other logic in Angular 7.
Before we start, Please make sure you have latest version of node js installed.
Let's head out to https://nodejs.org/en/ and grab latest nodejs.
Once you have nodejs installed, open command prompt/terminal window.
$ node -v // make sure, this command comes back with a node version
$ npm -v // make sure, this command comes back with a npm version
$ npm install -g @angular/cli
$ mkdir app
$ cd app
$ mkdir client
$ mkdir server
$ cd client
$ ng new GPS-Mobile-Tracker
$ cd GPS-Mobile-Tracker
$ ng serve
Back end :-
$ cd server$ npm init
$ npm install --save nodemon cors express dotenv jsonwebtoken mysql bcrypt body-parser
$ nodemon app
MYSQL Tables
-- Table structure for table user
CREATE TABLE user (
name varchar(30) NOT NULL,
email varchar(50) NOT NULL,
password varchar(300) NOT NULL,
question varchar(100) DEFAULT NULL,
answer varchar(100) DEFAULT NULL,
createdAt datetime NOT NULL,
updatedAt datetime NOT NULL,
PRIMARY KEY (email)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Table structure for table usergps
CREATE TABLE usergps (
email varchar(100) NOT NULL,
lat varchar(10) NOT NULL,
long varchar(10) NOT NULL,
createdAt datetime NOT NULL,
PRIMARY KEY (email,createdAt)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;