Answer to Question #238112 in HTML/JavaScript Web Application for Owen

Question

Answer to Question #238112 in HTML/JavaScript Web Application for Owen

Question #238112

4.1 A successful login should create a session variable that informs the server that the user has logged in. Set $_SESSION[‘loggedin'] to TRUE.

4.2 Check the session variable once the page has loaded. Display the welcome form instead of the login form if the user is already logged in.

4.3 Add a "Log Out" button to the welcome form that, when clicked, logs the user out by removing the session variable. The user should be sent to the same page after clicking the button, which now includes a login form.

4.4 Add an option to the login form that says "Remember me!" Save a cookie that identifies the user to the server if the box is ticked and the login is successful. Even if the browser is closed, the user should seem logged in on subsequent visits to the website.

Expert's answer

table:

CREATE TABLE `users` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `username` varchar(80) NOT NULL,
  `name` varchar(80) NOT NULL,
  `password` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

configuration.php

<?php
session_start();
$host = "localhost"; 
$user = "root"; 
$password = ""; 
$dbname = "task"; 

$con = mysqli_connect($host, $user, $password,$dbname);

if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

login.html

<div class="container">
    <form method="post" action="">
        <div id="login">
            <h1>Login</h1>
            <div>
                <input type="text" class="textbox" id="username" name="username" placeholder="Username" />
            </div>
            <div>
                <input type="password" class="textbox" id="password" name="password" placeholder="Password"/>
            </div>
            <div>
                <input type="submit" value="Submit" name="btn_submit" id="btn_submit" />
            </div>
        </div>
    </form>
</div>

style.css

.container{
    width:40%;
    margin:0 auto;
}

#login{
    border: 1px solid gray;
    border-radius: 3px;
    width: 470px;
    height: 270px;
    box-shadow: 0px 2px 2px 0px  gray;
    margin: 0 auto;
}

#login h1{
    margin-top: 0px;
    font-weight: normal;
    padding: 10px;
    background-color: cornflowerblue;
    color: white;
    font-family: sans-serif;
}

#login div{
    clear: both;
    margin-top: 10px;
    padding: 5px;
}

#login .textbox{
    width: 96%;
    padding: 7px;
}

#login input[type=submit]{
    padding: 7px;
    width: 100px;
    background-color: lightseagreen;
    border: 0px;
    color: white;
}

index.php

<?php
include "configuration.php";

if(isset($_POST['but_submit'])){

    $uname = mysqli_real_escape_string($con,$_POST['txt_uname']);
    $password = mysqli_real_escape_string($con,$_POST['txt_pwd']);

    if ($uname != "" && $password != ""){

        $sql_query = "select count(*) as cntUser from users where username='".$uname."' and password='".$password."'";
        $result = mysqli_query($con,$sql_query);
        $row = mysqli_fetch_array($result);

        $count = $row['cntUser'];

        if($count > 0){
            $_SESSION['uname'] = $uname;
            header('Location: home.php');
        }else{
            echo "Invalid username and password";
        }

    }

}

main.php

<?php
include "configuration.php";

if(!isset($_SESSION['uname'])){
    header('Location: index.php');
}

if(isset($_POST['but_logout'])){
    session_destroy();
    header('Location: index.php');
}
?>
<!doctype html>
<html>
    <head></head>
    <body>
        <h1>Homepage</h1>
        <form method='post' action="">
            <input type="submit" value="Logout" name="logout">
        </form>
    </body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #238112 in HTML/JavaScript Web Application for Owen

Comments

Leave a comment

Related Questions