Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
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
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=" </script> … </head>
12
Reprise exemple DEMO <html> <body>
<head><script type="text/javascript" src=" </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
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
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>
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>
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>
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=" <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
26
GoogleMaps <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <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=" <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>
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" " html <html xmlns=" <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> <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"), " "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=" version="2.0"> <channel> <title>Podcast Exemple</title> <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=" /> <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=" 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>
Présentations similaires
