Creating Tables in MySQL from Node.js - MySQL / Node.js MySQL Create Database/ node js tutorial

Database

const express = require('express');
const mysql = require('mysql');

// create connection
const db = mysql.createConnection({
  host :'localhost',
  user :'root',
  password:'',
  });
  
  // connect 
  db.connect((err) => {
    if(err){
    throw err;
    }
    console.log('MySql Connected ....');
    
    });

const app = express();
// create DB 
app.get('/createDb', (req, res) => {
  let sql = 'CREATE DATABASE ujjwaldatabase';
  db.query(sql, (err, result) => {
      if(err) throw err;
      console.log(result);
      res.send('Database created...');
  });
});

app.listen('3000', () => 
{
  console.log('server started on port 3000');
});

Table

const express = require('express');
const mysql = require('mysql');

// create connection
const db = mysql.createConnection({
  host :'localhost',
  user :'root',
  password:'',
  database : 'ujjwaldatabase'

  });
  
  // connect 
  db.connect((err) => {
    if(err){
    throw err;
    }
    console.log('MySql Connected ....');
    
    });

const app = express();
// create DB 
app.get('/createpoststable', (req, res) => {
  let sql = 'CREATE TABLE profile(id int AUTO_INCREMENT, fullname VARCHAR(255), address VARCHAR(255), PRIMARY KEY(id))';
  db.query(sql, (err, result) => {
      if(err) throw err;
      console.log(result);
      res.send('Posts table created...');
  });
});

app.listen('3000', () => {
  console.log('Server started on port 3000');
});
Insert Data
// Insert post 1
app.get('/addpost1', (req, res) => {
  let post = {fullname:'Ujjwal Tripathi', address:'USA'};
  let sql = 'INSERT INTO profile SET ?';
  let query = db.query(sql, post, (err, result) => {
      if(err) throw err;
      console.log(result);
      res.send('Post 1 added...');
  });
});
// Insert post 2
app.get('/addpost2', (req, res) => {
  let post = {fullname:'Tripti Tripathi', address:'USA'};
  let sql = 'INSERT INTO profile SET ?';
  let query = db.query(sql, post, (err, result) => {
      if(err) throw err;
      console.log(result);
      res.send('Post 2 added...');
  });
});

Angular 8/9 angular-datatables: DataTables using angular

Angular DataTables is one of the best datatable I have used in the angular. Angular DataTables is built on the top of JQuery DataTables.

Here is the complete working code and use this carefully:

1. Here are the basics commands, you need to run for latest angular 8/9 setup and environment:

$ npm install -g @angular/cli

$ ng new ang9datatables

$ cd ang9datatables

$ ng serve

//Here is the url, you need to run into your browser and see working angular test project
http://localhost:4200/

2. Here are the basics commands, you need to run into your terminal for datatable and its dependencies:

npm install jquery --save

npm install datatables.net --save

npm install datatables.net-dt --save

npm install angular-datatables --save

npm install @types/jquery --save-dev

npm install @types/datatables.net --save-dev

npm install ngx-bootstrap bootstrap --save

3. After done with commands add below code into you angular.json file:

...
"styles": [
              "src/styles.css",
              "node_modules/datatables.net-dt/css/jquery.dataTables.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
            ],
            "scripts": [
            "node_modules/jquery/dist/jquery.js",
            "node_modules/datatables.net/js/jquery.dataTables.js",
            "node_modules/bootstrap/dist/js/bootstrap.js",
            ]
...

4. Now add below code into your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {DataTablesModule} from 'angular-datatables';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DataTablesModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. Now add below code into app.component.ts file:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public data = [
    {name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
    {name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
    {name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
    {name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
    {name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
    {name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
    {name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
    {name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
];

  title = 'angulardatatables';
  dtOptions: DataTables.Settings = {};
  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      processing: true
    };
}
}

6. Now add below code into app.component.html file:

<div class="container">
<table class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Website</th>
    </tr>
  </thead>
  <tbody>
   <tr *ngFor="let group of data">
         <td>{{group.name}}</td>
         <td>{{group.email}}</td>
         <td>{{group.website}}</td>
     </tr>
  </tbody>
</table>
<div>

Example of Angular 9 Pagination Using ngx-pagination

app.component.html

<h1 style="text-align: center; color:orange; font-size:45px">Example of
Angular 9
Pagination Using ngx-pagination</h1>

<table class="table table-striped">

  <thead>

  <tr>

  <th>Gender</th>

  <th>Name</th>

  <th>Email</th>

  <th>Picture</th>

  </thead>

  <tbody>

    <tr *ngFor="let user of data | paginate: { id: 'listing_pagination',

    itemsPerPage: 10,

    currentPage: page,

    totalItems: totalRecords }">

  <td>{{user.gender}}</td>

<td>{{user.name.first}}</td>

<td>{{user.email}}</td>

<td><img src="{{user.picture.medium}}"></td>

 </tr>

  </tbody>

  </table>

  <div>

    <pagination-controls  id="listing_pagination" maxSize="5"
directionLinks="true"
(pageChange)="page = $event"></pagination-controls>

  </div>

app.component.ts

import { Component } from '@angular/core';

import { RandomService } from './random.service';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

data:Array<any>

totalRecords:number

page:number =1

  constructor(private random:RandomService)

  { this.data = new Array<any>() }

  ngOnInit() {

     this.getUsers();

    }

  getUsers(){

    this.random.getData().subscribe((data)=>{

    console.log(data)

    this.data = data.results

    this.totalRecords = data.results.length

    console.log(this.page)

    })

  }

}

app.module.ts

=> npm install ngx-pagination --save

=> import {NgxPaginationModule} from 'ngx-pagination'; 

=> imports: [NgxPaginationModule],

import {HttpClientModule} from '@angular/common/http';

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { RandomService } from './random.service';

import { NgxPaginationModule } from 'ngx-pagination';

@NgModule({

  declarations: [AppComponent],

  imports: [

    HttpClientModule,

    BrowserModule,

    NgxPaginationModule,

    AppRoutingModule,

  ],

  providers: [RandomService],

  bootstrap: [AppComponent]

})

export class AppModule { }

random.service.ts

=> ng g s random

import { Injectable } from '@angular/core';

import{HttpClient} from '@angular/common/http';

import { Observable } from 'rxjs';

@Injectable({

  providedIn: 'root'

})

export class RandomService {

  constructor(private http:HttpClient) { }

  getData():Observable<any>{

    const url ="https://randomuser.me/api?results=100"

    return this.http.get<any>(url)

  }

}

Angular Material Form Controls Select (mat-select) Example

app.component.ts

<h2>Basic mat-select Example</h2>

<mat-form-field>

  <mat-label>Your student</mat-label>

  <mat-select>

    <mat-option *ngFor="let student of students" [value]="student.name">

      {{student.name}}

    </mat-option>

  </mat-select>

</mat-form-field>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { MatSelectModule } from '@angular/material/select';

import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    BrowserAnimationsModule,

    FormsModule,

  ReactiveFormsModule,

  MatSelectModule,

  MatFormFieldModule

    

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

app.component.ts

import {Component} from '@angular/core';

import {FormControl} from '@angular/forms';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent{

  students: any[] = [

    { name: 'Michael' },

    { name: 'John'},

    { name: 'David' },

    { name: 'Robert' },

    {name:'james'},

    

];  

  }

Can Activate Route Guard for User Authentication Angular 8 | angular log...

Table Dropdown Filter with jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
    function addRemoveClass(theRows) {
        theRows.removeClass("odd even");
        theRows.filter(":odd").addClass("odd");
        theRows.filter(":even").addClass("even");
    }
    var rows = $("table#myTable tr:not(:first-child)");
    addRemoveClass(rows);
    $("#dropdownField").on("change", function() {
        var selected = this.value;
        if (selected != "All") {
            rows.filter("[position=" + selected + "]").show();
            rows.not("[position=" + selected + "]").hide();
            var visibleRows = rows.filter("[position=" + selected + "]");
            addRemoveClass(visibleRows);
        } else {
            rows.show();
           addRemoveClass(rows);
        }
    });
});

</script>

app.component.html

<div class="dropdownList">
  Filter By Name
  <select id="dropdownField">
      <option value="All" selected>All</option>
      <option value="Student">Student</option>
      <option value="Assistant">Assistant</option>
   
  </select>

</div>
<table id="myTable">
  <tr id="headerRow">
      <td>First Name</td>
       <td>Age</td>
      <td>Position</td>
  </tr>

  <tr position="Student">
      <td>John</td>
       <td>25</td>
      <td>Student</td>
  </tr>

 
  <tr position="Professor">
      <td>Olivia</td>
       <td>25</td>
      <td>Professor</td>
  </tr>

  <tr position="Professor">
      <td>Ava</td>
       <td>21</td>
      <td>Professor</td>
  </tr>

  <tr position="Student">
      <td>Sophia</td>
       <td>20</td>
      <td>Student</td>
  </tr>

</table>

styles.css
body{
  font-family: Arial, Helvetica, sans-serif; font-size:28px;
}
#myTable{
  width:100%;
  border-collapse:collapse;
  }
  #headerRow {
    background: #2700ff;
    color: white;
    font-weight: bold;
}
  #myTable td{
  padding:5px;
  border:1px solid #00a5e4;
  text-align:left;
  }
  .dropdownList {
  padding-bottom:10px;
  font-weight:bold;
  }
  #dropdownField {
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 16px;
    height: 30px;
    width: 200px;
    color: white;
    background-color: #2700ff;
}
.odd {
  background: #cceaff;
}
.even {
  background: #99e3ff;
}

app.component.ts
<div class="icon-bar">
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a> 
 <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> 
 <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
</div>
    <header><h3><span style="color: yellow; font-size: 65px;">Angular Font Awesome</span> Sticky Social Side Bar</h3></header>

    <div class="content">

   <p>The Sticky social bar will stick to the screen when you scroll.</p>
    <p>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
   </p>
   <p>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
   </p>
  <p>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
   </p>
   <p>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
   </p>
  <p>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
   </p>
  <p>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
   </p>
</div>

styles.css

body {

  margin: 0;

  height: 1800px;

  background: #000;

  color: #FFF;

}

.icon-bar {

  position: fixed;

  top: 50%;

  -webkit-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

}

header{

  position: fixed; width: 100%;

  top: -52px;

}

header h3 {

  background: #0400ff;

  padding: 18px;

  font-size: 47px;

  color: #00ffe0;

}

.icon-bar a {

  display: block;

  text-align: center;

  padding: 16px;

  transition: all 0.3s ease;

  color: white;

  font-size:50px;

}

.icon-bar a:hover {

  background-color: #ff6b01;

}

.facebook {

  background:#0541be;

  color: white;

}

.twitter {

  background:#0091ff;

  color: white;

}

.linkedin {

  background:#005780;

  color: white;

  font-size: 37px;

}

.content {

  font-size: 30px;

  width: 80%;

  text-align: justify;

  float: right;

  margin-top: 20px;

  right: 8%!important;

  font-family: sans-serif;

  z-index: -111;

  position: relative;

}

Install Packages

npm i angular-font-awesome

angular.cli.json
  "styles": [
        "styles.css",
        "../node_modules/font-awesome/css/font-awesome.css"

      ],