2017-07-03 6 views
-1

学生レコードベースのプロジェクトを作成しており、ログインページを作成したいが、htmlでセッションを作成する方法はわからない。ログインページのhtmlでセッションを作成する方法

フォームを使用してログインページを作成し、そのページを次のページに誘導しようとしましたが、今度はプロジェクトにセッションを実装したいと考えています。

すべてのヘルプは、私は小さなプロジェクトのために過去に使用したコードをチェックアウトここで役に立つ

答えて

0

しなければならないあなたは三つのファイルのセッションのためのPHPファイルを、ログインページおよびログインチェックファイルが存在したいのようにそれを動作させます。上記のコメントで述べたように、HTML for Sessionsを使用することはできません。私は以下のコードでPHPを使用する必要があります。しかし、あなたは私が下で提供したアイデアを得ることができます。

PHPファイルのためのセッション。

<?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']; 

?> 

ログインページ

<?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> 

ログインチェックファイル

<?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>'; 
         } 
     } 

    ?> 

は、この情報がお役に立てば幸いです。

+0

ダウン投票は何でしたか? –

+0

PHPはありません。クライアント側の純粋なHTMLです。 –

+0

はい、あります。 :) –

0

サーバー側のセッションを作成できない場合がありますが、クライアント側のセッション記憶域を作成することはできますが、は簡単に改ざんできることに注意してください。

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

ここで、ログイン情報を保存するためのセッションストレージを利用できます。 StackSnippets以来

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>

はlocalStorageをは、JSBinを確認してくださいことはできません。

0

HTMLセッションストレージを作成する前に、セッションのブラウザサポートを確認してください。異なるブラウザが、これはまた、あなたはjqueryのセッションストレージを使用することができます明確なストレージにこの

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

使用のよう

localStorage.clear(); 

をHTMLのストレージを使用する別の互換性

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

を持っているので、これは非常に重要ですクライアント側の記憶装置でもある

// 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(); 
関連する問題