Angular DataTable avec des données Php Mysql

Objectifs

• Etre capable d'afficher des données dans "Angular 9 Material Datatable" avec des données php mysql

Présentation

• Pour comprendre cet article il faut lire les deux articles précédents:
  • Introduction au DataTable
  • Utilisation du datatable avec Angular
• Dans cet article, nous allons développer une petite application Angular 9 et effectuer une opération d'affichage (read) sur une entité utilisateur.
• Dans cet article, je vais vous dire, Angular 9 Material Datatable avec des données php mysql.
• Je vais vous donner le code de travail et veuillez le faire attentivement et si vous avez une requête, veuillez commenter ci-dessous:

Préparer le projet Angular

• Exécuter la commande ci-dessous pour ajouter @angular/material dans votre application angular 9:

  ng add @angular/material

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

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

Mettre à jour le fichier module.ts

• Ajouter le code ci-dessous dans le fichier src/app/app.module.ts du projet:

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

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

import { HttpClientModule } from '@angular/common/http';
import {  MatPaginatorModule } from '@angular/material/paginator';
import {  MatTableModule } from '@angular/material/table';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatPaginatorModule,
    MatTableModule,
    BrowserAnimationsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Mettre à jour le fichier component.ts

• Ajouter le code ci-dessous dans votre fichier src/app/app.component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';
import { HttpClient } from '@angular/common/http';
import { DataSource } from '@angular/cdk/collections';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  displayedColumns = ['id', 'amount', 'number'];
  post = [];
  //dataSource:any;
  dataSource: MatTableDataSource<any>;

  constructor(private http: HttpClient){

  this.http.get('http://localhost/mypage.php').subscribe(data => {
  this.post.push(data);

  this.dataSource = new MatTableDataSource(this.post[0]);


    }, error => console.error(error));
  }
  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

  ngOnInit() {

  setTimeout(() => this.dataSource.paginator = this.paginator);

  }

}
export interface PeriodicElement {
  id: number;
  email: string;
  firstname: string;

}

Ajouter le code ci-dessous dans votre fichier component.html

• Vous devez maintenant ajouter le code ci-dessous dans le fichier src/app/app.component.html:

<h2 style="text-align:center;padding:10px 0;">Angular 9 Material Datatable with phpmysql data</h2>
<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource">

    <!-- Position Column -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> ID </th>
      <td mat-cell *matCellDef="let post"> {{post.id}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="number">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let post"> {{post.number}} </td>

    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="amount">
      <th mat-header-cell *matHeaderCellDef> Email </th>
      <td mat-cell *matCellDef="let post"> {{post.amount}} </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let post; columns: displayedColumns;"></tr>
  </table>

  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>

Ajouter le code ci-dessous dans votre fichier PHP

• Vous devez maintenant ajouter le code ci-dessous dans le fichier php:

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");


$conn = new mysqli('localhost','root','','mydb');
$sql = "SELECT * FROM policies";
$result = $conn->query($sql);
$myArr = array();
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$myArr[] = $row;
}
} else {
echo "0 results";
}

$myJSON = json_encode($myArr);
echo $myJSON;

?>

Base de données MySql

• La base de donnée Mysql est mydb
• Puis créer la table suivante

CREATE TABLE `policies` (
`id` int(11) NOT NULL,
`nom` varchar(255) NOT NULL,
`prenom` varchar(255) NOT NULL,
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `policies` (`id`, `nom`, `prenom`) VALUES
(2, 'Riadh', 'HAJJI');
INSERT INTO `policies` (`id`, `nom`, `prenom`) VALUES
(3, 'Mohamed', 'RABHI');
INSERT INTO `policies` (`id`, `nom`, `prenom`) VALUES
(3, 'Monem', 'CHIHAOUI');