header ilmugrafis
Home Tutorials Fonts IG Store Contact
 
ilmu grafis » jQUERY

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>

Penjelasan :

<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.

Jika anda masih belum mengerti tentang jquery maka anda harus membaca dasar (basic) dari jQuery yang telah saya share di tutorial sebelumnya yaitu Cara Menggunakan JQuery

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

Ok, sekarang ini dia cara menampilkan (memanggil) plugins Prakiraan Cuaca agar mau tambil di website <= sedikit memaksa ya, peace

pakai tag ini :

<div id="test"></div>

Taruh diantara tag <body></body> di tempat dimana anda ingin menampilkan di website anda.

Preview Screenshot Hasilnya :
jakarta forecast
Gambar : screenshot "Weather Jakarta"

Untuk melihat tampilan sebenarnya (Real Demo) dan Download source code dari pembahasan tutorial ini,
download now
Silahkan Klik Disini

Demikian cara menampilkan Prakiraan Cuaca dengan menggunakan zWeatherFeed jQuery. Sampai jumpa di tutorial jQuery yang lainnya. Semoga Bermanfaat.

Share URL Share the URL of this Tutorial in IM, Email or post in forums

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)
 

author

Info dan Kontak Penulis

Johan Felisitas
Tentang Penulis : Lahir di Surabaya 1986, Menyukai komputer grafis terutama program photoshop dan coreldraw. Saat ini bekerja sebagai designer grafis di salah satu perusahaan swasta di Surabaya.
Motto : Berikan yang terbaik, untuk mendapatkan yang terbaik!

Penulis dapat dihubungi via:
Twitter: @johanfelisitas
Google+ :
Facebook : facebook.com/tomuramaster
Email : johan.felisitas[at]gmail[dot]com



Rekomendasi ilmugrafis

DREAMWEAVER WEBDESIGN
Desain Website Dreamweaver

CD Tutorial ini berisi tips dan trik desain website dengan Dreamweaver dan Photoshop...



[adv.] Supported by
dumetschool kursus desain grafis
DumetSchool.com

PHOTOSHOP
Photoshop Dasar
Photoshop Teks Effect
Photoshop Photo Efek
Photoshop Alternatif
Photoshop Plugins

CORELDRAW
CorelDRAW Dasar
CorelDRAW Logo
CorelDRAW Bebas
CorelDRAW Tools

FOTOGRAFI
Lightroom

VECTOR
Adobe Illustrator

ANIMASI
Flash
Swishmax

3D MODELING
3dsMAX
AutoCAD
Cinema 4D
Blender

VIDEO EDITING
Adobe Premiere
After Effect
Pinnacle

WEB DESIGN
Dreamweaver
jQuery

PUBLISHING
InDesign
Ms. Paint

FREEWARE
Gimp
Inkscape

ARTS
News
Artikel
Gallery
Jasa Desain

FRIENDS
Photoshop Desain
Hog Pictures

Link to us


bantuan information

ilmugrafis launcher
Privacy policy
Peta Situs | Term of Use web edukasi - ilmugrafis.com Indonesia
Copyright © 2017 ilmuGrafis. All Rights Reserved. | RSS | Subscribe
Hak Cipta Dilindungi Undang - Undang & Dmca
eXTReMe Tracker