Random-Recept was het eerste project dat ik ooit heb gebouwd met de bedoeling het online te zetten en hopelijk uit te laten groeien tot iets succesvols. Ik begon eraan te werken in mijn eerste jaar van mijn opleiding software engineering, omdat ik het als een geweldige manier zag om te leren. En daar kreeg ik gelijk in, al was het op een andere manier dan ik had verwacht.
De website maakten ik met PHP, HTML en CSS, samen met een mySQL-database. Op dat moment had ik nog niet geleerd hoe JavaScript werkte en vond ik het ook allemaal er nog erg ingewikkeld en alien eruit zien daarbij het curriculum op school was tot nu toe alleen HTML/CSS/PHP en Python geweest. Ik wist ook nog niet van het bestaan van frameworks zoals Laravel of vergelijkbare toepassingen die het ontwikkelen een stuk makkelijker hadden kunnen maken.
Ondanks de beperkingen realiseerde ik me al snel dat ik graag met CSS werkte en besteedde ik hier dan ook een groot deel van mijn tijd aan, het was vaak heel veel proberen tot dat het werkte of het kwartje viel hoe het werkt. Langzaam maar zeker begon de website vorm te krijgen en begon ik trots te worden op wat ik aan het creëren was. Alles van het logo tot de lay-out en animaties waren zelf gemaakt en bedacht.
Hoewel SQL niet mijn favoriete onderdeel was en nog steeds niet is, slaagde ik er toch in om het op zo’n manier te gebruiken dat de website veranderde van iets statisch naar iets dat dynamische informatie kon bieden.
Maar wat deed de website
Het was een simpel concept dat in de loop der tijd veranderde. De belangrijkste call-to-action op de website was een knop waarmee gebruikers konden zoeken naar een willekeurig recept, waardoor de gebruikers niet hoefden te beslissen wat ze wilden eten. In het begin werden alle recepten met de hand toegevoegd, ofwel recepten die ik zelf had bereid of door recepten die ik van andere websites had gekopieerd. (Achteraf gezien was dit geen goed idee)
In een latere revisie voegde ik een volledig zelfgebouwd accountsysteem toe. Gebruikers konden zich registreren, recepten uploaden en analytics bekijken die lieten zien hoeveel mensen een recept hadden bekeken, erop hadden gereageerd of het hadden geliked.
Beveiliging
Het toevoegen van al deze functies bracht ook hun eigen risico met zich mee, dit dwong me om veel te leren over webbeveiliging. Ik leerde over prepared statements, waarom het hashen en salten van wachtwoorden belangrijk is en implementeerde dit zelf op een basis manier. Hoewel deze aanpak een beetje verouderd is, heeft het me wel veel kennis opgeleverd die ik niet zou hebben gehad als ik een framework had gebruikt waar alles was geabstraheerd.
/* Ik raad aan om deze code niet te gebruiken, aangezien deze verouderd en niet meer veilig is. */
function createAccount($username, $email, $password) {
$link = connect();
if (gettype($link) == 'string')
return null;
$salt = str_shuffle(hash('sha256', str_shuffle(microtime())));
$activecode = md5(rand(0,1000));
activeCode($email, $activecode, $username);
$password = password_hash($password . $salt, PASSWORD_DEFAULT);
$stmt = $link->prepare("INSERT INTO `account` (`username`, `email`, `hash`, `salt`, `activecode`) VALUES (?, ?, ?, ?, ?)");
if (!$stmt)
die("Prepare failed: (" . $link->errno . ") " . $link->error);
$stmt->bind_param('sssss', $username, $email, $password, $salt, $activecode);
$stmt->execute();
$result = $stmt->get_result();
if (gettype($result) != 'object')
return null;
return true;
}
Laten we eens wat dieper ingaan op het bovenstaande codeblok waarin gebruikersaccounts worden aangemaakt. Zoals je kunt zien, heb ik een salt gegenereerd voor het wachtwoord en een willekeurige activeringscode aangemaakt, die vervolgens naar het email van de gebruiker wordt gestuurd. Ik heb ook het wachtwoord gehasht samen met de salt en alles in de database ingevoegd met behulp van prepared statements. Houd er rekening mee dat er geen foutafhandeling of logging was geïmplementeerd om potentiële problemen aan te pakken.
Op een bepaald moment had ik ook een beveiligingsincident. Bij het analyseren van mijn analytics zag ik verkeer van een domein dat niet van mij was, hierdoor kon die website dus alles afluisteren wat gebruikers op zijn domein zouden invullen en dat willen we natuurlijk niet. Dit was gelukkig snel opgelost door beveiligings headers toe te voegen, die ik daarvoor nog niet had. Na het implementeren van deze headers en het toevoegen van meer beveiligingsinstellingen aan mijn ``.htaccess` bestand, stopte de website van de aanvaller met functioneren en keerde alles terug naar normaal.
Conclusie
Al met al ben ik nog steeds trots op de website die ik heb gebouwd met de weinige kennis die ik destijds had. Ik zou niet zeggen dat de code goed of netjes is, maar ik was wel in staat om iets vanaf nul te bouwen en het aan het online te zetten. Helaas heeft het verhaal geen happy end. Weet je nog dat ik zei dat ik recepten van andere websites had gekopieerd? Nou, die websites waren daar niet blij mee en zagen het als diefstal van hun intellectueel eigendom. Ik kreeg een paar behoorlijk emails van hen en besloot uiteindelijk om al hun recepten van mijn site te verwijderen. Dit betekende helaas wel het einde van mij enthousiasme en ik verloor de motivatie om aan de site te blijven werken, dit terwijl ik net meer en meer bezoekers begon te krijgen. Maar ze hadden gelijk en ik leerde een waardevolle les over intellectueel eigendom en auteursrecht.
Misschien breng ik de website ooit in de toekomst terug online voor de nostalgie, en kan ik een deep dive doen in de code om de goede en slechte punten te bekijken. Maar voorlopig kun je de homepage bekijken via de Wayback Machine. Random-Recept was dan wel niet een groot success, maar het heeft me wel veel gebracht waar ik tot de dag vandaag als software engineer plezier van heb.
Bekijk de website
https://web.archive.org/web/20171001063716/https://random-recept.nielsvanbrakel.nl/