Add class na inloggen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Yoeri Achterbergen

Yoeri Achterbergen

02/07/2014 18:25:15
Quote Anchor link
Beste forum gebruikers,


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
 
PHP hulp

PHP hulp

11/07/2020 00:32:31
 
- Ariën -
Beheerder

- Ariën -

02/07/2014 18:48:36
Quote Anchor link
Wat wil je laten samenwerken met PHP dan?
 
Thomas van Broekhoven

Thomas van Broekhoven

02/07/2014 19:43:51
Quote Anchor link
Kan je niet de class van je div af laten hangen van de situatie?

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.
 
Frank Nietbelangrijk

Frank Nietbelangrijk

02/07/2014 20:24:40
Quote Anchor link
Ik denk dat de TS dit bedoelt:

http://codepen.io/anon/pen/wplkn
 
Yoeri Achterbergen

Yoeri Achterbergen

02/07/2014 20:31:33
Quote Anchor link
Beste Frank,

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.
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

02/07/2014 20:42:11
Quote Anchor link
Google eens op Ajax login.
 
Frank Nietbelangrijk

Frank Nietbelangrijk

02/07/2014 21:05:03
Quote Anchor link
Hoi Yoeri,

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)
PHP script in nieuw venster Selecteer het PHP script
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
<?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>


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
 
Yoeri Achterbergen

Yoeri Achterbergen

03/07/2014 10:48:25
Quote Anchor link
Beste Frank,

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)
PHP script in nieuw venster Selecteer het PHP script
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
<?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();
}

?>


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?
 
Frank Nietbelangrijk

Frank Nietbelangrijk

03/07/2014 19:12:37
Quote Anchor link
Het vervelende aan dit script is dat de afhandeling van het login-form in een ander php bestand wordt afgehandeld. Als je daar één login.php van maakt dan wordt het een stuk makkelijker.
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)
PHP script in nieuw venster Selecteer het PHP script
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
<?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>
Gewijzigd op 03/07/2014 19:15:31 door Frank Nietbelangrijk
 
Yoeri Achterbergen

Yoeri Achterbergen

03/07/2014 21:19:12
Quote Anchor link
Beste Frank,

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)
PHP script in nieuw venster Selecteer het PHP script
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
<?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;
}

?>
Gewijzigd op 03/07/2014 21:29:42 door Yoeri Achterbergen
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.