UNICODE - Slot
UNICODE
Indien je je gegevens in unicode wil opslaan, hier is een voorbeeld van een oplossing.
Als voorbeeld maken we een shoutbox. Kwestie van een beetje vooruit te denken, gebruik ik PDO. Daar vind je op deze site trouwens een prachtige tutorial
In de databank zet je overal de charset op utf8 en de collatie op utf8_unicode_ci.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
CREATE DATABASE unicode DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;
CREATE TABLE unicode.shoutbox (
id INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
naam VARCHAR( 50 ) NOT NULL ,
bericht TEXT NOT NULL ,
tijd DATETIME NOT NULL
) ENGINE = INNODB CHARACTER SET utf8 COLLATE utf8_unicode_ci;
CREATE TABLE unicode.shoutbox (
id INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
naam VARCHAR( 50 ) NOT NULL ,
bericht TEXT NOT NULL ,
tijd DATETIME NOT NULL
) ENGINE = INNODB CHARACTER SET utf8 COLLATE utf8_unicode_ci;
index.php
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
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
<?php
$content = '';
switch($_GET['pagina'])
{
default:
$content ='<h2>UNICODE</h2>
<h3>Shoutbox</h3>
<div id="boodschap"></div><div>
<input type="tekst" id="naam" /> naam <br/>
<textarea id="bericht"></textarea> <br/>
<input type="button" value="shout" onClick="shout();" />
</div>';
break;
case 'getShout':
$sql ="SELECT naam, bericht, tijd FROM shoutbox ORDER BY tijd";
$server = 'localhost';
$db = 'unicode';
$user = 'root';
$pass = '';
$con = new PDO('mysql:host='. $server .';dbname='. $db ,$user , $pass );
try
{
$stmt = $con->prepare($sql);
$stmt->execute();
$berichten ="";
while($row = $stmt->fetch(PDO::FETCH_ASSOC))
{
$berichten .= '
<div class="bericht"><div class="hoofd">'. stripslashes($row['naam']) .' '. $row['tijd'] .'</div><div class="content">'. stripslashes( nl2br( $row['bericht'] ) ) .'</div></div>
';
}
echo $berichten ;
}
catch(PDOException $e)
{
}
break;
case 'shout':
if (! empty($_POST['naam']) && ! empty($_POST['bericht']) )
{
$_POST['bericht'] = utf8_encode ( $_POST['bericht'] );
$_POST['naam'] = utf8_encode ( $_POST['naam'] );
$sql ="INSERT INTO shoutbox (naam, bericht, tijd) VALUES (:naam, :bericht, NOW())";
$server = 'localhost';
$db = 'unicode';
$user = 'root';
$pass = '';
try
{
$con = new PDO('mysql:host='. $server .';dbname='. $db ,$user , $pass );
$stmt = $con->prepare($sql);
$stmt->bindParam(':naam', $_POST['naam']);
$stmt->bindParam(':bericht', $_POST['bericht']);
$stmt->execute();
}
catch(PDOException $e)
{
}
}
break;
}
if ($content != '')
{
header("Content-Type: text/html; charset=utf-8"); //
echo '<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="ajax.js" type="text/javascript"></script>
<script src="js.js" type="text/javascript"></script>
<style>
#menuDiv {border: 1px solid #333333; width: 250px; float: left; margin: 0 3px 0 0;}
#content{border: 1px solid #333333; width: 450px; float: left;}
#boodschap{border: 1px solid #333333; font-size: 13px; width: 200px ; height: 300px; overflow: auto;}
.bericht{border-bottom: 1px solid #aaaaaa; margin: 2px}
.hoofd{}
.content{}
</style>
</head>
<body onLoad="getShout();">
'. $content .'
</body>
</html>
';
}
?>
$content = '';
switch($_GET['pagina'])
{
default:
$content ='<h2>UNICODE</h2>
<h3>Shoutbox</h3>
<div id="boodschap"></div><div>
<input type="tekst" id="naam" /> naam <br/>
<textarea id="bericht"></textarea> <br/>
<input type="button" value="shout" onClick="shout();" />
</div>';
break;
case 'getShout':
$sql ="SELECT naam, bericht, tijd FROM shoutbox ORDER BY tijd";
$server = 'localhost';
$db = 'unicode';
$user = 'root';
$pass = '';
$con = new PDO('mysql:host='. $server .';dbname='. $db ,$user , $pass );
try
{
$stmt = $con->prepare($sql);
$stmt->execute();
$berichten ="";
while($row = $stmt->fetch(PDO::FETCH_ASSOC))
{
$berichten .= '
<div class="bericht"><div class="hoofd">'. stripslashes($row['naam']) .' '. $row['tijd'] .'</div><div class="content">'. stripslashes( nl2br( $row['bericht'] ) ) .'</div></div>
';
}
echo $berichten ;
}
catch(PDOException $e)
{
}
break;
case 'shout':
if (! empty($_POST['naam']) && ! empty($_POST['bericht']) )
{
$_POST['bericht'] = utf8_encode ( $_POST['bericht'] );
$_POST['naam'] = utf8_encode ( $_POST['naam'] );
$sql ="INSERT INTO shoutbox (naam, bericht, tijd) VALUES (:naam, :bericht, NOW())";
$server = 'localhost';
$db = 'unicode';
$user = 'root';
$pass = '';
try
{
$con = new PDO('mysql:host='. $server .';dbname='. $db ,$user , $pass );
$stmt = $con->prepare($sql);
$stmt->bindParam(':naam', $_POST['naam']);
$stmt->bindParam(':bericht', $_POST['bericht']);
$stmt->execute();
}
catch(PDOException $e)
{
}
}
break;
}
if ($content != '')
{
header("Content-Type: text/html; charset=utf-8"); //
echo '<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="ajax.js" type="text/javascript"></script>
<script src="js.js" type="text/javascript"></script>
<style>
#menuDiv {border: 1px solid #333333; width: 250px; float: left; margin: 0 3px 0 0;}
#content{border: 1px solid #333333; width: 450px; float: left;}
#boodschap{border: 1px solid #333333; font-size: 13px; width: 200px ; height: 300px; overflow: auto;}
.bericht{border-bottom: 1px solid #aaaaaa; margin: 2px}
.hoofd{}
.content{}
</style>
</head>
<body onLoad="getShout();">
'. $content .'
</body>
</html>
';
}
?>
js.js
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
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
http = createHTTPHandler();
function shout()
{
var naam = document.getElementById('naam').value;
var bericht = document.getElementById('bericht').value;
document.getElementById('bericht').value = '';
var passData = 'naam=' + escape(naam) +"&bericht=" + escape(bericht) ;
var url = "index.php?pagina=shout";
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = handleHttpResponseShout;
http.send( passData );
}
function handleHttpResponseShout()
{
if(http.readyState == 4)
{
var resultaat = http.responseText;
getShout();
}
}
function getShout()
{
var url = "index.php?pagina=getShout";
http.open("GET", url, true);
http.onreadystatechange = handleHttpResponseGetShout;
http.send( null );
}
function handleHttpResponseGetShout()
{
if(http.readyState == 4)
{
var resultaat = http.responseText;
document.getElementById('boodschap').innerHTML = resultaat;
}
}
function shout()
{
var naam = document.getElementById('naam').value;
var bericht = document.getElementById('bericht').value;
document.getElementById('bericht').value = '';
var passData = 'naam=' + escape(naam) +"&bericht=" + escape(bericht) ;
var url = "index.php?pagina=shout";
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = handleHttpResponseShout;
http.send( passData );
}
function handleHttpResponseShout()
{
if(http.readyState == 4)
{
var resultaat = http.responseText;
getShout();
}
}
function getShout()
{
var url = "index.php?pagina=getShout";
http.open("GET", url, true);
http.onreadystatechange = handleHttpResponseGetShout;
http.send( null );
}
function handleHttpResponseGetShout()
{
if(http.readyState == 4)
{
var resultaat = http.responseText;
document.getElementById('boodschap').innerHTML = resultaat;
}
}
Let vooral op de lijnen:
header("Content-Type: text/html; charset=utf-8");
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
$_POST['bericht'] = utf8_encode ( $_POST['bericht'] );
$_POST['naam'] = utf8_encode ( $_POST['naam'] );
Ik concentreer me juist op het minimum. Uiteraard zou je normaal nog veiligheidsmaatregelen nemen.
Slot
Ik toonde hier een aantal voorbeelden. Ik ben soms wat zuinig met uitleg. Vaak vind ik dat werkende voorbeelden meer zeggen dan uitleg.
Bij elke techniek die ik toonde, kan je zelf opzoekingswerk doen. Ga zelf na wat de mogelijkheden zijn. Je zal ongetwijfeld zelf meer en meer mogelijkheden vinden.
Nog wat sluikreclame:
Gebruik Firefox met de firebug add on. Het toont je een hoop informatie over css, javascript en meer.
Ik leerde Ajax kennen met deze tutorial: http://www.phphulp.nl/php/tutorials/8/309/ . Misschien herken je er een aantal dingen.
Een aantal dingen staan daar wat grondiger in uitgelegd.
Ik probeer vooral een zo groot mogelijke waaier aan mogelijkheden te tonen.