La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Modex Web Javascript / Google Maps

Présentations similaires


Présentation au sujet: "Modex Web Javascript / Google Maps"— Transcription de la présentation:

1 Modex Web Javascript / Google Maps
Dominique Rossin javascript: document.body.contentEditable = 'true'; document.designMode = 'on'; void 0  

2 Plan Site avec téléchargement de fichiers Javascript
Application à Google Maps

3 Téléchargement Formulaire HTML
<form action="upload.php" method="post" enctype="multipart/form-data"> <div><input type="file" name="fichier" /> <input type="submit" value="envoyer" /> </div> </form>

4 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

5 Récupération du fichier (exemple)
// ex pour une image jpg if (!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 $_FILES list($larg,$haut,$type,$attr) = getimagesize($_FILES['fichier']['tmp_name']); echo $larg." ".$haut." ".$type." ".$attr; // JPEG => type=2 if ($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 Le fichier est bien téléchargé ? On récupère les attributs de l’image On le stocke dans un répertoire

6 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'

7 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’;

8 Javascript javascript: document.body.contentEditable = 'true';
document.designMode = 'on'; void 0  

9 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 …

10 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 Démonstration. Syntaxe JAVA.", "width": "800" }

11 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  Min veut dire minified en terme de volume <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script> </head> … ", "width": "800" }

12 Reprise exemple DEMO <html> <body>
<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

Bonjour
Passe la souris
DEMO.", "width": "800" }

13 Galerie Photo <script type="text/javascript">
function show(name) { $("#photo").attr('src','images/'+name); } </script> onmouseover, out onclick ondblclick onmousedown ,up onmousemove <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 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"/> DEMO onmouseover, out. onclick. ondblclick. onmousedown ,up. onmousemove.

  • Dominique Rossin
  • Olivier Serre
photo
  • Dominique Rossin
  • Olivier Serre
photo DEMO.", "width": "800" }

14 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 Tag famille Add Tag 2009

15 Premier essai naïf en Javascript
function f() { var obj = document.getElementById("texte"); obj.innerHTML += " <br /> <input type=\"text\" name=\"tags[]\" /> Tag"; }

16 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> </form>

17 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> ", "width": "800" }

18 Récupérez les éléments
<?php foreach ($_POST['tags'] as $tag) echo $tag.'<br />'; ?> Tags est un tableau contenant chaque valeur des champs de nom tags[] du formulaire appelant.

19 Visibilité et place Un texte peut être Les attributs sont: Visible
Invisible Sans tenir de place Juste caché Les attributs sont: style.visibility "visible" ou "hidden" style.display "none" ou "block"

20 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> ", "width": "800" }

21 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> ", "width": "800" }

22 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");

23 Chainage d’animations
function show(name) { $("#contenuImage").stop(true,true).fadeOut("fast", function () { $("#photo").attr('src','images/'+name); }).fadeIn("slow"); } function show(name) { $("#photo").attr('src','images/'+name); } <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"/>

24 Ouvrir des fenêtres Alert Confirm Prompt alert(‘’Hello World’’);
confirm(‘’Miroir, miroir’’) -> true,false Prompt prompt(‘Quel age ?’’,23) -> contenu

25 GoogleMaps Où ? Prendre le code donné sur la page Tutorial
Google … google map api Prendre 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( , ); 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> Coordonées GPS Dessin

Coordonées GPS. Dessin.", "width": "800" }

26 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( , ); 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>

", "width": "800" }

27 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!"   }); message a afficher 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); Construction de la boite de dialogue Gestion de l’évènement

28 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); } }); }); }

29 Un peu d’Ajax

30 Formulaire sans rechargement
TODO $.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } });

31 Requete sans rechargement
id mot 1 abandon 2 ane 3 bete 4 carte

32 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>'); }); }

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

34 Modex Web RSS / Podcast Dominique Rossin

35 Qu’est-ce ? S’abonner à des informations sans avoir recours aux mails
Pas de spam Gestion du Temps de validité des nouvelles Agrégateurs en ligne (google and co) Podcast, = fil RSS

36 Comment ? Un fil RSS est un fichier XML (Vive 431 ! !)
L’utilisateur donne l’URL du fichier à son agrégateur Le 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

37 XHTML est un arbre <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html <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> head body title p

38 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> <pubDate>Fri, 3 Apr 2009</pubDate> <description> En cours 8</description> <author> Moi</author> </item> <item>…</item> </channel></rss>

39 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

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

41 Lire un fichier RSS function chargeFichier($fichier) { $xml = simplexml_load_file($fichier); return $xml; }

42 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>"; }

43 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; }

44 Sauver le fichier function sauveFichier($fichier,$xml) { $file = fopen($fichier, "w"); fprintf($file, $xml->asXML()); }

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

46 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

47 Podcasts ?

48 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:owner> <itunes:image href="http://localhost/Cours9/rossin.jpg" /> <itunes:category text="Lesson"> </itunes:category> <itunes:category text="TV & Film"/> <item> </item>

49 Méthode et démonstration
Enregistrement de la musique (audacity) ->sarahMargaux.mp3 Ajout d’une entrée dans le canal Fini !

50 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 :00:00 GMT</pubDate> <itunes:duration>0:03</itunes:duration> <itunes:keywords>Modex</itunes:keywords> </item>


Télécharger ppt "Modex Web Javascript / Google Maps"

Présentations similaires


Annonces Google