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に改造しています。