Nézzük meg a frontend-et! Készítünk egy ‘űrlapot’, amin meg lehet adni a kör sugarát. Ennek értékét elküldjük a kor.php-nek, ami kiszámolja a kör területét és kerületét, majd ebből készít egy json-t. Ezt fogja visszakapni a javascriptünk, ami a fetch api segítségével kinyeri a kerület és terület adatokat.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kör-API gyakorlás</title> </head> <body> <h1>Kör API gyakorlás</h1> <label for="r">Kör sugara (r):</label> <input type="number" id="r" placeholder="Adja meg a kör sugarát!"> <button onclick="fgvSzamol()">Számol</button> <div id="eredmeny"></div> <script> function fgvSzamol() { const r = document.getElementById('r').value; if (!r) { alert('Kérem, adja meg a kör sugarát!'); return; } fetch(`kor.php?r=${r}`) .then(response => response.json()) .then(data => { if (data.error) { alert(data.error); } else { const eredmenyDiv = document.getElementById('eredmeny'); eredmenyDiv.innerHTML = `Kerület: ${data.kerulet}, Terület: ${data.terulet}`; } }) .catch(error => console.error('Hiba történt:', error)); } </script> </body> </html> |
A feldolgozó php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?php header("Content-Type: application/json"); if (isset($_GET['r'])) { $r = floatval($_GET['r']); if ($r > 0) { $kerulet = 2* $r * M_PI ; $terulet = pow($r, 2) * M_PI; $response = array( 'kerulet' => $kerulet, 'terulet' => $terulet ); echo json_encode($response); } else { echo json_encode(array('error' => 'Az "r" értéknek pozitívnak kell lennie.')); } } else { echo json_encode(array('error' => 'Az "r" paraméter hiányzik.')); } ?> |