Tuesday, April 20, 2010

JQUERY - Weather Widget for Your Website

This code fetches data from a xml provided by google APIs, it requires jQuery and very little code of PHP/ASP. Actually i already done a project to put State Weather into website. I found the Simple PHP coding but here i show you how i convert the PHP coding to ASP.

If you have any comment or ways to improve it, just leave me a comment!

Write Some PHP

header("content-type: text/xml");
$where = $_GET['where'];
$xmlData = file_get_contents("http://www.google.com/ig/api?weather=$where");
echo $xmlData;


Write Some ASP

<%where = Request("where")

set Http = server.CreateObject("Msxml2.ServerXMLHTTP.3.0")
Http.Open "GET", url, False
Dim wxasmly
wxasmly = Http.responseText
response.write (wxasmly)
Set Http = nothing

YES, that’s it, you only have to do this much PHP/ASP.
Save it as google-weather.php / google-weather.asp

HTML and CSS – Whatever

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Weather Widget</title>
<style type="text/css">
body{font-family:Georgia,"Times New Roman",Times,serif;color:#FFFFFF;font-size:12px;margin:20px 0px 0px 80px;}
.rbroundbox { background: url(images/nt.gif) repeat; }
.rbtop div { background: url(images/tl.gif) no-repeat top left; }
.rbtop { background: url(images/tr.gif) no-repeat top right; }
.rbbot div { background: url(images/bl.gif) no-repeat bottom left; }
.rbbot { background: url(images/br.gif) no-repeat bottom right; }

/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
.rbcontent { margin: 6px; display:none;}
.rbroundbox { float:left; margin: 1em auto; }
.data{color:#CCCCCC; font-weight:normal;margin-left:10px}
<script src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var childData = function(selector, arg)
return selector.find(arg).attr('data');
var sendAjax =function(where){$('#data, #error').stop().hide('fast'); $.ajax({
type: "GET",
url: "google-weather.php",
success: function(data){

forecast = $(data).find('forecast_information');
cCondition = $(data).find('current_conditions');

city = childData(forecast, 'city');
date = childData(forecast, 'forecast_date');
condition = childData(cCondition, 'condition');
tempC = childData(cCondition, 'temp_c');
humidity = childData(cCondition, 'humidity');
icon = childData(cCondition, 'icon');
$('#tempC').text(tempC+' C');
where = $('#place').val();
<input name="where" type="text" id="where" /><input type="button" value="Weather Search" id="submit" /><span id="loading">Loading</span><p class="small">ex "kota kinabalu", "ranau sabah", "kota belud"</p>
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent tag" id="error">Sorry No Data Found!</div>
<div class="rbcontent tag" id="data">
<span><img src="" id="icon" /></span><br />
<span>City -</span><span class="data" id="city"></span>&ltbr />
<span>Date -</span><span class="data" id="date"></span>&ltbr />
<span>Condition -</span><span class="data" id="condition"></span><br />
<span>Temperature -</span><span class="data" id="tempC"></span><br />
<span>Humidity -</span><span class="data" id="humidity"></span><br />
</div><!-- /rbcontent -->
<div class="rbbot"><div></div></div>

You can save this html code as index.html

You must to change your PHP/ASP link code inside your index.html

url: "google-weather.php", (if you used PHP code)
url: "google-weather.asp", (if you used ASP code)

Hope can help, Let's Try..


  1. ???? pa ni bikin bingung,PHP???ASP...???

  2. huh~ apa yg ko bingung ni? ko copy and paste ja ba p website ko..sinang cerita :)