Langages de scripts, automatisation de commandes et
production de documents structurés :
4. Le web classique : Php et Javascript
gilles.hunault "at" univ-angers.fr
Table des matières cliquable
1. PHP : commandes en session interactive
3. PHP : créer une miniature JPG en ligne de commande
4. PHP : archivage incrémental de fichiers XML
5. PHP vérification de données structurées en XML
6. Le PHP conceptuel (gH) est-il un framework de développement ?
7. Javascript : commandes en session interactive
Il est possible d'afficher toutes les solutions via ?solutions=1.
1. PHP : commandes en session interactive
Essayer en mode interactif avec php -a de donner la ou les instructions qui répondent aux mêmes questions que pour Rexx en mode interactif, exercice 4 de la série 2.
Solution : afficher la solution
Voici les commandes :
$gh> php -a Interactive shell php > echo pow(16,4) ; 65536 php> $a = 2012 % 128 ; php> $b = sprintf("%x", ord("A") ) ; php> $c = hexdec("FFF") ; php> $d = ord("a") ; php> $e = chr(98) ; php> echo "$a $b $c ".$d." $e\n" ; 92 41 4095 97 b php> $cmd = "prog --fmt tex --nbdec 4 --fichier demo.rex" ; php> preg_match("/--fmt (.*?) /",$cmd,$res) ; php> echo $res[1]."\n" ; tex php> $phr = "A2837 12 18 37 25" ; php> $tn = preg_split("/\s+/",$phr) ; # car split(" ",$phr) est "deprecated" php> unset($tn[0]) ; echo join(" ",$tn) ; 12 18 37 25 php> $f = 1 ; php> for ($i=2;$i<=8;$i++) { $f *= $i ; } ; echo $f ; 40320 php> date_default_timezone_set('UTC'); php> $dt = date("d/m/Y h:i") ; php> echo $dt."\n" ; 29/11/2012 02:28 php> $lv = "12 5 20 8 15" ; php> $tv = preg_split("/\s+/",$lv) ; php> $s = 0 ; php> foreach ($tv as $v) { $s += $v ; } ; $s /= count($tv) ; php> echo $s ; 12 php> quit
2. PHP exercices classiques
Réaliser tous les exercices Php de
Solution : afficher la solution
Ces exercices sont déjà tous corrigés
3. PHP : créer une miniature JPG en ligne de commande
Le fichier grande.jpg est une photo que l'on voudrait afficher avec d'autres photos sur une page Web. Le problème est que c'est un gros fichier et l'attribut width= pour l'élément img ne résoud pas ce problème (pourquoi ?). On voudrait générer en ligne de commande un fichier-miniature pour un tel fichier image/photo avec php. Implémenter cela avec la possibilité de choisir le répertoire et la taille de l'image produite. Voici ce qu'on veut obtenir «en image» (il faut cliquer sur l'image pour voir l'image en grand) :
Remarque : on pourra utiliser REXX pour interfacer PHP. Le code HTML utilisé au final doit ressembler à
<p class='texte'> <a href='grande.jpg'><img src='grande_mini.jpg' alt='grande' /></a> </p>Solution : afficher la solution
Le fichier vignette.rex teste les paramètres et exécute vignette.php.
/* (gH) -_- vignette.rex ; TimeStamp (unix) : 29 Novembre 2012 vers 15:35 */ /* génération d'une vignette d'un fichier jpg */ parse arg image dbg . if image="" then do say say " syntaxe : vignette fichier.jpg " ; say exit -1 end /* on vérifie que l'image existe */ rf = fileut("checkFile^"image) if rf = -1 then do say " en conséquence, j'arrête le programme." return end /* fin de si */ /* on retrouve le basename et on ajoute _mini " */ lng = length(image) last4 = substr(image,lng-3) jpg = 0 if translate(last4)=".JPG" then jpg = 1 if jpg= 0 then do say say " ceci n'est pas une image .jpg car je vois " last4 " comme extension " say exit -2 end nomb = substr(image,1,lng-4) nomf = nomb||"_mini.jpg" cmd = " php vignette.php " image " > " nomf say cmd cmd say say " vous pouvez utiliser " nomf say cmd = "last " nomb"*" say cmd cmd if length(dbg)>0 then do say cmd = " cat " nomf cmd say end /* fin si*/<?php # (gH) -_- vignette.php ; TimeStamp (unix) : 29 Novembre 2012 vers 15:40 $dbg = 0 ; # 0 en normal, 1 pour debug if (!isset($argv[1])) { echo " syntaxe : vignette fichier.jpg\n\n" ; exit(-1) ; } # fin si $pic = $argv[1] ; list($width, $height, $type, $attr) = getimagesize("$pic"); if ($dbg==1) { echo " Largeur originale : $width \n" ; echo " Hauteur originale : $height \n" ; echo "\n" ; } # fin si $largeur = 300 ; // correspond à la largeur de l'image souhaitée $hauteur = "100"; // correspond à la hauteur de l'image souhaitée $rap = ($largeur/$width) ; $neww = round($width*$rap) ; $newh = round($height*$rap) ; if ($dbg==1) { echo " largeur demandée : $largeur \n" ; echo " rapport = ".round($rap,2)."\n" ; echo "\n" ; echo " nouvelle Largeur : $neww \n" ; echo " nouvelle Hauteur : $newh \n" ; } # fin si // et voici la création de la miniature... if ($dbg==0) { header("Content-Type: image/jpeg"); $img_in = imagecreatefromjpeg($pic); $img_out = imagecreatetruecolor($neww, $newh); imagecopyresampled($img_out, $img_in, 0, 0, 0, 0, imagesx($img_out), imagesy($img_out), imagesx($img_in), imagesy($img_in)); $t = imagejpeg($img_out); echo $t; } # fin si ?>$gh> regina vignette.rex syntaxe : vignette fichier.jpg $gh> regina vignette.rex grande.jpg php vignette.php grande.jpg > grande_mini.jpg vous pouvez utiliser grande_mini.jpg last grande* -rw-r--r-- 1 gh gh 15385 2012-11-29 15:39 grande_mini.jpg -rwxr-xr-x 1 gh gh 2014695 2012-02-21 14:54 grande.jpg
4. PHP : archivage incrémental de fichiers XML
Implémenter une version PHP de la sauvegarde incrémentale de fichiers XML comme pour l'exercice 7 de la série 2 .
Solution : afficher la solution
Consulter le fichier archcd.php :
<?php $numarchive = 1 ; $nomarchive = "lesxml".sprintf("%03d",$numarchive).".tar" ; while (file_exists($nomarchive)) { $numarchive++ ; $nomarchive = "lesxml".sprintf("%03d",$numarchive).".tar" ; } ; # fin de tant que $specfic = "*.xml" ; system("tar -cf $nomarchive $specfic") ; echo "[php] archivage des fichiers $specfic dans $nomarchive terminée\n" ; ?>
5. PHP vérification de données structurées en XML
On dispose d'un fichier XML de données comme demo.xml qui contient des données structurés de trois types : galerie (nom des colonnes), goupe et données :
<?xml version="1.0" ?> <!-- données de l'exemple de l'article Journal of Microbiological Methods --> <instance nom="jmm" nbgroupes="3" nbattributs="4" nbentités="5" > <données> <groupes> <groupe id="g1" nom="pva" /> <groupe id="g2" nom="pvb" /> <groupe id="g3" nom="pvc" /> </groupes> <attributs> <attribut id="a1" nom="Gene1" /> <attribut id="a2" nom="Gene2" /> <attribut id="a3" nom="Gene3" /> <attribut id="a4" nom="Gene4" /> </attributs> <entités> <entité id="g1e1" ref="g1" nom="s1"> <valuationsPositives refs="a1 a2 a3 " /> <valuationsNégatives refs="a4" /> </entité> <entité id="g1e2" ref="g1" nom="s2"> <valuationsPositives refs="a1 a2 a3" /> <valuationsNégatives refs="a4" /> </entité> <entité id="g2e1" ref="g2" nom="s3"> <valuationsPositives refs="a3 a4" /> <valuationsNégatives refs="a1 a2" /> </entité> <entité id="g2e2" ref="g2" nom="s4"> <valuationsPositives refs="a2 a3 a4" /> <valuationsNégatives refs="a1" /> </entité> <entité id="g3e1" ref="g3" nom="s5"> <valuationsPositives refs="a1 a4" /> <valuationsNégatives refs="a2 a3" /> </entité> </entités> </données> </instance>Sachant que la grammaire associée est galNgrDac.rnc convertir cette grammaire au format XSD puis écrire un programme PHP en ligne de commandes qui prend un fichier passé en paramère, teste la structure du fichier XML puis sa validité par rapport à la grammaire et qui, en cas de validité, produit les trois fichiers de données correspondants de type .gal, .ngr et .dac.
Voici le contenu de ces trois fichiers pour l'exemple fourni
(Fichier demo.gal) 1 Gene1 2 Gene2 3 Gene3 4 Gene4(Fichier demo.ngr) 1 pva 2 pvb 3 pvc(Fichier demo.dac) s1 1 1 1 1 0 s2 1 1 1 1 0 s3 2 0 0 1 1 s4 2 0 1 1 1 s5 3 1 0 0 1Solution : afficher la solution
Solution volontairement non communiquée.
6. Le PHP conceptuel (gH) est-il un framework de développement ?
Qu'est-ce que le PHP conceptuel selon (gH) ? Est-ce que stdphp.zip est un framework de développement ?
Solution : afficher la solution
Le php conceptuel selon (gH) c'est du php sans aucune balise apparente, via un fichier de fonctions php regroupées dans un fichier nommé std.php ; les fonctions sont présentées ici et font référence au fichier de styles nommé std.css. Cette page est écrite en php conceptuel, comme le prouve le lien montresource.
Il ne s'agit en aucun cas d'un framework de développement, juste une petite bibliothèque de fonctions pour développer tout en php sans repasser explicitement par html avec une volonté de fournir du XHTML Strict ou Trans. On pourrait nommer cela du HTPP pour Html Tags Php Programming, mais cela ressemble trop à HTTP, tout comme FTP pour Functional Tag Progamming ferait concurrence à File Transfer Protocol. Dommage pour ces sigles, il ne reste plus qu'à se rabattre sur FTM comme dirait Google...
7. Javascript : commandes en session interactive
Essayer en mode interactif avec rhino de donner la ou les instructions qui répondent aux mêmes questions que pour Rexx en mode interactif, exercice 4 de la série 2.
Solution : afficher la solution
Voici la solution. On y voit clairement que Javascript utilise de nombreux objets.
$gh> rhino Rhino 1.7 release 2 2010 01 20 js> Math.pow(16,4) 65536 js> 2012%128 92 js> "A".charCodeAt().toString(16) 41 js> parseInt("FFF",16) 4095 js> "a".charCodeAt() 97 js> String.fromCharCode(98) b js> cmd = "prog --fmt tex --nbdec 4 --fichier demo.rex" prog --fmt tex --nbdec 4 --fichier demo.rex js> /--fmt (.*?) /(cmd)[1] tex js> phr = "A2837 12 18 37 25" A2837 12 18 37 25 js> tc = phr.split(" ") A2837,12,18,37,25 js> tc.splice(0,1) A2837 js> tc.join(" ") 12 18 37 25 js> ladate = new Date() Thu Nov 29 2012 11:29:15 GMT+0100 (CET) js> f = 1 ; for (i=2;i<=8;i++) { f *= i } 40320 js> data = "12 5 20 8 15" 12 5 20 8 15 js> tdata = data.split(" ") 12,5,20,8,15 js> s = 0 ; for (i=0;i<tdata.length;i++) { s += tdata[i] } # surtout pas ! 012520815 js> s = 0 ; for (i=0;i<tdata.length;i++) { s += parseInt(tdata[i],10) } 60 js> quit()
8. Javascript exercices classiques
Réaliser tous les exercices Javascript de
Solution : afficher la solution
Ces exercices sont déjà tous corrigés
9. Javascript : zoom avec JQUERY
Reprendre l'exercice 3 : au lieu d'ouvrir l'image comme nouvelle page Web, il faut l'afficher dans une fenêtre "surgissante". On pourra utiliser Jquery. Cliquer à nouveau sur l'image devra fermer la nouvelle fenêtre. Voici ce qu'on veut obtenir «en image» (il faut cliquer sur l'image pour voir l'image "surgir" en grand et recliquer pour la fermer) :
Solution : afficher la solution
La solution n'est pas de nous mais d'Hervé Renault, qui, lui-même... [suite].
Il faut bien sûr avoir une version de jquery fonctionnelle...
En deux mots, il faut que le code suivant soit exécuté
$(document).ready(function() { $('a.zoom').fancyZoom({scaleImg: true, closeOnClick: true}); });pour une partie de code html comme :
<p> <a href="#vignette" class="zoom"><img alt='mini' src="miniature.jpg" /></a> </p> <div id="vignette"> <img alt='moyenne' src="moyenne.png" /> </div>Tout le travail est donc fait par le plugin fancy_zoom de jQuery, avec la modification mineure suivante pour masquer la croix de fermeture :
// This is my simplified version of fancyZoom jQuery plugin --Hervé // based on http://static.railstips.org/orderedlist/demos/fancy-zoom-jquery/ // thank you Steve Smith (and Cabel Sasser for the original version) jQuery.fn.fancyZoom = function(options) { var options = options || {}; var zooming = false; if ($('#zoom').length == 0) { var html = '<div id="zoom" style="display:none;"></div>'; $('body').append(html); $('html').click(function(e) { if ($(e.target).parents('#zoom:visible').length == 0) hide(); }); $(document).keyup(function(event) { if (event.keyCode == 27 && $('#zoom:visible').length > 0) hide(); }); } var zoom = $('#zoom'); this.each(function(i) { $($(this).attr('href')).hide(); $(this).click(show); }); return this; function show(e) { if (zooming) return false; zooming = true; var content_div = $($(this).attr('href')); var zoom_width = options.width; var zoom_height = options.height; var width = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth); var height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight); var x = window.pageXOffset || (window.document.documentElement.scrollLeft || window.document.body.scrollLeft); var y = window.pageYOffset || (window.document.documentElement.scrollTop || window.document.body.scrollTop); var window_size = {'width':width, 'height':height, 'x':x, 'y':y} var width = (zoom_width || content_div.width()) + 60; var height = (zoom_height || content_div.height()) + 60; var d = window_size; // ensure that newTop is at least 0 so it doesn't hide close button var newTop = Math.max((d.height/2) - (height/2) + y, 0); var newLeft = (d.width/2) - (width/2); var curTop = e.pageY; var curLeft = e.pageX; zoom.attr('curTop', curTop); zoom.attr('curLeft', curLeft); zoom.attr('scaleImg', options.scaleImg ? 'true' : 'false'); $('#zoom').hide().css({ position : 'absolute', top : curTop + 'px', left : curLeft + 'px', width : '1px', height : '1px' }); zoom.hide(); if (options.closeOnClick) { $('#zoom').click(hide); } if (options.scaleImg) { zoom.html(content_div.html()); $('#zoom img').css('width', '100%'); } else { zoom.html(''); } $('#zoom').animate({ top : newTop + 'px', left : newLeft + 'px', opacity : "show", width : width, height : height }, 600, null, function() { if (options.scaleImg != true) { zoom.html(content_div.html()); } zoom.show(); zooming = false; }); return false; } function hide() { if (zooming) return false; zooming = true; $('#zoom').unbind('click'); if (zoom.attr('scaleImg') != 'true') { zoom.html(''); } $('#zoom').animate({ top : zoom.attr('curTop') + 'px', left : zoom.attr('curLeft') + 'px', opacity : "hide", width : '1px', height : '1px' }, 500, null, function() { if (zoom.attr('scaleImg') == 'true') { zoom.html(''); } zooming = false; }); return false; } }
Code-source php de cette page ; code javascript utilisé. Retour à la page principale du cours.
Retour à la page principale de (gH)