Leer een website bouwen met PHP in 5 minuten

Een collega vroeg me gisteren of ik hem in 5 minuten kon uitleggen hoe je met PHP een website kunt bouwen.

Toen ik na 5 minuten klaar was gaf hij aan dat het duidelijk was, dus als het voor hem duidelijk is dan is het mogelijk ook handig voor anderen :)

Hieronder staat een heel eenvoudig stappenplan waarmee je het volgende bereikt:

• een manier om met 1 HTML template meerdere pagina's te maken;
• zoekmachine-vriendelijke urls;
• een correcte 404 pagina voor als er wat mis gaat;
• een homepage en een willekeurige andere pagina; in dit voorbeeld 'info'.

En ja, natuurlijk kun je websites veel uitgebreider maken. Dit is een startpunt, maar ook een werkwijze waarmee ik menig website in het verleden zeer snel in elkaar gezet heb, zonder een CMS. Voor de web developers: dit plus een template van oswd.org zorgt ervoor dat je binnen 2 uur een volledige website inclusief layout afhebt.

De teksten

Je begint met een bestandje waarin je alle teksten, metatitles, descriptions etc plaatst. Ik noem het teksten.inc.php, het tekstbestandje dat ik 'include':

bestandsnaam: teksten.inc.php

// leeg? dan is het de homepage
if($_GET['p'] == '') {
    $title = 'home';
    $h1 = 'home h1';
    $tekst = 'tekst home';
}
// index.php?p=info, of: /info/? Dan deze tekst gebruiken
elseif($_GET['p'] == 'info'){
    $title = 'info';
    $h1 = 'info h1';
    $tekst = 'info tekst';
}
// andere gevallen bestaan niet en dus 404
else {
    $header = '404';
    $title = '404 title';
    $h1 = '404 h1';
    $tekst = '404 tekst';
}

Dit kun je uiteraard uitbreiden met meer teksten, paginas etc. Let erop dat aanhalingstekens (') voorzien worden van een \'. Dus niet: $tekst = 'dit is een 'quote'';, maar: $tekst = 'dit is een \'quote\'';.

De HTML template

Vervolgens maak je een bestandje genaamd index.php aan, waarin de HTML template staat en waarbij afhankelijk van de url die iemand opvraagt de content van die pagina getoond wordt:

Bestandsnaam: index.php

[html]
    [head]
        [title][/title]
    [/head]
    [body]
        [h1][/h1]
        [p][/p]
    [/body]
[/html]

Als iemand index.php opvraagt, wordt bij $title, $h1 en $tekst de content getoond die ik ingevuld had onder if($_GET['p'] == '') {. Als iemand index.php?p=info opvraagt, wordt bij $title 'info' ingevuld etc. Als er iets niet klopt, wordt er een 404 pagina getoond, inclusief HTTP statuscode die nodig is om ervoor te zorgen dat de pagina niet geïndexeerd wordt door Google & co.

Zoekmachine vriendelijke urls

Zoekmachines kunnen lelijke urls zoals ik ze hier maak prima volgen, maar 'vriendelijke urls' zien er beter uit en klikken ook beter, dus vandaar dat je bijvoorbeeld http://www.jesite.nl/index.php?p=info liever wil wijzigen naar http://www.jesite.nl/info.

Dat kan eenvoudig met een rewriteregel in het bestandje .htaccess, dat er als volgt uitziet:

Bestandsnaam: .htaccess

RewriteEngine on
RewriteRule ^([a-zA-Z0-9-] )/?$ index.php?p=$1

Als iemand nu /info opvraagt, dan weet de site nu dat eigenlijk index.php?p=info opgevraagd wordt, maar dat laat ie niet zien. In plaats daarvan wordt /info ook getoond, inclusief de bijbehorende tekst. Daarnaast worden alleen pagina's met alfanumerieke karakters (a-zA-Z0-9-) geaccepteerd. Dat voorkomt fouten.

Goed, het kostte me 20 minuten om dit artikel te schrijven, maar slechts 5 minuten om een werkend prototype te maken en uit te leggen hoe het werkte. Doe er je voordeel mee en laat me weten wat je ervan vindt!

Reacties

door Jos, 2010 03 04

Ja, maar waar is het CMS?

door monchito, 2010 03 04

@Jos: je CMS is teksten.inc.php :)

door Thomas Lenting, 2010 03 04

Goed artikel.Ik stop de naam/waarde-paren meestal in een array. In de template zet ik dan '[naam]', die ik laat replacen. Op die manier kun je de code en template nog meer scheiden.De if-else structuur kan een hele lange lijst worden; dan kun je voor de leesbaarheid beter een switch-statement gebruiken met per 'case' de aanroep naar functies die de array teruggeven.

door monchito, 2010 03 04

@Thomas: klopt helemaal en thnx!arrays zijn een stap verder en heb ik bewust achterwege gelaten :)

door Marcel, 2010 03 04

Goed, duidelijk artikel. Net zo duidelijk als je uitleg van gisteren ;)THX!

door Ruud Kok, 2010 03 04  

Leuk artikel, alleen de inhoud van teksten.inc.php zou ik zelf liever in een database zetten, dat is (zeker wanneer de schaal wordt vergroot) overzichtelijker dan een hele lange lijst if-else statements.

door monchito, 2010 03 04

@Ruud: uiteraard, maar kun jij dat aan iemand uitleggen in 5 minuten? ;)

door , 2010 03 05

Goede uitleg Ramon. zove heb ik mijn eerste php site nog niet gemaakt ;) Waar ik wel benieuwd naar ben is hoe de php database werkt ipv de teksten.inc.php.

door monchito, 2010 03 05

@Niels dat is iets lastiger uitleggen, maar ook niet lastig hoor, maar dan moet je wel een database aanmaken, connectie maken, uitlezen, in array stoppen, array printen ... Is iets lastiger :)

door Ruben, 2010 03 14

Zo kan het ook inderdaad, heerlijk eenvoudig.@monchito ligt er natuurlijk aan wie je tegenover je hebt zitten :)

door Martin, 2010 04 03  

Haha, zo simpel kan het gewoon zijn. Nu nog de tekst mooi weergeven. Binnenkort een artikel over CSS in 5 minuten? =)Ik heb thuis ook nog een dik boek over PHP staan wat ik ooit eens wil gaan lezen.

door monchito, 2010 04 06

@Martin: moet je doen; is het waard!

door huidspecialist, 2010 08 15  

@Martin: wat is de titel van dat boek over PHP?

door jasonz, 2010 08 31

Volgens mij is het een hele duidelijke tutorial alleen gek genoeg heb ik zoals beschreven alle bestanden aangemaakt maar krijg ik bij het openen van de index.php enkel: [html] [head] [title][/title] [/head] [body] [h1][/h1] [p][/p] [/body] [/html] te zien...

Doe ik iets fout?