【サンプルあり】htmlページ間のデータ受け渡し【$_GET変数】

PHP PHP

htmlページでPHPを動作させる場合、リンク等で別のページに移動した時に、前のページからデータを引き継ぎたい場合等あるかとおもいます。

今回は、その方法の一つとして、出勤・退勤ボタンを例にして$_GET変数を使用してみたいと思います。

出勤・退勤ボタンのサンプルコード

前準備として、こちらの記事内で紹介している、htmlページ内でPHPを動作させる方法を行って下さい。

簡単なCSSを準備しました。下記コードを C:/xampp/htdocs/test/style.cssに保存してください。

.push {
  cursor: pointer;
  display: inline-block;
  color: white;
  font-weight: bold;
  padding: 10px;
}
.btn_green{
  background-color: green;
}
.btn_red{
  background-color: red;
}

そして下記コードをコピー&ペーストしてC:/xampp/htdocs/test/study_btn.htmlに保存、 xamppを起動し、ブラウザで表示してください。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>出勤/退勤ボタン</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <?php
        if(isset($_GET['status'])==false){
            print '<p>直接アクセスしました。</p>';
        }else{
            if($_GET['status']==1){
                print '<p>出勤ボタンをクリックしました。</p>';
            }else if($_GET['status']==2){
                print '<p>退勤ボタンをクリックしました。</p>';
            }else {
                print '<p>想定していないstatus。</p>';
            }
        }
    ?>
    <a class="push btn_green" href="study_btn.html?status=1">出勤</a>
    <a class="push btn_red" href="study_btn.html?status=2">退勤</a>
</body>
</html>

出勤と退勤をクリックすると、それぞれ何を押したか表示されましたね。

押したボタンによって$_GET変数の中身が違うので、何を押したか判断できるので、出勤と退勤の区別がつけられる仕組みです。

ポイント解説

今回のページのaタグのリンク先はすべてstudy_btn.htmlとなります。
そしてstudy_btn.htmlのうしろに ?status=1 等がついていますね。

この ?○○=×× で、URLパラメータを設定できます。
アクセス先(今回はstudy_btn.html)で、このURLパラメータが何になっているか判定し、それぞれで処理を行っています。

“?○○=××” の○○部分をkey名、××部分をと呼びます。

$_GET変数は連想配列になっていますので、key名で参照すると、値が取得できます。

今回のページで、出勤をクリックすると、key名statusに値1が設定されます。
退勤をクリックすると、key名statusに値2が設定されます。

もし、”?○○=××” がない場合( http://localhost/test/study_btn.htmlでアクセスしたとき)はkey名も値もありませんので、誤作動しないように、isset関数でチェックします。

補足

こちらの記事で$_POST版を紹介していますが、これを改造したコードでもgetできます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>出勤/退勤選択</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <?php
        $select = 0;
        if(isset($_GET['status'])==false){
            print '<p>直接アクセスしました。</p>';
        }else{
            if($_GET['status']==1){
                print '<p>出勤ボタンをクリックしました。</p>';
            }else if($_GET['status']==2){
                print '<p>退勤ボタンをクリックしました。</p>';
                $select = 1;
            }else {
                print '<p>想定していないstatus。</p>';
            }
        }
    ?>
    <div>
      <form name="myForm" action="study_btn2.html" method="get">
        <p>
          <select id="id_status" name="status">
            <option value="1">出勤</option>
            <option value="2">退勤</option>
          </select>
        </p>
        <p>
          <input type="submit" value="送信">
        </p>
      </form>
    </div>
    <script>
        var obj = document.getElementById("id_status");
        obj.selectedIndex = <?=$select?>;
    </script>
</body>
</html>

methodをpostからgetにして、$_POSTを$_GETに改造しています。