Introduction Javascript Javascript et les formulaires L
Transcription
Introduction Javascript Javascript et les formulaires L
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 … IFT1147 - Au delà du HTML 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 ! IFT1147 - Au delà du HTML 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. IFT1147 - Au delà du HTML 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; } } IFT1147 - Au delà du HTML 7 IFT1147 - Au delà du HTML 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. IFT1147 - Au delà du HTML 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 IFT1147 - Au delà du HTML 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. IFT1147 - Au delà du HTML IFT1147 - Au delà du HTML 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 IFT1147 - Au delà du HTML <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 IFT1147 - Au delà du HTML 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. IFT1147 - Au delà du HTML 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). IFT1147 - Au delà du HTML 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 IFT1147 - Au delà du HTML 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 … IFT1147 - Au delà du HTML 19 JpGraph IFT1147 - Au delà du HTML 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. IFT1147 - Au delà du HTML 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. IFT1147 - Au delà du HTML 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); IFT1147 - Au delà du HTML 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. IFT1147 - Au delà du HTML 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 IFT1147 - Au delà du HTML 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). IFT1147 - Au delà du HTML 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 IFT1147 - Au delà du HTML 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. IFT1147 - Au delà du HTML 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) IFT1147 - Au delà du HTML 31 IFT1147 - Au delà du HTML 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 IFT1147 - Au delà du HTML 33 IFT1147 - Au delà du HTML 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 IFT1147 - Au delà du HTML 32 35 L’ouverture d’une balise La fermeture d’une balise Le contenu d’une balise IFT1147 - Au delà du HTML 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); IFT1147 - Au delà du HTML 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. IFT1147 - Au delà du HTML 40 Exemple de document XSL Document XSLT Document HTML IFT1147 - Au delà du 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(); } IFT1147 - Au delà du HTML IFT1147 - Au delà du HTML 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> IFT1147 - Au delà du HTML 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(); IFT1147 - 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. http://www.php.net/manual/en/features. commandline.php Interfaces graphiques: http://gtk.php.net/ IFT1147 - Au delà du HTML IFT1147 - Au delà du HTML 45 46 8