PHP – űrlapfeldolgozás

2011-01-28

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>