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

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

Présentations similaires


Présentation au sujet: "DOMINIQUE ROSSIN Modex Web Javascript / Google Maps javascript: document.body.contentEditable = 'true'; document.designMode = 'on'; void 0 javascript:"— Transcription de la présentation:

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

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

3 Téléchargement Formulaire HTML

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 On récupère les attributs de limage Le fichier est bien téléchargé ? 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; $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 javascript: document.body.contentEditable = 'true'; document.designMode = 'on'; void 0

9 Principe Javascript est exécuté par le client (navigateur web) Pas dinteraction 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 Bonjour function f() { var obj = document.getElementById("texte"); var i; for (i = 1; i< 10; i++) { obj.innerHTML = obj.innerHTML + " monde "; } } Démonstration Syntaxe JAVA

11 Portabilité et compatibilité Dépend du navigateur …. Utilisation de librairie universelle Jquery Télécharger jquery-minjquery-min Ou le lier depuis le site de google

12 Reprise exemple http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js Bonjour Passe la souris function f() { var texteActuel = $('#texte').html(); texteActuel += " world"; $('#texte').html(texteActuel); } DEMO

13 Galerie Photo function show(name) { $("#photo").attr('src','images/'+name); } function show(name) { $("#photo").attr('src','images/'+name); } Dominique Rossin Olivier Serre Dominique Rossin Olivier Serre onmouseover, out onclick ondblclick onmousedown,up onmousemove DEMO Dominique Rossin Olivier Serre Dominique Rossin Olivier Serre

14 Formulaires dynamiques Exemple dun site style flickr 2 Problèmes Modifier dynamiquement la page Comment récupérer les arguments ? Télécharger photo Tag 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 += " 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 input

17 forms1.php (jquery) function plus() { $('#divTag').append(' '); } function plus() { $('#divTag').append(' '); } function plus() { var elem = $(' ').hide(); $('#divTag').append(elem); elem.slideToggle("slow"); } function plus() { var elem = $(' ').hide(); $('#divTag').append(elem); elem.slideToggle("slow"); }

18 Récupérez les éléments Tags est un tableau contenant chaque valeur des champs de nom tags[] du formulaire appelant.

19 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"

20 Exemple display Il etait une fois dans une foret lointaine, trois petits cochons Le premier,... function f(ident) { var elem = $('#ident'); elem.slideToggle("slow"); }

21 Exemple visibility Il etait une fois dans une foret lointaine, trois petits cochons Le premier,... function f(ident) { var visibleState = $('#'+ident).css("visibility"); /* uberfoo jquery way of getting visibility value */ $('#'+ident).css("visibility",(visibleState=='visible' ? "hidden" : "visible")); }

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 danimations Dominique Rossin Olivier Serre Dominique Rossin Olivier Serre function show(name) { $("#photo").attr('src','images/'+name); } 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"); } function show(name) { $("#contenuImage").stop(true,true).fadeOut("fast", function () { $("#photo").attr('src','images/'+name); }).fadeIn("slow"); }

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

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

26 GoogleMaps Google Maps JavaScript API Example 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); }

27 Ajout des controles Ajout d'un marqueur (Démo)Démo Ajout dun texte attaché au marqueur var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"Hello World!" }); var message = " lX est la … "; 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); }); var message = " lX est la … "; 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ènement

28 Récupération des coordonées Saisie dun site par le choix sur une carte (cf google3.php) 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); } }); }); } 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 dAjax

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 idmot 1abandon 2ane 3bete 4carte

32 Formulaire function plus() { var nomChamp = $("#inputQuery").val(); $('#result').html(""); $.getJSON("requeteDico.php?query="+nomChamp, function(answer) { $('#result').append(' ' + answer.answer + ' '); }); } function plus() { var nomChamp = $("#inputQuery").val(); $('#result').html(""); $.getJSON("requeteDico.php?query="+nomChamp, function(answer) { $('#result').append(' ' + answer.answer + ' '); }); }

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)); 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 DOMINIQUE ROSSIN Modex Web RSS / Podcast

35 Quest-ce ? Sabonner à 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 ! !) Lutilisateur donne lURL 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 Title goes here Voici ma première page Title goes here Voici ma première page html head title body p p

38 RSS Modex Web http://www.polytechnique.fr Modex Web Vive le Modex http://www.enseignement.polytechnique.fr Fri, 3 Apr 2009 En cours 8 Moi …

39 Description channel : Un canal auquel lutilisateur peut sabonner 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 à laggrégateur le nombre de minutes pendant lesquelles il peut garder linformation 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 " link> $item->title "; echo "$item->description "; echo " $item->pubDate "; }

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 dun site avec publications darticles par les membres BD avec une table gérant les articles : auteur, date, contenu, titre... Formulaire de saisie dun article -> Ajout au fil rss

47 Podcasts ?

48 Entête fichier rss Podcast Exemple http://www.enseignement.polytechnique.fr/informatique fr ℗ & © 2008 Dominique Rossin & Family Modex Web Dominique Rossin Bienvenu dans le podcast du Modex Web Vous aurez ici les dernieres nouvelles du modex Web Dominique Rossin rossin@liafa.jussieu.fr

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

50 Une entrée Venez tous ! Dominique Rossin Au modex Web Reclame pour le modex web IdentUnique Wed, 1 Apr 2009 19:00:00 GMT 0:03 Modex


Télécharger ppt "DOMINIQUE ROSSIN Modex Web Javascript / Google Maps javascript: document.body.contentEditable = 'true'; document.designMode = 'on'; void 0 javascript:"

Présentations similaires


Annonces Google