Anleitung: JQuery/Thickbox mit einem AJAX Login Formular und PHP – Update

Sonntag, 25. Oktober 2009 |  Autor:

screen-capture-92JQuery und Thickbox sind mittlerweile häufig anzutreffen. Ihre Stärke liegt in der schnellen Darstellung von Medien in einem Fenster über der eigentlichen Webseite.
Will man hier Formulare mit Interaktion einbauen scheint das Ganze komplexer.
Klingt kompliziert – ist es aber nicht. Man nehme ein Login Formular und reagiere auf fehlerhafte Eingaben.

[Update 2]Ich hab das Beispiel um ein Logout und um einen Redirect nach einem erfolgreichen Login erweitert. Damit sich auch zukünftig weniger Typo’s einschleichen, gibts das ganze hier Ajax Login Update 2 zum Download. [/Update]

[UPDATE]
Es haben sich einige Typos und Copy&Paste Fehler eingeschlichen. Um das zukünftig auszuschliessen gibt es es hier die Dateien als Zip-File. [/Update]
Wichtig die Copy&Paste Funktion der JavaScripts unten, die den Code darstellen werfen an den unmöglichsten Stellen Leerzeichen ein, entweder Ihr verwendet die Daten aus dem ZIP Archiv oder ihr entfernt Sie manuell.
Weiter bieten einige Webhoster (1und1) in der Standardkonfiguration PHP4 an. PHP4 kennt den Art und Weise des Konstruktors in der login.class nicht. In der Regel können die Hoster auch PHP5, dazu muß man eine .htaccess Datei in dem Verzeichnis erstellen in der die index.php liegt. Der Inhalt sieht wie folgt aus:

AddType x-mapp-php5 .php
AddHandler x-mapp-php5 .php

Silvi von www.datenküche.de gab mir noch den Tip, statt den beiden oberen Zeilen den folgenden Eintrag vorzunehmen:

AddHandler php5-cgi .php

Danke auch an Tobi und alle anderen Tipgeber, für die zahlreichen Hinweise für Fehler.

Und nun gehts los.

Als erstes müssen wir uns einige Dateien runterladen:

Ein bisschen JavaScript:
- jquery.js (compressed)
- thickbox.js (compressed)

Ein bisschen CSS:
– thickbox.css

Ein bisschen Animation:
loadingAnimation.gif

Für das Beispiel legen wir uns folgende Verzeichnisstruktur an: 

./css hier legen wir unsere CSS Dateien ab
./img hier legen wir unsere Bild Dateien ab
./js  hier legen wir unsere js Dateien ab
./ hier legen wir unsere php und html Dateien ab

Um unseren Login gegen eine Datenbank zu prüfen legen wir uns eine Tabelle in der Datenbank test an und legen gleich einen Satz an:

CREATE TABLE IF NOT EXISTS tbl_user
( user_id INT(11) NOT NULL AUTO_INCREMENT,
username VARCHAR(50) NOT NULL,
password VARCHAR(50) NOT NULL,
PRIMARY KEY  ( user_id ) );
INSERT INTO tbl_user (username,password)
VALUES ('admin',MD5('password'));

Damit sind die Vorbereitungen erledigt und wir können ans Coden schreiten.
Als erstes bauen wir uns die Hauptseite die den Link hat der unser Login Fenster aufruft und benennen sie index.php. 

<?php
/**
 * Created on 02.02.2009
 * @author David Krcek switch2mac.de
 */
session_start();
if (!empty($_SESSION['username'])) header( 'Location: ./loggedin.php' ) ;
 
echo <<<EOF
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery ThickBox Login Box</title>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/thickBox-compressed.js"></script>
<script type="text/javascript" src="js/login.js"></script></meta>
<link rel="stylesheet" href="css/thickbox.css" type="text/css"
 media="screen" />
<link rel="stylesheet" href="css/login.css" type="text/css"
media="screen" />
</head>
<body>
'<a href="login.htm?height=200&width=300" class="thickbox">Login</a>'
</body> </html>
EOF
?>

Wichtig sind hier die Zeilen:

if (!empty($_SESSION['username'])) 
header( 'Location: ./loggedin.php' ) ;

und

<a href="login.htm?height=200&width=300" class="thickbox">Login</a>

In der ersten prüfen wir ob der Benutzer angemeldet ist, also ob ein erfolgreicher Login stattgefunden hat und leiten ihn im Erfolgsfall auf eine weitere Seite oder Server um.

Die zweite Zeile zeigt den Aufruf der Login.htm mit Thickbox, über die Parameter height/width wird die Größe des Fenster festgelegt, über class=”thickbox” wird die JavaScript Verarbeitung und Darstellung mit Thickbox/Jquery angestossen. Fügt man hier noch den Parameter modal=true an, öffnet sich das Thickbox Fenster ohne den Close Button, d.h. aber auch man muss die Funktion tb_remove() einbauen.

Jetzt bauen wir uns die HTML Seite, die wir in dem Thickbox Fenster darstellen wollen und nennen sie login.htm 

<h2>Anmeldung</h2>
<p> Sie haben noch keine Zugangsdaten ?
Neukunden benutzen bitte das Regstrierungsformular.
</p>
<div id="loginDiv">
<label for="username">Benutzername</label></div></h1>
<input name="username" id="username" type="text" />
<label for="password">Kennwort</label> 
<input name="password" id="password" type="password" / size=8/>
<input value="Login" id="login" onclick="login()" type="submit" />
 
<p id="info">Wenn an dieser Stelle ein Fehler auftritt oder Sie sich bei
der Eingabe von Email und Kennwort unsicher sind, erreichen Sie
hier unsere Hilfe hier</p>
<p id="warning"></p>

Besonderer Augenmerk liegt hier bei den Elementen, wie id=”loginDiv”. Nicht nur dass wir hier mit CSS spielen können, mit JavaScript/AJAX können wir hier die Inhalte ändern ohne eine Seitenrefresh durchzuführen.
Mit dem Button lösen wir die Funktion login() aus und die schreiben wir uns jetzt und nennen Sie login.js.

function login()
{
var username = $("#username").val();
var password = $("#password").val();</p>
if ((username == '') || (password == ''))
{
    $("#info").html('');
    $("#warning").html("Benutzername und Kennwort erforderlich !");
} 
else
{
   $.get("login.php?username="+username+"&password="+password, function(rc) {
   if (rc == 0)
{
	$("#warning").html("Ihr Benutzer und/oder Kennwort sind falsch");
	$("#info").html('');
}
       else if (rc == 1)
{
$("#info").html('');
$("warning").html('');
$("#loginDiv").html("Login erfolgreich");
setTimeout("window.location.reload()",1000);
setTimeout("tb_remove()",3000);
}
});
}
return false;
}

Hier führen wir eine simple Prüfung auf die Eingabe durch, und jagen diese in unser PHP Modul zur Verprüfung ob die Benutzername/Kennwort Kombination gültig ist.

Zur Interaktion mit dem Formular werden die entsprechenden HTML-Container (warning & info) befüllt.
Bei einer erfolgreichen Anmeldung geben wir eine Meldung aus und schliessen das Fenster automatisch mit
tb_remove().
That’s it mehr brauchen wir nicht in JavaScript zu tun. Den Rest erledigt JQuery/Thickbox für uns.

Jetzt brauchen wir unser login.php, damit das Ganze etwas schnieker cooler aussieht Erstellen wir uns als erstes eine Klasse für den DB-Zugriff und nennen sie login.class.

<?php
/**
 * Created on 02.02.2009
 * @author David Krcek switch2mac.de
 */
        class login {
        public function __construct()
	{
	}
        public function checklogin($username, $password = null, $link = null)
	{
		$db_connection = new mysqli("localhost", "root", "", "test") or die("Keine Verbindung zur DB möglich, ".mysql_error());
		$sql = 'SELECT password FROM tbl_user WHERE username = ?';
		$statement = $db_connection->prepare($sql);
		$statement->bind_param("s", $username);
		$statement->execute();
		$statement->bind_result($dbpw);
		while ($statement->fetch()) {
        	     if (md5($password) == $dbpw) {
        		 echo TRUE;
        	     } else {
        		 echo FALSE;
                     }
        	}
    }
}
?>

Die Klasse hätten wir und nun noch die Passwortprüfung bauen, dazu Erstellen wir die Datei login.php

<?php
/**
 * Created on 02.02.2009
 * @author David Krcek switch2mac.de
 */
       session_start();
       require_once('login.class');
 // Benutzernamen holen
$username = $_GET['username'];
// Kennwort holen
$password = $_GET['password'];
// PHP Login Instanz erzeugen
$login = new login();
// Loginroutine aufrufen
if($login->checklogin($username, $password)) {
	$_SESSION['username'] = $username;
	// Login war erfolgreich
	echo 1;
}
else {
	// Login fehlgeschlgen
	echo 0;
}
?>

Jetzt benötigen wir noch unsere loggedin.php auf die wir nach dem Login springen wollen. 

<?php
session_start();
echo <<<EOF
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery ThickBox Login Box</title>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/thickBox-compressed.js"></script>
<script type="text/javascript" src="js/login.js"></script></meta>
<link rel="stylesheet" href="css/thickbox.css" type="text/css"
 media="screen" />
<link rel="stylesheet" href="css/login.css" type="text/css"
media="screen" />
</head>
<body>
EOF;
 
echo "<h2>";
echo " Welcome "; echo $_SESSION['username']; 
echo ", hier gehts zum";
echo '<a href="logout.php"> Logout</a>';
echo"</h2>";
echo
"</body> </html>";
?>

Weiter wollen wir uns auch noch ausloggen, dafür benötigen wir die logout.php, die wir über den Logoutlink aufrufen. 

<?php
     session_start();
     session_destroy();
     header('Location: ./index.php');
?>

In der logout.php machen wir nichts anderes als die Session zu zerstören und eine Redirect auf eine weitere Seite oder Server. Der Redirect wird über:

header('Location: ./index.php');

durchgeführt.
Wichtig hierbei ist, dass vorher kein Zeichen an den Browser gesendet wurde, also kein HTML Code gesendet wurde, sonst die Fehlermeldung: “Header already sent…”.
Um hier das Beispiel einfach zu halten habe ich die Zieladresse für den Redirect nicht als absolute Adresse angegeben, korrekt wäre 

header('Location: http://localhost/login/index.php');

Safari und Firefox basteln die URI auch korrekt relativ zusammen, also: 

header('Location: ./index.php');

richtig zusammen, aber nach der RFC 2616 ist dies falsch.

Nun sind wir fast am Ziel, noch schnell eine login.css zimmern damit es auch gut aussieht:

body
{
color: black;
background-color: white;
padding-top: 30px;
padding-left: 10px;
font-family: Arial, sans-serif;
font-size: 10px;
}
a
{
text-decoration: none;
text-align: center;
color: red;
}
#info
{
color: grey;
font-weight: bold;
font-size: 9px;
}
#warning
{
color: red;
font-weight: bold;
font-size: 9px;
}

Und fertig ist das Kind:

screen-capture-94
screen-capture-95
screen-capture-96

Bei Fragen die Kommentarfunktion verwenden

Tags »   , , , , , «

Trackback: Trackback-URL | Feed zum Beitrag: RSS 2.0
Thema: AJAX, Anleitung, PHP, Programmierung

Diesen Beitrag kommentieren.

44 Kommentare

  1. 1
    berlin 

    Gut!

  2. 2
    David Krcek 

    Danke

  3. 3
    DATA 

    Hallo,
    sehr gute Arbeit. Ein paar kleine Tippfehler (leerzeichen usw) rausmachen und es geht.

    Aber: kann das ganze auch ohne onclick mit einem betrieben werden? Krieg es leider net zum laufen.

    Das wäre cool.

    Danke

  4. 4
    David Krcek 

    Was meinst Du denn mit “mit einem betrieben werden” ?

  5. 5
    DATA 

    Uuuuppss sorry, da fehlt ja die Hälfte ;-)

    Ich meinte ob das ganze auch ohne onclick möglich ist über ein “http form action post” ?

    krieg das leider nicht zum laufen.

    Danke

  6. 6
    David Krcek 

    Wird schwierig werden, da ja das onclick die login() JS Funktion aufruft. Einzige Möglichkeit die mir jetzt einfällt ist, das ganze in eine Zwischenseite zu packen und dann mit onload() die js-Funktion aufzurufen, aber sollte wieder mit der Antwort Probleme machen. Was sprich den gegen die onlick Methode ?

  7. 7
    DATA 

    Hello,
    prinzipiell spricht nix dagegen. Ich benutze webid und da läuft der login bisher ohne thickbox über nen http post. Ich wollte nicht zu viel verändern da bei einer neuen WeBid Version sonst die ganze Arbeit noch mal ansteht!

  8. 8
    David Krcek 

    Du kannst doch das php Script von webid in die js-Funktion login() einbauen es sollte halt nur einen RC Code zurückgeben :-)

  9. 9
    DATA 

    Du meinst in der Funktion login() …. also dem File login.js die php Seite aufrufen? Oder den php code in der login.js integrieren?

    Wollte noch nen einfachen logout link machen mit einer logout.php … aber irgendwie geht der unset nicht:

    Irgenwie klappt heut nix.

  10. 10
    David Krcek 

    Ja genau in der login.js kannst Du ja über den Aufruf:
    $.get(“login.php?username=”+username+”&password=”+password, function(rc) {
    Dein php Login Script aufrufen…

  11. 11
    DATA 

    Hallo,

    vielen Dank. Nun geht es! Super!
    [falls es interessiert: Fehler war das ich im Form bei action nun auf die Ziel php seite verweisen muss was vorher nicht der fall war [aufruf ist php seite, läd ein html Theme welches zurück auf die php seite verweist !]

    Super … vielen herzlichen Dank.

    Sehr gute Seite, sehr gute Scripte [will mich nun noch an den Tabreiter versuchen].

    mach weiter so ! Ich werde die Seite auf jeden Fall weiterempfehlen !

    Gruß

  12. 12
    David Krcek 

    Oh vielen Dank für die netten Worte, wenn ich mal wieder Zeit hab kommt noch ein bisschen mehr.
    Freut mich, daß ich Dir etwas helfen konnte. Kann man das irgendwo sehen was Du baust ?

    LL&P
    David

  13. 13
    DATA 

    Noch nicht aber Ich hoffe das ich die Seite bald online kriege. Ich hab noch ein Problem mit einer anderen Seite auf meinem WebServer [aufm USB Stick mit xampplite gehts komischerweise]. Ich geb dir aber bescheid wenns online ist.

  14. 14
    Tobi 

    Hallo Leutz!
    Zunächst einmal ein ganz großes Lob für die gute Homepage und vorallem für die sehr ausführliche Anleitung.
    Ich habe die Daten für die DB kopiert und versucht die DB zu installieren. Leider meckert meine Db und ich kann die Tabelle nicht anlegen. Folgendes wird ausgegeben :

    SQL-Befehl:

    CREATE TABLE IF NOT EXISTS ‘tbl_user’(
    ‘user_id’int( 11 ) NOT NULL ,
    ‘username’varchar( 50 ) NOT NULL ,
    ‘password’varchar( 50 ) NOT NULL ,
    PRIMARY KEY ( ‘user_id’ )
    )

    MySQL meldet: Dokumentation
    #1064 – You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ”tbl_user’
    ( ‘user_id’ int(11) NOT NULL,
    ‘username’ varchar(50) NOT NULL,
    ‘pa’ at line 1

    Ich danke für Eure Hilfe. Bin in puncto Db nicht gerade der Freak. Danke im Vorraus für Eure Hilfe.

    Wünsche allen hier ein schönes Wochenende!!

    Liebe Grüße aus Kiel

    Tobi

  15. 15
    David Krcek 

    Hallo Tobi,

    liegt wohl an den Hochkomata, bitte setze doch die SQL Kommandos wie folgt ab.

    1.
    CREATE TABLE IF NOT EXISTS tbl_user
    ( user_id int(11) NOT NULL,
    username varchar(50) NOT NULL,
    password varchar(50) NOT NULL,
    PRIMARY KEY (user_id) );

    2.
    INSERT INTO TBL_USER (USERNAME,PASSWORD)
    VALUES (‘admin’,MD5(‘password’));

    LL&P
    David

  16. 16
    Tobi 

    Hallo David! Danke für Deine Mühen. Jedoch gibt es ein Problem. Du hast mir freundlicherweise den Datenbanksatz geschickt, um einen neuen User einzuügen.
    Als Passwort hatte ich test genommen und dann so bei MYSQL versucht einzufügen:

    SQL-Befehl:

    INSERT INTO TBL_USER( USERNAME,
    PASSWORD )
    VALUES (
    ’test’, MD5( ’098f6bcd4621d373cade4e832627b4f6’ )
    )

    MySQL meldet: Dokumentation
    #1146 – Table ‘db260019412.TBL_USER’ doesn’t exist

    Was mache ich falsch bzw. muß ich noch etwas an den Dateien ändern?

    Danke für Deine weitere Hilfe!

    LG Tobi

  17. 17
    Tobi 

    Übrigens, die Tabelle tbl_user wurde angelegt Deshalb verstehe ich nicht, das er sagt, das die Tabelle nicht vorhanden sei

    Liebe Grüße

    Tobias aus Kiel

  18. 18
    David Krcek 

    Hallo Tobi,

    #1146 – Table ‘db260019412.TBL_USER’ doesn’t exist
    bedeutet, dass er die Tabelle TBL_USER nicht findet, gibt es die Tabelle (Groß/Kleinschreibung beachten !) ?

    Ausserem hast Du mich falsch verstanden. MD5( ’098f6bcd4621d373cade4e832627b4f6’ ) verschlüsselt den String mit dem Inhalt ’098f6bcd4621d373cade4e832627b4f6′.
    Ich denke Du wolltest den verschlüsselten String für ‘test’ ablegen. Dann muß die Zeile so lauten.
    VALUES (’test’, MD5( ’test’ ))

    LG
    David

  19. 19
    David Krcek 

    Dann ist das definitiv ein Problem mit der Groß/Kleinschreibung.
    Probier doch mal:

    INSERT INTO tbl_user ( USERNAME,
    PASSWORD )
    VALUES (
    ’test’, MD5( ’test’ )
    )
    LG
    David

  20. 20
    Tobi 

    Hallo David, jetzt kommt diese Fehlermeldung

    INSERT INTO tbl_user( USERNAME,
    PASSWORD )
    VALUES (
    ’test’, MD5( ’test’ ))

    MySQL meldet: Dokumentation
    #1054 – Unknown column ‘’test’’ in ‘field list’

    Habe definitivb SQL 5.0

    Gruß Tobi

  21. 21
    David Krcek 

    Hallo Tobi,
    check mal ob Du Hochkomas verwendest und nicht irgendwelche Sonderzeichen über Copy+Paste.
    Du mußt das einfache Anführungszeichen (das über dem Gatter-Symbol) nehmen.
    Wir kriegen den Satz noch in die DB.
    LG
    David

    P.S. Liegt definitiv an den ‘-Zeichen, WordPress ersetzt hier das Hochkomma, bitte beim Copy+Paste beachten

  22. 22
    Tobi 

    Du bist so gütig. Danke.

    Jetzt kommt diese Fehlermeldung

    INSERT INTO tbl_user( USERNAME,
    PASSWORD )
    VALUES (
    ‘test’, MD5( ‘test’ )
    )

    MySQL meldet: Dokumentation
    #1062 – Duplicate entry ’0′ for key 1

  23. 23
    Tobi 

    Hallo David!

    Habe es geschafft., den User anzulegen. Kann sogar noch weitere sjetzt fehlerlos anlegen. Jedoch, wenn ich im Anmeldefenster test und test angebe, dann passiert nichts!!!

    Gruß

  24. 24
    David Krcek 

    Hallo Tobi,
    hast Du villt wieder Leerzeichen vor/nach den PHP-Tags? Kann ich mir das irgendwo im Web ansehen ?

    LG
    David

  25. 25
    Tobi 

    Habe einfach den Ordner, den du mir geschickt hast auf meinen Server geladen. Zu finden unter

    tanzen-und-mehr.eu/login/

    Habe an den Dateien nichts geändert.

    Gruß

    P.S. Schicke dir den Ordner zu, den Du mir geschickt hast per Email

  26. 26
    David Krcek 

    Die login.class wirft einen Fehler
    \nParse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /homepages/44/dxxxxx/htdocs/tanzen/login/login.class on line 7\n

  27. 27
    Tobi 

    OK. Beispiel dann

    prepare($sql);
    $statement->bind_param(“s”, $username);
    $statement->execute();
    $statement->bind_result($dbpw);
    while ($statement->fetch()) {
    if (md5($password) == $dbpw) {
    return TRUE;
    }else {
    echo FALSE;}
    }
    }
    }
    ?>

    Sind die Datenbank einträge in der Reihenfolge richtig?

  28. 28
    Tobi 

    Ups, da wurde etwas abgeschnitten. Schicke Dir mal die login.class zu.

    Gruß

  29. 29
    tobias 

    Hallo David. Habe die login.class auf dem Server aktualsiert, wie Du es beschrieben hast. Passiert aber immernoch nichts.

    Gruß

    Tobias

  30. 30
    Tobi 

    Hallo Leutz!

    Wie Ihr alle gesehen habt, hatte ich einige Schwierigkeiten, dieses Login System zu starten. Mit mehreren Versuchen und mit der großen Mühe von David (ihm sei Dank), habe ich mich entschieden, 2 Dinge zu erklären. 1. Ich bin 1und1 Kunde und deshalb braucht man für das Verzeichnis in dem das Login System liegt eine .htaccess Datei.

    Editor öffnen

    AddType x-mapp-php5 .php
    AddHandler x-mapp-php5 .php
    hineinschreiben

    speichern als .htaccess und in das LOGIN Verzeichnis stellen.

    Außerdem ist bei der login.class die richtige Reihenfolge zu beachten.

    localhost (dbxxxx.1und1.de)
    root (dboxxxxxxxxx (Benutzername))
    Passwort (xxxxxxxx)
    test (dbxxxxxxxxx (Datenbankname)

    Jetzt läuft es auch bei Dir, wenn Du bei 1und1 Kunde bist

    Danke für alles David!!

  31. 31
    David Krcek 

    Hallo Tobi,
    danke Dir für die Hinweise ;-) Wie Du siehst hab ich das jetzt überarbeitet.

    LG David

  32. 32
    Tobi 

    Hallo David!
    Habe mal 2 Fragen zu Deinem Sript!

    1. Wie kann ich eine Seite einbinden, ohne das das WELCOME erscheint? Habe es schon mit php include versucht, aber irgendwie will das nicht klappen.

    2. Wie geht ein Logout? EInloggen könne sich alle, aber nicht ausloggen.

    Viele Liebe Grüße

    aus Kiel

    Tobias

  33. 33
    David Krcek 

    Hallo Tobi,

    zu 1. Was meinst Du denn mit Welcome ?
    zu 2. Beim Logout mußt Du nichts weiter machen wie die Session zu zerstören und das Cockie zu killen (wenn Du das Cockie Session basiert aufgebaut hast sollte ersteres ausreichen) und dann auf eine dir genehme Seite weiterrouten.

    Grüße
    David

  34. 34
    Tobi 

    Hallo David!
    Zunächst Danke für Deine Nachricht!
    Also, bei Deinem Login kommt nach erfolgreicher Anmeldung die Seite mit der Schrift Welcome.
    Was müßte ich jedoch machen, um eine beliebige andere Seite zu nehmen? Statt Welcome eine komplett css formatierte seite z.B?

    Das mit dem Logout und den Cookies löschen habe ich schon mal gelesen. Leider aber bin ich da absolut der Newbie und hoffe, Du kannst mir da mit einem script weiterhelfen.
    Wenn Du mir die Mühe machen würdest so etwas zu schreiben, wäre ich Dir sehr dankbar.
    Sehe es als Wunsch von mir an. Wenn Du es zeitlich oder anderweitig nicht schaffst, ist das auch nicht schlimm.

    Ganz liebe Grüße

    Tobi

  35. 35
    David Krcek 

    Hallo Tobi,

    Die Umleitung auf die neue Seite kannst Du mit einem Redirect in der login.php machen.
    statt dem echo 1

    header( 'Location: http://www.deineSeite.de/irgendeineSeite.html' ) ; einfügst.

    Den Logout kannst Du machen in dem Du dir eine logout.php baust und die z.B. per Link einbindest.
    Die logout.php kann so aussehen:

    <?php
     session_start();
     session_destroy();
     header('Location: http://www.deineSeite.de/index.php');
?>

    Grüße
    David

  36. 36
    Tobi 

    Hallo David!
    Zunächst einmal Danke für Deine Mühen!
    Leider funktioniert das nicht so richtig.
    HAbe wie beschrieben den oberen Code hier eingefügt:
    …..
    $password = $_GET['password'];
    // PHP Login Instanz erzeugen
    $login = new login();
    // Loginroutine aufrufen
    if($login->checklogin($username, $password)) {
    $_SESSION['username'] = $username;
    // Login war erfolgreich
    header( ‘Location: http://www.tanzen-und-mehr.eu/bilder_kieler.php‘ ) ;
    }
    else {
    // Login fehlgeschlgen
    echo 0;
    }
    ?>

    Auch mit ” statt ‘ geht nicht.
    Das Welcome Sdmin kommt wieder als Meldung.
    Was mache ich falsch?
    Übrigens, das Apostroph ist der kleine Strich der in Deiner Zeile zu sehen ist. Der Kommentator übernimmt es leider nicht richtig

    Danke für Deine Rückantwort.
    Gruß Tobias

  37. 37
    Tobi 

    Hallo David!

    Noch ein Hinweis!

    Wenn ich den header für das redirect einfüge, funktiniert der Login nicht. Heißt, das der Hinweis
    -> Login erfolgreich >- nicht erscheint. Jedoch nach einem Refresh (F5) kommt das Welcome Admin.

    Gruß

    Tobi

  38. 38
    Tobi 

    Hallo David!

    Hast Du schon eine Lösung gefunden?

    Gruß Tobi

  39. 39
    Leon 

    Hey David,
    erstmal vielen Dank für diese Anleitung!
    Allerdings habe ich noch einige Probleme:
    ich hab den .zip Ordner runtergeladen und den Ordner
    einfach mal unverändert hochgeladen um das Teil mal zu
    testen.
    Wenn ich die Seite aufrufe kommt allerdings nur das hier:
    http://augusta.kilu.de/Login/
    Hab ich irgendwas grundlegendes falsch gemacht oder was ist da los?
    (tut mir Leid falls diese Frage irgendwie völlig dämlich ist, aber ich bin absoluter Anfänger)

    Ich würde mich riesig freuen, wenn du mir helfen könntest!
    Leon

  40. 40
    Tobi 

    Hallo Leon,

    lade in das Hauptverzeichnis die DAtei mit der beschriftung .htaccess hoch. Dort wo wie index.php liegt.
    Der Inhalt der Datei sollte dies enthalten:

    AddType x-mapp-php5 .php
    AddHandler x-mapp-php5 .php

    MfG
    Tobi

  41. 41
    David Krcek 

    Hallo Tobi,

    meine erste Idee war Unsinn, weil genau das passiert was Du beschrieben hast, nämlich die Ausgabe aus dem JavaScript wird geblockt und der Redirect funzt nicht.
    Ich hab das Ganze nun umgebaut, jetzt ist der Logout und der Redirect integriert.

    Grüße
    David

  42. 42
    Tobi 

    Hallo David!
    Habe es jetzt installiert und ausprobiert. Man kann auch ohne einem LOGIN die loggedin.php direkt öffnen.

    Außerdem hatte ich die Frage gehabt, ob man auch statt dem Welcome Admin Css basierte Seiten einbinden kann oder aber auf einen sicheren Ordner weiterleiten kann. Mir bringt doch kein Login Formular, wenn die Daten auch ohne Login einzusehen sind.

    Viele Grüße

    Tobi

  43. 43
    David Krcek 

    Hallo Tobi,

    das war ja nur ein sehr einfaches Beispiel, Du musst schon in alle nach dem Login gelaggerten Seiten eine Überprüfung einbauen, ob der User angemeldet ist.
    Hier sind wir aber dann bei grundsätzlichen Dingen in Deiner Anwendung.
    Hier stellen sich dann Fragen, ob alles über nur ein index.php läuft, die dann dynamisch zur Laufzeit die HTML Dateien ausgibt oder ob Du mit mehreren
    PHP Dateien deine Ausgabe definierst. Weiter stellt sich die Frage ob Du das ganze DB-Session basiert haben willst oder nicht.
    Aber im Prinzip sieht wohl so aus. Du setzt beim erfolgreichen Login nicht nur den Benutzernamen sondern eine weitere Variable z.B. $_SESSION['LOGGEDIN'] = 1 und auf den prüfst Du dann in jeder Deiner PHP Dateien ab. Sobald dieser Parameter nicht mehr gesetzt ist springst Du per Redirekt in die ursprüngliche index.php und bietest wieder den Login an.
    Damit das von aussen schlechter zu manipulieren ist, solltest Du eine SessionID einführen und die in der DB mitführen und hier auch die Information ablegen ob jemand angemeldet ist oder nicht. Dann mußt Du Dein Script aber so erweitern, dass nach dem Sessionstart mit der SessionID die aus dem Cockie kommt in der DB gelesen wird und dort geprüft wird ob man angeloggt war/ist oder nicht. Auch das ist hier jetzt sehr verkürzt dargestellt.

    Grüße
    David

  44. 44
    Alexandra Heissenberger 

    Schade, dass ich Euren Blogg erst heute entdeckt habe

Kommentar abgeben