Registreren

[Mistery]

Inleiding
In deze tutorial zal ik jullie uitleggen hoe je je eigen CSS switcher kan maken. Leuk om je bezoekers van de website een keus te geven in de uitstraling van de site. Basis kennis van PHP en minimale kennis van stylesheets is handig.

De CSS switcher is afhankelijk van goed werkende PHP sessies. De geselecteerde CSS sheet zal bewaard worden in een sessie variabele, welke ervoor zorgt dat we een aantal stappen kunnen uitvoeren. Bijvoorbeeld een controle welke sheet op dit moment actief is.


Benodigdheden
Goed laten we eerst gaan kijken naar de directories en de bestanden die we gebruiken, nadat we klaar zijn. Het zal niet moeilijk zijn om dit script toe te voegen aan je huidige website structuur. Er zijn slechts twee bestanden nodig, en uiteraard een directory met je stylesheets.

Een korte opsomming:

• directory /sheets/: hier komen je stylesheets (CSS bestanden);
• Bestand setsheet.php: wordt gebruikt om de geselecteerde sheet te tonen;
• Bestand sheets.php: wordt gebruikt om al je CSS-jes in een menu te plaatsen (dit zijn dus de bestanden uit de /sheets/ directory).

Code
Ziet er nog niet zo heel ingewikkeld uit toch? Laten we dan nu eens naar de code gaan kijken. Ik laat de code eerst in zijn geheel zien, en zal later de belangrijke stukken uitlichten.

sheets.php
Het bestand sheets.php is verantwoordelijk voor het openen van de directory waar je CSS bestanden staan, vervolgens worden de namen van deze bestanden gelezen en in een D-ROPdown menu geplaatst.

PHP

Code: Alles selecteren

<?php
/* sheets.php */
 
/* initialiseren van de sheets array */
$sheets = array();
 
/* set de directory die de css sheets bevat */
$dir = "/sheets/";
 
/* open de directory */
$dh = opendir($dir) or die ("kon directory niet openen");
 
/* loop en voeg elke sheet toe aan de sheet array */
while ( !(($file = readdir($dh)) === false) )
{
/* Deze 'if' verbergt de . and .. links die gemaakt worden tijdens het lezen van een directory */
if ($file == "." || $file == "..") continue;
/* voeg elk gevonden bestand toe aan de array */
$sheets[] .= $file;
}
/*sluit de directory */
closedir($dh);
 
 
/* plaats de sheets in een D-ROPdown menu */
$selector = '<form name="sheetselector" action="/setsheet.php" method="post">';
$selector.= '<select name="sheet" onchange="location=\'/setsheet.php?url=' . $_SERVER['REQUEST_URI'] . '&sheet=\'+document.sheetselector.sheet.options[document.sheetselector.sheet.selectedIndex].value\'"><br/>';
 
/* loop en verwijdert de underscores om ze te vervangen voor een spatie, zodat de benaming er normaal uitziet in het menu */
foreach ($sheets as $sheet)
{
/* verwijder bij elke naam de .css aan het einde. */
$sheetname = explode (".",$sheet);
$sheet = $sheetname[0];

/* vervang de underscores voor spaties */
$sheet_scored = str_replace("_"," ", $sheet);

/* maak de opties. */
$selector .= '<option value="$sheet"';

/* markeer de huidig geselecteerde sheet */
if ($_SESSION['sheet'] == $sheet)
{$selector.= ' selected="selected" ';}

$selector.= '>$sheet_scored</option>';
}
 
$selector.= '</select></form>';
 
echo $selector;
?>

setsheet.php
Het bestand setsheets.php is verantwoordelijk voor het instellen van onze stylesheet. Dit werkt door de geselecteerde sheet naam uit het menu aan onze sessie variabele sheet toe te wijzen. We krijgen daarnaast ook een URL van de pagina waar de gebruiker, op het moment van selecteren, was. Op deze manier kunnen we de gebruiker terug laten keren naar de huidige pagina, na het veranderen van de stylesheet.

De gebruikers zullen setsheet.php niet daadwerkelijk in hun browser zien. Al het werk van dit bestand wordt op de achtergrond uitgevoerd.

PHP

Code: Alles selecteren

<?php
/* setsheet.php */
 
/* start een sessie */
session_start();
 
/* krijg de url waar de gebruiker vandaan komt*/
$came_from = $_GET['url'];
 
/* trim de sheet */
$sheet = trim($_GET['sheet']);
 
/* plaats de underscores terug om de bestandsnaam juist te lezen.*/
$sheet = str_replace(" ", "_", $sheet);
 
/* registreert de sheet */
session_register("sheet");
 
/* extra controle */
$_SESSION['sheet'] = $sheet;
 
 
/* stuur de gebruiker weer naar de locatie */
header("location: $redir");
?>

De code nader bekeken
Laten we de code eens van dichtbij bekijken.

sheets.php:
Als eerste moeten de array initialiseren, waarna we deze gaan maken. Dit doen we via:

PHP

Code: Alles selecteren

$sheets = array(); 

Onze array is klaar om data te ontvangen. Tijd om onze directory kenbaar te maken. Dit doen we op de volgende manier:

PHP

Code: Alles selecteren

$dir = "sheets"; 

Mocht je een andere directory willen gebruiken dan kan dat hier aangeven. Wil je bijvoorbeeld de directory 'mijn geweldige cssjes' gebruiken, dan zal het er als volgt uit zien:

PHP

Code: Alles selecteren

$dir = "mijn geweldige cssjes"; 

Ok, de directory is bekend, nu openen zodat we de data kunnen lezen en een mooi lijstje kunnen maken.

PHP

Code: Alles selecteren

$dh = opendir($dir) or die ("kon directory niet openen"); 

Mocht de directory niet geopend kunnen worden dan zal er een foutmelding getoond worden. Het script zal op dat moment ook eindigen.

Vervolgens lopen we door de directory om elke bestandsnaam te lezen:

PHP

Code: Alles selecteren

while ( ! (($file = readdir($dh)) = = = false) )
{
if ($file == "." || $file == "..") continue;
$sheets[].= $file;
}
closedir($dh); 

Het if statement wordt gebruikt om de "." en de ".." te verbergen die getoond worden tijdens het lezen van een directory.
Ok, onze array heeft de lijst van onze sheets, vervolgens gaan we het menu maken. Dit is het onderdeel waar de gebruikers daadwerkelijk een css sheet kunnen kiezen. We werken met het onchange principe. Wat ervoor zorgt dat het script wordt uitgevoerd op het moment dat de gebruiker een sheet uit het menu kiest. Er is dus geen "Go" knop. De code:

PHP

Code: Alles selecteren

$selector = '<form name="sheetselector" action="setsheet.php" method="post">';
$selector .= '<select name="sheet" onchange="location=\'setsheet.php?url=\''. $SERVER['REQUEST_URI'] . '&sheet=\'+document.sheetselector.sheet.options[document.sheetselector.sheet.selectedIndexe.value\'>';
foreach ($sheets as $sheets)
{
$sheetname = explode ("." , $sheet);
$sheet + $sheetname[0];
$sheet_scored = str_replace("_", " ", $sheet);
$selector.='<option value="$sheet"';
if ($_SESSION['sheet'] == $sheet)
{$selector.= 'selected="selected"';}
$selector.= '><br/>$sheet_scored</option>'."\n";
}
$selector .= '</select></form>';
echo $selector; 

Zo dat is een hele berg code. Wat hebben we nou eigenlijk gedaan. We moeten onze form een naam geven, omdat we naar het form moeten refereren in onze onchange event handler, we moesten ook de pagina krijgen waar de gebruiker zich op dat moment bevindt, hiervoor gebruikte we $_SERVER['REQUEST_URI'], deze hebben we daarna gekoppeld aan onze url variabele. Door het gebruik van de foreach() halen we bij alle sheets de .css weg aan het einde van de bestandsnaam. En om een mooi menu te maken halen we de underscores in de namen weg en vervangen deze voor spaties. Als laatste controleren we wat de huidige sheet is. En sluiten we alles netjes af.

Het grootste werk is nu gedaan. Nu het tweede script setssheet.php.

setsheets.php:
Als eerste moeten we een sessie starten. Dit omdat de gehele css switcher gebaseerd is op sessies. De code die we hiervoor gebruiken is:

PHP

Code: Alles selecteren

session_start(); 

Ok de sessie is gestart. De motor van ons php script loopt.

De volgende stap is het verkrijgen van de url, waar de gebruiker zich op dit moment bevind. We willen de gebruiker immers naar de huidige pagina terug sturen.

PHP

Code: Alles selecteren

$came_from = $ GET['url']; 

De URL variabele wordt doorgegeven door het menu welke gemaakt is in sheets.php.

Okee, we hebben nu de URL, we hebben de sheet naam. Maar we hebben de underscores in de naam weg gehaald om het menu een mooi uiterlijk te geven. Tijd om de underscores weer terug te plaatsen. Anders worden de bestandsnamen niet juist gelezen.

PHP

Code: Alles selecteren

$sheets = str_replace (" " , "_", $sheet); 

Zoals je ziet doen we eigenlijk het zelfde als toen we de underscores weghaalde.

We hebben nu de juiste bestandsnaam met underscores, het wordt tijd om de bestandsnaam te registreren in onze PHP sessie.

PHP

Code: Alles selecteren

session_register("sheet"); 

Even een extra controle:

PHP

Code: Alles selecteren

$_SESSION['sheet'] = $sheet; 

Perfect, onze sheet is nu geregistreerd in onze PHP sessie, we kunnen de gebruiker terug sturen naar de pagina waar hij/zij vandaan kwam. Dit doen we via:

PHP

Code: Alles selecteren

header("location:$redir"); 

Nu is de gebruiker weer terug op de pagina waar de sheet is geselecteerd. Voor de gebruiker is er weinig gebeurd, behalve dan dat het uiterlijk van de pagina er anders uit ziet.

Dit is het, we hebben een CSS switcher gemaakt die je op je pagina kan toepassen. Hopelijk is het duidelijk, hoe simpel je een gebruiker zijn eigen lay-out kan kiezen. Uiteraard moet je nog wel een aantal CSS bestanden maken om naar te verwijzen, maar deze creativiteit laat ik aan jezelf over.