PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
Y

Add class na inloggen

Door Yoeri Achterbergen op 02-07-2014 18:25
2.600 views
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)

Ariën
02-07-2014 18:48
Wat wil je laten samenwerken met PHP dan?
Thomas van Broekhoven
02-07-2014 19:43
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.
Y
Yoeri Achterbergen
02-07-2014 20:31
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.
Frank Nietbelangrijk
02-07-2014 21:05 gewijzigd op 02-07-2014 21:11
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.


<?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)
Y
Yoeri Achterbergen
03-07-2014 10:48
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


<?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
03-07-2014 19:12 gewijzigd op 03-07-2014 19:15
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:

<?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>
Y
Yoeri Achterbergen
03-07-2014 21:19 gewijzigd op 03-07-2014 21:29
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?


<?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;
}
?>

Reageren

Inloggen om te reageren