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>