Front-end development

Presentatie over: "Front-end development"— Transcript van de presentatie:

1 Front-end development
SESSIONS & COOKIES Les 08: SESSIONS & COOKIES

2 Leerdoelen (bron: modulewijzer)
Front-end development Les 8> leerdoelen Leerdoelen (bron: modulewijzer) Je kent het verschil tussen $_SERVER, $_SESSION en $_REQUEST variabelen en je begrijpt het verschil in lifecycle Je kunt een eenvoudige login maken Je kunt Cookies zetten en deze later weer uitlezen Je kunt gegevens bewaren in een Session Je bent je bewust van verschillende manieren waarop hackers te werk gaan en kent methodes om dat in PHP te voorkomen. 2

3 PHP : SUPERGLOBALS Les 8 > PHP > superglobals
Front-end development Les 8 > PHP > superglobals PHP : SUPERGLOBALS $_SERVER blijft beschikbaar zolang de server aanstaat $_SESSION blijft beschikbaar zolang een gebruiker op de server aktief is $_REQUEST is beschikbaar NADAT een gebruiker een request heeft verstuurd

4 begin/restore session
Front-end development C[reate] R[ead] U[pdate] D[elete] user admin Manage application Les 8 > SESSIONS SESSIONS Weer een kreet: SESSIONS. Wat is dat nu weer? SESSIONS bieden je de mogelijkheid om gegevens op een server (IP-adres) te bewaren zolang je op die server aanwezig bent, zolang de http session aktief is. Een SESSION wordt opgeslagen in de superglobal $_SESSION. Reuze handig als je iets tijdelijk wilt opslaan, zolang je op een website aanwezig bent. Bijvoorbeeld de inhoud van een shopping-cart. Of een switch die vertelt of je ingelogd bent of niet. Een gewone (lokale) variabele kun je daar niet voor gebruiken omdat deze niet leesbaar is in andere pagina’s. begin/restore session user/pass found ? n toon melding j vul & toon formulier goed ingevuld ? n toon melding j sla data op Voor meer info zie

5 Lesplan Les 7 > CRUD > lesplan
Front-end development Les 7 > CRUD > lesplan Lesplan We gaan klassikaal een werkende CRUD applicatie maken voor de ‘customers’ tabel in de database ‘classicmodels’, welke eerder deze periode tijdens de lessen is gebruikt. Dit doen we aan de hand van een werkende voorbeeld applicatie genaamd ‘crudsample’ welke we als ‘template’ zullen gebruiken voor de nieuwe applicatie die we ‘crudcustomers’ noemen. De sheets uit deze presentatie kunnen daarbij als leidraad worden gebruikt, beginnend bij de Read functionaliteit. CRUDSAMPLE CRUDCUSTOMERS

6 Vooraf Les 7 > CRUD > Vooraf
Front-end development Les 7 > CRUD > Vooraf Vooraf Er is op de updatescripts (nog) geen login beveiliging aangebracht. Let op de naamgeving, deze zul je op diverse plekken aan moeten passen: kolom en table namen in de queries veldnamen in formulieren superglobals en variabelen database naam De zip van de ‘crudsample’ voorbeeld applicatie vind je hier Als je de database ‘classicmodels’ nog niet hebt kun je deze hier downloaden

7 READ maak query en voer uit records ? n j toon melding toon overzicht
Front-end development C[reate] R[ead] U[pdate] D[elete] user admin Manage application Les 7 > CRUD > Read READ Met deze functionaliteit worden de opgeslagen gegevens opgehaald uit de database en in een overzicht getoond aan de gebruiker. Via PHP wordt een SQL query samengesteld en uitgevoerd in de MySQL database. Het resultaat wordt in een HTML table ondergebracht en getoond in de browser. SQL select column from tablename order by column [asc/desc] Lesopdracht Bekijk onderstaand script en maak deze werkend op jouw webspace voor de table customers in de classicmodels database. Denk na welke gegevens (velden/kolommen) je nodig hebt! >> tonen_overzicht.phps maak query en voer uit records ? n j toon melding toon overzicht

8 CREATE invullen formulier goed ingevuld ? n toon melding j sla data op
Front-end development C[reate] R[ead] U[pdate] D[elete] user admin Manage application Les 7 > CRUD > Create CREATE Met deze functionaliteit ga je gegevens toevoegen aan de database. Dit doe je met behulp van een invul formulier, waarna de ingevulde gegevens via de mysql instructie INSERT worden ingevoegd in de betreffende table. Zowel voor het invulformulier als voor de verwerking van de ingevulde gegevens worden in dit voorbeeld aparte scripts gebruikt. SQL insert into tablename (columns) values (values) Lesopdracht Bekijk onderstaande scripts en maak deze werkend op jouw webspace voor de table customers in de classicmodels database. Denk na welke gegevens (velden/kolommen) je nodig hebt! >> toevoegen_form.phps | toevoegen_action.phps invullen formulier goed ingevuld ? n toon melding j sla data op

9 UPDATE haal data records ? n toon melding j vul & toon formulier
Front-end development C[reate] R[ead] U[pdate] D[elete] user admin Manage application Les 7 > CRUD > Update UPDATE Met deze functionaliteit worden bestaande gegevens in de database gewijzigd. Via een hyperlink in het overzicht wordt een record uit de database opgehaald en in een HTML formulier geladen, waarna de gegevens door de gebruiker kunnen worden aangepast. Bij versturen van het formulier worden de gegevens in de database overschreven met behulp van het UPDATE statement. SQL update tablename set column=value where column = value Lesopdracht Bekijk onderstaande scripts en maak deze werkend op jouw webspace voor de table customers in de classicmodels database. Denk na welke gegevens (velden/kolommen) je nodig hebt! >> wijzigen_form.phps | wijzigen_action.phps haal data records ? n toon melding j vul & toon formulier goed ingevuld ? n toon melding j sla data op

10 DELETE toon record verwijderen ? n j toon melding verwijder record
Front-end development C[reate] R[ead] U[pdate] D[elete] user admin Manage application Les 7 > CRUD > Delete DELETE Met deze functionaliteit worden eerder opgeslagen gegevens uit de database verwijderd. In het overzichtscherm wordt voor ieder record een hyperlink getoond. In deze hyperlink wordt het ID doorgegeven aan het verwijderscript, zodat deze de query kan samenstellen voor dat specifieke record. Er wordt via javascript om een bevestiging gevraagd waarbij de verwijderaktie kan worden afgebroken. SQL delete from tablename where column = value; Lesopdracht Bekijk onderstaand script en maak deze werkend op jouw webspace voor de table customers in de classicmodels database. Denk na welke gegevens (velden/kolommen) je nodig hebt! >> verwijderen.phps toon record verwijderen ? n j toon melding verwijder record

11 FILE UPLOAD: HTML Les 7 > Fileupload > HTML
Front-end development Les 7 > Fileupload > HTML FILE UPLOAD: HTML Je hebt vast wel eens een advertentie op Marktplaats.nl geplaatst en daarbij 1 of meer foto’s geupload. Of je hebt een flickr, facebook of hyves account waar ook mogelijkheden zijn om bestanden (foto’s, filmpjes etc.) te uploaden. Waarschijnlijk geen onbekend fenomeen dus. Maar hoe werkt zoeiets nu? Allereerst heb je een HTML formulier nodig. In de form tag moet je van het form element het attribute ‘enctype’ op onderstaande manier gebruiken: <form enctype="multipart/form-data" action="uploadcheck.php" method="post"> Vervolgens heb je in het formulier een button nodig om je lokale harddisk te kunnen verkennen zodat je bestanden kunt opzoeken en selecteren die je wilt uploaden. Hiervoor moet je van het file element het attribute ‘type’ op onderstaande manier gebruiken: <input name="userfile" type="file"> Het bestand wat je hebt geselecteerd wordt bij submit van het formulier ondergebracht in de superglobal $_FILES Via een submit button wordt het formulier verstuurd naar ‘uploadcheck.php’ >> upload.htm

12 FILE UPLOAD: PHP Les 7 > Fileupload > PHP
Front-end development Les 7 > Fileupload > PHP FILE UPLOAD: PHP Je hebt PHP nodig om de informatie die is verstuurd met het formulier te kunnen verwerken. De informatie wordt via het HTTP protocol verstuurd in de superglobal $_FILES. Via de function move_uploaded_file wordt het bestand in een bepaalde map op de server geplaatst. Deze map (bijv. de map ‘files’) moet leesbaar en schrijfbaar zijn. Dit kun je met het Linux shell command CHMOD instellen, bijv. chmod files 775. Meer hierover vind je op User (rwx) = = 7 Group(rwx) = = 7 World (rx) = 4+1 = 5 chmode mode = 755 CHMOD kun je ook via FTP uitvoeren. Dit doe je door een map of bestand met de rechtermuis aan te klikken waarna je via de properties (eigenschappen) de rechten kunt aanpassen. Ook is het mogelijk om meerdere files met 1 form te uploaden (multiple file upload). Meer info vind je op >> uploadcheck.phps