Warning: file_put_contents(/home/www/web1/html/php_dev/test.txt) [function.file-put-contents]: failed to open stream: Permission denied in /home/www/web1/html/php_dev/sys/lib.activity.php on line 58
Wie erstelle ich ein LogIn-Skript? PHP Tutorials nicht nur für Anfänger php-resource.de

php-resource.de

PHP Tutorial: Wie erstelle ich ein LogIn-Skript?

Das folgende Tutorial nutzt eine Datenbank, in der die Benutzerdaten gespeichert werden und eine Session, in der der Benutzer registriert wird.

|14.03.2003 | andy@ | 52282 | KAT : PHP | | Kommentare 7


9

9

7. Die Datei style.css

Um nicht auf jeder einzelnen Seite mit Angaben wie z.B. <font-family="Verdana, Arial, Helvetica, sans-serif"> usw schreiben müssen, legen wir uns eine zentrale Stylesheet-Datei an, die das Aussehen des Textes, der Links, der input-Felder usw. vornimmt. Dies hat den großen Vorteil, dass wir nicht bei jeder Änderung des Designs der Seiten alle Seiten nach unseren FONT-Tags durchsuchen und diese ändern müssen. Wir ändern stattdessen nur die eine Stylesheet-Datei.

Hier der Quelltext für die Stylesheet-Datei:

01  body, td {
02    font-family: Verdana, Arial, Helvetica, sans-serif;
03    font-size: 9pt;
04    color: #000000;
05  }
06  a:link {
07    font-family: Verdana, Arial, Helvetica, sans-serif;
08    font-size: 9pt;
09    color: #000099;
10    text-decoration: none;
11  }
12  a:visited {
13    font-family: Verdana, Arial, Helvetica, sans-serif;
14    font-size: 9pt;
15    color: #000099;
16    text-decoration: none;
17  }
18  a:hover {
19    font-family: Verdana, Arial, Helvetica, sans-serif;
20    font-size: 9pt;
21    color: #0000ff;
22    text-decoration: underline overline;
23  }
24  a:active {
25    font-family: Verdana, Arial, Helvetica, sans-serif;
26    font-size: 9pt;
27    color: #000099;
28    text-decoration: none;
29  }
30  .input {
31    width: 150px;
32    background-color: #e7e7e7;
33    border: 1px solid #000000;
34    font-family: Verdana, Arial, Helvetica, sans-serif;
35    font-size: 9pt;
36    color: #000000;
37  }
38  .button {
39    background-color: #e7e7e7;
40    border: 1px solid #000000;
41    font-family: Verdana, Arial, Helvetica, sans-serif;
42    font-size: 9pt;
43    color: #000000;
44  }

Zu beachten ist, dass CSS-Definitionen nicht wie in HTML in spitze Klammern geschrieben werden und die Wertzuweisung nicht durch ein Gleichheitszeichen erfolgt, sondern, dass wir zunächst das/die HTML-Tag/s, die wir definieren wollen, angeben. Zwischen die geschweiften Klammern werden dann zunächst die jeweiligen Eigenschaften wie z.B. font-family geschrieben. Es folgt der Doppelpunkt hinter dem die jeweilige Wertzuweisung erfolgt. Werden mehrere Eigenschaften definiert, so sind diese durch einen Strichpunkt zu trennen wobei dies bei der letzten Definition nicht unbedingt nötig ist.

Zeile 01 - 05

Hier definieren wir die zwei HTML-Tags body und td (Tabellenzellen) neu, indem wir als Schriftfamilie die Schriften Verdana, Arial, Helvetica, sans-serif bestimmen. Auf Windows-Systemen wird die Schrift Verdana angezeigt, auf einem MAC ist diese Schrift aber nicht unbedingt verfügbar. Also greift sich der MAC die Schriftart Helvetica. Sind die drei ersten Schriften nicht auf dem jeweiligen Computersystem vorhanden, so wird mit der Angabe sans-serif eine Serifenlose Ersatzschriftart gewählt. Mit font-size: 9pt; legen wir die Schriftgröße fest Die Eigenschaft color bestimmt die Schriftfarbe. In unserem Fall (#000000) schwarz. Die Angabe erfolgt hier als RGB-Wert. Möglich waäre auch die Definition -> color: black;

Zeile 06 - 29

In diesem Abschnitt definieren wir das HTML-Tag A href neu. Für Links gibt es bekanntlich vier verschiedene Zustände:

  1. Der Link selbst a:link
  2. Der besuchte Link a:visited
  3. Der Roll-Over-Effekt a:hover
  4. Der aktive Link a:active

Deshalb wird das A-Tag auch viermal definiert.

Als erstes wird der normale Link neu definiert, indem wir ihm wie schon bei den body und td-Tags die Schriftfamilie, die Schriftgröße und die Schriftfarbe zuweisen. Damit sich die Links vom übrigen Text etwas abheben, weisen wir den Links eine andere Farbe zu. Mit der Eigenschaft text-decoration können wir bestimmen, ob der Link beispielsweise unterstrichen (underline), keine Eigenschaft (none) haben soll, oder unterstrichen UND überstrichen (underline overline) werden soll. Ich habe mich hier entschieden, für den normalen Link keine Eigenschaft anzugeben.

Die nachfolgenden Definitionen für visited, hover und active unterscheiden sich kaum. Nur dass ich beim roll-over-Effekt (hover) eine andere Farbe angebe und als text-decoration underline overline gewählt habe.

Ein kleiner Testlink

Zeile 30 - 37

Hier definieren wir eine Klasse, die mit einem Punkt (.) beginnt. Der Name hinter dem Punkt ist Euch überlassen. Ich habe hier input gewählt, weil ich mit den Definitionen die Textfelder der Eingabemasken formatieren möchte. Mit der Eigenschaft width können wir die Breite der Textfelder bestimmen. In diesem Fall 150px (Pixel). Mit der Eigenschaft background-color bestimmen wir die Hintergrundfarbe der Textfelder. Hier der RGB-Wert #e7e7e7. Um den Rahmen um das Textfeld zu gestalten, habe ich die border-Eigenschaft mit drei Werten definiert: 1px -> Ein Rand mit einer Stärke von einem Pixel. solid -> einfacher Rahmen. Wer will, probiert hier auch einmal dashed aus ;-) #000000 -> Rahmenfarbe schwarz.

Die restlichen Zeilen sind schon aus den anderen Definitionen bekannt. Sie betreffen die Schriftformatierung.

Zeile 38 - 44

Hier definieren wir wieder eine Klasse. Dieses mal aber für die Buttons. Die Vorgehensweise ist wieder die Gleiche wie bei der Klasse input. Nur dass wir dieses mal keine Breite brauchen. Ein Button passt sich ja dem value-Attribut an.

Wie Ihr wahrscheinlich bemerkt habt, ist in den HTML-Tags input und input submit der index.php und der neu.php jeweils ein Attribut namens class="" mit angegeben. Mit diesen Attributen wird den Textfeldern und den Buttons eben genau diese CSS-Klassen zugewiesen. Lässt man diese Attribute weg, bleiben ganz normal HTML-Buttons übrig.

Jetzt erst mal tief durchatmen und das neu erstellte LogIn-Skript ausprobieren. Aber nicht verzweifeln wenn es nicht gleich auf Anhieb funktionieren sollte. Sind alle PHP-Befehle mit einem Strichpunkt (;) abgeschlossen? Haben sich keine Tippfehler eingeschlichen? Stimmen die Verbindungsdaten zum MySQL-Server?

Bei Fragen stehe ich wie immer jederzeit per E-Mail zur Verfügung. Getestet wurde dieses Skript mit der PHP-Version 4.1.1 auf der lokalen Festplatte und mit der PHP-Version 4.2.2 online.

Download der Quelldateien

Navigation -> Seitenanzahl : (9)

  «  1 2 3 4 5 6 7 8 9  
Kommentare zum Tutorial
Tutorial kommentieren
 
02.01.2010 20:03:50 Ein Gutes, Neues Jahr 2010 wünsche ich erst einmal allen :-) @ jimbob-walton: Dann mach was... ...
11.12.2009 16:52:27 @Andreas: In PHP bin ich (noch) nicht so fit, könnte aber meine Unterstützung anbieten was ...
11.12.2009 15:35:52 wir würden uns freuen :) ...
10.12.2009 00:13:50 Hi Ihrs ;) Es freut mich einerseits, dass dieses Tutorial immer noch so beliebt ist und auch imm ...
09.12.2009 23:09:48 Seite 3 ist ein Fehler im Quellcode, deshalb kann ein Einloggen nicht funktionieren (der md5-Hash wi ...

Alle Kommentare anzeigen ...
 
Über den Autor
andy@

andy@

Status
Premium Mitglied

Beruf
Unbekannt

Mitglied seit:
30.04.2009

letzte Aktivität
04.06.2009

 

Tutorial bewerten

Hat Ihnen dieses Tutorial gefallen? Dann bewerten Sie es jetzt! Fünf Sterne bedeutet "Sehr gut", ein Stern "Unzureichend".



 

aktuelle Artikel

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Neu | Berni

Wissensbestand in Unternehmen

Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Neu | Berni