CodeIgniter cursus php-framework

>>>>CodeIgniter is een OOP(Object Oriented Programming). Voor meer informatie over OOP verwijs ik je graag door naar de OOP Beginners handleiding van blanche:
http://www.phphulp.nl/php/tutorial/overig/oop-beginnershandleiding-php5/701/
>>>>Zoals jullie vast wel weten is CodeIgniter een PHP-framework. Een PHP-framework probeert het ontwikkelen van webapplicaties in PHP zo makkelijk/snel mogelijk te laten verlopen. CodeIgniter werkt met het MVC-model(Model-View-Controller) principe. Dit houdt in dat database verkeer (Model) en het zichtbare deel(View) apart wordt gehouden en tussen deze twee componenten gecommuniceerd wordt met behulp van de Controller. Dit systeem heeft de volgende voordelen:
- Scheiding tussen datamodel, applicatielogica en de applicatie-presentatie;
- Hergebruik van code wat tijdbesparing oplevert;
- Gemakkelijk nieuwe applicatie-presentaties maken.
Voor meer informatie over wat MVC-Model inhoud link ik je graag door naar:
http://nl.wikipedia.org/wiki/Model-view-controller-model
CodeIgniter is in PHP geschreven, het is dus handig dat je eerst PHP leert voordat je aan de CodeIgniter cursus begint. In het te downloaden pakket staat ook een beperkte PHP tutorial maar voor een uitgebreidere PHP tutorial stuur ik je graag door naar de PHP beginners tutorial van blanche:
http://www.phphulp.nl/php/tutorial/overig/php-beginners-handleiding/575/

Wij maken in onze cursus gebruik van
-UsbWebserver(waarmee we de site op onze eigen computer kunnen testen).
link: http://www.usbwebserver.net/nl/download.php
-CodeIgniter bestanden.
link: http://codeigniter.com/downloads/
Je kunt ook het pakket downloaden waar deze programma's in zitten samen met:
-Een tekst-bestandje met alle benodigde code erin.
-De cursus in een handig/overzichtelijk word-document.
Dit is gratis te downloaden via:
http://www.megaupload.com/?d=9EQ8N9G2
of:
http://rapidshare.com/files/449979663/CodeIgniter_tutorial.zip

>>>>We zullen beginnen met een kleine applicatie om u kennis te laten maken met het principe van CodeIgniter. Allereerst moet je de CodeIgniter-bestanden in de root-map van UsbWebserver zetten(tenzij je het pakket hebt gedownload: dan staat CodeIgniter er al in! Wij hebben de CodeIgniter bestanden 'tutorial' genoemd. Het lijkt mij het handigst als je dit ook doet). Als je UsbWebserver hebt aangezet ga je naar: http://localhost:8080/tutorial/. Je zult dan een welkom tekst van CodeIgniter zien. Ga naar de map UsbWebserver\htdocs\tutorial\system\application. Van deze map maak je namelijk het meeste gebruik in CodeIgniter. In deze map maak je vooral gebruik van de mappen models, views en controllers. Wij houden ons in deze tutorial alleen bezig met de mappen views en controllers omdat deze voor elke applicatie, hoe klein ook, nodig zijn. We maken in de controllers map een bestand aan genaamd webpagina met een PHP extensie (webpagina.php). In de views-map maken we een bestand aan home.php. Je kunt de bestanden ook anders noemen, zolang ze maar een PHP-extensie hebben. We beginnen met code in de controller te zetten namelijk:
<?php
class webpagina extends Controller
{


}
?>
We maken hier een class aan genoemd naar het controllerbestand, in ons geval is de class dus naar webpagina.php genoemd. Deze class wordt uitgebreid om gebruik te kunnen maken van alle ‘handigheidjes’ van CodeIgniter door er “extends Controller” aan toe te voegen. Vervolgens kunnen we in deze class functies zetten. We maken een standaard functie aan, namelijk de functie index.

function index()
{
	echo "Hello World";
}

Als je nu naar http://localhost:8080/tutorial/index.php/webpagina/index gaat zie je nu Hello World op het scherm verschijnen.
>>>>De url is in verschillende segmenten verdeeld. Het eerste segment in de url van het voorbeeld hierboven is index. Deze geeft aan welke functie er moet worden gebruikt. Het tweede segment is webpagina. Deze geeft aan welke class er moet worden gebruikt. Het derde segment is index.php, deze is standaard in CodeIgniter. CodeIgniter maakt het mogelijk om url’s minder uitgebreid te maken, je kunt namelijk met een aantal instellingen zorgen dat bepaalde segmenten van de url niet worden weergegeven.
Om te zorgen dat je de webpagina waarin Hello World verschijnd ook te zien krijgt als je alleen http://localhost:8080/tutorial/index.php intypt moet je de ‘hoofd-class’ aanpassen. Op het moment is ‘welcome’ als ‘hoofd-class’ ingesteld en zal CodeIgniter deze class gebruiken wanneer in de url niet wordt aangegeven welke class er moet worden gebruikt. Om dit op te lossen moet je naar de config folder in de application map gaan. Open routes.php. Vervang de regel
$route['default_controller'] = "welcome";
door
$route['default_controller'] = "webpagina";
>>>>Als je nu http://localhost:8080/tutorial/index.php opent zie je een witte pagina met ‘Hello World’ erin. Voor grotere applicaties is het niet zo handig om in de controller alles te vermelden wat er op het beeldscherm te zien moet zijn. Daarom laten we dit via de view gaan.

>>>>We gaan nu eerst de pagina iets mooier maken door het view bestand te bewerken. Ga hiervoor naar de views folder in de application map en maak een bestand home.php aan. Zet hier de volgende code in:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
	<head> 
		<title>CodeIgniter tutorial</title> 
		<style type="text/css">
			.body     { 
			font-family: Verdana; 
			font-size: 10pt;
						} 

			td   { 
			vertical-align: top; 
				  } 
					   
			a    { 
			color:#003d4c; 
			text-decoration:underline; 
			font-family: Verdana; 
			font-size: 10pt; 
				 } 
				  
			a:hover   { 
			color:#003d4c; 
			text-decoration:none; 
			font-family: Verdana; 
			font-size: 10pt; 
					  } 
			.tableMain     { 
			border: 1px solid red;  
			padding: 3 px;  
			border-spacing: 0px;  
			width: 100%; 
						   } 
							
			.header   { 
			border-bottom: 1px solid black;  
			background-color: red;  
			text-align: center; 
			font-family: Tahoma;
			font-weight: bold;  
			font-size: 30pt;
			color:white; 
					  } 
					   
			.tableMenu     { 
			border-right: 1px solid red;  
			vertical-align: top;  
			width: 20%; 
			padding: 3px;
			height: 100%; 
 					      } 
							
			.tableContent  { 
			width: 80%;  
			vertical-align: top; 
			padding: 3px; 
			font-family: Verdana; 
			font-size: 9pt; 
						   } 
							
			.footer   { 
			border-top: 1px solid red;  
			background-color: red;  
			text-align: center; 
			font-family: Verdana; 
			font-size: 7pt; 
					  }
		</style>		  

	</head> 
	<body style="margin: 0px;"> 

		<table class="tableMain"> 
			<tr> 
				 <td colspan="2" class="header"> 
					<br>CodeIgniter<br>&nbsp; 
				 </td> 
			</tr> 
			<tr> 
				 <td class="tableMenu" width="100%" > 
					<table bgcolor="#606060" width="100%">
						<tr>	
							<td bgcolor="#808080" 85:width="100%">	
								CodeIgniter
							</td>
						</tr>
						<tr>	
							<td bgcolor="#808080" 91:width="100%">	
								Tutorial
							</td>
						</tr>
					</table>	     
				 </td>                       
				 <td class="tableContent"> 
					Hier moet bepaalde informatie komen te staan
				 </td> 
			</tr> 
			<tr> 
				 <td colspan="2" class="footer"> 
				  Layout gemaakt PHPhulp.nl<br />
				  © Copyright 2009-2011 - All Rights Reserved
				 </td> 
			</tr> 
		</table> 

	</body> 
</html>

>>>>Zoals je ziet is dit allemaal gewoon html. De css is in de <style>-tags gezet om zo zo min mogelijk verschillende mappen open hoeven te hebben staan.
Nu weer verder met de controller. In de controller staat alleen nog maar een class met daarin een functie index. In deze functie hebben we ervoor gezorgd dat er ‘Hello World’ op het beeldscherm verscheen. Nu gaan we ervoor zorgen dat de view wordt geladen door de controller. Dit doen we door in de functie index van de controller de regel echo"Hello World"; te vervangen door:
$this->load->view('home');
$this is een ingebouwde variabele in CodeIgniter. De variabele $this houdt alle functies van CodeIgniter in. Als je dus een ‘handigheidje’ van CodeIgniter nodig hebt zul je de variabele $this nodig hebben. In de variabele $this staan een helehoop ingebouwde functies van CodeIgniter, je zult dus moeten aangeven welke functie je op dat moment nodig hebt. Dit gebeurt in de 1e parameter van de variabele $this. In dit voorbeeld is dat load. In de 2e parameter wordt de benodigde informatie aangegeven voor de 1e parameter. In dit geval wordt er in de 2e parameter het bestand aangegeven dat moet worden geladen.

>>>>Als je nu de pagina weer herlaadt zie je links een navigatie-paneel, in het midden de inhoud van de site en dit alles in een opgemaakte kader. Nu is het de bedoeling dat de inhoud van de site veranderd als je in het navigatiepaneel, een van de twee mogelijkheden aanklikt.
>>>>CodeIgniter werkt met zogenaamde helpers. Deze staan in de map htdocs\tutorial\system\helpers. Deze helpers kunnen door de programmeur worden aangeroepen om bepaalde mogelijkheden van CodeIgniter vrij te maken. Zo moet je de url-helper aanroepen in de controller om links te maken. En array-helpers om gebruik te kunnen maken van de handigheidjes van CodeIgniter die bij arrays behoren.
>>>>Zoals verteld is het de bedoeling dat er links in het navigatie-paneel van onze site komen te staan. We zullen dus, zoals hierboven uitgelegd, url-helpers moeten toevoegen. Dit wordt in de controller gedaan, in de hoofd-functie. We voegen dus de aanroep in de index functie van onze controller:
$this->load->helper('url');
Op regel 86 van de view moet ‘CodeIgniter’ vervangen worden door
<?=anchor('', 'CodeIgniter');?>
En regel 92 moet vervangen worden door :
<?=anchor('webpagina/tutorialcontroller', 'Tutorial');?>
Anchor is te vergelijken met de <link>-tag in ‘gewoon’ html. De 1e parameter van de anchor-funtie geeft aan naar welke controller-functie verwezen moet worden en de 2e parameter de tekst die moet worden weergegeven.
Als we nu de pagina weer herladen en we drukken op de link ‘CodeIgniter’ krijgen we een 404 Not Fount –error. Als we naar de url kijken zien we dat die er zo uit ziet:
http://example.com/index.php
Zoals je ziet klopt dit niet. De site waar die naar moet verwijzen is niet example.com. Dit komt omdat de basis-url in CodeIgniter standaard example.com is. Om dit te veranderen openen we het config-bestand in application\config.
$config['base_url'] = "http://example.com";
vervangen we door:
$config['base_url'] = "http://localhost:8080/tutorial/";
Als we nu de pagina weer vernieuwen en de eerste link aandrukken, zul je zien dat het werkt.

>>>>Om de tweede link te laten werken en om te zorgen dat alleen de inhoud van de site veranderd, moeten we de controller flink aanpassen. We vervangen de code in de controller door:
<?php
class Webpagina extends Controller
{
function webpagina()
{
parent::Controller();
$this->load->helper('url');

}
function index()
{
$this->load->view('home');
}
function tutorialcontroller()
{
$this->load->view('home');
}
}
?>
>>>>Let op; in de nieuwste versie CodeIniter wordt er gebruik gemaakt van
parent::__construct();
in de plaats van
parent::Controller();
Wanneer je aan het werk bent met de nieuwste versie zul je hier rekening mee moeten houden!
>>>>We hebben meerdere aanpassingen gedaan. We hebben een functie webpagina aangemaakt vernoemd naar de controller class. We hebben de code uit de functie index gehaald en deze in de functie webpagina gezet en nog een functie tutorialcontroller aangemaakt. De functie webpagina is als hoofd-controller ingesteld door er de code
parent::Controller();
aan toe te voegen. Dit hebben we gedaan zodat we de ‘helpers’ maar een keer hoeven aan te roepen.
>>>>Nu gaan we ervoor zorgen dat de inhoud van de site verandert wanneer we via het navigatie-paneel een link aanklikken. Hierbij zorgen we ook nog dat de informatie die op de site te zien zal zijn dynamisch wordt. Dit houdt in dat de informatie niet vast in de view is gezet, maar dat de informatie van de controller afkomstig is.
>>>>We kunnen de informatie die we vanuit de controller willen toevoegen aan de view toevoegen aan het 2e segment van de $this->load->view(' '); functie. We moeten eerst informatie aan een variabele toevoegen. Als je bijvoorbeeld in de functie index $data['informatie']="Informatie in de hoofdpagina"; zet en $this->load->view('home'); vervangt door $this->load->view('home', $data);, kun je in de view de variabelen gebruiken die je in de $data-array hebt gezet. Als we nu regel 98 van de view vervangen met:
<?php echo $informatie; ?>
En daarna de index-pagina vernieuwd zul je de dynamisch gecreëerde tekst op het scherm zien verschijnen. Als we nu de tweede link aanklikken zullen we een error-message zien verschijnen. Dit komt omdat je alleen in de index-controller de variabele $informatie hebt mee gegeven. Doe dit dus ook voor de tutorialcontroller controller.
>>>>Je het nu meerdere mogelijkheden met CodeIgniter gezien. We hopen dat je er iets aan hebt gehad en dat er misschien nog verder mee gaat! Oefening baard kunst dus misschien kun jij over een tijdje wel een volledigge applicatie in CodeIgniter maken.

3: Voeg in het navigatie-paneel nog twee werkende links toe genaamd informatie en optellen. Zorg dat er onder elke link een andere inhoud komt te staan.
4: Zet in de controller van de link optellen een loop die van 1 tot en met tien optelt. Geeft deze getallen weer.