L’événement onSubmit Javascript et les formulaires Introduction Javascript 1

(1)

IFT1147

Programmation Serveur Web avec PHP

Au delà du HTML

…

création dynamique de Javascript, d’images et de fichiers PDF

IFT1147 - Au delà du HTML 2

Introduction

PHP ne permet pas seulement de générer du code HTML.

On peut, entre autres, créer et traiter

Du code Javascript

Des images et des fichiers PDF

Des documents XML

Des applications indépendantes avec interface graphique

PHP et Javascript

Comment créer une collaboration entre la programmation côté serveur et celle côté client …

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.

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 !

L’événement onSubmit

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.

(2)

JS et les expressions régulières

Une expression régulière est un objet en Javascript et elle peut être créée par var expReg = /abcdf$/;

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"))

Recette pour une vérification

function verifierFormulaire() { var pattern =/abcdf/;

if (pattern.test(document.monForm.cp.value)) { return true;

} else {

window.alert("Message d’erreur");

return false;

} }

JS et PHP

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.

Deuxième recette de vérification

$regExp ="^[A-Z] ";

function verifierFormulaire() { var pattern =/<?= $regExp ?>/;

if (pattern.test(document.monForm.cp.value)) { return true;

} else {

window.alert("Message d’erreur");

return false;

} }

De Javascript à PHP

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 !

Déphasage de l’exécution

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.

(3)

De Javascript à PHP : solution

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

Javascript à PHP : exemple

function envoyer() {

document.monForm.nbSec.value=nb;

document.monForm.submit();

}

</script>

[…]

[…]

</form>

Création d’images

PHP et les 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

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).

Script PHP qui retourne une image

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.

(4)

Quelques fonctions d’image

imageCreate() crée une nouvelle image

imageColorAllocate() crée une couleur

ImageFilledRectangle() dessine un rectangle rempli

ImageString() imprime un texte dans l’image

…

Fonctions de base ou librairies ?

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.

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.

Apprendre 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.

Exemple d’utilisation de JpGraph

$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);

Création de documents PDF

(5)

Utilisation

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.

PHP et PDF

Il est possible de générer des documents PDF dynamiquement à partir de PHP.

Les librairies les plus utilisées sont

PDFlib (http://www.pdflib.com)

FPDF (http://www.fpdf.org)

R&OS pdf class (http://www.ros.co.nz/pdf/)

Quel librairie choisir ?

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).

Exemple d’utilisation de FPDF

$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();

PHP et XML

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.

(6)

Documents valides

Tout document XML doit être « bien formé » (well-formed).

De plus, on peut définir des langages précis en se servant de

DTD (Document Type Definition)

XML Schema (plus précis et plus récent que les DTD)

Exemple de document XML

<?xml version="1.0"?>

<prenom>Michel</prenom>

</acteur>

<nom>Cruise</nom>

</acteur>

</acteurs>

Arbre du document XML

Cote nom

Michel prenom

1950-06-25 naissance acteur

Cruise nom

Tom prenom

1962-07-03 naissance acteur acteurs

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

SAX et DOM

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.

Lecture d’un document avec SAX

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

L’ouverture d’une balise

La fermeture d’une balise

Le contenu d’une balise

(7)

Exemple SAX

$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);

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.

Exemple DOM

$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();

}

XSLT

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.

XSLT - déroulement

Document

XML Document

XSLT

Document HTML

Exemple de document XSL

<?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>

</tr>

</xsl:for-each>

</table>

</xsl:template>

</xsl:stylesheet>

(8)

Exemple de transformation XSLT

$xmldoc = domxml_open_file("acteurs.xml");

$xsldoc = domxml_xslt_stylesheet_file ( "acteurs.xsl");

$result = $xsldoc->process($xmldoc);

echo $result->dump_mem();

PHP en ligne de commande PHP n’est pas limité au Web …

Pourquoi ?

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.

Documentation

http://www.php.net/manual/en/features.

commandline.php

Interfaces graphiques:

http://gtk.php.net/