Voordelig Slapen “Op de Kogel”

Slapen en Ontbijten Op de Kogel

Toen ik eind januari hoorde dat ik mijn opleiding tot web developer succesvol had afgerond, nam ik mij voor om vanaf maart alle tussentoetsen en het examen opnieuw te maken. Tegen die tijd was er behoorlijk wat tijd voorbij gegaan sinds ik ze maakte zodat  opnieuw maken een goede en leerzame herhaaloefening zou zijn van stof die misschien een beetje was weggezakt.

Een ander plan

Maar mijn oom en tante hadden een beter idee. Voor fietsers in de mooie regio Noord-Limburg verhuren zij sinds kort kamers op de bovenverdieping van hun boerderijwoning en daar wilden ze graag een site voor hebben. Of ik die wilde maken? Natuurlijk had ik daar wel oren naar want ik realiseerde me meteen dat de opdracht alles zou bevatten wat ik tijdens mijn opleiding had geleerd en nog heel wat meer. We werden het er al snel over eens dat mijn oom en tante voor de inhoudelijke invulling zouden zorgen en hun wensen kenbaar zouden maken wat betreft vormgeving zodat ik me kon richten op de technische kant.

De website van mijn oom en tante is te vinden via Slapen en Ontbijten “Op de Kogel”  of door op bovenstaande afbeelding te klikken. Bekijk de site vooral en boek een kamer want het is inderdaad een mooie omgeving.

Wat kwam er kijken bij de site?

  • De site moest goed werken op alle mogelijke schermen. Websitebouwers noemen dat responsive design. Dit was een behoorlijke klus omdat het bij de extra opdrachten van mijn opleiding hoorde en dus niet werd getoetst.
  • Een fotoboek en een slider.
  • Een contactformulier dat automatisch een mailtje stuurt nadat het ingevuld is.
  • Sommige pagina’s moeten door mijn oom en tante gewijzigd kunnen worden zonder dat ze dat steeds aan mij moeten vragen.
  • Er moest dus gewerkt worden met een database en een administrator gedeelte waarin op een eenvoudige manier wijzigingen aangebracht kunnen worden aan pagina’s. Ik heb daarvoor CKEditor gekozen.
  • Het administrator gedeelte dient uiteraard afgeschermd te zijn met een login en wachtwoord.
  • En bijna tot slot, maar niet onbelangrijk: ik had voor het eerst echt met klanten te maken die wensen hadden voor hun website. En er veranderde tijdens het ontwerpen weleens wat of er kwam een nieuw idee.
  • Dat zorgde er dus voor dat ik de site van de grond af aan op moest bouwen. Mijn oom en tante hadden ideeën, het was aan mij om die in een werkzame site om te zetten. En voor het eerst zonder stappenplan (= te maken opdrachten) van de opleiding.

Al met al was het een leuke en ook leerzame klus.  En had je nu al op Slapen en Ontbijten “Op de Kogel” gekeken?

Kaarten maken met Anki

CodeCademy en Anki

Vanmiddag ben ik begonnen met het toevoegen van een aantal kaarten aan mijn Anki kaartenset, of deck, zoals Anki het zelf noemt. Er zijn over allerlei onderwerpen kaarten te vinden via Anki die je kunt importeren en gebruiken, ook voor het onderwerp web development waarin ik ben geïnteresseerd, maar ik geef er de voorkeur aan zelf kaarten te bedenken. Daarvoor heb ik de volgende redenen.

  1. Bij kant-en-klare decks weet je niet precies wat je krijgt. Je zult de set alsnog moeten doorlopen om te kijken of er alles in staat wat jij wilt leren.
  2. Je loopt de kans dat er dingen in staan die jij niet wil leren. Bovendien volgen kaarten de logica van de maker van die betreffende kaarten. Als je die context mist, kan ik me voorstellen dat bepaalde kaarten onduidelijk zijn.
  3. Als je zelf je eigen kaarten met vraag en antwoord maakt, kun je inspelen op die dingen die voor jou lastig zijn.

Die drie argumenten zijn voor mij reden genoeg om zelf mijn kaarten te bedenken. Sterker nog, ik zie dat als een belangrijk onderdeel van het leerproces.

Hoe maak ik kaarten?

Voor het aanmaken van een aantal kaarten, zorg ik meestal dat ik een afgerond geheel heb. Vanmiddag was ik bezig kaarten te bedenken voor objectgeoriënteerd programmeren in PHP. Het proces heeft voor mij een aantal stappen.

  1. Zoek en maak eerst een aantal opgaven  rond het betreffende onderwerp. In dit geval bood Codecademy uitkomst, maar vaak hielpen de opgaven tijdens mijn opleiding of voorbeeldcodes van internet of boeken ook. Richt je bij het maken van de opgaven vooral op het begrijpen van de stof en zorg er daarnaast voor dat je opgaven werkende codes opleveren. Gebruik deze codes als inspiratiebron bij de volgende punten.
  2. Als je de opgaven over jouw onderwerp hebt gemaakt, bekijk ze dan een dag of wat later opnieuw. Stel vragen aan de code en bedenk het antwoord. Dat is een kaart in Anki.
  3. Stel feitelijke vragen en stel vragen die je kunt beantwoorden met een programmeeropgave.
  4. Let daarbij vooral goed op dingen waarmee je in een eerder stadium moeite had tijdens het maken van de opgaven. Wat heb je moeten onthouden tijdens het maken van de opgaven?
  5. Zorg voor (programmeer)vragen die het grotere geheel duidelijk maken, hoe de onderdelen samenhangen, maar zorg ook voor vragen naar detailkwesties.

Dit zijn de overwegingen die ik steeds hanteer bij het maken van kaarten. Het maken van deze kaarten en het iedere avond oefenen volgens de principes van gespreid herhalen, zorgt ervoor dat ik het een stuk eenvoudiger vind om mij bij het programmeren te richten op wat voor mij nieuw is aan een specifieke programmeeropdracht, zonder dat er basale dingen hoef na te denken. En uiteraard vinden die nieuwe dingen ook weer hun weg naar Anki.

Anki voor andere onderwerpen

Mijn Anki kaarten bevatten gewoon tekst, maar je kunt ook plaatjes, video of audio toevoegen. Bij het leren van woorden in vreemde talen wordt tegenwoordig aangeraden om plaatjes te gebruiken. Dus in plaats van:

Vraag –> Antwoord

Fiets –> Bicyclette

Wordt het :

(Plaatje van fiets) –> Bicyclette.

Gabriel Wyner, auteur van Fluent Forever (ik heb het boek overigens nog niet gelezen) gebruikt deze methode en zijn favoriete tool daarvoor is Anki.

Leren met Anki in de praktijk

Na mijn vorige blogpost over Anki realiseerde ik me al snel dat ik veel niet had gezegd wat misschien wel de moeite is om te lezen als je serieus aan de slag wil of bent met (om)scholing. Vandaar dit vervolg.

Op de middelbare school hadden wij in de brugklas studieles. Je kreeg onder andere te horen hoe je je huiswerk kon plannen en je maakte kennis met de basisprincipes van gespreid herhalen. Met een eenvoudig experiment werd je duidelijk gemaakt dat het niet verstandig was nieuwe woordjes drie keer achter elkaar te leren, maar dat het veel effectiever was om gedurende een week de woordjes drie maal te leren.

Overhoren met moderne middelen

Eigenlijk is Anki niets meer dan een moderne variant hierop. Met als grote voordeel dat Anki onthoudt wanneer je iets opnieuw moet leren. Om een praktijkvoorbeeld te geven. Voor ik aan mijn opleiding begon, raadde een docent mij aan om alvast het boek HTML & CSS van Jon Duckett door te nemen. Dat vind ik een prima boek maar meer een naslagwerk in plaats van een leerboek.

Ik kende het al, was er al mee aan de slag geweest en was me bewust van bovengenoemde tekortkoming (in mijn ogen). Ik had daarom in Word een lijst gemaakt van alle HTML tags en CSS regels en hun betekenissen. En deze uitgeprint om op de ouderwetse middelbare-school-manier met de hand op de rechterkolom te leren. Maar er waren geen proefwerken of overhoringen dus van leren kwam niet veel terecht.

Dat veranderde toen ik Anki leerde kennen en ik het Word-bestand omzette naar Anki kaarten. Het werd iedere avond een sport om er mee bezig te zijn en dat motiveerde enorm. Anki is eigenlijk een overhoring op zich en toen ik aan mijn opleiding begon merkte ik dat ik door het van buiten leren veel minder moeite had met alle opdrachten die ik mocht maken. En dat werkte vervolgens extra motiverend om iedere avond met Anki bezig te zijn.

Oefenen

Toen ik verder ging met het thema PHP realiseerde ik me dat ik mijn aanpak licht moest wijzigen. Tot dan toe had ik steeds het antwoord voor me uit gepreveld voor ik het met Anki toonde. PHP is iets complexer en indachtig het Engelse motto practice makes parmanent besloot ik op mijn Anki kaarten kleine programmeeropgaven te schrijven en deze steeds uit te typen in Notepad++.

Uiteraard zorgde ik bij het aanmaken van een kaart ervoor dat ik de uitwerking van de vraag  van tevoren  op werkzaamheid had getest. Hierbij hielpen de lesstof en de bijhorende opgaven enorm. Zo oefende ik iedere avond kort een deel van wat ik tot dan toe had geleerd. Wat Anki extra mooi maakt ten opzichte van het schoolse overhoren zoals ik dat van vroeger kende, is het feit dat het programma de interval tussen herhalingen steeds groter maakt.

Hierdoor wordt iedere keer dat je het kaartje ziet een groter beroep gedaan op je geheugen, je moet dieper graven naar een antwoord en je onthoudt het daarom beter.

Plaatjes zeggen meer dan woorden, dus daarom:

Een Anki-opgave in drie afbeeldingen.

Dit betreft de opgave Schrijf een functie die verbinding maakt met een database.

  1. Uitwerking in Notedpad++

Wat onderaan staat, is een standaardpagina in Notepad++ die ik heb gemaakt om makkelijk snel mijn oefeningen te kunnen maken. Tot en met regel 13 is de uitwerking van deze opgave.

2.

Probeer de opgave uit in Firefox. Geen PHP foutmeldingen dus geen fouten, ook geen zichtbaar resultaat omdat de verbinding met de database slechts de eerste stap is om iets op het scherm te kunnen tonen.

3. Controleren in Anki

Controleer je code aan de hand van Anki en geef aan wanneer je de opgave opnieuw aan de hand van hoeveel moeite je ermee had. Overigens heb ik mij tegenwoordig aangewend om bij mysqli-functies een die of exit clausule op te nemen, zie regel 8 van plaatje 1, zodat je behalve bij typfouten (syntaxis) ook een melding krijgt als de inhoudelijke gegevens niet kloppen.

Anki kort samengevat

  • Maak opgaven van hetgeen je leert.
  • Typ het antwoord uit voor je het antwoord opvraagt met Anki. Dit heeft bij leren programmeren het grote voordeel dat je bekend raakt met de valkuilen van de syntaxis (zeg maar grammatica) van de diverse programmeertalen.
  • Oefen, oefen, oefen, liefst dagelijks (kort) met Anki naast je studie.

Naar bed met Anki

Geslaagd

Ik ken haar niet, maar ik ga toch met haar naar bed en dat bevalt me al meer dan een jaar prima. Misschien is zij wel een hij, dat weet ik verder niet. Een tijdje terug had ik een Tea Topic vraag: wat is het laatste dat je doet voordat je naar bed gaat?

In mijn geval is dat dus een rondje Anki. Soms 5 minuten, soms een half uur, maar altijd laat op de avond en meestal als laatste voor het naar bed gaan. Uit de cursus Learning how to learn leerde ik (dank, Elja) namelijk dat dan het effect het grootste is. En behalve aan de aantrekkelijkheid van Anki heb ik het aan deze blogreeks van Peter te danken dat ik zo gemakkelijk elke avond aandacht aan haar of hem besteed.

Praat ik al in raadsels?

Dan wordt het tijd dat jullie kennismaken met Anki. Het is waarschijnlijk een stuk minder spannend dan jullie hadden verwacht. Anki is namelijk niets meer dan software om gemakkelijk dingen die je wilt leren gespreid te herhalen. En dat is wat ik iedere avond doe voor ik naar bed ga. Kleine oefeningetjes herhalen. Oefeningetjes die iets te maken hebben met web development.  Soms is het gewoon een vraag als hoe geef je aan dat iets in superscript moet staan? (Antwoord: <sup></sup>) In dat geval prevel ik het antwoord gewoon voor me uit.

Soms zijn de vragen wat complexer: toon alle personen in de tabel ‘gebruikers’. Die vraag gaat over MySQL voor zulke vragen heb ik Notepad++ geopend. Het antwoord op die vraag typ ik helemaal uit zodat ik meteen in de browser kan testen of ik het goed heb gedaan. Dat dwingt mij om daadwerkelijk met moeilijke vragen aan de slag te gaan.

Pas als ik de opgave helemaal goed heb (of er echt niet meer uitkom), vraag ik Anki om het antwoord. Je krijgt daarbij 4 opties: stel de vraag opnieuw, moeilijk, goed en makkelijk. Aan de hand van mijn keuze berekent Anki wanneer de vraag opnieuw wordt gesteld. Als ik de vraag moeilijk vind, zal deze eerder worden herhaald. Uiteindelijk wordt de tijd die verstrijkt tussen het herhalen van een vraag steeds groter. Op die manier moet je namelijk dieper graven naar het juiste antwoord en daardoor wordt het geheugenspoor dieper. En dat heeft weer tot gevolg dat je het beter onthoudt.

Voor Anki zijn heel veel door gebruikers geschreven opgaven voorhanden. Ik heb ze voor, tijdens en na mijn opleiding tot web developer echter steeds zelf bedacht, soms wel naar voorbeeld van opgaven tijdens mijn opleiding. Ook dat hoort volgens mij bij het leerproces.

Ik doe mijn oefeningen ’s avonds laat. Dat heeft ermee te maken dat wetenschappelijk is aangetoond dat je hersenen datgene wat je vlak voor je naar bed gaat het beste verwerken.

En ik mag wel zeggen dat Anki mij succes heeft gebracht. Natuurlijk ook door de goede opleiding. Maar ik heb de opleiding in januari met mooie cijfers afgerond en dat heb ik deels te danken aan het feit dat ik er een dagelijkse gewoonte van heb gemaakt.

Mocht je dus nog studeren of je willen omscholen: maak er een dagelijkse gewoonte van. Dat lukte mij heel makkelijk met de al eerder aangehaalde blogreeks van Peter. En als je 4 weken lang 2 à 3 uurtjes kunt missen dan is de cursus Learning how to learn van Barbara Oakley en Terry Sejnowski (gebaseerd op het boek A mind for numbers  van eerstgenoemde) ook een dikke aanrader.

@foto VIA PIXABAY met CC0 verklarinG

#SG16-51: lakens

Toevallig heb ik net ‘De val van Turing’ gelezen. Niet helemaal toevallig. Het breken van de Enigma-code en de persoon Turing fascineren me al jaren, al doe ik niet veel met die fascinatie. En al zeker geen codes breken. Maar het is een prachtig boek dat van harte aanraad, zeker als je in het onderwerp bent geïnteresseerd.

Volgens de schrijver, David Lagercrantz, is alles wat in het boek geschreven staat over Alan Turing waar. Ik wil eigenlijk niet te veel over het boek zeggen behalve dan dat lakens er een in spelen. Ja, ze komen letterlijk in het boek voor. En er zijn figuurlijk mensen die de lakens uitdelen.

Het boek begint met de zelfmoord van Alan Turing in 1954 en omvat het onderzoek daarnaar door agent Leonard Correl. Lagercrantz speelt met het genre doordat de lezer nu meer weet dan de agent toen. De ontdekkingstocht brengt je af en toe op het puntje van je stoel. Wanneer? Hoe?

Terug naar de lakens. Die zijn spreekwoordelijk ook van belang in het boek. Hoewel er inmiddels een wetenschapper is – zo bleek toen ik me er na het lezen verder in ging verdiepen – die beweert dat Turings zelfmoord geen zelfmoord was maar een ongeluk, is Alan Turing natuurlijk niet alleen bekend vanwege het kraken van de Enigma-code, maar ook om zijn geaardheid en de manier waarop daar in die tijd tegenaan werd gekeken. Homoseksualiteit was in die tijd strafbaar (tot 1967) en je riskeerde een gevangenisstraf of een chemische castratie. Turing koos voor het laatste.

Die homofobie komt in het boek goed naar voren en – hoe onvoorstelbaar ook – ik kan me er bijna iets bij voorstellen. En dat is misschien de paradox van Turing: genie, maar ook beschimpt en vernederd; enkel en alleen omdat hij er de voorkeur aan gaf de lakens te delen met mannen.

~~~~

#SG16: iedere week geeft Carel een woord uit spreekwoorden en gezegden op, waarmee je dan los kunt gaan als blogger.

Ruimte in mijn hoofd

Zo had ik ineens meer dan een maand niet geblogd. Ja, ik heb het gemist. Plannen genoeg, ideeën voor blogposts ook. Maar ik heb me – merk ik – behoorlijk verkeken op wat mijn nieuwe reeks over mijn ontdekkingstocht over web development nu echt inhoudt.

De meeste van mijn artikelen schrijf ik ik gewoon. Nu moet ik ook nog een webpagina schrijven om over te bloggen. Dat zorgt dus voor dubbel werk en dat heb ik enigszins over het hoofd gezien. Natuurlijk, het was juist te doen om die combinatie zodat ik herhaal er verstevig wat ik leer tijdens mijn opleiding en daarnaast een portfolio opbouw.

En dan heb ik natuurlijk ook nog de gewone opdrachten van die opleiding die ik allemaal met wat pauze ertussen dubbel maak. Het gaat nog steeds prachtig en ik vind het nog steeds heerlijk om te doen.

Maar de opleiding nadert zijn eindpunt. Ik heb nu HTML/CSS, PHP/MySQL, JavaScript/jQuery gehad, plus SEO en dat is wat er voor mij in de planning stond. Er valt uiteraard nog veel meer te leren meer een van de voordelen van het volgen van de MOOC Learning how to learn in combinatie met de reeks van Peter over het boek Mastering the change van Leo Babauta is dat leren daardoor een stuk eenvoudiger en vanzelfsprekender wordt. Het kost me gewoon totaal geen moeite om elke dag met webdevelopment bezig te zijn. Dikke aanraders, sowieso, maar zeker als je van plan bent iets nieuws te gaan leren.

Doordat ik nu bijna aan het einde van de opleiding ben, komt er ook ruimte en tijd voor bloggen over webdevelopment. En daar heb ontzettend veel zin in. Het wordt een mix van dingen die iedere webdeveloper eigenlijk moet kunnen. Gegevens ophalen uit en schrijven naar een database bijvoorbeeld en wat je daar in de praktijk mee kunt. Maar ik ga ook dingen bespreken waar ik tijdens mijn opleiding tegenaan liep of die niet (meteen) lukten. Die ga ik uitzoeken en uitleggen.

Ik hoop dat het zo een leerzame, nuttige en aangename reis wordt die me dus ook nog een mooi portfolio oplevert en dat daar het leggen van contacten met webdevelopers wat gemakkelijker wordt. Want ook dat begint te lopen.

Een contactformulier in 3 stappen

contact

Veel te lang niet geblogd. Maar goed, ik leer van alles. Hoog tijd om daarvan verslag te zodat ik het nog wat beter leer en onthoud. Na avonturen met PHP heb ik in mijn opleiding inmiddels ook het MySQL-gedeelte – ofwel werken met databases – succesvol afgerond. Maar voor ik dat hier laat zien nog een stukje PHP.

Eén van de dingen die nog openstaan – zowel hier als op Web development uitdagingen – is een contactformulier. En laat je die nu vrij eenvoudig kunnen maken met PHP, zeker als je gebruikmaakt van frameworks, bibliotheken die je kunt invoegen in pagina’s die je zelf ontwikkelt. Voordeel daarvan is onder andere dat je je minder druk hoeft te maken om allerlei veiligheidsrisico’s. Natuurlijk kun je niet alles blindelings vertrouwen, zo kan het geen kwaad om htmlspecialchars() om je gebruikersinvoer te zetten.

Een bekend framework is PEAR. Het zit meegeleverd bij PHP. Niet compleet, de Mail module moet je dan zelf weer installeren. Heb je dat eenmaal voor elkaar dan is de rest betrekkelijk eenvoudig.

De 3 stappen

  1. Bouw een html pagina met daarin een formulier. In de meest basale vorm ziet dat er zo uit:
    <form method="post" action="contact.php">
    	<label>Naam   <input type="text" name="naam" required></label>
    	<label>E-mailadres  <input type="email" name="email" required></label>
    	<label>Je bericht <textarea name="bericht" required></textarea></label>
    	<input type="submit" name="submit" id="submit" value="Versturen">
    </form>

    Het contact-attribuut mag in html5 overigens weggelaten worden als de huidige pagina voor de afhandeling zorgt.

  2. De tweede stap is dat je bovenaan de pagina een PHP-blok plaatst dat voor de afhandeling zorgt – lees: dat bepaalt wat er gebeurt als je op ‘Versturen’ klikt. In de eerste plaats moet je require_once 'Mail.php'; invoegen. Vervolgens moet je controleren of er op ‘Versturen’ is gedrukt. Logischerwijs heb ik gekozen voor de $_POST-verzendmethode want ik wil niet dat de hele inhoud van het contactformulier in de adresbalk komt te staan. Ik wil controleren of alle velden ingevuld zijn – en niet door op de spatiebalk te drukken – en ik wil nogmaals controleren of het e-mailadres geldig is. Dat heb ik weliswaar al gedaan met html door <input type=”email” /> aan te geven maar een extra controle lijkt me niet onverstandig. De code komt er als volgt uit te zien:
    if (isset($_POST['submit']) && !empty(trim($_POST['naam'])) && !empty(trim($_POST['bericht'])) && !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) === false)

    De trim() functie zorgt ervoor dat spaties weggehaald worden. In eerste instantie had ik gekozen voor trim() in combinatie met isset() maar dat bleek niet te werken. De inhoud van deze regel: er is op de knop met de naam submit geklikt, na weghalen van de spaties zijn de velden ‘naam’ en ‘bericht’ niet leeg en het e-mailadres in $_POST[‘email’] is niet ongeldig.

  3. Als aan die voorwaarden is voldaan, kan het daadwerkelijke mailscript in gang gezet worden. Dat mailscript bestaat kort gezegd weer uit drie onderdelen: a) de mailsettings (een Gmail-adres werkt niet), b) de mail zelf die is opgebouwd uit een aantal header variabelen en die gegevens uit $_POST bevatten omdat daar de inhoud van de mail in staat en tot slot c) het mechanisme dat het versturen van de mail bewerkstelligt.Tot zover mijn korte uitleg over het PEAR mailscript. Mocht je meer willen weten, laat dan vooral een reactie achter in de comments of gebruik natuurlijk het contactformulier van Web development uitdagingen.

To do

  • Uitzoeken of een captcha mogelijk is.
  • Contactformulier bij dit blog maken.

Vertrouw nooit gebruikersinvoer

Gisteren en vandaag heb ik na het zien van een stukje code dat ergens anders ontbrak  gebruikt om me eens flink te verdiepen in de veiligheid van PHP. En dan vooral de veiligheid van gebruikersinvoer want dat je die niet zonder meer mag vertrouwen is me de afgelopen maanden al wel duidelijk geworden.

En het was maar goed dat ik me erin verdiepte. Er ontbrak dus ergens een stukje code. In mijn code voor het gastenboek dat binnenkort hopelijk op Web development uitdagingen verschijnt. Dat kan tot het onderstaande resultaat leiden:

gehackt

Hoe heb ik deze ‘hack’ bewerkstelligd? Op de plek waar ik een bericht in kon vullen, heb ik simpelweg het volgende ingevuld:

<script>alert('Gehackt!');</script>

Dat was alles. Maar naar natuurlijk zijn er gevaarlijkere manieren om deze kwetsbaarheid te exploiteren. Je zou bijvoorbeeld een script van een andere pc kunnen laden en met met dat script die ander ongemerkt toegang geven tot jouw computer. De techniek heet Cross-site scripting (XSS).

Kwetsbaarheid oplossen

Gelukkig is de kwetsbaarheid die ik hier liet zien betrekkelijk eenvoudig op te lossen. Het gaat erom dat de PHP engine op de server te gevaarlijke code niet meer als zodanig interpreteert. Aanhalingstekens en haken moeten daartoe omgezet worden in ongevaarlijke tekens. Meerdere mogelijkheden, ik noem er drie:

  1. strip_tags.() Deze functie zorgt er in bovenstaande voorbeeld voor dat de script tags verwijderd worden waardoor het voorbeeld slechts een onschuldige tekst oplevert.
  2. htmlentities(). Deze functie zorgt ervoor dat alle karakters waarvoor de functie aangeroepen wordt, omgezet wordt naar HTML code.
  3. htmlspecialchars() Doet hetzelfde als nummer 2, maar behoudt accenten. Die worden door htmlentities() namelijk omgezet in HTML code.

Zelf geef ik de voorkeur aan htmlspecialchars(). Hoe maak je de code nu veilig? Ik geef de code die berichten uit het gastenboek laat zien.

function show_post($result)
		{
			
			foreach ($result as $key => $value)
				{
					echo '<div class="box">';
					foreach ($value as $subkey => $subvalue)
						{
							$subkey = htmlspecialchars($subkey);
							$subvalue = htmlspecialchars($subvalue);
							echo '<div class="' . $subkey . '">' .  $subvalue . '</div>';	
							if($subkey == "id")
								{
									echo '<a href="update.php?id=' . $subvalue . '"><div class="update"></div></a>';
									echo '<a href="delete.php?id=' . $subvalue . '"><div class="delete"></div></a>';
								}
						}
					
					echo '</div>';
				}

In de oorspronkelijke code ontbraken regels 9 en 10. Deze regels zorgen er nu voor dat de gebruikersinvoer gecontroleerd wordt voordat deze op het scherm getoond wordt.

Nog een kwetsbaarheid

Bij formulieren is het gebruikelijk om aan te geven welke method (get of post) er gebruikt wordt. En welke pagina de afhandeling verzorgt (action). Het action attribuut kan sinds HTML5 weggelaten worden. In dat geval is de huidige pagina de pagina die het formulier afhandelt.

Je kunt ook kiezen voor een stukje PHP. De functie $_SERVER[‘PHP_SELF’] is huidige pagina. Die kun je als volgt opnemen in je action.

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

Met htmlspecialchars dus. Doe je dat niet dan kun je met de volgende tekst achter de url in de adresbalk hetzelfde ‘Gehackt’ scherm te zien krijgen als waar we mee begonnen.

/%22%3E%3Cscript%3Ealert('Gehackt!')%3C/script%3E

Het laatste voorbeeld is overigens afkomstig van W3Schools. Welbestede dagen, zou ik denken. Eenvoudig te testen veiligheid.

Wordt ongetwijfeld vervolgd, al is het maar met een aflevering over gebruikersinvoer en de database.

Challenges uit The Complete Web Developer Course

Web development uitdagingen
Voor ik aan mijn opleidingstraject tot web developer begon, heb ik eerst gekeken of het mij echt interesseerde en of ik er voldoende van begreep om het enigszins kansrijk te maken.

Ik ben namelijk nogal talig aangelegd, wiskunde is dan ook niet mijn sterkste kant. Die eerste kennismaking verliep aan de hand van de Udemy Course The Complete Web Developer Course van Rob Percival HTML & CSS. Design and build websites van Jon Duckett, HTML en CSS de basis van Andree Hollander, Handboek JavaScript & jQuery van Peter Kassenaar en wat CodeCademy. Toen mijn vorige baan teneinde liep was ik al begonnen, vandaar en het duurde even voor ik met mijn cursus kon beginnen.

Testen en nog eens testen

Omdat ik ervan doordrongen was dat mezelf testen voor mij een belangrijke voorwaarde is om succesvol te leren, heb ik zo veel mogelijk oefeningen gemaakt en heb daarnaast veel in Anki gezet (Anki is een programma waarmee je jezelf kunt overhoren volgens de principes van gespreid herhalen).  Veel van wat ik in Anki zette, formuleerde ik als kleine opdracht: maak een array met zeven huisdieren en geef er daarvan drie cursief weer. Doordat ik die opdrachten uitschrijf in Notepad++ en vervolgens in de browser open om te kijken of het daadwerkelijk werkt, maak ik me de eigenaardigheden van de code eerder eigen dan wanneer ik de oplossingen alleen voor me uit prevel. Dit alles wordt nog versterkt doordat ik Anki iedere avond gebruik. Ook met de opdrachten van mijn opleiding probeer ik dagelijks bezig te zijn.

Web Development uitdagingen

De afgelopen dagen ben ik bezig geweest de opdrachten die ik voor de Udemy cursus gemaakt heb, online te zetten op Web development uitdagingen, de site bij deze blogserie. Ik vond die cursus als inleiding behoorlijk interessant, zeker omdat je zowel kennismaakte met HTML/CSS als met JavaScript/jQuery en PHP/MySQL en Bootstap. Het is echter inleidend en mijn huidige opleiding graaft dieper.

Challenges

Maar omdat de Udemy cursus iedere module afsloot met een leuke programmeeropdracht, leek het mij aardig om die programmeeropdrachten op de site te zetten. Hier en daar heb ik er wat aanpassingen in aangebracht. Zo kreeg ik met mijn oorspronkelijke uitwerking van PHP opdracht een PHP foutmelding als ik mijn eigen woonplaats opzocht. Dat heb ik opgevangen door eerst te controleren of de url bestaat (i.e. geen 404 oplevert).

Voor het geheime dagboek dat de MySQL module vormde heb ik besloten om de md5 encryptie te vervangen door password_hash en password_verify. Dit omdat PHP.net het gebruik van md5 afraadt bij het opslaan van wachtwoorden.

Tot slot vond ik het spelen met JavaScript spelletje zo leuk, dat ik er zelf nog een versie voor 2 personen voor heb gemaakt.

Neem dus vooral een kijkje op Web development uitdagingen.

Volgende uitdaging:

Maak een contactformulier.

Waarom ik vertalen zo leuk vind

En waarom ik wat minder gemakkelijk blog

Deze post is eigenlijk een vorm van uitstelgedrag. Maar ik merk dat ik ondanks mijn goede voornemens en ontdekking van laatst nog niet zo heel heel lang geleden, nog niet heel veel verder ben met mijn bloggen. Niet getreurd, komt goed. Maar ik ben op dit moment weer druk bezig met vertalen. Ja, er is altijd wat te vertalen omdat slechts rond de 100 van de ruim 160 boeken van Captain Johns in het Nederlands zijn verschenen.

Iedere keer vind ik het weer geweldig leuk en slokt het me qua vrije tijd volledig op. Het past helemaal bij me. Met taal bezig zijn. Je dienstbaar opstellen (hoop ik), aan toekomstige lezers en aan de auteur. En met dat laatste stip ik een cruciaal verschil aan met bloggen. Mijn blogs mag ik helemaal zelf schrijven, al heb ik regelmatig, zoals vandaag, wat hulp wat hulp bij het onderwerp, maar toch.

Bij vertalen echter ligt er al veel meer vast. Een boek of in ieder geval een tekst van de auteur of van je medevertaler(s). Ik hoef ‘alleen maar’ te vertalen of na te lezen en te corrigeren. En dat vind ik wel zo prettig. Het vanuit het Engels zoeken naar een zo goed mogelijke weergave in het Nederlands: heerlijk. Blijven slijpen, nadenken, herlezen, overleggen, opzoeken, corrigeren, tot aan drukproefcorrecties, die door het werken vanaf papier vaak meer correcties opleveren dan voorzien. Ja, als ik met al die dingen bezig ben dan voel ik mij soms bijna de koning te rijk dat er nog zo’n mooie stapel boeken van Captain Johns te vertalen valt.

En natuurlijk blijf ik bloggen, ook dat vind ik veel te leuk.

~ ~ ~ ~

#SG16 Iedere dinsdag geeft een Carel een woord op uit spreekwoorden en gezegden waar je dan over kunt bloggen.