HTML/CSS、PHP、MySQLによるログインフォーム
このチュートリアルでは、HTML、PHP、および MySQL 拡張機能を使用してログイン フォームを作成する方法を示します。この認証フォームは、たとえば、ユーザーが自分のアカウントへのアクセスを承認するためにフォームを送信する必要がある場合に使用されます。ログイン フォームを作成する 4 つの手順:
< br />1- フォームの構造を含む HTML ファイルを作成します。
2- スタイルを定義する CSS ファイルを作成します。
3- チェックするファイル PHP ログインを作成します。フォームフィールドがデータベース内のテーブル値と一致する場合;
4- メインページから PHP ファイルを作成し、ログアウトします。
ステップ 1:まず、HTML ページ login.php.
login.php:
<html>
<頭>
<meta charset="utf-8">
<!-- スタイル ファイルをインポート -->
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
</head>
<ボディ>
<div id="コンテナ">
<!-- ログイン領域 -->
<form action="verification.php" method="POST">
<h1>接続</h1>
<label><b>ユーザー名</b></label>
<input type="text" placeholder="ユーザー名を入力してください" name="ユーザー名" 必須>
<ラベル><b>パスワード</b></ラベル>
<input type="password" placeholder="パスワードを入力してください" name="パスワード" が必要です>
<input type="submit" id='submit' value='LOGIN' >
<?php
if(isset($_GET['error'])){
$err = $_GET['error'];
if($err==1 || $err==2)
echo "<p style='color:red'>ユーザーまたはパスワードが間違っています</p>";
}
?>
</form>
</div>
</body>
</html>
ステップ 2:
スタイルを追加しますログイン ウィンドウに合わせてフォーマットします。style.css:
body{
;背景: #67BE4B;
}
#container{
;幅:400px;
margin:0 auto;
margin-top:10%;
}
/* 枠線付きフォーム */
form {
幅:100%;
パディング: 30px;
ボーダー: 1px ソリッド #f1f1f1;
背景: #fff;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
#container h1 {
幅: 38%;
マージン: 0 auto;
padding-bottom: 10px;
}
/* 全角入力 */
input[type=text], input[type=パスワード] {
幅: 100%;
パディング: 12px 20px;
マージン: 8px 0;
表示: インラインブロック;
ボーダー: 1px ソリッド #ccc;
box-sizing: border-box;
}
/* すべてのボタンのスタイルを設定します */
input[type=submit] {
背景色: #53af57;
色: ホワイト;
パディング: 14px 20px;
マージン: 8px 0;
境界線: なし;
カーソル: ポインタ;
width: 100%;
}
input[type=submit]:hover {
背景色: 白;
色: #53af57;
境界線: 1 ピクセルの実線 #53af57;
}
プレビュー:
verification.php:
<?php
session_start();
if(isset($_POST['username']) & ;amp;& isset($_POST['password']))
{
// データベース接続 ;
';
$db_name = 'db_name';
($db_host, $db_password,$db_name)
mysqli_real_escape_string
SQL インジェクションと XSS 攻撃を排除するため
$username = mysqli_real_escape_string($db,htmlspecialchars($_POST['username']));
$password = mysqli_real_escape_string($db,htmlspecialchars($_POST['password']));
if($ユーザー名 !== "" && $パスワード !== "")
{
$query = "SELECT count(*) FROM user where
ユーザー名 = '".$username."' およびパスワード = '".$password."' ";
$exec_query = mysqli_query($db,$query);
$response = mysqli_fetch_array($exec_request);
$count = $response['count(*)'];
if($count!=0) // 正しいユーザー名とパスワード
{
$_SESSION['ユーザー名'] = $ユーザー名;
header('場所: main.php');
}
他
{
header('場所:login.php?error=1'); // ユーザーまたはパスワードが間違っています
}
}
他
{
header('場所:login.php?error=2'); // 空のユーザーまたはパスワード
}
}
else
{
header('場所:login.php');
}
mysqli_close($db); // 接続を閉じます
>?>
ステップ 4:
最後のステップでは、サーバーは提供された情報が正しいかどうかを確認します。その場合、ユーザー名でセッションが作成され、main.php ページにリダイレクトされます。main.php:
class="prettyprint lang-php"><html>
<頭>
<meta charset="utf-8">
<!-- スタイル ファイルをインポート -->
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
</head>
<body style='background:#fff;'>
<div id="コンテンツ">
<!-- ユーザーがログインしているかどうかをテストします -->
<?php
session_start();
if($_SESSION['ユーザー名'] !== ""){
$user = $_SESSION['ユーザー名'];
// メッセージを表示します
echo "こんにちは $user、接続されました";
}
?>
</div>
</body>
</html>
< ;/div>
ボーナス:
次の質問が表示されます:切断する方法は?それは簡単です。ログアウトするボタンと、現在のセッションを破棄する小さな php コードを追加します。
<html>
<頭>
<meta charset="utf-8">
<!-- スタイル ファイルをインポート -->
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
</head>
<body style='background:#fff;'>
<div id="コンテンツ">
<a href='main.php?disconnection=true'><span>切断</span></a>
<!-- u かどうかをテストします。ユーザーは接続されています -->
<?php
session_start();
if(isset($_GET['切断']))
{
if($_GET['切断']==true)
{
session_unset();
header("location:login.php");
}
}
else if($_SESSION['ユーザー名'] !== ""){
$user = $_SESSION['ユーザー名'];
// メッセージを表示します
echo "<br>こんにちは $user、接続しています";
}
?>
</div>
</body>
</html>
フォームを送信するときに発生する問題は、クリックが数回行われるため、同じ検証操作やリダイレクトなどが複数回実行される可能性があることです。異常を引き起こす可能性があり、サーバーはエラーを生成して停止します。
解決策はこの記事にあります:& nbsp;コメントの有効化/無効化jQuery を使用した送信ボタン ?