Laravel PHP

更新:2024/11/01

【2024年度最新版】Laravel10で作って学ぶ匿名掲示板チュートリアル

$はるか$

はるか

掲示板ってどうやって作る？

$ふゅか$

ふゅか

そうね..Laravelを使用したらそんな難しくないわ。

1. はじめに

1.1. Laravelとは？

Laravelは、PHPのレームワークです。MVC（モデル・ビュー・コントローラー）アーキテクチャを採用しています。このアーキテクチャにより、アプリケーションの開発が効率的に行えます。具体的に簡単にいうと、モデル（Model）ではデータベース関連の処理を担当し、ビュー（View）はユーザーに表示される画面のことを指し、コントローラー（Controller）はモデルとビューの間でのデータの受け渡しや処理を担当します。これにより、データの管理、ユーザーインターフェイス、ビジネスロジックが分離され、より管理しやすいコード構造を実現できます。

1.2. 記事の目標

とりあえずLaravelを動かして何か作ってみたいという読者に向けて解説しています。最終的には次のようなものを作ります。

$ふゅか$

ふゅか

それぞれの板ごとではなく、一つのページで完結する掲示板を作成するわ。

2. 環境構築

Windows11を使用しています。

2.1. Composerのインストール

$はるか$

はるか

まずは環境構築だな。

ComposerはLaravelプロジェクトを作成するときに必要になります。

Composerの公式ウェブサイトhttps://getcomposer.org/にアクセスします。
お使いのオペレーティングシステム（Windows、Mac、Linux）に合ったバージョンをダウンロードします。
ダウンロードしたインストーラーを実行し、画面の指示に従ってインストールを完了します。

2.2. XAMPPのインストール

PHP、MySQL、およびApacheが必要です。XAMPPはこれらを一括でインストールできるます。

XAMPPの公式ウェブサイトhttps://www.apachefriends.org/index.htmlにアクセスします。
お使いのオペレーティングシステム（Windows、Mac、Linux）に合ったバージョンをダウンロードします。
ダウンロードしたインストーラーを実行し、画面の指示に従ってインストールを完了します。

IDEはVscodeを使用します。

3. プロジェクトの作成

3.1. Laravelプロジェクトの作成

まず、Laravelのプロジェクトを作成するために、コマンドラインツールまたはターミナルを使用します。Laravelを作りたいディレクトリに移動して、以下のコマンドを実行して、新しいLaravelプロジェクトを作成します。

composer create-project laravel/laravel board-app

カレントディレクトリに作成したい場合は次のような相対パスを指定してコマンドを実行してください。

composer create-project laravel/laravel .

3.2. プロジェクトディレクトリへの移動

プロジェクトが作成されたら、以下のコマンドを使って新しく作成されたプロジェクトディレクトリに移動します。

cd board-app

VScodeの場合移動した後にcode .　を実行すると開発しやすくなると思います。

3.3. 開発サーバーの起動

Laravelにはビルトインの開発サーバーが含まれており、プロジェクトを簡単にローカルで実行できます。以下のコマンドを実行して、開発サーバーを起動します。

php artisan serve

このコマンドを実行すると、http://localhost:8000 でアプリケーションにアクセスできるようになります。ブラウザを開き、指定されたURLにアクセスすると次のようなページが表示されます。

開発サーバーが正常に動作していれば、初期セットアップは完了です。ここからは、掲示板アプリケーションの具体的な開発に移っていきます。

4. データベースの準備

4.1. Laravelでのデータベース接続設定

次に、Laravel でデータベースとの接続を設定します。プロジェクトフォルダ内の .env ファイルを開き、以下のようにデータベース接続情報を更新してください。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=board-app
DB_USERNAME=root
DB_PASSWORD=

DB_DATABASE、DB_USERNAME、DB_PASSWORD の値は、あなたのデータベース設定に合わせて変更してください。XAMPPを使って特に設定していない場合、ユーザー名は通常 root で、パスワードは空のままです。

4.2. データベースの作成

XAMPPを使用している場合、MySQLデータベースを管理するために phpMyAdmin を利用できます。

XAMPPコントロールパネルを開き、「MySQL」の「Admin」ボタンをクリックして phpMyAdmin を起動します。

php artisan migrate

を実行してデータベースを作成しましょう。データベースがないと指摘されるのでyesと答えて作成しましょう。

4.3. マイグレーションの作成と実行

Laravelのマイグレーション機能を使用して、データベースのテーブルを作成します。まず、マイグレーションファイルを作成します。別のターミナルを開いて、以下のコマンドをプロジェクトディレクトリ内で実行してください

php artisan make:migration create_posts_table --create=posts

upメソッドの中を次のように変更してください。

Schema::create('posts', function (Blueprint $table) {
    $table->id();
    $table->text('comment');
    $table->timestamps(); 
});

マイグレーションファイルを編集したら、以下のコマンドを実行してデータベースにテーブルを作成します。

posts テーブルをデータベースに作成します。

これで、Laravelを使用して匿名掲示板用のテーブルがデータベースに作成されました。このテーブルを使用して、匿名での投稿を保存し、表示するように実装しましょう。

5. ルーティングとコントローラー

まずは掲示板の表示部分を作成してみましょう。

5.1. 表示部分のルーティング

routes/web.php のファイルを編集するとルーティンができます。

use App\Http\Controllers\PostController;

Route::get('/posts', [PostController::class, 'show']);

5.2. コントローラーの作成

PostControllerというコントローラーを使用するために作成します。

コントローラーは、アプリケーションのビジネスロジックを処理するためのクラスです。新しいコントローラーは、php artisan make:controller コマンドを使用して作成できます。例えば、PostController を作成するには、以下のコマンドを実行します。

php artisan make:controller PostController

このコマンドにより、app/Http/Controllers/PostController.php に新しいコントローラークラスが作成されます。投稿のリストを表示する show メソッドを以下のように追加します。

class PostController extends Controller
{
		//追加する部分
    public function show()
    {
        return view('posts.show');
    }
}

5.3. ビューの作成

コントローラーのメソッドからビューを返却することで、ユーザーに情報を表示できます。上の例では、posts.show というビューを返却しています。ビューファイルは resources/views ディレクトリ内に配置され、.blade.php 拡張子を持ちます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>掲示板</title>
</head>
<body>

      <h1>掲示板</h1>
      

</body>
</html>

次に投稿を保存する処理を実装しましょう。

5.4. コメントの投稿用のルーティングの追加

まず、新しい投稿を保存するためのルーティングを追加します。routes/web.php ファイルに以下のコードを追加して、投稿データを受け取り、処理するためのルートを設定します。

use App\Http\Controllers\PostController;

// 既存のルーティング
Route::get('/posts', [PostController::class, 'show']);

// 新しい投稿を保存するためのルーティング
Route::post('/posts', [PostController::class, 'store']);

ここでは、PostController の store メソッドを /posts のURLとPOSTリクエストにマッピングしています。

5.5. モデルの作成

データベースのレコードとアプリケーションのエンティティ（例：投稿）との間のやり取りを行うためにPostモデルの作成を行います。

Laravelのアーティザンコマンドを使用して、新しいモデルを生成します。ターミナルまたはコマンドプロンプトで、以下のコマンドを実行します：

php artisan make:model Post

このコマンドは、app/Models ディレクトリに Post.php という名前の新しいモデルファイルを作成します。

//　上、既存のコード
class Post extends Model
{
		//追加する部分
    protected $fillable = ['comment'];
}

5.6. コントローラーの編集

app/Http/Controllers/PostController.php ファイルを開き、以下のように store メソッドを追加します。

//　上、既存のコード
use App\Models\Post; //　追加

class PostController extends Controller
{
		// indexなどの既存のコードは省略
		
    public function store(Request $request)
    {
				Post::create(
					[
						"comment"=>$request->comment
					]
				);

        return redirect('/posts')->with('success', '投稿が保存されました！');
    }
}

このコードは、リクエストから comment を取得し、新しい Post インスタンスに格納してからデータベースに保存します。保存後は、ユーザーを投稿一覧ページにリダイレクトします。

5.7. ビューの編集

ユーザーが投稿を作成できるように、 resources/views/posts/index.blade.php のビューを編集します。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>掲示板</title>
</head>
<body>
    <h1>掲示板</h1>
    @foreach($posts as $post)
		    <div>{{$post->created_at}} 匿名さん</div>
        <div>{{$post->comment}}</div>
    @endforeach
    <form method="POST">
        @csrf <!-- CSRF トークン -->
        <div>
            <label for="comment">コメント</label>
            <textarea name="comment" required></textarea>
        </div>
        <div>
            <button type="submit">コメントする</button>
        </div>
    </form>

</body>
</html>

このビューファイルには、タイトルと本文を入力するためのフォームが含まれており、フォームはPOSTメソッドを使用して /posts にデータを送信します。

こんな感じのものができました。

6. Tailwindでデザイン

見た目が寂しいのでtailwind CSSでデザインをしましょう。npmが必要なので、公式サイトからnodeをインストールしてください。

6.1. Tailwind CSSの導入

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

resources/css/app.cssを次のようにしてください。

@tailwind base;
@tailwind components;
@tailwind utilities;

ターミナルで次のコマンドを実行してください。これ以降コマンドはそのままにしておいてください。

npm run dev


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @vite(["resources/css/app.css"])
    <title>掲示板</title>
</head>
<body>
    <div class="container mx-auto">
        <h1 class="text-3xl font-bold mt-4 mb-2 text-center">掲示板</h1>
        @foreach($posts as $post)
            <div class="border-gray-300 border-b-2 mb-2">{{$post->created_at}} <span class="text-green-500">匿名さん</span></div>
            <div class="mt-2 p-4 py-0">{{$post->comment}}</div>
        @endforeach
        <form method="POST">
            @csrf <!-- CSRF トークン -->
            <div>
                <textarea name="comment" required rows="3" class="border mt-4 mb-4 p-4 w-full"></textarea>
            </div>
            <div class="flex justify-center">
                <button type="submit" class="px-4 py-2 bg-blue-500 hover:bg-blue-700 text-white rounded">コメントする</button>
            </div>
        </form>
    </div>

</body>
</html>

6.2. まとめ

ここから、外部制約キーを使用したら、それぞれの板ごとの掲示板を作成することもできます。

$はるか$

はるか

連打とかにも対応できるようにしたい

$ふゅか$

ふゅか

あとで内容を更新するわ。

ホームに戻る

【2024年度最新版】Laravel10で作って学ぶ匿名掲示板チュートリアル

1. はじめに

1.1. Laravelとは？

1.2. 記事の目標

2. 環境構築

2.1. Composerのインストール

2.2. XAMPPのインストール

3. プロジェクトの作成

3.1. Laravelプロジェクトの作成

3.2. プロジェクトディレクトリへの移動

3.3. 開発サーバーの起動

4. データベースの準備

4.1. Laravelでのデータベース接続設定

4.2. データベースの作成

4.3. マイグレーションの作成と実行

5. ルーティングとコントローラー

5.1. 表示部分のルーティング

5.2. コントローラーの作成

5.3. ビューの作成

5.4. コメントの投稿用のルーティングの追加

5.5. モデルの作成

5.6. コントローラーの編集

5.7. ビューの編集

6. Tailwindでデザイン

6.1. Tailwind CSSの導入

6.2. まとめ

Laravelでローカルの開発中のページをスマホでも確認する方法

phpでスマホかPCか判定する方法　～ユーザーエージェント～

laravelのデプロイやgithubで開発するときの大雑把なフロー

Laravel Jetstreamでユーザー登録やパスワードの更新・リセットを制限する方法

LaravelのBladeの意味と使い方について

【2024年度最新版】Laravel10で作って学ぶ匿名掲示板チュートリアル

1. はじめに

1.1. Laravelとは？

1.2. 記事の目標

2. 環境構築

2.1. Composerのインストール

2.2. XAMPPのインストール

3. プロジェクトの作成

3.1. Laravelプロジェクトの作成

3.2. プロジェクトディレクトリへの移動

3.3. 開発サーバーの起動

4. データベースの準備

4.1. Laravelでのデータベース接続設定

4.2. データベースの作成

4.3. マイグレーションの作成と実行

5. ルーティングとコントローラー

5.1. 表示部分のルーティング

5.2. コントローラーの作成

5.3. ビューの作成

5.4. コメントの投稿用のルーティングの追加

5.5. モデルの作成

5.6. コントローラーの編集

5.7. ビューの編集

6. Tailwindでデザイン

6.1. Tailwind CSSの導入

6.2. まとめ

Laravelでローカルの開発中のページをスマホでも確認する方法

phpでスマホかPCか判定する方法 ～ユーザーエージェント～

laravelのデプロイやgithubで開発するときの大雑把なフロー

Laravel Jetstreamでユーザー登録やパスワードの更新・リセットを制限する方法

LaravelのBladeの意味と使い方について

phpでスマホかPCか判定する方法　～ユーザーエージェント～