form – スグブログ https://sugublog.org ブログ運営について発信中 Tue, 05 Dec 2023 12:37:41 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://sugublog.org/wp-content/uploads/2021/07/icon_20210703-min-150x150.png form – スグブログ https://sugublog.org 32 32 【PHP基礎】簡単なログイン画面を作成する！htmlのform使用 https://sugublog.org/php-base-login/ https://sugublog.org/php-base-login/?noamp=mobile#respond Thu, 19 Aug 2021 14:55:59 +0000 https://sugublog.org/?p=4037

PHPを使用して様々なサービスや、サイトを作成しようと思っている人も多い事でしょう。 「PHPサイト公開したけど、ユーザーを限定したい」 「ログインユーザによって別ページを表示させたい」 そういった要望もあると思います。 […]]]>

PHPを使用して様々なサービスや、サイトを作成しようと思っている人も多い事でしょう。

「PHPサイト公開したけど、ユーザーを限定したい」

「ログインユーザによって別ページを表示させたい」

そういった要望もあると思います。例えば管理者ユーザでログインすれば色々設定できるページへ、一般ユーザでログインすればそのサイトを使用するページに飛ばしたりするようなログインページです。

そこで今回は簡単にログインページを作成して見ようと思います。そしてログインするユーザで別のページを表示させる事も行いたいと思います。

簡単でコピペでも使用できますので、カスタマイズなどして使用して見て下さい。

PHPで簡単なログイン画面を作成

わたくしはローカル環境でPHPの環境を構築しています。

同じくパソコン1台のローカル環境でPHPを行いたい場合、下記の記事を参考にしてPHP検証環境を構築して見て下さい。

あわせて読みたい
【php応用】パソコン1つでphp環境を作成する！DBやCSSまで連携 php開発環境を作成したい、という事で、パソコン1つで、ローカル環境にphp環境を構築しました。 データベース連携やCSS連携もしました。 テンプレートにもなるので、コ…

今回のログインページ構成

ただのログイン画面では面白くないので、管理者とユーザーのパスワードを変えて、それぞれのページに移動する様にします。今回のログインの流れは下記となります。

  1. ログイン画面を作成して、パスワード入力する
  2. 管理者パスワードであれば、管理者ページへ。ユーザーパスワードであればユーザーページへ

今回作成するのは下記の３ページです。

ログイン成功時のページを作成

まずはログイン成功した場合のページを、簡単に作成しておきます。

ファイル名：login_success_manager.php

<html>
 <head>
  <meta charset="UTF-8">
  <title>ログイン成功</title>
  <link rel="stylesheet" href="css/test.css" type="text/css">
 </head>
 <body>
    <h1>ログイン</h1>
    <h2>管理者としてログイン成功しました</h2>
 </body>
</html>

ファイル名：login_success_users.php

<html>
 <head>
  <meta charset="UTF-8">
  <title>ログイン成功</title>
  <link rel="stylesheet" href="css/test.css" type="text/css">
 </head>
 <body>
    <h1>ログイン</h1>
    <h2>ユーザーページにログイン成功しました</h2>
 </body>
</html>

簡単なhtmlで作成しました。

ログインページ作成

ではログインページを作成します。ログインページのコードを以下に貼ります。

<?php
if($_POST["pass"] == "manager"){
  header('Location: login_success_manager.php');
exit;
}
if($_POST["pass"] == "user"){
    header('Location: login_success_users.php');
exit;
}
?>
<html>
 <head>
  <meta charset="UTF-8">
  <title>ログイン</title>
  <link rel="stylesheet" href="css/test.css" type="text/css">
 </head>
 <body>
    <h1>ログインページ</h1>
    <h2>ログイン</h2>
<form method="POST" action="">
   <label>パスワード入力してください</label></br>
      <input type="text" name="pass" value=""></br></br>
      <input type="submit" value="ログイン">
</form>
 </body>
</html>

ログインページのご説明

コードの詳細な説明をします。まず最初のphpの部分の説明になります。

<?php
if($_POST["pass"] == "manager"){
  header('Location: login_success_manager.php');
exit;
}
if($_POST["pass"] == "user"){
    header('Location: login_success_users.php');
exit;
}
?>

今回の管理者パスワードは「manager」ユーザーのパスワードは「user」にしています。

もしパスワードが「manager」であれば、先程作成した「login_success_manager.php」に移動するコードです。

もしパスワードが「user」であれば、先程作成した「login_success_users.php」に移動するコードです。

パスワードが間違っていた場合は、ログインページのhtmlが表示されるだけです。

<form method="POST" action="">
   <label>パスワード入力してください</label></br>
      <input type="text" name="pass" value=""></br></br>
      <input type="submit" value="ログイン">
</form>

formタグのメソッドは「POST」でactionが空白なので、このページにsubmit（送信）する仕組みです。

inputタグでユーザーに入力する窓を作成しています。

ユーザーが入力した文字列を、passという変数に入れます。

ログインボタンを押すと、このページにパスワードを変数passに入れて送信します。

受け取る側は「$_POST[“pass”]」で取得できますので、先程のPHPでパスワード判定をしています。

パスワードによって、管理者ページに行くか、ユーザーページにいくか、このページのままかの分岐点にしています。

ログイン画面でパスワードを入れてログインして見る

ログイン

では保存して、ログインページを表示して見ます。

ログインページ表示

管理者としてログイン

では管理者のパスワード「manager」を入力して、ログインボタンを押してみます。

管理者ログイン成功

先程作成した管理者ログインページが表示されれば成功です。

ユーザーとしてログイン

では今度はユーザーとしてログインして見ます。パスワードに「user」と入力してログインボタンを押します。

先程作成したユーザーのログインページに、移動出来ればOKです。

ログイン失敗してみる

では最後に適当な文字を入力して、ログインボタンを押してみます。

ログインページのまま、どのページにもいかなければOKです。

PHPで簡単なログイン画面を作成してみるまとめ

python
Binary code abstract background, Digital communication code.

今回はPHPとHTMLのformタグを使用して、簡単なログインページを作成しました。

管理者とユーザーでパスワードを分け、それぞれのページに移動するような仕組みにしてみました。

コピペして色々カスタマイズして、ログインページを楽しんで見て下さい。

]]> https://sugublog.org/php-base-login/feed/ 0