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
<?php
header("content-type: text/xml");
$where = $_GET['where'];
$xmlData = file_get_contents("http://www.google.com/ig/api?weather=$where");
echo $xmlData;
?>
OR..
Write Some ASP
<%where = Request("where")
url="http://www.google.com/ig/api?weather="&where
set Http = server.CreateObject("Msxml2.ServerXMLHTTP.3.0")
Http.Open "GET", url, False
Http.Send
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">
<head>
<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; }
.tag{font-size:9px;
font-weight:bold;
letter-spacing:0.2em;
text-transform:uppercase;}
.data{color:#CCCCCC; font-weight:normal;margin-left:10px}
#error{color:crimson;}
.small{font-size:9px;color:#999;margin-left:10px;}
#loading{display:none;color:#000;margin-left:10px;font-weight:bold}
</style>
<script src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var childData = function(selector, arg)
{
return selector.find(arg).attr('data');
}
var sendAjax =function(where){$('#data, #error').stop().hide('fast'); $.ajax({
type: "GET",
data:"where="+where,
url: "google-weather.php",
success: function(data){
forecast = $(data).find('forecast_information');
cCondition = $(data).find('current_conditions');
city = childData(forecast, 'city');
if(city!=undefined)
{
date = childData(forecast, 'forecast_date');
condition = childData(cCondition, 'condition');
tempC = childData(cCondition, 'temp_c');
humidity = childData(cCondition, 'humidity');
icon = childData(cCondition, 'icon');
$('#city').text(city);
$('#date').text(date);
$('#condition').text(condition);
$('#tempC').text(tempC+' C');
$('#humidity').text(humidity);
$('#icon').attr({'src':'http://www.google.com'+icon})
$('#data').stop().show('fast');
}
else
{
$('#error').stop().show('fast');
}
$('#loading').fadeOut();
}
});
}
$('#submit').click(function()
{
where = $('#place').val();
$('#loading').fadeIn();
sendAjax(where);
})
})
</script>
</head>
<body>
<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><br />
<span>Date -</span><span class="data" id="date"></span><br />
<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>
</div>
</body>
</html>
You can save this html code as index.html
ATTENTION!!!
You must to change your PHP/ASP link code inside your index.html
Example:
url: "google-weather.php", (if you used PHP code)
url: "google-weather.asp", (if you used ASP code)
Hope can help, Let's Try..
