Donax.ch

La météo sur votre site (PHP-XML)

Il existe une multitude de sites proposant d’ajouter gratuitement une sorte de widget météo sur votre site. La plupart du temps ces widgets ne sont pas modifiable esthétiquement (taille, couleur, etc..) et c’est pas dis que ça colle parfaitement avec votre site..

En farfouillant un peu plus.. j’ai trouvé d’excellents outils sur weather.com. Les seules “exigences” sont l’inscription obligatoire sur le site, de spécifier sur quel domaine sera affiché la météo (et quel genre de site c’est..), et bien sur de ne PAS faire payer ce service (ça serait le comble quand même :) ).

Une version simple, et “customisable” existe avec même un formulaire de création…si vous voulez un résultat acceptable sans vous prendre la tête et pour autant que ça colle avec les différentes dimensions de votre site.. c’est par ici.

Voilà ce que ça donne :

Nous voilà donc dans le vif du sujet :)

Tout d’abord, suivez les instructions sur cette page. A la fin, vous recevrez un e-mail de confirmation avec le lien pour télécharger les icônes de météo, votre code “partner” et la clé associée. Noter les conditions générales d’utilisation… (logo weather.com à afficher par exemple:))

Voilà mon bout de code… j’ai plus trop l’habitude de bosser avec du XML, donc il est certainement possible de faire ça plus propre :) (aussi pour l’affichage, on peut faire une boucle PHP…mais bon par flemmardise..:P)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<?php
//Code permettant de récupérer la météo de Berne
 
// paramètres d'instanciation
$array_param = array(
	'city'	=> 'SZXX0006', // code de la ville à récupérer sur weather.com
	'dayf'	=> 3, // nombre de jours à récupérer (3 = aujourd'hui + 2 jours) MAX 5
	'partner'	=> '0000000000', // votre code partner
	'key'	=> '0000000000000000', // votre clé associée
);
 
// voilà l'url d'appel du XML, on y rajoute les différents paramètres qu'on a besoin
$url = "http://xoap.weather.com/weather/local/{$array_param['city']}?cc=*&dayf={$array_param['dayf']}&link=xoap&unit=m&prod=xoap&par={$array_param['partner']}&key={$array_param['key']}";
 
// on charge avec simplexml
$xml = simplexml_load_file($url);
 
// votre chemin jusqu'aux icônes météo
$image_url_path = '/public/images/meteo/icons/';
 
$meteo_info = array();
 
// on parcours le xml et on stock ce qu'on a besoin dans un array php..
foreach ($xml->dayf->day as $key => $val){
 
	if (isset($val['d'])){
 
		$daykey = (int)$val['d'];
 
		// on montre la date à afficher
		$meteo_info[$daykey]['date'] = date('j M', mktime(0,0,0,date('m'),(date('d')+$daykey),date('Y')));
		// on récupère les températures max / min (attention pas de temp max pour le jour actuel..)
		$meteo_info[$daykey]['hi'] = (int)$val->hi[0];
		$meteo_info[$daykey]['low'] = (int)$val->low[0];
		// on récupère l'icône associée
		$meteo_info[$daykey]['icon'] = (int)$val->part[0]->icon[0];
	}
}
 
// petite subtilité pour le jour courant..
$meteo_info[0]['icon'] = (int)$xml->cc->icon;
 
?>
 
<!-- Le html pour afficher la météo à modifier à votre sauce..-->
<div style="width:261px; background-color:#fff; text-align:center;">
	<h1 style='font-family:Trebuchet MS; color:#031a4e; font-size:30px; font-weight:normal; margin-bottom:5px;'>Météo à Berne &nbsp;<a href="http://www.weather.com/weather/today/Bern+Switzerland+SZXX0006?refer=hugme" target="_blank"><img src="/public/images/meteo/twclogo.png"></a></h1>
	<div style='float:left; width:33%; text-align:center;'>
		<h3 style='font-family:Trebuchet MS;font-size:1.3em; font-weight:normal; margin:5px 0; color:#031a4e;'>Aujourd'hui</h3>
		<div>
			<div><img src="<?php print $image_url_path.$meteo_info[0]['icon']?>.png"></div>
			<p style='font-size:11px; color:#031a4e;text-align:center;'><?php print $meteo_info[0]['low'];?> &deg;C</p>
		</div>
	</div>
	<div style='float:left; width:33%; text-align:center;'>
		<h3 style='font-family:Trebuchet MS;font-size:1.3em; font-weight:normal; margin:5px 0; color:#031a4e;'><?php print rtrim($meteo_info[1]['date'], date('Y'));?></h3>
		<div>
			<div><img src="<?php print $image_url_path.$meteo_info[1]['icon'];?>.png"></div>
			<p style='font-size:11px; color:#031a4e;text-align:center;'><?php print $meteo_info[1]['low'];?> / <?php print $meteo_info[1]['hi'];?> &deg;C</p>
		</div>
	</div>
	<div style='float:left; width:33%; text-align:center;'>
		<h3 style='font-family:Trebuchet MS;font-size:1.3em; font-weight:normal; margin:5px 0; color:#031a4e;'><?php print rtrim($meteo_info[2]['date'], date('Y'));?></h3>
		<div>
			<div><img src="<?php print $image_url_path.$meteo_info[2]['icon'];?>.png"></div>
			<p style='font-size:11px; color:#031a4e;text-align:center;'><?php print $meteo_info[2]['low'];?> / <?php print $meteo_info[1]['hi'];?> &deg;C</p>
		</div>
	</div>
	<div style='clear:both;'></div>
</div>

A noter qu’il peut être judicieux d’utiliser un système de cache… en effet, l’accès fréquent aux données externe peut grandement ralentir votre site..

Voilà le résultat obtenu..

Pas trop mal non ?

Posted in Divers, PHP, Programmation, Web 2.0 | Trackback | 3 Comments
Romandez-moi! Romandez-moi!

3 Comments so far

Subscribe to Comments RSS or TrackBack 'La météo sur votre site (PHP-XML)'.

  1. Mar 3, 2010 at 11:21 pm

    ponsfrilus says,

    Cool :-D

    Bah je profite pour dire que la fonction http_build_url (http://www.php.net/manual/en/function.http-build-url.php) aurait pu être placée entre les lignes 5 à 13 :-D

  2. May 3, 2010 at 5:16 pm

    F.B. says,

    Salut,
    J’aimerais pouvoir intégrer ceci sur un site web.

    Comment faire pour obtenir la meme chose que tu as fais pour Berne mais avec le lieu de Yverdon ou Vallorbe?
    Merci de me tenir au courant

  3. May 4, 2010 at 9:37 pm

    Diego Criscenti says,

    Salut F.B. !
    Alors, il faut juste que tu ailles sur cette adresse comme mentionné sur le post https://registration.weather.com/ursa/xmloap/step1 que tu suives les instructions pour que tu reçoives un code “partner” avec une clé associée et que tu les saisisses dans le code (ligne 8 et 9).
    Pour la ville, il suffit d’aller sur le site weather.com et de chercher la ville que tu veux…il est possible que weather.com ne prenne que les “grandes” villes… il faudra alors choisir la grande ville la plus proche… ex lausanne => http://www.weather.com/weather/today/Lausanne+Switzerland+SZXX0017?lswe=lausanne&from=searchbox_localwx
    Donc le code de la ville sera : SZXX0017 pour Lausanne ! Cette valeur est à placer à la ligne 6…

    J’espère que ça va t’aider !

    Bon courage ;)

Leave a Comment

Please be polite and on topic. Your e-mail will never be published.

empat mata pharmacy search game search bet another blog buy pagerank domain buy new movie search domain search auto fishing lake blog shit blog navi new torent business advertising web iklan gratis pagerank web iklan baris image php championships world estate business game magazines features art blog images garden decor backyard shop shelves store cabinets store best shelf organizer shop equipment store fitness first womens clothing store womens clothing childrens clothing leggings store world bbc ticket air ticket speeding images wallpaper tutorial links printer tech system maintenance software media management software spyware blockers online car loan application Trusted Information creator graffiti upskirt no panties lingerie stores kick my ass