PHPStyler - PHPhulp

Pagina 1

Inleiding

Met CSS maak je de kleuren onderhoud aan je site eenvoudig. Maar als je iets wilt TOEVOEGEN word het toch weer veel werk. Dan moet je bij al je pagina's die hebt dat alsnog erin zetten, helaas...

Met PHPStyler word weer een hoop van dat werk bespaart! In PHPStyler kun je divs in een keer in je hele site zetten, dus je hoeft enkel een div aan je CSS en PHPStyler toe te voegen en klaar.

--CSS: Kleuren, posities, divs maken en achtergronden
--PHPStyler: divs neerzetten voor de hele site

We gaan beginnen. Maak de volgende bestanden aan:
--style.css
--style.php
--index.php
Laat ze nog wel helemaal leeg!

Volgende pagina>>

Pagina 2

style.css en style.php maken

Open style.css, die nog wel leeg is. zet daar een body, een container en een content in. Bijvoorbeeld dit:


body {
color: #4D4D4D;
font-family: Arial;
font-size: 0.8em;
line-height: 1.8em;
text-align: center;
background: #E6E6E6;
}

#container {
width: 800px;
text-align: left;
margin: 0px auto 0 auto;
background: #FFFFFF;
line-height: 1.0em;
}

#content {
float: left;
width: 700px; 
margin: 10px 10px 0 10px;
padding: 0;
font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
}

Dat is dus een simpel CSS template met alleen wat kleurtjes en plaatsing. Bij de laatste stap kun je dit aanpassen.

Nu style.php. In de volgende stap passen we het aan, maar eerst zetten we dit erin:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="nl" />

<title>Website titel</title>

<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
<div id="container">
  <div id="content">
    <h1>Dit is mijn titel</h1><br>
	<br>
	<p>En dit is mijn tekst.</p>
	</div>
</div>
</body>
</html>

Je kan style.php eventueel nu nog .html opslaan, maar dat zal de volgende stap dan niet meer gebruikelijk zijn.

Volgende stap>>

Pagina 3

style.php en index.php PHPStyleren

Bekijk je style.php die we in de vorige stap hebben gemaakt eens in je browser, als t goed is zie je een grijze achtergrond met een witte container, met daarin grote en kleine tekst.

Open style.php weer eens. Maak van je titel en tekst variabelen. Dus bijvoorbeeld dit:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="nl" />

<title>Website titel</title>

<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
<div id="container">
  <div id="content">
    <h1><?php echo $titel ?></h1><br>
	<br>
	<p><?php echo $content ?></p>
	</div>
</div>
</body>
</html>

Nu zul je niks meer zien in de browser, dat is goed.
Open index.php en zet daarin dit:


<?php
switch($_GET['page']){
  case: 'home': 
     $title = 'Dit is mijn titel';
     $tekst = 'En dit is mijn tekst.';
   break;
  case: 'pagina2': 
     $title = 'Pagina2';
     $tekst = 'De tekst van pagina 2';
   break;
   default:
      $titel = 'Error';
      $tekst = 'Deze pagina bestaat niet'; 
   break;
}
include('style.php');

?>

En ook super simpel, zeer geschikt voor beginners dus om dit aan te passen! Je hoeft enkel naar de titel en tekst te kijken om dit te begrijpen.
Maar hoe vind je die pagina?
Zo:
http://www.mijnsite.nl/index.php?page=home/
dan krijg je de tekst te zien die in de case: 'home' staan, samen met je layout.

verder:
http://www.mijnsite.nl/index.php?page=pagina2/
dan krijg je dus pagina 2 te zien.

http://www.mijnsite.nl/index.php?page=pagina3/
Dan krijg je de error te zien, omdat deze pagina niet bestaat.

Volgende pagina>>

Pagina 4

Een div toevoegen

Nu gaan we een div toevoegen aan CSS, bijvoorbeeld een menu of copyright, verzin maar iets. Ik ga een menu doen hier.
Als we dan een div aan CSS hebben toegevoegd, zou dat dus in al je pagina's ook gezet moeten worden, en dat kan veel werk zijn.. Terwijl je maar heel weinig toevoegt. Het word nu duidelijk wat PHPStyer oplost!
Je nieuwe CSS code:


body {
color: #4D4D4D;
font-family: Arial;
font-size: 0.8em;
line-height: 1.8em;
text-align: center;
background: #E6E6E6;
}

#container {
width: 766px;
text-align: left;
margin: 0px auto 0 auto;
background: #FFFFFF ;
line-height: 1.0em;
}

#content {
float: left;
width: 400px; 
margin: 10px 10px 0 10px;
padding: 0;
font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
}

#menu {
float: left;
width: 150px;
margin: 10px 0 0 10px;
padding: 0;
color: #787878;
}

Zo, nu hebben we een div voor menu gemaakt in CSS, en in plaats van dat die simpele div in al je pagina's gezet moet worden, hoef je m enkel in style.php te zetten: DIT is dus het grote nut van PHPStyler.
We gaan hem toevoegen aan style.php, Voeg het volgende toe voordat de div content begint.


<div id="menu">
<a href="index.php?page=home">Index</a>
<a href="index.php?page=pagina2>pagina 2"></a>
</div>

Open index weer in je browser, en tadaa menu is toegevoegd door maar 2 bestanden aan te passen!!!
Dit moet wel duidelijk zijn hoe functioneel PHPStyler is!

Volgende pagina>>

Pagina 5

Uitbreiden

Met PHPStyler heb je slechts 3 website bestanden als basis nodig voor je website:
--style.css
--style.php
--index.php

Uitbreiden CSS: zal vast wel een andere tut over CSS zijn...
Uitbreiden style.php:
door een div toe te voegen.


<div id="divnaam">
tekst wat je in alle pagina's hetzelfde wilt
<php
//of wat je wil laten verschillen per pagina, doe je met een var
echo $tekst_die_verschilt
?>
</div>

Uitbreiden van het menu: Is wel erg simpel, maar voor de beginners van de beginners voeg je dit toe op je gewenste plek:


<a href="index.php?page=je_pagina">Nieuwe pagina</a>

Uitbreiden index.php, maak een nieuwe case aan:


  case: 'paginanaam': 
     $titel = 'titel';
     $tekst = 'tekst';
  break;

ergens tussen


<?php
switch($_GET['page']){
//hiertussen dus
}
?>

Reacties en opmerkingen zijn welkom, evenals spelfouten en mogelijke bugs!

Veel plezier met PHPStyler!