LoginSignup
8
13

More than 3 years have passed since last update.

@gamelike319(ムトウ ヨシオ)

Webアプリ開発入門 PHP+MySQL編: 掲示板作りの忘備録

Posted at

Webアプリ開発入門 PHP+MySQL編1: 掲示板を作ろう

01:Webアプリの仕組みを理解しよう

LAMPとは
LAMP(ランプ)とは、Webアプリケーションの実行環境の組み合わせです。
Webアプリケーションの実行環境では、ふつう、OSとWebサーバ、データベース、
スクリプト言語を組み合わせて利用します。

中でもLAMPは、Webサービスがはやり始めたころからある、オーソドックスな組み合わせです。
OSにLinux(リナックス)、WebサーバにApache(アパッチ)、データベースにMySQL(マイエスキューエル)、
スクリプト言語にPHP(ピーエイチピー)という組み合わせを利用し、
その頭文字をとって、LAMP(ランプ)と呼びます。

構築する手順
今回のレッスンでは、次の手順で、
簡単な1行掲示板を構築していきます。

  1. Webページを用意する
  2. DBを準備する
  3. PHPでDBを参照する
  4. 投稿フォームを追加する
  5. PHPでDBに書き込みする
  6. 掲示板の機能をまとめる
  7. 削除ボタンを追加する
  8. データベースにカラムを追加する
  9. 掲示板の見た目を整える

02:Webページを作ってみよう

◆①演習課題「表に行を追加する」

右側のbbs.htmlファイルは、掲示板の発言リストに「日時」と「投稿内容」をテーブルで表示します。
1行目には、日時が「2016-11-01」、投稿内容が「hello」となっています。
これを以下のように修正してください。

  • 表の2行目(見出し行含めると3行目)に、日時が「2017-12-01」で、 投稿内容が「世界の皆さんこんにちは」と表示する 採点して、すべてのジャッジに正解すれば、演習課題クリアです！
lesson1.php
<h1>paiza掲示板</h1>

<h2>発言リスト</h2>
<table>
    <tr><th>日時</th><th>投稿内容</th></tr>
    <tr>
        <td>2016-11-01</td>
        <td>hello</td>
    </tr>
    <!-- ここに追加 -->
    <tr>
        <td>2017-12-01</td>
        <td>世界の皆さんこんにちは</td>
    </tr>
</table>

03:MySQLを準備しよう

◆① 演習課題「データベースのテーブルにレコードを挿入する」

右側には、lessonデータベースにbbsというテーブルがあります。
phpMyAdminのSQLタブで、SQLのINSERT文でbbsテーブルに次のレコードを挿入してください。

  • idが「3」
  • contentが「世界のみなさんこんにちは」
  • updated_atが「2016-12-01 00:00:00」

採点をして、すべてのジャッジに正解すれば、演習課題クリアです！

lesson1.sql
INSERT INTO bbs (id, content, updated_at) VALUES (3, '世界のみなさんこんにちは', '2016-12-01 00:00:00')

04:PHPでデータベースを参照しよう

今回取り上げたSQL文
-- データを追加する
INSERT INTO bbs(id, content, updated_at)
VALUES
(4, "hello paiza", "2016-10-16 04:00:00");

◆①演習課題「SELECTで1レコードだけ表示しよう」

右側のbbs.phpファイルは、lessonデータベースに接続します。
このbbs.phpを以下のように修正してください。

  • PHPで、SELECTを行い、bbsテーブルのレコードを取得する
  • 取得したデータから、最初の1行だけ表示する。

採点して、すべてのジャッジに正解すれば、演習課題クリアです！

lesson1.php
<?php
$pdo  = new PDO("mysql:host=127.0.0.1;dbname=lesson;charset=utf8", "root", "");

$sql  = "SELECT * FROM bbs ORDER BY updated_at";
$stmt = $pdo->prepare($sql);
$stmt -> execute();

$row  = $stmt -> fetch(PDO::FETCH_ASSOC);

print_r($row)
?>

◆②演習課題「SELECTですべてのレコードを表示しよう」

右側のbbs.phpファイルは、lessonデータベースに接続して、bbsテーブルの最初の1行だけ表示します。
このファイルを以下のように修正してください。
- while文を用いて、DBのレコードをすべて表示する。
採点して、すべてのジャッジに正解すれば、演習課題クリアです！

lesson2.php
<?php

$pdo  = new PDO("mysql:host=127.0.0.1;dbname=lesson;charset=utf8", "root", "");

$sql  = "SELECT * FROM bbs ORDER BY updated_at";
$stmt = $pdo->prepare($sql);
$stmt -> execute();

// ###ここから下を修正###

while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) {
  print_r($row);
  echo("<br/>");
}

?>

◆③演習課題「SELECTでカラムのデータを表示しよう」

右側のbbs.phpファイルは、lessonデータベースに接続して、bbsテーブルのすべてのレコードから、"id"と"updated_at"の2つのカラムのデータだけ表示します。
このファイルを以下のように修正してください。
- while文を用いて、"content"カラムのデータも表示する。
"content"カラムのデータは、"updated_at"カラムのデータの後ろで表示してください。
採点して、すべてのジャッジに正解すれば、演習課題クリアです！

lesson3.php
<?php

$pdo  = new PDO("mysql:host=127.0.0.1;dbname=lesson;charset=utf8", "root", "");

$sql  = "SELECT * FROM bbs ORDER BY updated_at";
$stmt = $pdo->prepare($sql);
$stmt -> execute();

// ###ここから下を修正###

while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) {
    echo $row["id"];
    echo $row["updated_at"];
    echo $row["content"];
    echo "<br>";
}

?>

05:フォームでメッセージを投稿 (6:29)

◆①演習課題「フォームを設置する」

右側のbbs.phpファイルでフォームを作ろうとしています。
このファイルを以下のように修正してください。
- フォームに、「input」タグを追加する。
- フォームに、「button」タグを追加して、「送信」と表示する。
ただし、フォームのボタンを押して、データを送信する必要はありません。
採点して、すべてのジャッジに正解すれば、演習課題クリアです！

lesson1.html
<html>
<body>

<form action="#">
    <label>投稿内容</label>
    <!-- ###ここにinput要素を追加### -->
    <input>
    <!-- ###ここにbutton要素を追加### -->
    <button>送信</button>
</form>

</body>
</html>

◆②演習課題「フォームでPOSTする」

右側のbbs.phpファイルは、投稿内容欄のデータを送信して表示しようとしています。
このファイルを以下のように修正してください。
- フォームタグの「action」属性の値を「bbs.php」とする。
- フォームタグに「method」属性を追加して、値を「post」とする。
採点して、すべてのジャッジに正解すれば、演習課題クリアです！

lesson1.html
<html>
<body>

<?php
if (isset($_POST["content"])) {
    $content = $_POST["content"];
}
else {
    $content = "なし";
}
echo "投稿内容を受信:" . $content;

?>

<!-- ###次の行を修正### -->
<form action="bbs.php" method="post">
    <label>投稿内容</label>
    <input type="text" name="content">
    <button type="submit">送信</button>
</form>

</body>
</html>

③演習課題「フォームでPOSTした結果を表示する」

右側のbbs.phpファイルは、投稿内容欄のデータを送信して表示しようとしています。
このファイルを以下のように修正してください。

  • $_POST["content"]の中身が存在すれば、その内容を表示する。

採点して、すべてのジャッジに正解すれば、演習課題クリアです！
```html:lesson1.html

<?php
if (isset($_POST["content"])) {
$content = $_POST["content"];
}
else {
$content = "なし";
}
echo "投稿内容を受信:" . $content;
?>

投稿内容 送信 



##06:PHPでデータベースに書き込もう (4:54)

###①演習課題「POSTされた値を使ってINSERTする」
右側のbbs.phpでは、フォームから送信された投稿内容を、データベースに保存しようとしています。

PHPでPOSTされた値を受け取ってINSERTするコードを作成してください。

採点して、すべてのジャッジに正解すれば、演習課題クリアです！

```html:lesson1.html
<html>
<body>

<?php
// データベースへの接続設定
$pdo  = new PDO("mysql:host=127.0.0.1;dbname=lesson;charset=utf8", "root", "");

// 受け取ったレコードの追加
if (isset($_POST["content"])) {
    $content   = $_POST["content"];
    $sql  = "INSERT INTO bbs (content, updated_at) VALUES (:content, NOW());";
    $stmt = $pdo->prepare($sql);
    $stmt -> bindValue(":content", , PDO::PARAM_STR); // ### 書き込む変数を引数に記述 ###
    $stmt -> execute();
}

// 全てのレコードを取得
$sql  = "SELECT * FROM bbs ORDER BY updated_at DESC";
$stmt = $pdo->prepare($sql);
$stmt -> execute();

// 全てのレコードを表示
while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) {
    print_r($row);
    echo("<br/>");
}
?>

<h2>投稿フォーム</h2>
<form action="bbs.php" method="post">
  <label>投稿内容</label>
  <input type="text" name="content">
  <button type="submit">送信</button>
</form>

</body>
</html>

模範解答1
bindValueに、$contentを渡す

②演習課題「間違い探し その1 - フォームの間違い」

右側のbbs.phpでは、フォームから送信された投稿内容を、
データベースに保存しようとしていますが、フォームに間違いがあります。
正常に動作するようにフォームを修正してください。

採点して、すべてのジャッジに正解すれば、演習課題クリアです！

lesson2.html
<html>
<body>

<?php
// データベースへの接続設定
$pdo  = new PDO("mysql:host=127.0.0.1;dbname=lesson;charset=utf8", "root", "");

// 投稿内容を表示
if (isset($_POST["content"])) {
  echo "投稿内容:" . $_POST["content"];

  // レコードの追加
  $content   = $_POST["content"];
  $sql  = "INSERT INTO bbs (content, updated_at) VALUES (:content, NOW());";
  $stmt = $pdo->prepare($sql);
  $stmt -> bindValue(":content", $content, PDO::PARAM_STR);
  $stmt -> execute();
}
?>

<h2>投稿フォーム</h2>
<form action="bbs.php" method="post">
  <label>投稿内容</label>
  <input type="text" name="kontent">
  <button type="submit">送信</button>
</form>

<?php
// 全てのレコードを取得
$sql  = "SELECT * FROM bbs ORDER BY updated_at";
$stmt = $pdo->prepare($sql);
$stmt -> execute();

// 全てのレコードを表示
while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) {
    print_r($row);
    echo("<br/>");
}
?>

</body>
</html>

模範解答1
$stmt -> フォームの送信データ名を「content」にする

③ 演習課題「間違い探し その2 - カラム名の間違い」

右側のbbs.phpでは、フォームから送信された投稿内容を、データベースに保存しようとしていますが、書き込みコードに間違いがあります。

正常に動作するよう、コードを修正してください。

採点して、すべてのジャッジに正解すれば、演習課題クリアです！

lesson3.html
<html>
<body>

<?php
// データベースへの接続設定
$pdo  = new PDO("mysql:host=127.0.0.1;dbname=lesson;charset=utf8", "root", "");

if (isset($_POST["content"])) {
  // 投稿内容を表示
  echo "投稿内容:" . $_POST["content"];

  // レコードの追加
  $content   = $_POST["content"];
  $sql  = "INSERT INTO bbs (comtent, updated_at) VALUES (:content, NOW());";
  $stmt = $pdo->prepare($sql);
  $stmt -> bindValue(":content", $content, PDO::PARAM_STR);
  $stmt -> execute();
}
?>

<h2>投稿フォーム</h2>
<form action="bbs.php" method="post">
  <label>投稿内容</label>
  <input type="text" name="content">
  <button type="submit">送信</button>
</form>

<?php
// 全てのレコードを取得
$sql  = "SELECT * FROM bbs ORDER BY updated_at";
$stmt = $pdo->prepare($sql);
$stmt -> execute();

// 全てのレコードを表示
while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) {
    print_r($row);
    echo("<br/>");
}
?>

</body>
</html>

模範解答1
$stmt -> 書き込みコードのカラム名を「content」にする

07:掲示板の機能をまとめよう (6:21)

①演習課題「データベースの内容をテーブルで表示する」
右のbbs.phpでは、データベースからbbsテーブルの全レコードをHTMLのテーブルで表示しようとしています。

レコードの3つのカラム、「id」「updated_at」「content」の内容を表示するように、
while文の中にコードを追加してください。

採点をして、すべてのジャッジに正解すれば、演習課題クリアです！

lesson1.html
<html>
<body>

<?php
// データベースへの接続設定
$pdo  = new PDO("mysql:host=127.0.0.1;dbname=lesson;charset=utf8", "root", "");

// 全てのレコードを取得
$sql  = "SELECT * FROM bbs ORDER BY updated_at";
$stmt = $pdo->prepare($sql);
$stmt -> execute();
?>

<!-- 全てのレコードをHTMLテーブルで表示 -->
<table border=1>
    <!-- HTMLテーブルの1行目の表示 -->
    <tr>
        <th>id</th>
        <th>日時</th>
        <th>投稿内容</th>
    </tr>

    <!-- HTMLテーブルの2行目移行で全てのレコードを表示 -->
    <?php while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) { ?>
        <tr>
            <td><?= $row["id"] ?></td>
            <td><?= $row["updated_at"] ?></td>
            <td><?= $row["content"] ?></td>
        </tr>
    <?php } ?>
</table>

</body>
</html>

②演習課題「間違い探し - テーブルが崩れる」

右のbbs.phpでは、データベースからbbsテーブルの全レコードを
HTMLのテーブルで表示しようとしていますが、テーブルに間違いがあります。
正常に動作するようにテーブルを修正してください。
採点して、すべてのジャッジに正解すれば、演習課題クリアです！

lesson2.html
<html>
<body>

<?php
// データベースへの接続設定
$pdo  = new PDO("mysql:host=127.0.0.1;dbname=lesson;charset=utf8", "root", "");

// 全てのレコードを取得
$sql  = "SELECT * FROM bbs ORDER BY updated_at";
$stmt = $pdo->prepare($sql);
$stmt -> execute();
?>

<!-- 全てのレコードをHTMLテーブルで表示 -->
<table border=1>
    <!-- HTMLテーブルの1行目の表示 -->
    <tr>
        <th>id</th>
        <th>日時</th>
        <th>投稿内容</th>
    </tr>

    <!-- HTMLテーブルの2行目移行で全てのレコードを表示 -->
    <?php while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) { ?>
        <tr>
            <td><?= $row["id"] ?></td>
            <td><?= $row["updated_at"] ?></td>
            <td><?= $row["content"] ?></td>
        </tr>
    <?php } ?>
</table>

</body>
</html>

08:投稿の削除機能を作ろう (4:39)

①演習課題「削除ボタンを追加」
右側のbbs.phpでは、bbsテーブルのすべてのレコードをHTMLのテーブルで表示しています。

このテーブルの4列目に、削除ボタンを追加してください。
削除ボタンには、「button」タグを使い、テキストに「削除」と表示します。

この演習問題では、削除ボタンが実際に動作する必要はありません。

採点して、すべてのジャッジに正解すれば、演習課題クリアです！

lesson1.html
<html>
<body>

<?php
// データベースへの接続設定
$pdo  = new PDO("mysql:host=127.0.0.1;dbname=lesson;charset=utf8", "root", "");

// 全てのレコードを取得
$sql  = "SELECT * FROM bbs ORDER BY updated_at";
$stmt = $pdo->prepare($sql);
$stmt -> execute();
?>

<!-- 全てのレコードをHTMLテーブルで表示 -->
<table border=1>
    <!-- HTMLテーブルの1行目の表示 -->
    <tr>
        <th>id</th>
        <th>日時</th>
        <th>投稿内容</th>
        <th>削除ボタン</th>
    </tr>

    <!-- HTMLテーブルの2行目移行で全てのレコードを表示 -->
    <?php while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) { ?>
        <tr>
            <td><?= $row["id"] ?></td>
            <td><?= $row["updated_at"] ?></td>
            <td><?= $row["content"] ?></td>
            <!-- ### ここに削除ボタンを追加 -->
            <td><button>削除</button></td>
        </tr>
    <?php } ?>
</table>

</body>
</html>

②演習課題「813の謎」

右側のbbs.phpでは、HTMLテーブルの各行に削除ボタンがあります。
このボタンを押すと、常にformで「813」が送信されてしまいます。
ボタンを押したときに、対応するレコードのidを送信するようにコードを修正してください。
採点して、すべてのジャッジに正解すれば、演習課題クリアです！

lesson2.html
<html>
<body>

<?php
// フォームで送信したデータを受け取ることができるか確認
if (isset($_POST["delete_id"])) {
    echo("delete_id: " . $_POST["delete_id"]);
}

// データベースへの接続設定
$pdo  = new PDO("mysql:host=127.0.0.1;dbname=lesson;charset=utf8", "root", "");

// 全てのレコードを取得
$sql  = "SELECT * FROM bbs ORDER BY updated_at";
$stmt = $pdo->prepare($sql);
$stmt -> execute();
?>

<!-- 全てのレコードをHTMLテーブルで表示 -->
<table border=1>
    <!-- HTMLテーブルの1行目の表示 -->
    <tr>
        <th>id</th>
        <th>日時</th>
        <th>投稿内容</th>
        <th>削除ボタン</th>
    </tr>

    <!-- HTMLテーブルの2行目移行で全てのレコードを表示 -->
    <?php while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) { ?>
        <tr>
            <td><?= $row["id"] ?></td>
            <td><?= $row["updated_at"] ?></td>
            <td><?= $row["content"] ?></td>
            <td>
                <form action="bbs.php" method="post">
                    <button type="submit">削除</button>
                    <input type="hidden" name="delete_id" value=<?= $row["id"] ?> />
                </form>
            </td>
        </tr>
    <?php } ?>
</table>

</body>
</html>

③ 演習課題「POSTされたidを受け取ってレコードを削除」

右のbbs.phpでは、テーブルの各行にある削除ボタンを押すと、対応するidを送信します。

送信されたidを受け取って、対応するレコードを削除するようにコードを修正してください。

採点して、すべてのジャッジに正解すれば、演習課題クリアです！

lesson3.html
<html>
<body>

<?php
// データベースへの接続設定
$pdo  = new PDO("mysql:host=127.0.0.1;dbname=lesson;charset=utf8", "root", "");

// 受け取ったレコードの削除
if (isset($_POST["delete_id"])) {
    $delete_id = $_POST["delete_id"];
    echo("delete_id: " . $delete_id);
    $sql = "DELETE FROM bbs WHERE id = :delete_id;";
    $stmt = $pdo->prepare($sql);
    $stmt -> bindValue(":delete_id", $delete_id, PDO::PARAM_INT);
    $stmt -> execute();
}

// 全てのレコードを取得
$sql  = "SELECT * FROM bbs ORDER BY updated_at";
$stmt = $pdo->prepare($sql);
$stmt -> execute();
?>

<!-- 全てのレコードをHTMLテーブルで表示 -->
<table border=1>
    <!-- HTMLテーブルの1行目の表示 -->
    <tr>
        <th>id</th>
        <th>日時</th>
        <th>投稿内容</th>
        <th>削除ボタン</th>
    </tr>

    <!-- HTMLテーブルの2行目移行で全てのレコードを表示 -->
    <?php while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) { ?>
        <tr>
            <td><?= $row["id"] ?></td>
            <td><?= $row["updated_at"] ?></td>
            <td><?= $row["content"] ?></td>
            <td>
                <form action="bbs.php" method="post">
                    <button type="submit">削除</button>
                    <input type="hidden" name="delete_id" value=<?= $row["id"] ?> />
                </form>
            </td>
        </tr>
    <?php } ?>
</table>

</body>
</html>

09:投稿者名のカラムを追加しよう (6:17)

①演習課題「投稿フォームに名前欄を追加する」

右のbbs.phpは、1行掲示板になっており、フォームで送信した「投稿内容」を、
データベースに書き込んで表示します。この掲示板のフォームを以下のように修正して、
「投稿者」欄を追加してください。

  • 「label」タグを追加し、そのテキストを「投稿者」にする
  • 「input」タグを追加し、その「type」属性を「text」に、「name」属性を「user_name」にする

採点して、すべてのジャッジに正解すれば、演習課題クリアです！

lesson1.html
<html>
<body>

<?php
// データベースへの接続設定
$pdo  = new PDO("mysql:host=127.0.0.1;dbname=lesson;charset=utf8", "root", "");

// 受け取ったレコードの追加
if (isset($_POST["content"])) {
    $content = $_POST["content"];
    $sql  = "INSERT INTO bbs (content, updated_at) VALUES (:content, NOW());";
    $stmt = $pdo->prepare($sql);
    $stmt -> bindValue(":content", $content, PDO::PARAM_STR);
    $stmt -> execute();
}
?>

<!-- 投稿フォーム -->
<form action="bbs.php" method="post">
    <label>投稿内容</label>
    <input type="text" name="content">
    <label>投稿者</label>
    <input type="text" name="user_name">
    <button type="submit">送信</button>
</form>

<?php
// 全てのレコードを取得
$sql  = "SELECT * FROM bbs ORDER BY updated_at DESC";
$stmt = $pdo->prepare($sql);
$stmt -> execute();
?>

<!-- 全てのレコードをHTMLテーブルで表示 -->
<table border=1>
    <!-- HTMLテーブルの1行目の表示 -->
    <tr>
        <th>id</th>
        <th>日時</th>
        <th>投稿内容</th>
    </tr>

    <!-- HTMLテーブルの2行目移行で全てのレコードを表示 -->
    <?php while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) { ?>
        <tr>
            <td><?= $row["id"] ?></td>
            <td><?= $row["updated_at"] ?></td>
            <td><?= $row["content"] ?></td>
        </tr>
    <?php } ?>
</table>

</body>
</html>

模範解答1
フォームに、「label」タグと「input」タグを追加する

②演習課題「phpmyadminでDBのテーブルにカラムを追加」

右のbbs.phpは、1行掲示板になっており、フォームで送信した「投稿内容」を、
データベースに書き込んで表示します。
この掲示板のデータベースをphpMyAdminで以下のように修正して、
「投稿者」欄を追加してください。

  • lessonデータベースのbbsテーブルに、「投稿者」の名前を保存するカラムを追加する。
  • 追加カラムは、データ型を「TEXT」型、名前を「user_name」とする。

採点して、すべてのジャッジに正解すれば、演習課題クリアです！

lesson2.html

③演習課題「HTMLのテーブルに名前欄を追加」

右のbbs.phpは、1行掲示板になっており、フォームで送信した「投稿内容」を、
データベースに書き込んで表示します。この掲示板のテーブルを以下のように修正して、
「投稿者」欄を追加してください。

  • 4列目に、「user_name」カラムを表示する。

採点して、すべてのジャッジに正解すれば、演習課題クリアです！

lesson3.html
<html>
<body>

<?php
// データベースへの接続設定
$pdo  = new PDO("mysql:host=127.0.0.1;dbname=lesson;charset=utf8", "root", "");

// 受け取ったレコードの追加
if (isset($_POST["content"]) && isset($_POST["user_name"])) {
    $content   = $_POST["content"];
    $user_name = $_POST["user_name"];
    $sql  = "INSERT INTO bbs (content, user_name, updated_at) VALUES (:content, :user_name, NOW());";
    $stmt = $pdo->prepare($sql);
    $stmt -> bindValue(":content", $content, PDO::PARAM_STR);
    $stmt -> bindValue(":user_name", $user_name, PDO::PARAM_STR);
    $stmt -> execute();
}
?>

<h2>投稿フォーム</h2>
<form action="bbs.php" method="post">
    <label>投稿内容</label>
    <input type="text" name="content" />
    <label>投稿者</label>
    <input type="text" name="user_name" />
    <button type="submit">送信</button>
</form>

<?php
// 全てのレコードを取得
$sql  = "SELECT * FROM bbs ORDER BY updated_at DESC";
$stmt = $pdo->prepare($sql);
$stmt -> execute();
?>

<!-- 全てのレコードをHTMLテーブルで表示 -->
<table border=1>
    <!-- HTMLテーブルの1行目の表示 -->
    <tr>
        <th>id</th>
        <th>日時</th>
        <th>投稿内容</th>
        <th>投稿者</th>
    </tr>

    <!-- HTMLテーブルの2行目移行で全てのレコードを表示 -->
    <?php while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) { ?>
        <tr>
            <td><?= $row["id"] ?></td>
            <td><?= $row["updated_at"] ?></td>
            <td><?= $row["content"] ?></td>
            <!-- ### 以下のコードを修正 ### -->
            <td><?= $row["user_name"] ?></td>
        </tr>
    <?php } ?>
</table>

</body>
</html>

④演習課題「投稿された名前をINSERT」

右のbbs.phpは、1行掲示板になっており、フォームで送信した
「投稿内容」を、データベースに書き込んで表示します。この掲示板の書き込みコードを
以下のように修正して、「投稿者」欄のデータを保存してください。

  • 受け取ったレコードの追加コードで、user_nameカラムに$user_nameの値を書き込む

採点して、すべてのジャッジに正解すれば、演習課題クリアです！

lesson4.html
<html>
<body>

<?php
// データベースへの接続設定
$pdo  = new PDO("mysql:host=127.0.0.1;dbname=lesson;charset=utf8", "root", "");

// 受け取ったレコードの追加
if (isset($_POST["content"]) && isset($_POST["user_name"])) {
    $content   = $_POST["content"];
    $user_name = $_POST["user_name"];
    $sql  = "INSERT INTO bbs (content, user_name, updated_at) VALUES (:content, :user_name, NOW());";
    $stmt = $pdo->prepare($sql);
    $stmt -> bindValue(":content", $content, PDO::PARAM_STR);
    // ### 以下にコードを追加する
    $stmt -> bindValue(":user_name", $user_name, PDO::PARAM_STR);
    $stmt -> execute();
}
?>

<!-- 投稿フォーム -->
<form action="bbs.php" method="post">
    <label>投稿内容</label>
    <input type="text" name="content" />
    <label>投稿者</label>
    <input type="text" name="user_name" />
    <button type="submit">送信</button>
</form>

<?php
// 全てのレコードを取得
$sql  = "SELECT * FROM bbs ORDER BY updated_at DESC";
$stmt = $pdo->prepare($sql);
$stmt -> execute();
?>

<!-- 全てのレコードをHTMLテーブルで表示 -->
<table border=1>
    <!-- HTMLテーブルの1行目の表示 -->
    <tr>
        <th>id</th>
        <th>投稿内容</th>
        <th>投稿者</th>
        <th>更新日時</th>
    </tr>

    <!-- HTMLテーブルの2行目移行で全てのレコードを表示 -->
    <?php while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) { ?>
        <tr>
            <td><?= $row["id"] ?></td>
            <td><?= $row["content"] ?></td>
            <td><?= $row["user_name"] ?></td>
            <td><?= $row["updated_at"] ?></td>
        </tr>
    <?php } ?>
</table>

</body>
</html>

⑤演習課題「間違い探し - 書き込まれない」

右のbbs.phpは、1行掲示板になっており、フォームで送信した
「投稿内容」を、データベースに書き込んで表示しようとしていますが、
書き込みコードのところに間違いがあります。
正常に動作するよう、コードを修正してください。
採点して、すべてのジャッジに正解すれば、演習課題クリアです！

lesson5.html
<html>
<body>

<?php
// データベースへの接続設定
$pdo  = new PDO("mysql:host=127.0.0.1;dbname=lesson;charset=utf8", "root", "");

// 受け取ったレコードの追加
if (isset($_POST["content"]) && isset($_POST["user_name"])) {
    $content   = $_POST["content"];
    $user_name = $_POST["user_name"];
    $sql  = "INSERT INTO bbs (content, user_name, updated_at) VALUES (:content, :user_name, NOW());";
    $stmt = $pdo->prepare($sql);
    $stmt -> bindValue(":content", $content, PDO::PARAM_STR);
    $stmt -> bindValue(":user_name", $user_name, PDO::PARAM_STR);
    $stmt -> execute();
}
?>

<!-- 投稿フォーム -->
<form action="bbs.php" method="post">
    <label>投稿内容</label>
    <input type="text" name="content" />
    <label>投稿者</label>
    <input type="text" name="user_name" />
    <button type="submit">送信</button>
</form>

<?php
// 全てのレコードを取得
$sql  = "SELECT * FROM bbs ORDER BY updated_at DESC";
$stmt = $pdo->prepare($sql);
$stmt -> execute();
?>

<!-- 全てのレコードをHTMLテーブルで表示 -->
<table border=1>
    <!-- HTMLテーブルの1行目の表示 -->
    <tr>
        <th>id</th>
        <th>投稿内容</th>
        <th>投稿者</th>
        <th>更新日時</th>
    </tr>

    <!-- HTMLテーブルの2行目移行で全てのレコードを表示 -->
    <?php while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) { ?>
        <tr>
            <td><?= $row["id"] ?></td>
            <td><?= $row["content"] ?></td>
            <td><?= $row["user_name"] ?></td>
            <td><?= $row["updated_at"] ?></td>
        </tr>
    <?php } ?>
</table>

</body>
</html>

10:Bootstrapで見た目を整えよう (5:03)

①演習課題「投稿フォームにBootstrapを適用」

右のbbs.phpは、投稿フォームにBootstrapを適用している途中の状態です。

フォームの「投稿者」のところに、次のようにBootstrapのクラスを適用してください。

  • 2つ目の「div」タグの「class」属性を「form-group」にする
  • 「label」タグの「class」属性を「control-label」にする
  • 「input」タグの「class」属性を「form-control」にする

採点して、すべてのジャッジに正解すれば、演習課題クリアです！

lesson1.html
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<h2>投稿フォーム</h2>
<form action="bbs.php">
    <div class="form-group">
        <label class="control-label">投稿内容</label>
        <input type="text" name="content" class="form-control" />
    </div>
    <div class="form-group">
        <label class="control-label">投稿者</label>
        <input type="text" name="user_name" class="form-control" />
    </div>
    <button type="submit" class="btn btn-primary">送信</button>
</form>

</body>
</html>

②演習課題「発言リストにBootstrapを適用」

右のbbs.phpは、発言リストにBootstrapを適用している途中の状態です。

この発言リストに、次のようにBootstrapのクラスを適用してください。

  • 「table」タグの「class」属性を「table table-striped」にする
  • 「button」タグの「class」属性を「btn btn-danger」にする

採点して、すべてのジャッジに正解すれば、演習課題クリアです！

lesson2.html
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<?php
// データベースへの接続設定
$pdo  = new PDO("mysql:host=127.0.0.1;dbname=lesson;charset=utf8", "root", "");

// 全てのレコードを取得
$sql  = "SELECT * FROM bbs ORDER BY updated_at DESC";
$stmt = $pdo->prepare($sql);
$stmt -> execute();
?>

<h2>発言リスト</h2>
<!-- 全てのレコードをHTMLテーブルで表示 -->
<table class="table table-striped">
    <!-- HTMLテーブルの1行目の表示 -->
    <tr>
        <th>id</th>
        <th>投稿内容</th>
        <th>投稿者</th>
        <th>更新日時</th>
        <th>削除ボタン</th>
    </tr>

    <!-- HTMLテーブルの2行目移行で全てのレコードを表示 -->
    <?php while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) { ?>
        <tr>
            <td><?= $row["id"] ?></td>
            <td><?= $row["content"] ?></td>
            <td><?= $row["user_name"] ?></td>
            <td><?= $row["updated_at"] ?></td>
            <td>
                <form action="bbs.php" method="post">
                    <button type="submit" class="btn btn-danger">削除</button>
                    <input type="hidden" name="delete_id" value=<?= $row["id"] ?> />
                </form>
            </td>
        </tr>
    <?php } ?>
</table>

</head>
</html>
8
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
13