Untitled

<?php
$rdbms = "mysql";
$host = "localhost";
$db = "taitaja";
$user = "root";
$pass = "";
$charset = "utf8";

$opt = [
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    PDO::ATTR_EMULATE_PREPARES => false,
];
$connectionString = "$rdbms:host=$host;dbname=$db;charset=$charset";

$pdo = new PDO($connectionString, $user, $pass, $opt);

if (isset($_POST['submit'])) {
    //lomakkeen vastaanotto
    $tunnus = filter_input(INPUT_POST, 'tunnus', FILTER_SANITIZE_STRING);
    $salasana = filter_input(INPUT_POST, 'salasana', FILTER_SANITIZE_EMAIL);


    if (empty($tunnus) or empty($salasana)) {
        $errorMsg = "Syötä sekä käyttäjätunnus että salasana";
    } else {
        $sql = "SELECT * FROM kayttaja WHERE tunnus=?";
        $pdo = new PDO($connectionString, $user, $pass, $opt);
        $statement = $pdo->prepare($sql);
        $statement->execute(array($tunnus));

        $user = $statement->fetch();
        if ($user) {

            if (password_verify($salasana, $user["salasana"])) {

                //onnistunut kirjautuminen
                session_start();
                $_SESSION["loggedin"] = $user["tunnus"];
                header("Location: entries.php");
            } else {
                $errorMsg = "Käyttäjätunnus tai salasana väärin<br>";
            }
        } else {
            $errorMsg = "Käyttäjätunnus tai salasana väärin<br>";
        }
    }
}
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Kirjautuminen</title>
        <style>
            body {
                font-size: 62.5%;
                background-color: white;
                font-family: sans-serif;
            }

            #wrapper {

            }

            #content {
                width: 50%;
                margin-left: auto;
                margin-right: auto;
                font-size: 1.8em;
            }
            ul {
                float: left;
                width: 40%;

            }

            ul li {
                box-sizing: border-box;
                float: left;
                width: 30%;
                list-style-type: none;
                font-size: 1.8em;
                margin-left: 10px;
                border: 1px solid white;
                border-radius: 5px;
                padding: 5px;
                background-color: white;
                text-align: center;

            }

            ul li a {
                text-decoration: none;
                color: black;
            }

            ul li:hover {
                background-color: #64bff8;
                border: 1px solid #64bff8;
            }

            #title {
                clear:both;
                text-align: center;
                margin-bottom: 50px;
                font-size: 3.5em;
                font-weight: bold;
                color: #555;
                padding-top: 2.5em;
            }

            form {
                width: 50%;
                margin-left: auto;
                margin-right: auto;
                border: 1px #b5e1fb solid;
                border-radius: 5px;
                padding: 25px;
                background-color: #54b8f7;
            }

            form label {
                display:inline-block;
                float: left;
                padding-top: 5px;
                text-align: right;
                width: 100px;
            }

            form input {
                margin-top: 5px;
                margin-bottom: 5px;
                display:inline-block;
                vertical-align:middle;
                margin-left:20px
            }

            #button1 {
                background-color: #139df4;
                border: 2px solid #139df4;
                width: 40%;
                height: 40px;
                margin-left: 30%;
                margin-right: 30%;
                margin-top: 30px;
                margin-bottom: 20px;
                border-radius: 5px;
                font-size: 1em;
            }

            #button1:hover {
                background-color: #0a7fca;
                border: 2px solid #0a7fca;
            }


            #lajit {
                margin-top: 70px;
            }

            #active {
                box-sizing: border-box;
                float: left;
                width: 30%;
                list-style-type: none;
                font-size: 1.8em;
                margin-left: 10px;
                border: 1px solid white;
                border-radius: 5px;
                padding: 5px;
                background-color: white;
                text-align: center;
                background-color: #64bff8;
                border: 1px solid #64bff8;
            }

            nav {

            }

            footer {
                text-align: center;
                font-size: 1.3em;
                color: grey;
                margin-top: 3em;
                max-width: 100%;
                min-width: 100%;
            }

        </style>
    </head>
    <body>
        <div id="wrapper">
            <nav>
                <ul>
                    <li id="active"><a href="login.php">Kirjaudu</a></li>
                    <li><a href="index.php">Ilmoittaudu</a></li>
                    <li><a href="entries.php">Ilmoittautumiset</a></li>
                </ul>
            </nav>
            <p id="title">Kirjautuminen</p>
            <?php
            if (isset($errorMsg)) {
                echo "<p>$errorMsg></p>";
            }
            ?>
            <div id="content">
                <form method="POST">
                    <p>
                        <label for="tunnus">Käyttäjätunnus</label>
                        <input type="text" name="tunnus">
                    </p>
                    <p>
                        <label for="salasana">Salasana</label>
                        <input type="password" name="salasana">
                    </p>
                    <button id="button1" name="submit" value="login">Kirjaudu</button>
                </form>
            </div>
        </div>
    </body>
</html>