Egyszerű regisztrációs űrlap, adatellenőrzés, és az adatok adatbázisba írása. Összesen 1 óra 13 perc.

Videó

CSS forráskód


body{
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background: #d9cb9e;
color: #464237;
}
a {
color: #dc3522;
text-decoration: none;
}
p, h1, form, button{
border: 0;
margin: 0;
padding: 0;
}
div#regform{
margin: 0 auto;
width: 400px;
padding: 20px;
border: solid 2px #c5b78a;
background: #eee5c7;
box-shadow: 3px 3px 4px #cbbc8d;
-moz-box-shadow: 3px 3px 4px #cbbc8d;
-webkit-box-shadow: 3px 3px 4px #cbbc8d;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
div#regform h1 {
font-size: 14px;
font-weight: bold;
margin-bottom: 8px;
}
div#regform p{
font-size: 11px;
margin-bottom: 20px;
border-bottom: solid 1px #c5b78a;
padding-bottom: 10px;
}
div#regform label{
display: block;
font-weight: bold;
text-align: right;
width: 150px;
float: left;
}
div#regform small{
color: #8e8462;
display: block;
font-size: 11px;
font-weight: normal;
text-align: right;
}
div#regform input[type="text"], div#regform input[type="password"], div#regform input[type="file"] {
float: left;
background: #fbf7e8;
padding: 5px;
border: 1px solid #c5b78a;
width: 200px;
margin: 2px 0 20px 10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
div#regform input[type="submit"]{
padding: 5px 20px;
border: 0;
margin-left: 160px;
background: #374140;
color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
div.clear {
clear: both;
}
div.message {
background: #ddd;
width: 420px;
padding: 10px;
margin: 10px auto;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 3px 3px 4px #cbbc8d;
-moz-box-shadow: 3px 3px 4px #cbbc8d;
-webkit-box-shadow: 3px 3px 4px #cbbc8d;
}
div.error {
background: url('../pics/icon_error.png') #dc3522 no-repeat center left;
color: #fff;
text-indent: 20px;
}
div.notice {
background: #374140;
color: #fff;
text-indent: 20px;
background: url('../pics/icon_notice.png') #374140 no-repeat center left;
}
table.get_array {
width: 400px;
border-collapse: collapse;
border-spacing: 0;
margin: 10px auto;
}
table.get_array tr:nth-child(odd) {
background: #f4f4f4;
}
table.get_array td {
padding: 5px;
border: 1px dotted #ddd;
vertical-align: top;
}
table.get_array th {
background: #ddd;
text-align: left;
padding: 5px;
border: 1px solid #ddd;
}
table.get_array tr td table {
margin: 0;
}
table.get_array tr td:first-child {
width: 100px;
}
div#content {
width: 440px;
margin: 0 auto;
}
div#header {
width: 400px;
margin: 20px auto;
background: #374140;
padding: 20px;
box-shadow: 3px 3px 4px #cbbc8d;
-moz-box-shadow: 3px 3px 4px #cbbc8d;
-webkit-box-shadow: 3px 3px 4px #cbbc8d;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
div#header a {
font-size: 15px;
text-transform: uppercase;
margin: 0 20px 0 0;
color: #fff;
}
div#header a:hover {
padding-bottom: 2px;
border-bottom: 2px solid #5c6867;
}
div#navbar {
width: 400px;
margin: 0 auto;
padding: 20px;
text-align: right;
}

PHP


if(isset($_POST["form_submit"])) {
$username = $_POST["username"];
$password1 = $_POST["password1"];
$password2 = $_POST["password2"];
$email1 = $_POST["email1"];
$email2 = $_POST["email2"];
$username_regex = '/^[a-z0-9\_\-\.]{3,10}$/';
$email_regex = '/^([A-z0-9\_\.\-]+)@([a-z0-9\_\-\.]+).([a-z]{2,})$/';
$error_data = false;
$error_avatar = false;
if(!$username) {
echo "<div class='message error'>Nincs megadva felhasználónév!</div>";
$error_data = true;
} elseif(strlen($username)<=2) {
echo "<div class='message error'>A felhasználónév túl rövid!</div>";
$error_data = true;
} elseif(!preg_match($username_regex, $username)) {
echo "<div class='message error'>A felhasználónév nem tartalmazhat nagybetűt / specális karaktert!</div>";
$error_data = true;
} else {
$sql = @ new mysqli("localhost","root","root","user");
if($sql->connect_errno) {
echo "<div class='message error'>Adatbázis hiba: ", $sql->connect_errno." ".$sql->connect_error;
exit();
}
$username = strip_tags($username);
$username = addcslashes($username, "%'=`");
$query = "SELECT `user_username` FROM `user` WHERE `user_username` = '".$username."'";
$result = $sql->query($query) or die("Hiba!");
if($result->num_rows>0) {
echo "<div class='message error'>A felhasználónév foglalt!</div>";
$error_data = true;
}
$sql->close();
}
if($password1) {
if($password1!=$password2) {
echo "<div class='message error'>A két jelszó nem egyezik!</div>";
$error_data = true;
} elseif(strlen($password1)<=3) {
echo "<div class='message error'>A jelszó legalább 4 karakter kell, hogy legyen!</div>";
}
} else {
echo "<div class='message error'>Nincs megadva jelszó!</div>";
$error_data = true;
}
if($email1) {
if($email1!=$email2) {
echo "<div class='message error'>A két e-mail cím nem egyezik!</div>";
$error_data = true;
} elseif(!preg_match($email_regex, $email1)) {
echo "<div class='message error'>Az e-mail cím nem megfelelő formátumú!</div>";			
$error_data = true;
} else {
$sql = @ new mysqli("localhost","root","root","user");
if($sql->connect_errno) {
echo "<div class='message error'>Adatbázis hiba: ", $sql->connect_errno." ".$sql->connect_error;
exit();
}
$query = "SELECT `user_email` FROM `user` WHERE `user_email` = '".$email1."'";
$result = $sql->query($query) or die("Hiba!");
if($result->num_rows>0) {
echo "<div class='message error'>Ezzel az e-mail címmel már regisztráltak!</div>";
$error_data = true;
}
}
} else {
echo "<div class='message error'>Nincs megadva e-mail cím!</div>";		
$error_data = true;
}
// csak akkor ellenőrizzük az avatart, ha fel van töltve, illetve
// az űrlap többi mezője nem tartalmaz hibát
if($_FILES["avatar"]["name"]!="" && $error_data==false) {
$avatar_pathinfo = pathinfo($_FILES["avatar"]["name"]);
$avatar_extension = $avatar_pathinfo["extension"];
$avatar_filesize = $_FILES["avatar"]["size"];
$avatar_tmp_name = $_FILES["avatar"]["tmp_name"];
$avatar_dimensions = getimagesize($avatar_tmp_name);
$avatar_mime_type = $avatar_dimensions["mime"];
$allowed_extensions = array("image/jpeg" => "jpg", "image/gif" => "gif", "image/png" => "png");
if(is_uploaded_file($avatar_tmp_name)) {
if($avatar_filesize>20000) {
echo "<div class='message error'>A fájlméret nem lehet több, mint 20kbyte.</div>";
$error_avatar = true;
} elseif(!in_array($avatar_extension,$allowed_extensions) || !isset($allowed_extensions[$avatar_mime_type])){
echo "<div class='message error'>Nem engedélyezett formátum.</div>";
$error_avatar = true;
} elseif($avatar_dimensions[0]!=100 && $avatar_dimensions[1]!=100) {
echo "<div class='message error'>A kép mérete kötelezően 100x100 képpont kell, hogy legyen!</div>";
$error_avatar = true;
} else {
// átnevezi a tmp fájlt egy véletlenszerűen generált fájlnévre
$avatar_local_tmp_name = $username.".".$allowed_extensions[$avatar_mime_type];
// az átnevezett tmp fájlt áthelyezi a saját tmp könyvtárunkba
move_uploaded_file($avatar_tmp_name,"tmp/".$avatar_local_tmp_name);
// saját tmp könyvtárból átmásolja az upload könyvtárba
copy("tmp/".$avatar_local_tmp_name,"upload/".$avatar_local_tmp_name);
// törli a saját tmp fájlt
unlink("tmp/".$avatar_local_tmp_name);
echo "<div class='message notice'>Sikeres képfeltöltés!</div>";
}
}
}
if($error_data==false && $error_avatar==false) {
echo "<div class='message notice'>Sikeres regisztráció!</div>";
$sql = @ new mysqli("localhost","root","root","user");
if($sql->connect_errno) {
echo "<div class='message error'>Adatbázis hiba: ", $sql->connect_errno." ".$sql->connect_error;
exit();
}
$query = "INSERT INTO `user` (`user_username`,`user_email`,`user_password`) VALUES ('".$username."', '".$email1."', '".sha1($password1)."')";
$sql->query($query) or die("Hiba!");
}
}
if(!isset($_POST["form_submit"]) || $error_data || $error_avatar) {

HTML forráskód


<div id="regform">
<form method="POST" enctype="multipart/form-data">
<h1>Regisztráció</h1>
<p>Kérjük töltse ki az alábbi űrlapot!</p>
<label for="username">
felhasználónév:
<small>legalább 3 karakter</small>
</label>
<input id="username" type="text" name="username" value="<?php echo isset($_POST["username"])?$_POST["username"]:""; ?>"/>
<label for="password1">
jelszó:
<small>legalább 4 karakter</small>
</label>
<input id="password1" type="password" name="password1"/>
<label for="password2">jelszó ismétlés:</label>
<input id="password2" type="password" name="password2"/>
<label for="email1">e-mail cím:</label>
<input id="email1" type="text" name="email1" value="<?php echo isset($_POST["email1"])?$_POST["email1"]:""; ?>"/>
<label for="email2">e-mail cím ismétlés:</label>
<input id="email2" type="text" name="email2" value="<?php echo isset($_POST["email2"])?$_POST["email2"]:""; ?>"/>
<label for="avatar">
avatar (100x100):
<small>JPG,GIF,PNG, max. 20kbyte</small>
</label>
<input id="avatar" type="file" name="avatar"/>
<input type="submit" name="form_submit" value="elküldés"/>
<div class="clear"></div>
</form>
</div>