Menampilkan Prakiraan Cuaca di Website
Publish: 5 Juli 2013 | Author & Copyright: Johan | Status: FREE tutorial jQuery
Tepat! lagi - lagi JQuery. Dengan plugins jquery bernama zWeaterFeed maka website kita akan terlihat lebih modern dan canggih. Bagaimana tidak, karena sekarang anda bisa dengan mudah menambahkan dan menampilkan prakiraan Cuaca di website anda. Di saat cuaca yang tidak menentu yaitu kadang hujan kadang panas maka pastinya Prakiraan cuaca sangat bermanfaat bagi pengunjung website anda. Prakiraan cuaca (Weather) dari berbagai kota - kota besar di seluruh dunia ini digenerate (bersumber dari website yang terpercaya) yaitu dari yahoo weather.
ok, Berikut langkah - langkah menampilkan Cuaca di Website kita :
1. Download dulu plugins jquery zWeatherFeed di http://www.zazar.net/developers/jquery/zweatherfeed/
2. Berikut ini pengkodean jquery nya, sengaja saya sederhanakan agar mudah dipahami.
|
<html> <head> <title>Weather Forecast kota Jakarta</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="jquery.zweatherfeed.min.js" type="text/javascript"></script> <link href="weather.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(document).ready(function () { $('#test').weatherfeed(['IDXX0022'], { forecast: true }); }); </script> </head> <body> <h1>zWeatherFeed - Prakiraan Cuaca Saat Ini dan Esok Hari</h1> <p>berikut ini prakiraan kondisi cuaca saat ini bersama dengan perkiraan 5 hari kedepan</p> <div id="test"></div> </body> </html> |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> |
| Fungsinya untuk memanggil library utama jquery |
| <script src="jquery.zweatherfeed.min.js" type="text/javascript"></script> |
| Fungsinya untuk memanggil plugin zWeaterfeed |
| <link href="example.css" rel="stylesheet" type="text/css" /> |
| Fungsinya memanggil file css untuk mengatur layout, anda bisa memakai css anda sendiri. |
| <script type="text/javascript"> $(document).ready(function () { $('#test').weatherfeed(['IDXX0022'], { forecast: true }); }); </script> |
| Fungsinya untuk mengontrol plugins dari zWeateherFeed. Nah apa itu 'IDXX0022'? ini adalah kode untuk kota jakarta. Jangan tanyakan saya kok kodenya seperti itu karena kode ini adalah berasal dari pusat penyedia layanan cuaca. Anda bisa mencari kode untuk kota anda www.weather.com . Masukkan di search, nanti akan tampil kodenya di halaman url. Misal saya mencari kode "Surabaya" disitu tampil http://www.weather.com/weather/today/Surabaya+IDXX0052:1:ID , nah id ini yang akan kita ambil (contoh : 'IDXX0052') nantinya. |
Ok, lanjut ya...
| <h1>zWeatherFeed - Prakiraan Cuaca Saat Ini dan Esok Hari</h1> <p>berikut ini prakiraan kondisi cuaca saat ini bersama dengan perkiraan 5 hari kedepan</p> |
| Fungsinya? ini hanya sebagai judul dan penjelasan saja. tag <h1></h1> merupakan tag untuk headline. Sedangkan untuk tag <p></p> berisi deskripsi panjang dari judul biar lebih jelas |
pakai tag ini :
| <div id="test"></div> |
Preview Screenshot Hasilnya :
0 komentar:
Post a Comment