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

Videó

Videó Videó Videó Videó Videó 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>