Dynamische Websites. Week 2

Dynamische Websites Week 2

AGENDA Labo 1 GET, POST Navigatie, etc Varia

PHP <div class="col-md-3"> <select class="form-control" name="dag" id="dag"> <option value="1">1</option> </div> </select>

PHP <div class="col-md-3"> <select class="form-control" name="dag" id="dag"> Lus <option value="1">1</option> </div> </select>

PHP <div class="col-md-3"> <select class="form-control" name="dag" id="dag"> Lus <option value="1">1</option> </div> </select> Sluiten lus

PHP <div class="col-md-3"> <select class="form-control" name="dag" id="dag"> </select> </div> <option value=" "> </option>

PHP <div class="col-md-3"> <select class="form-control" name="dag" id="dag"> <?php for ($i = 1; $i <= 31; $i++){?> <option value=" "> </option> </select> </div>

PHP <div class="col-md-3"> <select class="form-control" name="dag" id="dag"> <?php for ($i = 1; $i <= 31; $i++){?> <option value=" <?php echo $i?>"> </option> </select> </div>

PHP <div class="col-md-3"> <select class="form-control" name="dag" id="dag"> <?php for ($i = 1; $i <= 31; $i++){?> <option value=" <?php echo $i?>"> <?php echo $i?> </option> </select> </div>

PHP <div class="col-md-3"> <select class="form-control" name="dag" id="dag"> <?php for ($i = 1; $i <= 31; $i++){?> <option value=" <?php echo $i?>"> <?php echo $i?> </option> <?php }?> </select> </div>

PHP <div class="col-md-3"> <select class="form-control" name="dag" id="dag"> <?php for ($i = 1; $i <= 31; $i++){?> <option value=" <?php echo $i?>"> <?php echo $i?> </option> <?php }?> </select> </div> html buiten php-block!

ALTERNATIEVE SYNTAX for ($i = 1; $i <= 31; $i++){ echo $i; } for ($i = 1; $i <= 31; $i++): echo $i; endfor; endwhile; endif... http://php.net/manual/en/control-structures.alternative-syntax.php

ALTERNATIEVE SYNTAX for ($i = 1; $i <= 31; $i++){ echo $i; } for ($i = 1; $i <= 31; $i++): echo $i; endfor; endwhile; endif html... http://php.net/manual/en/control-structures.alternative-syntax.php

ALTERNATIEVE SYNTAX for ($i = 1; $i <= 31; $i++){ echo $i; } for ($i = 1; $i <= 31; $i++): echo $i; endfor; zuiver php endwhile; endif... html http://php.net/manual/en/control-structures.alternative-syntax.php

VOORBEELD WEEK 1 <html> <body> <p>hello, my name is <strong>jan</strong></p> <p>i live in <i>herestraat 49</i></p> <br /> <p>today is <?php echo date('d/m/y');?></p> </body> </html>

VOORBEELD WEEK 1 Hardgecodeerd! <html> <body> <p>hello, my name is <strong>jan</strong></p> <p>i live in <i>herestraat 49</i></p> <br /> <p>today is <?php echo date('d/m/y');?></p> </body> </html>

VARIABELEN <?php $name = 'Jan'; $street = 'Herestraat 49';?> <html> <body> <p>hello, my name is <strong><?php echo $name;?></strong></p> <p>i live in <i><?php echo $street;?></i></p> <br/> <p>today is <?php echo date('d/m/y');?></p> </body> </html>

VARIABELEN <?php $name = 'Jan'; $street = 'Herestraat 49';?> Liever meegeven als parameter! <html> <body> <p>hello, my name is <strong><?php echo $name;?></strong></p> <p>i live in <i><?php echo $street;?></i></p> <br/> <p>today is <?php echo date('d/m/y');?></p> </body> </html>

VARIABELEN <?php $name = 'Jan'; $street = 'Herestraat 49';?> Liever meegeven als parameter! Hoe? <html> <body> <p>hello, my name is <strong><?php echo $name;?></strong></p> <p>i live in <i><?php echo $street;?></i></p> <br/> <p>today is <?php echo date('d/m/y');?></p> </body> </html>

PARAMETERS Doorgeven via... GET URL POST Body

GET REVISITED Parameters meegeven in URL: http://<host>/<path>?<querystring> Querystring: voornaam=piet voornaam=piet&leeftijd=20 Ophalen van data, geen side-effect idempotent

VOORBEELD Host Path http://localhost:8888/dynwebexamples/theorie02/ voorbeeld1.php?name=piet&street=parkstraat Querystring

PHP <?php $name = 'Jan'; $street = 'Herestraat 49';?> <html> <body> <p>hello, my name is <strong><?php echo $name;?></strong></p> <p>i live in <i><?php echo $street;?></i></p> <br/> <p>today is <?php echo date('d/m/y');?></p> </body> </html>

PHP <?php $name = 'Jan'; $street = 'Herestraat 49';?> Hoe uit request halen? <html> <body> <p>hello, my name is <strong><?php echo $name;?></strong></p> <p>i live in <i><?php echo $street;?></i></p> <br/> <p>today is <?php echo date('d/m/y');?></p> </body> </html>

$_GET Voorgedefiniëerde variabele* Associatieve array: key: naam parameter value: waarde parameter *Zie http://php.net/manual/en/reserved.variables.php

http://localhost:8888/dynwebexamples/theorie02/ voorbeeld1.php?name=piet&street=parkstraat <?php $name = $_GET['name']; $street = $_GET['street'];?> <html> <body> <p>hello, my name is <strong><?php echo $name;?></strong></p> <p>i live in <i><?php echo $street;?></i></p> <br/> <p>today is <?php echo date('d/m/y');?></p> </body> </html>

HTML FORM user input naar server sturen bevat input elementen: <form> input elementen </form> Zie: http://www.w3schools.com/html/html_forms.asp

HTML FORM user input naar server sturen bevat input elementen: <form> input elementen </form> tekst velden, checkboxen, radio-buttons, submit buttons,... Zie: http://www.w3schools.com/html/html_forms.asp

INPUT ELEMENTEN input van de gebruiker <input type= type name= naam > bepaalt wijze van invoer: text checkbox password radio... naam parameter in HTTP Request

INPUT SUBMIT BUTTON <input type= submit > knop: data worden verstuurd naar server voor elk input element: parameter alternatief: <button type= submit > veelzijdiger

VOORBEELD <form> Voornaam: <input type="text" name="naam"> <input type="submit" value="submit"> </form>

VOORBEELD <form> Voornaam: <input type="text" name="naam"> <input type="submit" value="submit"> </form>?naam=piet

INPUT SERVER HTTP Request <form method="http methode">

VOORBEELD <form role="form" action="" method="get"> Host Path http://localhost:8888/2013exercises/les01/index.php?naam=piet&email=email&dag=22&maand=9&jaar=2013 &lievelingskleur=ff0000&aanvaardbarekleuren[]=00ff00 &opmerkingen= Querystring

ALTERNATIEF: POST <form role="form" action="" method="post"> http://localhost:8888/2013exercises/les01/index.php Querystring meegeven in body Wel side-effects (email sturen, data wijzigen,...) $_POST: key: naam input element value: inhoud input element

GET POST Bookmark V X Cache V X Restrictions on length V X Restrictions on type V X Back button V X (warning) Parameters in history V X Security X V Visibility V X Useable Safe

NAVIGATIE action form-attribuut plaats waar de gegevens naartoe gestuurd moeten worden <form action= url >... </form> Indien leeg zelfde pagina

VOORBEELD <form role="form" action="" method="post"> blijf op zelfde pagina <form role="form" action="confirm.php" method="post"> navigeer naar confirm.php

OPDRACHT 1 Vanuit registratieformulier: navigeer naar een bevestigingspagina toon op deze pagina de boodschap: Beste Piet, je registratie is ontvangen op 26/09/2013 13:50

OPDRACHT 2 Vanuit registratieformulier: controleer of minstens naam en email ingevuld. Indien niet: toon foutboodschap

OPDRACHT 3 Vanuit registratieformulier: als naam en email niet ingevuld: toon foutboodschap anders: navigeer naar bevestigingscherm: Registratie ontvangen om 13:50

REDIRECT zet HTTP Response header functie header() header( Location: <url> ) gevolgd door exit(); eventuele verdere code mag niet meer uitgevoerd worden!

CLIENT SERVER MODEL heeft een service nodig draait client programma deelt geen resources begint communicatie vraagt biedt een service aan draait server programma deelt resources met client wacht op vraag antwoordt

SVN client server client Verwijzing instructies

AGENDA? Labo 1 GET, POST Navigatie, etc Varia