ご依頼を検討されている方

【完全版】Laravel6で掲示板を作成する方法【コメント機能】

URLをコピーする
URLをコピーしました!

現在、記事は完成していません。徐々に完成に近づけていきます。→過程をお楽しみください。

本記事の想定読者
  • Laravel6で掲示板を作成する方法を知りたい
  • Laravel6で掲示板のコメント機能を作成する方法を知りたい

本記事では、Laravel6で掲示板を作成するチュートリアルを解説していきます。

おにちゃん

執筆者:Laravel6×Bootstrap5を愛用している大学生エンジニアが本記事を解説します。


本記事のゴール

  1. ローカル環境を準備する
  2. Laravel6で掲示板を作成する
  3. Xserverにアップロード
  4. 掲示板の完成

多くの方に読まれてる記事

目次

Laravel6掲示板の前に:ローカル環境を準備する

Laravel6掲示板の前に:ローカル環境を準備する

Laravel6で掲示板を作成するためにはローカル環境を準備する必要があります。

  • MAMP
  • コンテナ
おにちゃん

2021年6月時点で僕自身がコンテナの使い方を知らないので、本記事ではMAMPでのLaravel6を採用しています。


環境①MAMP

MAMPでLaravelを始めるためには下記の手順が必要です

  1. MAMPをインストール
  2. MAMPの初期設定
  3. Laravel6を準備する
おにちゃん

本記事では、作業フォルダ名=『keiji』として開発を進めていきます。

Applications/MAMP/htdocs/keiji/

MAMPの準備を終えている方は次のステップへ移動してください。準備を終えていない方は下記の記事を参考にしてください。


Laravel6で掲示板を作成する手順

Laravel6で掲示板を作成する手順


作成手順①データベース接続

.envファイルを修正していきます。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=keiji
DB_USERNAME=root
DB_PASSWORD=root
DB_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock

.envファイルを修正できた方はphpmyadminへ移動してください。

先ほど記述したkeijiデータベースを作成していきます。

  • Database name:keiji
  • utfコード:uft8_general_ci

ここまでを終えた方は、マイグレーションコマンドを打ってみましょう。

php artisan migrate

このように表示されれば問題なしです。

確認のため、phpmyadminへ行き、keijiデータベースをクリックしてみてください。

  • failed_job
  • migrations
  • password_ressets
  • users
おにちゃん

Laravelのデフォルトでは上記4つテーブルが作られています。


手順②テーブルを作成する

Postテーブルを作成していきます。

Laravelでテーブル作成する際にするべきことはマイグレーションです。

マイグレーションを簡単に言うと、データベース関連の操作を簡単に行える仕組みです。

難しく考えず、マイグレーション=データベース操作と理解しておきましょう。

php artisan make:migration create_posts_table

テーブル名の規則

・小文字+複数形

フォルダ名<database<migrationsの中に新しく作成したcreate_posts_tableがありますので、そのファイルに下記の追加部分を追記してください。

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('post_name'); //追加
            $table->text('post_content'); //追加
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}
  • id:投稿番号、incrementなので+1されていく
  • post_name:投稿者の名前
  • post_content:投稿内容
  • timestamps:投稿時間+更新時間

このテーブルで投稿する機能の根幹は完成です。下記のコマンドを入力してテーブルを作成しましょう。

php artisan migrate

phpmyadminに行ってみてください。新しくpostsが追加されているはずです。

postsをクリックすると、先ほど追加したカラムが表示されるはずです。


手順③ダミーデータを挿入する

ここまでできた方はダミーデータを準備していきましょう。

php artisan make:seeder PostsTableSeeder

databaseフォルダのseedフォルダ内に新しく生成されます。PostsTableSeederのファイル内に下記のコードを追加して下さい。

<?php

use Illuminate\Database\Seeder;

class PostsTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        DB::table('posts')->insert([
            'id' => '1',
            'post_name' => 'おにちゃん塾',
            'post_content' => 'Laravel6で掲示板を作成する方法',
            'created_at' => date('Y-m-d H:i:s'),
            'updated_at' => date('Y-m-d H:i:s'),
        ]);
    }
}

コードの意味は、データベース内のテーブルpostsに([])挿入してくださいです。

このコードを終えた方は、seedフォルダ内にあるDatabaseSeeder.php内を修正してください。

<?php

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        $this->call(PostsTableSeeder::class);
    }
}

その後、下記のコマンドをターミナルに入力してください。

php artisan db:seed


手順④ダミーデータを表示させる

ダミーデータを表示させるには4つのことをしていきます。

  1. モデルを作成する
  2. コントローラーを作成する
  3. ビューを作成する
  4. ルーティング設定をする

大したことはしませんので、安心ししてください。


モデルを作成する

postsテーブルを操作するために、Postモデルを作成しましょう。

php artisan make:model Post

appフォルダ内にPost.phpが生成されていますので、そこを少しだけいじります。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $guarded = ['id'];
}

idカラムは更新があっても変更しないでねと言う意味です。

コントローラーを作成する

コントローラーは全ての架け橋となる部分なので、必ず理解するようにしましょう。

php artisan make:controller PostController

作成後、app<http<Controller<PostControllerを開き、下記のコードを入力します。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;

class PostController extends Controller
{
    public function index(){
        $posts = Post::orderBy('id', 'asc')->get();
        return view('posts', ["posts" => $posts]);
    }
}


ビューを作成する

bladeテンプレートを活用して、posts.blade.phpを作成してください。

コントローラで指定したpostのbladeファイルを作成していきます。

@foreach($posts as $post)
<h2>{{$post->id}}</h2>
<h2>{{$post->post_name}}</h2>
<h2>{{$post->post_content}}</h2>
<h2>{{$post->created_at}}</h2>
<h2>{{$post->updated_at}}</h2>
@endforeach


ルーティング設定をする

Route::get('/', 'PostController@index');


手順⑤投稿機能を構築する

投稿機能を構築するには四つのファイルを追加していきます。

  • コントローラーに追加
  • ビューの修正
  • ビューの追加
  • ルーティング修正
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;

class PostController extends Controller
{
    public function index(){
        $posts = Post::orderBy('id', 'asc')->get();
        return view('posts', ["posts" => $posts]);
    }

    public function create(){
        return view('create_page');
    }

    public function store(Request $request){
        $post = new Post();
        $post->post_name = $request->post_name;
        $post->post_content = $request->post_content;
        $post->save();

        return redirect('/');
    }
}
@foreach($posts as $post)
<h2>{{$post->id}}</h2>
<h2>{{$post->post_name}}</h2>
<h2>{{$post->post_content}}</h2>
<h2>{{$post->created_at}}</h2>
<h2>{{$post->updated_at}}</h2>
<a href="/create/page">投稿画面へ</a>
@endforeach
<form action="/create" method="post">
@csrf 
<label>投稿者</label>
<div>
<input type="text" name="post_name">
</div>
<label>投稿内容</label>
<div>
<textarea name="post_content" cols="30" rows="10"></textarea>
</div>
<input type="submit" value="投稿する">
</form>
Route::get('/', 'PostController@index');

Route::get('/create/page', 'PostController@create');
Route::post('/create', 'PostController@store');


Laravel6掲示板をサーバーにアップロード

Laravel6掲示板をサーバーにアップロード

おにちゃん塾がおすすめしているサーバーは下記の通りです。


まとめ:Laravel6で掲示板を作成する方法

まとめ:Laravel6で掲示板を作成する方法

ここまでで【完全版】Laravel6で掲示板を作成する方法【コメント機能】の解説は以上です。

おにちゃん

本記事は以上です。最後までご覧くださりありがとうございました。



フリーランスで稼ぎたい方向け

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる