Een inleiding

logo

Wat is Code Igniter?

Het korste antwoord is: een "application framework".

Oftewel een raamwerk waarbinnen je een website kunt bouwen.

 

Een langer antwoord is:

Code Igniter is een framework.

Een framework is een software omgeving waar binnen je je applicatie bouwt,
en voor een basisstructuur zorgt en je vele standaard programmeer handelingen op een gestructureerde wijze aan reikt.

 

Binnen het framework bouw je dus je appicatie

 

Is een framework al een kant en klaar cms?

Nee, het levert alleen het raamwerk waarbinnen je op een geordende wijze de website zelf nog programmeert.

 

Het raamwerk levert wel de nodige hulpmiddelen om diverse veel voorkomende taken binnen een website te vereenvoudigen.

Wat binnen dit raamwerk een sterk punt is, is de mogelijkheid om lay-out, logica en database verkeer gescheiden te houden.

 

In programmeer termen:

  • Model (database verkeer)
  • View (lay-out)
  • Controller (logica)

MVC is de afkorting hiervoor.

 
    MVC
 

Hoewel de afkorting net zo goed CMV had kunnen heten.

In deze volgorde gebruik je veelal dit soort frameworks

 

Je hebt eerst de controller.

Deze zit als een spin in het centrum van het web en stuurt de rest aan. ( Controller )

 

Om vervolgens de database te bevragen. ( Model )

 

Waarna alle informatie wordt doorgegeven aan een of meerder lay-out scripts ( View )

 

De voordelen van een dergelijke aanpak zijn:

  • Scheiding van logica, vormgeving en database verkeer
  • Een aanpassing in een van drie onderdelen hoeft de andere twee niet te hinderen
  • Uitgebreide mogelijheden om vaker voorkomende functies te standariseren

Aanvullende informatie over frameworks: Wikipedia

 

Het pakket installeren

Laten we gaan beginnen

 

Op volgende adres kun je het pakket downloaden:

codeigniter.com/downloads/

 

Pak het pakket uit en kopieer de inhoud in de root van je webserver

 
    Uitpakken in
C:/htdocs/CodeIgniter_1.7.1
 

Start nu je web browser en ga naar:

 
    Browser adres
http://localhost/CodeIgniter_1.7.1
 

In je browser zie je dan:

 
    Browser
 

 

Out of the box en er gebeurt iets.

Heerlijk, maar goed dit is nog geen website.

 

Wat zie je nu?

Laten we eerst eens uitleggen, wat we hier nu eigenlijk zien.

 

Binnen Code Igniter wordt er altijd een controller aangeroepen.

Deze roept vervolgens een functie op, welke wordt uitgevoerd.

 
    een theoretisch voorbeeld
http://localhost/CodeIgniter_1.7.1/index.php/controllers/functie
 

De vraag rijst hier, waar zie je wat?

 

Laten we de default waarden van Code Igniter eens bekijken

 
    Code Igniter
    Basis URL website         controller         functie    
   
   
    http://localhost/CodeIgniter_1.7.1/         index.php/         controller/         functie    
    http://localhost/CodeIgniter_1.7.1/         index.php/         welcome/         index    
 

Omdat we met default waarden werken, is ons geval nu

 
    Code Igniter
    http://localhost/CodeIgniter_1.7.1/         index.php/         welcome/         index    
 

hetzelfde als

 
    Code Igniter
    http://localhost/CodeIgniter_1.7.1/    
 

Een voorbeeld van de URL

Stel je hebt een controller gemaakt genaamd inschrijven
( Hoe dat gebeurt, komt later in dit artikel )

En je hebt een functie binnen die controller gebouwd, genaamd nieuwsbrief

De URL in dat geval zou dan gaan heten:

 
    URL
    Basis URL website         controller         functie    
   
   
    http://www.uw_domein_naam.nl/index.php/         inschrijven/         nieuwsbrief    
   
   
    Oftewel    
    http://www.uw_domein_naam.nl/index.php/inschrijven/nieuwsbrief
 

Is de index.php nodig?

Nee, niet als je met de standaard controller en functie werkt.
Ga je met je eigen controllers en functies werken, dan wel!
Dus in de praktijk: Ja.

De controller

Laten we beginnen met de controller.

 

Ga maar eens naar:

 
    een voorbeeld
http://localhost/CodeIgniter_1.7.1/index.php/welcome
 

Met als resultaat in de browser

 
    een voorbeeld
 

Je ziet geen verschil.

 

Dat klopt ook.

 

In ons geval is dus

 
  begin
http://localhost/CodeIgniter_1.7.1
 

hetzelfde als

 
  begin
http://localhost/CodeIgniter_1.7.1/index.php/welcome
 

De index.php welke er tussen vermeld staat, heeft Code Igniter nodig.
Code Igniter werkt met URI segmenten.
Na elke / begint een URI.
index.php is het script welke de rest van Code Igniter aanstuurt.

 

Foutmelding

De volgende code zou geheid een foutmelding opleveren

 
  begin
http://localhost/CodeIgniter_1.7.1/welcome
 

Als je met je eigen controllers enn functies gaat werken, (99,9% kans)
dien je index.php wel te schrijven.

 

De controller welcome.php

 

Als er niets wordt ingegeven, weet Code Igniter dat er een standaard controller wordt aangeroepen.

Zoals in bovenstaande afbeelding te lezen valt, is de standaard controller op dit moment:
welcome.php

 

Deze is te vinden op:

 
    pad naar welcome.php  
./system/application/controllers/welcome.php
 

Of in een directory structuur gezien

 
    pad naar welcome.php  
 

Het aanpassen van de standaard controller komt later nog aan bod

 

De opbouw van en controller

De opbouw van de standaard controller is als volgt:

 

 
    opbouw van welcome.php  
<?php

class Welcome extends Controller {

    function Welcome()
    {
        parent::Controller();    
    }
    
    function index()
    {
        $this->load->view('welcome_message');
    }
}

/* End of file welcome.php */
/* Location: ./system/application/controllers/welcome.php */
 

Allereerst wordt de hoofd class ininitaliseerd en verbonden met de standaard controller van Code Igniter.
class Welcome extends Controller {
Let op dat de naam "Welcome" begint met een Hoofdletter.

Dan wordt de hoofd function Welcome gedefinieerd.
function Welcome()
Deze opbouw is nodig om de verbindingen door de gehele applicatie en Code Igniter te behouden.
Let op dat de naam "Welcome" weer begint met een Hoofdletter.

Deze function Welcome aanroep laat je verder met rust.

Nu wordt de function index gedefinieerd.
function index()
Wat deze doet is de View welcome_message aanroepen.

De opbouw van deze aanroep is typerend voor de OOP stijl welke Code Igniter hanteert

 

De view welcome_message is gelegen in het volgende pad

 
    pad naar welcome_message.php
./system/application/views/welcome_message.php
 

Code Igniter weet waar de views zich bevinden, dus alleen een aanroep voldoet.
Bij het aanroepen van een view is het niet nodig php als extensie te gebruiken.
Het mag wel!

 

We gaan nu eens kijken naar de standaard view

 

De view

 

De view welcome_message.php is te vinden op:

 
    pad naar welcome_message.php
./system/application/views/welcome_message.php
 

Of in een directory structuur gezien

 
    pad naar welcome_message.php
 

Structuur

Enige uitleg is nu wel op zijn plaats.

 

Bij het ontwikkelen van een applicatie binnen Code Igniter, wil Code Igniter je helpen.

 

Dit vraagt wel om de structuur van Code Igniter te volgen.

 

Dat wil zeggen:

  • plaats de controllers in de controllers map
    • ./system/application/controllers/
  • plaats de models in de models map
    • ./system/application/models/
  • plaats de views in de views map
    • ./system/application/views/

 

Een eerste aanpassing

 

Een kleine aanpassing in welcome_message.php

 

Ik ga deze vertalen in het Nederlands.

 
    welcome_message.php
<html>
<head>
<title>Welcome to CodeIgniter</title>

<style type="text/css">

body {
 background-color: #fff;
 margin: 40px;
 font-family: Lucida Grande, Verdana, Sans-serif;
 font-size: 14px;
 color: #4F5155;
}

a {
 color: #003399;
 background-color: transparent;
 font-weight: normal;
}

h1 {
 color: #444;
 background-color: transparent;
 border-bottom: 1px solid #D0D0D0;
 font-size: 16px;
 font-weight: bold;
 margin: 24px 0 2px 0;
 padding: 5px 0 6px 0;
}

code {
 font-family: Monaco, Verdana, Sans-serif;
 font-size: 12px;
 background-color: #f9f9f9;
 border: 1px solid #D0D0D0;
 color: #002166;
 display: block;
 margin: 14px 0 14px 0;
 padding: 12px 10px 12px 10px;
}

</style>
</head>
<body>

<h1>Welcome to CodeIgniter!</h1>

<p>The page you are looking at is being generated dynamically by CodeIgniter.</p>

<p>If you would like to edit this page you'll find it located at:</p>
<code>system/application/views/welcome_message.php</code>

<p>The corresponding controller for this page is found at:</p>
<code>system/application/controllers/welcome.php</code>

<p>If you are exploring CodeIgniter for the very first time, you should start by reading the <a href="user_guide/">User Guide</a>.</p>


<p><br />Page rendered in {elapsed_time} seconds</p>

</body>
</html>
 

Met als resultaat

 
    welcome_message.php
<html>
<head>
<title>Welkom bij CodeIgniter</title>

<style type="text/css">

body {
 background-color: #fff;
 margin: 40px;
 font-family: Lucida Grande, Verdana, Sans-serif;
 font-size: 14px;
 color: #4F5155;
}

a {
 color: #003399;
 background-color: transparent;
 font-weight: normal;
}

h1 {
 color: #444;
 background-color: transparent;
 border-bottom: 1px solid #D0D0D0;
 font-size: 16px;
 font-weight: bold;
 margin: 24px 0 2px 0;
 padding: 5px 0 6px 0;
}

code {
 font-family: Monaco, Verdana, Sans-serif;
 font-size: 12px;
 background-color: #f9f9f9;
 border: 1px solid #D0D0D0;
 color: #002166;
 display: block;
 margin: 14px 0 14px 0;
 padding: 12px 10px 12px 10px;
}

</style>
</head>
<body>

<h1>Welkom bij CodeIgniter! - door van Wijhe Consultancy</h1>

<p>Als je deze pagina wilt aanpassen, ga dan naar:</p>
<code>system/application/views/welcome_message.php</code>

<p>De bijbehorende controller kun je vinden op:</p>
<code>system/application/controllers/welcome.php</code>

<p><br />Pagina rendering in {elapsed_time} seconden</p>

</body>
</html>
 

En in de browser:

 
    welcome_message.php
 

Dat werkt dus

 

Nu de aanpassing aan welcome.php

 

Welcome.php naar welkom.php

 

Laten we eerst de controller hernoemen naar welkom.php

 

Van:

 
  welcome.php
C:/htdocs/CodeIgniter_1.7.1/system/application/controllers/welcome.php
 

naar:

 
  welkom.php
C:/htdocs/CodeIgniter_1.7.1/system/application/controllers/welkom.php
 

Er dient wel een aanpassing aan welkom.php te geschieden:

 

Binnen Code Igniter dien je bij een controller de Class naam en de eerste Function de naam van de controller te geven

 

Waarbij de naam met een hoofdletter begint.

 

Dus van welcome.php

 

 
  welcome.php
<?php

class Welcome extends Controller {

    function Welcome()
    {
        parent::Controller();    
    }
    
    function index()
    {
        $this->load->view('welkom');
    }
}

/* End of file welcome.php */
/* Location: ./system/application/controllers/welcome.php */
 

Naar welkom.php

 

 
  welkom.php
<?php

class Welkom extends Controller {

    function Welkom()
    {
        parent::Controller();    
    }
    
    function index()
    {
        $this->load->view('welkom');
    }
}

/* End of file welkom.php */
/* Location: ./system/application/controllers/welkom.php */
 

In de browser ga je naar:

 
  welkom.php
http://localhost/CodeIgniter_1.7.1/index.php/welkom
 

Je ziet dan:

 
    welkom
 

Dat werkt dus.

 

Als je al een fout maakt, vb. welkom2 ipv welkom ingeeft, zie je:

 
    welkom2
 

 

Een eigen "Hallo Wereld" script

 

We gaan een eigen "Hallo wereld" script maken

 

De controller hallo_wereld.php maken we het eerst.

 

 
    hallo_wereld.php
C:/htdocs/CodeIgniter_1.7.1/system/application/controllers/hallo_wereld.php
 

Met als inhoud:

 
    hallo_wereld.php
<?php

class Hallo_wereld extends Controller {

    function Hallo_wereld()
    {
        parent::Controller();    
    }
    
    function index()
    {
        $this->load->view('hallo_wereld');
    }
}

/* End of file hallo_wereld.php */
/* Location: ./system/application/controllers/hallo_wereld.php */
 

De nieuwe view hallo_wereld.php

De view hallo_wereld.php maken we nu.

 
    hallo_wereld.php
C:/htdocs/CodeIgniter_1.7.1/system/application/vieuws/hallo_wereld.php
 

Met als inhoud:

 
    hallo_wereld.php
<html>
<head>
<title>Hallo Wereld</title>

<style type="text/css">
body {
 background-color: #fff;
 margin: 40px;
 font-family: Lucida Grande, Verdana, Sans-serif;
 font-size: 14px;
 color: #4F5155;
}

p {
 background-color: #fff;
 margin: 40px;
 font-family: Lucida Grande, Verdana, Sans-serif;
 font-size: 14px;
 color: #4F5155;
}


h1 {
 color: #444;
 background-color: transparent;
 border-bottom: 1px solid #D0D0D0;
 font-size: 16px;
 font-weight: bold;
 margin: 24px 0 2px 0;
 padding: 5px 0 6px 0;
}
</style>
</head>
<body>

<h1>Hallo Wereld!</h1>

<p>Het eerste eigen geschreven Code Igniter script </p>

</body>
</html>
 

En in de browser

 
    hallo_wereld URL
http://localhost/CodeIgniter_1.7.1/index.php/hallo_wereld
 
 
    hallo_wereld URL
 

De eerste eigen functie

We gaan de controller hallo_wereld.php uitbreiden met een eigen geschreven functie.
Genaamd wereld

 
    hallo_wereld.php
C:/htdocs/CodeIgniter_1.7.1/system/application/controllers/hallo_wereld.php
 

Met als inhoud:

 
    hallo_wereld.php
<?php

class Hallo_wereld extends Controller {

    function Hallo_wereld()
    {
        parent::Controller();    
    }
    
    function index()
    {
        $this->load->view('hallo_wereld');
    }
    
    function wereld()
    {
        $this->load->view('wereld');
    }    
    
}
/* End of file hallo_wereld.php */
/* Location: ./system/application/controllers/hallo_wereld.php */
 

Wat de functie wereld() betreft, deze laat de view wereld.php zien

 

De view wereld.php

We gaan de view wereld.php schrijven

 
    wereld.php
C:/htdocs/CodeIgniter_1.7.1/system/application/views/wereld.php
 

Met als inhoud:

 
    wereld.php
<html>
<head>
<title>Wereld</title>

<style type="text/css">
body {
 background-color: #fff;
 margin: 40px;
 font-family: Lucida Grande, Verdana, Sans-serif;
 font-size: 14px;
 color: #4F5155;
}

p {
 background-color: #fff;
 margin: 40px;
 font-family: Lucida Grande, Verdana, Sans-serif;
 font-size: 14px;
 color: #4F5155;
}


h1 {
 color: #444;
 background-color: transparent;
 border-bottom: 1px solid #D0D0D0;
 font-size: 16px;
 font-weight: bold;
 margin: 24px 0 2px 0;
 padding: 5px 0 6px 0;
}
</style>
</head>
<body>

<h1>Wereld!</h1>

<p>Alweer een eigen geschreven script</p>

</body>
</html>
 

En in de browser

 
    wereld
 

 

Tot zover

Tot zover de inleiding tot Code Igniter

Het volgende artikel van Code Igniter zal gaan over het instellen van Code Igniter,
en het contact maken met de database MySQL.



Veel programmeer plezier ermee.


Tot ziens,

Ubel Jan van Wijhe
van Wijhe Consultancy
E-mail naar info@vanwijhecons.nl