Site Overlay

How to create a Data Table with Angular 9, PHP REST API, and MySQL Database?

0
Angular 9 PHP Datatable with MySQL
How to create a Data Table with Angular 9, PHP REST API, and MySQL Database?

What is the exact step by step instructions for creating a data table in Angular 9 that consumes data from a REST API built using PHP and a MySQL database?

1
0

Although this is a generic question that can be implemented in various ways depending on your specif use case, these are the steps that you can follow to implement a data-table in Angular 9, PHP and MySQL.

 

First, you need to install Angular CLI 9 and initialize a project:

 

$ npm install -g @angular/cli 
$ ng new angular9-php-datatable-example
$ cd angular9-php-datatable-example
$ ng serve

You can navigate to http://localhost:4200/ to see your app running!

Next you need to install the following dependencies from npm:

npm install jquery
npm install datatables.net
npm install datatables.net-dt
npm install angular-datatables
npm install @types/jquery
npm install @types/datatables.net
npm install ngx-bootstrap bootstrap

Next, you need to update angular.jsonĀ as follows:

 

"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",
            ]

 

This will enable integrating bootstrap and jquery with your Angular app.

Next, you need to import the following modules in your src/app/app.module.ts file as follows:

 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {DataTablesModule} from 'angular-datatables';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DataTablesModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

Finally, we can create our data table in the src/app/app/component.ts file as follows:

 

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  

  dataTableOpts: DataTables.Settings = {};
  
  data = [];
  constructor(private httpClient: HttpClient) {
    this.httpClient.get('http://localhost/customers.php').subscribe(data => {
    this.data = data[0];  
    
    }, error => console.error(error));
  }
  
  ngOnInit() {
    this.dataTableOpts = {
      pagingType: 'full_numbers',
      pageLength: 10,
      processing: true
    };
}
}

Next, openĀ  the src/app/app/component.html file and update it as follows:

 

<table class="table" datatable [dtOptions]="dataTableOpts">
  <thead>
    <tr>
      <th>Full Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
   <tr *ngFor="let d of data">
         <td>{{d.name}}</td>
         <td>{{d.email}}</td>
     </tr>
  </tbody>
</table>

 

Finally, create a MySQL database and implement the following PHP REST API:

<?php
header("Access-Control-Allow-Origin: *");
$servername = "localhost";
$username   = "root";
$password   = "root";
$dbname     = "mydb";


$conn = new mysqli($servername, $username, $password, $dbname);


if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 


$sql = "SELECT * FROM customers";
$result = mysqli_query($conn,$sql); 
$myArray = array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $myArray[] = $row;
    }
    echo json_encode($myArray);
} 
else 
{
    echo "None";
}
?>