フォームから送信まで、ログイン処理その1「PHP」

こんにちは、今日は、PHPで何回かに分けてログイン処理をしていこうと思います。
簡単に説明すると、

HTMLでフォームを作り、そのデータをPHPで処理して
SQLでデータベースにアクセスしてもしもIDとパスワードが一致すれば
ログインできるという処理をやっていこうと思います。

尚今回は新規作成のフォームは作りません。(授業でやった内容で申し訳ないです笑)
素人が組んだプログラムなので汚く、セキュリティなどは一切考えていないため
開発、独学などでやる方向け、
自分用の備忘録としてまとめます。

開発環境:
ブラウザ:GoogleChrome
エディタ:Visual Studio Code
PHP開発の管理ツール:XAMPP
データベース:MySQL
~フォームの作成まで


今回は、とてもシンプルなフォームを作成します。
キャプチャ1
エディタはHTMLではなくPHPにします。
まあいつも通り、PHPの形式の中にHTMLの基盤的なものを書いていきます。

<!DOCTYPE html>
<html lang=“ja”>
<head>
    <meta charset=“UTF-8”>
    <title>Document</title>
</head>
<body>
   
</body>
</html>

こんな感じですね。次にフォームを書いていきたいと思います。
PHP内に埋め込む方法もありますが、僕はHTMLとPHP別々に書きました。
フォーム


 

<h1>ログイン画面</h1>
<hr>
<br>
    <form action=“” method=“POST”>
        <input type=“hidden” name=“hid” value=“hid”/>
        ID:<input type=“text” name=“id” value=“”><br>
        PW:<input type=“password” name=“pw” value=“”>
        <input type=“submit” value=“ログイン”>
       
        </form>

はい、このような感じにしました。
先ほど載せた画像のようになるはずです。
action=””でmethodはPOSTにしてあります。
IDとPWの入力された値(value)が送信されたら~っていう感じでもいいのですが、
一応、チェックしやすいために「hidden」で見えないデータを送信しています。
これでフォームは完成です!

~送信まで


PHPの開発環境が整っていない方は整えてください。
ローカル!?です。
僕の場合だと
localhost/ファイルのパスといった感じです。
IPアドレス/ファイルパス
はい、では次に
PHPを書くために HTMLのbodyタグの中にこのように書きましょう。


<?php
?>



次にフォームから送られたら

if(isset($_POST[‘hid’])){
}

を書きます。(PHP内に)
こちらは先ほどフォームで指定した見えないデータを送信して
送信されたかを確認する処理です。
簡単に言えば、
もしも、データの値『hid』(value)が送信されてあれば trueで処理していきます。

$_POST[‘name名’]


これで第一弾は終了です。
お疲れさまでした!

まとめ!

<!DOCTYPE html>
<html lang=“ja”>
<head>
    <meta charset=“UTF-8”>
    <title>Document</title>
</head>
<body>
   <?php
  
if(isset($_POST[‘hid’])){
    if($_POST[‘id’] && $_POST[‘pw’]){

?>
<h1>ログイン画面</h1>
<hr>
<br>
    <form action=“” method=“POST”>
        <input type=“hidden” name=“hid” value=“hid”/>
        ID:<input type=“text” name=“id” value=“”><br>
        PW:<input type=“password” name=“pw” value=“”>
        <input type=“submit” value=“ログイン”>
        </form>
</body>
</html>

では次回はこちらを使って作っていきます!
下は続きです!
送信続きからデータベース接続まで、ログイン処理その2「PHP」

コメント

スポンサーリンク
スポンサーリンク
タイトルとURLをコピーしました