Webアプリ開発入門 PHP+MySQL編1:Bootstrapで見た目を整えよう

#10:Bootstrapで見た目を整えよう

<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>
        <label>投稿者</label>
        <input type="text" name="user_name" />
    </div>
    <button type="submit" class="btn btn-primary">送信</button>
</form>

</body>
</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>
        <label>投稿者</label>
        <input type="text" name="user_name" />
    </div>
    <button type="submit" class="btn btn-primary">送信</button>
</form>

</body>
</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>
    <!-- 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">削除</button>
                    <input type="hidden" name="delete_id" value=<?= $row["id"] ?> />
                </form>
            </td>
        </tr>
    <?php } ?>
</table>

</head>
</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>
    <!-- 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">削除</button>
                    <input type="hidden" name="delete_id" value=<?= $row["id"] ?> />
                </form>
            </td>
        </tr>
    <?php } ?>
</table>

</head>
</html>

この動画を見るにはpaiza会員登録のうえ
有料会員登録が必要です

無料会員登録して始める

★ 実技1
★ 実技2

実技課題「投稿フォームにBootstrapを適用」

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

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

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

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

実技課題「発言リストにBootstrapを適用」

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

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

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

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

ここでは、掲示板の見た目を整えます。そのために、HTMLフレームワークのBootstrapを使って、投稿フォームとテーブルのデザインを変更してみましょう。

作成コード

このチャプターで作成した、bbs.phpのコードです。
https://paiza-webapp.s3.amazonaws.com/files/learning/webapp_php_sql/bbs_chap10.php

参考になるWebページ

Bootstrap · 世界で最も利用されているHTML、CSS、JSのライブラリです。
https://getbootstrap.jp/

有料プランで現役エンジニアに相談可能！

プログラミング学習 > Webアプリ開発入門 PHP+MySQL編 > Webアプリ開発入門 PHP+MySQL編1: 掲示板を作ろう > Bootstrapで見た目を整えよう

コード判定結果

実技課題 「投稿フォームにBootstrapを適用」

実技課題 「発言リストにBootstrapを適用」

作成コード

参考になるWebページ

実技課題「投稿フォームにBootstrapを適用」

実技課題「発言リストにBootstrapを適用」