Vous êtes sur la page 1sur 59

Ressources Sur Retour d'information

Observations
Développement d'applications ioniques et technologies
connexes

Accueil > Blog > Poster


Mots clés

Compilation
anticipée (1)

Android (1)

Erreurs de
compilation
Android (1)

Erreurs Android
EACCES (1)
Utilisation de PHP et MySQL avec Ionic
15 décembre 2016, 1:47 am
Catégories: données / Angulaire 2 / TypeScript / Angulaire (2)

angulaire 4 (1)

Angular
Formbuilder (1)
Pourquoi PHP / MYSQL?
** MAINTENANT ACTUALISÉ POUR IONIC 3 **
Modules
angulaires (1)
Selon les statistiques d'utilisation de W3tech, PHP
compte 82,4% de tous les sites analysés, ce qui signifie Tubes angulaires
(1)
qu'il existe une forte possibilité que, en tant que

Authentification
développeurs, nous devrions, à un moment donné, Authentification
AngularFire (1)
travailler avec cette langue dans nos projets.

AngularFire2 (2)
Ce n'est pas une surprise car, parmi d'autres
fonctionnalités, PHP offre une API de base de données Apache Cordova
solide et étendue, prenant en charge des solutions (5)

populaires allant de MySQL, PostgreSQL, Oracle, SQL


Server et SQLite à Sybase, Firebird et DB2. Le support Plugins Apache
Cordova (1)
d'hébergement presque universel pour la langue, les
coûts de fonctionnement réduits et la vaste API (1)
documentation en ligne contribuent également à faire de
cette option une option attrayante pour le App Rating (1)
développement!
Heures de
lancement
En plus des statistiques d'utilisation de MySQL, utiliser d'application (1)
PHP avec MySQL est un élément incontournable pour la
plupart des organisations. Créer des outils
de rétroaction (1)

Aux fins de ce tutoriel, voici la configuration du serveur


Caméra (1)
utilisée:

Toile (1)
Apache / 2.4.23
PHP 5.3+ cartographie (1)
MySQL 5.5.53+
ChartJS (1)

Ce que nous allons construire


Ainsi, avec nos technologies côté serveur, le projet validation de
case à cocher (1)
ionique que nous allons développer dans ce didacticiel
sera utilisé pour:
composants (3)

Afficher une liste de nos technologies Web / mobiles CouchDB (1)


préférées
Créer, modifier et supprimer des listes de Données (1)

technologies individuelles

Stockage de
Toutes les données seront stockées à distance dans une Stockage de
données (2)
base de données MySQL que nous interagirons avec
l'utilisation d' objets de données PHP (PDO) .
Base de données
(2)
Si vous êtes relativement nouveau sur PHP ou n'avez
jamais utilisé le PDO avant qu'il ne s'agisse simplement Synchronisation
de base de
d'une couche d'abstraction de base de données qui données (1)
fournit une API universelle pour travailler avec différents
fournisseurs de bases de données. débogage (1)

Étant donné que la syntaxe PDO n'est pas liée lien profond (1)

spécifiquement à une API de base de données (c'est à


dire avec les commandes mysqli php ), cela en fait une rapport d'erreur
(1)
solution idéale pour la gestion future des données
d'épreuvage s'il faut, par exemple, passer de MySQL à erreurs (1)
une autre solution de base de données comme
PostgreSQL ou Oracle. Firebase (5)

À la fin du didacticiel, nous devrions être accueillis avec Stockage


Firebase (1)
une application similaire à celle qui suit (comme on l'a vu
courir dans le navigateur grâce à l'utilitaire de service
géocodage (1)
ionique):

Google Analytics
(1)

HTML5 (2)

Édition d'image
(1)

Ionique (16)

Ionic 2 (2)

Maintenant que nous avons établi l'historique du projet

Applications
et ce que nous prévoyons développer, commençons ... Applications
ioniques (1)

Configuration de la base de données ION CLI (1)

La structure de données de notre application est


Validation de
incroyablement simple, comprenant une seule table avec
forme ionique (1)
3 champs.
Natif ionique (3)
C'est tout - rien de complexe, pas de relations, de clés
étrangères ou d'optimisation d'index ... heureusement! Ionic Native 3.x
(1)

À l'aide de votre outil de choix (par exemple, ligne de


Plugin de
commande ou phpMyAdmin, par exemple) créez une diagnostic ionique
table nommée technologies avec les configurations des natifs (1)

suivantes:
Ionic Native
Geocoder (1)

les technologies
Plugin Google
Iconic Native
Nom de type propriétés supplémentaires
GoogleMaps (1)
domaine

id INTEGRE PRIMARY KEY UNSIGNED Plugins


(3) AUTOINCREMENT autochtones
ioniques (1)

prénom VARCHAR  
(50) Assistant de
projet ionique (1)

la TEXTE  
description service ionique -
lab (1)

Je vous ai dit que c'était simple, n'est-ce pas?


Ionic2 (1)

Et c'est le cas - avec notre structure de données


Erreur
configurée, nous pouvons maintenant attirer notre IonicNativePlugin
attention sur les scripts PHP pour l'interaction avec la (1)

base de données.
iOS (2)

Scripting de la logique côté serveur iTunesConnect


Scripting de la logique côté serveur iTunesConnect
Dans votre éditeur de code de choix, créez les scripts (1)

PHP suivants:
Jest (1)

manage-data.php
Chargement par
retrieve-data.php défaut (1)

Le script manage-data.php traitera l'ajout, la mise à jour Mocks (1)

et la suppression des enregistrements de la table des


MySQL (1)
technologies .

Navigation (1)
Le script retrieve-data.php sera - surprise, surprise -
manipule la récupération des données enregistrées dans NgModule (1)
la table des technologies et le renvoie pour l'utiliser dans
notre application ionique. NoSQL (1)

Commençons par le script pour le script manage- analyse des


fichiers CSV en ion
data.php :
(1)

analyse des
<?php
fichiers XML en
header('Access-Control-Allow-Origin: *'); ionique (1)

// Define database connection parameters


PHP (1)
$hn = 'localhost';
$un = 'username-of-database-here';
PouchDB (3)
$pwd = 'password-for-database-here';
$db = 'name-of-database';
notifications
$cs = 'utf8';
push (1)

// Set up the PDO parameters


géocodage
$dsn = "mysql:host=" . $hn . ";port=3306;dbname= "
inverse (1)
$opt = array(
PDO::ATTR_ERRMODE
Safari 9.1.1 (1)
PDO::ATTR_DEFAULT_FETCH_MODE
PDO::ATTR_EMULATE_PREPARES
);
// Create a PDO instance (connect to the database)
Partage social
$pdo = new PDO($dsn, $un, $pwd, $opt); Partage social
(1)

// Retrieve specific parameter from supplied URL


$key = strip_tags($_REQUEST['key']); Composant
SplitPane (1)
$data = array();

Interpolation de
chaîne (1)
// Determine which mode is being requested
switch($key)
Modèles (1)
{

// Add a new record to the technologies table TypeScript (2)


case "create":
Test unitaire (1)
// Sanitise URL supplied values
$name = filter_var($_REQUEST['name' Web Audio API
$description (1)
= filter_var($_REQUEST['description'

// Attempt to run PDO prepared statement


try {
$sql = "INSERT INTO technologies(name, description) VALUES
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':name', $name, PDO
$stmt->bindParam(':description', $description
$stmt->execute();

echo json_encode(array('message' =>


}
// Catch any errors in running the prepared statement
catch(PDOException $e)
{
echo $e->getMessage();
}

break;

// Update an existing record in the technologies table


case "update":
// Sanitise URL supplied values
$name = filter_var($_REQUEST['name'
$description = filter_var($_REQUEST['description'
$recordID = filter_var($_REQUEST['recordID'

// Attempt to run PDO prepared statement


try {
$sql = "UPDATE technologies SET name = :name, description
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':name', $name, PDO
$stmt->bindParam(':description', $description
$stmt->bindParam(':recordID', $recordID
$stmt->execute();

echo json_encode('Congratulations the record '


}
// Catch any errors in running the prepared statement
catch(PDOException $e)
{
echo $e->getMessage();
}

break;

// Remove an existing record in the technologies table


case "delete":

// Sanitise supplied record ID for matching to table record


$recordID = filter_var($_REQUEST['recordID'

// Attempt to run PDO prepared statement


try {
$pdo = new PDO($dsn, $un, $pwd);
$sql = "DELETE FROM technologies WHERE id = :recordID"
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':recordID', $recordID
$stmt->execute();
echo json_encode('Congratulations the record '
}
// Catch any errors in running the prepared statement
catch(PDOException $e)
{
echo $e->getMessage();
}

break;
}

?>

Le script ci-dessus devrait être assez explicite en


fonction de ce que nous cherchons à accomplir à chaque
étape.

Nous configurons les paramètres nécessaires pour


interagir avec la base de données en utilisant la classe
PDO de PHP.

De là, nous utilisons une déclaration de commutation


pour déterminer si nous ajoutons, éditons ou supprimez
un enregistrement de la base de données.

Pour chaque opération de base de données, nous


implémentons les fonctions de filtrage de PHP pour
désinfecter les données fournies par l'URL qui appelle le
script avant d'utiliser des instructions préparées pour
gérer l'interaction avec la base de données.

Maintenant, pour ajouter le script pour le script retrieve-


data.php :

<?php
header('Access-Control-Allow-Origin: *');

// Define database connection parameters


$hn = 'localhost';
$un = 'username-of-database-here';
$pwd = 'password-for-database-here';
$db = 'name-of-database';
$cs = 'utf8';

// Set up the PDO parameters


$dsn = "mysql:host=" . $hn . ";port=3306;dbname="
$opt = array(
PDO::ATTR_ERRMODE
PDO::ATTR_DEFAULT_FETCH_MODE
PDO::ATTR_EMULATE_PREPARES
);
// Create a PDO instance (connect to the database)
$pdo = new PDO($dsn, $un, $pwd, $opt);
$data = array();

// Attempt to query database table and retrieve data


try {
$stmt = $pdo->query('SELECT id, name, description FROM technol
while($row = $stmt->fetch(PDO::FETCH_OBJ)
{
// Assign each row of data to associative array
$data[] = $row;
}

// Return data as JSON


echo json_encode($data);
}
catch(PDOException $e)
{
echo $e->getMessage();
}

?>
À l'instar de notre script PHP précédent, nous
commençons par construire nos paramètres de base de
données / PDO avant d'essayer de récupérer les
enregistrements enregistrés dans la table des
technologies et de les retourner comme paires de clés /
valeurs dans JSON.

Avez-vous remarqué les en-têtes PHP suivants en haut


de chaque script?

header('Access-Control-Allow-Origin: *');

Ils indiquent le script PHP pour permettre une demande


de n'importe quel domaine (par l'utilisation du caractère
* caractère générique).

Cela aidera à éviter tout problème avec CORS (Cross


Origin Resource Sharing) lors de la demande de l'URL
pour chaque script PHP à partir de notre application
ionique (fondamentalement, nous voulons nous assurer
que Angular ne crache pas son défaut lors de l'accès à
une URL distante) .

Assurez-vous de télécharger ces scripts PHP vers un


emplacement accessible au public sur votre serveur
distant, assurez-vous que les autorisations sont définies
sur 755 et prenez note de l'adresse absolue de ces
scripts (c'est-à-dire http: //www.website-address.suffix/
directory / retrieve-data.php ) car vous aurez besoin de
cela pour le côté ionique / angulaire du projet.

À ce stade, nous avons conclu les scripts nécessaires


pour interagir avec la base de données et le retour des
données et maintenant nous pouvons nous concentrer
sur le développement du côté ionique de notre projet.

Création d'une application


La structure de l'application elle-même est assez simple;
2 pages:

Accueil
Ajouter de la technologie

Nous n'utiliserons aucun plugin, juste un certain nombre


de classes angulaires pré-fournies et de composants UI
ioniques.

Accédez à un répertoire où vous souhaitez créer /


installer votre application ionique et exécutez la
commande suivante dans votre console de choix (par
exemple Mac OS X Terminal ou Windows Command
Prompt):

ionic start favourite-web-technologies blank

Une fois que le squelette de base pour l'application a été


créé, exécutez la commande suivante pour ajouter la
deuxième page à l'application:

ionic g page addTechnology

Avec l'apparence de l'application en place, nous pouvons


maintenant commencer à coder la fonctionnalité requise
et l'interface utilisateur qui, compte tenu des
composants préconstruits d'Ionic et des fonctionnalités
disponibles, sera relativement rapide et facile.
Commencez par ouvrir le fichier favoris-web-
technologies / src / pages / home / home.ts et en
ajoutant le code suivant:

import { Component } from '@angular/core';


import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

public items : any = [];


constructor(public navCtrl: NavController,
public http : Http)
{

ionViewWillEnter()
{
this.load();
}

// Retrieve the JSON encoded data from the remote server


// Using Angular's Http class and an Observable - then
// assign this to the items array for rendering to the HTML template
load()
{
this.http.get('http://www.your-remote-url.suffix/retrieve-data.ph
.map(res => res.json())
.subscribe(data =>
{
this.items = data;
});
}

// Allow navigation to the AddTechnology page for creating a new ent


addEntry()
{
this.navCtrl.push('AddTechnology');
}

// Allow navigation to the AddTechnology page for amending an existi


// (We supply the actual record to be amended, as this method's para
// to the AddTechnology page
viewEntry(param)
{
this.navCtrl.push('AddTechnology', param);
}

Rien n'est trop élaboré ou compliqué ici - il suffit


d'appeler notre script retrieve-data.php à travers la
méthode de chargement et la gestion de la navigation
vers le composant de la page AddTechnology en utilisant
les méthodes AddEntry et ViewEntry .

Maintenant, nous devons ajouter les composants UI


nécessaires aux fichiers favoris-web-technologies / src /
pages / home / home.html :

<ion-header>
<ion-navbar>
<ion-title>
My Favourite Technologies
</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>

<ion-item>
<button
class="add"
ion-button
item-right
icon-right
margin-bottom
color="primary"
(click)="addEntry()">
Add a technology
<ion-icon name="add"></ion-icon>
</button>
</ion-item>

<ion-item *ngFor="let item of items">


<h2>{{ item.name }} </h2>
<button
ion-button
color="primary"
item-right
(click)="viewEntry({ record: item })">View
</ion-item>

</ion-content>

Encore une fois, une configuration assez simple ici.

Tout d'abord, nous commençons par un bouton standard


en haut à droite de l'écran qui appelle la méthode
addEntry de notre classe (nous permettant de naviguer
vers la page Ajouter une technologie pour ajouter un
nouvel enregistrement à insérer dans la base de données
MySQL distante).
Deuxièmement, nous parcourons et rendons à la page
chaque enregistrement technologique (qui a été récupéré
par la méthode de chargement de la classe), en
attribuant un bouton pour accompagner chaque liste.
Chaque bouton appelle la méthode ViewEntry de notre
classe, en passant l'enregistrement technlogy en tant
que paramètre afin que cela puisse être édité sur le
formulaire (que nous allons construire prochainement)
dans la page Ajouter une technologie .

Le plus atypique parmi vous a peut-être remarqué une


omission flagrante / un problème avec le code ci-dessus.

S'il n'y a pas d'enregistrements à récupérer - ce qui sera


plus que probablement le cas lorsque l'application est
lancée (sauf si vous avez directement ajouté certains
enregistrements à la base de données avant d'accéder à
cette étape du didacticiel) - l'utilisateur n'est pas informé
de ceci fait.

Au lieu de cela, ils sont accueillis avec un espace vide


sous le bouton Ajouter une entrée.

Hmm ... pas bon du point de vue de l'expérience


utilisateur.

Je vous laisse, comme exercice supplémentaire, ajouter


des fonctionnalités pour gérer ce scénario :)

Maintenant, ajoutons la logique nécessaire et HTML pour


la page Ajouter une technologie .

Ajout et modification des enregistrements


technologiques
Étant donné que le composant de la page
AddTechnology gérera à la fois l'ajout de nouveaux
enregistrements et l'affichage des enregistrements
existants pour les modifications possibles, cela simplifie
la quantité de code que nous devons écrire.

À partir des fichiers favoris-web-technologies / src /


pages / add-technology / add-technology.ts ,
implémentez le code suivant:

import { Component } from '@angular/core';


import { IonicPage, NavController, NavParams, ToastController
import { FormGroup, Validators, FormBuilder } from
import { Http, Headers, RequestOptions } from '@angular/http'
import 'rxjs/add/operator/map';

@IonicPage()
@Component({
selector: 'page-add-technology',
templateUrl: 'add-technology.html'
})
export class AddTechnology {

// Define FormBuilder /model properties


public form : FormGroup;
public technologyName : any;
public technologyDescription : any;
// Flag to be used for checking whether we are adding/editing an ent
public isEdited : boolean = false
// Flag to hide the form upon successful completion of remote operat
public hideForm : boolean = false
// Property to help ste the page title
public pageTitle : string;
// Property to store the recordID for when an existing entry is bein
public recordID : any = null
private baseURI : string = "http://www.remote-site-ad
// Initialise module classes
constructor(public navCtrl : NavController
public http : Http,
public NP : NavParams,
public fb : FormBuilder,
public toastCtrl : ToastController
{

// Create form builder validation rules


this.form = fb.group({
"name" : ["", Validators
"description" : ["", Validators
});
}

// Determine whether we adding or editing a record


// based on any supplied navigation parameters
ionViewWillEnter()
{
this.resetFields();

if(this.NP.get("record"))
{
this.isEdited = true;
this.selectEntry(this.NP.get("record"))
this.pageTitle = 'Amend entry';
}
else
{
this.isEdited = false;
this.pageTitle = 'Create entry';
}
}

// Assign the navigation retrieved data to properties


// used as models on the page's HTML form
selectEntry(item)
{
this.technologyName = item.name;
this.technologyDescription = item.description
this.recordID = item.id;
}

// Save a new record that has been added to the page's HTML form
// Use angular's http post method to submit the record data
// to our remote PHP script (note the body variable we have created
// supplies a variable of key with a value of create followed by the
// for the record data
createEntry(name, description)
{
let body : string = "key=create&name="
type : string = "application/x-www-form-urlencoded; cha
headers : any = new Headers({ 'Content-Type'
options : any = new RequestOptions
url : any = this.baseURI + "manage-data.php"

this.http.post(url, body, options)


.subscribe((data) =>
{
// If the request was successful notify the user
if(data.status === 200)
{
this.hideForm = true;
this.sendNotification(`Congratulations the technology:
}
// Otherwise let 'em know anyway
else
{
this.sendNotification('Something went wrong!'
}
});
}
// Update an existing record that has been edited in the page's HTML
// Use angular's http post method to submit the record data
// to our remote PHP script (note the body variable we have created
// supplies a variable of key with a value of update followed by the
// for the record data
updateEntry(name, description)
{
let body : string = "key=update&name="
type : string = "application/x-www-form-urlencoded; cha
headers : any = new Headers({ 'Content-Type'
options : any = new RequestOptions
url : any = this.baseURI +

this.http.post(url, body, options)


.subscribe(data =>
{
// If the request was successful notify the user
if(data.status === 200)
{
this.hideForm = true;
this.sendNotification(`Congratulations the technology:
}
// Otherwise let 'em know anyway
else
{
this.sendNotification('Something went wrong!'
}
});
}

// Remove an existing record that has been selected in the page's HT


// Use angular's http post method to submit the record data
// to our remote PHP script (note the body variable we have created
// supplies a variable of key with a value of delete followed by the
// for the record ID we want to remove from the remote database
deleteEntry()
{
let name : string = this.form.controls
body : string = "key=delete&recordID="
type : string = "application/x-www-form-urlencoded; cha
headers : any = new Headers({ 'Content-Type'
options : any = new RequestOptions
url : any = this.baseURI + "manage-data.php"

this.http.post(url, body, options)


.subscribe(data =>
{
// If the request was successful notify the user
if(data.status === 200)
{
this.hideForm = true;
this.sendNotification(`Congratulations the technology:
}
// Otherwise let 'em know anyway
else
{
this.sendNotification('Something went wrong!'
}
});
}

// Handle data submitted from the page's HTML form


// Determine whether we are adding a new record or amending an
// existing record
saveEntry()
{
let name : string = this.form.controls
description : string = this.form.

if(this.isEdited)
{
this.updateEntry(name, description);
}
else
{
this.createEntry(name, description);
}
}

// Clear values in the page's HTML form fields


resetFields() : void
{
this.technologyName = "";
this.technologyDescription = "";
}

// Manage notifying the user of the outcome


// of remote operations
sendNotification(message) : void
{
let notification = this.toastCtrl.create({
message : message,
duration : 3000
});
notification.present();
}

Les aspects importants du code ci-dessus sont la logique


pour déterminer si nous ajoutons un nouvel
enregistrement ou une modification d'un enregistrement
existant (contenu dans la méthode ionViewWillEnter )
suivie des méthodes pour créer, mettre à jour et
supprimer des enregistrements:

createEntry
updateEntry
deleteEntry

Grâce à la logique de la gestion de la fourniture de


données à notre script remote-manage-data.php , nous
pouvons maintenant nous concentrer sur l'élaboration du
HTML nécessaire pour le fichier favoris-web-technologies
/ src / pages / add-technology / add-technology.html :

<ion-header>
<ion-navbar>
<ion-title>{{ pageTitle }}</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>

<div>
<ion-item *ngIf="isEdited && !hideForm">
<button
ion-button
item-right
color="secondary"
text-center
block
(click)="deleteEntry()">Remove this
</ion-item>

<div *ngIf="hideForm">
<ion-item class="post-entry-message" text-wrap
<h2>Success!</h2>
<p>Maybe you'd like to edit an existing
<p>Simply go back to the home page and
</ion-item>
</div>
<div *ngIf="!hideForm">
<form [formGroup]="form" (ngSubmit)="saveEntry()

<ion-list>
<ion-item-group>
<ion-item-divider color="light
<ion-item>
<ion-input
type="text"
placeholder="Enter a name...
formControlName="name"
[(ngModel)]="technologyName
</ion-item>
</ion-item-group>

<ion-item-group>
<ion-item-divider color="light
<ion-item>
<ion-textarea
placeholder="Description...
formControlName="description
rows="6"
[(ngModel)]="technologyDescription
</ion-item>
</ion-item-group>

<ion-item>
<button
ion-button
color="primary"
text-center
block
[disabled]="!form.valid">Save
</ion-item>

</ion-list>
</form>
</div>
</div>

</ion-content>

Comme vous pouvez le voir, c'est une forme très simple,


composée d'un petit nombre d'éléments très
élémentaires.

Au début, nous avons un bouton situé en haut à droite


de la page qui appelle la méthode deleteEntry de notre
classe.

À partir de cela, nous utilisons une directive ngIf pour


afficher conditionnellement un message à l'utilisateur
une fois qu'un formulaire a été soumis et les données
enregistrées avec succès.

Ensuite, une autre directive ngIf permet de déterminer si


le formulaire est affiché ou non basé sur la valeur de la
propriété hideForm qui est gérée par la classe TypeScript
du composant.

Notre formulaire comprend un champ de saisie pour le


nom de la technologie et une zone de texte pour la
description de la technologie; qui ont tous deux des
contrôles de forme et des modèles qui leur sont assignés
pour gérer la validation et les données contenues dans
ces champs.

Lorsque nous arrivons à l'aperçu de la vue Ajouter une


technologie dans le navigateur, nous vous présentons
l'écran suivant:
Et lorsque nous avons sélectionné un enregistrement à
partir de la page d'accueil de l'application pour afficher /
modifier:

Gestion des modules d'application


Tout est bon et bien avec ce que nous avons mis en
place jusqu'à maintenant, mais il existe un amendement
que nous devons apporter au module de composant
AddTechnology - fichier web préféré / src / pages / add-
technology / add-technology.module.ts .

Changez TOUTES les instances de IonicModule à


IonicPageModule pour que le fichier ressemble au code
suivant:

import { NgModule } from '@angular/core';


import { IonicPageModule } from 'ionic-angular';
import { AddTechnology } from './add-technology'

@NgModule({
declarations: [
AddTechnology,
],
imports: [
IonicPageModule.forChild(AddTechnology),
],
exports: [
AddTechnology
]
})
export class AddTechnologyModule {}

Cette modification lance le composant AddTechnology


permettant de le naviguer par son nom de classe (bien
que sous forme de chaîne) - comme nous l'avons fait
dans les méthodes addEntry et ViewEntry des
technologies Web préférées / src / pages / home / fichier
home.ts.

Une dernière modification reste avant que nous


puissions prévisualiser le projet dans le navigateur
cependant.

Comme nous utilisons la classe Http d'Angular, nous


devons importer et déclarer le HttpModule dans le
module racine de l'application - les technologies Web
préférées / src / app / app.module.ts comme ceci:

import { BrowserModule } from '@angular/platform-browser'


import { HttpModule } from '@angular/http';
import { ErrorHandler, NgModule } from '@angular/core'
import { IonicApp, IonicModule, IonicErrorHandler
import { SplashScreen } from '@ionic-native/splash-screen'
import { StatusBar } from '@ionic-native/status-bar'
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler
]
})
export class AppModule {}

Avec tous nos changements en place, vous pouvez


prévisualiser l'application dans votre navigateur de
bureau à l'aide de la commande de commande ionique à
partir de votre utilitaire de ligne de commande système
(c'est-à-dire Terminal sur Mac OS X ou Invite de
commandes sur Windows):

ionic serve

Tout bien, vous devriez pouvoir ajouter des


enregistrements et voir ceux qui s'affichent comme
indiqué dans les saisies d'écran suivantes:
En résumé
Nous concluons ici notre tutoriel sur l'intégration de PHP
et MySQL avec Ionic pour créer une application de base
pour la liste, l'ajout, l'édition et la suppression de nos
technologies Web préférées.

Nous avons travaillé avec une gamme de technologies à


partir de PHP Data Objects (PDO) et de MySQL aux
composants UI d'Ionic et au service Http d'Angular.

À la suite de cela, nous avons construit une application


très simple mais esthétiquement agréable et
fonctionnelle qui démontre à quel point il est facile
d'utiliser PHP / MySQL comme solution de gestion de
données pour nos applications ioniques.

Assez bien, allez-vous?

Il existe toutefois certaines modifications qui doivent


être faites avec la base de code ci-dessus:

Ajout de fonctionnalité de détection de réseau pour


déterminer si l'application peut ou non se connecter à
un réseau pour la récupération / publication de
données
Implémentation de la capacité de gérer nos données
hors connexion
Traiter des scénarios de validation plus avancés,
comme éviter les entrées de données en double et
restreindre la longueur des données qui peuvent être
ajoutées dans chaque champ par exemple

Je l'ai délibérément laissé comme un exercice pour le


lecteur de se mettre en œuvre (si vous vous sentez si
aventureux!)

Qu'avez-vous pensé de ce tutoriel? Est-ce que cela


couvre les angles nécessaires ou pourrait-il être amélioré
d'une manière ou d'une autre?

Permettez-moi de savoir quelles sont vos pensées et vos


réactions en laissant vos commentaires dans le
formulaire ci-dessous.

Si vous avez apprécié ce que vous avez lu ici, veuillez


envisager de vous inscrire à ma liste de diffusion et, si
vous ne l'avez pas déjà fait, consultez mon e-book:
Mastering Ionic pour plus d'informations sur le travail
avec d'autres méthodes de stockage de données dans
Ionique.
Mastering Ionic
Créez des applications de pointe
en utilisant des composants UI,
des services angulaires, des
tuyaux, des filtres et des plugins
natifs ioniques dans une gamme
de projets approfondis et des
études de cas pour iOS et
Android.

Comprend tous les échantillons


de code et les téléchargements.

Aperçu de l'e-book

Achat en ligne

Mots clés

PHP MySQL Ionique

Catégories

Les données Angulaire 2 Manuscrit


laissez un commentaire
N'hésitez pas à partager vos idées, opinions et / ou
suggestions en ce qui concerne cet article de blog.

Il n'y a qu'une seule règle: soyez gentil - trainer les


autres, se comporter de manière abusive ou faire du
spam pour que votre publication soit supprimée.

Prénom
*

Email *

Site
Internet
http://

Commentaire
*

Soumettre

commentaires
Erika Contreras
25 août 2017 21:26:17

Erreur d'exécution Tomb


inattendu S dans JSON à la position 0

Je vends cette erreur quand llamo


retrieve.php, si le hago le cambio retrieve.json
me funciona, y compris la trato de créer, j'écris
le nom et le descriptif et je dés que je sais,
mais je ne sais pas dans mi base de datos, non
me muestra nada.

Hayatullah Rahnamoon
16 août 2017 07:11:08

Merci beaucoup, c'était vraiment utile


chris
14 août 2017 05:07:08

merci pour le grand tutoriel!

mais, comment puis-je accéder à la base de


données via mon téléphone, je l'ai installé et
j'ai essayé la méthode de connexion par le
point d'accès avec son adresse IP ... mais je ne
peux pas voir la liste.

---- RÉPONSE DE ADMIN --------

Pourriez-vous accéder à la liste lorsque vous


accédez à la base de données à partir de votre
navigateur de bureau?

Allan
11 août 2017 09:35:35

Donc tellement. Cela a été formidable pour


moi, mais avec quelques problèmes que j'ai dû
régler. grand esprit de soutien j'adore
Arindam Roy
10 août 2017 05:08:50

Oui valeur de retour montrant,

[{ student_id "1", nom de l' élève "Arindam


Roy", nom de l' étudiant "Roy"}, { student_id
"2", student_fname "Ananya", nom_tudiant
"Chakrabortty"}]

Mais après l'insertion si je montre l'insertion


via this.sendNotification, puis comment écrire
le code
Arindam Roy
08 août 2017 00:08:50

Bonjour,
j'ai écrit ce code sur mon site. il fonctionne
bien, mais le message de retour de la page
php ne l'affiche pas seulement en affichant un
message personnalisé de la page ts. aide-moi
à imprimer la valeur de retour de php

---- RÉPONSE DE ADMIN --------

Pouvez-vous exécuter le script php


directement dans le navigateur et imprimer
des valeurs à partir de là? Sinon, il y a un
problème avec votre PHP que vous devrez
résoudre.

Si vous pouvez imprimer le PHP, exécutez un


journal de console pour voir ce que
l'application Ionic retourne à partir de la
requête HTTP et travaillez à partir de là.

Simon Hal
26 juillet 2017 17:59:04

Bonjour,
bon tutoriel! Cela m'a vraiment aidé dans la
direction pour laquelle j'aimerais que mon
application se fasse, mais malheureusement
j'ai des problèmes ... C'est ma première
application, désolée pour la noblesse ... La
application, désolée pour la noblesse ... La
console m'informe les erreurs de serveur (500)
chaque fois que l'application fonctionne l'un
des scripts PHP . J'ai édité les deux
autorisations de fichiers à 755, et les chemins
vers les scripts semblent bien.
L'application / l'émulateur ne me donne pas
d'erreurs en plus de ce que je peux trouver
dans la console, et l'application semble
fonctionner bien, elle ne gère pas la poste ou
n'arrive pas au serveur ...
Je déteste être une gêne, mais pourrais-tu être
possible? Voyez ce que je pourrais manquer
ici? Vous ne savez pas si les informations ci-
dessus sont suffisantes?
Je vous remercie.

--- REPLY FROM ADMIN ----

Bonjour Simon

Merci pour ces mots gentils.

En ce qui concerne vos problèmes ici - une


erreur de 500 signifie qu'il y a un problème
avec l'exécution du script sur le serveur lui-
même, alors je voudrais commencer votre
enquête là-bas.

Les scripts PHP sont-ils exécutés sur un


serveur local (Ie MAMP, LAMP etc) ou sont-ils
appelés à partir d'un serveur distant? Pouvez-
vous exécuter directement le script PHP en
question dans le navigateur (fournissant toutes
les chaînes de requêtes dont il pourrait avoir
besoin)?
besoin)?

On peut supposer que le serveur est configuré


pour exécuter correctement PHP et que la
version que vous utilisez est la bibliothèque
PDO installée?

yash baxi
26 juil. 2017 12:09:02

J'ai écrit votre code à l'aide de mon site Web


et je peux insérer des données dans la base de
données mais je ne peux pas récupérer les
données sur la page d'accueil. Cela montre
l'erreur comme suit:

Sceau inattendu S dans JSON à la position 0

home.ts

importer {Component} à partir de '@ angular /


core'; importer {NavController} de 'ionique-
angulaire'; importer {Http} à partir de '@
angular / http'; importer {AddTechnology} à
partir de "../add-technology/add-technology";
importer 'rxjs / add / operator / map';

@Component ({selector: 'page-home',


templateUrl: 'home.html'
})
classe d'exportation HomePage {

éléments publics: any = []; constructeur (public


navCtrl: NavController, public http: Http) {}
ionViewWillEnter () {this.load (); } // Récupérer les
données codées JSON à partir du serveur distant
// Utiliser la classe Http d'Angular et un
Observable - puis // affecter ceci au tableau des
éléments pour le rendu de la charge du modèle
HTML () {this.http.get ('https: //go-
general.000webhostapp.com/technologies/retrieve-
data.php ') .map (res => res.json ()) .subscribe
(data => {this.items = data;}); } // Autoriser la
navigation sur la page AddTechnology pour créer
une nouvelle entrée addEntry () {this.navCtrl.push
(AddTechnology); } // Autoriser la navigation sur
la page AddTechnology pour modifier une entrée
existante // (Nous fournissons l'enregistrement
réel à modifier, en tant que paramètre de cette
méthode, // à la page de la page d'ajout
ViewEntry (param) {this.navCtrl.push
(AddTechnology, param);}
}

add-technology.ts

importer {Component} à partir de '@ angular /


core'; importer {NavController, NavParams,
ToastController} à partir de "angulaire ionique";
importer {FormGroup, Validators, FormBuilder}
à partir de '@ angular / forms'; importer {Http,
Headers, RequestOptions} à partir de '@
angular / http'; importer 'rxjs / add / operator /
map';
@Component ({selector: 'page-add-
technology', templateUrl: 'add-
technology.html'
})
classe d'exportation AddTechnology {

// Définir formulaire publicitaire FormBuilder /


modèle: FormGroup; Public TechnologyName:
any; technologie publiqueDescription: tout; // Le
drapeau à utiliser pour vérifier si nous ajoutons /
éditons une entrée public isEdited: boolean =
false; // Drapeau pour cacher le formulaire après
l'achèvement de l'opération à distance public
hideForm: boolean = false; // Propriété pour aider
à afficher le titre de la page public pageTitle:
string; // Propriété pour stocker l'ID
d'enregistrement pour quand une entrée
existante est éditée publicIDID: any = null;
private baseURI: string = "https://go-
general.000webhostapp.com/technologies/"; //
Initialise le constructeur des classes de module
(public navCtrl: NavController, public http: Http,
public NP: NavParams, public fb: FormBuilder,
public toastCtrl: ToastController) {// Crée les
règles de validation du générateur de formulaire
this.form = fb.group ({" nom ": [" ",
Validators.required]," description ": [" ",
Validators.required]}); } // Détermine si nous
ajoutons ou modifions un enregistrement // en
fonction de tous les paramètres de navigation
fournis ionViewWillEnter () {this.resetFields (); if
(this.NP.get ("record")) {this.isEdited = true;
this.selectEntry (this.NP.get ("enregistrement"));
this.pageTitle = 'Modifier l'entrée'; } else
{this.isEdited = false; this.pageTitle = 'Create
entry'; }} // Affectez les données récupérées par
la navigation aux propriétés // utilisées comme
modèles sur le formulaire HTML de la page
selectEntry (item) {this.technologyName =
item.name; this.technologyDescription =
item.description; this.recordID = item.id; } //
Enregistrez un nouvel enregistrement qui a été
ajouté au formulaire HTML de la page // Utilisez
la méthode de publication http angulaire pour
soumettre les données d'enregistrement // à
notre script PHP distant (notez la variable de
corps que nous avons créée qui // fournit une
variable de clé avec une valeur de création suivie
des paires clé / valeur // pour les données
d'enregistrement createEntry (nom, description)
{let body: string = "key = create & name =" +
name + "& description =" + description, type:
string = "Application / x-www-form-urlencoded;
charset = UTF-8", en-têtes: any = new Headers
({'Content-Type': type}), options: any = new
RequestOptions ({headers: headers}) , url: any =
this.baseURI + "manage-data.php"; this.http.post
(url, body, options) .subscribe ((data) => {// Si la
requête a été réussie, informez l'utilisateur si (
data.status === 200) {this.hideForm = true;
this.sendNotification (`Félicitations de la
technologie: $ {name} a été ajouté avec succès};}
// Sinon, suivez-nous de toute autre manière
{this.sendNotification (' Quelque chose a mal
tourné! ');}} );} // Mettre à jour un enregistrement
existant qui a été édité dans le formulaire HTML
de la page // Utiliser la méthode de publication
http angulaire pour envoyer les données
d'enregistrement // à notre script PHP distant
(notez la variable de corps que nous avons créée
qui // fournit un fichier variable de la clé avec une
valeur de mise à jour suivie des paires de clés /
valeurs // pour la mise à jour de données
d'enregistrement (nom, description) {let body:
string = "key = update & name =" + name + "&
description =" + description + " & recordID = "+
this.recordID, tapez: string =" application / x-
www-form-urlencoded; charset = UTF-8 ", en-
têtes: any = new Headers ({'Content-Type':
type}), options: any = new RequestOptions
({headers: headers}), url: any = this.baseURI +"
manage- data.php "; this.http.post (url, body,
options) .subscribe (data => {// Si la requête a été
réussie, notifiez l'utilisateur si (data.status ===
200) {this.hideForm = true; this.sendNotification (
`Félicitations de la technologie: $ {name} a été
mis à jour avec succès ');} // Autrement, suivez-
vous de toute autre manière
{this.sendNotification (' Quelque chose a mal
tourné! ');}}); } // Supprime un enregistrement
existant qui a été sélectionné dans le formulaire
HTML de la page // Utilisez la méthode de
publication http angulaire pour envoyer les
données d'enregistrement // à notre script PHP
distant (notez la variable de corps que nous avons
créée qui // fournit une variable de clé avec une
valeur de suppression suivie des paires de clé /
valeur // pour l'ID d'enregistrement que nous
voulons supprimer de la base de données
distante deleteEntry () {let name: string =
this.form.controls ["name"]. value, body : string =
"key = delete & recordID =" + this.recordID,
tapez: string = "application / x-www-form-
urlencoded; charset = UTF-8", en-têtes: any =
new Headers ({'Content-Type': type}), options:
any = new RequestOptions ({headers: headers}),
url: any = this.baseURI + "manage-data.php";
this.http.post (url, body, options) .subscribe
(données => {// Si la requête a été réussie,
notifiez l'utilisateur si (data.status === 200)
{this.hideForm = true; this.sendNotification
(`Félicitations la technologie: $ {name} a été
supprimé avec succès};} // Sinon, suivez-les de
toute façon, {this.sendNotification ('Quelque
chose a mal tourné!'); }}); } // Gestion des
données soumises à partir du formulaire HTML
de la page // Détermine si nous ajoutons un
nouvel enregistrement ou modifiez un //
enregistrement existant saveEntry () {let name:
string = this.form.controls ["name"]. Value,
description: string = this.form.controls
["description"]. value; si (this.isEdited)
{this.updateEntry (nom, description); } else
{this.createEntry (nom, description); }} // Effacer
les valeurs dans les champs de formulaire HTML
de la page resetFields (): void
{this.technologyName = "";
this.technologyDescription = ""; } // Gérer la
notification de l'utilisateur du résultat // des
opérations à distance sendNotification (message):
void {let notification = this.toastCtrl.create
({message: message, duration: 3000});
notification.present (); }
}

S'il vous plait, j'ai besoin de votre aide avec


ceci!
ceci!

---- RÉPONSE DE ADMIN --------

Il semble que le serveur ne retourne pas JSON


valide.

Ouvrez l'onglet réseau dans votre inspecteur


de navigateur et vérifiez la réponse de la
demande pour voir ce qui est retourné.

Je voudrais aussi - si possible - exécuter le


script PHP dans le navigateur - et écho à la
JSON qui devrait être retournée pour
déterminer s'il existe des problèmes avec les
données sorties
Daniele Bordignon
18 juil 2017 09:40:46

Comment continuer ce travail pour ajouter


l'état du réseau et gérer les données hors
ligne? Je ne peux vraiment pas comprendre
comment faire

---- RÉPONSE DE ADMIN --------

Vous devriez implémenter le plugin Ionic


Native Network pour gérer la détection de
l'état du réseau.

La gestion des données hors ligne pourrait être


effectuée en sauvegardant localement les
données distantes à l'aide du plugin Ionic
Native Storage, par exemple.
Dee
12 juil 2017 16:57:20

Salut,

Merci pour ce didacticiel qui est en train de


faire face au but.

J'ai suivi la création de l'application avec un


modèle vierge en utilisant la commande
"ionic start myapp blank",
elle a été exécutée avec succès. Cependant,
j'ai essayé de le servir dans le navigateur en
utilisant la commande "servir ioniquement
après avoir changé de répertoire dans le
dossier myapp.
Cependant, je reçois cette erreur
"Erreur: Impossible de trouver le module '@
angular / tsc-wrapped / src / tsc'"
s'il vous plaît, aidez.

PS: J'ai fait un rafraîchissement total de nœud,


npm, cordova et ionique et ils ont tous installé
les dernières versions. Merci.

---- RÉPONSE DE ADMIN --------

Pourriez-vous nous aider:


https://github.com/angular/angular-
cli/issues/3183?

Sukhpreet
07 juil. 2017 07:29:03

Je suis très nouveau pour Ionic ... J'ai essayé


de créer le projet comme vous avez mentionné
les étapes ci-dessus, mais je suis incapable de
l'exécuter ... Aucune erreur n'a été lancée,
mais je ne peux pas afficher ou ajouter une
entrée dans DB .. S'il vous plaît Aidez-moi.

---- RÉPONSE DE ADMIN --------

Lorsque vous dites incapable d'exécuter, vous


voulez dire juste la partie de la base de
données - ajout et visualisation des entrées ou
le projet ionique dans son ensemble?

Avez-vous un écran blanc sur votre appareil?

Si vous obtenez un écran blanc, il y a un


problème avec le code de votre projet ionique
et vous devrez passer par là pour voir ce que
vous avez brisé - essayez d'exécuter ión
iónique ios --build --verbose (si vous êtes en
cours d'exécution sur iOS) ou ionoid cordova
android --build --verbose (si vous exécutez sur
Android) pour voir quelles erreurs pourraient
être lancées pendant le processus de
construction.

Si vous pouvez exécuter le projet sur votre


appareil (et ne pas voir un écran blanc), votre
code de projet peut être exécuté et j'utiliserais
la connexion de la console dans les appels http
de ionic pour voir quelles données ou erreurs
pourraient être lancées.
Cela pourrait être mis en œuvre comme suit:

.subscribe ((data) => {console.dir (data);


this.items = data;}, (error) => {console.log
('Erreur rencontrée'); console.dir (erreur);});

De là, vous pouvez voir si c'est un problème


avec l'appel http ou la base de données.

Rubaiat Chowdhury
19 juin 2017 06:06:27

Bonjour Administrateur aimé votre tutoriel,


mais est-ce pour les 3 ioniques ou pour 2

---- RÉPONSE DE ADMIN --------

Ionic 3 - déclaré en haut du tutoriel :)


Jav
17 juin 2017 09:10:44

Je reçois cette erreur, ERROR SyntaxError:


jeton inattendu <dans JSON à la position 0,
comment puis-je résoudre ceci? Les deux
fichiers php sont placés dans le dossier des
ressources dans le dossier ionique. Le baseURI
est changé en http: // localhost: 8080 mais il
continue de me donner cette erreur. Quel
pourrait être le problème?

---- RÉPONSE DE ADMIN --------

Bonjour Jav, il semble que votre serveur


renvoie le HTML au lieu de JSON. Je
exécuterais votre application dans le service
ionic, console.dir la réponse revenir du serveur
et utiliser l'inspecteur réseau pour analyser la
réponse.

Il pourrait y avoir de nombreuses raisons pour


lesquelles vous recevez ce message, mais je
commencerais par appeler le script PHP
directement dans votre navigateur pour
simplement faire écho aux données renvoyées et
commencer par inspecter le format à partir de là
pour voir si c'est vraiment JSON ou non.
ricardo
09 juin 2017 16:50:16

très bien merci!!

rebman sunzu
27 mai 2017 05:04:59

Bonjour, merci beaucoup pour le tutoriel, vous


avez fait tout ce qui est nécessaire, mais les
applications fonctionnent bien, le problème
vient sur la page par défaut pour charger les
premières, il commence par ADD A
TECHNOLOGY au lieu de la maison. Quelqu'un
peut-il donner des conseils sur la solution?

Jose L Santos
24 mai 2017 03:26:52

C'est un excellent tutoriel. est possible de faire


la même chose mais avec la connexion et la
sortie avec mysql et php? . Je vous remercie.
Dur
21 avr. 2017 12:04:59

Cela fonctionne parfaitement sur le navigateur,


mais pas sur le périphérique Android ou
l'émulateur. Il n'y a pas non plus d'erreur. Peut
être quelque chose lié à CORS , j'ai essayé de
nombreuses solutions trouvées sur le net mais
aucune ne fonctionne. En fait, rien qui envoie
une demande au serveur PHP et obtient une
réponse fonctionne pour moi sur l'émulateur.
Aidez-moi à résoudre le problème.
Merci.

Nauman Malik
16 avr. 2017 18:44:13

Bonjour, je vous ai suivi tout le didacticiel


jusqu'à présent et j'ai eu ces erreurs. Aidez-
moi à supprimer ceux-ci. J'utilise ionic2,
angular2 et pdo comme base de données et
php.

Erreur d'exécution non


détectée (dans la promesse): Erreur: Aucun
fournisseur pour Http! Erreur à g (http: //
localhost: 8100 / build / polyfills.js: 3: 7133) à
injectionError (http: // localhost: 8100 / build /
main.js: 1511: 86) à noProviderError (http: //
localhost: 8100 / build / main.js: 1549: 12) à
ReflectiveInjector_. throwOrNull (http: //
localhost: 8100 / build / main.js: 3051: 19) à
ReflectiveInjector . getByKeyDefault (http: //
localhost: 8100 / build / main.js: 3090: 25) à
ReflectiveInjector . getByKey (http: // localhost:
8100 / build / main.js: 3022: 25) à
ReflectiveInjector .get (http: // localhost: 8100
/ build / main.js: 2891: 21) à
AppModuleInjector.NgModuleInjector.get (
http: // localhost: 8100 / build / main.js: 3856:
52) à resolveDep (http: // localhost: 8100 /
build / main.js: 11260: 45) à createClass (http:
// localhost: 8100 / build / main.js: 11120: 91)
à createDirectiveInstance (http: // localhost:
8100 / build / main.js: 10954: 37) à
createViewNodes (http: // localhost: 8100 /
build / main.js: 12303: 49) à createRootView
(http: // localhost: 8100 / build / main.js:
12208: 5) à callWithDebugContext (http: //
localhost: 8100 / build / main.js: 13339: 42) sur
Object.debugCreateRootView [as
createRootView] (http: // localhost: 8100 /
build / main.js: 12800: 12)

----- RÉPONSE DE L'ADMIN ------

Le didacticiel a été mis à jour pour Ionic 3 -


vous devrez maintenant importer et ajouter le
HttpModule au module racine de l'application
afin d'utiliser le service Http d'Angular.

Ceci est détaillé dans le tutoriel ci-dessus -


j'espère que cela vous aidera.
Alex
10 avr. 2017 09:32:26

Salut!
J'ai cette erreur:
Uncaught (dans la promesse): Erreur: aucun
fournisseur pour http! g @ http: // localhost:
8100 / build / polyfills.js: 3: 7130 injection
.....................
samuel
27 mars 2017 21:24:59

Bon tutoriel ... vous avez fait beaucoup de


travail ici.
Comment puis-je rendre ADD A
TECHNOLOGY disponible uniquement pour
l'administrateur alors que l'utilisateur de
l'application générée ne voit que le bouton de
liste et d'affichage, Merci

----- RÉPONSE DE L'ADMIN ------

Merci pour les mots de genre - je fais de mon


mieux!

Vous devriez utiliser une sorte de logique


conditionnelle dans la classe de composant et
le modèle - par exemple en utilisant une
directive * ngIf dans le modèle pour afficher
uniquement le bouton ADD A TECHNOLOGY
SI l'utilisateur qui affiche le modèle est
connecté en tant qu'administrateur (comment
vous mettez en œuvre le connexion est à vous)
John
20 mars 2017 12:48:10

Bonjour, c'est l'un des meilleurs tutoriels


Ionic2, PHP et MySQL jusqu'à présent. Existe-
t-il une possibilité de mettre en place une
session utilisateur sur les fichiers php? Heures
supplémentaires lorsque j'essaie de configurer
la session utilisateur, mon application Ionic 2
ne montre aucune donnée même lorsque les
enregistrements ont été ajoutés à la base de
données avant.

----- RÉPONSE DE L'ADMIN ------

Merci pour les gentils mots John.

Lorsque vous dites configurer une session


utilisateur sur le fichier PHP, qu'est-ce que
vous voulez dire exactement?

Utilisation d'une session PHP pour montrer


quand l'utilisateur a accédé aux données?
Enregistrer quand un utilisateur s'est
connecté?
anas
17 mars 2017 17:48:59

Tout d'abord, merci pour votre tuto.


Est-il plus sécurisé d'utiliser le script php
unitaire du côté du serveur ou un CRUD
apI.php général ? La deuxième question est de
savoir comment gérer toutes les autorisations
de votre script php? Je vous remercie

----- RÉPONSE DE L'ADMIN ------

En ce qui concerne votre première question -


cela dépend de votre configuration /
préférences PHP. Vous pouvez créer différents
points d'extrémité pour les opérations CRUD
ou les localiser dans un seul fichier (selon
l'exemple du tutoriel). L'une ou l'autre manière
est parfaitement bien.

Je ne suis pas sûr de ce que vous entendez par


les autorisations pour le script PHP. Dans mon
tutoriel, cela ne sera jamais consulté par
l'application Ionic 2. Voulez-vous savoir
comment sécuriser cet accès non autorisé sur
le serveur lui-même?
Paulo
13 mars 2017 23:22:43

Comment l'architecture de l'application est-elle


préoccupée par les protocoles et les services?

----- RÉPONSE DE L'ADMIN ------

Pas tout à fait sûr de ce que vous parlez avec


votre question, mais l'aspect PHP du tutoriel
ne concerne que démontrer comment la
gestion des données MySQL entre Ionic 2 et
un service distant est possible.

Pourriez-vous compléter votre question?

Ahmad Zul
08 mars 2017 04:59:45

Salut. Je n'ai utilisé que PHP / MySQL dans le


développement web. Est-ce applicable lorsque
je déploie également sur une application
mobile?

----- RÉPONSE DE L'ADMIN ------

Oui, PHP / MySQL peut également être utilisé


avec des applications mobiles.
Gil McGlory
07 mars 2017 22:02:30

J'ai vraiment apprécié ce tutoriel. J'avais été à


la recherche d'un comme celui-ci, sur Ionic 2
en utilisant Php & Mysql, courut à travers le
vôtre, ce qui a beaucoup aidé dans mes efforts
tout en apprenant ionique 2. Avez-vous prévu
de faire d'autres personnes avec plus de
fonctions, etc. très intéressé par s'abonner à
une série de tutoriels / blogs, ou acheter des
exemples d'applications comme celui-ci.
Merci.

RAM
05 mars 2017 15:16:01

comment l'utiliser avec une base de données


mysql localement (wampserver)

----- RÉPONSE DE L'ADMIN ------

Modifiez les paramètres de connexion de la


base de données pour correspondre à ceux de
votre serveur WAMP et assurez-vous que les
URL des scripts PHP dans votre classe Ionic 2
indiquent l'URL du serveur WAMP à la place.
Bart
27 févr. 2017 12:44:02

Bonjour, cours très utile, je me demande s'il


serait possible de faire un tutoriel sur l'envoi
d'images dans l'application ionic 2 au serveur
php mysql?

----- RÉPONSE DE L'ADMIN ------

Bonjour Bart, merci pour le commentaire.

Je travaille actuellement sur certaines


ressources qui discutent de cela (avec d'autres
stratégies de gestion de données pour
différentes bases de données / API).

Si vous êtes intéressé, inscrivez-vous à ma


newsletter par e-mail (c'est gratuit, je ne
spamme pas et vous avez toujours l'option de
vous désabonner) pour vous tenir au courant
des nouveaux tutoriels et des ressources dans
le pipeline.
paul james
22 févr. 2017 15:41:10

Oui, remplacer le nom du fichier par manage-


data.php fonctionne - seulement un point très
important,
mais je pensais qu'il pourrait conduire à des
questions stupides - merci encore

----- RÉPONSE DE L'ADMIN ------

Bonne prise et merci pour la tête! L'article a


été modifié pour afficher manage-data.php au
lieu de store-data.php qui, comme vous l'avez
souligné à juste titre, n'existait pas.

paul james
22 févr. 2017 14:50:47

un cours fabuleux et le gros est génial - un


petit point qui ne diminue pas
vous entendez manage-data.php - vous faites
référence store-data.php mais le fichier ne
semble pas être créé n'importe où dans le
cours
Haut

© Saints at Play Limited 2016

Vous aimerez peut-être aussi