Laravel5.8で掲示板を作ってみる(２）

LaravelLaravel
2019.05.13

概要

前回に引き続き、掲示板を作っていきます。
この記事では残りの叩き台になるviewを配置して整理するところまで行っています。

configファイルを作成

codelike_bbs.php

<?php

return [
  'app_name' => 'codelike bbs'
];

後で使うのでconfigファイルを作成します。returnで連想配列を返すように定義しておきます。
使うときは config(“ファイル名.定義キー”) で値を取り出すことができます。
codelike_bbsconfigcodelike_bbs.php にファイルを追加しました。

残りのviewを配置

たたき台になる残りの画面を配置します。
共通のヘッダーなどは親レイアウトになるように修正しました。

app.blade.php(親のレイアウトファイル)

<!doctype html>
<html lang="ja">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>{{ config('codelike_bbs.app_name') }}</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">{{ config('codelike_bbs.app_name') }}</a>
</nav>
<div class="container">
    @yield('content')
</div>
</body>
</html>

viewsの下にlayoutsを作って、その配下に配置しました。
@yield(‘content’)で指定した子のbladeファイルを読み込みます。

あと先ほど作ったconfigファイルからページタイトルをconfigで取ってくるように変更しました。({{ config('codelike_bbs.app_name') }}の箇所)
複数個所で使う文字列や設定値はconfigに定義しておくと楽になります。

top_list.blade.php（トップページ）

@extends('layouts.app')

@section('content')
    <form action="" method="POST" id="make_board" class="mt-3">
        <div class="form-group">
            <label for="board_title">タイトル</label>
            <input type="text" class="form-control" name="board_title" id="board_title" maxlength="140">
        </div>
        <div class="form-group">
            <label for="user_name" class="col-form-label">名前</label>
            <input type="text" class="form-control" name="user_name" id="user_name" maxlength="140">
        </div>
        <div class="form-group">
            <label for="about_text">説明文</label>
            <textarea class="form-control" style="height:200px;" name="about_text" id="about_text"
                      maxlength="1024"></textarea>
        </div>
        <div class="form-group">
            <label for="password">パスワード</label>
            <input type="password" class="form-control" name="password" id="password" maxlength="20">
        </div>
        <div class="justify-content-center">
            <button type="button" class="btn btn-primary mx-auto d-block col-3">作成</button>
        </div>
    </form>
@endsection

トップページです。@extends(‘layouts.app’)で指定した親のページを読み込みます。
@section(‘content’)～@endsection までが親で指定している箇所に展開されます。

post_bbs.blade.php（投稿ページ）

@extends('layouts.app')

@section('content')
    <form action="" method="POST" id="make_board" class="mt-3">
        <div class="form-group">
            <label for="board_title">タイトル</label>
            <input type="text" class="form-control" name="board_title" id="board_title" maxlength="140">
        </div>
        <div class="form-group">
            <label for="user_name" class="col-form-label">名前</label>
            <input type="text" class="form-control" name="user_name" id="user_name" maxlength="140">
        </div>
        <div class="form-group">
            <label for="about_text">説明文</label>
            <textarea class="form-control" style="height:200px;" name="about_text" id="about_text"
                      maxlength="1024"></textarea>
        </div>
        <div class="form-group">
            <label for="password">パスワード</label>
            <input type="password" class="form-control" name="password" id="password" maxlength="20">
        </div>
        <div class="justify-content-center">
            <button type="button" class="btn btn-primary mx-auto d-block col-3">作成</button>
        </div>
    </form>
@endsection

新規投稿ページです。

show_bbs.blade.php（掲示板表示・返信ページ）

@extends('layouts.app')

@section('content')
    <div class="card mt-3">
        <div class="card-body">
            <div>山田太郎</div>
            <div class="rounded border p-2 mt-2">
                内容～～～～～～～～～～～～～～～～<br/>
                内容～～～～～～～～～～～～～～～～<br/>
                内容～～～～～～～～～～～～～～～～<br/>
                内容～～～～～～～～～～～～～～～～<br/>
            </div>
            <div class="mt-3 mb-3 row justify-content-end">
                <div class="btn btn-danger">
                    削除
                </div>
            </div>
        </div>
    </div>
    <div class="card mt-3">
        <div class="card-body">
            <div>佐藤次郎</div>
            <div class="rounded border p-2 mt-2">
                内容～～～～～～～～～～～～～～～～<br/>
                内容～～～～～～～～～～～～～～～～<br/>
                内容～～～～～～～～～～～～～～～～<br/>
                内容～～～～～～～～～～～～～～～～<br/>
            </div>
        </div>
    </div>
    <div class="fixed-bottom">
        <div class="card mt-3">
            <div class="card-body">
                <div class="form-inline">
                    <label class="col-form-label">名前</label>
                    <input type="text" name="user_name" class="form-control ml-2 col-5"/>
                </div>
                <div class="form-inline mt-2">
                    <label class="col-form-label">内容</label>
                    <textarea name="post_text" class="form-control ml-2 col-10"></textarea>
                </div>
                <div class="justify-content-center mt-2">
                    <button type="button" class="btn btn-primary mx-auto d-block col-3">投稿</button>
                </div>
            </div>
        </div>
    </div>
@endsection

作成された掲示板の表示と返信のための画面です。

routes/web.php を変更する

作った画面を確認できるようにroutes/web.phpを修正します。

ルートファイルの修正

<?php

Route::get('/', function () {
    return view('top_list');
});

Route::get('/post', function () {
    return view('post_bbs');
});

Route::get('/show', function () {
    return view('show_bbs');
});

GETでのルーティングを２つ増やしました。

画面の確認

動かすと/show, /postそれぞれにアクセスしたときに下記のように表示されるのが確認できます。

githubのexample2ブランチ に、ここまでのソースをコミットしてます。

コメント

  1. Laravel5.8で掲示板を作ってみる(3） | codelikeなブログ より:
    2019年5月14日 8:13 PM

    […] Laravel5.8で掲示板を作ってみる(２） […]

    返信
タイトルとURLをコピーしました