How to Create Weather App in PHP | How to Use OpenWeatherMap API Using PHP

How to create weather app using PHP open weather api key
How to create weather app using PHP open weather api key
Spread the love, Share this Article!

Subscribe to Our YouTube Channel!

In this article, you will learn How to Create Weather App in PHP and How to Use OpenWeatherMap API Using PHP. Some websites required a weather app to display the current weather conditions to their users.

We are going to create a weather web application by using a weather API provided by OpenWeatherMap using PHP. By using open weather API, you can get minutely weather forecast, historical data, current state, and from short-term to annual and forecasted weather data.

What is an API Key?

API stands for Application Programming Interface which is a unique identifier key used to authenticate a user, developer, or calling program to an API. However, they are typically used to authenticate a project with the API rather than a human user. Different platforms may implement and use API keys in different ways.

Wikipedia

Important Search Terms

  • How do I create a weather app?
  • How do I create a weather forecast for my website?
  • How do I use Weather API on my website?
  • How do I find my weather API key?
  • How do I get weather on my Android?
  • How do I get free weather API?

Steps to Create Weather App in PHP

  1. Create the basic application front Page using HTML and CSS: I have created a basic UI that look like cards and each card displays current location weather information.
  2. Get a Weather API key using Open Weather Map Website: You first need to Sign Up before you can generate an API key for your Weather API. After signing up navigate to the API section of the website and select the automatically generated weather API key. Save this API key as you will need this to call from your app. Open Weather Website: https://openweathermap.org/
  3. Call the weather API using PHP: I have used Retrofit for a type-safe HTTP client call. For calling the weather API we need the base URL of the and the user’s coordinates are parameters.

How to use Weather API?

First of all, you need to get an API Key. Once you sign up using your email, the API key (APPID) will be sent to you in a confirmation email. Your API keys can always be found on your account page, where you can also generate additional API keys if needed.

Source Code to Create Weather App in PHP

Following are the Source codes to create a Weather Application in PHP.

HTML Source Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

  <title>Weather App</title>
</head>
<body>
    <div class="container">
      
          <h1>What's The Weather?</h1>
          
          
          
          <form>
  <fieldset class="form-group">
    <label for="city">Enter the name of a city.</label>
    <input type="text" class="form-control" name="city" id="city" placeholder="Eg. London, Tokyo" value = "<?php echo $_GET['city']; ?>">
  </fieldset>
  
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
      
          <div id="weather"><?php 
              
              if ($weather) {
                  
                  echo '<div class="alert alert-success" role="alert">
  '.$weather.'
</div>';
                  
              } else if ($error) {
                  
                  echo '<div class="alert alert-danger" role="alert">
  '.$error.'
</div>';
                  
              }
              
              ?></div>
      </div>

    <!-- jQuery first, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>

CSS Source Code

html { 
          background: url(background.jpeg) no-repeat center center fixed; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          }
        
          body {
              
              background: none;
              
          }
          
          .container {
              
              text-align: center;
              margin-top: 100px;
              width: 450px;
              
          }
          
          input {
              
              margin: 20px 0;
              
          }
          
          #weather {
              
              margin-top:15px;
              
          }

PHP Source Code

<?php
    
    $weather = "";
    $error = "";
    
    if ($_GET['city']) {
        
     $urlContents = file_get_contents("http://api.openweathermap.org/data/2.5/weather?q=".urlencode($_GET['city']).",uk&appid=4b6cbadba309b7554491c5dc66401886");
        
        $weatherArray = json_decode($urlContents, true);
        
        if ($weatherArray['cod'] == 200) {
        
            $weather = "The weather in ".$_GET['city']." is currently '".$weatherArray['weather'][0]['description']."'. ";

            $tempInCelcius = intval($weatherArray['main']['temp'] - 273);

            $weather .= " The temperature is ".$tempInCelcius."&deg;C and the wind speed is ".$weatherArray['wind']['speed']."m/s.";
            
        } else {
            
            $error = "Could not find city - please try again.";
            
        }
        
    }


?>

Hit The Subscribe Button to Get Daily New video!

Spread the love, Share this Article!

Important Tags:

11 Responses

  1. I’m not certain the place you’re getting your information, but great topic. I must spend some time learning much more or understanding more. Thank you for great information I used to be in search of this info for my mission.

  2. I must thank you for the efforts youve put in penning this site. I am hoping to check out the same high-grade blog posts by you in the future as well. In fact, your creative writing abilities has motivated me to get my very own blog now 😉

  3. whoah this weblog is fantastic i like studying your posts. Stay up the great paintings! You recognize, lots of individuals are hunting around for this information, you could help them greatly.

  4. Woah! I’m really enjoying the template/theme of this website.
    It’s simple, yet effective. A lot of times it’s hard to get that “perfect balance” between usability and visual appearance.
    I must say that you’ve done a awesome job with this.
    Also, the blog loads very fast for me on Internet explorer.
    Excellent Blog!

  5. This design is steller! You obviously know how to keep a reader entertained.

    Between your wit and your videos, I was almost moved to start
    my own blog (well, almost…HaHa!) Wonderful
    job. I really loved what you had to say, and more than that, how you presented it.
    Too cool!

  6. I think the admin of this web page is actually working hard
    in support of his website, for the reason that here every stuff is quality
    based information.

  7. Thanks for a marvelous posting! I seriously enjoyed reading it, you can be a great author.
    I will remember to bookmark your blog and will come back sometime soon. I want
    to encourage you to definitely continue your great job, have
    a nice weekend!

  8. Its such as you read my thoughts! You seem to know so much approximately this, like you wrote the book in it or something. I feel that you just could do with a few to force the message home a bit, but instead of that, this is fantastic blog. A great read. I’ll definitely be back.

Leave a Reply

Your email address will not be published.