ENSAJ
TP : Consommation des web services PHP à partir d’un terminal mobile
Partie 1 : Création de la base de données
1. Démarrer le XAMP, et lancer les services suivant (Apache et MySQL) :
2. Connectez-vous vers : [Link]
3. Cliquez sur «Bases de données », et créer la base de données « school1 » :
4. Sélectionnez la base de données « school1 », ensuite créer la table « Etudiant » suivante :
5. Ajouter un jeu d’enregistrement dans la table « Etudiant », en cliquant sur « Insérer » :
Page 1 sur 16
M. LACHGAR
ENSAJ
Etape 2 : Développement de l’application web
1. Démarrer « Netbeans », ensuite créer un projet PHP :
2. Cliquez sur « Next », l’écran suivant apparaît :
Saisissez le nom de votre projet, ensuite enregistrez le dans « C:\xampp\htdocs\projet ».
Page 2 sur 16
M. LACHGAR
ENSAJ
3. Dans votre projet créer les dossiers suivants, pour ce faire cliquez droit sur le projet, ensuite
« New Folder » :
4. Ajouter le fichier « [Link] » dans la racine de votre projet, et définissez la constante
« RACINE » qui représente le chemin vers la racine de votre projet :
<?php
define("RACINE", __DIR__);
5. Dans le dossier « classes », créer la classe « Etudiant » suivante :
<?php
class Etudiant {
private $id;
private $nom;
private $prenom;
private $ville;
private $sexe;
function __construct($id, $nom, $prenom, $ville, $sexe) {
$this->id = $id;
$this->nom = $nom;
$this->prenom = $prenom;
$this->ville = $ville;
$this->sexe = $sexe;
}
function getId() {
return $this->id;
}
function getNom() {
return $this->nom;
}
function getPrenom() {
Page 3 sur 16
M. LACHGAR
ENSAJ
return $this->prenom;
}
function getVille() {
return $this->ville;
}
function getSexe() {
return $this->sexe;
}
function setId($id) {
$this->id = $id;
}
function setNom($nom) {
$this->nom = $nom;
}
function setPrenom($prenom) {
$this->prenom = $prenom;
}
function setVille($ville) {
$this->ville = $ville;
}
function setSexe($sexe) {
$this->sexe = $sexe;
}
public function __toString() {
return $this->nom . " " . $this->prenom;
}
6. Dans le dossier « connexion », créer la classe « Connexion » suivante :
<?php
class Connexion {
private $connexion;
public function __construct() {
$host = 'localhost';
$dbname = 'school1';
$login = 'root';
$password = '';
try {
$this->connexion = new PDO("mysql:host=$host;dbname=$dbname", $login, $password);
$this->connexion->query("SET NAMES UTF8");
} catch (Exception $e) {
die('Erreur : ' . $e->getMessage());
}
}
function getConnexion() {
return $this->connexion;
}
7. Dans le dossier « dao », créer l’interface « IDao » suivante :
Page 4 sur 16
M. LACHGAR
ENSAJ
<?php
interface IDao {
function create($o);
function delete($o);
function update($o);
function findAll();
function findById($id);
}
8. Dans le dossier « service », créer la classe « EtudiantService » qui implémente l’interface
« IDao », ensuite redéfinissez les méthodes :
<?php
include_once RACINE . '/classes/[Link]';
include_once RACINE . '/connexion/[Link]';
include_once RACINE . '/dao/[Link]';
class EtudiantService implements IDao {
private $connexion;
function __construct() {
$this->connexion = new Connexion();
}
public function create($o) {
$query = "INSERT INTO Etudiant (`id`, `nom`, `prenom`, `ville`, `sexe`) "
. "VALUES (NULL, '" . $o->getNom() . "', '" . $o->getPrenom() . "',
'" . $o->getVille() . "', '" . $o->getSexe() . "');";
$req = $this->connexion->getConnexion()->prepare($query);
$req->execute() or die('Erreur SQL');
}
public function delete($o) {
$query = "delete from Etudiant where id = " . $o->getId();
$req = $this->connexion->getConnexion()->prepare($query);
$req->execute() or die('Erreur SQL');
}
public function findAll() {
$etds = array();
$query = "select * from Etudiant";
$req = $this->connexion->getConnexion()->prepare($query);
$req->execute();
while ($e = $req->fetch(PDO::FETCH_OBJ)) {
$etds[] = new Etudiant($e->id, $e->nom, $e->prenom, $e->ville, $e->sexe);
}
return $etds;
}
public function findById($id) {
$query = "select * from Etudiant where id = " . $id;
$req = $this->connexion->getConnexion()->prepare($query);
$req->execute();
if ($e = $req->fetch(PDO::FETCH_OBJ)) {
$etd = new Etudiant($e->id, $e->nom, $e->prenom, $e->ville, $e->sexe);
}
return $etd;
}
public function update($o) {
$query = "UPDATE `etudiant` SET `nom` = '" . $o->getNom() . "', `prenom` = '" .
$o->getPrenom() . "', `ville` = '" . $o->getVille() . "', `sexe` = '" .
$o->getSexe() . "' WHERE `etudiant`.`id` = " . $o->getId();
$req = $this->connexion->getConnexion()->prepare($query);
$req->execute() or die('Erreur SQL');
}
}
Page 5 sur 16
M. LACHGAR
ENSAJ
9. Dans le fichier [Link], créer l’interface graphique suivante :
<!DOCTYPE html>
<?php
include_once './[Link]';
?>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="GET" action="controller/[Link]">
<fieldset>
<legend>Ajouter un nouveau étudiant</legend>
<table border="0">
<tr>
<td>Nom : </td>
<td><input type="text" name="nom" value="" /></td>
</tr>
<tr>
<td>Prenom :</td>
<td><input type="text" name="prenom" value="" /></td>
</tr>
<tr>
<td>Ville</td>
<td>
<select name="ville">
<option value="Marrakech">Marrakech</option>
<option value="Rabat">Rabat</option>
<option value="Agadir">Agadir</option>
</select>
</td>
</tr>
<tr>
<td>Sexe </td>
<td>
M<input type="radio" name="sexe" value="homme" />
F<input type="radio" name="sexe" value="femme" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Envoyer" />
<input type="reset" value="Effacer" />
</td>
</tr>
Page 6 sur 16
M. LACHGAR
ENSAJ
</table>
</fieldset>
</form>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>Nom</th>
<th>Prenom</th>
<th>Ville</th>
<th>Sexe</th>
<th>Supprimer</th>
<th>Modifier</th>
</tr>
</thead>
<tbody>
<?php
include_once RACINE . '/service/[Link]';
$es = new EtudiantService();
foreach ($es->findAll() as $e) {
?>
<tr>
<td><?php echo $e->getId(); ?></td>
<td><?php echo $e->getNom(); ?></td>
<td><?php echo $e->getPrenom(); ?></td>
<td><?php echo $e->getVille(); ?></td>
<td><?php echo $e->getSexe(); ?></td>
<td>
<a href="controller/[Link]?id=
<?php echo $e->getId(); ?>">Supprimer</a> </td>
<td><a href="[Link]">Modifier</a></td>
</tr>
<?php } ?>
</tbody>
</table>
</body>
</html>
10. Dans le dossier « controller », créer les fichiers php suivants :
[Link]
<?php
include_once '../[Link]';
include_once RACINE.'/service/[Link]';
extract($_GET);
$es = new EtudiantService();
$es->create(new Etudiant(1, $nom, $prenom, $ville, $sexe));
header("location:../[Link]");
[Link]
<?php
include_once '../[Link]';
include_once RACINE.'/service/[Link]';
extract($_GET);
$es = new EtudiantService();
Page 7 sur 16
M. LACHGAR
ENSAJ
$es->delete($es->findById($id));
header("location:../[Link]");
Etape 3 : Développement des web services
1. Dans le dossier « ws », créer les services suivantes :
[Link]
<?php
if($_SERVER["REQUEST_METHOD"] == "POST"){
include_once '../[Link]';
include_once RACINE.'/service/[Link]';
create();
}
function create(){
extract($_POST);
$es = new EtudiantService();
$es->create(new Etudiant(1, $nom, $prenom, $ville, $sexe));
}
loadEtudiant
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
include_once '../[Link]';
include_once RACINE . '/service/[Link]';
loadAll();
}
function loadAll() {
$es = new EtudiantService();
header('Content-type: application/json');
echo json_encode($es->findAllApi());
}
Ajouter la méthode findAllApi() suivante dans la classe « EtudiantService »
public function findAllApi() {
$query = "select * from Etudiant";
$req = $this->connexion->getConnexion()->prepare($query);
$req->execute();
return $req->fetchAll(PDO::FETCH_ASSOC);
}
2. Afin de tester les services, ajouter l’extension « Advanced REST client » dans google chrome.
Page 8 sur 16
M. LACHGAR
ENSAJ
Ensuite cliquez sur « Options ». L’interface suivante apparaît : Chemin
Méthode
Données
Cliquez sur « Request », ensuite saisissez le chemin vers votre service, la méthode d’envoi, et
les données à envoyer. Ensuite cliquez sur « Send ».
Vérifier l’ajout dans la base de données.
Ensuite, tester le deuxième service :
Résultat :
Page 9 sur 16
M. LACHGAR
ENSAJ
Etape 4 : Développement de l’application mobile
1. Lancer Android Studio, ensuite créez un projet nommé « projetws ».
2. Ajouter la permission suivante dans le fichier [Link], afin d’avoir la permission
d’accéder à l’internet :
<uses-permission android:name="[Link]" />
3. Intégrer la bibliothèque volley dans votre projet, pour ce faire ajouter dans le fichier
« [Link] » : compile '[Link]:library:1.0.19'
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('[Link]:espresso-core:2.2.2', {
exclude group: '[Link]', module: 'support-annotations'
})
compile '[Link]:appcompat-v7:25.3.1'
compile '[Link]:constraint-layout:1.0.2'
implementation '[Link]:library:1.0.19'
testCompile 'junit:junit:4.12'
4. Créer l’activité « addEtudiant » suivante :
Page 10 sur 16
M. LACHGAR
ENSAJ
a. Ajouter dans le fichier « [Link] » les deux styles suivants :
<style name="text">
<item name="android:textSize">17dp</item>
<item name="android:paddingBottom">10dp</item>
<item name="android:textColor">@android:color/holo_green_dark</item>
</style>
<style name="input">
<item name="android:paddingBottom">20dp</item>
</style>
b. Le layout « activity_add_etudiant.xml » :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="[Link]
xmlns:app="[Link]
xmlns:tools="[Link]
android:layout_width="match_parent"
android:orientation="vertical"
android:padding="10dp"
android:layout_height="match_parent"
tools:context="[Link]">
<TextView
android:id="@+id/textView"
style="@style/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Nom : " />
<EditText
android:id="@+id/nom"
style="@style/input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName" />
<TextView
android:id="@+id/textView2"
style="@style/text"
android:layout_width="match_parent"
Page 11 sur 16
M. LACHGAR
ENSAJ
android:layout_height="wrap_content"
android:text="Prenom :" />
<EditText
android:id="@+id/prenom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
style="@style/input"
android:inputType="textPersonName" />
<TextView
android:id="@+id/textView3"
style="@style/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Ville" />
<Spinner
android:id="@+id/ville"
android:entries="@array/villes"
style="@style/input"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/textView4"
style="@style/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Sexe :"/>
<RadioGroup
android:layout_width="match_parent"
style="@style/text"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:id="@+id/m"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="homme" />
<RadioButton
android:id="@+id/f"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="femme" />
</RadioGroup>
<Button
android:id="@+id/add"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Add" />
</LinearLayout>
c. La classe « [Link] » :
public class AddEtudiant extends AppCompatActivity implements [Link] {
private EditText nom;
private EditText prenom;
private Spinner ville;
private RadioButton m;
private RadioButton f;
private Button add;
RequestQueue requestQueue;
String insertUrl = "[Link]
@Override
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
Page 12 sur 16
M. LACHGAR
ENSAJ
setContentView([Link].activity_add_etudiant);
nom = (EditText) findViewById([Link]);
prenom = (EditText) findViewById([Link]);
ville = (Spinner) findViewById([Link]);
add = (Button) findViewById([Link]);
m = (RadioButton) findViewById([Link].m);
f = (RadioButton) findViewById([Link].f);
[Link](this);
}
@Override
public void onClick(View v) {
Log.d("ok","ok");
if (v == add) {
requestQueue = [Link](getApplicationContext());
StringRequest request = new StringRequest([Link],
insertUrl, new [Link]<String>() {
@Override
public void onResponse(String response) {
}
}, new [Link]() {
@Override
public void onErrorResponse(VolleyError error) {
}
}) {
@Override
protected Map<String, String> getParams() throws AuthFailureError {
String sexe = "";
if([Link]())
sexe = "homme";
else
sexe = "femme";
HashMap<String, String> params = new HashMap<String, String>();
[Link]("nom", [Link]().toString());
[Link]("prenom", [Link]().toString());
[Link]("ville", [Link]().toString());
[Link]("sexe", sexe);
return params;
}
};
[Link](request);
}
}
}
d. Tester l’ajout.
5. Chargement des données
1. Modifier le script « [Link] » :
<?php
if($_SERVER["REQUEST_METHOD"] == "POST"){
include_once("../[Link]");
include_once RACINE.'/service/[Link]';
create();
}
function create(){
extract($_POST);
$es = new EtudiantService();
//insertion d’un étudiant
$es->create(new Etudiant(1, $nom, $prenom, $ville, $sexe));
//chargement de la liste des étudiants sous format json
header('Content-type: application/json');
echo json_encode($es->findAllApi());
}
Page 13 sur 16
M. LACHGAR
ENSAJ
Avec : findAllApi () déjà définie dans la page 8.
2. Créer la classe [Link] dans le package beans sous Android :
public class Etudiant {
private int id;
private String nom;
private String prenom;
private String ville;
private String sexe;
public Etudiant() {
}
public Etudiant(int id, String nom, String prenom, String ville, String sexe) {
[Link] = id;
[Link] = nom;
[Link] = prenom;
[Link] = ville;
[Link] = sexe;
}
public int getId() {
return id;
}
public void setId(int id) {
[Link] = id;
}
public String getNom() {
return nom;
}
public void setNom(String nom) {
[Link] = nom;
}
public String getPrenom() {
return prenom;
}
public void setPrenom(String prenom) {
[Link] = prenom;
}
public String getVille() {
return ville;
}
public void setVille(String ville) {
[Link] = ville;
}
public String getSexe() {
return sexe;
}
public void setSexe(String sexe) {
[Link] = sexe;
}
}
3. Importer la bibliothèque Gson, pour se faire ajouter la dépendance suivant dans
[Link] :
implementation '[Link]:gson:2.8.2'
4. Modifier le contenu de la méthode onClick comme suit :
public void onClick(View v) {
Log.d("ok", "ok");
if (v == add) {
requestQueue = [Link](getApplicationContext());
StringRequest request = new StringRequest([Link],
insertUrl, new [Link]<String>() {
@Override
public void onResponse(String response) {
Log.d(TAG, response);
Type type = new TypeToken<Collection<Etudiant>>(){}.getType();
Collection<Etudiant> etudiants = new Gson().fromJson(response, type);
Page 14 sur 16
M. LACHGAR
ENSAJ
for(Etudiant e : etudiants){
Log.d(TAG, [Link]());
}
}
}, new [Link]() {
@Override
public void onErrorResponse(VolleyError error) {
}
}) {
@Override
protected Map<String, String> getParams() throws AuthFailureError {
String sexe = "";
if ([Link]())
sexe = "homme";
else
sexe = "femme";
HashMap<String, String> params = new HashMap<String, String>();
[Link]("nom", [Link]().toString());
[Link]("prenom", [Link]().toString());
[Link]("ville", [Link]().toString());
[Link]("sexe", sexe);
return params;
}
};
[Link](request);
}
5. Configuration de la sécurité du réseau :
À partir d'Android 9 (API niveau 28), la prise en charge de cleartext est désactivée
par défaut, afin de l’activer :
• Créer le fichier res/xml/network_security_config.xml :
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<domain-config cleartextTrafficPermitted="true">
<domain includeSubdomains="true">Your URL(ex: [Link])</domain>
</domain-config>
</network-security-config>
• [Link] :
<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
<uses-permission android:name="[Link]" />
<application
...
android:networkSecurityConfig="@xml/network_security_config"
...>
...
</application>
</manifest>
6. Tester en mode débougage:
D/MainActivity:
[{"id":"1","nom":"LACHGAR","prenom":"Mohamed","ville":"Rabat","sexe":"homme"},{"id":"2","nom":"
SAFI","prenom":"Amine","ville":"Marrakech","sexe":"homme"},{"id":"7","nom":"RAMI","prenom":"Ami
ne","ville":"Fes","sexe":"homme"},{"id":"8","nom":"ALAMI","prenom":"Younes","ville":"Marrakech","se
xe":"homme"}]
D/MainActivity:
Etudiant{id=1, nom='LACHGAR', prenom='Mohamed', ville='Rabat', sexe='homme'}
Etudiant{id=2, nom='SAFI', prenom='Amine', ville='Marrakech', sexe='homme'}
Etudiant{id=7, nom='RAMI', prenom='Amine', ville='Fes', sexe='homme'}
Etudiant{id=8, nom='ALAMI', prenom='Younes', ville='Marrakech', sexe='homme'}
Page 15 sur 16
M. LACHGAR
ENSAJ
Challenge
1. Créer une activité permettant d’afficher la liste des étudiants (utiliser une
ListView ou RecycleView).
2. Au clic sur un élément de la liste afficher un popup permettant de choisir
l’opération à effectuer (suppression ou modification), en cas de suppression
afficher une alerte de confirmation de suppression, en cas de modification
afficher un popup permettant de fournir les nouvelles valeurs. Après la mise à
jour actualiser la liste des étudiants.
Page 16 sur 16
M. LACHGAR