Validation tijdens login
Ik had eerder al wat vragen gesteld over werken met PDO, dat is dus gelukt, maar nu zou ik graag de berichten van bijvoorbeeld een foutmelding laten zien zonder page refresh, oftewel met AJAX.
Tot nu toe heb ik een beginnetje, en vroeg me af of ik op de goede weg zit. Ik weet niet heel veel van AJAX. Het enige wat ik wil is dat hij valideert, een bericht laat zien als het niet goed is en anders het script uitvoert (wel met server side validation natuurlijk). De code bovenaan m'n js.js bestand komt van validate.js, deze site: http://rickharrison.github.io/validate.js/
Hoop dat jullie me een beetje op weg kunnen helpen, alvast bedankt.
login_submit.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
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
<html>
<head>
<link rel="stylesheet" href="imports/stylesheets/style.css" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="scripts/validate.min.js"></script>
<script src="scripts/scripts.js">
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title>
PHPRO Login
</title>
</head>
<body>
<form name="form" method="post" action="" class="login">
<p>
<label for="phpro_username">
Gebruiker:
</label>
<input type="text" name="phpro_username" id="phpro_username" value="Gebruikersnaam">
</p>
<p>
<label for="phpro_password">
Wachtwoord:
</label>
<input type="password" name="phpro_password" id="phpro_password" value="4815162342">
</p>
<p class="login-submit">
<button type="submit" class="login-button">
Login
</button>
</p>
<p class="forgot-password">
<a href="#">
Wachtwoord vergeten?
</a>
</p>
<div id="berichten">
<div id="success">
</div>
<div id="fail">
</div>
</div>
</form>
</body>
</html>
<head>
<link rel="stylesheet" href="imports/stylesheets/style.css" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="scripts/validate.min.js"></script>
<script src="scripts/scripts.js">
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title>
PHPRO Login
</title>
</head>
<body>
<form name="form" method="post" action="" class="login">
<p>
<label for="phpro_username">
Gebruiker:
</label>
<input type="text" name="phpro_username" id="phpro_username" value="Gebruikersnaam">
</p>
<p>
<label for="phpro_password">
Wachtwoord:
</label>
<input type="password" name="phpro_password" id="phpro_password" value="4815162342">
</p>
<p class="login-submit">
<button type="submit" class="login-button">
Login
</button>
</p>
<p class="forgot-password">
<a href="#">
Wachtwoord vergeten?
</a>
</p>
<div id="berichten">
<div id="success">
</div>
<div id="fail">
</div>
</div>
</form>
</body>
</html>
loginprocess.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
89
90
91
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
<?php
//begin session
session_start();
if(isset($_SESSION['user_id']))
{
$message = 'Gebruiker is al ingelogd';
}
//check that both username and password have been submitted
if(!isset($_POST['phpro_username'], $_POST['phpro_password']))
{
$message = 'Voer een geldig gebruikersnaam en wachtwoord in.';
}
//check if the username is the correct length
elseif (strlen( $_POST['phpro_username']) > 20 || strlen($_POST['phpro_username']) < 4)
{
$message = 'Gebruikersnaam mag minimaal 4 tekens lang zijn en maximaal 20 tekens.';
}
//check if the password is the correct length
elseif(strlen($_POST['phpro_password']) > 20 || strlen($_POST['phpro_password']) < 4)
{
$message = 'Wachtwoord mag minimaal 4 tekens lang zijn en maximaal 20 tekens.';
}
//check the username has only alpha numeric characters
elseif (ctype_alnum($_POST['phpro_username']) != true)
{
$message = 'Gebruikersnaam kan alleen getallen en letters bevatten.';
}
//check the password has only alpha numeric characters
elseif (ctype_alnum($_POST['phpro_password']) != true)
{
$message = 'Wachtwoord kan alleen getallen en letters bevatten.';
}
else
{
// if we are here the data is valid and we can insert into database
$phpro_username = filter_var($_POST['phpro_username'], FILTER_SANITIZE_STRING);
$phpro_password = filter_var($_POST['phpro_password'], FILTER_SANITIZE_STRING);
//password encryption
$phpro_password = sha1($phpro_password);
include_once ('connection.php');
try{
$dbh = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password);
//send message when connected
//set the error mode to exceptions
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
//prepare the select statement
$stmt = $dbh->prepare("SELECT phpro_user_id, phpro_username, phpro_password
FROM phpro_users
WHERE phpro_username = :phpro_username
AND phpro_password = :phpro_password");
//bind the parameters
$stmt->bindParam(':phpro_username', $phpro_username, PDO::PARAM_STR);
$stmt->bindParam(':phpro_password', $phpro_password, PDO::PARAM_STR, 50);
//execute the prepared statement
$stmt->execute();
//check for a result
$user_id = $stmt->fetchColumn();
//if there is no result then show failure message
if($user_id == false)
{
$message = 'Inloggen mislukt';
}
//else everything is fine
else
{
$_SESSION['user_id'] = $user_id;
$message = 'Je bent ingelogd!';
}
} catch (Exception $ex) {
//if we are here something went wrong with the database connection
$message = 'Helaas is er wat mis gegaan tijdens het inloggen.';
}
}
?>
//begin session
session_start();
if(isset($_SESSION['user_id']))
{
$message = 'Gebruiker is al ingelogd';
}
//check that both username and password have been submitted
if(!isset($_POST['phpro_username'], $_POST['phpro_password']))
{
$message = 'Voer een geldig gebruikersnaam en wachtwoord in.';
}
//check if the username is the correct length
elseif (strlen( $_POST['phpro_username']) > 20 || strlen($_POST['phpro_username']) < 4)
{
$message = 'Gebruikersnaam mag minimaal 4 tekens lang zijn en maximaal 20 tekens.';
}
//check if the password is the correct length
elseif(strlen($_POST['phpro_password']) > 20 || strlen($_POST['phpro_password']) < 4)
{
$message = 'Wachtwoord mag minimaal 4 tekens lang zijn en maximaal 20 tekens.';
}
//check the username has only alpha numeric characters
elseif (ctype_alnum($_POST['phpro_username']) != true)
{
$message = 'Gebruikersnaam kan alleen getallen en letters bevatten.';
}
//check the password has only alpha numeric characters
elseif (ctype_alnum($_POST['phpro_password']) != true)
{
$message = 'Wachtwoord kan alleen getallen en letters bevatten.';
}
else
{
// if we are here the data is valid and we can insert into database
$phpro_username = filter_var($_POST['phpro_username'], FILTER_SANITIZE_STRING);
$phpro_password = filter_var($_POST['phpro_password'], FILTER_SANITIZE_STRING);
//password encryption
$phpro_password = sha1($phpro_password);
include_once ('connection.php');
try{
$dbh = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password);
//send message when connected
//set the error mode to exceptions
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
//prepare the select statement
$stmt = $dbh->prepare("SELECT phpro_user_id, phpro_username, phpro_password
FROM phpro_users
WHERE phpro_username = :phpro_username
AND phpro_password = :phpro_password");
//bind the parameters
$stmt->bindParam(':phpro_username', $phpro_username, PDO::PARAM_STR);
$stmt->bindParam(':phpro_password', $phpro_password, PDO::PARAM_STR, 50);
//execute the prepared statement
$stmt->execute();
//check for a result
$user_id = $stmt->fetchColumn();
//if there is no result then show failure message
if($user_id == false)
{
$message = 'Inloggen mislukt';
}
//else everything is fine
else
{
$_SESSION['user_id'] = $user_id;
$message = 'Je bent ingelogd!';
}
} catch (Exception $ex) {
//if we are here something went wrong with the database connection
$message = 'Helaas is er wat mis gegaan tijdens het inloggen.';
}
}
?>
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
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
$(function(){
var validator = new FormValidator('form', [{
name: 'phpro_username',
display: 'Voornaam',
rules: 'required|min_length[4]|max_length[20]'
}, {
name: 'phpro_password',
display: 'wachtwoord',
rules: 'required|min_length[4]|max_length[20]'
}], function(errors, event) {
$("#fail").css("display","none");
$("#fail").fadeIn('slow').css;
berichten.innerHTML = '';
if (errors.length > 0) {
for (var i = 0, l = errors.length; i < l; i++) {
berichten.innerHTML += errors[i].message + '<br>';
}
} else {
var phpro_username = $('#phpro_username').val();
var phpro_password = $('#phpro_password').val();
$.post('loginprocess.php',{action: "button", phpro_username:phpro_username, phpro_password:phpro_password},function(res){
$('#result').html(res);
});
document.getElementById('success').innerHTML = 'Uw bericht is verzonden!';
}
event.preventDefault();
});
});
var validator = new FormValidator('form', [{
name: 'phpro_username',
display: 'Voornaam',
rules: 'required|min_length[4]|max_length[20]'
}, {
name: 'phpro_password',
display: 'wachtwoord',
rules: 'required|min_length[4]|max_length[20]'
}], function(errors, event) {
$("#fail").css("display","none");
$("#fail").fadeIn('slow').css;
berichten.innerHTML = '';
if (errors.length > 0) {
for (var i = 0, l = errors.length; i < l; i++) {
berichten.innerHTML += errors[i].message + '<br>';
}
} else {
var phpro_username = $('#phpro_username').val();
var phpro_password = $('#phpro_password').val();
$.post('loginprocess.php',{action: "button", phpro_username:phpro_username, phpro_password:phpro_password},function(res){
$('#result').html(res);
});
document.getElementById('success').innerHTML = 'Uw bericht is verzonden!';
}
event.preventDefault();
});
});
(Nog even de html code aangepast, zaten nog wat foutjes in m.b.t. het linken van bestanden.)
Gewijzigd op 14/03/2014 12:57:37 door Snelle Jaap
(Een reactie zoals jij regelmatig plaatst in topics... ;-) )
Obelix en Idefix op 19/03/2014 13:05:38:
Jammer dat het niet werkt.
(Een reactie zoals jij regelmatig plaatst in topics... ;-) )
(Een reactie zoals jij regelmatig plaatst in topics... ;-) )
Vind ik ook.
