掲示板を作ろう（前編） #Laravel基礎 Webアプリケーションの開発

# はじめに

Laravelを使って小さなWebアプリケーションを開発していきます。

本稿では掲示板アプリを作ることでフォームの取り扱いなど、基礎的なWebアプリケーションの開発を学ぶことができます。

Webアプリケーションの開発を前に、基礎的な知識がいくつか必要となります。

ルーティングやControllerを振り返りたい方はLaravelをつかったウェブサイトの開発マガジンをご覧ください。

Laravel基礎 Laravelを使ったウェブサイトの開発｜Laravelの教科書｜note

また、データーベースやModelの機能を利用します。このあたりの知識に不安がある方は、Laravel頻出パターンのデーターベース関連の記事をご確認ください。

前編ではWebアプリケーションの開発を行うための準備を行います。

用語
・フォーム
・POSTとGET
・リクエスト
・MVCモデル
・Validation

# 課題

本稿の課題はこちらです。

・投稿フォーム、投稿一覧ページを持つシンプルな1画面のWebアプリケーションを作りましょう
・Model、View、Controllerの役割を整理しましょう

# 設計

作成する掲示板は次のようなものです。

箇条書きで必要な機能を洗い出します。

- トップページに投稿一覧を表示
- 投稿が1件も無い時は投稿が無いメッセージを表示
- トップページに投稿フォームを表示
- フォームの項目は下記
・件名
・投稿者名
・本文（複数行可）
- 新しい投稿が上に表示される
- （応用）投稿後、入力内容をチェックしてエラーを表示
- （応用）投稿一覧は10件毎にページングで表示される

続いて、この内容をさらに具体的に決めていきます。Laravelで実際に開発するにあたっての機能を機能が決まった段階で決めておくと、その後の実装がスムーズに行きます。

この時、Model - View - Controllerで分割しながら考えて行くと整理しやすいです。

今回の掲示板アプリでは次のような設計としました。

■プロジェクトについて
- プロジェクト名はlaravel_bbs_sampleとする

■ Model
- 投稿データを記録するテーブル名は「bbs_entry」とする
- 投稿データに対応するModelクラスは「BbsEntry」とする

■ View
- 投稿一覧のためのテンプレートは「bbs_entry_list.blade.php」とする
- 投稿フォームは「part/bbs_entry_form.blade.php」として投稿一覧のページから@includeする
- Controllerからは「$item_list」で投稿一覧（BbsEntryの配列）を渡す

■ Controller
- 投稿一覧を処理するControllerクラスとメソッドは「BbsEntryController@index」とする
- ユーザーからの投稿を処理するControllerクラスとメソッドは「BbsEntryController@create」とする

# 準備

準備は次の流れで行います。今まで他のプロジェクトでもやっていますが、一度全体の流れをまとめます。

1. composer create-projectでプロジェクトを作成する
2. .envファイルを編集し、データーベースの設定を行う
3. make:migrationを使ってbbs_entryテーブルを作成する
4. make:modelを使ってBbsEntryクラスを作成する
5. make:controllerを使ってBbsEntryControllerクラスを作成する
6. ルーティングを変更してBbsEntryControllerを設定する
7. 開発サーバーを起動する

この当たりの操作は本稿では省略した形になりますので、操作に不安な方ははじめにに記載した過去の記事をご確認ください。

1. composer create-projectでプロジェクトを作成する

composer create-project --prefer-dist laravel/laravel laravel_bbs_sample "7.*"

※ 執筆時のタイミングに合わせてLaravel7で作成しています。

cd laravel_bbs_sample

作成が終わりましたら、次に作成したlaravel_bbs_sampleディレクトリに移動することを忘れないようにしましょう。

この時、codeコマンドを入れておくと便利です。

code .

とするとVisual Studio Codeで作成したlaravel_bbs_sampleディレクトリを開いた状態で立ち上がります。

2. .envファイルを編集し、データーベースの設定を行う

こちらについては下記記事を参考にしてください。

3. make:migrationを使ってbbs_entryテーブルを作成する

php artisan make:migration create_bbs_entry_table

作成されたマイグレーションファイルを編集します。パスは「database/migrations/XXXX_create_bbs_entry_table.php」です。XXXXは数字で作成日時が入ります。

「タイトル」「投稿者名」「本文」を持つbbs_entryテーブルを作成します。

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateBbsEntryTable extends Migration
{
   /**
    * Run the migrations.
    *
    * @return void
    */
   public function up()
   {
       Schema::create('bbs_entry', function (Blueprint $table) {
           $table->id();
           $table->string("title");	//タイトル
           $table->string("author");	//投稿者名
           $table->string("body");	//本文
           $table->timestamps();
       });
   }
   /**
    * Reverse the migrations.
    *
    * @return void
    */
   public function down()
   {
       Schema::dropIfExists('bbs_entry');
   }
}

マイグレーションファイルを作成したら、migrateコマンドを実行し、テーブルの作成を行います。

php artisan migrate

この時エラーが出る場合はデーターベースの設定が間違っている可能性があります。

例えば、データーベースに接続出来ない場合、次のような表示がされます。

Database name seems incorrect: You're using the default database name `laravel`. This database does not exist.

Edit the `.env` file and use the correct database name in the `DB_DATABASE` key.

4. make:modelを使ってBbsEntryクラスを作成する

テーブルの作成が完了したらModelを作成します。作成には「make:model」コマンドを利用します。

php artisan make:model BbsEntry

作成されたBbsEntry.phpを編集し、テーブルと関連付けます。「app/BbsEntry.php」に作成されます。

app/BbsEntry.php

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class BbsEntry extends Model
{
	//
	protected $table = "bbs_entry";
}

関連付けには「protected $table = "テーブル名"」と指定します。

5. make:controllerを使ってBbsEntryControllerクラスを作成する

続いて、BbsEntryControllerクラスを作成します。作成には「make:controller」コマンドを利用します。

php artisan make:controller BbsEntryController

作成されたBbsEntryController.phpを編集し、index()メソッドとcreate()メソッドを作成します。「app/Http/Controllers/BbsEntryController.php」に作成されます。

app/Http/Controllers/BbsEntryController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\BbsEntry;

class BbsEntryController extends Controller
{
   function index(){
		//@TODO 投稿一覧画面を表示
		dd(BbsEntry::all());
	}
	function create(){
		//@TODO 投稿処理を行う
		echo "create";
	}
}

index()メソッドではModelの作成やデーターベースの設定が問題ないことを確認するためにBbsEntry::all()でデーターベースから値を取り出す処理を追加しています。

use App\BbsEntry;

BbsEntryを使う宣言が先頭にあるので忘れないようにしましょう。

Seederを設定していないため、データは取得出来ませんが、Modelクラスとテーブルの関連付けが問題無いか確認しています。

6. ルーティングを変更してBbsEntryControllerを設定する

ルーティングの設定ファイルである「routes/web.php」を次のように編集します。

routes/web.php

Route::get('/', "BbsEntryController@index");
Route::post('/create', "BbsEntryController@create");

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

最初に入っているwelcomeへのルーティングはコメントアウトするか削除してください。

7. 開発サーバーを起動する

開発サーバーを起動します。起動にはservコマンドを利用します。

php artisan serv

ブラウザで「http://127.0.0.1:8000」を開いて次のようにBbsEntry::all()の結果が表示されていれば成功です。

以上で準備は終わりです。

続いて後編で実際に作っていきます。

おつかれさまでした！

---

Laravelの教科書