Comment faire un crud sur Ionic 4 + Php + MySql part 2

admin 15 août 2019 0 Comments

La partie 2 de cet article est consacré à la création de l’application mobile sur ionic 4. Cette application aura pour but d’effectuer les différents opérations de crud vers notre base de donnée ceci en utilisant l’api “Mon API“.

#1: Création de notre application mobile

Pour la création de notre application mobile nous allons créer notre commande en exécutant la commande suivante :

$ ionic start curd-with-php blank

Cependant nous allons réorganiser notre projet suivant cette architecture suivante comme nous allons expliqué dans le tutoriel précédant

Dans notre fichier src/app/app.module.ts nous allons importer la classe HttpClientModule. Cette classe permettra notre application d’effectuer les requêtes http vers notre API, après cette modification notre fichier deviendra celui-ci:

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

import {IonicModule, IonicRouteStrategy} from '@ionic/angular';
import {SplashScreen} from '@ionic-native/splash-screen/ngx';
import {StatusBar} from '@ionic-native/status-bar/ngx';

import {AppComponent} from './app.component';
import {AppRoutingModule} from './app-routing.module';
import {HttpClientModule} from '@angular/common/http';
import {FormModule} from './modals/form/form.module';

@NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [
        BrowserModule,
        IonicModule.forRoot(),
        HttpClientModule,
        AppRoutingModule ],
    providers: [
        StatusBar,
        SplashScreen,
        {provide: RouteReuseStrategy, useClass: IonicRouteStrategy}
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Nous allons générer un provider qui permettra de communiquer avec notre projet PHP. Il exploitera les différentes méthodes que nous avons crée dans notre API.

$ ionic g service providers/dataProvider

Dans notre provider (src/app/providers/data-provider.service.ts) , nous allons créer les différentes méthodes que nous aurons besoins dans notre provider

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

@Injectable({
    providedIn: 'root'
})
export class DataProviderService {
    host = 'http://192.168.43.99/mon-api/';

    constructor(private http: HttpClient) {
    }

    list() {
        const url = this.host + '?action=list';
        return this.http.get<any>(url);
    }

    create(data) {
        const url = this.host + '?action=update';
        return this.http.post<any>(this.host, data);
    }

    update(data) {
        const url = this.host + '?action=list';
        return this.http.post<any>(this.host, data);
    }

    detail(id) {
        const url = this.host + '?action=detail&id=' + id;
        return this.http.get<any>(url);
    }

    delete(id) {
        const url = this.host + '?action=list&id=' + id;
        return this.http.get<any>(url);
    }

}

NB: Vous devrez modifier la valeur de l’attribut host par l’adresse IP ou l’url de votre serveur

#2: Création des différentes pages

Au niveau de notre application mobile, nous allons créer les différentes interfaces. Ces interfacesnous permettront de d’afficher, créer, modifier et supprimer les données dans notre base de donnée.

Dans notre page d’accueil src/app/pages/home, nous allons modifier notre page d’accueil. Cette modification lui donnera la possibilité de lister la les éléments enregistrés dans notre base de donnée. Dans le fichier src/app/pages/home/home.page.html nous avons :

<ion-header>
    <ion-toolbar color="primary">
        <ion-title>
           Accueil
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
        <ion-refresher-content
                pullingIcon="arrow-dropdown"
                pullingText="Pull to refresh"
                refreshingSpinner="circles"
                refreshingText="Refreshing...">
        </ion-refresher-content>
    </ion-refresher>
    <div >
        <ion-list *ngIf="dataProviderService.data.length>0">
            <ion-list-header>
                Liste de repas
            </ion-list-header>

            <ion-item-sliding
                              *ngFor="let d of dataProviderService.data; let i=index ">
                <ion-item-options side="start">
                    <ion-item-option (click)="deleteItem(i,d.id)" color="danger">
                        <ion-icon name="trash"></ion-icon>
                    </ion-item-option>
                </ion-item-options>

                <ion-item>
                    <div>
                        <div class="title">{{d.name}}</div>
                        <div class="desc">{{d.description}}</div>
                    </div>
                </ion-item>
                <ion-item-options side="end">
                    <ion-item-option (click)="openModal(d)" color="primary">
                        <ion-icon ios="ios-create" md="md-create"></ion-icon>
                    </ion-item-option>
                </ion-item-options>
            </ion-item-sliding>
        </ion-list>

        <div *ngIf="dataProviderService.data.length<1" class="empty-item">
            <span> Liste vide</span>
        </div>
    </div>
    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
        <ion-fab-button (click)="openModal()">
            <ion-icon name="add"></ion-icon>
        </ion-fab-button>
    </ion-fab>
</ion-content>

Après cela, dans le fichier src/app/pages/home/home.page.ts :

import {Component, OnInit} from '@angular/core';
import {AlertController, ModalController, ToastController} from '@ionic/angular';
import {FormModal} from '../../modals/form/form.modal';
import {DataProviderService} from '../../providers/data-provider.service';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})
export class HomePage {

    constructor(private modalController: ModalController,
                public alertController: AlertController,
                public toastController: ToastController,
                public dataProviderService: DataProviderService) {

    }

    async deleteItem(index, id) {
        const alert = await this.alertController.create({
            header: 'Supprimer!',
            message: 'Voullez vous vraiment supprimer?',
            buttons: [
                {
                    text: 'Annuler',
                    role: 'cancel',
                    cssClass: 'secondary',
                    handler: (blah) => {
                    }
                }, {
                    text: 'Supprimer',
                    handler: () => {
                        this.dataProviderService.data.splice(index, 1);
                        this.dataProviderService.delete(id).subscribe(value => {
                            this.deleteMessage();
                        });
                    }
                }
            ]
        });
        await alert.present();
    }

    async deleteMessage() {
        const toast = await this.toastController.create({
            message: 'Repas correctement supprimé',
            duration: 2000
        });
        toast.present();
    }

    async openModal(data = null) {
        const modal = await this.modalController.create({
            component: FormModal,
            componentProps: {data: data},
            animated: true
        });
        return await modal.present();
    }

    ionViewWillEnter() {
        this.loadData();
    }

    loadData() {
        this.dataProviderService.list().subscribe(value => {
            this.dataProviderService.data = value.data;
        });
    }

    doRefresh(event) {
        this.loadData();
        setTimeout(() => {
            event.target.complete();
        }, 3000);

    }
}

Comme feuille de style src/app/pages/home/home.page.scss, nous aurons ceci :

ion-content {
  .empty-item {
    text-align: center;
    margin-top: 65%;
  }

  ion-icon {
    font-size: 30px;
  }

  ion-list {
    ion-item {
      .title {
        font-size: 15px;
        font-weight: bold;
      }

      .desc {
        margin-top: 10px;
        margin-bottom: 10px;
        font-style: italic;
        font-size: 13px;
      }
    }
  }
}

Après ces différents résultats, nous avons le résultat ci dessous :

Cependant après avoir effectué ces modifications sur notre page d’accueil, nous allons par la suite créer une page modal nommé form ( src/app/modals/form ) qui nous permettra d’effectuer les ajouts et modifications dans notre base de donnée.

Dans le répertoire form nous allons créer le fichier form.modal.html; Nous avons le contenu ci-dessous qui permettra d’afficher notre formulaire de création et de modification :

<ion-header>
    <ion-toolbar color="primary">
        <ion-buttons slot="start">
            <ion-button (click)="closeModal()">
                <ion-icon class="close-icon" name="close"></ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-title>{{itemData.id? 'Modifier' : 'Ajouter'}} un repas</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <div padding>
        <form [formGroup]="onForm" class="list-form">
            <ion-item>
                <ion-label position="floating" color="primary">Nom</ion-label>
                <ion-input type="text" formControlName="name" placeholder="Nom"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label position="floating" color="primary">Description</ion-label>
                <ion-textarea formControlName="description"></ion-textarea>
            </ion-item>
            <ion-button expand="block" (click)="saveData()" [disabled]="!onForm.valid" fill="outline" color="primary">
                Enregistrer
            </ion-button>
        </form>
    </div>
</ion-content>

Et nous allons aussi créer le fichier form.modal.ts qui contiendra un ensemble d’instruction comme le présente le code ci-dessous :

import {Component, OnInit} from '@angular/core';
import {ModalController, NavParams, ToastController} from '@ionic/angular';
import {DataProviderService} from '../../providers/data-provider.service';
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
    selector: 'app-form',
    templateUrl: 'form.modal.html',
    styleUrls: ['form.modal.scss'],
})
// tslint:disable-next-line:component-class-suffix
export class FormModal implements OnInit {
    onForm: FormGroup;
    itemData: any = {name: '', description: ''};

    constructor(private modalController: ModalController,
                private formBuilder: FormBuilder,
                private navParams: NavParams,
                public toastController: ToastController,
                public dataProviderService: DataProviderService) {
        console.log(navParams.data.data);
        if (navParams.data.data) {
            this.itemData = navParams.data.data;
        }
    }


    async closeModal() {
        await this.modalController.dismiss('');
    }

    ngOnInit(): void {
        this.onForm = this.formBuilder.group({
            name: new FormControl(this.itemData.name,
                Validators.required),
            description: new FormControl(this.itemData.description)
        });
    }

    saveData() {
        if (!this.itemData) {
            this.dataProviderService.create(this.onForm.value).subscribe(value => {
                this.updateMessage();
                this.closeModal();
            });
        } else {
            const id = new FormControl(this.itemData.id);
            this.onForm.addControl('id', id);
            this.dataProviderService.update(this.onForm.value).subscribe(value => {
                const index = this.dataProviderService.data.findIndex(x => x.id === this.itemData.id);
                if (index !== -1) {
                    this.dataProviderService.data[index] = this.onForm.value;
                }
                this.updateMessage();
                this.closeModal();
            });
        }
    }

    async updateMessage() {
        const toast = await this.toastController.create({
            message: 'Repas correctement enregistré',
            duration: 2000
        });
        toast.present();
    }
}

Puis créons aussi le fichier form.modal.scss avec le contenu ci-dessous :

ion-content {
  ion-button {
    margin-top: 15px;
  }
}

Et pour finir le fichier form.module.ts avec pour contenu :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { RouterModule } from '@angular/router';
import { FormModal } from './form.modal';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ReactiveFormsModule,
    RouterModule.forChild([
      {
        path: '',
        component: FormModal
      }
    ])
  ],
  declarations: [FormModal]
})
export class  FormModule {}

Le formulaire de notre formulaire de création et de modification d’un article se présentera comme suit:

Apres avoir créer notre page modal, nous allons maintenant l’importer dans notre dans le fichier src/app/app.module.ts. Elle permettra à notre fichier home.page.ts d’ouvrir la dite page modal :

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

import {IonicModule, IonicRouteStrategy} from '@ionic/angular';
import {SplashScreen} from '@ionic-native/splash-screen/ngx';
import {StatusBar} from '@ionic-native/status-bar/ngx';

import {AppComponent} from './app.component';
import {AppRoutingModule} from './app-routing.module';
import {HttpClientModule} from '@angular/common/http';
import {FormModule} from './modals/form/form.module';

@NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [
        BrowserModule,
        IonicModule.forRoot(),
        HttpClientModule,
        AppRoutingModule,
        FormModule],
    providers: [
        StatusBar,
        SplashScreen,
        {provide: RouteReuseStrategy, useClass: IonicRouteStrategy}
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Dans notre fichier app-routing.module.ts nous avons le contenu ci-dessous :

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./pages/home/home.module').then(m => m.HomePageModule)},
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Ayant suivi correctement ce tutoriel, nous êtes maintenant capable de créer votre application mobile avec Ionic 4. Cette application mobile communiquera avec un serveur de base de donnée MySQL via l’intermédiaire d’une API Php. C’est ainsi que se terminera ce tutoriel. Si vous avez des questions, n’oublié pas de leur noter dans la rubrique commentaire juste en dessous de cet article.