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 1

admin 14 août 2019 0 Comments

Faire communiquer une application mobile avec serveur distant reste un exercice très apprécier pas les développeurs d’applications mobiles. D’où la création de cette article qui vous permettra d’apprendre à créer une application mobile avec Ionic 4. Cette application effectuera les opérations de crud avec une base de donnée MySql en passant par l’intermédiaire d’un script PHP.

 #1: Création  de notre base de donnée sur MySql

L’application mobile que nous allons creer sur ionic 4 utilisera une base de donnée MySql qui reposera sur l’architecture ci-dessous:

Comment faire une crud sur Ionic - App Architecture

Suivant donc cette architecture nous avons allons créer notre base de donnée dans MySql en procédant comme suit :

Table food

En ensuite nous allons executer le script sql ci-dessous pour la creation

CREATE TABLE `food` (
`id` int(11) NOT NULL,
`name` varchar(255) NULL,
`description` varchar(255) NULL,
PRIMARY KEY (`id`) 
);

 #2: Création  de notre projet PHP

Ce projet php aurra pour but de recevoir les informations qui seront envoyé depuis l’application Ionic et de leurs enregistrer dans notre base de donnée MySql.

Nous allons commencer par créer un répertoire nommé mon-api. Dans ce répertoire,nous allons créer quelques fichiers php qui vous nous permettre gérer les données qui viendrons depuis l’application mobile.

  • Tout d’abord, nous allons créer un fichier nommé function.php qui nous permettra d’écrire un ensemble de fonctions. Ces fonctions permettrons à notre application d’échanger les informations avec notre serveur de base de donnée MySql
<?php

/**
 * Created by Nusyce.
 * User: Nusyce
 * Date: 8/8/2019
 * Time: 1:43 PM
 */



/**
 * @return mysqli
 */
function db_connexion()
{
    $servername = "localhost";
    $username = "root";
    $password = "root";
    $db = "food";

    return new mysqli($servername, $username, $password,$db);
}

  • Création du fichier model.php à la racine du répertoire que nous avons crée. Ce fichier contiendra une classe qui nous permettra d’effectuer nos différentes opérations de Crud. Dans notre classe nous allons créer 5 fonctions qui permettrons de faire les opérations de Crud. Ces fonctions sont insert(data); index(); delete( $id ); update($data) et get($id);
<?php
/**
 * Created by Nusyce.
 * User: Nusyce
 * Date: 8/8/2019
 * Time: 2:03 PM
 */

class Model
{

    private $con;
    private $table = 'food';

    /**
     * Model constructor.
     */
    public function __construct()
    {
        $this->con = db_connexion();
    }

    /**
     * @return array|bool
     */
    public function index()
    {
        $result = mysqli_query($this->con, 'SELECT * FROM ' . $this->table);
        $data = array();
        if ($result) {
            while ($row = mysqli_fetch_assoc($result)) {
                $data[] = $row;
            }
            return $data;
        }
        return null;
    }

    /**
     * @param $data
     * @return array|bool
     */
    public function insert($data)
    {
        if ($data) {
            $query = 'INSERT INTO ' . $this->table . ' (name, description) VALUES ("' . $data['name'] . '", "' . $data['description'] . '")';
            $res = mysqli_query($this->con, $query);
            if ($res) {
                return $this->get(mysqli_insert_id($this->con));
            }
            return false;
        }
    }

    /**
     * @param $data
     * @return bool
     */
    public function update($data)
    {
        if (isset($data)) {
            $query = 'UPDATE ' . $this->table . ' SET name="' . $data['name'] . '", description="' . $data['description'] . '" WHERE id=' . $data['id'];
            $res = mysqli_query($this->con, $query);
            if ($res)
                return true;
            return false;
        }
    }

    /**
     * @param $id
     * @return array|null
     */
    public function get($id)
    {
        $result = mysqli_query($this->con, 'SELECT * FROM ' . $this->table . ' WHERE id=' . $id);
        if ($result) {
            return mysqli_fetch_assoc($result);
        }
        return null;

    }

    /**
     * @param $id
     * @return bool
     */
    public function delete($id)
    {
        $res = mysqli_query($this->con, 'DELETE FROM ' . $this->table . ' WHERE id=' . $id);
        return $res ? true : false;
    }
}
  • Dans le fichier index.php que nous allons créer, nous allons appeler les différentes fonctions présentent dans notre model. Puis nous allons écrire un ensemble de fonctions qui permettrons d’établir une communication entre notre application mobile et notre model.php
<?php
header('Access-Control-Allow-Origin: *');
require 'function.php';
require 'model.php';
$model = new Model();

if (isset($_GET['action']) && $_GET['action'] == 'list') {
    $data = $model->index();

    echo json_encode(array('success' => true, 'data' => $data));
}


if (isset($_GET['action']) && $_GET['action'] == 'update') {
    $inputJSON = file_get_contents('php://input');
    $postData = json_decode($inputJSON, TRUE);

    $result = $model->update($postData);
    echo json_encode(array('success' => $result));
}


if (isset($_GET['action']) && $_GET['action'] == 'create') {

    $inputJSON = file_get_contents('php://input');
    $postData = json_decode($inputJSON, TRUE);
    $result = $model->insert($postData);
    echo json_encode(array('success' => true, 'data' => $data));
}


if (isset($_GET['action']) && $_GET['action'] == 'detail') {
    $data = $model->get($_GET['id']);

    echo json_encode(array('success' => true, 'data' => $data));
}


if (isset($_GET['action']) && $_GET['action'] == 'delete') {
    $result = $model->delete($_GET['id']);

    echo json_encode(array('success' => $result));
}

#3: Liens utiles pour notre API

L’utilisation de notre api par notre application Ionic se fera grâce aux URLs suivantes :

  • http://localhost/mon-api/?action=list : Elle permettra de retourner la liste de tout les éléments présent dans notre base de donnée food. Ceci depuis notre application mobile, elle utilise la méthode de transport de donnée GET ;
  • http://localhost/mon-api/?action=create : Elle nous permettra d’enregistre un élément dans notre base de donnée. Elle utilisera le méthode de transport de donnée POST ;
  • http://localhost/mon-api/?action=update: Elle nous permettra mettre à jour un élément dans notre base de donnée. Elle utilisera le méthode de transport de donnée POST ;
  • http://localhost/mon-api/?action=delete&id=”id de élément”: Suppression d’un élément , méthode DELETE ;
  • http://localhost/mon-api/?action=detail&id=”id de élément”: Elle nous permettra d’avoir le détail sur un élément, méthode GET.

NB : Dans le lien suivant http://localhost/mon-api/?action=create, localhost représente l’adresse de notre serveur. Il est important de le remplacer par l’url ou par l’adresse IP du serveur qui hébergera votre API.

Dans cette partie de ce tutoriel, nous avons créer notre api qui allait fournir les données à notre application mobile. Dans la deuxième partie de notre tutoriel nous allons voir comment créer notre application mobile qui exploitera cette API.

Application mobile Ionic 4 Ionic FrameWork
37
1632 Views
Comment faire un CRUD sur ionic 4 avec local StoragePrevComment faire un CRUD sur ionic 4 avec local Storage6 août 2019
Comment faire un crud sur Ionic 4 + Php + MySql part 215 août 2019Comment faire un crud sur Ionic 4 + Php + MySql part 2Next

Related Posts

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
Application mobileIonic framework

Comment ajouter une police d’écriture sur Ionic 4

Lorsque vous crée une application sur Ionic 4, elle a uniquement les polices standard...

admin 18 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

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.