Jump to content

PHP (API request based on user's input)

Venkok

By Venkok
in PHP Coding Help

 Share

Recommended Posts

Venkok Newbie

Venkok

Posted
Posted

Hello! :)

I have a really important question (it's my test task and I should finish it in 24 hours).  I should make an API call to Openweather Map based on what the user submits to the search field. The problem is that I don't know how to put data from input after form submissions to API's URL. I found out how to do it with JS (fetch API), but it's completely another approach (without CURL) and I don't have much time to rebuild the app. So my question is how to put the city that which user submits into the URL with PHP?

Hello! I have a really important question (it's my test task and I should finish it in 24 hours).  I should make an API call to Openweather Map based on what the user submits to the search field. The problem is that I don't know how to put data from input after form submissions to API's URL. I found out how to do it with JS (fetch API), but it's completely another approach (without CURL) and I don't have much time to rebuild the app. So my question is how to put the city that which user submits into the URL with PHP?

 

The whole task:

In this test, you will create a simple Weather Forecast web app.

Get weather forecast by city name (using an API).

Show forecasts dynamically: type in a city name (E.g “Kyiv”), and show the Forecasts period, date/time, min temperature, max temperature, wind speed.

Create Forecast Save button. The save button will save only THE FIRST forecast item, meaning the most real-time item in the API’s response. (Note: if the forecast for a city already exists in the DB, update the forecast entry, do not keep a city duplication!)

Create a “load from DB” button. The load button will load a forecast from the DB by the city’s name, the same one you saved in the last task.

On load show the city’s name, and replace the “period” in the title with “updated at” with the last update’s time. (see “examples” folder for clarification)

 

  

<body id="page-top">

  <?php

// include('ajax/handle-form.php');

$apiKey = ""
 $cityname = 'Kyiv';
$googleApiUrl = "https://api.openweathermap.org/data/2.5/forecast?q=".$cityname."&lang=en&units=metric&APPID=" . $apiKey;


$ch = curl_init();

curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $googleApiUrl);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_VERBOSE, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
$response = curl_exec($ch);

curl_close($ch);

$dataList = json_decode($response, true); // array
$dataOther = json_decode($response); // object
$city = $dataOther->city->name;

// create array of dates for displayig PERIOD.
$dates = [];

foreach ($dataList['list'] as $val) {
  $main = $val['main'];
  $period = $val['dt_txt'];
  array_push($dates, $period);
 }

$from = min($dates);
$to = max($dates);

?>

    <!-- Page Wrapper -->
    <div id="wrapper">
      <!-- Content Wrapper -->
      <div id="content-wrapper" class="d-flex flex-column">
        <!-- Main Content -->
        <div id="content">
          <!-- Topbar -->
          <nav
            class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow"
          >
            <!-- Sidebar Toggle (Topbar) -->

            <!-- Topbar Search -->
            <form id="form1"
              class="d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search"
            >
              <div class="input-group">
                <input
                  type="text"
                  id="callapi"
                  name="callapi"                  
                  class="form-control bg-light border-0 small"
                  placeholder="Enter city name here (E.g Kyiv)"
    
                />
                <!-- <input
                  type="text"
                  id="input"
                  name="input"
    
                /> -->

                <div class="input-group-append ml-3">
                  <button id="sendForm" type="submit" class="btn btn-primary" type="button">
                    Get from API <i class="fas fa-search fa-sm"></i>
                  </button>
                </div>
                <div class="input-group-append">
                  <button  class="btn btn-primary ml-3 btn-get-db" >
                    Get from DB <i class="fas fa-download fa-sm"></i>
                  </button>
                </div>
              </div>
            </form>
          </nav>
          <!-- End of Topbar -->

          <!-- Begin Page Content -->
          <div class="container-fluid">
            <!-- Page Heading -->
            <div
              class="d-sm-flex align-items-center justify-content-between mb-4"
            >
              <h1  class="h3 mb-0 text-gray-800"><?php echo $city; ?> Weather Forecast</h1>

            </div>

            <!-- Content Row -->
            <div class="row">
              <!-- Earnings (Monthly) Card Example -->
              <div class="col-xl-6 col-md-12 mb-4">
                <div class="card border-left-success shadow h-100 py-2">
                  <div class="card-body">
                    <div class="row no-gutters align-items-center">
                      <div class="col mr-2">
                        <div class="h5 mb-0 font-weight-bold text-gray-800">
                          Period
                        </div>
                        <div class="text-xs my-1">Starts at: <?php echo $from; ?></div>
                        <div class="text-xs my-1">Ends at: <?php echo $to; ?></div>
                        <di id="successMess" class="text-xs my-1"></di>
                    
                      </div>
                      <div>
                        <button
                          class="btn btn-primary btn-success"
                          type="button"
                        >
                          Save <i class="fas fa-save fa-sm"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="card shadow mb-4">
              <div class="card-body">
                <div class="table-responsive">
                  <table
                    class="table table-bordered"
                    id="dataTable"
                    width="100%"
                    cellspacing="0" 
                  >
                    <thead>
                      <tr>
                        <th>Datetime</th>
                        <th>Min Temp</th>
                        <th>Max Temp</th>
                        <th>Wind Speed</th>
                      </tr>
                    </thead>
                 
                    <tbody>
<?php foreach ($dataList['list'] as $val) {
$main = $val['main'];
$date = $val['dt_txt'];
$temp = $main['temp'];
$temp_min = $main['temp_min'];
$temp_max = $main['temp_max'];
$pressure = $main['pressure'];  
$humidity = $main['humidity'];
$wind_speed = $val['wind']['speed'];
$wind_direction = $val['wind']['deg'];
$clouds = $val['clouds']['all'];
$weather = $val['weather'][0];
$main = $weather['main'];
$icon = $weather['icon'];

?>
              <tr>   
              <td><?php echo $date; ?></td>
                        <td><?php echo $temp_min; ?>°C</td>
                        <td><?php echo $temp_max; ?> °C</td>
                        <td><?php echo $wind_speed; ?> km/h</td>
                      </tr>      

                      <?php } ?>
       
                      </tbody>
             
                  </table>
                </div>
              </div>
            </div>
            <!-- Content Row -->
          </div>
          <!-- /.container-fluid -->
        </div>
        <!-- End of Main Content -->

        <!-- Footer -->
        <footer class="sticky-footer bg-white">
          <div class="container my-auto">
            <div class="copyright text-center my-auto">
              <span>Weather Forecast 2022</span>
            </div>
          </div>
        </footer>
        <!-- End of Footer -->
      </div>
      <!-- End of Content Wrapper -->
    </div>
    <!-- End of Page Wrapper -->

    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
      <i class="fas fa-angle-up"></i>
    </a>

  </body>

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.