AJAX/JQUERY
AJAX
• AJAX : Asynchronous JavaScript and XML
• AJAX :une technologie de développent web technique pour la
création des applications web interactives.
• N’est pas un nouveau langage de programmation, mais une
nouvelle façon d'utiliser les normes existantes.
• Communication client/serveur en mode asynchrone
• l'échange de données avec un serveur, et la mise à jour des parties d'une
page Web - sans recharger la page entière.
• Utilise XHTML pour le contenu, CSS pour la présentation, avec Le
DOM et JavaScript pour afficher du contenu interactif.
• Plusieurs APIs :
• JQUERY, PROTOTYPE, DOJO, YUI, ANGULAR JS, EXT JS, …
©Tarek ZLITNI - ISIMS Développement Web II 2
1
AJAX
• AJAX est une technologie de navigateur Web (coté client)
indépendant de la technologie coté serveur Web.
• XML est couramment utilisé en tant que format pour recevoir des
données du serveur, bien que tout format, y compris le texte brut,
peut être utilisé.
• Les applications Web classiques transmettent des informations
vers et depuis le serveur utilisant des requêtes synchrones.
• è Cela signifie que vous remplissez un formulaire, cliquez sur
Envoyer, et acheminés vers une nouvelle page avec de nouvelles
informations à partir du serveur.
©Tarek ZLITNI - ISIMS Développement Web II 3
AJAX
è Avec AJAX, quand vous cliquez sur envoyer, JavaScript
communique avec le serveur, interprète les résultats, et met à
jour l'écran actuel. Dans le sens le plus pur, l'utilisateur ne sais
jamais que tout ce qui a même été transmis au serveur.
• (+) Un utilisateur peut continuer à utiliser l'application alors
que le programme client demande des informations à partir du
serveur en arrière-plan.
• (+) l'interaction de l'utilisateur est intuitive et naturelle. Clic
est pas nécessaire, mouvement de la souris, par exemple, est
un événement déclencheur suffisant.
• Piloté par les données (Data-driven) VS Piloté par les pages
(page-driven).
©Tarek ZLITNI - ISIMS Développement Web II 4
2
AJAX
L'OBJET XMLHTTPREQUEST
• Le principe de fonctionnement d'XMLHttpRequest est d'envoyer
une requête HTTP vers le serveur, et une fois la requête envoyée, les
données renvoyées par le serveur peuvent être récupérées.
è Il faut disposer d'un objet disposant de cette fonctionnalité. Cet
objet a été développé par Microsoft et implémenté dans Internet
Explorer 5.5 en tant que contrôle ActiveX.
• Par la suite, les autres navigateurs suivirent et implémentèrent un
objet appelé XMLHttpRequest.
• Cet objet fut implémenté avec les mêmes méthodes que celle
d'XMLHTTP de Microsoft.
• Plus tard, XMLHttpRequest fut proposé au W3C en vue de devenir un
standard.
©Tarek ZLITNI - ISIMS Développement Web II 5
AJAX
L'OBJET XMLHTTPREQUEST
Récupération de L'Objet XMLHTTPREQUEST
function getXMLHttpRequest() {
var xhr = null;
if ([Link] || [Link]) {
if ([Link]) {
try {
xhr = new ActiveXObject("[Link]");
} catch(e) {
xhr = new ActiveXObject("[Link]");
}
} else {
xhr = new XMLHttpRequest();
}
} else {
alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
return null;
}
return xhr;
}
©Tarek ZLITNI - ISIMS Développement Web II 6
3
AJAX
L'OBJET XMLHTTPREQUEST
Le changement d'état de la requête
• Quand on envoie une requête HTTP via XMLHttpRequest, ellepasse
par plusieurs états différents :
• 0 : L'objet XHR a été créé, mais pas encore initialisé (la méthode open
n'a pas encore été appelée)
• 1 : L'objet XHR a été créé, mais pas encore envoyé (avec la méthode
send )
• 2 : La méthode send vient d'être appelée
• 3 : Le serveur traite les informations et a commencé à renvoyer des
données
• 4 : Le serveur a fini son travail, et toutes les données sont
réceptionnées
©Tarek ZLITNI - ISIMS Développement Web II 7
AJAX
L'OBJET XMLHTTPREQUEST
• Il faut détecter les changements d'état pour savoir où en est la requête.
è utiliser la propriété onreadystatechange, et à chaque changement
d'état:
var xhr = getXMLHttpRequest();
[Link] = function() {
if ([Link] == 4 && ([Link] == 200 || [Link] == 0)) {
alert("OK"); // C'est bon \o/
}
};
[Link]("GET", « [Link]", true);
[Link](null);
©Tarek ZLITNI - ISIMS Développement Web II 8
4
AJAX
L'OBJET XMLHTTPREQUEST
Récupérer les données
• Utiliser une des deux propriétés :
• responseText : récupérer les données sous forme de texte brut
• responseXML : récupérer les données sous forme d'arbre XML
var xhr = getXMLHttpRequest();
[Link] = function() {
if ([Link] == 4 && ([Link] == 200 || [Link] == 0)) {
alert([Link]); }
};
©Tarek ZLITNI - ISIMS Développement Web II 9
L’API JQUERY
Principe de fonctionnement
• Définition d'une fonction : jquery() ou $() (raccourci)
• Accepte des paramètres (en général, un selecteur)
• Retourne un objet JQuery
• Est exécutée au cours du chargement de l'arbre DOM de la page
• Sinon, il faut utiliser [Link]
• Utilisation de sélecteurs CSS et JQuery pour accéder et manipuler les
éléments de l'arbre.
©Tarek ZLITNI - ISIMS Développement Web II 10
5
L’API JQUERY
Sélection d’éléments
• Possibilité de sélectionner :
• par type de bloc
• par identifiant
• par classe
• en combinant les critères
• en filtrant sur les noms d’attributs
• en faisant référence aux positions relatives dans le DOM
• en ne récupérant qu’un seul élément parmi les objets sélectionnés
• en filtrant parmi les objets sélectionnés
©Tarek ZLITNI - ISIMS Développement Web II 11
L’API JQUERY
Sélection d’éléments
Sélecteurs CSS
• Similaires aux éléments d'une feuille de style, ou XPath
• Exemples : #menuid, h2, .onglet, *, etc.
• Exemple : $ ( « body» )
• Exemple : $("[Link]") // tous les divs de classe main
• Exemple : sélectionneur de visibilité // si l'élément est visible
$("div:visible") // sinon $("div:hidden")
[Link]
• Sélecteurs Jquery
• Sélecteurs supplémentaires n'existant pas en CSS ou Xpath (ou
raccourcis)
• Exemples : :visible, :first, etc
©Tarek ZLITNI - ISIMS Développement Web II 12
6
L’API JQUERY
Les méthodes
• Chaque méthode renvoie l'objet courant
• Acces/modification au contenu d'un objet : html()
• Exemple :
$ ( ' body ' ) . html ( " hello world " ) ;
• Forcer l'utilisation de la fonction jquery() (à la place de $() )
• $.noConflict( ) ou [Link] ( )
<html> <head>
<script type="text/javascript" src="[Link]"></script>
</head><body>
He l l o World
<script> $('body').html("bonjour tout le monde" ) ; </script>
</body> </html>
©Tarek ZLITNI - ISIMS Développement Web II 13
L’API JQUERY
Variables
• var nomVaraible= ValInitiale;
• var body = $ ( ' body ' ) ;
• Variables standards :
Exemples :length ou size : Nombre d‘élements contenus dans l'objet
JQuery courant:
$ ( function ( ) {
var bodycont ent = $ ( " d i v " ) ;
$ ( '#id2 ' ). html ( " I l y a " + bodycont ent . l e n g t h + " ) " ) ;
// afficher le nombre des <div>
}) ;
©Tarek ZLITNI - ISIMS Développement Web II 14
7
L’API JQUERY
Modifier le code HTML
• .html('[contenu]') : remplacement du contenu d’un élément (les balises
sont considérées comme des balises)
• .text('[contenu]') : remplacement du contenu d’un élément en
considérant le tout comme du texte (les caractères < et > des balises
sont remplacés par les entités XML (> et <)
• .after('[contenu]') : insertion du contenu après l’élément sélectionné
• .before('[contenu]') : insertion du contenu avant l’élément sélectionné
• .append('[contenu]') : insertion du contenu dans l’élément sélectionné
à la suite des éléments existants
• .prepend('[contenu]') : insertion du contenu dans l’élément sélectionné
avant les éléments existants
©Tarek ZLITNI - ISIMS Développement Web II 15
L’API JQUERY
text() vs. html()
• html() : Remplacement du contenu d'un élément (les balises sont
considerees comme des balises)
• text() : Remplacement du contenu d'un élément en considérant le tout
comme du texte (les caractères < et > des balises sont remplaces par les
entités XML (> et <)
$ ( function () {
var bodycontent = $ ( " d i v " ) ;
$ ( '#id2' ). html ( " Il ya " + bodycont ent . length+ " div ) " ) ;
}) ;
©Tarek ZLITNI - ISIMS Développement Web II 16
8
L’API JQUERY
Récupérer /modifier les propriétés CSS
• Récupération de la valeur de l'attribut CSS d'un élément :
• .css('color') renvoie la couleur de l'élément
• Attribution d'une valeur à l'attribut CSS d'un élément :
• .css('color','red') attribue la couleur rouge à l'élément
• Attribution d'une valeur à l'attribut CSS des éléments de classe CSS «id»
en fonction de leur valeur actuelle à l'aide d'une fonction :
var tailleActuelle = parseInt($('#id').css("font-size"));
$('#id').css("font-size",function(){
return tailleActuelle+10;
});
è augmente de 10 points la taille de police de caractères
des éléments de classe «id»
©Tarek ZLITNI - ISIMS Développement Web II 17
L’API JQUERY
Récupérer /modifier les propriétés CSS
• Attribution d'un ensemble de valeurs à un ensemble d'attributs CSS
d'un élément :
• .css({'border' : '1px solid black', 'color' : 'red'})
è attribue la couleur rouge à l'élément et lui ajoute une bordurenoire.
©Tarek ZLITNI - ISIMS Développement Web II 18
9
L’API JQUERY
Récupérer /modifier les propriétés CSS
Manipulation des classes CSS
• .addClass('laClasse')
• Ajoute la classe CSS laClasse à l'élément.
• .removeClass('laClasse')
• Retire la classe CSS laClasse à l'élément.
• .toggleClass('laClasse')
• Ajoute la classe CSS laClasse à l'élément s'il ne l'a pas, la lui retire sinon.
• .hasClass('laClasse')
• Renvoie true si l'élément a la classeCSS laClasse, false sinon.
©Tarek ZLITNI - ISIMS Développement Web II 19
L’API JQUERY
Les évènements
• Un évènement est une action remplie par le navigateur, ou plus
généralement l'utilisateur. on lance un bout de code quand une
action est remplie.
• Un évènement qui pourra écouter la souris de l'utilisateur , ou bien écouter
le clavier de l'utilisateur : quand il presse des touches du clavier; exécuter
du code.
è Un évènement fait le lien entre une action remplie, et une fonction
(du code) exécutée.
$("#unDiv").click(function(){
// Le code a exécuter !
});
©Tarek ZLITNI - ISIMS Développement Web II 20
10
L’API JQUERY
Les évènements : La souris
Fonction Action
click() Clic
dblclick() Double-clic
hover() Passage de la souris
mouseenter() Rentrer dans un élément
mouseleave() Quitter un élément
mousedown() Presser un bouton de la souris
mouseup() Relâcher un bouton de la souris
scroll() Scroller (utiliser la roulette)
©Tarek ZLITNI - ISIMS Développement Web II 21
L’API JQUERY
Les évènements : La souris
Fonction Action
keydown() qui se lance lorsqu'une touche du
clavier est enfoncée
keypress() se lance lorsqu'on maintient une
touche enfoncée
keyup() se lance lorsqu'on relâche une
touche préalablement enfoncée.
©Tarek ZLITNI - ISIMS Développement Web II 22
11
L’API JQUERY
Les évènements : Document /Fenêtre
Action Fonction
Load()/ready() Chargement du document
resize() Changement de la taille de la fenêtre
scroll() Défilement avec la barre de défilement
Unload() A la fermeture document
©Tarek ZLITNI - ISIMS Développement Web II 23
L’API JQUERY
Les évènements : Formulaire
Action Fonction
submit() Envoi du formulaire
change() Changement de la valeur d’un champ de
formulaire
focus() Mettre le focus dans un champ de
formulaire
blur() Perte du focus dans un champ de
formulaire
©Tarek ZLITNI - ISIMS Développement Web II 24
12
L’API JQUERY
Les effets :Afficher/Cacher
• On peut afficher / cacher un élément HTML respectivement avec
les deux fonctions : show() et hide() , toggle() jout le double rôles
<script> </head>
$(document).ready(function(){ <body>
$("#hide").click(function(){ <button id="hide">Cacher</button>
$("p").hide(); }); <button id="show">Afficher</button>
$("#show").click(function(){ <p> Le message a afficher /cahcer</p>
$("p").show(); }); </html>
});
</script>
è Le paramètre de vitesse optionnel spécifie la vitesse d’afficher/cacher
et peut prendre les valeurs suivantes: "slow” , "fast", ou une valeur en
millisecondes.
$("button").click(function(){
$("p").hide(1000);});
©Tarek ZLITNI - ISIMS Développement Web II 25
L’API JQUERY
Les effets :l’hauteur
• Les effets sur la hauteur sont assurés par les fonctions: slideUp() ,
slideDown() , slideToggle()
• slideToggle() bascule entre les deux méthodes slideDown() et slideUp()
$(document).ready(function(){ #panel {
$("#flip").click(function(){ padding: 50px;
$("#panel").slideUp("slow"); }
}); </style>
}); </head>
</script> <body>
<style> <div id="flip">Click to slide up
#panel, #flip { panel</div>
padding: 5px; <div id="panel">Hello world!</div>
text-align: center; </body>
border: solid 1px #c3c3c3; </html>
}
©Tarek ZLITNI - ISIMS Développement Web II 26
13
L’API JQUERY
Les effets: opacité
• Modifier l’opacité d’une façon progressive
• jQuery offre les méthodes suivantes :
$("button").click(function(){
• fadeIn()
$("#div1").fadeIn();
• fadeOut() $("#div2").fadeIn("slow");
• fadeToggle() $("#div3").fadeIn(3000);
});
• fadeTo()
$("button").click(function(){
$("button").click(function(){ $("#div1").fadeOut();
$("#div1").fadeTo("slow", 0.15); });
$("#div2").fadeTo("slow", 0.4);
}); $("button").click(function(){
$("#div1").fadeToggle();
©Tarek ZLITNI - ISIMS Développement Web II 27
L’API JQUERY
Les effets: Animation
• Créer une animation par la modication de certaines propriétes de
style CSS(déplacement d’un block par exemple)
• La fonction animate() a le syntaxe suivant :
$(selecteur).animate({params},speed,callback);
• Le paramètre params définit les propriétés CSS à être animés.
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
©Tarek ZLITNI - ISIMS Développement Web II 28
14
L’API JQUERY
Les effets: Animation
èLes valeurs à modifier peuvent $("button").click(function(){
$("div").animate({
être relatives aux valeurs actuelles
left: '250px',
• Ceci est assuré par l’ajout de += ou-= height: '+=150px',
devant la valeur : width: '+=150px'
});
});
$(document).ready(function(){
èOn peut créer une succession $("button").click(function(){
var div = $("div");
d’animation [Link]({left: '100px'},
"slow");
[Link]({fontSize: '3em'},
"slow");
});
});
©Tarek ZLITNI - ISIMS Développement Web II 29
L’API JQUERY
Les effets: Arrêt des animation
• Pour arrêter les animations on utilise la function stop()
$(selecteur).stop(stopAll,goToEnd);
• Le paramètre optionnel stopAll spécifie si toutes les animations
seront arrêtées. Par défaut est false, ce qui signifie que seulement
l’animation courante sera arrêtée,
• Le paramètre optionnel goToEnd spécifie si on complète ou on
l’arête immédiatement . Par défaut est false.
• Par défaut, stop() arête l’animation courante appliquée sur
l’élément sélectionné.
©Tarek ZLITNI - ISIMS Développement Web II 30
15
L’API JQUERY
Les effets: l’enchainement des effets
• Il existe une technique appelée l’enchainement , qui nous
permet d'exécuter des commandes multiples jQuery, l'un après
l'autre, sur le même élément.
• Pour l’enchainement d'une action, on ajoute simplement
l'action à l'action précédente
• L’exemple suivant enchaine les methods css(), slideUp(), et
slideDown() ensemble. L’élement "p1" changement au rouge d’abord,
il glisse vers le haut, puis il glisse vers le bas:
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
$("#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);
©Tarek ZLITNI - ISIMS Développement Web II 31
L’API JQUERY
AJAX
• Methode : ajax (paramètres dans un tableau)
• Parametres :
• url: + adresse de la page a laquelle est envoyée la requête
• type: + type de la requête (GET ou POST)
• async: (true|false) connexion asynchrone ou non
• data : + Tableau de clés/valeur (paramètres de la requête)
• success: + fonction (anonyme) exécutée en cas de succes
• complete: + fonction (anonyme) exécutée a la finn de l'envoi de la reponse
par le serveur (en cas de succes ou d'erreur)
©Tarek ZLITNI - ISIMS Développement Web II 32
16
L’API JQUERY
AJAX
Exemple (fichier HTML)
<!DOCTYPE html>
<html>
<head> $("#button2").click(function(){
<script src="[Link]"></script> var val=$('#champs').val();
<script>
$(document).ready(function(){ $.ajax({url: "[Link]",
$("#button1").click(function(){ type: "POST",
var val=$('#champs').val(); data:{valeur:val},
success:
$.ajax({url: "[Link]", function(result){
type: "POST", $("#div2").html(result);
data:{valeur:val}, }});
success: });
function(result){ });
$("#div1").html(result); </script>
}}); </head>
});
©Tarek ZLITNI - ISIMS Développement Web II 33
L’API JQUERY
AJAX
Exemple (fichier HTML)
</script> <div id="div2"></div></td>
</head> </tr></table>
<body> </body>
chaine : <input type="text" value="valuer </html>
initiale" name="chp" id="champs">
<br><br>
<table border="1" cellpadding="3">
<tr><td><button id="button1"> Afficher
en MAJUSCULE</button>
<div id="div1"></div></td>
<td><button id="button2"> Afficher en
Miniscule</button>
©Tarek ZLITNI - ISIMS Développement Web II 34
17
L’API JQUERY
AJAX
Exemple
[Link] [Link]
<?php <?php
$donnee =$_POST['valeur']; $donnee =$_POST['valeur'];
$maj =strtoupper($donnee); $min =strtolower($donnee);
echo $maj; echo $min;
?> ?>
©Tarek ZLITNI - ISIMS Développement Web II 35
L’API JQUERY
Ecriture dans XML
• Ecriture dans un fichier XML :
• L’écriture des fichiers XML repose sur l’objet XMLDOM.
1. La création d’une chaine englobant le contenu XML.
2. La sérialisation de cette chaine.
3. L’écriture de contenu XML final.
1. Affichage dans le navigateur.
2. Téléchargement d’un ficher XML.
©Tarek ZLITNI - ISIMS Développement Web II 36
18
L’API JQUERY
Ecriture dans XML
• Exemple :
<!DOCTYPE html>
<html>
<head>
<script src="[Link]"></script>
<script >
function parseXML(txt){
var xmlDoc
if ([Link]){
xmlDoc=(new
DOMParser()).parseFromString(txt,"application/xml");
}else{
xmlDoc=new ActiveXObject("[Link]");
[Link]="false";
[Link](txt);
}
return xmlDoc
} ©Tarek ZLITNI - ISIMS Développement Web II 37
L’API JQUERY
Ecriture dans XML
• Exemple :
// Ecriture de contenu XML
function getCountries() {
return parseXML("<data><country
name='USA'></country></data>")
}
// Sérialisation
function toStringXML(xmlObject){
if([Link])
return (new XMLSerializer()).serializeToString(xmlObject)
else
return [Link]
}
©Tarek ZLITNI - ISIMS Développement Web II 38
19
L’API JQUERY
Ecriture dans XML
• Exemple :
// Ecriture de contenu XML Final : affichage dans le navigateur
function writerScreen(X){
[Link]('data:text/xml,'
+ encodeURIComponent('<?xml version="1.0" encoding="UTF-8"?>'
+toStringXML(X)
))
}
// Ecriture de contenu XML Final : télécharger le fichier
function writer(X){
var dataUrl='data:application/download,' + encodeURIComponent(
'<?xml version="1.0" encoding="UTF-8"?>’ +toStringXML(X)
)
[Link]=dataUrl
}
©Tarek ZLITNI - ISIMS Développement Web II 39
L’API JQUERY
Ecriture dans XML
• Exemple :
function generateXML(){
var data=getCountries()
writer(data);//téléchargement
//writerScreen(data);//affichage dans le navigateur
}
$(function(){
$('button').click(generateXML)
})
</script>
<title>writer</title>
</head>
<body>
<button>Générer un ficher XML</button>
</body>
</html>
©Tarek ZLITNI - ISIMS Développement Web II 40
20
L’API JQUERY
Ecriture dans XML
• Exercice :
Ecrire le code javascript permettant de récupérer les
principales propriétés d’une vidéo et les écrire sous forme
XML. Le code de génération du code XML est invoqué suite au
chargement des métadonnées de la ressource vidéo.
©Tarek ZLITNI - ISIMS Développement Web II 41
L’API JQUERY
Lecture d’un fichier XML
• Quatre étapes pour récupérer le contenu XML :
1. Charger le fichier XML (get)
2. Spécifier le nom du tag a sélectionner (une structure itérative )
3. Accéder au contenu texte (text() )
4. Accéder aux attributs ($[Link](« nomattribut"))
©Tarek ZLITNI - ISIMS Développement Web II 42
21
L’API JQUERY
Lecture d’un fichier XML
• Exemple :
Lire le contenu d’un fichier XML décrivant un ensemble de livres et
les affichant sous frome de liste
• Le document XML :
<?xml version="1.0" </livre>
encoding="UTF-8"?> <livre type="roman" >
<livres> <titre>Le zahir</titre>
<livre type="scientifique" > <annee>2010</annee>
<titre>Programmer en <copyright>Choello</copyright>
Java</titre> </livre>
<annee>2013</annee> </livres>
<copyright>Delannoy</copyright>
©Tarek ZLITNI - ISIMS Développement Web II 43
L’API JQUERY
Lecture d’un fichier XML
<!DOCTYPE html>
<html>
<head>
<script src="[Link]"></script>
<script >
$(document).ready(function()
{
$.get('[Link]', function(d){
$('body').append('<h1> Ensemble de livres </h1>');
$('body').append('<div />');
$(d).find('livre').each(function(){
var $book = $(this);
var type = $[Link]("type");
var titre = $[Link]('titre').text();
var annee = $[Link]('annee').text();
var cp = $[Link]('copyright').text();
©Tarek ZLITNI - ISIMS Développement Web II 44
22
L’API JQUERY
Lecture d’un fichier XML
var html = '<h4>' + titre + '</h4> ';
html += '<ul><li>type :' + type + '</li>';
html += '<li>année de sortie : ' + annee + '</li>' ;
html += '<li>(c): ' + cp + '</li>' ;
html += '</ul><hr>';
$('div').append($(html));
});
});
});
</script>
<body>
</body>
</html>
©Tarek ZLITNI - ISIMS Développement Web II 45
L’API JQUERY
Lecture d’un fichier XML
• Exemple :
©Tarek ZLITNI - ISIMS Développement Web II 46
23
L’API JQUERY
Parcours d’un dossier et manipulation de ses fichiers
1. Parcourir la liste des fichiers d’un dossier donné :appel de la
fonction ajax, en donnant l’url du répertoire.
2. Récupération des noms de tous les noms des fichiers
3. La suite du traitement demandé
• Exemple :
• Parcourir un dossier d’images de type « png » et les afficher
©Tarek ZLITNI - ISIMS Développement Web II 47
L’API JQUERY
Parcours d’un dossier et manipulation de ses fichiers
<script src="[Link]"> </script>
<script>
var dir = "./";
var fileextension = ".png";
$.ajax({
url: dir,
success: function (data) {
//Lister toutes les images et vérifier l’extension
$(data).find("a:contains(" + fileextension + ")").each(function () {
var filename = [Link];
$("body").append($("<img src="+ filename + "><br>"));
});
}
});
</script>
©Tarek ZLITNI - ISIMS Développement Web II 48
24
©Tarek ZLITNI - ISIMS Développement Web II 49
25