Embed Size (px)
Citation preview
DOMINIQUE ROSSIN
Modex WebJavascript / Google Maps
javascript: document.body.contentEditable = 'true'; document.designMode = 'on'; void 0
Plan
1) Site avec téléchargement de fichiers
2) Javascript
3) Application à Google Maps
Téléchargement
<form action="upload.php" method="post" enctype="multipart/form-data">
<div><input type="file" name="fichier" /><input type="submit" value="envoyer" /></div></form>
Formulaire HTML
Récupération fichier $_FILES (1)
$_FILES['userfile']['name'] Le nom original du fichier client
$_FILES['userfile']['type'] Le type MIME du fichier (ex"image/gif"). Non sûr
$_FILES['userfile']['size'] La taille, en octets, du fichier téléchargé.
$_FILES['userfile']['tmp_name'] Le nom temporaire du fichier serveur
$_FILES['userfile']['error'] Le code d'erreur
Récupération du fichier (exemple)
// ex pour une image jpgif (!empty($_FILES['fichier']['tmp_name']) && is_uploaded_file($_FILES['fichier']['tmp_name'])) {
// Le fichier a bien ete telecharge// Par securite on utilise getimagesize plutot que les variables $_FILESlist($larg,$haut,$type,$attr) = getimagesize($_FILES['fichier']['tmp_name']);echo $larg." ".$haut." ".$type." ".$attr;// JPEG => type=2if ($type == 2) {if (move_uploaded_file($_FILES['fichier']['tmp_name'],'images/toto.jpg')) {
echo "Copie réussie";} else {
echo "echec de la copie";}} else echo "mauvais type de fichier";}
Démonstration
On récupère les attributs de
l’image
Le fichier est bien téléchargé
?
On le stocke dans
un répertoire
Liste des différents types
Image: 1 => 'GIF',
2 => 'JPG', 3 => 'PNG', 4 => 'SWF', 5 => 'PSD', 6 => 'BMP', 7 => 'TIFF(intel byte order)', 8 => 'TIFF(motorola byte order)', 9 => 'JPC', 10 => 'JP2', 11 => 'JPX', 12 => 'JB2', 13 => 'SWC', 14 => 'IFF', 15 => 'WBMP', 16 => 'XBM'
Fichier doc, rtf, pdf
$allowedExtensions = array("txt", "rtf", "doc", "pdf");if (in_array(end(explode(".", $fileName)), $allowedExtensions)) {
echo ‘Bon type de fichier’ ; else
echo ’erreur de type’;
Javascript
javascript: document.body.contentEditable = 'true'; document.designMode = 'on'; void 0
Principe
Javascript est exécuté par le client (navigateur web)
Pas d’interaction avec le serveur Sauf pour AJAX (Asynchronous Javascript And Xml)
Permet de modifier la page affichée Montrer / cacher des éléments Formulaires à nombre de champs variables Vérification à priori de champs saisis Affichage de cartes, Geolocalisation …
Javascript et l'attribut id<html><body><div id="texte">Bonjour</div><input type="button" onclick='f()' value="f"/><script language="javascript" type="text/javascript">
function f() {var obj = document.getElementById("texte");var i;for (i = 1; i< 10; i++) {
obj.innerHTML = obj.innerHTML + " monde <br />";}}
</script></body></html>
Démonstration
Syntaxe JAVA
Portabilité et compatibilité
Dépend du navigateur ….Utilisation de librairie universelle
Jquery Télécharger jquery-min Ou le lier depuis le site de google
<head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>… </head>
Min veut dire
minified en terme
de volume
Reprise exemple
<html><head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script></head>
<body><div id="texte">Bonjour</div><input type="button" onclick='f()' value="f"/><div onmouseover="f()" style="background-color:blue">Passe la souris</div>
<script language="javascript" type="text/javascript">function f() {var texteActuel = $('#texte').html();texteActuel += " world";$('#texte').html(texteActuel);}</script></body></html> DEMO
Galerie Photo
<script type="text/javascript">function show(name) { $("#photo").attr('src','images/'+name);}</script>
<div style="float:left"> <ul> <li onmouseover="show('rossin.jpg')">Dominique Rossin</li> <li onmouseover="show('serre.jpg')">Olivier Serre</li></ul> </div> <div style="float:right;" id="image"> <img src="images/rossin.jpg" alt="photo" id="photo" height="150px"/> </div>
onmouseover, outonclick
ondblclickonmousedown ,up
onmousemove
DEMO
<div style="float:left"> <ul> <li >Dominique Rossin</li> <li >Olivier Serre</li></ul> </div> <div style="float:right;" id="image"> <img src="images/rossin.jpg" alt="photo" id="photo" height="150px"/> </div>
Formulaires dynamiques
Exemple d’un site style flickr
2 Problèmes Modifier dynamiquement la page Comment récupérer les arguments ?
Télécharger photo
Tagfamille
Add Tag2009
Premier essai naïf en Javascript
function f() { var obj = document.getElementById("texte"); obj.innerHTML += " <br /> <input
type=\"text\" name=\"tags[]\" /> Tag";}
Forms1.php (javascript)
function plus(){
c=document.getElementById('texte');
ch1=document.createElement('input');
ediv = document.createElement('div');
ch1.setAttribute('type','text');
ch1.setAttribute('name','tags[]');
ediv.appendChild(ch1);
c.appendChild(ediv);
}
<div id=« texte »>
… div
input<form …><div id=« texte »>
<div> <input type=« text » name=« tags[] » /></div>
</div></form>
forms1.php (jquery)
function plus() { $('#divTag').append('<div><input type="text" name="tags[]"></div>');}
<script type="text/javascript">function plus() { var elem = $('<div><input type="text" name="tags[]"></div>').hide(); $('#divTag').append(elem); elem.slideToggle("slow");}</script>
Récupérez les éléments
<?phpforeach ($_POST['tags'] as $tag)
echo $tag.'<br />';?>
Tags est un tableau contenant chaque valeur des champs de nom tags[] du formulaire appelant.
Visibilité et place
Un texte peut être Visible Invisible
Sans tenir de place Juste caché
Les attributs sont: style.visibility
"visible" ou "hidden" style.display
"none" ou "block"
Exemple display
<html><body><div>Il etait une fois dans une foret lointaine,<div id="texte">trois petits cochons</div>Le premier, ...</div><input type="button" onclick='f("texte")' value="f"/><script language="javascript" type="text/javascript"> function f(ident) { var elem = $('#ident'); elem.slideToggle("slow");}</script></body></html>
Exemple visibility
<html><body><div>Il etait une fois dans une foret lointaine,<div id="texte">trois petits cochons</div>Le premier, ...</div><input type="button" onclick='f("texte")' value="f"/><script language="javascript" type="text/javascript"> function f(ident) { var visibleState = $('#'+ident).css("visibility"); /* uberfoo jquery way
of getting visibility value */ $('#'+ident).css("visibility",(visibleState=='visible' ? "hidden" :
"visible"));}</script></body></html>
Changement de style
Récupérer le style:
Modification, exemples:
$(‘#monId’).css(‘attribut’)…
var doc = $("#foo");doc.css("background-color" , "red"); doc.css("color" , "white"); doc.css("text-align" , "center");
Chainage d’animations
<div style="float:left"> <ul> <li onmouseover="show('rossin.jpg')">Dominique Rossin</li> <li onmouseover="show('serre.jpg')">Olivier Serre</li> </ul> </div><div style="float:right;" id="image"> <div id="contenuImage"> <img src="images/rossin.jpg" alt="photo" id="photo" height="150px"/> </div></div>
function show(name) { $("#photo").attr('src','images/'+name);}
function show(name) { $("#contenuImage").stop(true,true).fadeOut("fast", function () { $("#photo").attr('src','images/'+name); }).fadeIn("slow");}
Ouvrir des fenêtres
Alert
confirm(‘’Miroir, miroir’’) -> true,false
Confirm
alert(‘’Hello World’’);
prompt(‘Quel age ?’’,23) -> contenu
Prompt
GoogleMapsOù ?
Google … google map apiPrendre le code donné sur la page Tutorial
Test
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script><script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(48.717440, 2.218220); var myOptions = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); }</script></head> <body onload="initialize()"> <div id="map_canvas" style="width: 500px; height: 300px"></div> </body>
Dessin
Coordonées GPS
GoogleMaps
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Google Maps JavaScript API Example</title><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script><script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(48.717440, 2.218220); var myOptions = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); }</script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 500px; height: 300px"></div> </body></html>
Ajout des controles
Ajout d'un marqueur (Démo)
Ajout d’un texte attaché au marqueur
var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"Hello World!" });
var message = "<p>l’X est la …</p>"; var infowindow = new google.maps.InfoWindow( { content: message, size: new google.maps.Size(80,50) }); // Ajout d'un texte dans une fenetre en cas de clic google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); });
message a afficher
Construction de la boite de
dialogue
Gestion de l’évènemen
t
Récupération des coordonées
Saisie d’un site par le choix sur une carte (cf google3.php)var goecoder = new google.maps.Geocoder();google.maps.event.addListener(map, 'click', function(event) { $("#inputLat").val(event.latLng.lat()); $("#inputLong").val(event.latLng.lng()); var address; geocoder.geocode({'latLng': event.latLng}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { $("#address").val(results[0].formatted_address); $("#country").val(results[results.length-1].formatted_address); } else { alert("Geocoder failed due to: " + status); } }); }); }
Un peu d’Ajax
Formulaire sans rechargement
TODO$.ajax({
type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){
alert( "Data Saved: " + msg );
} });
Requete sans rechargement
id mot
1 abandon
2 ane
3 bete
4 carte
Formulaire
<form action="" method="post" > <div id="divTag"> <div> <input type="texte" id="inputQuery" /> </div></div><input type="button" onclick='plus()' value="Query"/></form>
function plus() {var nomChamp = $("#inputQuery").val();$('#result').html("");$.getJSON("requeteDico.php?query="+nomChamp, function(answer) {$('#result').append('<p>' + answer.answer + '</p>'); }); }
requeteDico.php
header('Content-type: application/json');$conn = mysql_connect("localhost", "root", "");mysql_select_db("dico", $conn);mysql_query("SET NAMES UTF8");$rech = trim($_GET['query']);$query = "SELECT * FROM `dico` WHERE `mot` LIKE '%{$rech}%'";$result = mysql_query($query);$tabAnswer = array();while ($ligne = mysql_fetch_assoc($result)) { $tabAnswer[] = $ligne['mot'];}echo json_encode(array("answer"=>$tabAnswer));
DOMINIQUE ROSSIN
Modex WebRSS / Podcast
Qu’est-ce ?
S’abonner à des informations sans avoir recours aux mails
Pas de spamGestion du Temps de validité des nouvellesAgrégateurs en ligne (google and co)Podcast, . . . = fil RSS
Comment ?
Un fil RSS est un fichier XML (Vive 431 ! !)L’utilisateur donne l’URL du fichier à son
agrégateurLe gestionnaire du site alimente le fichier et y
ajoute des news.Une nouvelle est composée de :
Un titre Une date de publication Le contenu Un lien Un auteur
XHTML est un arbre
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>Title goes here</title> </head><body>
<p>Voici ma première page</p></body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html
head
title
body
p
RSS
<?xml version=‘‘1.0’’ encoding=‘‘UTF-8’’ ?><rss version=‘‘2.0’’>
<channel id=‘‘xxx’’><description>Modex Web</description>
<link>http://www.polytechnique.fr</link><title>Modex Web</title>
<item><title> Vive le Modex</title><link> http://www.enseignement.polytechnique.fr</link><pubDate>Fri, 3 Apr 2009</pubDate><description> En cours 8</description><author> Moi</author>
</item><item>…</item>
</channel></rss>
Description
channel : Un canal auquel l’utilisateur peut s’abonner title : Le titre du canal (apparaît dans un aggrégateur) link : Lien vers le site description : Description détaillé du canal language : langue du style : e.g. en-us pubDate : Date de publication des news (attention au
format) ttl : Dit à l’aggrégateur le nombre de minutes pendant
lesquelles il peut garder l’information dans le cache
item
item : Une nouvelle dans un canal title : Le titre de la nouvelle (apparaît dans un
aggrégateur) description : Description détaillé du canal link : Lien vers le site pubDate : Date de publication des news guid : Un identifiant unique pour la nouvelle.
Lire un fichier RSS
function chargeFichier($fichier) { $xml = simplexml_load_file($fichier); return $xml;}
Afficher le fichier
function afficheFichier($xml) { foreach ($xml->channel->item as $item) { echo "<b><a href=$item->link>
$item->title</a></b><br>"; echo "$item->description<br>"; echo
"<i>$item->pubDate</i><br><br>"; }}
Ajouter une nouvelle
function ajouteNews($xml, $title, $date, $link, $description) {
$child = $xml->channel->addChild('item'); $child->addChild('title', $title); $child->addChild('pubDate', date(DATE_RFC822,
$date)); $child->addChild('link', $link); $child->addChild('description', $description); return $xml;
}
Sauver le fichier
function sauveFichier($fichier,$xml) { $file = fopen($fichier, "w"); fprintf($file, $xml->asXML());}
Exemple
$xml = chargeFichier("news.xml");$xml = ajouteNews($xml, "A quand le cours 9",
date("today"), "http://www.enseignement.polytechnique.fr/", "Google ");
sauveFichier("news2.xml", $xml);afficheFichier($xml);
Alimentation du fil
Exemple d’un site avec publications d’articles par les membres
BD avec une table gérant les articles : auteur, date, contenu, titre. . .
Formulaire de saisie d’un article -> Ajout au fil rss
Podcasts ?
Entête fichier rss
<?xml version="1.0" encoding="UTF-8"?><rss xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" version="2.0"><channel><title>Podcast Exemple</title><link>http://www.enseignement.polytechnique.fr/informatique</link><language>fr</language><copyright>℗ & © 2008 Dominique Rossin & Family</copyright><itunes:subtitle>Modex Web</itunes:subtitle><itunes:author>Dominique Rossin</itunes:author><itunes:summary>Bienvenu dans le podcast du Modex Web</itunes:summary><description>Vous aurez ici les dernieres nouvelles du modex Web</description><itunes:owner><itunes:name>Dominique Rossin</itunes:name><itunes:email>[email protected]</itunes:email></itunes:owner><itunes:image href="http://localhost/Cours9/rossin.jpg" /><itunes:category text="Lesson"></itunes:category><itunes:category text="TV & Film"/><item></item>
Méthode et démonstration
Enregistrement de la musique (audacity) ->sarahMargaux.mp3
Ajout d’une entrée dans le canalFini !
Une entrée
<item><title>Venez tous !</title><itunes:author>Dominique Rossin</itunes:author><itunes:subtitle>Au modex Web</itunes:subtitle><itunes:summary>Reclame pour le modex web</itunes:summary><enclosure url="http://localhost/sarahMargaux.mp3" length= "
50154"type="audio/mp3" /><guid> IdentUnique</guid><pubDate>Wed, 1 Apr 2009 19:00:00 GMT</pubDate><itunes:duration>0:03</itunes:duration><itunes:keywords>Modex</itunes:keywords></item>
