2022.10.05

Lv2

Laravelで簡単な掲示板を作成の巻　第２話　魁！小野の塾

Laravelで簡単な掲示板を作成

魁！小野の塾　PHPで簡単なプログラムを作ってみようの巻　第１話では、簡単な掲示板をPHPで作成しました。

今回は、同じような機能をLaravelで構築していきます。
機能的には、登録処理、削除処理、エラーチェックなどを実装していきます。

前回のソースは、200行程度の１ファイルだったのですが、今回はどのように書き方が変わるのか、見ていければ良いかと思います。
また、フレームワークを利用する機会は増えましたので、しっかり開発手順を覚えて頂きたいです。

Bootstrapを利用したサンプルを作成していますが、Laravelは Tailwind をCSSのフレームワークとして押しています。
Tailwindはコンポーネント開発を前提としたCSSフレームワークで、CSSを知っている人には使いやすいですが、Bootstrapを長年利用している人には、少し難易度が高いと思います。

対象のスキルレベル

魁！小野の塾　開発環境構築の巻　XAMPPインストールを読み環境構築済である
Composerインストール（Windows）　開発環境構築の巻　魁！小野の塾を読み環境構築済である
Laravelの環境構築　開発環境構築の巻　魁！小野の塾を読み環境構築済である
魁！小野の塾　PHPで簡単なプログラムを作ってみようの巻　第１話を読み一通り理解できる
追いつけない方は、魁！小野の塾　目次から入門編を一通り見て下さい。

構築環境

Windows10
XAMPP 8.1.2(PHP 8.1.2, MariaDB 10.4.22)
Laravel v9.33.0

Controller作成

モデルと紐づけてControllerを作成します。
コマンドプロンプトで以下のコマンドを入力します。

php artisan make:controller BbsController –model=Bbs –resource –requests

オプション

–model=Bbs ControllerにModelを紐づけます。引数などにBbsモデルが自動的に入ります。
–resource CRUDを作成するようの関数を自動で定義します。
–requests Validation用のRequestオブジェクトを作成します。

生成ファイル

app/Http/Controllers/BbsController.php Controller
app/Http/Requests/StoreBbsRequest.php 登録用Validation
app/Http/Requests/UpdateBbsRequest.php 更新用Validation

自動生成されたControllerメソッドとURL Path

Controller	HTTP	Path	内容
index	GET	/bbs	初期表示（一覧表示）
create	GET	/bbs/create	新規登録用フォーム表示
store	POST	/bbs	新規登録処理
show	GET	/bbs/{id}	指定内容表示
edit	GET	/bbs/{id}/edit	指定内容編集用フォーム表示
update	PUT/PATCH	/bbs/{id}	指定内容の更新
destroy	DELETE	/bbs/{id}	指定内容の削除

ポイント

URL及びHTTP METHODによりアクセスする関数が異なることに注目してください。

routes/web.php編集

Controllerを作成したので、Routerの設定を行います。今回はAPI開発ではないので、web.php にルートの追加を行います。

ポイント

クライアントからのアクセスは、Controllerへ直接行くわけではなく、Router経由で接続されます。
Routerの設定では、URLとControlllerを関連付けていきます。

<?php

use App\Http\Controllers\BbsController;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});
Route::resource('bbs', BbsController::class);

resources/views/bbs.blade.php作成

レイアウト用のデフォルトを作成する必要があるのですが、今回は１ページのみの作成なので、レイアウトは作成せず、そのまま作っていこうと思います。
Laravelのウェルカムページ出力用ファイルとして、welcome.blade.phpがあります。これをコピーし、作成しようと思います。

コマンドプロンプトで以下のコピーコマンドを入力してください。

copy resources\views\welcome.blade.php resources\views\bbs.blade.php

resources/views/bbs.blade.php ファイルが作成されます。

不要な部分を取り除き、BootstrapのCDNや他のスタイルのCDNなどあらかじめ入れておきます。

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{{ config('app.name', 'TECH PJIN') }}</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <!-- Font Awesome CSS -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <!-- Animate.css CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <!-- Noto Sans JP -->
    <link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="{{ asset('/css/style.css') }}">
</head>

<body>
	BBS
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

</body>

</html>

public/css/style.css作成

今回は、魁！小野の塾　PHPで簡単なプログラムを作ってみようの巻　第１話で作成したHTMLを利用する予定なので、styleもそのまま利用しようと思います。
配置場所ですが、public フォルダーにcssフォルダーを作成し、そこに配置します。

ポイント

css, js, images など、処理に関係なく読み込みたいファイルなどは、public フォルダーに配置します。
Blade（Laravelのview）側で呼び出す場合は、asset関数でパスを指定して取得します。
今回は、{{ asset(‘/css/style.css’) }} となります。

@charset "utf-8";
*{
	font-family: "Noto Sans JP";
}
body{
	margin-top: 120px;
}

前回からの変更点

前回作成した時は、Sawarabi Gothicだったのですが、今回は、Noto Sans Japaneseになっております。
また、Boostrapのバージョンも５へ更新しています。

app/Http/Controllers/BbsController.php

viewを作成したので、コントローラから呼び出しを行います。
呼び出す場合は、view関数を利用し、bbs.blade.phpの場合は、blade.phpを除いた部分を指定します。
今回は、bbs.blade.phpなので、view(‘bbs’)になります。

初回アクセスのURLは、/bbsとなり、index関数へのアクセスとなります。

<?php

namespace App\Http\Controllers;

use App\Models\Bbs;
use App\Http\Requests\StoreBbsRequest;
use App\Http\Requests\UpdateBbsRequest;

class BbsController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('bbs');
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \App\Http\Requests\StoreBbsRequest  $request
     * @return \Illuminate\Http\Response
     */
    public function store(StoreBbsRequest $request)
    {
        //
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Models\Bbs  $bbs
     * @return \Illuminate\Http\Response
     */
    public function show(Bbs $bbs)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Models\Bbs  $bbs
     * @return \Illuminate\Http\Response
     */
    public function edit(Bbs $bbs)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \App\Http\Requests\UpdateBbsRequest  $request
     * @param  \App\Models\Bbs  $bbs
     * @return \Illuminate\Http\Response
     */
    public function update(UpdateBbsRequest $request, Bbs $bbs)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Models\Bbs  $bbs
     * @return \Illuminate\Http\Response
     */
    public function destroy(Bbs $bbs)
    {
        //
    }
}

ポイント

今回の実装は、一覧表示、登録、削除のみの実装となります。
resourceオプションを指定して作成したControllerではCRUDの基本関数がすべて入っていますが、
今回利用するのは、index, store, destroyのみとなります。

設定が完了したら、http://localhost/bbs/public/bbs をブラウザで実行しエラーが出ずに、BBSと表示されれば設定完了です。

次回から、登録処理、一覧表示、削除の順番で解説していきます。

魁！小野の塾　連載目次リンク

Laravelで簡単な掲示板を作成の巻　第１話　魁！小野の塾

Laravelで簡単な掲示板を作成の巻　第３話　魁！小野の塾

一覧へ戻る

Developer

Laravelで簡単な掲示板を作成の巻 第２話 魁！小野の塾

Laravelで簡単な掲示板を作成

対象のスキルレベル

構築環境

Controller作成

オプション

生成ファイル

自動生成されたControllerメソッドとURL Path

ポイント

routes/web.php編集

ポイント

resources/views/bbs.blade.php作成

public/css/style.css作成

ポイント

前回からの変更点

app/Http/Controllers/BbsController.php

ポイント

魁！小野の塾 連載目次リンク

Laravelで簡単な掲示板を作成の巻　第２話　魁！小野の塾

魁！小野の塾　連載目次リンク