CodeIgniter cursus deel 2
>>>>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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!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>
</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>
"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>
</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
Code (php)
1
<?=anchor('', 'CodeIgniter');?>
En regel 92 moet vervangen worden door :
Code (php)
1
<?=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.
« vorige pagina | volgende pagina »
Inhoudsopgave
- Inleiding
- CodeIgniter cursus deel 1
- CodeIgniter cursus deel 2
- CodeIgniter cursus deel 3
- CodeIgniter-tutorial opdrachten