Hallo Community,
In diesem kleinen Tutorial zeige ich euch wie ihr eure eigene Account Creation Page erstellt. Als erstes die 3 Dateien:
Erstellt ein neues Verzeichnis mit dem Namen "Account" o.ä.
Öffnet den Editor und schreibt das rein:
Code:
<?php
include 'server_info.php';
$verbindung = mysql_connect($serveradresse, $benutzername , $passwort)
or die("Verbindung zur Datenbank konnte nicht hergestellt werden");
mysql_select_db("realmd") or die ("Datenbank konnte nicht ausgewählt werden");
$username = $_POST["username"];
$email = $_POST["email"];
$password = $_POST["passwort"];
$password2 = $_POST["passwort2"];
$ip = getenv("REMOTE_ADDR");
if($password != $password2 OR $username == "" OR $password == "")
{
echo "<body text=\"bae4ff\" bgcolor=\"333333\" link=\"bae4ff\" alink=\"bae4ff\" vlink=\"bae4ff\"><center>Es wurden nicht alle Felder korrekt ausgefüllt!<br><a href=\"index.php\">Zurück</a></center></body>";
exit;
}
$result = mysql_query("SELECT * FROM account WHERE last_ip LIKE '$ip'");
$menge1 = mysql_num_rows($result);
if($menge1 == 0)
{
$result = mysql_query("SELECT * FROM account WHERE username LIKE '$username'");
$menge2 = mysql_num_rows($result);
if($menge2 == 0)
{
$eintrag = "INSERT INTO account (username, sha_pass_hash, email, last_ip, expansion) VALUES (UPPER('".$username."'),SHA1(CONCAT(UPPER('".$username."'),':',UPPER('".$password."'))),'".$email."','".$ip."','".$expansion."')";
$eintragen = mysql_query($eintrag);
if($eintragen == true)
{
echo "<body text=\"bae4ff\" bgcolor=\"333333\" link=\"bae4ff\" alink=\"bae4ff\" vlink=\"bae4ff\"><center>Glückwunsch,<br> der Account wurde erfolgreich erstellt!<br>Sie können sich nun auf dem Server einloggen.<br><a href=\"index.php\">Zurück</a></center></body>";
}
else
{
echo "<body text=\"bae4ff\" bgcolor=\"333333\" link=\"bae4ff\" alink=\"bae4ff\" vlink=\"bae4ff\"><center>Es gab einen Fehler beim Speichern!<br>Bitte wenden sie sich an den Server-Administrator.<br><a href=\"index.php\">Zurück</a></center></body>";
}
}
else
{
echo "<body text=\"bae4ff\" bgcolor=\"333333\" link=\"bae4ff\" alink=\"bae4ff\" vlink=\"bae4ff\"><center>Dieser Benutzername existiert bereits!<br><a href=\"index.php\">Zurück</a></center></body>";
}
}
else
{
echo "<body text=\"bae4ff\" bgcolor=\"333333\" link=\"bae4ff\" alink=\"bae4ff\" vlink=\"bae4ff\"><center>Mit dieser IP wurde bereits ein Account erstellt!<br><a href=\"index.php\">Zurück</a></center></body>";
}
?>
Speichert es in eurem Ordner als "eintragen.php" ab. Wichtig: Dieser Name muss eintragen.php sein!
Nun die index.php: (Dank geht an Manyman für das Reine Account Creation Script)
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Account erstellen</title>
<link rel="stylesheet" type="text/css" media="screen, projection" href="stylesheet.css">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<br><center>
<div class="logo"></div>
<div style="width:300px">
<table width="100%" border="0" cellspacing="1" cellpadding="3">
<b><i><form action="eintragen.php" method="post">
Dein Benutzername:<br>
<input type="text" size="24" maxlength="50"
name="username"><br><br>
Deine Email:<br>
<input type="text" size="24" maxlength="50"
name="email"><br><br>
Dein Passwort:<br>
<input type="password" size="24" maxlength="50"
name="passwort"><br>
Passwort wiederholen:<br>
<input type="password" size="24" maxlength="50"
name="passwort2"><br><font color="#0080ff">Wrath of the Lich King aktivieren?<br>
<input type="radio" name="bc" value="2"> <font color="#0080ff">Ja<br>
<input type="radio" name="bc" value="1"> Nein<br><br></table>
<input type="submit" value=" Abschicken ">
</form><br><br>
<br clear="all"/></i></b>
</div>
</center>
</body>
</html>
Und zu guter letzt noch die wichtigen Configs:
Code:
<?php
$serveradresse = "localhost:3316"; // Serveradresse
$benutzername = "root"; // Benutzername
$passwort = "diamondcore"; // Passwort
$port = "3316"; // Port
?>
Diese Datei nennen wir "server_info.php".
So, nun aber an die Arbeit!
Hintergrundbild erstellen
In der index.php hat es eine Zeile die <body> heisst.
Diese ändern wir nun in
Code:
<body background="deinbild.jpg">
Die Datei deinbild.jpg muss im selben Verzeichnis wie die index liegen.
Man könnte es auch noch perfektionieren, nämlich dass der Hintergrund nie mitscrollt. Das geht so:
Code:
<body style="background-image:url('deinbild.jpg');
background-attachment:fixed;">
Das blaue müsst ihr natürlich ändern.
Schrif verfeinern
Wieder gehen wir in die index.php und suchen nach "Dein Benutzername".
Das ist der Text der auf der Homepage angezeigt wird. Davor schreiben wir nun folgendes:
Code:
<font face="arial" color="green">Dein Benutzername</font>
Wieder könnt ihr das blaue verändern. Z.b. in Red oder in White. Es gehen natürlich noch viel mehr Farben! Ihr könnt zur Hilfe auch eine Farbtabelle nehmen: http://www.whirlweaver.ch/farbtabelle.html
Lest die HEX Codes raus (Z.b. #00CCFF) und setzt das anstelle von green ein.
Die Schriftart lässt sich natürlich auch verändern. Wenn ihr face="arial" weglässt wird die Standart Schrift im Browser angezeigt.
Ein Bild als Schrift
Damit das ganze schöner aussieht, könnt ihr auch ein Bild als Schrift nehmen. Bei "Dein Benutzername" bis "Passwort wiederholen" ist das kein Problem.
Einfach anstelle von
Code:
Dein Benutzername
das hier nehmen:
Code:
<img src="schrift1.jpg">
Bei dem "Abschicken" Button könnt ihr das so lösen:
Code:
<input type="image" src="acc_create.png" onMouseOver= "this.src='img/acc_create2.png'"
onMouseOut= "this.src='img/acc_create.png'">
Da ist auch ein Mouseover Effekt eingepflanzt!
"Alles" verschieben
Wenn ihr "alles", sprich den gesamten Dialog von "Dein Benutzername" bis "Abschicken" verschieben wollt, macht es so:
Als erstes legen wir den ganzen Code in ein DIV Container:
Quote:
<div style=position:absolute;left:400px;top:0px;height: 100px;width:700;z-index:2;margin:0 auto;border:0px solid #000000;>
HIER KOMMT NUN DER GESAMTE <BODY> TEIL
</div>
Wenn ihr den Wert von left:400px auf left:200px verändert, ist der gesamte <body> Teil 200 Pixel weiter links. So könnt ihr nun alles verschieben.
Der z-index bedeutet auf welcher Ebene der Body Teil liegen soll. Das braucht ihr nur wenn eure DIV Container übereinander liegen. Je höher die Zahl deste näher am Bildschrim ist der Continer So könnt ihr euch das vorstellen.
