Weblog van Gerrit Veldman - Webdesign

Adder onder het gras bij de PHP-functie strpos()

nospam@example.com (Gerrit Veldman) — Wed, 23 Sep 2009 12:00:00 +0200

Er zijn verschillende methoden om in PHP te controleren of een bepaald teken voorkomt in een string. De meeste logische is via preg_match(), maar dat is meteen ook een heel zware en (als je niet zoveel ervaring hebt met reguliere expressies) ook een lastige. Veel gemakkelijker is strpos(). Er zit daarbij echter wel een flinke adder onder het gras. Deze functie is namelijk niet bedoelt om te achterhalen óf een teken voorkomt, waar wáár hij voorkomt. De volgende code kan daarom tot problemen leiden:
if (strpos($string,'a')) {
//
}
Zolang de 'a' niet het eerste teken in de string is, is er geen probleem. Maar stel dat de string begint met een 'a'. Wat levert strpos() dan op? '0' (nul). En dus wordt er niet aan de conditie voldaan terwijl de 'a' wel voorkomt. En dat is natuurlijk niet de bedoeling.

Oplossing:

if (strpos($string,'a') !== false) {
//
}
Nu wordt er wel aan de conditie voldaan als de string begint met een 'a'.

Dit illustreert maar weer eens hoe belangrijk het is om altijd goed na te denken of je bij een controle verschil moet maken tussen een nul, een lege string en false. Vaak hoeft dat niet. Soms wel.

MySqli en sessies opslaan in database

nospam@example.com (Gerrit Veldman) — Sat, 12 Sep 2009 09:56:53 +0200

Voor Family Tree PHP stapte ik een tijd geleden over van de MySql-extensie naar de MySqli-extensie van PHP. Eén van de problemen die ik daarbij tegenkwam, was dat de sessies opeens niet meer werden opgeslagen. Het duurde even voor ik door had waar dat aan lag. Al eerder had ik de manier waarop PHP standaard sessies opslaat zodanig aangepast, dat de sessies nu in de database werden opgeslagen. Met de MySql-extensie werkte dat zonder problemen, maar bij de MySqli-extensie ging dat in eerste instantie fout.

Nu gebruikte ik de object-georiënteerde versie van MySqli. Daardoor functioneerde MySqli als een class en daar bleek uiteindelijk het probleem te zitten. De class werd door PHP afgesloten voordat PHP probeerde om de sessie op te slaan. Het gevolg was dat toen de sessie opgeslagen moest worden, de databaseverbinding al gesloten was en de sessie dus niet meer kon worden opgeslagen.

De oplossing was om zelf aan het einde van het script expliciet aan te geven dat PHP de sessie moet opslaan, zodat dit gebeurt voordat de databaseverbinding wordt gesloten. Hiervoor is de functie session_write_close();

Maar nu ontstond er een nieuw probleem. Her en der in het script gebruikte ik exit() of die() om de werking voortijdig te stoppen. In die al gevallen moest ik nu ook handmatig de sessie laten opslaan, omdat anders het oude probleem bleef bestaan.

Daarvoor maakte ik mijn eigen functie stop():

function stop($message = '') {

	session_write_close();

	exit($message);

}

Door nu

exit("bericht");
te vervangen door

stop("bericht");
werkte alles weer naar behoren.

NIEUW: Family Tree PHP

nospam@example.com (Gerrit Veldman) — Sat, 21 Mar 2009 12:00:00 +0100

Sinds vorige week gebruik ik op mijn website een nieuw pakket voor mijn genealogische database. Dit pakket heb ik zelf ontwikkeld en vanaf nu is het ook beschikbaar voor anderen onder de naam Family Tree PHP. Family Tree PHP gebruikt de scripttaal php om gedcom-bestanden te importeren in een MySql-database. Elke keer als een bezoeker een pagina opvraagt, wordt deze dynamische aangemaakt vanuit de database. Als je je website wilt bijwerken, hoef je alleen maar een nieuw gedcom-bestand te importeren.

Natuurlijk bestaan er al een aantal andere php-scripts die ongeveer hetzelfde doen. Waarom dan dit nieuwe script? Nou, in de eerste plaats omdat ik het erg leuk vond om het te ontwikkelen. In de tweede plaats omdat ik mijn programmeervaardigheden wilde verbeteren. En in de derde plaats omdat ik niet tevreden was met de bestaande scripts. Ze hebben veel mogelijkheden, maar ik wilde een script dat precies deed wat ik wilde.

Ik heb me geconcentreerd op drie punten waarop ik wilde dat dat pakket zich zou onderscheiden:

ik wilde dat het volledig aanpasbaar zou zijn aan de wensen van de gebruiker (dus wilde ik een uitgebreid template-systeem),
ik wilde dat het heel gemakkelijk te gebruiken zou zijn (zowel voor website-eigenaren als voor bezoekers),
ik wilde dat de gebruikers absolute controle zouden hebben over welke gegevens te zien zouden zijn voor welke gebruikers.

U kunt het script downloaden op de website van Family Tree PHP. Daar kunt u ook een lijst met alle mogelijkheden vinden. Nieuwe mogelijkheden zullen in de nabije toekomst worden toegevoegd, want de ontwikkeling gaat gewoon door.

Zoekmachine-optimalisatie: een globaal overzicht

nospam@example.com (Gerrit Veldman) — Thu, 06 Nov 2008 12:00:00 +0100

Welke factoren bepalen hoe hoog een website scoort in de zoekresultaten van Google en andere zoekmachines? Hoe kun je die factoren beïnvloeden? Hier volgt een globaal overzicht:

Een webpagina moet doorzoekbaar zijn voor robots
- Gebruik geldige html of xhtml
- Alle pagina's moeten te bereiken zijn via gewone html of xhtml, dus zonder javascript en flash oid.
- Gebruik een sitemap
- Gebruik zoekmachine-vriendelijke url's (dus zonder ? en & tekens)
Een webpagina moet relevant zijn
- Relevante zoekwoorden moeten voorkomen in de tekst van de webpagina (maar niet overdrijven)
- Relevante zoekwoorden moeten voorkomen tussen de title-tags, h1-, h2-, h3- en andere kop-tags, tussen strong- en em-tags (of b- en i-tags) en tussen a-tags (dus geen links waarbij je moet klikken op 'klik hier').
- Relevante zoekwoorden moeten voorkomen in alt- en title-attributen van bv. a- en img-tags
- Relevante zoekwoorden moeten voorkomen in meta-tags
- Er moet voldoende tekst op de pagina staan (hoe meer hoe beter)
- Hoe meer unieke pagina's een website heeft, hoe beter
Een webpagina moet actueel zijn
- De inhoud moet regelmatig worden aangepast
- Gebruik een RSS-feed
Een webpagina moet uniek zijn
- De inhoud van de webpagina of belangrijke delen daarvan mogen niet voorkomen op webpagina's met een andere url (dus geen duplicate content).
- De title- en relevante meta-tags van elke pagina moeten uniek zijn
Een webpagina moet een goede reputatie hebben
- Hoe meer links op andere websites, hoe beter (vooral op websites die zelf op relevante zoekwoorden goed scoren in de zoekresultaten)
- Hoe langer een website bestaat, hoe beter hij scoort

Domein-aliassen en duplicate content

nospam@example.com (Gerrit Veldman) — Thu, 30 Oct 2008 12:00:00 +0100

Veel websites zijn onder meerdere domeinnamen te bereiken. Bijvoorbeeld via domeinnaam.nl, domeinnaam.com en domeinnaam.eu. Het gevolg is dat er eigenlijk meerdere websites bestaan met exact dezelfde inhoud. Google en andere zoekmachines waarderen zulke websites lager vanwege duplicate content. Deze websites scoren daardoor slechter in de zoekresultaten. Hoe voorkom je dat? De beste oplossing is om 1 domeinnaam te kiezen en bezoekers van de andere domeinnaam via een redirect door te sluizen naar de gekozen domeinnaam. Maar hoe doe je dat als al die domeinnamen gekoppeld zijn aan hetzelfde hostingaccount? Dat kan op twee manieren. En passant meteen ook een oplossing voor het verschijnsel dat zoekmachines ook www.domeinnaam.nl en domeinnaam.nl als twee verschillende sites beschouwen.

Via een .htaccess-bestand

Open het bestand .htaccess dat in de rootmap van de website staat. Staat er nog geen bestand .htaccess open dan een nieuw bestand in bv. Windows Kladblok, sla het op als .htaccess en plaats het in de rootmap van de website. Zet in dit bestand de volgende code:

Options +FollowSymLinks

RewriteEngine On

RewriteCond %{HTTP_HOST} domeinnaam.com [nc]

RewriteRule (.*) http://www.domeinnaam.nl/$1 [R=301,L]

RewriteCond %{HTTP_HOST} domeinnaam.eu [nc]

RewriteRule (.*) http://www.domeinnaam.nl/$1 [R=301,L]

RewriteCond %{HTTP_HOST} ^domeinnaam.nl [nc]

RewriteRule (.*) http://www.domeinnaam.nl/$1 [R=301,L]

Via PHP

Plaats bovenin het PHP-script de volgende code:

if (strstr($_SERVER['HTTP_HOST'],"domeinnaam.com") || strstr($_SERVER['HTTP_HOST'],"domeinnaam.eu") || !strstr($_SERVER['HTTP_HOST'],"www.")) {

	header("HTTP/1.1 301 Moved Permanently"); 

	header("Location: http://www.domeinnaam.nl".$_SERVER['REQUEST_URI']);

	exit;

}

Problemen met UTF-8 en de BOM: een extra witregel

nospam@example.com (Gerrit Veldman) — Wed, 22 Oct 2008 12:00:00 +0200

Een tijdje geleden had ik bij één van mijn websites een probleem. In een aantal browsers (waaronder Internet Explorer én Firefox) werd er een extra witregel toegevoegd bovenaan de pagina. Na lang zoeken bleek dit veroorzaakt te zijn door een zogenaamde BOM. Een BOM (Byte Order Mark) is een code die in vrijwel alle tekstverwerkers (ook in Windows Kladblok) wordt toegevoegd aan een bestand in UTF-8 codering. Deze code leidt bij webpagina's gemakkelijk tot problemen. Een bekend probleem is in PHP. Als je HTTP-headerinformatie wilt versturen naar de browser moet dat gebeuren vóór de gewone pagina-uitvoer. Is het PHP-bestand in UTF-8 en bevat het een BOM, dan wordt die als eerste verstuurd en mislukt het verzenden van de headerinformatie. Over dat probleem is veel op internet te vinden en als oplossing had ik bedacht dat ik alle uitvoer met een include invoegde in het basisbestand. Het basisbestand stond niet in UTF-8, het include-bestand wel. De BOM werd dan pas verzonden ná de headerinformatie.

Maar over het probleem van de witregel kon ik weinig vinden. Pas na lang zoeken ontdekte ik dus dat ook dit veroorzaakt werd door de BOM. De oplossing: de BOM verwijderen. Kan dat dan? dacht ik. Ja dus. Maar niet in alle tekstverwerkers. Windows Kladblok bijvoorbeeld kan het niet. Uiteindelijk kwam ik uit bij het opensource-programma Notepad++. Dat programma biedt de mogelijkheid om bij UTF-8 te kiezen uit opslaan met en opslaan zonder BOM.

Nieuwe site gemaakt voor Minne Veldman

nospam@example.com (Gerrit Veldman) — Fri, 17 Oct 2008 12:00:00 +0200

De afgelopen tijd heb ik een nieuwe website gemaakt voor mijn broer, de musicus Minne Veldman. De techniek achter de website is gelijk gebleven, maar de layout is nieuw.

CSS: browser probleem met achtergrondafbeelding in een tabelrij

nospam@example.com (Gerrit Veldman) — Tue, 12 Aug 2008 12:00:00 +0200

Laatst probeerde ik bij een tabel de rijen om en om een aparte achtergrond te geven. De ene rij wit, de volgende rij een afbeelding. Als afbeelding gebruikte ik een gradiënt. Dit bleek echter alleen te werken in Firefox en Safari. Internet Explorer en Opera gaven niet de rij, maar elke cel in de rij apart de afbeelding als achtergrond. Het gevolg was dat de gradiënt niet meer doorliep, maar in elke kolom steeds opnieuw begon. Uiteindelijk bedacht ik een oplossing. De oorspronkelijke opzet was:

table { background: #fff; }

tr.alt { background: url(gradient.jpg); }

En dan als HTML:

<table>

<tr class="alt"><td></td><td></td></tr>

<tr><td></td><td></td></tr>

<tr class="alt"><td></td><td></td></tr>

<tr><td></td><td></td></tr>

</table>

Op die manier kreeg de tabel als geheel een witte achtergrond. En om en om kreeg één rij de gradiënt als achtergrond. Dit draaide ik echter om. De gradënt werd de achtergrond van de hele tabel. En om en om kreeg één rij een witte achtergrond.

table { background: url(gradient.jpg); }

tr.alt table { background: #fff; }

HTML:

<table>

<tr><td></td><td></td></tr>

<tr class="alt"><td></td><td></td></tr>

<tr><td></td><td></td></tr>

<tr class="alt"><td></td><td></td></tr>

</table>

Zo werkte het in alle browsers. Maar dit werkte natuurlijk alleen omdat ik één rij een egale kleur gaf. Wanneer ook die rij een gradiënt moest hebben, maar dan van een andere kleur, zou ik geen oplossing geweten hebben. Zo zie je maar weer dat niet alle browsers zich aan de standaard houden. En dat Internet Explorer bij degenen hoort die het fout doen, is natuurlijk geen verrassing...

Favicon weergeven op een webpagina via PHP

nospam@example.com (Gerrit Veldman) — Thu, 10 Jul 2008 12:00:00 +0200

Steeds meer websites gebruiken favicons van externe websites en geven die weer bij links naar die websites. Hoe werkt dat? Een handleiding. Om te beginnen moeten we het favicon van de andere website ophalen en converteren in een ander afbeeldingsbestandsformaat. De meeste browsers kunnen bestanden van het formaat .ico namelijk niet in een internetpagina weergeven. We moeten daarvoor de volgende stappen doorlopen:

1. Het favicon ophalen en op de eigen server zetten in een tijdelijk bestand.
2. Het tijdelijke bestand converteren naar bv. een .png bestand.
3. Het tijdelijke bestand weer verwijderen.

We gebruiken hiervoor PHP en ImageMagick.

Een voorbeeld. Stel, we willen een favicon weergeven bij een link naar http://www.domein.nl/map/pagina.htm. De favicon bevindt zich als het goed is op http://www.domein.nl/favicon.ico. We willen het op onze eigen server plaatsen als 'map/nieuw.png'. Het tijdelijke bestand wordt 'map/tijdelijk.ico'. Verder gebruiken we een alternatieve afbeelding op de eigen server 'map/alternatief.png' dat wordt gebruikt als het ophalen van het favicon mislukt. Dit kan bijvoorbeeld een volledige transparante pixel zijn.

Eerst plaatsen we deze adressen in variabelen. Het adres van het externe favicon leiden we daarbij af uit het adres van de link waar het uiteindelijk bij moet komen te staan. Op die manier is het script op alle mogelijke links toe te passen, zolang het favicon maar als 'favicon.ico' in de rootmap van de externe site staat. Je kunt de link natuurlijk ook uit een database halen en voor de namen van het tijdelijke en het nieuwe bestand het id van de link uit de database gebruiken (bijvoorbeeld: '/map/'.$id .'.ico' en '/map/'.$id.'.png').

$link = 'http://www.domein.nl/map/pagina.htm';

$tijdelijk = $_SERVER('DOCUMENT_ROOT') . '/map/tijdelijk.ico';

$nieuw = $_SERVER('DOCUMENT_ROOT') . '/map/nieuw.png';

$alt = $_SERVER('DOCUMENT_ROOT') . '/map/alternatief.png';



$favicon = str_replace('http://','',$link);

$favicon = explode('/',$favicon);

$favicon = 'http://'. $favicon[0] . '/favicon.ico';

Vervolgens moeten we het favicon ophalen en op de eigen server plaatsen. Denk er om dat de map waarin je het bestand plaatst schrijfrechten moet hebben.

$copy = 0;

$copy = copy($favicon, $tijdelijk);

Vervolgens moet het bestand dat op de server geplaatst is geconverteerd worden. Dit gebeurt via het programma ImageMagick. '/usr/bin' is het adres van ImageMagick op de server en '/convert' de functie die gebruikt wordt. Maar eerst controleren we of het ophalen wel gelukt is.

if ($copy) {

exec("/usr/bin/convert $tijdelijk[0] -resize 16x16 $nieuw");

}

Is het ophalen niet gelukt, dan gebruiken we de alternatieve afbeelding.

else {

exec("/usr/bin/convert $alt -resize 16x16 $nieuw");

}

Nu is het mogelijk dat het converteren mislukt is en daarom voeren we nogmaals een controle uit en gebruiken we zo nodig nogmaals de alternatieve afbeelding.

if (!file_exists($nieuw)) {

exec("/usr/bin/convert $alt -resize 16x16 $nieuw");

}

Tenslotte wordt het tijdelijke bestand weer verwijderd.

unlink($tijdelijk);

Klaar! Je kunt het bestand 'map/nieuw.png' nu weergeven in de uit te voeren pagina.

echo("<a href=\"$link\"><img src=\"$nieuw\" /></a> <a href=\"$link\">$link</a>");

Het is natuurlijk niet verstandig om dit hele script elke keer uit te voeren als het favicon moet worden weergegeven. Eén keer is voldoende. Daarom plaatsen we het ophalen en converteren in een controle structuur en kijken we eerst of het bestand 'nieuw.png' al bestaat.

if (!file_exists($nieuw)) {

// script

}

Dit script werkt alleen wanneer ImageMagick op de server is geïnstalleerd én wanneer het gebruik van de functie copy() voor externe bestanden is toegestaan voor PHP. Vooral het laatste is lang niet altijd het geval.

Tot slot het hele script nog een keer:

<?php

$link = 'http://www.domein.nl/map/pagina.htm';

$nieuw = $_SERVER('DOCUMENT_ROOT') . '/map/nieuw.png';

$tijdelijk = $_SERVER('DOCUMENT_ROOT') . '/map/tijdelijk.ico';

$alt = $_SERVER('DOCUMENT_ROOT') . '/map/alternatief.png';



if (!file_exists($nieuw)) {

$favicon = str_replace('http://','',$link);

$favicon = explode('/',$favicon);

$favicon = 'http://'. $favicon[0] . '/favicon.ico';



$copy = 0;

$copy = copy($favicon, $tijdelijk);



if ($copy) {

exec("/usr/bin/convert $tijdelijk[0] -resize 16x16 $nieuw");

}

else {

exec("/usr/bin/convert $alt -resize 16x16 $nieuw");

}

if (!file_exists($nieuw)) {

exec("/usr/bin/convert $alt -resize 16x16 $nieuw");

}



unlink($tijdelijk);

}



echo("<a href=\"$link\"><img src=\"$nieuw\" /></a> <a href=\"$link\">$link</a>");

?>

Nieuwe website gemaakt voor StevigZitten.nl

nospam@example.com (Gerrit Veldman) — Mon, 07 Jul 2008 12:00:00 +0200

De afgelopen tijd heb ik een nieuwe website gemaakt voor StevigZitten.nl, een bedrijf dat tuinmeubels en andere meubels maakt van gebruikt steigerhout. Behalve het ontwerp heb ik ook de zoekmachineoptimalisatie voor deze site gedaan.

Een favicon toevoegen aan een website

nospam@example.com (Gerrit Veldman) — Thu, 03 Jul 2008 12:00:00 +0200

Alle moderne internetbrowsers laten tegenwoordig bij veel websites een klein vierkant icoontje zien in de adresbalk en in de lijst met favorieten. Zo'n icoontje heet een favicon. Als je Firefox of Internet Explorer 7 gebruikt, zie je nu het favicon van deze website in je adresbalk staan. Hoe kom je aan zo'n favicon? Oorspronkelijk moest een favicon altijd het .ico bestandsformaat hebben en met de naam 'favicon.ico' worden opgeslagen in de rootmap van een website. Tegenwoordig mag het elke naam hebben, mag het ook in .gif, .jpg of .png formaat zijn en kan het overal op de website geplaatst worden. Wel moet er dan in het head-gedeelte van elke pagina naar verwezen worden.

<link rel="shortcut icon" href="/images/afbeelding.png" />

Bovendien zit je dan vast aan het formaat van 16x16 pixels. Gewoon een vierkant logo maken en verkleinen naar 16x16. Het voordeel is dat je ook een .gif bestand met animatie kunt gebruiken.

Een favicon in .ico formaat is flexibeler. Zeker wanneer het onder de naam 'favicon.ico' in de rootmap is geplaatst, wordt het altijd herkend, ook door websites die favicons van andere websites plaatsen bij links naar die websites. (Een voorbeeld daarvan kun je vinden in de zoekresultaten van Stamboomzoeker.nl.) Bovendien kan een .ico bestand ook in grotere formaten worden weergegeven (32x32, 48x48), bijvoorbeeld bij een snelkoppeling naar de website op je bureaublad.

Om een afbeelding in .ico formaat op te slaan heb je echter wel een geavanceerd grafisch programma nodig, zoals Photoshop. GIMP is ook zo'n programma en dat is gratis te downloaden. Verder zijn er een aantal websites waar je gratis .gif, .jpg of .png bestanden kunt converteren naar . ico formaat. Een voorbeeld: http://tools.dynamicdrive.com/favicon/. Als het goed is wordt de eventuele transparantie uit een .gif of .png bestand ook transparant in het .ico bestand.

Je kunt het beste uitgaan van een vierkante afbeelding van minimaal 48x48 pixels. Let er wel op dat de afbeelding ook op formaat 16x16 nog goed te onderscheiden moet zijn. Hij mag dus niet te gedetailleerd zijn. Een heel woord of een foto kun je er dus eigenlijk niet op kwijt.