libs/js/jquery-mobile-1.0.1pre/experiments/weather/index.php

   1 <?php
   2 $location = isset($_GET['location']) ? $_GET['location'] : '02135';
   3
   4 //get xml from google api
   5 $ch = curl_init();
   6 curl_setopt($ch, CURLOPT_URL, 'http://www.google.com/ig/api?weather='. $location);
   7 curl_setopt($ch, CURLOPT_HEADER, 0);
   8 curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
   9 curl_setopt($ch, CURLOPT_TIMEOUT, 10);
  10 $result = curl_exec($ch);
  11 curl_close($ch);
  12
  13 //parse xml (thx KomunitasWeb.com for pointers)
  14 $xml = simplexml_load_string($result);
  15 $information = $xml->xpath("/xml_api_reply/weather/forecast_information");
  16 $current = $xml->xpath("/xml_api_reply/weather/current_conditions");
  17 $forecast_list = $xml->xpath("/xml_api_reply/weather/forecast_conditions");
  18 ?>
  19 <!DOCTYPE html>
  20 <html>
  21         <head>
  22         <meta charset="utf-8">
  23         <meta name="viewport" content="width=device-width, initial-scale=1">
  24         <title>jQuery Mobile Framework - Weather for <?php echo $information[0]->city['data']; ?></title>
  25         <link rel="stylesheet"  href="../../css/themes/default/" />
  26         <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
  27         <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
  28         <style>
  29                 .current { text-align: left; }
  30                 h1 { font-size: 1.3em; text-align: center;  }
  31                 .ui-listview img { left: auto; margin: 10px; position: absolute; right: 10px; }
  32                 .current { position: relative; }
  33                 .current img { float: left; margin: 5px 10px 0 0; }
  34                 .current p { font-weight: bold; font-size: 1.1em; margin-left: 20px; }
  35                 .ui-mobile label { position: absolute; left: -9999px; }
  36                 .ui-input-search, .min-width-480px .ui-input-search { margin: 5px auto; width: auto; float: none; display: block; }
  37         </style>
  38         <script>
  39                 $('div').live('pagecreate',function(){
  40                         $('.ui-listview img').removeClass('ui-corner-bl');
  41                 });
  42         </script>
  43 </head>
  44 <body>
  45
  46 <div data-role="page" data-theme="a">
  47
  48         <form action="" method="get" class="ui-body ui-body-a ">
  49                 <label for="location">Change zip code:</label>
  50                 <input type="search" name="location" id="location" value="<?php echo$location; ?>" placeholder="zip code..." data-theme="a" />
  51                 <input type="submit" data-role="nojs" value="submit" />
  52                         </form>
  53
  54
  55         <div data-role="content">
  56                 <h1>Currently in <?=$information[0]->city['data']; ?>:</h1>
  57                 <div class="current ui-body ui-bar-a ui-corner-all">
  58
  59             <img src="<?php echo 'http://www.google.com' . $current[0]->icon['data']?>" alt="weather">
  60             <p class="condition">
  61             <?php echo $current[0]->temp_f['data']; ?>&deg; F,
  62             <?php echo $current[0]->condition['data']; ?>
  63
  64             </p>
  65         </div>
  66
  67
  68         <ul data-role="listview" data-inset="true" data-theme="a">
  69                 <li data-role="list-divider">This week's forecast</li>
  70         <?php foreach ($forecast_list as $forecast) : ?>
  71
  72                 <li>
  73             <img src="<?php echo 'http://www.google.com' . $forecast->icon['data']; ?>">
  74             <h3><?php echo $forecast->day_of_week['data']; ?></h3>
  75             <p>
  76                     <?php echo $forecast->low['data']; ?>&deg; F - <?php echo $forecast->high['data']; ?>&deg; F,
  77                     <?php echo $forecast->condition['data']; ?>
  78             </p>
  79             </li>
  80
  81         <?php endforeach; ?>
  82                 </ul>
  83         </div>
  84
  85
  86 </div>
  87
  88 </body>
  89 </html>