Mijn vrijwilligerswerk.

Het is af en toe even schrikken, als je de foto’s ziet, maar ik werk als vrijwilliger voor een organisatie die een fotowedstrijd speciaal voor holebi’s (*) organiseert.
Niet dat ik verstand heb van fotografie 🙂
Ze zochten een programmeur, want de software voor het uploaden van foto’s was een beetje een puinhoop.
Die was speciaal voor de wedstrijd geschreven, maar het was nooit afgemaakt of zo.
Ik zou wat knopjes toevoegen waar gebruikers om gevraagd hadden. ‘En we gebruiken een 2 letterige code voor elke deelnemer. Kun je daar 3 letters van maken, want we hadden vorige keer al 500 deelnemers.’
Toen ik er eens goed naar keek, dacht ik : “huh ?’
‘Of ik begrijp niks van programmeren, of dit is echt raar’
Ik kopieerde alles naar mijn eigen PC. ‘Anders blijf ik uploaden’.
‘Vreemd, hij doet het niet’
De PHP-versie op de server was wat ouder dan wat ik gebruik, dus ik kon een toekomstige show-stopper nog net op tijd voorspellen.
“mysql_connect” werkt niet meer als de hoster overgaat naar PHP 5.5.
Paniek.
‘O, de url is overal hard gecodeerd, dus ik zit nog te testen tegen de live server’
‘Vreemd, als ik de 3-lettercode genereer uit de userid, heb ik dit toch allemaal niet nodig ???’
Het plan was om samen te werken met iemand die een drukke baan had en we zouden alles heel voorzichtig doen en van tevoren overal toestemming voor vragen.
Dus ik wachtte tot mijn voorganger klaar was met zijn testen en aanpassingen.
Maar dat duurde tot de datum van de opening, dus ik mocht daarna niets meer doen.
En hoe vlekkeloos het in test ook werkte, toen er eenmaal echte gebruikers kwamen regende het klachten.
En toen ik die klachten ging onderzoeken, snapte ik de oorzaak ook wel :
Het is een web-applicatie, helemaal vanaf scratch geschreven.
De clientcode is javascript, HTML en CSS, de serverkant PHP en MySQL.
Hadden ze maar een framework gebruikt, dan had de globale opzet in ieder geval gedeugd.
Wat er nu gemaakt was, was een webapplicatie waarbij de client de V en de C in het MVC model vervulde.
De M was natuurlijk de database met een schil van PHP-code eromheen.
Wat er mis ging, was dat verschillende gebruikers langer dan 25 minuten ingelogd bleven, waarna de server de sessievariabele weggooide.
Gingen ze dan een foto uploaden, dan vulde de software verschillende variabelen met blanks. De client kreeg geen antwoord, zodat het scherm van de gebruiker bevroor.
De bug zat er al jaren in.
Alles hadden ze geprobeerd. Extra controles in de client, timers, invoer uitschakelen tijdens de upload, etc.
Ik heb dus in de PHP-code eerst een controle ingebouwd of die sessie-variabele er nog wel was.
Er bleek wel een soort “keep-alive” constructie te zijn gemaakt.
Maar door iemand die dacht dat “echo count(10);” in PHP iets nuttigs zou doen.
Een ander probleem was, dat de errorlog vol liep.
Het leek me wel een goed idee om voortaan eerst te testen of een variabele wel bestaat, voordat je de inhoud gebruikt.
Tot dat moment had er kennelijk nooit iemand in de errorlog gekeken.

Ik heb bij verschillende grote bedrijven gewerkt. Ik snap change-procedures.
Maar kom op, het is maar een foto-wedstrijd voor amateurs.
Omdat het onwerkbaar was, heb ik op een nacht het “sessie” probleem opgelost door wat nieuwe code te uploaden naar de server.
De projectleider kreeg bijna een beroerte en eiste dat ik alles terugdraaide, maar ik kon hem ervan overtuigen dat buggy code terugzetten het probleem ook niet ging oplossen.
Vanaf dat moment waren de grootste problemen opgelost.

Er was nog wel een andere bug :
Je kon series foto’s uploaden, en daarvan kon je de volgorde manipuleren. Je kon ook een foto verwijderen uit een serie.
Op het scherm zag het er fantastisch uit, maar de manier waarop het gebouwd was, was een ramp.
De code probeerde bij elke mutatie op de client de server te synchroniseren.
Dus als je foto a verplaatste naar het einde van de serie, dan moesten er 10 renames plaatsvinden op de server.
Niet zo handig om dat met 10 Ajax requests te doen.
Natuurlijk kwam er dan een keer halverwege de renames een kink in de kabel, en dan zat je verbaasd naar al die tijdelijke files op de server te kijken.
De oplossing was natuurlijk om de hele actie in één Ajax request te verpakken, maar of de oorspronkelijke maker nu zijn code nog herkent ?

En dan was er nog het probleem van de teksten die de gebruikers konden invoeren. Die kwamen in een veldje in de database terecht. De eerste versie van de software bevatte kennelijk geen bescherming tegen cross-site scripting. Eerst was geprobeerd dat probleem ook aan de client-zijde op te lossen. Met een rigoureus filter. Een stuk javascript-code dat ergens opgedoken was. Afgezien van het feit dat je de client nooit kan vertrouwen, zat er een bug in dat filter. Als een gebruiker een lange tekst m.b.v. knippen en plakken in het vakje prakte, verslikte het filter zich en verdween de hele tekst.
Kennelijk had de maker zich gerealiseerd dat de applicatie nog niet veilig was, dus aan de server-zijde zat een nog rigoureuzer filter. Alleen cijfers en letters, punten en comma’s.
Dus zelfs een aanhalingsteken of een vraagteken werden uit de tekst gegooid.
PHP heeft een standaard filter : strip_tags().
Ik vind het veilig genoeg, dus alle zelfgemaakte er uit gegooid.

Nog een rare bug :
In de database-code werd het script beeindigd als een query geen resultaat opleverde.
Dat hoort daar niet. Sommige later toegevoegde functionaliteit werkte daardoor niet, zonder dat iemand snapte waarom.

Toen nog iets kleins : de foto’s mochten maximaal 10MB jpg zijn. Veel fotografen stuurden iets anders, of groter. En stuurden dan een mailtje, omdat ze hun werk niet zagen.
En veel gebruikers wilden toch wel graag een “finish” knopje.
Een melding op het scherm, hoe moeilijk kan het zijn, dacht ik.
Toen kwamen er nog meer lijken uit de kast rollen.
Een file waarvan de upload mislukt is heeft geen filetype, dus het heeft niet veel zin om die als eerste te testen.
Je kan een file wel “mijnpostzegel.jpg” noemen, maar het kan iets heel anders zijn. Probeer een tekstfile maar eens te verkleinen tot een thumbnail.
Het systeem maakte al gebruik van jquery-UI, dus ik dacht dat te gebruiken voor een melding op het scherm.
Oeps : wel javascript, maar geen stylesheet en geen images ???

OK, alles werkt nu. Zelfs het “help” knopje. Ik zie geen vragen van gebruikers meer, er zijn inmiddels 2600 foto’s ge-upload.

(*) holebi is Vlaams voor LBGT ( lesbian, bisexual, gay, transgender )