Comment faire un crud sur Ionic 4 + Php + MySql part 1
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:
Suivant donc cette architecture nous avons allons créer notre base de donnée dans MySql en procédant comme suit :
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.
