Introduction Javascript Javascript et les formulaires L

Transcription

Introduction
IFT1147
Programmation Serveur Web avec PHP
 PHP ne permet pas seulement de
générer du code HTML.
 On peut, entre autres, créer et traiter
Au delà du HTML
…
création dynamique de Javascript,
d’images et de fichiers PDF




Du code Javascript
Des images et des fichiers PDF
Des documents XML
Des applications indépendantes avec
interface graphique
IFT1147 - Au delà du HTML
Javascript
PHP et Javascript
 Javascript est un langage de
programmation qui s’exécute à l’intérieur
du navigateur.
 JS permet de créer des pages interactives
qui sont plus indépendantes du serveur
Web.
 Toute utilisation de JS doit s’assurer de sa
compatibilité avec divers navigateurs.
Comment créer une collaboration
entre la programmation côté
serveur et celle côté client …
4
L’événement onSubmit
Javascript et les formulaires
 JS permet de vérifier la validité des
entrées d’un formulaire côté client, avant
de les soumettre au serveur.
 L’usager n’a alors pas à recharger la
page seulement pour obtenir un
message d’erreur.
 Une deuxième validation côté serveur
reste toujours obligatoire !
2
5
 On peut valider un formulaire en
associant une fonction JS (qui retourne
une valeur booléenne) à l’événement
onSubmit du formulaire.
 Le formulaire sera envoyé seulement si
la fonction retourne true.
6
1
JS et les expressions régulières
Recette pour une vérification
 Une expression régulière est un objet en
Javascript et elle peut être créée par
var expReg = /abcdf$/;
function verifierFormulaire() {
var pattern =/abcdf/;
if (pattern.test(document.monForm.cp.value)) {
return true;
 La méthode test() permet de vérifier
si une chaîne de caractères satisfait à
l’expression régulière
if (expReg.test("asdfasf"))
} else {
window.alert("Message d’erreur");
return false;
}
}
7
JS et PHP
Deuxième recette de vérification
$regExp ="^[A-Z] ";
 Il est pratique de générer le code de
vérification JS automatiquement en PHP.
 Ainsi, lorsqu’on modifie le formulaire et
l’expression régulière en PHP,
automatiquement, le code JS est mis à
jour.
 Il suffit pour cela d’imprimer l’expression
régulière JS à partir de celle de PHP.
8
function verifierFormulaire() {
var pattern =/<?= $regExp ?>/;
if (pattern.test(document.monForm.cp.value)) {
return true;
} else {
window.alert("Message d’erreur");
return false;
}
}
9
De Javascript à PHP
10
Déphasage de l’exécution
 Et si on voulait utiliser la valeur d’une
variable JS dans un script PHP ?
 La bonne nouvelle:
C’est possible.
 La mauvaise nouvelle:
Les exécutions de JS et PHP sont
déphasées et se déroulent à des endroits
différents !
 Le code PHP génère le code HTML (et JS)
côté serveur.
 Ensuite, ce code est envoyé au
navigateur, côté client.
 L’exécution du code JS se déroule donc
après l’exécution du code PHP et
l’instance PHP ne peut pas être jointe en
JS.
11
12
2
De Javascript à PHP : solution
Javascript à PHP : exemple
 La seule façon de faire parvenir la valeur
d’une variable JS à PHP est de générer
une nouvelle requête HTTP (il faut créer
un nouveau processus PHP).
 Il faut donc intégrer la valeur de la
variable de façon astucieuse à la page et


Générer une soumission de formulaire ou
Créer une redirection
<script type="text/javascript">
function envoyer() {
document.monForm.nbSec.value=nb;
document.monForm.submit();
}
</script>
[…]
<a href="javascript:envoyer()"> … </a>
[…]
<form name="monForm" method="post" action="p.php">
<input type="hidden" name="nbSecondes" value="0">
</form>
13
14
PHP et les images
Création d’images
 PHP peut générer dynamiquement (selon
les options de compilation) des images
en format png, jpg et gif.
 Il y a, de façon générale, deux options:


Sauvegarder l’image sur le disque et créer
un lien qui pointe vers ce fichier.
Retourner l’image directement à partir du
code PHP.
Sauvegarde dans des fichiers
Script PHP qui retourne une image
 Apache doit pouvoir créer de nouveaux
fichiers dans le répertoire qui contiendra
les images dynamiques.
 Les noms de fichiers doivent être
uniques.
 Il faut, de temps en temps, faire le
ménage, i.e. effacer les anciens fichiers,
dans ce répertoire (crontab).
16
 Il faut indiquer au navigateur par
l’instruction header qu’il ne recevra pas
du texte en format HTML, mais bien une
image.
 Il peut y avoir des problèmes de gestion
de la mémoire cache dans certains cas;
solution: inclure un paramètre aléatoire
« inutile » en GET.
17
18
3
Quelques fonctions d’image
Fonctions de base ou librairies ?
 imageCreate() crée une nouvelle image
 imageColorAllocate() crée une couleur
 ImageFilledRectangle() dessine un
rectangle rempli
 ImageString() imprime un texte dans
l’image
…
19
JpGraph
20
Apprendre JpGraph
 JpGraph est une librairie populaire pour
la création de graphiques statistiques.
 http://www.aditus.nu/jpgraph/
 L’utilisation de JpGraph est seulement
gratuite pour utilisation non commerciale.
 Les fonctions disponibles directement en
PHP sont des fonctions de base.
 Créer une image complète demande
beaucoup de code PHP.
 Plusieurs librairies de plus haut niveau
ont été développées afin de simplifier le
travail; il faut vérifier leurs licences avant
de les utiliser.
21
Exemple d’utilisation de JpGraph
 Le meilleur document pour apprendre
JpGraph est la documentation fournie.
 Il suffit de télécharger JpGraph: vous
obtiendrez, en plus des classes PHP,
plusieurs centaines d’exemples et de
fichiers HTML de documentation.
22
Création de documents PDF
$graph = new Graph(300,200,'auto');
$graph->SetShadow();
$graph->SetScale("textlin");
$graph->title->Set("Fruits favoris");
$graph->title->SetFont(FF_FONT1,FS_BOLD);
$graph->xaxis->SetTickLabels($labels);
$bp = new BarPlot($data);
$bp->value->Show();
$bp->SetShadow();
$graph->Add($bp);
//sauvegarder
$fileName = tempnam("dynamic", "jpgraph");
$graph->Stroke($fileName);
23
4
Utilisation
PHP et PDF
 Le langage HTML ne se prête pas très
bien à la génération de documents
imprimables.
 Pour tout document qui doit être
imprimé (par exemple des factures), le
langage PDF est un meilleur choix.
 Le langage PDF est ouvert et sa
documentation disponible gratuitement.
 Il est possible de générer des documents
PDF dynamiquement à partir de PHP.
 Les librairies les plus utilisées sont



25
Quel librairie choisir ?
PHP et XML
26
Exemple d’utilisation de FPDF
 PDFLib est très rapide mais son
installation demande une recompilation
de PHP. C’est une librairie commerciale.
 Les deux autres librairies sont écrites en
PHP et sont disponibles gratuitement.
 R&OS semble être très facile à utiliser
dans une majorité de cas (en particulier
pour générer des tableaux).
PDFlib (http://www.pdflib.com)
FPDF (http://www.fpdf.org)
R&OS pdf class (http://www.ros.co.nz/pdf/)
$pdf = new FPDF('P', 'mm', 'Letter');
$pdf->AddPage();
$pdf->SetFont('Arial','B',16);
$pdf->Cell(40,10,'Bonjour !');
$pdf->SetFont('Arial','B',40);
$pdf->Cell(40,100, 'utilisation de fpdf');
$pdf->Output();
27
28
XML
 XML : Extensible Markup Language
 XML est un langage de description de
données.
 XML se sert, comme HTML, de balises,
mais l’usager peut les définir lui-même.
 Contrairement à HTML, toutes les balises
doivent être fermées en XML.
30
5
Documents valides
Exemple de document XML
 Tout document XML doit être « bien
formé » (well-formed).
 De plus, on peut définir des langages
précis en se servant de


<?xml version="1.0"?>
<acteurs>
<acteur>
<nom>Cote</nom>
<prenom>Michel</prenom>
<naissance>1950-06-25</naissance>
</acteur>
<acteur>
<nom>Cruise</nom>
<prenom>Tom</prenom>
<naissance>1962-07-03</naissance>
</acteur>
</acteurs>
DTD (Document Type Definition)
XML Schema (plus précis et plus récent que
les DTD)
31
Arbre du document XML
XML et PHP
 Le support XML pour PHP est encore
assez récent et des changements sont à
prévoir !
 En particulier, la documentation sur
php.net laisse à désirer …
 PHP5 supportera mieux XML
acteurs
acteur
acteur
nom
prenom
naissance
nom
prenom
naissance
Cote
Michel
1950-06-25
Cruise
Tom
1962-07-03
33
SAX et DOM
34
Lecture d’un document avec SAX
 La lecture de documents XML peut être
séparée en deux familles: SAX et DOM
 SAX est basé sur des événements,
comme l’ouverture ou la fermeture d’une
balise.
 DOM génère une représentation
complète du document XML en mémoire.
 SAX consomme moins de mémoire que
DOM … il est donc préférable pour des
documents volumineux.
 Il faut définir des fonctions à exécuter
lorsque la lecture rencontre



32
35
L’ouverture d’une balise
La fermeture d’une balise
Le contenu d’une balise
36
6
Exemple SAX
Lecture d’un document avec DOM
 L’utilisation de DOM est généralement
plus simple que SAX.
 Il suffit de charger le document en
mémoire.
 On peut parcourir la représentation du
document en accédant à la racine et en
suivant, par la suite, les relations
d’enfant, de frère etc.
$parser = xml_parser_create();
xml_parser_set_option($parser,
XML_OPTION_CASE_FOLDING, 0);
xml_set_element_handler($parser,
"startTagHandler", "endTagHandler");
xml_set_character_data_handler($parser,
"cdataHandler");
xml_parse($parser,
file_get_contents('acteurs.xml'));
xml_parser_free($parser);
37
Exemple DOM
39
XSLT - déroulement
Document
XML
 XSLT : Extensible Style Language
Transformations
 XSLT permet de transformer un
document XML
 XSLT est plus qu’une feuille de style: on
peut trier, créer des formats de
documents différents (HTML, PDF) etc.
40
Exemple de document XSL
Document
XSLT
Document
HTML
38
XSLT
$xmldoc = domxml_open_file("acteurs.xml",
DOMXML_LOAD_DONT_KEEP_BLANKS);
$docRoot = $xmldoc->document_element();
$acteurs = $docRoot->child_nodes();
foreach ($acteurs as $currentActeur) {
$nomNode = $currentActeur->first_child();
echo $nomNode->get_content();
$prenomNode = $nomNode->next_sibling();
echo $prenomNode->get_content();
}
41
<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<h2>Acteurs</h2>
<table>
<xsl:for-each select="acteurs/acteur">
<tr>
<td><xsl:value-of select="nom"/></td>
<td><xsl:value-of select="prenom"/></td>
<td><xsl:value-of select="naissance"/></td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
42
7
Exemple de transformation XSLT
PHP en ligne de commande
$xmldoc = domxml_open_file("acteurs.xml");
$xsldoc = domxml_xslt_stylesheet_file (
"acteurs.xsl");
PHP n’est pas limité au Web …
$result = $xsldoc->process($xmldoc);
echo $result->dump_mem();
43
Pourquoi ?
Documentation
 PHP est un langage de programmation
relativement rapide à apprendre.
 PHP est disponible sur beaucoup de
plateformes.
 Il est donc « naturel » de vouloir l’utiliser
en ligne de commande, afin de
remplacer des scripts en Perl, bash, etc.
 http://www.php.net/manual/en/features.
commandline.php
 Interfaces graphiques:
http://gtk.php.net/
45
46
8

Introduction Javascript Javascript et les formulaires L

Transcription

Documents pareils

La relation Médecin- Malade Premières approches

ECO-CONSTRUCTION - S

BAREME KILOMETRIQUE 2016 (les revenus 2015)

L`encadrement des activités physiques et sportives à l`école primaire

Noise Thermometer-FR.qxd

store enrouleur

BARÈME KILOMÉTRIQUE POUR 2015 Barème

cours - Intranet | IUT de Troyes