Introduction. Javascript. L événement onsubmit. Javascript et les formulaires. IFT1147 Programmation Serveur Web avec PHP

Transcription

1 IFT1147 Programmation Serveur Web avec PHP Au delà du HTML création dynamique de Javascript, d images et de fichiers PDF 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 IFT Au delà du HTML 2 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. IFT Au delà du HTML 4 Javascript et les formulaires L événement onsubmit 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! IFT Au delà du HTML 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. IFT Au delà du HTML 6 1

2 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$/; 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")) IFT Au delà du HTML 7 function verifierformulaire() { var pattern =/abcdf/; if (pattern.test(document.monform.cp.value)) { return true; else { window.alert("message d erreur"); return false; IFT Au delà du HTML 8 JS et PHP Deuxième recette de vérification 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. IFT Au delà du HTML 9 $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; IFT Au delà du HTML 10 De Javascript à PHP 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! IFT Au delà du HTML 11 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. IFT Au delà du HTML 12 2

3 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 IFT Au delà du HTML 13 <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> IFT Au delà du HTML 14 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. IFT Au delà du HTML 16 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). IFT Au delà du HTML 17 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. IFT Au delà du HTML 18 3

4 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 IFT Au delà du HTML 19 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. IFT Au delà du HTML 20 JpGraph Apprendre JpGraph JpGraph est une librairie populaire pour la création de graphiques statistiques. L utilisation de JpGraph est seulement gratuite pour utilisation non commerciale. 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. IFT Au delà du HTML 21 IFT Au delà du HTML 22 Exemple d utilisation de JpGraph 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); IFT Au delà du HTML 23 4

5 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. IFT Au delà du HTML 25 Il est possible de générer des documents PDF dynamiquement à partir de PHP. Les librairies les plus utilisées sont PDFlib ( FPDF ( R&OS pdf class ( IFT Au delà du HTML 26 Quel librairie choisir? 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). IFT Au delà du HTML 27 $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(); IFT Au delà du HTML 28 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. IFT Au delà du HTML 30 5

6 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 DTD (Document Type Definition) XML Schema (plus précis et plus récent que les DTD) <?xml version="1.0"?> <acteurs> <acteur> <nom>cote</nom> <prenom>michel</prenom> <naissance> </naissance> </acteur> <acteur> <nom>cruise</nom> <prenom>tom</prenom> <naissance> </naissance> </acteur> </acteurs> IFT Au delà du HTML 31 IFT Au delà du HTML 32 Arbre du document XML XML et PHP nom Cote acteur prenom Michel acteurs naissance nom Cruise acteur prenom Tom naissance 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 IFT Au delà du HTML 33 IFT Au delà du HTML 34 SAX et DOM 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. IFT Au delà du HTML 35 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 IFT Au delà du HTML 36 6

7 Exemple SAX Lecture d un document avec DOM $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); IFT Au delà du HTML 37 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. IFT Au delà du HTML 38 Exemple DOM 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(); 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. IFT Au delà du HTML 39 IFT Au delà du HTML 40 XSLT - déroulement Exemple de document XSL Document XML Document HTML Document XSLT IFT Au delà du HTML 41 <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <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> IFT Au delà du HTML 42 7

8 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(); IFT Au delà du HTML 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. commandline.php Interfaces graphiques: IFT Au delà du HTML 45 IFT Au delà du HTML 46 8