De loginpagina
De user kan op drie manieren op de loginpagina terecht komen:
1) Als hij wil gaan inloggen
2) Als een loginpoging mislukt is
3) Als hij uitlogt
Wat we voor de zekerheid doen op de loginpagina is eventueel bestaande sessievariabelen opschonen, voor het geval de user uitgelogd heeft. Verder tonen we natuurlijk het inlogformulier. De inlogpagina heet bij mij index.php
De code:
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
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
<?php
session_start ();
$_SESSION = array ();
session_destroy ();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Login Pagina</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
@import 'login.css';
</style>
</head>
<body>
<form method="post" action="secure_page.php" class="login">
<h1>Inlogscherm</h1>
<p>
<label for="username">username:</label>
<input id="username" name="username" type="text">
</p>
<p>
<label for="password">password:</label>
<input id="password" name="password" type="password">
<input type="submit" value="inloggen">
</p>
</form>
</body>
</html>
session_start ();
$_SESSION = array ();
session_destroy ();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Login Pagina</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
@import 'login.css';
</style>
</head>
<body>
<form method="post" action="secure_page.php" class="login">
<h1>Inlogscherm</h1>
<p>
<label for="username">username:</label>
<input id="username" name="username" type="text">
</p>
<p>
<label for="password">password:</label>
<input id="password" name="password" type="password">
<input type="submit" value="inloggen">
</p>
</form>
</body>
</html>
In deze tut zit wat minimale CSS verwerkt, login.css. Hieronder de code:
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
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
form.login {
margin: 32px auto;
width: 500px;
border: 1px solid #69c;
padding: 16px;
}
h1 {
font: bold 18px Georgia;
color: #69c;
background: #f9f9f9;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 5px;
}
p, input, label, pre {
font: 11px verdana;
}
form.login label {
float: left;
width: 200px;
text-align: right;
padding-right: 5px;
padding-top: 3px;
}
form.login input {
padding: 3px;
}
margin: 32px auto;
width: 500px;
border: 1px solid #69c;
padding: 16px;
}
h1 {
font: bold 18px Georgia;
color: #69c;
background: #f9f9f9;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 5px;
}
p, input, label, pre {
font: 11px verdana;
}
form.login label {
float: left;
width: 200px;
text-align: right;
padding-right: 5px;
padding-top: 3px;
}
form.login input {
padding: 3px;
}
« vorige pagina | volgende pagina »