Home / API / Weather forecast API using jQuery, Ajax and PHP

Weather forecast API using jQuery, Ajax and PHP

Weather forecast API is widely used as widgets in small blogs to huge news website and even as widgets in many websites. Unlike other forecast widgets in this tutorial I have used a unique animation feature WebGL to create raindrops effect. The design credits goes to Codrops which permits the use of their source codes to use in commercial and personal projects. Check out their articles to learn more about the design.

Let’s get started with registering an account on Forecast.io. After registering verify your email address and grab the API key.

Request URL structure

Endpoint URL – https://api.forecast.io/forecast

Parameters

1. YOUR_API_KEY
2. Latitude,Longitue

So the full URL would be like this

https://api.forecast.io/forecast/YOUR_API_KEY/Latitude,Longitude

I have attached a prettified JSON response in the downloaded attachment for you to understand the structure of response. In this demonstration I have included only minimal features from the API. To enhance your application you can always refer the documentation in the forecast IO website. There are also various weather API providers with various set of features you can choose from.

Mark up

Create a text box to type in the location of the user. Weather API pulls data based on Latitude and Longitude values of a specific location for accuracy. So I have used google location search API to achieve this.

You need modern browsers that support WebGL and if it not supported by the browser you should let the user know about it! So if the page loads and things are good to go we can now enable location search API which is quite simple.

app.js

$(“#location”).geocomplete() will enable location search on the textbox with id location. The second function is used to check if the user selects a location by hitting the enter key on the keyboard.

Fetch latitude & longitude using geocoder API – app.js

When the user selects a location by pressing enter key or the location in the textbox changes just get the location and enable the geocoder API,

Now pass the location as a parameter in the API request and fetch the response to process it further. You can check the console to see the JSON response. Also check if the API call was successful

Weather API call – app.js

Make an ajax GET request to process.php with latitude and longitude parameters and retrieve all the contents (weather api response). The process.php takes two inputs latitude and longitude to process further and fetch the weather results. We need to further process the result according to our needs. You can find a sample response file in the download.

process.php

Step: 1 –

  • Get the latitude and longitude
  • Set the endping URL (Request URL) with latitude and longitude (refer API docs for format)
  • Stream the URL and get the response (various methods available [GET method])
  • Decode the JSON response to PHP array using json_decode()

Step: 2 –

Icons are already included in the project

  • Set the icons array (refer API docs for types of weather)
  • Set the weather array (refer to types of weather in API docs) * required for animation
  • The array values in step 2 also depends on the project at codrops. Check link at the top.

Step: 3 –

From the sample json included you can notice that current weather is in the currently object and the weather for consequent days are in the daily array object.

  • We shall first write the HTML for the current day. The temperature is given in Fahrenheit(F) but I need it in Celsius(C) so I’m going to make a F to C conversion.
  • Create a div element with three important attributes class=’slide’, id=’slide-1…..n’ and data-weather=’any_icon’
  • Iterate through each day in array and print the slider icon

That’s it!

Download   Preview

About Ashik

I am a Full Stack Developer and love to work on APIs and Apps. Hardcore lover of Ionic and Laravel <3

Check Also

Private chatroom using socket.io, NodeJS and MySQL

As I promised to write a tutorial on Private chatroom with MySQL DB in the …

  • Ihab Abdel-Rahim

    Is there a way to show by default the weather of visitor geo location first?

  • Prachi

    Thank You for such an easy and complete explanation for integrating API with PHP

Do you wan't to get notified?

I will not spam your inbox. I will only send email whenever I publish a new article or to share information about technology

You have Successfully Subscribed!