Anzeige
Tutorialbeschreibung

Login- & Registrations-Script mit MYSQL - Teil 1

Login- & Registrations-Script mit MYSQL - Teil 1

In diesem Tutorial zeige ich euch, wie ihr euren eigenen Login + Registration schreibt. In diesem Teil jedoch nur den Start dazu.


Login- & Registrations-Script (Teil I)

Einleitung:

Als Erstes erkläre ich euch erst mal, womit das ganze Script überhaupt gebaut wird:

Wir werden alles mit PHP bzw. HTML und minimalem Javascript schreiben. Eine Datenbank (MySQL und nicht MsSQL) werden wir auf alle Fälle benutzen.

Die Dateien, die ihr schon mal erstellen solltet, wären:
  1. Index.html
  2. Login.html
  3. Registration.html
  4. reg.php
  5. login.php
  6. checkuser.php
  7. logout.php
  8. intern.php
  9. style.css

In der Datenbank solltet ihr schon mal Folgendes tun:
  • Eine neue Datenbank erstellen; der Name ist egal, er sollte aber simpel sein.
  • Eine neue Tabelle in der Datenbank anlegen; der Name ist egal.
  • In der Tabelle 5 Felder anlegen mit den folgenden Namen:
  1. ID
  2. Nickname
  3. Kennwort
  4. Vorname
  5. Nachname
  • Bei ID die Spalte auf INT  stellen und auf AI bzw. Auto Increment
  • Bei Nickname Varchar (50)
  • Bei Kennwort Varchar (50)
  • Bei Vorname Varchar (50)
  • Bei Nachname Varchar (50)

Der SQL-Code dazu wäre ganz einfach:
CREATE TABLE Benutzer (
  Id Int(11) NOT NULL auto_increment,
  Nickname VarChar(50) NOT NULL default '',
  Kennwort VarChar(50) NOT NULL default '',
  Nachname VarChar(50) NOT NULL default '',
  Vorname VarChar(50) NOT NULL default '',
  PRIMARY KEY (Id)
)  



Bilder



Index.html

Dies ist die erste Datei! Da muss auch nicht viel Code rein, da diese Seite lediglich auf die Login-Seite und auf die Registrations-Seite weiterleitet.

Code:
<html>
  <head>
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  <body><font size = "6">
<center>Falls Sie schon registriert sind, dann loggen Sie sich hier ein. <a href="login.html">*Klick*</a><br>
Falls Sie noch nicht registriert sind, dann registrieren Sie sich hier. <a href="reg.html">*Klick*</a></center></font>
<br>
<br>
<br>

<hr></font>
<center><div id ="footer">Copyright 2010 - ...!</div>
  </body>
</html>

 

Erklärung:

Zuerst schreiben wir das HTML-Grundgerüst. Das wäre der HTML-Tag, der Body-Tag und der Head-Tag, evtl. auch der Footer-Tag. Im Head-Teil rufen wir die style.css Datei auf. Im Body-Tag ändern wir zuerst die Schriftgröße, schreiben unseren Text in den Contentbereich und unser Copyright in den Footer-Part, den wir in der style.css definiert haben.


Style.css

Code:

body {
background: #555555;
font-family: Times New Roman;
font-size: 14px;
}

#footer {
background: #DCD9FF;
width: 770px;
height: 76px;
border-top: 3px solid #222222;
margin-top: 20px;
text-align: center;
color: #333;
font-size: 14px;
padding: 0px;
}


Erklärung:

Im body-Teil ändern wir die Hintergrundfarbe, setzen Times New Roman als Font (Schriftart) und sagen, dass sie 14 Pixel groß sein soll. Im footer-Teil erstellen wir eine Box. Wir setzen den Hintergrund zu einem Grau, stellen die Größe ein und den Border. Dann stellen wir den Abstand des Textes von der Oberfläche ein. Dann, dass er in der Mitte schreiben soll und zwar mit einem Grau bis Schwarz.


Weitere Schritte jeweils selber einfügen. Andere Vorlagen für Tutorialdarstellungen gibt unter dem 3. Symbol.


 

Login.html

Code:
<?php session_start (); ?>
<HTML>
  <HEAD>
    <LINK href="style.css" rel="stylesheet" type="text/css">
  </HEAD>
  <BODY><font size = "6">
<center>
<form action="login.php" method="post">


<div style="margin:0; margin-right:32em; margin-left:32em; border:1px solid #111111; padding: 1em   ; background-color:#333333;text-align:center">Login<br><br><font size="4" color="999999"><b>Nickname :</b> <input type="text" name="name" size="20" STYLE="background:#333333;"><br>
 <b>Kennwort :</b>  <input type="password" name="pwd" size="20" STYLE="background:#333333;"><br> <br>
    <input type="submit" value="Login" STYLE="background:#333333;">
</font></font></div>


</form>
<br>
<br>
<br>
<hr>
<center><div id ="footer">Copyright 2010 -  ...!</div>
  </BODY>
</HTML>

Erklärung:

In diesem Teil erstellen wir legedlich eine neue Box im Grundgerüst, in die das Formular hineinkommt. Wir erstellen 2 neue Textboxen und benennen sie. Das Benennen ist sehr wichtig - nur so können wir die Daten abschicken.

Danach erstellen wir einen Submit-Button mit dem Namen "Abschicken" oder "Login". Der Name kommt in den value=""-Teil.

Das alles kommt in ein Formular mit der Aktion login.php, und da er die Daten abschicken soll, wird die Methode "POST".
Wir starten auch eine Sitzung mit session_start ();.



 

Login.php

Code:

<?php

session_start ();

$connect = mysql_connect ("localhost", "root", "");
if (!mysql_select_db ("Login", $connect))
{
  die ("Keine Verbindung zur Datenbank");
}

$sql = "SELECT Id, Nickname, Nachname, Vorname ".
  "FROM Benutzer ".
  "WHERE ".
    "(Nickname like '".$_POST["name"]."') AND ".
    "(Kennwort = '".md5 ($_POST["pwd"])."')";
$result = mysql_query ($sql);

if (mysql_num_rows ($result) > 0)
{

  $data = mysql_fetch_array ($result);


  $_SESSION["user_id"] = $data["Id"];
  $_SESSION["user_nickname"] = $data["Nickname"];
  $_SESSION["user_nachname"] = $data["Nachname"];
  $_SESSION["user_vorname"] = $data["Vorname"]; 
  header ("Location: intern.php");
}
else
{
  echo "Es hat leider nicht geklappt!  <a href='login.html'>Zurück</a>";
}
?>

Erklärung:

Hier erstellen wir wieder eine neue Sitzung und verbinden uns mit der Datenbank. Wir speichern die Verbindung in einer Variable ab. Bei mysql_select_db () wird die Datenbank ausgewählt. Meine heißt Login, danach kommt bei dem die-Tag eine Fehlermeldung rein, falls irgendwas schieflaufen sollte.

Danach wird der SQL-Befehl in einer Variable abgespeichert, indem wir einfach $sql einen Wert zuweisen. In meinem Fall der oben genannte.

In dem Teil ...
"SELECT Id, Nickname, Nachname, Vorname ".
  "FROM Benutzer ".
  "WHERE ".
    "(Nickname like '".$_POST["name"]."') AND ".
    "(Kennwort = '".md5 ($_POST["pwd"])."')";
... wird die ID/Nickname/Nachname und der Vorname ausgewählt und er vergleicht den Nickname mit dem im Formular angegebenen Namen. Mit dem Passwort macht er das Gleiche, nur mit dem MD5-Hash. Der Hash wird automatisch mit dem Befehl md5() generiert.


Dann speichert er das Ergebnis (
mysql_query ($sql);

)

in einer Variable ab.


In dem Teil ...

if (mysql_num_rows ($result) > 0)
{

  $data = mysql_fetch_array ($result);


  $_SESSION["user_id"] = $data["Id"];
  $_SESSION["user_nickname"] = $data["Nickname"];
  $_SESSION["user_nachname"] = $data["Nachname"];
  $_SESSION["user_vorname"] = $data["Vorname"];&nbsp;
  header ("Location: intern.php");
}
else
{
  echo "Es hat leider nicht geklappt!  <a href='login.html'>Zurück</a>";
}
... wird nachgeschaut, ob ein Fehler aufgetaucht ist. Wenn nicht, dann speichert er die Accountdaten in Sessions ab und leitet auf intern.php weiter. Falls einer auftauchen sollte, zeigt er die angegebene Fehlermeldung an.


 

Ausprobiere


Greift auf die Tabelle zu und drückt auf Einfügen. Da gebt ihr dann Testdaten ein und in das Kennwortfeld den Hash vom Kennwort ein. Den könnt ihr einfach durch google herauskriegen. Nun testet ihr Login.html. Bei mir läuft jetzt alles, jedoch reicht das erst mal für diesen Teil!


MySQL-Injection verhindern

Dieser Teil sollte eingeführt werden, da er als Sicherheit dient!:

MySQL-Injections dienen dazu, um eure Passwörter zu ändern oder gar die Seite zu löschen. Um dies zu verhindern, schreibt ihr das in die Login.php-Datei vor die Variablen bei der Query.

Das kommt an den Anfang:
function mysqlinject($string)
{
$string = htmlspecialchars($string);
$string = trim($string);
$string = stripslashes($string);
$string = mysql_real_escape_string($string);
return $string;
}

Und dann in die Query:
$sql = "SELECT Id, Nickname, Nachname, Vorname ".
  "FROM Benutzer ".
  "WHERE ".
    "(Nickname like '".mysqlinject($_POST["name"])."') AND ".
    "(Kennwort = '".mysqlinject(md5 ($_POST["pwd"]))."')";

Das macht ihr auch in reg.php.

Viel Spaß und bis zum nächsten Mal!
Greetz xxchucki

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Stone1221
  • 24.02.2013 - 23:53

Ich korrigiere meine Aussage. Erster grosser Fehler wenn ich eine Sessionen setze wie in Login.html da wird es nicht funktionieren. Es Lautet da dann schon Login.php sonst wird die datei blind an den Browser geschickt und man hat ganz oben stehen was ein fehler ist . Und zweitens bei deinen nächstentutorials sollte du die reihe komplett zu ende machen und nicht nur die hälfte und den rest dann sein lassen . punkt verschwendung ech schade. Der Ansatz war da.

Portrait von Stone1221
  • 13.01.2013 - 00:55

Tach auch. ICh muss sagen auf dem ersten blick gefällt mir das sehr gut werde an mein ersten datenbank system wohl was ändern. Aller dings hätte ich die ganzen styles in der Login.html datei ausgelagert in einer externen CSS oder für das tutorial in den Head berreich macht den Quellcode übersichtlicher und ist für anfänger glaube ich leichter zu lesen . ABer Ansonsten finde ich es gut danke dir für die ühe.

Portrait von Kintrax
  • 07.11.2012 - 23:37

Hi,
bis hierhin schon mal eine super Anleitung.
Danke dafür.

Gibt es irgendwo noch den zweiten Teil?

Portrait von chrisian
  • 09.11.2011 - 21:04

Soeben, hast du mein Interesse geweckt und ich habe für dein Tutorial ein paar Punkte springen lassen.
Wie die genauen Sicherheitstechniken gehen bzw. eingebunden werden, werden in den seltensten Fällen fertig präsentiert. Daher bist du im Trend.
Sicherheit ist jedoch wichtig. An passender Stelle Hinweise geben, sollte zumindest drinnen sein.

Die Screenshoots aus phpmyadmin sind nicht so gut geworden, oder liegts an meinem PDF Programm?? Nächstes mal drauf achten.

Portrait von veritas01
  • 24.02.2011 - 21:19

Naja ich würde allerdings schon das LIKE in die SQL Abfrage setzen.
Ist in meinen Augen nur Bequemlichkeit, weil es in der Anmeldung völlig egal ist wie ich den Usernamen schreibe. Hauptsache die Buchstaben stimmen in der Reihenfolge. Was Sicherheit angeht würde ich das wiederum bemängeln.

Man registriert sich ja nicht umsonst mit Administrator, als Beispiel. Es macht für mich dann keinen Sinn, wenn ich als User administrator eingeben kann.

Portrait von xxchucki
  • 18.11.2010 - 20:38

Danke für das Kommentar :)
Werde ich berügsichtigen

Portrait von slikey
  • 18.11.2010 - 18:04

hallo, du solltest darauf achten:
- mysql_real_escape_strings sollte für die Sicherheit reichen.
- vermeide die Verwendungen von LIKE in einem mysql_query
-> Stattdessen ist dies sehr sinnvoll.
WHERE LOWER(Nickname) = '".strtolower(mysql_real_escape_sting($_POST["name"]))."' LIMIT 1");

LOWER(spaltenname) -> Setzt den Inhalt der Spalte auf lowercase
strtolower() -> Gibt als Rückgabewert den Parameter als lowercase
mysql_real_escape_string() -> Sicherheit.
LIMIT 1 -> Kleine Maßnahme um maximal einen Inhalt auszugeben, falls (unwahrscheinlich und praktisch unmöglich) ein 2. wert kommt. außerdem hört er auf zu suchen, nachdem er einen gefunden hat, was zu folge hat, dass der query bei vielen einträgen in der datenbank schneller läuft

Portrait von slikey
  • 18.11.2010 - 18:07

LOWER() und strtolower ermöglicht dem Nutzer "Administrator" auch die Eingabe von "aDmINisTrAtor"

| LOWER(Nickname) macht aus "Administrator" -> "administrator" und
| strtolower($name) macht aus "aDmINisTrAtor" -> "administrator" -> Das heißt, dass es gleich ist und somit ein erfolgreicher Login.

Portrait von WebDiver_09
  • 15.11.2010 - 11:44

Hm, das ist ja schon mal sehr schön, aber wo und wie geht's jetzt weiter???

Portrait von xxchucki
  • 15.11.2010 - 18:31

Wenn der nächste Teil freigeschaltet wird... Ist aber schon geschrieben worden.

Portrait von Oschick
  • 12.11.2010 - 12:11

Vielen vielen Dank, man lernt nie aus

Portrait von sychron
  • 09.11.2010 - 11:07

Stimmt, ist mir gar nicht aufgefallen ... da muß natürlich auf Gleichheit geprüft werden, nicht auf Ännlichkeit!

Portrait von xxchucki
  • 09.11.2010 - 18:58

Ok, danke...
Werde ich bei PART II einfügen :)
Auch das mit dem Optional, werde ich verbessern

Portrait von jens260181
  • 09.11.2010 - 07:52

Warum steht in der Query ein LIKE? Der Benutzername könnte auch %username% heißen. Bin jetzt verwirrt.

Portrait von angel_web_shop24
  • 09.11.2010 - 01:00

klasse entlich weis ich wie das funzt bisher hab ich nur seiten OHNE db erstellt

Portrait von flyjoker
  • 09.11.2010 - 00:06

Wunderbar! Passt aktuell sehr gut zu meinem Thema.

Portrait von sychron
  • 08.11.2010 - 14:11

Schönes Tutorial, für Anfänger sicher hilfreich.

ABER: Der Teil, der der Sicherheit dient, ist NICHT optional. Diese Denkweise ist leider schon viel zu weit verbreitet. Benutzereingaben dürfen NIEMALS ungefiltert an die Datenbank weitergegeben werden!

Noch eine Anmerkung:
Die PHP-Zeile am Anfang der login.html hat keinerlei Funktion, es sei denn, der Server ist so eingestellt, daß er alles durch den PHP-Interpreter schleust -- normalerweise passiert das nur bei .php-Dateien. Selbst wenn sie geparst würde, hätte sie keine Funktion, da einfach nur die Session aufgegriffen, aber nicht weiter behandelt wird.

Portrait von pierre74
  • 08.11.2010 - 09:18

super tutorial. soetwas habe ich schon immer gesucht. und auch gleich mit sicherheit....

x
×
×