初心者がteamlabのオンラインスキルアップ課題step1をやってみた（コード初心者向け記事）


dockerって何とか、DBとの連携でコード上で具体的にどうするのとか、初心者的にはイメージがつかないほど良くわからないので、teamlabさんのオンラインスキルアップ課題をやってみた。

[こちら](https://team-lab.github.io/skillup/)から課題にアクセスします。

STEP1の内容は下記のようになっています。
>1. インターネットのしくみ
2. WEBサーバについて
3. HTMLとCSSについて
4-a. 【Windows】Dockerと開発環境の作り方
4-b. 【Mac】Dockerと開発環境の作り方
5. PHPを書いてみる
6. PHPでGET/POSTをやってみる
7. データベースについて
8. SQLを書いてみる
9. PHPでデータベースを操作してみる
10. 10. GitとGitHubについて

#4-b：【Mac】Dockerと開発環境の作り方

1,2,3はわかった気になってとりあえず進めて、まずは4のDockerのセットアップから入ります。

    docker-compose -v

dockerがちゃんとインストールされているか上記のコマンドで確かめます。

    docker-compose up -d

teamlabさんのサイトからダウンロードしたフォルダに遷移して、上のコマンドを叩くとコンテナを作成して、起動します。

※Dockerのコマンドに関しては[こちら](https://qiita.com/wasanx25/items/d47caf37b79e855af95f)

<img width="444" alt="スクリーンショット 2019-04-09 15.36.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/395136/c1154846-bdeb-bd81-5052-a9e0c163dcc0.png">
なんかいろいろエラーは起きたのですが、無事？doneになっています。
「skillup-php-step1-master」をダウンロードして解凍したフォルダに移動したいけど移動できない！っていう場合にですが、フォルダさえ探せれば、フォルダごとターミナルに落としてあげることでpathが表示されるので、あとは先頭にcdつけるだけでフォルダに移動できるはずです。

#1-6：PHPでGET/POSTをやってみる

1-5は普通にコピペでコード貼って、Dockerで立ち上げたlocalhostにアクセスするだけなので、はしおります。

まず、エディターがない人は適当なエディターをインストールしてください。
(ぼくは[sublime](https://www.sublimetext.com/3)をつかっています。)

とりあえず、課題のpostだけやってみました

###index.html1

    <!DOCTYPE html>
    <html>
      <head>
    <meta charset="UTF-8" />
    <title>POSTのサンプル</title>
    </head>
    <body>
    <p>コメントしてください。</p>
        <form method="POST" action="index.php">
          <input name="comment" />
          <input type="submit" value="送信" />
         </form>
     </body>
    </html> 

###php1

    <?php
      //commentがPOSTされているなら
      if(isset($_POST["comment"])){
        //エスケープしてから表示
        $comment = htmlspecialchars($_POST["comment"]);
        print("あなたのコメントは「 ${comment} 」です。");
      } else {
    ?>

最後にこの課題があります。

>[課題]送信する内容を変更してみよう
掲示板に必要な情報としては少なくとも名前と本文が必要です。名前も送信し、受け取るように変更してみましょう。余力のある人はタイトル・文字色・メールアドレスなども追加してみましょう。

なんかとりえあえず複数のデータを送ってみてほしいとのことだったので、僕は次のようにしました。

###index.html2

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>POSTのサンプル</title>
      </head>
      <body>
    
    <style> 
    .cell{ 
      padding: 1px 15px; 
      margin: 1px 30px; 
      line-height: 0.1; 
    } </style> 
    
        <h1>「同窓会の参加有無」</h1>
        <div class=cell> 
          <form method="POST" action="index.php">
            <ol>
             <li><p>氏名：<input name="name"  /></p></li>
              <li><p>メール：<input name="mail" /></p></li>
              <li><p>参加可否：<input name="comment" /></p></li>
          <input type="submit" value="送信" style=         "width:150px;,height:100px;"/>
        </div> 
        </form>
      </body>
    </html>

###php 2

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>POSTのサンプル</title>
      </head>
      <body>
        <?php
          //commentがPOSTされているなら
              if(isset($_POST["mail"],$_POST["name"],$_POST["comment"])){
            //エスケープしてから表示
            $mails = htmlspecialchars($_POST["mail"]);
            $names = htmlspecialchars($_POST["name"]);
            $comments = htmlspecialchars($_POST["comment"]);
            print("あなたの入力した情報は以下になります。<br/>");
            print("名前：${mails}<br/>");
            print("メール：${names}<br/>");
            print("参加有無：${comments}<br/>");
          }else{
            print("情報の入力が正しくありません。");
            }
        ?>
      </body>
    </html>


震えるくらいクソコードであることはなんとなくですが、自覚してます....

#STEP1-9.PHPでデータベースを操作してみる

これやってみたのですが、すごい勉強になりました。
phpでデータベースをこうやっていじるんだ！みたいなのがなんとなくですが理解できます。

こちらも特に説明を読んでいけば問題なく進めました。

唯一初心者目線でひっかかりそうなのが、データベースにアクセスするときに自分でつけたデータベースの名前じゃないと、エラーになるので注意が必要。
僕の場合はdbname=「TEST」ではなくて「text」でしたので最初はエラってました。

###実行結果1
<img width="448" alt="スクリーンショット 2019-04-09 19.22.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/395136/c6d2f965-a5f3-3600-86b8-352b4f296f76.png">

先程はDBのname,textを全て表示したが今度はJohnにしぼったものだけを表示させます。

###実行コード

    <?php
    $dsn = 'pgsql:dbname=test;host=pgsql;port=5432';
    $user = 'postgres';
    $pass = 'example';
    
    try {
      // DBに接続する
      $dbh = new PDO($dsn, $user, $pass);
    //$query_result = $dbh->query('SELECT * FROM test_comments');
      $sth_select = $dbh->prepare('SELECT * FROM test_comments WHERE name = ?');
    // prepareメソッド(INSERT)最下部でinsertするname/textを定義
      $sth = $dbh->prepare('INSERT INTO test_comments (name, text) VALUES (?, ?)');
     // DBを切断する
      $dbh = null;
    } catch (PDOException $e) {
        // 接続にエラーが発生した場合ここに入る
        print "DB ERROR: " . $e->getMessage() . "<br/>";
        die();
    }
    ?>
    <?php
    //これでdbのnameとtextに新たに文字列が加わる
      $name = "John";
      $text = "Power to the People";
      $sth->execute(array($name, $text));
    ?>
    <?php
      $name = "John";
      $sth_select->execute(array($name));
      //実行したクエリから実行結果を取得している
      $prepare_result = $sth_select->fetchAll();
      foreach($prepare_result as $row) {
        print $row["name"] . ": " . $row["text"] . "<br/>";
      }
      $sth_select->execute(array($name));
    ?>

###実行結果2

<img width="319" alt="スクリーンショット 2019-04-09 20.34.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/395136/807398e2-c467-2562-17aa-b4f4cc0e914a.png">

とりあえず、無事表示されました。

次は気が向いたらSTEP2をやります。