2017-07-03 1 views
-1

Wir machen ein Student Record-Projekt und wir wollen eine Login-Seite erstellen, aber wir wissen nicht, wie Sie Sitzungen in HTML erstellen.Wie erstellt man Sitzungen in HTML für Login-Seite

Wir haben versucht, Login-Seite mit dem Formular zu machen und dann diese Seite auf die nächste Seite leiten und jetzt wollen wir Sitzungen in unserem Projekt implementieren.

werden Jede Hilfe für kleine Projekte

Antwort

0

Hier überprüfen Sie den Code ich in der Vergangenheit machen es hilfreich sein, arbeiten, wie Sie es drei Dateien die PHP-Datei für Sitzungen, Login-Seite und die Login-Check-Datei sind wollen . Wie oben im Kommentar erwähnt, können Sie nicht HTML für Sessions verwenden. Sie benötigen PHP, das ich im folgenden Code verwende. Aber Sie können eine Vorstellung davon bekommen, was ich unten zur Verfügung gestellt habe.

PHP-Datei für die Sitzung.

<?php 

     //Start session 
     session_start(); 

      //Check whether the session variable SESS_MEMBER_ID is present or not 
      if (!isset($_SESSION['login_ID']) || (trim($_SESSION['login_ID']) == '')) 
       { 
        header("location: login.php"); 
        exit(); 
       } 

      $session_id=$_SESSION['login_ID']; 

?> 

Login-Seite

<?php session_start(); 
include('logincheck.php');?> 

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/style.css" /> 
     <title>Login Page</title> 
    </head> 
<body> 
    <div class="form-wrapper"> 

     <form action="" method="post"> 

      <div class="form_title"> 
       <img src="img/form_title.gif" alt="Member Login" /> 
      </div> 

      <div class="form-item"> 
       <input type="text" name="user" required="required" placeholder="Username" autofocus required></input> 
      </div> 

      <div class="form-item"> 
       <input type="password" name="pass" required="required" placeholder="Password" required></input> 
      </div> 

      <div class="button-panel"> 
       <input type="submit" class="button" title="Log In" name="login" value="Login"></input> 
      </div> 

     </form> 
     <!--This is commented out because there is no sign up at the moment and forgot password--> 
     <!-- <div class="reminder"> 
     //<p>Not a member? <a href="#">Sign up now</a></p> 
     //<p><a href="#">Forgot password?</a></p> 
     </div> --> 
    </div> 

</body> 
</html> 

Anmeldung software update

<?php 
    include('dbcon.php'); 

    if (isset($_POST['login'])) 
     { 
      $username = mysqli_real_escape_string($con, $_POST['user']); 
      $password = mysqli_real_escape_string($con, $_POST['pass']); 

       $query = mysqli_query($con, "SELECT * FROM users_login WHERE userName='$username' and password='$password'"); 
       $row = mysqli_fetch_array($query); 
       $num_row = mysqli_num_rows($query); 

        if ($num_row > 0) 
         {   
          $_SESSION['login_ID']=$row['login_ID']; 

           if($_SESSION['login_ID'] == 2 || $_SESSION['login_ID'] == 3 || $_SESSION['login_ID'] == 4 || $_SESSION['login_ID'] == 5) 
           { 
            header('location: Admin_Page.php'); 
           } 
           else 
           { 
            header('location: home.php'); 
           } 
         } 
        else 
         { 
          echo '<h2 style="color:black;">Invalid Username and or Password Combination</h2>'; 
         } 
     } 

    ?> 

Hoffnung, das hilft.

+0

Für was war die Abstimmung unten? –

+0

Hier gibt es kein PHP, oder? Es ist nur reines clientseitiges HTML. –

+0

Ja, da ist. :) –

0

Sie sind möglicherweise nicht in der Lage, serverseitige Sitzungen zu erstellen, aber Sie können den clientseitigen Sitzungsspeicher verwenden, aber beachten Sie, dass leicht manipuliert werden kann. Sie sollten dafür einen modernen Browser haben:

if (typeof(Storage) !== "undefined") { 
    // Code for localStorage/sessionStorage. 
} else { 
    // Sorry! No Web Storage support.. 
} 

nun mit dem obigen Code, Sie Verwendung des Sitzungsspeichers zum Speichern der Login-Daten machen.

if (typeof(Storage) !== "undefined") { 
 
    // Code for localStorage/sessionStorage. 
 
    if (localStorage.getItem("user") != "") { 
 
    document.getElementById("login").style.display = "none"; 
 
    document.getElementById("loggedInUser").innerHTML = localStorage.getItem("user"); 
 
    document.getElementById("welcome").style.display = "none"; 
 
    } 
 
} else { 
 
    // Sorry! No Web Storage support.. 
 
} 
 

 
function login() { 
 
    var user = prompt("Enter Username"); 
 
    var pass = prompt("Enter Password"); 
 
    if (user = "admin" && pass == "letmein") { 
 
    alert("Success"); 
 
    loginUser(user); 
 
    } else { 
 
    alert("Wrong Credentials"); 
 
    logoutUser(); 
 
    } 
 
    return false; 
 
} 
 

 
function loginUser(user) { 
 
    if (typeof(Storage) !== "undefined") { 
 
    // Code for localStorage/sessionStorage. 
 
    localStorage.setItem("user", user); 
 
    document.getElementById("login").style.display = "none"; 
 
    document.getElementById("loggedInUser").innerHTML = user; 
 
    document.getElementById("welcome").style.display = "block"; 
 
    } else { 
 
    // Sorry! No Web Storage support.. 
 
    } 
 
} 
 

 
function logoutUser() { 
 
    if (typeof(Storage) !== "undefined") { 
 
    // Code for localStorage/sessionStorage. 
 
    localStorage.setItem("user", ""); 
 
    document.getElementById("login").style.display = "block"; 
 
    document.getElementById("loggedInUser").innerHTML = ""; 
 
    document.getElementById("welcome").style.display = "none"; 
 
    } else { 
 
    // Sorry! No Web Storage support.. 
 
    } 
 
}
<div id="login"> 
 
    Please login. <a href="#" onclick="return login();">Login</a> 
 
</div> 
 
<div id="welcome"> 
 
    Welcome <span id="loggedInUser"></span> 
 
</div>

Da StackSnippets nicht erlaubt Localstorage, JSBin bitte überprüfen.

0

Bevor Sie den HTML-Sitzungsspeicher erstellen, prüfen Sie, ob die Sitzung vom Browser unterstützt wird. Dies ist sehr wichtig, da verschiedene Browser hat unterschiedliche Kompatibilität

if (typeof(Storage) !== "undefined") { 
    // Code for localStorage/sessionStorage. 
} else { 
    // Sorry! No Web Storage support.. 
} 

Dann HTML-Speicher wie dieser

// Store 
localStorage.setItem("username", "John"); 
// Retrieve 
localStorage.getItem("lastname"); 

Verwendung Mit diesem Speicher

localStorage.clear(); 

Zusätzlich löschen können Sie jquery Sitzungsspeicher verwenden das ist auch ein Client-Seite Speicher

// Save data to sessionStorage 
sessionStorage.setItem('key', 'value'); 

// Get saved data from sessionStorage 
var data = sessionStorage.getItem('key'); 

// Remove saved data from sessionStorage 
sessionStorage.removeItem('key'); 

// Remove all saved data from sessionStorage 
sessionStorage.clear(); 
Verwandte Themen