contact@nusyce.com
+237 692 324 989 | 679 302 498
Demandez un devis
  • Accueil
  • Nos services
    • Création graphique
    • Application mobile
    • Création Site Web | Application Web
    • Marketing Digital
    • Intégration de solution métier
  • Portfolio
  • Nous contacter
  • Accueil
  • Nos services
    • Création graphique
    • Application mobile
    • Création Site Web | Application Web
    • Marketing Digital
    • Intégration de solution métier
  • Portfolio
  • Nous contacter
  • Accueil
  • Nos services
    • Création graphique
    • Application mobile
    • Création Site Web | Application Web
    • Marketing Digital
    • Intégration de solution métier
  • Portfolio
  • Nous contacter
  • Accueil
  • Nos services
    • Création graphique
    • Application mobile
    • Création Site Web | Application Web
    • Marketing Digital
    • Intégration de solution métier
  • Portfolio
  • Nous contacter
Blog
Application mobileIonic framework

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

Project struction ionic crud

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 :

Home-page-crud-php
  • 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:

Crud modal form

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.

Application mobile Ionic 4 Ionic FrameWork
40
2424 Views
Comment faire un crud sur Ionic 4 + Php + MySql part 1PrevComment faire un crud sur Ionic 4 + Php + MySql part 114 août 2019
Comment ajouter une police d'écriture sur Ionic 418 août 2019Comment ajouter une police d'écriture sur Ionic 4Next

Related Posts

Application mobileIonic framework

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

Sauvegarder les données de votre application mobile sur ionic 4 vers un server distant...

admin 14 août 2019
Application mobileIonic framework

Géolocalisation et GoogleMap avec ionic 4

De nos jours, avec la forte croissance de la technologie et la présence des radios GPS...

admin 8 septembre 2019
Application mobileIonic framework

Comment créer un preloader sur ionic 4

le chargement progressif des images est une bonne pratique utilisé dans la création...

admin 18 octobre 2019

Laisser un commentaire Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Articles récents
  • Comment créer un preloader sur ionic 4
  • Comment designer votre carte google map
  • Géolocalisation et GoogleMap avec ionic 4
  • Comment ajouter une police d’écriture sur Ionic 4
  • Comment faire un crud sur Ionic 4 + Php + MySql part 2

NUSYCE est une agence numérique spécialisée dans le développement d'applications web et mobiles. Grâce aux technologies de pointe et un développement personnalisé, nous vous proposons la croissance par l'innovation.
Services
Création graphique
Application mobile
Intégration de solution
Développement d’application Web
Référencement SEO / SEA
Contacts
Adresse : Rond-point Dakar Immeuble Afriland Frist Bank Douala
Site Web: nusyce.com
Email: contact@nusyce.com
Tél: +237 692 324 989 | 679 302 498
Newsletter

VOS RÊVES, NOS RÉALISATIONS

Copyright © 2021 NUSYCE. All Rights Reserved.