テキストボックス

$_POST

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <title>カウンター</title>
</head>

<body>

  
  
  <form action='index.php' method='post'>

    <h2>カウンターアプリ</h2>
    <ol>
      <li>増減数を入力します。</li>
      <li>+ボタンを押すと、カウンターの数が増えます。</li>
      <li>-ボタンを押すと、カウンターの数が減ります。</li>
      <li>リセットボタンを押すと、カウンターの値がリセットされます。</li>
    </ol>

    <h3>カウンター</h3>
    <p>
      増減数：
      
      
      <input type='text' name='changeAmount'>
    </p>
    <p>実行：
      <button type='submit' name='plus' value='plus'>+</button>
      <button type='submit' name='minus' value='minus'>−</button>
      <button type='submit' name='reset' value='reset'>リセット</button>
    </p>
    <p>
      結果：25
    </p>

    <h3>カウンター履歴</h3>
    <div>5</div>
    <div>10</div>
    <div>15</div>
    <div>20</div>

    <h3>最後にリセットした時のカウンター値</h3>
    <p>24</p>

  </form>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <title>カウンター</title>
</head>

<body>

  
  


  <h2>カウンターアプリ</h2>
  <ol>
    <li>増減数を入力します。</li>
    <li>+ボタンを押すと、カウンターの数が増えます。</li>
    <li>-ボタンを押すと、カウンターの数が減ります。</li>
    <li>リセットボタンを押すと、カウンターの値がリセットされます。</li>
  </ol>

  <h3>カウンター</h3>
  <p>
    増減数：
    
    

  </p>
  <p>実行：
    <button type='submit' name='plus' value='plus'>+</button>
    <button type='submit' name='minus' value='minus'>−</button>
    <button type='submit' name='reset' value='reset'>リセット</button>
  </p>
  <p>
    結果：25
  </p>

  <h3>カウンター履歴</h3>
  <div>5</div>
  <div>10</div>
  <div>15</div>
  <div>20</div>

  <h3>最後にリセットした時のカウンター値</h3>
  <p>24</p>

  </form>
</body>

</html>


    // =======================
    // 問題1
    // =======================
    // 問題文
    const title1 = '`POSTメソッド`で送信するフォームを作成してください';
    // 実装タスク
    const task1 = '`*action*`属性に`*index.php*`を、`*method*`属性に`*post*`を指定した`*<form>*`タグを作成しよう';
    // ヒント
    const hint1 = `次のコードを参考にしてください。
~~~php
<form action='sample.php' method='post'>
~~~`;
    // アンサーコード
    const answer1_1 = '<form';
    const answer1_2 = "action='index.php'";
    const answer1_3 = "method='post'";
    const answer1_4 = '>';
    // =======================
    // 問題2
    // =======================
    // 問題文
    const title2 = '`テキストボックス`を作成してください';
    // 実装タスク
    const task2 = '`*type*`属性に`*text*`を、`*name*`属性に`*changeAmount*`を指定した`*<input>*`タグを作成しよう';
    // ヒント
    const hint2 = `次のコードを参考にしてください。
~~~php
住所：<input type='text' name='address'>
~~~`;
    // アンサーコード
    const answer2_1 = '<input';
    const answer2_2 = "type='text'";
    const answer2_3 = "name='changeAmount'";
    const answer2_4 = '>';
    // =======================
    // 手順
    // =======================
    const questions = [
        {
            title: title1,
            tests: [
                {
                    title: task1,
                    hint: hint1,
                    test: () => {
                        isContainTextInEditor(answer1_1);
                        isContainTextInEditor(answer1_2);
                        isContainTextInEditor(answer1_3);
                        isContainTextInEditor(answer1_4);
                    }
                }
            ]
        },
        {
            title: title2,
            tests: [
                {
                    title: task2,
                    hint: hint2,
                    test: () => {
                        isContainTextInEditor(answer2_1);
                        isContainTextInEditor(answer2_2);
                        isContainTextInEditor(answer2_3);
                        isContainTextInEditor(answer2_4);
                    }
                }
            ]
        }
    ];


フロントエンドを実装しよう

完成形を操作してみよう

HTML内でPHP変数を表示する方法

PHPのforeach文を使用したHTMLタグの動的生成

```php
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>動物の名前</title>
</head>
<body>
    <?php
    // 動物名の配列を定義
    $animals = ['犬', '猫', 'ウサギ', '鳥', 'カメ'];

    // 配列の要素を繰り返し処理し、各動物の名前を段落として表示
    foreach ($animals as $animal) {
        echo '<p>' . $(1) . '</p>';
    }
    ?>
</body>
</html>
```

隠しフィールド

動的なページを実装しよう

バックエンドの実装を始めよう

function/引数（複数）

~~~php
//nameとageを持つ、関数を定義してみましょう
function SelfIntroduction($(1), $(2)){
    echo  "私は".$name"、".$age."です";
}
$name = "佐藤"; 
$age = "52歳";
SelfIntroduction($name, $age);

funciton/return

~~~php
//関数を定義
function Greeting(){
    $(1) "Hello World";
}


＋と−ボタンでカウンターの数を増減させよう

E_ERROR

バリデート

ユーザーの入力値をチェックしよう

setcookie

Cookieの受信と値の取得

カウンターの数を保存できるようにしよう

session_start();

Session変数の配列操作

配列の要素の追加/array_push

```php
$colors = array('あか', 'あお', 'みどり', 'きいろ');
$colors$(1) = 'しろ';
```