Реалізація Динамічної Зміни Міста за Допомогою Асинхронних Запитів у PHP

5 Березня 2024 в 21:40 28

Потрібно дослідити способи динамічної зміни міста за допомогою асинхронних запитів у PHP. Основна мета полягає в тому, щоб змінювати значення міста за допомогою POST запиту та зберігати його як значення за замовчуванням, використовуючи дані, отримані з API за допомогою JavaScript. Дані про місто отримуються асинхронно за допомогою JavaScript і передаються до PHP-файлу для обробки. Важливо зберігати цей процес асинхронним для збереження безпеки API-ключів.

Для досягнення цієї функціональності, потрібно спочатку отримати дані про місто за допомогою асинхронного запиту з JavaScript. Після цього дані передаються до PHP-файлу для обробки. У PHP-файлі ми визначаємо, якщо метод запиту POST, то значення міста змінюється на те, що було передано з форми, в іншому випадку використовується значення за замовчуванням, отримане з JavaScript. Потім ми виконуємо запит до зовнішнього API, використовуючи це значення міста, і повертаємо отримані дані.

Важливою складовою цього процесу є застосування асинхронних запитів, які дозволяють нам здійснювати взаємодію з сервером без перезавантаження сторінки. Це дозволяє зберігати безпеку API-ключів, оскільки вони не відображаються у вихідному коді JavaScript, що відправляється на клієнт.

const searchBox = document.querySelector(".search input");
const searchBtn = document.querySelector(".search button");
const weatherIcon = document.querySelector(".weather-icon");
let weatherData;
fetch('http://localhost/js/weather/apis/geoApi.php?')
    .then(response => response.json())
    .then(data => {
        weatherData = data;
        let sky = weatherData.weather[0].main.toLowerCase();
        weatherIcon.src = "images/" + sky + ".png";
        console.log(weatherData);
        document.querySelector(".city").innerHTML = weatherData.name;
        document.querySelector(".temp").innerHTML = Math.round(weatherData.main.temp) + "°c";
        document.querySelector(".humidity").innerHTML = weatherData.main.humidity + "%";
        document.querySelector(".wind").innerHTML = weatherData.wind.speed + " km/h";
    })
    .catch((error) => {
        console.error('Error:', error);
    });
geoApi.php
require '..\vendor\autoload.php';
$dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
$dotenv->load();
$ip = file_get_contents('https://api.ipify.org');
define('GEO_API_KEY', $_ENV['GEO_API_KEY']);
define('WEATHER_API_KEY', $_ENV['WEATHER_API_KEY']);
use Ipdata\ApiClient\Ipdata;
use Symfony\Component\HttpClient\Psr18Client;
use Nyholm\Psr7\Factory\Psr17Factory;
$httpClient = new Psr18Client();
$psr17Factory = new Psr17Factory();
$ipdata = new Ipdata(GEO_API_KEY, $httpClient, $psr17Factory);
$data = $ipdata->lookup($ip);
if($_SERVER['REQUEST_METHOD'] == "POST"){
    $city = $_POST['city'];
}
else{
    $city = $data['city'];
}
$weatherApiUrl = "http://api.openweathermap.org/data/2.5/weather?units=metric&q=" . $city . "&appid=" . WEATHER_API_KEY;
$weatherData = file_get_contents($weatherApiUrl);
echo $weatherData;

const searchBox = document.querySelector(".search input");

const searchBtn = document.querySelector(".search button");

const weatherIcon = document.querySelector(".weather-icon");

let weatherData;

fetch('http://localhost/js/weather/apis/geoApi.php?')

.then(response => response.json())

.then(data => {

weatherData = data;

let sky = weatherData.weather[0].main.toLowerCase();

weatherIcon.src = "images/" + sky + ".png";

console.log(weatherData);

document.querySelector(".city").innerHTML = weatherData.name;

document.querySelector(".temp").innerHTML = Math.round(weatherData.main.temp) + "°c";

document.querySelector(".humidity").innerHTML = weatherData.main.humidity + "%";

document.querySelector(".wind").innerHTML = weatherData.wind.speed + " km/h";

})

.catch((error) => {

console.error('Error:', error);

});

geoApi.php

require '..\vendor\autoload.php';

$dotenv = Dotenv\Dotenv::createImmutable(__DIR__);

$dotenv->load();

$ip = file_get_contents('https://api.ipify.org');

define('GEO_API_KEY', $_ENV['GEO_API_KEY']);

define('WEATHER_API_KEY', $_ENV['WEATHER_API_KEY']);

use Ipdata\ApiClient\Ipdata;

use Symfony\Component\HttpClient\Psr18Client;

use Nyholm\Psr7\Factory\Psr17Factory;

$httpClient = new Psr18Client();

$psr17Factory = new Psr17Factory();

$ipdata = new Ipdata(GEO_API_KEY, $httpClient, $psr17Factory);

$data = $ipdata->lookup($ip);

if($_SERVER['REQUEST_METHOD'] == "POST"){

$city = $_POST['city'];

}

else{

$city = $data['city'];

}

$weatherApiUrl = "http://api.openweathermap.org/data/2.5/weather?units=metric&q=" . $city . "&appid=" . WEATHER_API_KEY;

$weatherData = file_get_contents($weatherApiUrl);

echo $weatherData;

У цьому рішенні ми забезпечуємо динамічну зміну міста за допомогою асинхронних запитів з JavaScript. При натисканні на кнопку форми значення міста змінюється і використовується для запиту до зовнішнього API, в якому ми отримуємо дані про погоду для вказаного міста. Цей процес відбувається асинхронно, що дозволяє зберігати безпеку API-ключів та забезпечує швидку відповідь на запити користувачів.