Add class na inloggen
Met php en jquery heb ik d.m.v. stukken script kopieren, tutorials, een eigen inlog systeem gemaakt.
Nu wil ik het volgende erbij maken:
Mijn inlog scherm heeft een grijze border. Als de inlog succesvol is wil ik dat deze border groen kleurt.
Als de inlog een error geeft wil ik de border rood hebben.
Ik weet dat je met jquery of javascript een add class kan maken.
Hoe kan ik dit met php laten samen werken?
De inlog werkt met sessies in php, nu is het zo dat deze een echo geeft waarin een div class zit.
wie kan mij helpen?
Groetjes Yoeri
Deze vraag heb ik ook bij helpmij.nl gesteld. (zie link naar topic)
http://www.helpmij.nl/forum/showthread.php/825619-Add-class-bij-inloggen
Dus dan krijg je zoiets als:
<div class="$resultaat"></div>
En $resultaat kan dan verschillende waarden hebben (grijs, groen of rood in jouw geval). Dit bespaart je veel gedoe me jquery en javascript.
Dat klopt, alleen moet hij de class toepassen wat bij de status hoort.
Error rood
Succes groen. Omdat de inlog via php loopt weet ik niet hoe ik dit via jquery eraan kan toevoegen.
Oké dat klinkt logisch.
Oplossing is PHP een stukje javascript code laten genereren.
Immers wordt PHP als eerste uitgevoerd op de server en het resultaat wordt naar de browser gestuurd alwaar javascript pas in actie komt. Het gaat met name om regel 51.
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
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
<?php
/*
0 = niet ingelogd
1 = ingelogd
2 = foutieve inlogpoging
*/
$ingelogd = 0;
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.midden {
position: absolute;
width: 400px;
height: 300px;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
margin-right: auto;
background-color:grey;
padding:20px;
}
.green
{
background-color:green;
}
.red
{
background-color:red;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="midden">
PHPHulp
</div>
<script>
var inlog_status = <?php echo $ingelogd; ?>;
function setLoginDivColor()
{
// verwijder de extra classen
$('.midden').removeClass('green');
$('.midden').removeClass('red');
if(inlog_status == 1)
$('.midden').addClass('green');
else if(inlog_status == 2)
$('.midden').addClass('red');
}
$( document ).ready(function() {
setLoginDivColor();
});
</script>
</body>
</html>
/*
0 = niet ingelogd
1 = ingelogd
2 = foutieve inlogpoging
*/
$ingelogd = 0;
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.midden {
position: absolute;
width: 400px;
height: 300px;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
margin-right: auto;
background-color:grey;
padding:20px;
}
.green
{
background-color:green;
}
.red
{
background-color:red;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="midden">
PHPHulp
</div>
<script>
var inlog_status = <?php echo $ingelogd; ?>;
function setLoginDivColor()
{
// verwijder de extra classen
$('.midden').removeClass('green');
$('.midden').removeClass('red');
if(inlog_status == 1)
$('.midden').addClass('green');
else if(inlog_status == 2)
$('.midden').addClass('red');
}
$( document ).ready(function() {
setLoginDivColor();
});
</script>
</body>
</html>
Toevoeging op 02/07/2014 21:08:22:
zie ook http://codepen.io/anon/pen/wplkn (zonder PHP)
Gewijzigd op 02/07/2014 21:11:13 door Frank Nietbelangrijk
Dat is precies wat ik bedoel :-)
Omdat ik beginner ben in php, javascript & jquery weet ik nog niet precies hoe ik echt zelf een script netjes kan maken.
Het inlog script wat ik nu gebruik is een standaard van internet. Ik snap wat er in het script gebeurt, maar om daar zelf functies bij te schrijven lukt mij (nog) niet.
Dit is het standaard script van phptuts.nl
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
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
<?php
// We gaan sessies gebruiken
session_start();
// Gebruikersnaam en wachtwoord instellen
$sGebruikerControle = 'admin';
$sWachtwoordControle = 'voorbeeld';
// Controle of het formulier verzonden is
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
// Controle of benodigde velden wel ingevuld zijn
if(isset($_POST['user'], $_POST['pass']))
{
// Overbodige spaties verwijderen
$sGebruiker = trim($_POST['user']);
$sWachtwoord = trim($_POST['pass']);
// Gebruikersnaam en wachtwoord controleren
if($sGebruiker == $sGebruikerControle && $sWachtwoord == $sWachtwoordControle)
{
// Juiste gebruikersnaam en wachtwoord: inloggen!
$_SESSION['logged_in'] = true;
$_SESSION['gebruiker'] = $sGebruiker;
// Doorsturen en melding geven
header('Refresh: 3; url=beveiligd.php');
echo 'Je bent succesvol ingelogd. Je wordt doorgestuurd.';
}
else
{
// Terugsturen en foutmelding geven
header('Refresh: 3; url=login_form.php');
echo 'Deze combinatie van gebruikersnaam en wachtwoord is niet juist!';
}
}
else
{
header('Refresh: 3; url=login_form.php');
echo 'Een vereist veld bestaat niet!';
}
}
else
{
// Terug naar het formulier
header('Location: login_form.php');
exit();
}
?>
// We gaan sessies gebruiken
session_start();
// Gebruikersnaam en wachtwoord instellen
$sGebruikerControle = 'admin';
$sWachtwoordControle = 'voorbeeld';
// Controle of het formulier verzonden is
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
// Controle of benodigde velden wel ingevuld zijn
if(isset($_POST['user'], $_POST['pass']))
{
// Overbodige spaties verwijderen
$sGebruiker = trim($_POST['user']);
$sWachtwoord = trim($_POST['pass']);
// Gebruikersnaam en wachtwoord controleren
if($sGebruiker == $sGebruikerControle && $sWachtwoord == $sWachtwoordControle)
{
// Juiste gebruikersnaam en wachtwoord: inloggen!
$_SESSION['logged_in'] = true;
$_SESSION['gebruiker'] = $sGebruiker;
// Doorsturen en melding geven
header('Refresh: 3; url=beveiligd.php');
echo 'Je bent succesvol ingelogd. Je wordt doorgestuurd.';
}
else
{
// Terugsturen en foutmelding geven
header('Refresh: 3; url=login_form.php');
echo 'Deze combinatie van gebruikersnaam en wachtwoord is niet juist!';
}
}
else
{
header('Refresh: 3; url=login_form.php');
echo 'Een vereist veld bestaat niet!';
}
}
else
{
// Terug naar het formulier
header('Location: login_form.php');
exit();
}
?>
Om de var status te veranderen bij de juiste status wat moet ik daarbij doen om het script dit te laten echoën?
/*
0 = niet ingelogd
1 = ingelogd
2 = foutieve inlogpoging
*/
is dit script wel goed genoeg hiervoor of zijn er betere scripts ook qua beveiliging?
Bovendien bedacht ik me later dat je hier helemaal geen javascript nodig hebt. Je kunt gewoon direct bij de <div> de extra classnaam meegeven.
login_form.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
// We gaan sessies gebruiken
session_start();
// Gebruikersnaam en wachtwoord instellen
$sGebruikerControle = 'admin';
$sWachtwoordControle = 'voorbeeld';
$inlogClass = '';
// Controle of het formulier verzonden is
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
// Controle of benodigde velden wel ingevuld zijn
if(isset($_POST['user'], $_POST['pass']))
{
// Overbodige spaties verwijderen
$sGebruiker = trim($_POST['user']);
$sWachtwoord = trim($_POST['pass']);
// Gebruikersnaam en wachtwoord controleren
if($sGebruiker == $sGebruikerControle && $sWachtwoord == $sWachtwoordControle)
{
// Juiste gebruikersnaam en wachtwoord: inloggen!
$_SESSION['logged_in'] = true;
$_SESSION['gebruiker'] = $sGebruiker;
// Doorsturen en melding geven
header('Refresh: 3; url=beveiligd.php');
echo 'Je bent succesvol ingelogd. Je wordt doorgestuurd.';
$inlogClass = ' green';
}
else
{
// Terugsturen en foutmelding geven
header('Refresh: 3; url=login_form.php');
echo 'Deze combinatie van gebruikersnaam en wachtwoord is niet juist!';
$inlogClass = ' red';
}
}
else
{
header('Refresh: 3; url=login_form.php');
echo 'Een vereist veld bestaat niet!';
$inlogClass = ' red';
}
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Inloggen</title>
<style>
.midden {
position: absolute;
width: 400px;
height: 300px;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
margin-right: auto;
background-color:grey;
padding:20px;
}
.green
{
background-color:green;
}
.red
{
background-color:red;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="midden<?php echo $inlogClass; ?>">
<form action="" method="post">
<label for="user">Username: </label><input type="text" name="user" id="user" /><br>
<label for="pass">Password: </label><input type="password" name="pass" id="pass" />
</form>
</div>
</body>
</html>
// We gaan sessies gebruiken
session_start();
// Gebruikersnaam en wachtwoord instellen
$sGebruikerControle = 'admin';
$sWachtwoordControle = 'voorbeeld';
$inlogClass = '';
// Controle of het formulier verzonden is
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
// Controle of benodigde velden wel ingevuld zijn
if(isset($_POST['user'], $_POST['pass']))
{
// Overbodige spaties verwijderen
$sGebruiker = trim($_POST['user']);
$sWachtwoord = trim($_POST['pass']);
// Gebruikersnaam en wachtwoord controleren
if($sGebruiker == $sGebruikerControle && $sWachtwoord == $sWachtwoordControle)
{
// Juiste gebruikersnaam en wachtwoord: inloggen!
$_SESSION['logged_in'] = true;
$_SESSION['gebruiker'] = $sGebruiker;
// Doorsturen en melding geven
header('Refresh: 3; url=beveiligd.php');
echo 'Je bent succesvol ingelogd. Je wordt doorgestuurd.';
$inlogClass = ' green';
}
else
{
// Terugsturen en foutmelding geven
header('Refresh: 3; url=login_form.php');
echo 'Deze combinatie van gebruikersnaam en wachtwoord is niet juist!';
$inlogClass = ' red';
}
}
else
{
header('Refresh: 3; url=login_form.php');
echo 'Een vereist veld bestaat niet!';
$inlogClass = ' red';
}
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Inloggen</title>
<style>
.midden {
position: absolute;
width: 400px;
height: 300px;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
margin-right: auto;
background-color:grey;
padding:20px;
}
.green
{
background-color:green;
}
.red
{
background-color:red;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="midden<?php echo $inlogClass; ?>">
<form action="" method="post">
<label for="user">Username: </label><input type="text" name="user" id="user" /><br>
<label for="pass">Password: </label><input type="password" name="pass" id="pass" />
</form>
</div>
</body>
</html>
Gewijzigd op 03/07/2014 19:15:31 door Frank Nietbelangrijk
Bedankt voor het meedenken en verschillende oplossingen. Het liefste zou ik ook alles onder 1 pagina willen hebben.
Ik neem aan dat je dan met sessie id's moet gaan werken en deze meegeven of met cases?
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
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
<?php
switch(action) {
case 'login':
// We gaan sessies gebruiken
session_start();
// Gebruikersnaam en wachtwoord instellen
$sGebruikerControle = 'admin';
$sWachtwoordControle = 'voorbeeld';
$inlogClass = '';
// Controle of het formulier verzonden is
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
// Controle of benodigde velden wel ingevuld zijn
if(isset($_POST['user'], $_POST['pass']))
{
// Overbodige spaties verwijderen
$sGebruiker = trim($_POST['user']);
$sWachtwoord = trim($_POST['pass']);
// Gebruikersnaam en wachtwoord controleren
if($sGebruiker == $sGebruikerControle && $sWachtwoord == $sWachtwoordControle)
{
// Juiste gebruikersnaam en wachtwoord: inloggen!
$_SESSION['logged_in'] = true;
$_SESSION['gebruiker'] = $sGebruiker;
// Doorsturen en melding geven
header('Refresh: 3; url=beveiligd.php');
echo 'Je bent succesvol ingelogd. Je wordt doorgestuurd.';
$inlogClass = ' green';
}
else
{
// Terugsturen en foutmelding geven
header('Refresh: 3; url=login_form.php');
echo 'Deze combinatie van gebruikersnaam en wachtwoord is niet juist!';
$inlogClass = ' red';
}
}
else
{
header('Refresh: 3; url=login_form.php');
echo 'Een vereist veld bestaat niet!';
$inlogClass = ' red';
}
}
break;
case "logout":
session_destroy();
//redirect naar gekozen pagina
header('location:index.php');
break;
}
?>
switch(action) {
case 'login':
// We gaan sessies gebruiken
session_start();
// Gebruikersnaam en wachtwoord instellen
$sGebruikerControle = 'admin';
$sWachtwoordControle = 'voorbeeld';
$inlogClass = '';
// Controle of het formulier verzonden is
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
// Controle of benodigde velden wel ingevuld zijn
if(isset($_POST['user'], $_POST['pass']))
{
// Overbodige spaties verwijderen
$sGebruiker = trim($_POST['user']);
$sWachtwoord = trim($_POST['pass']);
// Gebruikersnaam en wachtwoord controleren
if($sGebruiker == $sGebruikerControle && $sWachtwoord == $sWachtwoordControle)
{
// Juiste gebruikersnaam en wachtwoord: inloggen!
$_SESSION['logged_in'] = true;
$_SESSION['gebruiker'] = $sGebruiker;
// Doorsturen en melding geven
header('Refresh: 3; url=beveiligd.php');
echo 'Je bent succesvol ingelogd. Je wordt doorgestuurd.';
$inlogClass = ' green';
}
else
{
// Terugsturen en foutmelding geven
header('Refresh: 3; url=login_form.php');
echo 'Deze combinatie van gebruikersnaam en wachtwoord is niet juist!';
$inlogClass = ' red';
}
}
else
{
header('Refresh: 3; url=login_form.php');
echo 'Een vereist veld bestaat niet!';
$inlogClass = ' red';
}
}
break;
case "logout":
session_destroy();
//redirect naar gekozen pagina
header('location:index.php');
break;
}
?>
Gewijzigd op 03/07/2014 21:29:42 door Yoeri Achterbergen