Dankzij de formulieren kan de gebruiker van de site informatie invoeren en versturen.

Transcriptie

1 PHP Les 5 : Frmulieren gemaakt in HTML Interessante links: Dankzij de frmulieren kan de gebruiker van de site infrmatie inveren en versturen. De belangrijkste elementen bij het maken van frmulieren zijn FORM, INPUT, SELECT, OPTION en TEXTAREA. Het FORM element definieert het begin en einde van een frmulier. Met de attributen METHOD en ACTION wrdt bepaald p welke wijze (methde) de infrmatie uit het frmulier verznden met wrden en waarheen (actin). Het verwerken van de gegevens kan gebeuren met een server-side techniek zals ASP, ASP.net, PHP, JSP, Cldfusin,... Frmulieren in HTML-kit Het frm element De gegevens die tt één frmulier behren plaats je tussen de tags <FORM> en </FORM>. De FORM-tag kent heel wat specifieke attributen.a: actin: URL waarheen de inhud van het frmulier met verznden wrden methd: specifiëert welke HTTP-methde er gebruikt zal wrden vr het versturen van de frmuliergegevens. Mgelijke waarden zijn GET (standaard) en POST Het FORM-element fungeert als cntainer vr frmulierelementen : tekstvakken, keuzelijsten, keuzerndjes, keuzevakjes,... Frmulieren Pagina 1

2 Vrbeeld: <frm actin=" methd="pst"> </frm> Het INPUT element Het type en de eigenschappen van een INPUT-element stel je in met vlgende attributen: type: het type frmulierelement dat je wenst aan te maken - Standaard: text text: een tekstvak vr één regel tekst. <input name="naam_variabele" type="text" value="tikken"> tikken passwrd: zals een text-veld, maar de inver van de gebruiker wrdt dr de User Agent gemaskeerd. <input name="pwd" type="passwrd" value="paswrd"> ******** checkbx: maakt een keuzevak. Je kan meerder keuzevakken eenzelfde name geven m aan te duiden dat deze vakken bij elkaar hren (een aantal pties nder dezelfde nemer). Enkel waarden van keuzelijsten die aangevinkt (checked) zijn wrden meegestuurd naar de afhandelingsscript. Je kan keuzelijsten standaard aanleggen dr de waarde checked in de input-tag p te nemen. <input type="checkbx" name="deel" value="d1">deel1 <input type="checkbx" name="deel" value="d2">deel2 <input type="checkbx" name="deel" value="d2">deel3 deel1 deel2 deel3 radi: maakt een keuzerndje. Bij elkaar hrende keuzerndjes met je dezelfde name geven, anders zullen ze niet samenwerken. Het is nu eenmaal de bedeling bij keuzerndjes dat je slechts één van de mgelijkheden kan selecteren. <input type="radi" name="deel" value="small">small <input type="radi" name="deel" value="medium">medium <input type="radi" name="deel" value="large">large small medium large name: de naam van het frmulierelement, smmige elementen hebben bij vrkeur dezelfde naam. Frmulieren Pagina 2

3 value: standaardwaarde van het element, ptineel behalve bij radi en checkbxtypes. size: de breedte van het element in pixels, behalve bij text f passwrd-types : hier is size het aantal karakters. maxlength: gebruikt bij text en passwrd-types : stelt het maximaal in te geven aantal karakters in. Als maxlength > size dat kan er gescrlld wrden. checked: activeert de ptie vr een radi en checkbx Het BUTTON-element De eigenschappen van een BUTTON kan je instellen met vlgende attributen: name: de naam van de knp value: standaardwaarde van de knp type: het type knp submit: verstuur de frmuliergegevens buttn: een drukknp waarvr je zelf de actie kan definiëren. reset: plaatst alle cntrls p hun standaardwaarde Vrbeeld: <buttn type="submit">verzenden</buttn> Definitie van de methden Get en Pst PHP is zeer geschikt vr het verwerken van frmulieren en wrdt daarm vaak vr dit del gebruikt. Wat betekent het wrdje methd? Dit attribuut is verantwrdelijk vr de gebruikte methde vr het versturen van de gegevens. Get de gegevens die wrden verstuurd, wrden tegevegd aan de url. Je kent waarschijnlijk wel die lange url's met al die vraagtekens erin? Get is de methde die standaard wrdt gebruikt. Pst de gegevens wrden eveneens verstuurd, maar wrden niet tegevegd aan de URL. Ik kan enkel en alleen aanbevelen m de methde pst te gebruiken en get te vergeten. De GET-methde Via deze methde wrden variabelen drgegeven via een URL. De methde maakt het mgelijk eenvudig infrmatie dr te geven aan vlgende pagina s p een webserver. Dit een een zeer belangrijk nderdeel van de ntwikkeling van dynamische websites. index.php?page=news Frmulieren Pagina 3

4 De pbuw van deze URL is relatief eenvudig. Na de URL zelf wrden, na? de parameters aangehangen. De pbuw van van een parameter bestaat uit de naam van de variabele en de waarde. De parameters wrden van elkaar gescheiden met een ampersand (&). U hebt dus geen frmulier ndig, maar stelt de URL samen dr middel van PHP. Als deze URL nu wrdt uitgeverd en de ersultaatpagina wrdt aangerepen, wrden, vrdat de PHP-script wrdt pgestart, de parameters gelezen en als variabelen ingesteld. U kunt deze vraiabelen p de resultaatpagina direct gebruiken: De POST-methde Met de POST-methde kunnen gegevens in een cliëntverzek naar de server wrden gestuurd. Deze gegevens wrden dan naar een gegevensverwerkend prgramma gestuurd, dat weer gebruik maakt van de server. Deze wrdt vral gebruikt m frmulieren dr te sturen. Je met POST gebruiken wanneer: u grte heveelheden wilt drgeven u een handmatige manipulatie van de drgavewaarden wilt bemeilijken. grtere veiligheid In alle andere gevallen kunt u znder prblemen de GET-methde gebruiken Frmulieren Pagina 4

5 De verwerking van frmulieren via PHP He gaan we nu de inhud van het frmulier verwerken? We leerden reeds gebruik te maken van variabelen. Geheugenplaats in de prgrammacde. Wanneer we nu de inhud van de tekstvakken kunnen tewijzen aan een variabele dan is ns prbleem pgelst. We weten reeds dat de inhud van het frmulier dr de ACTION drgestuurd wrdt naar de pagina naar welke de URL (het webadres) verwijst. We meten enkel nu ng de cde kennen m het te te wijzen. Een vrbeeld in html: de pagina waar het frmulier staat nemt: welkm.php. Je ziet heel duidelijk dat de actin de inhud van het frmulier zal versturen naar welkmpl.php <html> <bdy> <frm actin="welkmpl.php" methd="post"> Enter yur name: <input type="text" name="name" /> Enter yur age: <input type="text" name="age" /> <input type="submit" /> </frm> </bdy> </html> Dit is het welkmpl.php bestand waar de waarden van het frmulier wrden naar tegeznden. <html> <bdy> </bdy> </html> <?php?> $naam=$_post["name"]; $leeftijd=$_post["age"]; ech <p>welcme $naam, yu are $leeftijd years ld!</p> ; Naam van variabele De methde van versturen (Pst f Get) name van frmulier element Vrbeeld he het p je scherm kmt: Welcme Jhn, yu are 28 years ld! Frmulieren Pagina 5

6 Lespdracht: Maak vlgende pdracht in les3.php We zijn een kpie zaak en willen de factuur maken. Weet dat per kpie 10 cent gevraagd wrdt. Maak vlgend frmulier: Verstuur de gegevens naar les3pl.php Op deze pagina met de vlgende tekst kmen (de nderlijnde zaken zijn variabel, afhankelijk van de input): Beste naam, U kpieerde 1000 stuks aan een prijs van 0,1 EUR per stuk. U met dus 100 EUR betalen + 21 EUR BTW. Ttaalbedrag: 121 EUR. Analyse: Twee peenvlgende gebeurtenissen: Analyse In PHP Frmulieren Pagina 6

7 VERVOLG Analyse VERVOLG in PHP Oefeningen 1. Klik p de link: PHP efeningen Ga naar de efening: Opdracht 5 (je scrlt wat naar beneden) Daar zie je de vlgende pdracht. Maak deze. 2. Extra efeningen Ver in een tekstvak de waarde in Celsius in. Laat dit mrekenen naar fahrenheit. Zek de frmule p het internet 3. Extra efeningen Laat de waarden van Belgische valuta inveren. Geef als plssing (met ndige gebruiksvriendelijkeheid) bvb: De waarde van 100 BEF is 2,5 4. Maak een bestelfrmulier. Waar je met een keuzelijst aanduidt wat je bestelt, met een tekstvak: heveel je bestelt, met keuzerndjes welke btw-tarief van tepassing is (0% f 12% f 21%) en een knp: bereken factuur. De plssing met vermeld staan als vlgt: Vr de aankp van $aantal stuks van $keuze met een btw-tarief van $btw met je $ttaal betalen. Bedankt vr uw aankpen. 5. Maak pdracht 4 t.em 6 Frmulieren Pagina 7