Askmike.org

Ik heb voor het vak ServerSide Scripting (SSS) een visitekaartjes generator gemaakt. Dit was de eerste maakopdracht voor het vak PHP, Justus heeft al meerdere malen gehamerd op het feit dat je altijd alle user input moet verifiëren voordat je dit kan verwerken.

Zelf vind ik het belangrijk om presentatie zoveel mogelijk te scheiden van functie, hier is een functie die ik in mijn visitekaartjes generator gebruik om te zorgen dat alle POST input beveiligd is, maar er in mijn HTML code geen tig verwijzingen staan naar opschoon functie’s (zoals de HTML_transform van Justus).

function getPostInput($input) {
    //loop whole input array
    for($i = 0, $size = sizeof($input); $i < $size; ++$i)
    {
    //map input pairs items to (safe) POST array pairs and 
    //store them in output array
        $output[$input[$i]] = transformHTML($POST[$input[$i]]);
    }
    return $output;
}

Je gebruikt de functie als volgt:

$safePost = getPostInput( array('naam','beroep') );
echo $safePost['naam'];

Je gebruikt hem (nadat je een array met alles wat je nodig hebt erin hebt gestopt) hetzelfde als je normaal $_POST zou gebruiken.

Nu doet de functie nog niet zo heel veel, je voert hem een Array van POST items die je wil gaan gebruiken en je krijgt een array terug met alle items door de HTML_transform gegooid. Dit opzich lijkt heel weinig maar als je met grote formulieren werkt wil je dit liever centraal op een punt houden (zoals Justus al zei: Single Point of Entry).

Ook maakt deze functie het heel makkelijk om bijvoorbeeld alle waarden die je gelijk wil gebruiken ook in een database te stoppen, als je dit aan de functie toe voegt (in de for loop) wordt alles verder automagisch voor je geregeld.

Ik doe ook wat dingetjes met jQuery en CSS3 (roteren tekst), alle code kan je op mijn github vinden.

Vorig jaar heb ik een project gerealiseerd waarmee gebruikers gebeurtenissen aan geolocatie’s konden koppelen (zie hier het demo filmpje). De kracht van het concept lag in de mogelijkheid voor gebruikers om zelf gebeurtenissen toe te voegen. Helaas had dat zo zijn gevolgen zoals je hieronder kan zien.

Ik heb alle spam verwijderd en het is nu niet meer mogelijk om iets toe te voegen aan het project. May she rest in peace in the eternal memory of the internet.

Dit is een oud artikel die mij erg geholpen heeft, ik liep namelijk mijn stage bij The Next Web. En ja dat is echt heel vet.

Ik hoor vaak studenten om me heen die zich willen profileren in frontend webdevelopment. In de V1 merk ik af en toe dat jaargenoten interesse hebben in frontend en een stage zouden willen richting dit vakgebied. Voor die studenten deze post met wat tips om jezelf te ontwikkelen in dit vakgebied.

Stap 1: begrijp de basis

Binnen de studie CMDA worden een hoop vakken aangeboden die heel handig als je die kant op wil. Zorg dat je ze beheerst: push jezelf in deze vakken in plaats van je alleen aan de basiscriterea te houden. Zorg dat je alle behandelde stof begrijpt door hier vragen over te stellen. Lees de (verplichte en niet verplichte) literatuur bij het vak.

Stap 2: Verdiep je in een expertise

Binnen het vak gebied kan je een aantal kanten op, als jij ervoor kan zorgen dat je een richting goed kan heb je iets te bieden bij stagebedrijven. Profileer je bijvoorbeeld in HTML, CSS, Javascript, de DOM, webGL, browsers of HTML5 (en CSS3). Verdiep je in dit onderwerp, snap het en lees erover. Zorg dat jij degene bent naar wie mensen toekomen als ze jouw expertise niet begrijpen.

Stap 3: Maak, maak, maak

De beste manier om frontend te leren is door het veel te doen. Maak websites in het kwadraat. Begin bijvoorbeeld bij een Portfolio (van je eigen CMS tot een WordPress thema tweaken tot een tumblr blog) en verzin nieuwe doelen voor websites: hou een blog bij van iets (anders) wat je interessant vindt, verzin projectjes, zoek klanten die je betalen om websites te maken.

Stap 4: Stay up to date

In onze wereld gaan de ontwikkelingen hard, HTML5 staat al een tijdje aan onze deur te bonken of er is wel weer een nieuwe versie van ECMAscript uit (Javascript) en Adobe tekent de doodvonnis van Flash. Twitter is een goed medium om te zorgen dat je af en toe wat ontwikkelingen mee pikt (als je al op twitter zit, ga eens op zoek naar webdevelopers die je interessant lijken). Onlangs heeft Paul Irish (een guru in het vakgebied) een lijst met meer dan 250 RSS feeds van blogs die zich bezig houden met het vakgebied gepubliceerd.

Stap 5: Share your code

Vind je het niet zo erg dat anderen je code zien? Gooi het op github! Dit helpt niet alleen anderen maar dit biedt ook mogelijkheden om samen te werken met andere coders en je eigen skills te verbeteren. Ook kan je snel aan anderen laten zien wat je hebt gemaakt.

In mijn vorige post heb ik de basis van het SSS vak behandeld, hoewel arrays een stapje moeilijker zijn behoren ze nog steeds tot de basis.

Justus heeft het hier in de hoorcolleges al over gehad maar het is voor nog steeds niet iedereen duidelijk. Een array is een variabele waar je andere waarden in kan stoppen.

Je kan zo’n array zelf maken op een aantal verschillende manieren (zoals Justus heeft uitgelegd in zijn hoorcollege) daarnaast worden er onder water al een paar arrays aangemaakt door PHP zelf. De belangrijkste hiervan zijn $_GET en $_POST, de inhoud van deze arrays gebruik je om gegevens te verwerken die met het script zijn meegestuurd.

Denk bijvoorbeeld aan een HTML formulier, zodra iemand dit formulier verstuurd heeft moet jij met de ingevulde gegevens aan de slag in je PHP script. Zo’n HTML formulier kent velden gemarkeerd met termen als naam, e-mail, telefoonnummer, bericht, etc. In de HTML code van je formulier geef je deze velden ook een code mee: de name attribuut.

Zodra dit formulier verzonden wordt krijgt het script dat het moet verwerken een array mee, afhankelijk hoe het formulier verstuurd is is dat $_GET of $_POST. Deze arrays zijn allebei literal (tekst) indexed arrays, zoals Justus ons verteld heeft kan je zo’n array op de volgende manier uitlezen.

echo $array['waarde'];

Dit gaat bij GET en POST arrays op dezelfde manier, en daar is key (hetgeen wat je tussen [”] zet) de name attribuut van het HTML formulier.

GET en POST zijn dus manieren om data van een browser / client naar je PHP script te sturen.

De functie isset(); controleert of een bepaalde variabele geset is of niet (ergens op uitkomt).

if ( !isset($_POST['mail']) ) { }

Deze if statement controleert of iemand bij een formulier het veld heeft ingevuld met de name ‘mail’. Uit de if komt het omgekeerde (if it is not set) door het uitroepteken (een logische not).

In deze post zal ik de basis van PHP behandelen die je nodig hebt om het vak Server Side Scripting (V1 CMDA) te begrijpen.

PHP Zoals de naam van het vak suggereert is PHP een server-side taal, dit betekent dat alle PHP code normaliter nooit te zien is in een browser (op een client). Daar staat tegenover dat PHP ook niks te maken heeft met HTML code, PHP gaat hier hetzelfde mee om als met gewone tekst:

Als je met HTML bezig bent dan zorg je er bijvoorbeeld voor dat je elementen netjes nest, oftewel dit probeert te voorkomen:

<h2><span>Hello</h2></span>

Met al deze HTML dingen heb je in PHP niks te maken. De onderstaande code heeft dezelfde ‘foute’ HTML code in zich maar is goede PHP, het kan de server namelijk niks schelen hoe de HTML er wel of niet uitziet (of het wel uberhaupt HTML is).

echo '<h2><span>Hello</h2></span>';

In dit geval is de ‘foute’ HTML code de output van het PHP script, echter hoeft een script niet altijd een output te hebben. Denk bijvoorbeeld aan een PHP script die mail verstuurd of iets update in een database, die scripts hebben wel een gevolg maar dit is geen directe output.

Functies in PHP Zoals je misschien nog kan herinneren van AS3 kan je functies gebruiken om je code te ordenen en om stukken code te kunnen hergebruiken. In PHP heb je ook het voordeel dat je een functie uit een bestand (zodra je die overal include) in al je andere bestanden kan gebruiken.

In PHP ziet een functie er zo uit:

function doeIets() {
    //code
}

Je moet sowieso begrijpen dat een functie uit zichzelf niks doet, daarvoor moet hij aangeroepen worden:

doeIets();

Als je dus een functie hebt waar tekst (of html) met het echo commando wordt uitgevoerd en de functie wordt nergens aangeroepen dan wordt is die tekst ook nooit output.

code

function echoName() {
    echo '<p>mike</p>';
}

function echoAge() {
    echo '<p>20</p>';
}

Output

<p>20</p>
<p>mike</p>

De output bevat dus ook alle HTML tags (ook al zie je die niet standaard in je browser). Zie dat de de volgorde van de output afhankelijk is van de volgorde van het aanroepen functies en niet van de volgorde waarop de functies in je code staan.

Functies met argumenten in PHP Functies zijn tot nu toe dus eigenlijk altijd hetzelfde, maar wat als je een functie wilt die iets doet met een variabele of afhankelijk van iets dan kan je met argumenten werken.

Hoe ziet dit eruit?

function echoVar($var) {
    echo $var;
}
$naam = 'mike';
echoVar($naam);

De functie echoVar schreeuwt (echo’d) alles uit wat je hem meegeeft. Oftewel de functie kan opzich pas iets doen zodra je hem zijn ingrediënten meegeeft (In een oude AS3 tutorial leg ik meer uit over de gedachtegang achter argumenten).

Let op dat je de functie niet perse een variabele hoeft te voeren, je kan hem ook op deze manier uitvoeren:

echoVar('mike');

Binnenin de functie wordt ‘mike’ omgezet in de variabele $var.