前回までで、DB・テーブルの設定ができたので、今回は管理画面側のブログ記事を投稿するフォームを作っていきます。まずは、保存処理などは考えずに、単純に View テンプレートを読み込んで表示するだけの処理を実装していきます。
ルーティングの設定
routes/web.php を開いて、下記のようにルーティングを追加します。
// http://{ホスト名}/admin/form に GET でアクセスすると、AdminBlogController の form メソッドを実行するという意味
// name メソッドでエイリアスをつけることができる
Route::get('admin/form', 'AdminBlogController@form')->name('admin_form');
post でアクセスしたい場合は Route::post() を、PUT でアクセスしたい場合は Route::put() を指定します。
その他にも様々な使い方があるので、エイリアスも含めて追って紹介していきます。気になる方は、ドキュメントを参照してください。
コントローラーの作成
続いて、コントローラーを作成します。管理画面側の処理になるので、AdminBlogController という名前のコントローラークラスを作ります。コントローラークラスは、下記 artisan コマンドで作成できます。
php artisan make:controller AdminBlogController
コマンドを実行すると app/Http/Controllers/AdminBlogController.php というファイルができていると思いますので、それを開いて下記のように編集します。指定した View テンプレートを表示するだけの処理です。
<?php
namespace App\Http\Controllers;
class AdminBlogController extends Controller
{
/**
* ブログ記事入力フォーム
*
* @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
*/
public function form()
{
// resources/views 配下にある、どのテンプレートを使うか指定。ディレクトリの階層はピリオドで表現できる
// この例では resources/views/admin_blog/form.blade.php が読み込まれる
return view('admin_blog.form');
}
}
View テンプレートの作成
では、読み込まれるテンプレート resources/views/admin_blog/form.blade.php を作成していきます。Laravel では Blade というテンプレートを利用しています。
View テンプレートは artisan コマンドで作成できないので、ディレクトリも含めて自力で作成してください。Blade テンプレートは .blade.php という拡張子が付きます。慣れるまではファイル名に注意してください。
今回は、まず下記のように、ごくごく簡素なブログ投稿フォームを用意します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ブログ記事投稿フォーム</title>
</head>
<body>
<h2>ブログ記事投稿・編集</h2>
<form method="POST">
日付<br>
<input name="post_date" size="20" value="" placeholder="日付を入力して下さい。"><br><br>
タイトル<br>
<input name="title" value="" placeholder="タイトルを入力して下さい。"><br><br>
本文<br>
<textarea cols="50" rows="15" name="body" placeholder="本文を入力してください。"></textarea><br>
<input type="submit" value="送信">
{{--CSRFトークンが生成される--}}
{{ csrf_field() }}
</form>
</body>
</html>
ここでは、フォーム部品の名前が articles テーブルのカラム名と同じであることに注目してください。これが後々効いてきます。
CSRF用のトークンを自動で生成してくれる {{ csrf_field() }} を忘れずに書いておきましょう。このトークンは GET メソッド以外で送信する場合は必須で、これが無いと Exception を吐いてしまいます。
ここまでできたら、http://{ホスト名}/admin/form にアクセスして、フォームが表示されるかどうか、確認してください。
ただ、このままだと、見た目が少しよろしくないので、bootstrap と CSS を使って、少し見栄えをよくしておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ブログ記事投稿フォーム</title>
{{--asset ヘルパー関数を使うと public/ 配下ファイルへのURLを生成してくれる--}}
{{--bootstrap.min.css は最初からインストールされている--}}
<link rel="stylesheet" href="{{ asset('/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('/css/blog.css') }}">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2>ブログ記事投稿・編集</h2>
<form method="POST">
<div class="form-group">
<label>日付</label>
<input class="form-control" name="post_date" size="20" value="" placeholder="日付を入力して下さい。">
</div>
<div class="form-group">
<label>タイトル</label>
<input class="form-control" name="title" value="" placeholder="タイトルを入力して下さい。">
</div>
<div class="form-group">
<label>本文</label>
<textarea class="form-control" rows="15" name="body" placeholder="本文を入力してください。"></textarea>
</div>
<input type="submit" class="btn btn-primary btn-sm" value="送信">
{{--CSRFトークンが生成される--}}
{{ csrf_field() }}
</form>
</div>
</div>
</div>
</body>
</html>
body {
font-size: 12px;
color: #696969;
}
h2 {
font-size: 24px;
border-bottom: 1px solid #1e90ff;
padding: 5px 0 5px 0;
margin-bottom: 25px;
}
.form-group input[name="post_date"] {
width: 200px;
}
これで、下記のような見た目になります。
