タスク概要

新規記事登録ページの見た目を作成します。このページでは、ユーザーが新しい記事を作成するためのフォームが表示されます。

背景

現在、新規記事を作成する機能は存在しますが、そのための専用ページがありません。ユーザーが新しい記事を簡単に作成できるようにするため、新規記事登録ページが必要です。

ハイアーキテクチャ

graph LR
  A[User] -->|Access website| B((Browser))
  B --> C{new_article.blade.php}
  C --> D[Article Controller]
  D --> E{Article Model}
  E --> F[Database]

課題

新規記事を作成するための専用ページが存在しない。

解決策

新規記事登録ページを作成し、ユーザーが新しい記事を作成するためのフォームを表示します。

やること

resources/viewsディレクトリにnew_article.blade.phpファイルを作成します。
new_article.blade.phpに新規記事作成フォームを追加します。フォームには、記事のタイトルと本文を入力するためのフィールドが含まれます。

やらないこと

新規記事登録ページでのデータのバリデーションと保存は、このIssueの範囲外です。

テスト方案

新規記事登録ページにアクセスし、記事のタイトルと本文を入力するためのフィールドが表示されることを確認します。

やったこと

touch resources/views/articles/create.blade.php

https://realworld-docs.netlify.app/docs/specs/frontend-specs/templates/#createedit-articleからコピー

formにcsrfとmethod,actionを仕込む

       <form method="POST" action="{{ route('articles.create') }}">
                        @csrf

web.phpファイルからlocalhost/#/editor/に飛ぶようにルーティング

Route::middleware(['auth'])->controller(ArticleController::class)->name("articles.")->group(function () {
    Route::get("/editor", "create")->name("create");
});

ArticleController

    public function create()
    {
        return view("articles.create");
    }

を追記

テスト

sail artisan route:list

でeditorが追加されていることを確認

Sign inしてnew articleをクリックしページが正しく遷移していることを確認

YNSTakeru / sail-sandbox

Articleを登録するページのUIを実装 #30