Angular DataTable avec des données Php Mysql

Angular DataTable avec des données Php Mysql

  1. Objectifs

    • Etre capable d’afficher des données dans "Angular 9 Material Datatable" avec des données php mysql
  2. Présentation

    • Pour comprendre cet article il faut lire les deux articles précédents:
    • 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:
    • Angular DataTable avec des données Php Mysql




  3. Préparer le projet Angular

    • Exécuter la commande ci-dessous pour ajouter @angular/material dans votre application angular 9:
      • ng add @angular/material
    • Exécuter la commande ci-dessous pour ajouter datatable et ses dépendances:
      • 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
    • Ajouter les lignes suinantes à votre fichier angular.json:
      • "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. 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 { }
      
  5. 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;
      
      }
      
  6. 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>
      
  7. 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;
      
      ?>
  8. 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');



Laisser un commentaire