【投稿アプリ自作(8)】Bootstrapの導入

Webアプリを自作するためにPHPのフレームワークのLaravelを導入することに決めました。
PHP初心者かつLaravel初心者ですが、自分なりにスキルを得るためにLaravelを用いた記事投稿アプリを自作しました。その過程を備忘録としてまとめます。
最終的にはブラウザを利用して記事投稿画面の表示、ユーザごとの記事投稿数のグラフ化を目指したいと思います。
本記事は連載【投稿アプリ自作】の第八回目で、Bootstrapを導入する方法をまとめます。
※:Laravelは5.3からファイル構成が大幅に変わりました。本記事ではLaravel5.3以降を使って説明したいと思います。
※2:データベースはXAMPPに入っていたMySQLを使うことにします。事前にデータベースアカウントを登録しておいてください。

ゴール

本記事では、以下の２つについてまとめます。
・Bootstrapの導入
・ビューファイルの共通部分をファイル化

今回は変更内容がじょぼいですが、Bootstrapを導入したことで記事の配置が自動で揃えられていることがわかります。
Bootstrapは今後の記事でボタンなどのフォームのデザインに使うので本記事では簡単な変更のみにとどめます。

必要なもの

	必要なもの		価格(円)
1	PC		ピンキリ
1	備考	インターネット接続可能なこと
2	XAMPP		無料
2	備考	持っていない場合は、こちらを参照→XAMPPのインストール方法
3	Laravelフレームワーク		無料
3	備考	インストールしていない場合は、こちらを参照→Laravelのインストール方法
4	MySQLのデータベースアカウント		無料
4	備考	持っていない場合は、こちらを参照→phpMyAdminでデータベースとユーザを新規登録する
5	投稿アプリ向けのテーブル		無料
5	備考	【投稿アプリ自作】の第四回目で作成した投稿アプリ向けのテーブルです。持っていない場合は、こちらを参照→【投稿アプリ自作(4)】テーブル設計とマイグレーション実行(Laravel)
6	ダミーデータ		無料
6	備考	【投稿アプリ自作】の第六回目で作成した投稿アプリ向けのダミーデータです。持っていない場合は、こちらを参照→【投稿アプリ自作(6)】seederでダミーデータの作成(Laravel)
7	投稿表示画面		無料
7	備考	【投稿アプリ自作】の第七回目で作成した投稿アプリ向けのダミーデータを表示する画面(記事表示画面)です。持っていない場合は、こちらを参照→【投稿アプリ自作(7)】リレーショナルデータベースからデータを取得・表示する(Laravel)

事前準備

テーブルの作成

事前に投稿アプリ向けのテーブルを用意する必要があります。
第四回目でテーブル設計と新規テーブルの作成方法をまとめていますので、まだ作成していない方は以下の記事を参考にして新規テーブルの作成をしてください。

http://ysktec.com/shiguregaki/blog/?p=1181

ysktec.com

テーブルの関連性

投稿アプリ向けのテーブルの関連性をER図にまとめると下の様になります。(IDEDF1X記法で記述)
※ネットで検索しながら見よう見まねで書いたので間違っているかもしれませんがご容赦ください。

ダミーデータの作成

本記事でアクセスするためのダミーデータが必要です。
前回の記事でダミーデータの作成方法をまとめていますので、ダミーデータがない場合は以下の記事を参考にダミーデータの作成をしてください。

http://ysktec.com/shiguregaki/blog/?p=1245

ysktec.com

ダミー記事表示画面の作成

本記事で作成した記事投稿画面の結果を確認するために記事表示画面が必要です。
前回の記事で記事表示画面の作成方法をまとめていますので、記事表示画面がない場合は以下の記事を参考に記事表示画面の作成をしてください。

http://ysktec.com/shiguregaki/blog/?p=1288

ysktec.com

Laravelソースファイルの変更

変更や新規作成するLaravelファイル一覧

Laravelのプロジェクトファイル配下にあるファイルで本記事の中で変更、新規作成するファイルについてまとめました。

	ファイル名	対応
1	resources/views/layout.blade.php	変更
2	resources/views/test/test1.blade.php	変更
3	resources/views/test/test2.blade.php	変更

Bootstrapの導入

Bootstrapの導入方法は幾つかあるみたいですが、本記事では「Bootstrap CDNを使用する」方法で導入します。

導入方法は非常に簡単で、Viewファイルに以下のコードを追加するだけです。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Viewファイル(layout.blade.php)を変更

「Bootstrapの導入」の章で記載したソースコードをlayout.blade.phpに追加します。
また、@yield(‘content’)をcontainerクラスで囲うことで、Bootstrapによって@yield(‘content’)に挿入した内容の左右にマージンが表示されます。

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>My Blog</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>  
    <h1>しぐれがきブログ</h1>
    <div class="container">
        @yield('content')
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

<!DOCTYPE HTML>

<head>

</head>

<body>

<h1>しぐれがきブログ</h1>

@yield('content')

</div>

</body>

</html>

Viewファイル(test1.blade.php)を変更

前回の記事まではtest1.blade.phpに要素などHTML要素をすべて記載していましたが、共通部分も多いため、layout.blade.phpに共通部分は集約し、異なる部分のみ@yield(‘content’)に挿入するように変更しました。
この@yield(‘content’)にはcontainerクラスとなっているため、Bootstrapによって内容の左右にマージンが表示されます。

@extends('layout')
 
@section('content')
    <h1>Test1</h1>
        @foreach($users as $user)
            <article>
                ============================<br>
                ユーザ名:{{$user->user_name}}
                <br>
                記事ID：
                <br>
                @foreach($user->articles as $article)
                {{$article->article_id}}
                <br>
                @endforeach
                ============================<br>
            </article>
        @endforeach
@endsection

@extends('layout')

@section('content')

@foreach($users as $user)

============================<br>

ユーザ名:{{$user->user_name}}

<br>

記事ID：

<br>

@foreach($user->articles as $article)

<br>

@endforeach

============================<br>

</article>

@endforeach

@endsection

Viewファイル(test2.blade.php)を変更

前回の記事まではtest1.blade.phpと同様にtest2.blade.phpも変更します。

@extends('layout')
 
@section('content')
    <h1>Test2</h1>
        @foreach($articles as $article)
            <article>
                ============================<br>
                記事ID：:{{$article->article_id}}
                <br>
                記事投稿者：
                {{$article->articleUser->user_name}}
                <br>
                カテゴリー：
                {{$article->category->category_name}}
                <br>
                タグ：
                {{$article->tag->tag_name}}
                <br>
                タイトル：
                {{$article->detailedArticle->title}}
                （投稿日：{{$article->detailedArticle->published_date}}）
                <br>
                内容：
                {{$article->detailedArticle->body}}
                <br>
                ============================<br>
            </article>
        @endforeach
@endsection