alienHRNの訓練日記

IT業界初心者で勉強中。

◆20200909 授業メモ  おさらい問題演習(PHPタグとbodyタグを分けた記述の仕方有) 入力フォーム制作の手順・ 命令用語集(isset等)

授業内容

要約

 〇制作手順

1,値の送受信を作成
・どのページ間で値のやり取りがあるのか
・値を何に使うのか
値の名前
値の内容 例)数値の場合は範囲など

 

2,送信側の作成
・フォームパーツを作成

 

3,受信側の作成
・受け取った値の確認
・$_GETや$_POSTをvar_dumpする
・値のチェック
・値を使った必要な処理を作成
例)情報表示など
・正しい値の時の処理
・不正な値の時の処理

 

〇命令

☆isset(  )-定義されているかどうかを確認する→ラジオボックスの未入力確認等

☆ctype_digit(  )-( )内の与えられた文字列textの全てが数字かどうかを調べる関数

    → 故に小数点等、数字以外のモノが1つでも含まれているとはじかれる
    → 返り値:bool値(真偽値)
 
 
※ctype_digit( )以外の数字絡みの調べる関数
ctype_alnum( ) - 英数字かどうかを調べる
ctype_xdigit( ) - 16 進数を表す文字かどうかを調べる
is_numeric( ) - 変数が数字または数値形式の文字列であるかを調べる
is_int( ) - 変数が整数型かどうかを検査する
is_string( ) - 変数の型が文字列かどうかを調べる

 

 

〇osarai_get01

-------------------送信側---------------------
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="box">
    <div class="inner">
      <form action="page.php" method="get">
        <h1>キャラクター選択</h1>
        <select name="id">
          <!-- name属性をまずは確認 -->
          <option value="">選択してください</option>
          <option value="0">バラモス</option>
          <option value="1">ゾーマ</option>
          <option value="2">デスピサロ</option>
        </select>
        <input type="submit" value="表示">
      </form>
    </div>
  </div>
</body>

</html>


----------------------受信側-------------------

<?php

// getで受け取った値を出力(必須)
echo '<pre>';
var_dump($_GET);
echo '</pre>';
// ↑確認用

$playerList = [
  [
    'name' => 'ライアン',
    'life' => 500,
    'aliveImg' => 'img/p_01.gif',
  ],
  [
    'name' => 'クリフト',
    'life' => 400,
    'aliveImg' => 'img/p_02.gif',
  ],
  [
    'name' => 'アリーナ',
    'life' => 450,
    'aliveImg' => 'img/p_03.gif',
  ],
];
$enemyList = [
  [
    'name' => 'バラモス',
    'life' => 3500,
    'aliveImg' => 'img/e_01.gif',
  ],
  [
    'name' => 'ゾーマ',
    'life' => 4000,
    'aliveImg' => 'img/e_02.gif',
  ],
  [
    'name' => 'デスピサロ',
    'life' => 4500,
    'aliveImg' => 'img/e_03.gif',
  ],
  // ユーザから送られてくる値をチェック
  // 1、値が届いているか?:isset命令
  // 数値型
  // 2、データ型を確認
  // 文字列型であってかつ整数型に変換できるか
  // ctype_digit関数(整数に変換できるか確認する関数)
  // 3、数値の範囲の確認:比較演算子「<」「>」
];

// ユーザから送られてくる情報が不正な情報じゃないかチェックする
// エラーメッセージを管理する配列
$error = ;
// 1、値が届いているか?:isset命令
if (isset($_GET['id'])) {
  // ◇値が届いている時の処理

  $id = $_GET['id'];
  // 簡単で短い変数名に入れなおす。

  if (ctype_digit($id)) {
    // ctype_digit( )→与えられた文字列textの全てが数字かどうかを調べる関数
    // 故に小数点等、数字以外のモノが1つでも含まれているとはじかれる
    // 返り値:bool値(真偽値)
    if ($id < 0 || $id > 2) {
      $error = '3.不正な値です';
    }
    // △整数に変換できるときの処理
  } else {
    $error = '2.不正な値です';
    // △整数に変換できなかった時の処理
  }
else {
  $error = '1.値が届いていません';
  // ◇値が届いていないときの処理
}

?>

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="box">
    <div class="inner">
      <?php if (count($error) === 0) : ?>
        <!-- ↑ $errorの部屋数が0の時-->
        <h1>キャラクター</h1>
        <div class="name">
          名前:<?php echo $enemyList[$id]['name'?>
        </div>
        <div class="life">
          ライフ:<?php echo $enemyList[$id]['life'?>
        </div>
        <div class="img">
          <img src="<?php echo $enemyList[$id]['aliveImg'?>">
        </div>
      <?php else : ?>
        <h1>エラー</h1>
        <ul class="error">
          <?php foreach ($error as $val) : ?>
            <!-- foreach→配列とセットで使う -->
            <li><?php echo $val?></li>
          <?php endforeach?>
        </ul>
      <?php endif?>
    </div>
  </div>

</body>

</html>


※isset
→is~?
→~されていますか?という意味
set→定義

※404エラー
サーバーが受信していないときに出るエラー

※ctype_digit()以外の数字絡みの調べる関数
ctype_alnum() - 英数字かどうかを調べる
ctype_xdigit() - 16 進数を表す文字かどうかを調べる
is_numeric() - 変数が数字または数値形式の文字列であるかを調べる
is_int() - 変数が整数型かどうかを検査する
is_string() - 変数の型が文字列かどうかを調べる

〇ctype_digit()を使った数字の確認
echo '
<pre>';
var_dump(ctype_digit('10')); //t
var_dump(ctype_digit('10a')); //f
var_dump(ctype_digit('0.5')); //f
var_dump(ctype_digit(10)); //f→元々数値型のものはF。文字列型における数字のみT
var_dump(ctype_digit(0.5)); //f
echo '</pre>';

〇制作手順
1,値の送受信を作成
・どのページ間で値のやり取りがあるのか
・値を何に使うのか
値の名前
値の内容 例)数値の場合は範囲など

2,送信側の作成
・フォームパーツを作成

3,受信側の作成
・受け取った値の確認
・$_GETや$_POSTをvar_dumpする
・値のチェック
・値を使った必要な処理を作成
例)情報表示など
・正しい値の時の処理
・不正な値の時の処理

※命令と関数の違い
・命令→
echo
isset
array

・関数→



〇osarai_get02
-------------------送信側---------------------
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="box">
    <div class="inner">
      <ul>
        <li>
          <a href="page.php?id=0">バラモス</a>
        </li>
        <li>
          <a href="page.php?id=1">ゾーマ</a>
        </li>
        <li>
          <a href="page.php?id=2">デスピサロ</a>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

----------------------受信側-------------------
<?php
$playerList = [
  [
    'name' => 'ライアン',
    'life' => 500,
    'aliveImg' => 'img/p_01.gif',
  ],
  [
    'name' => 'クリフト',
    'life' => 400,
    'aliveImg' => 'img/p_02.gif',
  ],
  [
    'name' => 'アリーナ',
    'life' => 450,
    'aliveImg' => 'img/p_03.gif',
  ],
];
$enemyList = [
  [
    'name' => 'バラモス',
    'life' => 3500,
    'aliveImg' => 'img/e_01.gif',
  ],
  [
    'name' => 'ゾーマ',
    'life' => 4000,
    'aliveImg' => 'img/e_02.gif',
  ],
  [
    'name' => 'デスピサロ',
    'life' => 4500,
    'aliveImg' => 'img/e_03.gif',
  ],
];

$error = ;
if (isset($_GET['id'])) {
  $id = $_GET['id'];
  if (ctype_digit($id)) {
    if ($id < 0 || $id > 2) {
      $error = '3.不正な値です';
    }
  } else {
    $error = '2.不正な値です';
  }
else {
  $error = '1.値が届いていません';
}
?>


<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="box">
    <div class="inner">
      <?php if (count($error) === 0) : ?>
        <h1>キャラクター</h1>
        <div class="name">
          名前:<?php echo $enemyList[$id]['name'?>
        </div>
        <div class="life">
          ライフ:<?php echo $enemyList[$id]['life'?>
        </div>
        <div class="img">
          <img src="<?php echo $enemyList[$id]['aliveImg'?>">
        </div>
      <?php else : ?>
        <h1>エラー</h1>
        <ul class="error">
          <?php foreach ($error as $val) : ?>
            <li><?php echo $val?></li>
          <?php endforeach?>
        </ul>
      <?php endif?>
    </div>
  </div>

</body>

</html>

 

f:id:alienHRN:20200909115847p:plain



〇osarai_get03
-------------------送信側---------------------

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="box">
    <div class="inner">
      <form action="page.php" method="get">
        <h1>入力パーツ</h1>
        <dl>
          <dt>テキストボックス</dt>
          <dd>
            <input type="text" name="test01">
          </dd>
          <dt>テキストエリア</dt>
          <dd>
            <textarea name="test02" cols="30" rows="10"></textarea>
          </dd>
        </dl>
        <input type="submit" value="送信">
      </form>
    </div>
  </div>
</body>

</html>


-------------------受信側---------------------
<?php
echo '<pre>';
var_dump($_GET);
echo '</pre>';

$error = ;
// テキストボックスチェック
if (isset($_GET['test01'])) {
  // ◇test01ボックス内に入力があるか?
  $test01 = $_GET['test01'];
  // ◇true:test01に入力された値をGET
  if ($test01 === '') {
    // △$test01ボックスが空文字だったら?
    $test01 = '未入力';
    // △true:未入力と表示
  } else if (mb_strlen($test01) > 10) {
    // mb_strlen→文字列の長さをチェックする関数
    // □$test01の文字列の長さが10より多い場合
    $error = 'test01は10文字以下で入力してください';
    // □true:test01は10文字以下で入力してくださいと表示
  }
else {
  $error = 'test01の値が届いていません';
  //◇false:test01の値が届いていませんと表示
}



// テキスエリアチェック
if (isset($_GET['test02'])) {
  $test02 = $_GET['test02'];
  if ($test02 === '') {
    $error = 'test02が未入力です';
  } else if (mb_strlen($test02) > 100) {
    $error = 'test02は100文字以下で入力してください';
  }
else {
  $error = 'test02の値が届いていません';
}
?>
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="box">
    <div class="inner">
      <?php if (count($error) === 0) : ?>
        <h1>確認</h1>
        <dl>
          <dt>test01</dt>
          <dd>
            <?php echo $test01?>
          </dd>
          <dt>test02</dt>
          <dd>
            <?php echo nl2br($test02); ?>
          </dd>
        </dl>
      <?php else : ?>
        <h1>エラー</h1>
        <ul class="error">
          <?php foreach ($error as $val) : ?>
            <li><?php echo $val?></li>
          <?php endforeach?>
        </ul>
      <?php endif?>
    </div>
  </div>

</body>

</html>

 

f:id:alienHRN:20200909150003p:plain

osarai_get03 流れ図