Webprogramozás

Bemenet, űrlapfeldolgozás

Horváth Győző
egyetemi docens
horvath.gyozo@inf.elte.hu

1117 Budapest, Pázmány Péter sétány 1/c., 4.725

Ismétlés

Ismétlés

Dinamikus szerveroldali webprogramozás: program állítja elő a tartalmat (HTML)

  • PHP nyelv
    • Adatszerkezetek
    • Programozási tételek
  • Program szerkezete
    • beolvasás
    • feldolgozás
    • kiírás
  • Kimenet (HTML)
    • dinamikus sablon
    • alternatív szintaxis

Ismétlés

<?php 
// Input (?)
$tracks = [
  ["id" => 1, "name" => "guitar", "muted" => false],
  ["id" => 2, "name" => "bass",   "muted" => true ],
  ["id" => 3, "name" => "vocal",  "muted" => false],
];

// Processing
$enabledTracks = array_filter($tracks, function ($track) {
  return !$track["muted"];
});
?>
<!-- Output -->
<div id="tracks">
  <?php foreach($enabledTracks as $t) : ?>
    <div class="track">
      <?= $t["name"] ?>
    </div>
  <?php endforeach ?>
</div>

Szerveroldali program bemeneti adatai

Szerveroldali program bemeneti adatai

A program bemenetének lehetséges forrásai:

  • Kliens
  • Környezet
  • Fájl
  • Munkamenet
  • Adatbázis
  • Másik szerver

Szerveroldali program bemeneti adatai

Kliensről érkező adatok

Common Gateway Interface

CGI

Common Gateway Interface (CGI)

Azt határozza meg, hogy egy webszerver hogyan indíthat el egy programot és milyen módon cserél adatot vele.

  • Indítás: program futtatása
  • Adatok
    • környezeti változók
    • standard I/O

Kérés körülményei és HTTP fejlécek

  • Kérés körülményei → környezeti változók
    • HTTP kérés metódusa → REQUEST_METHOD
    • kliens IP címe → REMOTE_ADDRESS
    • üzenettest hossza bájtban → CONTENT_LENGTH
  • HTTP fejlécek → környezeti változók
    • HTTP_*
    • Pl. Accept fejléc → HTTP_ACCEPT környezeti változó
[REMOTE_ADDR] => 188.142.184.197
[REMOTE_PORT] => 49323
[REQUEST_METHOD] => GET
[HTTP_ACCEPT] => text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
[HTTP_ACCEPT_LANGUAGE] => hu-hu,hu;q=0.8,en-US;q=0.5,en;q=0.3

URL

  • Kérés URL-je (szabad paraméter: <query>)

    <scheme>://<host>:<port>/<path>?<query>#<fragment>

  • URL → környezeti változók (fontos: QUERY_STRING)

    • <scheme> → SERVER_PROTOCOL
    • <host> → SERVER_NAME
    • <port> → SERVER_PORT
    • <path> → SCRIPT_NAME (PATH_INFO)
    • <query> → QUERY_STRING

HTTP üzenettörzs

  • HTTP üzenettörzs szabad paraméter
  • Standard bemeneten jelenik meg
  • Környezeti változó
    • CONTENT_LENGTH: adatmennyiség hossza

Környezeti változók – példa

[HTTP_HOST] => webprogramozas.inf.elte.hu
[HTTP_USER_AGENT] => Mozilla/5.0 (Windows NT 6.1; WOW64; rv:19.0) Gecko/20100101 Firefox/19.0
[HTTP_ACCEPT] => text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
[HTTP_ACCEPT_LANGUAGE] => hu-hu,hu;q=0.8,en-US;q=0.5,en;q=0.3
[HTTP_ACCEPT_ENCODING] => gzip, deflate
[HTTP_REFERER] => http://webprogramozas.inf.elte.hu/~gyozke/wf2/temp/
[HTTP_COOKIE] => WACID=1263304129000A11327866; __utma=32143338.519822639.1361532995.1362426295.1363347264.4; __utmz=32143338.1362426295.3.3.utmcsr=google|utmccn=(organic)|utmcmd=organic|utmctr=(not%20provided)
[HTTP_CONNECTION] => keep-alive
[PATH] => /usr/sbin:/bin:/usr/bin:/sbin
[SERVER_SIGNATURE] => <address>Apache/2.2.10 (Linux/SUSE) Server at webprogramozas.inf.elte.hu Port 80</address>
[SERVER_SOFTWARE] => Apache/2.2.10 (Linux/SUSE)
[SERVER_NAME] => webprogramozas.inf.elte.hu
[SERVER_ADDR] => 157.181.161.8
[SERVER_PORT] => 80
[REMOTE_ADDR] => 188.142.184.197
[DOCUMENT_ROOT] => /srv/www/webprog
[SERVER_ADMIN] => root@webprogramozas.inf.elte.hu
[SCRIPT_FILENAME] => /home/gyozke/public_html/wf2/temp/getpost.php
[REMOTE_PORT] => 49323
[GATEWAY_INTERFACE] => CGI/1.1
[SERVER_PROTOCOL] => HTTP/1.1
[REQUEST_METHOD] => GET
[QUERY_STRING] => 
[REQUEST_URI] => /~gyozke/wf2/temp/getpost.php
[SCRIPT_NAME] => /~gyozke/wf2/temp/getpost.php
[PHP_SELF] => /~gyozke/wf2/temp/getpost.php
[REQUEST_TIME] => 1365626159

Adatok az URL-ben

Kérésindítási lehetőségek

  • Cím (URL) beírása (GET)
  • Linkre kattintás (GET)
  • Űrlap elküldése (GET, POST)
  • JavaScript (GET, POST, …)
    • oldal újratöltés - window.location (GET)
    • űrlap elküldés - submit() metódus (GET, POST)
    • AJAX/fetch kérés (bármilyen HTTP metódus)

Cím (URL) beírása / Linkre kattintás

<protocol>://<host>:<port>/<path>?✒><query><✒#<fragment>

Példa

<a href="http://server.hu/index.php?✒>adat=ELTE<✒">Valami</a>

Adat az URL-ben

  • A ?-et követő név-érték párok sorozata
  • & jellel elválasztva
    • foo=1&bar=2
  • Szükség esetén “URL encoding”
    • encodeURIComponent("Tom & Jerry");
    • title=Tom+%26+Jerry"
  • A HTTP kérés nyitó sorában továbbítjuk
GET /index.php✒>?title=Tom+%26+Jerry<✒ HTTP/1.1
Host: webprogramozas.inf.elte.hu

Feldolgozás PHP-ban

  • Környezeti változókon ($_SERVER) keresztül (CGI)
    • $_SERVER["QUERY_STRING"]
  • A $_GET szuperglobális változón keresztül
    • a PHP előre felparseolja
    • asszociatív tömbként hozzáférhető
    • pl: $_GET["title"]

Feldolgozás példa

<?php
// index.php?title=Tom+%26+Jerry
// index.php?title=
// index.php
$title = $_GET["title"] ?? "I don't know";

?>
<h1>Title: <?= $title ?></h1>

Kérésindítási lehetőségek

  • Cím (URL) beírása (GET)
  • Linkre kattintás (GET)
  • Űrlap elküldése (GET, POST)
  • JavaScript (GET, POST, …)
    • oldal újratöltés - window.location (GET)
    • űrlap elküldés - submit() metódus (GET, POST)
    • AJAX/fetch kérés (bármilyen HTTP metódus)

Űrlap elküldése

Űrlap elküldése: a <form> elem

  • Attribútumok
    • action: szerveroldali erőforrás megjelölése
    • method: HTTP metódus (GET vagy POST)
    • enctype: a form-adatok kódolása a küldés során
  • enctype
    • application/x-www-form-urlencoded (alapértelmezett)
    • multipart/form-data (fájlfeltöltés, csak POST esetén)
    • text/plain (levélküldés)
<form method="get" action="index.php">
  <label for="title">
  <input type="text" id="title" name="title">
  <button type="submit">Send</button>
</form>

Űrlap elküldése

  • Elküldés
    • a type submit gomb megnyomása
    • JavaScript: form.submit() meghívása
  • Lépések
    1. Elküldhető elemek kiválasztása
    2. Kérési adatok összeállítása
    3. Kérési adatok kódolása
    4. A kódolt kérési adatok elküldése

Űrlap elküldése

  1. Elküldhető elemek kiválasztása
    • van name attribútum
    • nem disabled
    • bejelölt checkbox
    • bejelölt radio
    • kiválasztott select

Űrlap elküldése

  1. Kérési adatok összeállítása
    • Elküldhető formelemekből név=érték párokat készít
    • ezeket & jellel fűzi össze
    • name=Győző&pwd=secret&check1=value1&check2=on
  2. Kérési adatok kódolása
    • ld. enctype attribútum
    • name=Gy%C5%91z%C5%91&pwd=secret&check1=value1&check2=on
    • → Kérésszöveg (Query String)

Űrlap elküldése

  1. A kódolt kérési adatok elküldése
    • GET
      • URL: action-url + ? + query-string (ld. korábban)
      • URL mérete limitált a gyakorlatban (2 kB)
    • POST
      • a HTTP kérés üzenettörzsében utazik a kérésszöveg
      • sok adat küldhető

GET/POST HTTP kérések

GET kérés

METÓDUS /<path>?✒><query><✒ VERZIÓ
Host: <host>
FEJLÉC: ÉRTÉK
...

POST kérés

METÓDUS /<path>?✒><query><✒ VERZIÓ
Host: <host>
FEJLÉC: ÉRTÉK
FEJLÉC: ÉRTÉK
FEJLÉC: ÉRTÉK

✒>ÜZENETTEST<✒

Űrlap elküldése – példa

Űrlap:

<form action="http://host/page.php" method="post">
  <input type="text" name="foo" value="bar">
  <input type="password" value="secret">
  <input type="hidden" name="password" value="secret">
  <input type="checkbox" name="check1" value="baz" checked>
  <input type="checkbox" name="check2" checked>
  <button type="submit">Submit</button>
</form>

Kérésszöveg (Query string)

foo=bar&password=secret&check1=baz&check2=on

Űrlapelemek

  • Szöveges elemek
    • <input> type: text, password, hidden
    • <textarea>
    • mindig elküldésre kerülnek
    • akár üres szöveggel is
    • textarea-nál vigyázni kell: minden elküldésre kerül, ami a <textarea></textarea> elem között van

Űrlapelemek

  • checkbox, radio
    • csak bejelölve kerül elküldésre
    • ha nincs value → on érték
  • select
    • csak kiválasztva kerül elküldésre
    • ha nincs value → option szövege az érték
    • size>1 esetén ha nincs kiválasztva → nem küldi el
    • multiple esetén → ugyanazon névvel több név=érték pár (pl. sel[]=foo&sel[]=bar)

Űrlapelemek

  • button/submit
    • ha van neve → elküldésre kerül az értékével (felirat)
  • file
    • enctype="multipart/form-data"
    • method="POST"

Űrlapadatok PHP-ban

  • method="get" esetén ugyanúgy, mint a
    link/URL esetén a $_GET tömbön keresztül
  • method="post" esetén a $_POST szuperglobális
    változón (tömb) keresztül

Összefoglalás - kliens bemenet

Szuperglobális tömbök

  • $_GET: QUERY_STRINGben érkező név=érték pároknak megfelelő tömb, ahol a név a kulcs.
  • $_POST: a standard inputon érkező név=érték pároknak megfelelő tömb, ahol a név a kulcs.
  • $_SERVER: az összes környezeti változót tartalmazza
  • $_FILES: a feltöltött fájlok helyét tartalmazza
  • $_COOKIES: a kliensről érkező sütik jelennek meg benne

Űrlapfeldolgozás

Feldolgozás általános séma

Példa

  • Kör kerületének kiszámítása
  • Bemenet: sugár
    • Kötelező
  • Kimenet: kerület
    • Valid oldalon jelenjen meg

sugar=10

→

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kerület</title>
  </head>
  <body>
    <p>Sugár = 10</p>
    <p>Kerület = 62.83</p>
  </body>
</html>

1. megoldás

Az URL-ben adjuk át paraméterként

kerulet.php?sugar=10
<?php
// debug
print_r($_GET);
print_r($_POST);

// input
$sugar = $_GET['sugar'];

// processing
$pi = pi();
$ker = 2 * $sugar * $pi;

// output
?>
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kerület</title>
  </head>
  <body>
    <p>Sugár = <?= $sugar ?></p>
    <p>Kerület = <?= $ker ?></p>
  </body>
</html>

2. megoldás

  • Lényegi logika kiemelése
  • Függvénybe zárása
  • Elkülönítjük az adatok beolvasásától és kiírásától
<?php
declare(strict_types=1);
// debug
print_r($_GET);
print_r($_POST);

// business logic
function kerulet(float $sugar): float {
  return 2 * $sugar * pi();
}

// input
$sugar = (float)$_GET['sugar'];

// processing
$ker = kerulet($sugar);

// output
?>
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kerulet</title>
  </head>
  <body>
    <p>Sugár = <?= $sugar; ?></p>
    <p>Kerület = <?= $ker; ?></p>
  </body>
</html>

Input hiánya és formátuma

  • kerulet.php → PHP hibák
  • Kezelni kell az input hiányát
    • Alapértelmezett érték
    • Hibaüzenet
  • Ha van input, akkor formátumellenőrzés

3. megoldás

Alapértelmezett érték

// Segédfüggvény
function is_empty($input, $key) {
  return !(isset($input[$key]) && trim($input[$key]) !== '');
}

$hiba = '';
$sugar = null;
// Hiány esetén alapértelmezett érték
if (is_empty($_GET, 'sugar')) {
    $sugar = 0.0;
} 
// Formátumellenőrzés
else if (!is_numeric($_GET['sugar'])) {
  $hiba = 'A sugár nem szám!';
}
else {
  $sugar = (float)$_GET['sugar'];
}

if ($hiba === '') {
  // processing
  $ker = kerulet($sugar);
}

4. megoldás

Hibaüzenet

// Segédfüggvény
function is_empty($input, $key) {
  return !(isset($input[$key]) && trim($input[$key]) !== '');
}

$hiba = '';
$sugar = null;
// Hiány esetén hibaüzenet
if (is_empty($_GET, 'sugar')) {
  $hiba = 'A sugár megadása kötelező';
} 
// Formátumellenőrzés
else if (!is_numeric($_GET['sugar'])) {
    $hiba = 'A sugár nem szám!';
}
else {
    $sugar = (float)$_GET['sugar'];
}

if ($hiba === '') {
  // processing
  $ker = kerulet($sugar);
}

4. megoldás

Kimenet: hibaüzenet kiírása

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kerulet</title>
  </head>
  <body>
    <?php if ($hiba) : ?>
      <p><?= $hiba ?></p>
    <?php else : ?>
      <p>Sugár = <?= $sugar ?></p>
      <p>Kerület = <?= $ker ?></p>
    <?php endif ?>
  </body>
</html>

Általánosítás

  • Folyamat
    • Adatok ellenőrzése
    • Beolvasás
    • Feldolgozás
    • Kiírás
  • Több input esetén
    • bemeneti tömb ($_GET vagy $_POST)
    • típusos adatok tömbje ($data)
    • hibalista tömbje ($errors)
    • hibalista (HTML <ul>)

PHP validáció: filter_*()

filter_var() és filter_var_array()

Dokumentáció

// is_numeric helyett
if (!filter_var($input['sugar'], FILTER_VALIDATE_FLOAT)) {
  $hiba = 'A sugár nem szám!';
}

// Összetettebb: szűrés és validálás
$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  $hiba = "Nem jó e-mail formátum!"; 
}

// Opciók
filter_var($string, FILTER_VALIDATE_REGEXP, [
  "options"=>[
    "regexp"=>"/^M(.*)/",
  ],
]);

PHP filterek

  • FILTER_DEFAULT (szöveg)
  • FILTER_VALIDATE_BOOLEAN
  • FILTER_VALIDATE_EMAIL
  • FILTER_VALIDATE_FLOAT
  • FILTER_VALIDATE_INT
  • FILTER_VALIDATE_IP
  • FILTER_VALIDATE_MAC
  • FILTER_VALIDATE_REGEXP
  • FILTER_VALIDATE_URL

Általános feldolgozási logika

$errors = [];
$input = $_GET;

// Ellenőrzés
if (validate($input, $data, $errors)) {

    // Beolvasás
    $sugar = $data['sugar'];

    // Feldolgozás
    $ker = kerulet($sugar);
} else {
    // Hiba: $errors tömb
}

Ellenőrző függvény

function validate($input, &$data, &$errors) {
  // sugár vizsgálata
  $data['sugar'] = null;
  if (is_empty($input, 'sugar')) {
    $errors[] = 'A sugár megadása kötelező';
  } 
  else if (!is_numeric($input['sugar'])) {
    $errors[] = 'A sugár nem szám!';
  }
  else {
    $data['sugar'] = (float)$input['sugar'];
  } 
  
  return !(bool)$errors;
}

Hibák kiírása

<?php if ($errors) : ?>
  <ul>
    <?php foreach($errors as $error) : ?>
      <li><?= $error ?></li>
    <?php endforeach ?>
  </ul>
<?php endif ?>

5. megoldás

<?php
// debug
print_r($_GET);
print_r($_POST);

// business logic
function kerulet(float $sugar): float {
  return 2 * $sugar * pi();
}

// helper function
function is_empty($input, $key) {
  return !(isset($input[$key]) && trim($input[$key]) !== '');
}
function validate($input, &$data, &$errors) {
  // sugár vizsgálata
  $data['sugar'] = null;
  if (is_empty($input, 'sugar')) {
    $errors[] = 'A sugár megadása kötelező';
  } 
  else if (!is_numeric($input['sugar'])) {
    $errors[] = 'A sugár nem szám!';
  }
  else {
    $data['sugar'] = (float)$input['sugar'];
  } 
  
  return !(bool)$errors;
}

// start
$errors = [];
$input = $_GET;

// check
if (validate($input, $data, $errors)) {
  // input
  $sugar = $data['sugar'];

  // processing
  $ker = kerulet($sugar);
}

// output
?>
<?php if ($errors) : ?>
  <ul>
    <?php foreach($errors as $error) : ?>
      <li><?= $error ?></li>
    <?php endforeach ?>
  </ul>
<?php else : ?>
  <p>Sugár = <?= $sugar ?></p>
  <p>Kerület = <?= $ker ?></p>
<?php endif ?>

Űrlapok

  • Kézi szerkesztés → URL → PHP helyett:
  • Űrlap → URL → PHP
  • kerulet.php?sugar=10

6. megoldás

kerulet.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kerulet</title>
  </head>
  <body>
    <form action="kerulet.php" method="get">
      Radius: 
      <input type="text" name="sugar" value="10">
      <button>Calculate</button>
    </form>
  </body>
</html>

kerulet.php (ugyanaz)

<?php
declare(strict_types=1);

// debug
print_r($_GET);
print_r($_POST);

// business logic
function kerulet(float $sugar): float {
  return 2 * $sugar * pi();
}

// helper function
function is_empty($input, $key) {
  return !(isset($input[$key]) && trim($input[$key]) !== '');
}
function validate($input, &$data, &$errors) {
  // sugár vizsgálata
  $data['sugar'] = null;
  if (is_empty($input, 'sugar')) {
    $errors[] = 'A sugár megadása kötelező';
  } 
  else if (!is_numeric($input['sugar'])) {
    $errors[] = 'A sugár nem szám!';
  }
  else {
    $data['sugar'] = (float)$input['sugar'];
  } 
  
  return !(bool)$errors;
}

// start
$errors = [];
$input = $_GET;

// check
if (validate($input, $data, $errors)) {
  // input
  $sugar = $data['sugar'];

  // processing
  $ker = kerulet($sugar);
}

// output
?>
<?php if ($errors) : ?>
  <ul>
    <?php foreach($errors as $error) : ?>
      <li><?= $error ?></li>
    <?php endforeach ?>
  </ul>
<?php else : ?>
  <p>Sugár = <?= $sugar ?></p>
  <p>Kerület = <?= $ker ?></p>
<?php endif ?>

Ergonómiai megfontolások

  • Hiba esetén:
    • Az alkalmazás funkcionálisan teljesíti az elvárásokat
    • Látszanak a hibaüzenetek
    • Felhasználó látja, mit írt be, tud javítani
    • Ott látja a hibát, ahol az előfordult
  • Siker esetén:
    • Az alkalmazás funkcionálisan teljesíti az elvárásokat
    • Látszanak az eredmény/sikeresség
    • Látszik, hogy mi volt a bemenet

7. megoldás

Az űrlap önmagának küldi az adatot!

<?php
$errors = [];
$input = $_GET;

if (count($_GET) !== 0) {
  // validate
  if (validate($input, $data, $errors)) {

    // input
    $sugar = $data['sugar'];

    // processing
    $ker = kerulet($sugar);
  }    
}

// output
?>
<body>
  <?php if ($errors) : ?>
    <ul>
      <?php foreach($errors as $error) : ?>
        <li><?= $error ?></li>
      <?php endforeach ?>
    </ul>
  <?php endif ?>

  <form action="" method="GET">
    Radius: 
    <input type="text" name="sugar" value="10">
    <button>Calculate</button>
  </form>

  <?php if (isset($ker)) : ?>
    <p>Sugár = <?= $sugar ?></p>
    <p>Kerület = <?= $ker ?></p>
  <?php endif ?>
</body>

Űrlap állapottartása

Írjuk vissza a kitöltött adatokat, legalább hiba esetén!

<form action="circle.php" method="get">
  Sugár: 
  <input type="text" name="sugar" ✒>value="<?= $input['sugar'] ?? '' ?><✒">
  <input type="submit">
</form>

Űrlap állapottartása

<input name="input1" type="text" value="<?= $input1 ?? '' ?>">
<textarea name="input2"><?= $input2 ?></textarea>

<input name="input3" type="checkbox" value="value3"
  <?= $input3 === "value3" ? " checked" : "" ?>
>
<input name="input4" type="radio" value="value4"
  <?= $input4 === "value4" ? " checked" : "" ?>
>

<select name="input5">
  <option value="value51"
    <?= $input5 === "value51" ? " selected" : "" ?>
  >Value 3</option>
  <option value="value52"
    <?= $input5 === "value52" ? " selected" : "" ?>
  >Value 4</option>
</select>

Ergonómiai megfontolások

  • Hiba esetén:
    • Az alkalmazás funkcionálisan teljesíti az elvárásokat
    • Látszanak a hibaüzenetek
    • Felhasználó látja, mit írt be, tud javítani
    • Ott látja a hibát, ahol az előfordult
  • Siker esetén:
    • Az alkalmazás funkcionálisan teljesíti az elvárásokat
    • Látszanak az eredmény/sikeresség
    • Látszik, hogy mi volt a bemenet

Hibaüzenetek az űrlapmező mellett

$messages = [];

if (/* ERROR */) {
  $messages[✒>'field1'<✒] = [
    "type" => "error",
    "message" => "ERROR MESSAGE"
  ];
}
<input name="field1">
<?php if (isset($messages['field1'])) : ?>
  <span><?= $messages['field1']['message'] ?></span>
<?php endif ?>

Ergonómiai megfontolások

  • Hiba esetén:
    • Az alkalmazás funkcionálisan teljesíti az elvárásokat
    • Látszanak a hibaüzenetek
    • Felhasználó látja, mit írt be, tud javítani
    • Ott látja a hibát, ahol az előfordult
  • Siker esetén:
    • Az alkalmazás funkcionálisan teljesíti az elvárásokat
    • Látszanak az eredmény/sikeresség
    • Látszik, hogy mi volt a bemenet

Kérésindítási lehetőségek

  • Cím (URL) beírása (GET)
  • Linkre kattintás (GET)
  • Űrlap elküldése (GET, POST)
  • JavaScript (GET, POST, …)
    • oldal újratöltés - window.location (GET)
    • űrlap elküldés - submit() metódus (GET, POST)
    • AJAX/fetch kérés (bármilyen HTTP metódus)

Kérésindítás JavaScripttel

Lehetőségek JavaScripttel

Oldal újratöltése programozottan (GET)

window.location = "http://example.com?✒>name=value<✒";

Űrlap elküldése programozottan (GET, POST)

const form = document.querySelector("form");
✒>form.submit()<✒;

AJAX/fetch kérés küldése szervernek

async function () {
  const formData = new FormData();
  formData.append("name", "value");

  const response = fetch("http://example.com?✒>name=value<✒", {
    ✒>method: "POST"<✒,
    ✒>body: formData<✒
  })
}

Kérésindítási lehetőségek

  • Cím (URL) beírása (GET)
  • Linkre kattintás (GET)
  • Űrlap elküldése (GET, POST)
  • JavaScript (GET, POST, …)
    • oldal újratöltés - window.location (GET)
    • űrlap elküldés - submit() metódus (GET, POST)
    • AJAX/fetch kérés (bármilyen HTTP metódus)

Összefoglalás

  • PHP program bemenete: URL (GET)
  • PHP program bemenete: HTTP (POST)
  • Bemenet feldolgozásának általános sablonja
  • Hibák kezelése a feldolgozásban
  • Környezeti változók, a HTTP kérés paraméterei

Összefoglalás