A Web programozása 3. előadás HTML űrlapok kezelése és feldolgozása PHP segítségével

1. A Web programozása 3. előadás HTML űrlapok kezelése és feldolgozása PHP segítségével Rózsa Szabolcs BME Általános- és Felsőgeodézia Tanszék

2. Tartalom • Űrlapok szerkezete és létrehozása • Az adatbeviteli eszközök • Adatátvitel módja (POST, GET) • Űrlapok adatainak kezelése PHP-ben

3. Az űrlapok szerkezete Beviteli mező Választó gombok Elküldés (submit) gomb

4. Az űrlap html kódja Hová és hogyan küldjük el az űrlap adatait? <form action="processform.php" method="POST"> <table border="0" width="450"> <tr> <td> <p><font face="Arial">Program:</font></p> <input type="text" maxlength="300" size="40" name="program"></p> <p><font face="Arial">A program kezdete: </font><p><font face="Arial"><input type="text" maxlength="4" size="4" name="kezdev">év <input type="text" maxlength="2" size="2" name="kezdho">hó <input type="text" maxlength="2" size="2" name="kezdnap">nap <input type="text" maxlength="2" size="2" name="kezdora">óra <input type="text" maxlength="2" size="2" name="kezdperc" value="00">perc</font></p> Egy beviteli mező:

5. Az űrlap html kódja <p><font face="Arial">A program vége </font></p> <p><font face="Arial"><input type="text" size="4" maxlength="4" name="befev">év <input type="text" size="2" maxlength="2" name="befho">hó <input type="text" size="2" maxlength="2" name="befnap">nap <input type="text" size="2" maxlength="2" name="befora">óra <input type="text" maxlength="2" size="2" name="befperc" value="00">perc</font></p> </td> <td><font face="Arial">Program típusa</font><p><font face="Arial"><input type="radio" checked name="Tipus" value="1">Tárgyalás</font></p> <p><font face="Arial"><input type="radio" name="Tipus" value="2">Telefonhívás</font></p> <p><font face="Arial"><input type="radio" name="Tipus" value="3">Emlékeztető</font></p> <p><font face="Arial"><input type="radio" name="Tipus" value="4">Születésnap</font></p> </td> </tr> </table> Választómező (vegyük észre, hogy a név mindegyik esetben azonos:

6. Az űrlap html kódja <p><font face="Arial"><input type="submit" name="leker" value="Mentés"></font></p> </form> Elküld (submit) gomb. A gomb lenyomásának hatására a böngésző elküldi az adatokat a megfelelő szkriptnek (form action).

7. POST vs GET metódus GET: Az űrlap adatait a böngésző belekódolja az URL-be, és így küldi el azt a szerverre. POST: Az űrlapadatok a HTTP üzenetben találhatóak meg. Valamivel biztonságosabb megoldás, nem mutatja meg egyből az URL-ben a változók neveit és értékeit. Nem cache-elhető.

8. Az előbbi űrlap GET metódust használva: localhost://eloadas03/processform3.php

9. Rejtett mezők használata localhost://eloadas03/processform3.php <form action="saveform.php" method="POST"> <?php echo "<input type=\"hidden\" name=\"program\" value=\"$program\">"; echo "<input type=\"hidden\" name=\"kezdev\" value=\"$kezdev\">"; echo "<input type=\"hidden\" name=\"kezdho\" value=\"$kezdho\">"; echo "<input type=\"hidden\" name=\"kezdnap\" value=\"$kezdnap\">"; echo "<input type=\"hidden\" name=\"kezdora\" value=\"$kezdora\">"; echo "<input type=\"hidden\" name=\"kezdperc\" value=\"$kezdperc\">"; echo "<input type=\"hidden\" name=\"befev\" value=\"$befev\">"; echo "<input type=\"hidden\" name=\"befho\" value=\"$befho\">"; echo "<input type=\"hidden\" name=\"befnap\" value=\"$befnap\">"; echo "<input type=\"hidden\" name=\"befora\" value=\"$befora\">"; echo "<input type=\"hidden\" name=\"befperc\" value=\"$befperc\">"; echo "<input type=\"hidden\" name=\"Tipus\" value=\"$Tipus\">"; ?> <p><font face="Arial"><input type="button" name="cancel" value="Mégsem" onclick="window.location='form3.php'">&nbsp;<input type="submit" name="leker" value="Mentés"></font></p> </form>