Php

Login 1: Grundläggande

PHP enkelt login script

Min tanke är att vi tillsammans skall skapa ett enkelt loginscript gjort i PHP. Vi börjar med att skapa ett formulär och skickar data till en PHP fil som antingen verifierar användaren eller skickar den till en annnan sida.

Skapa tre filer: index.html login.php fel.html

I index lägger vi en grundstruktur av HTML med ett formulär och två input-fält och en loggain knapp.

index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webtastic</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form action="login.php" method="post">
        <label>Username: </label><input type="text" name="loginname" id="loginname" />
        <br/>
        <label>Password: </label><input type="password" name="password" id="password" />
        <br/>
        <button>Login please!</button>
    </form>
</body>
</html>

Login.php skall ta emot datan och kontrollera om du är en erkänd användare eller ej. Om du inte her det skall du hänvisas till fel.html Detta kallas att göra en positiv check. Om allt är ok så kör vi. Så småningom kommer vi vända på steken och istället kolla om något är fel så skickar vi bort dem direkt. login.php

<?php 
// Check if you are trying to loggin
if(isset($_POST['loginname']) && isset($_POST['password'])){
    $username = $_POST['loginname'];
    $password = $_POST['password'];
    if($password === 'stefan' && $password==='mypass') {
?>
<!DOCTYPE html>
<html>
    <head>
        <title>Webtastic</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body class="home">
        <h1>Welcome to Webtastic</h1>
        <p>Here you can find all the information you need to know about webtastic.</p>
    </body>
</html>
<?php
}
else {
    header('Location: hell.html');
    exit;
}

Tillslut har vi fel.html som iprincip bara har ett felmeddelande.

fel.html

<!DOCTYPE html>
<html>
    <head>
        <title>Webtastic</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <p>Du har fel inlogg eller lösen.</p>
        <button onclick="window.location.href='index.html'">Login again</button>
    </body>
</html>

Du har nu en enklare inloggningssida.