1.下記リンクを元に、comopserをinstallする。
https://getcomposer.org/download/
googleで「composer download」で検索してください。
↓下記はサイトに書いてある情報のコピーです。まずは上記のリンクを確認ください。
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '756890a4488ce9024fc62c56153228907f1545c228516cbf63f885e036d37e9a59d27d63f46af1d4d07ee0f76181c7d3') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
・composer.pharファイルのパスを通す。
下記コマンドを実行することによって、composer installのように実行できるようになります。
$ sudo mv composer.phar /usr/local/bin/composer
※ $は入力しなくていいです。$は、ターミナルに表示されている$を一般的に表現します。
Laravel SailでLaravelをインストールする
1.laravelをインストールする。
$ curl -s "https://laravel.build/example-app" | bash
※example-appがアプリの名前です。
Laravel Sailでdocker upをします
1.sail upでdockerを立ち上げる
cd skills
./vendor/bin/sail up
2.sailのエイリアス設定
そのプロジェクトでsailコマンドが楽になる。
$ alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'
alias sail="vendor/bin/sail"
source .zshrc
最初のプログラムを作ってみよう【ルーティング】
1.laravelのディレクトリに移動する
$ cd /Users/imanaka/works/skills # <-こちらのディレクトリはサンプルです。
2.artisanコマンドでコントローラーを作成する
$ sail php artisan make:controller ExampleController
※sailコマンドは、パスを通していない場合は、下記で実行ください。
$ ./vendor/bin/sail
3.bladeを作成する
welcome.blade.phpをコピーしてexample.blade.phpを作成する。
※ $はターミナルのプロンプトを表現してますので、実行しなくて大丈夫です。
<?php
use App\Http\Controllers\ExampleController;
use Illuminate\Support\Facades\Route;
return Route::get('/example', [ExampleController::class, 'index']);
最初のプログラムを作ってみよう【コントローラー】
ExampleController.phpを下記内容にします。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ExampleController extends Controller
{
//
public function index()
{
return view('welcome');
}
}
最初のプログラムを作ってみよう【ビュー】
example.blade.phpを下記内容にします。
<!DOCTYPE html>
<html>
<body>
<h1><span class="ez-toc-section" id="example%E3%83%96%E3%83%AC%E3%83%BC%E3%83%89%E3%81%A7%E3%81%99%E3%80%82"></span>exampleブレードです。<span class="ez-toc-section-end"></span></h1>
</body>
</html>
最初のプログラムを作ってみよう【モデル】
1.Exampleモデルを作成する
$ sail php artisan make:model Example
skills/app/Models/Example.phpファイルが作成されます。
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Example extends Model
{
use HasFactory;
}
最初のプログラムを作ってみよう【マイグレーション作成】
1.マイグレーションファイルの作成をする
$ sail php artisan make:migration create_examples_table
skills/database/migrations/2021_08_20_110205_create_examples_tableのようなファイルが作成されます。
※2021_08_20_110205は日付です。実行時の日付が入ります。
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateExamplesTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('examples', function (Blueprint $table) {
$table->id();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('examples');
}
}
最初のプログラムを作ってみよう【マイグレーション実行】
1.マイグレーションファイルを実行する
$ sail php artisan migrate
データベース管理ツール【Workbench】のインストール
1.MySQL Workbenchのダウンロード
データベース管理ツール【Workbench】の設定
MySQL Workbenchの設定
1.[.env]ファイルの内容をWorkbenchに設定する
※：より左が項目名、右が入力名です。
Connection Name：skills
Default Schema：skills
Username：sail
Password：password
データベースシーダー作成
1.データベースシーダーを作成する
$ sail php artisan make:seeder ExampleSeeder
データベースシーダー実行
1.データベースシーダーを実行する
$ sail php artisan db:seed --class=ExampleSeeder
<?php
namespace Database\Seeders;
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;
class ExampleSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
DB::table('examples')->insert([
'id' => 10,
]);
}
}
データベースシーダーで挿入されたファイルを確認する
1.データベースに格納されているテーブルの中身を検索する
select * from examples;
コントローラーでモデルを利用する
1.ExampleController.phpにModelを記述します。
$examples = Example::all();
2.ExampleController.phpにview(example.blade.php)に変数（$examples）を渡します。
return view('example', [
'examples' => $examples
]);
3.example.blade.phpで変数（$examples）を受け取ります。
{{ $examples }}
<?php
namespace App\Http\Controllers;
use App\Models\Example;
use Illuminate\Http\Request;
class ExampleController extends Controller
{
//
public function index()
{
$examples = Example::all();
return view('example', [
'examples' => $examples
]);
}
}
<!DOCTYPE html>
<html>
<body>
<h1><span class="ez-toc-section" id="example%E3%83%96%E3%83%AC%E3%83%BC%E3%83%89%E3%81%A7%E3%81%99%E3%80%82-2"></span>exampleブレードです。<span class="ez-toc-section-end"></span></h1>
{{ $examples }}
</body>
</html>
Laravel Breezeでログイン機能を実装する
$ sail composer require laravel/breeze --dev
$ sail php artisan breeze:install # breezeをインストールすると、tailwindcssの設定がされる。
$ sail npm install
$ sail root-shell
$ npm install -g npm@7.22.0
$ sail npm run dev
$ sail php artisan migrate
■sail npm installが失敗する場合
OCI runtime exec failed: exec failed: container_linux.go:380: starting container process caused: exec: “npm”: executable file not found in $PATH: unknown
→ dockerのアップデート＋docker buildで解決することがあります。
Laravel Breezeでログイン機能を日本語化する
1.日本語化（バリデーションなどの翻訳データ）データを下記からダウンロード
https://github.com/Laravel-Lang/lang
2.resources/lang/jsに配置してja.jsonは、lang配下におく
resources/lang/ja.json
日本語化（バリデーションなどの翻訳データ）
https://github.com/Laravel-Lang/lang
・Document
https://readouble.com/laravel/8.x/ja/localization.html
スキルテーブルを作成する
1.Skillsモデルの作成
$ sail php artisan make:model Skill
2.マイグレーションファイルの作成をする
$ sail php artisan make:migration create_skills_table
3.マイグレーションファイルを修正する
2021_08_23_233710_create_skills_table.php # こちらは「日付_create_skills_table.php」のファイルが作成されます。
Schema::create('skills', function (Blueprint $table) {
$table->id();
$table->string('skill_name');
$table->integer('skill_status');
$table->timestamps();
});
4.マイグレーションファイルを実行する
$ sail php artisan migrate
5.データベースシーダーを作成する
$ sail php artisan make:seeder SkillSeeder
下記をseederに追記。
use Illuminate\Support\Facades\DB;
DB::table('skills')->insert([
['skill_name' => 'PHP', 'skill_status' => 1],
['skill_name' => 'Laravel', 'skill_status' => 2],
['skill_name' => 'JavaScript', 'skill_status' => 3],
]);
6.データベースシーダーを実行する
$ sail php artisan db:seed --class=SkillSeeder
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateSkillsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('skills', function (Blueprint $table) {
$table->id();
$table->string('skill_name');
$table->integer('skill_status');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('skills');
}
}
<?php
namespace Database\Seeders;
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;
class SkillSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
DB::table('skills')->insert([
['skill_name' => 'PHP', 'skill_status' => 1],
['skill_name' => 'Laravel', 'skill_status' => 2],
['skill_name' => 'JavaScript', 'skill_status' => 3],
]);
}
}
スキルテーブルの定数を設定する
6.データベースシーダーを実行する
const SKILL_STATUS_NOT_YET = 1;
const SKILL_STATUS_LEARNING = 2;
const SKILL_STATUS_LEARNED = 3;
const SKILL_STATUS_RELEARN = 4;
const SKILL_STATUS_MASTER = 5;
const SKILL_STATUS_NAME_NOT_YET = '未学習';
const SKILL_STATUS_NAME_LEARNING = '学習中';
const SKILL_STATUS_NAME_LEARNED = '学習済';
const SKILL_STATUS_NAME_RELEARN = '再学習';
const SKILL_STATUS_NAME_MASTER = 'マスター';
const SKILL_STATUS_OBJECT = [
self::SKILL_STATUS_NOT_YET => self::SKILL_STATUS_NAME_NOT_YET,
self::SKILL_STATUS_LEARNING => self::SKILL_STATUS_NAME_LEARNING,
self::SKILL_STATUS_LEARNED => self::SKILL_STATUS_NAME_LEARNED,
self::SKILL_STATUS_RELEARN => self::SKILL_STATUS_NAME_RELEARN,
self::SKILL_STATUS_MASTER => self::SKILL_STATUS_NAME_MASTER,
];
スキルデータの表示【Read】
1.ログインしているユーザは、skill配下を閲覧できるようにする。
Route::middleware(['auth'])->prefix('skill')->group(function () {
Route::get('/', [SkillController::class, 'index'])->name('skill');
});
2.dashboard.blade.phpを元に、skill/index.blade.phpファイルを作成する。
skillディレクトリは自分で作成する。
3.ExampleController.phpを元にSkillController.phpをコピーして作る
4.layouts/navigation.blade.phpにスキルを追加する。
5.tailwindcssのtable-layoutのページからテーブルのサンプルをとってきて、skill/index.blade.phpに設定する。
6.テーブルに@foreachでSkillsテーブルの値を表示させる
■補足
・tailwindcss
テーブル
https://tailwindcss.jp/docs/table-layout
Form
https://v1.tailwindcss.com/components/forms
下記を元に気に入ったものを利用する
https://tailblocks.cc/
@foreachは、処理を繰り返します。
@foreach($skills as $skill)
{{ $skill }}
@endforeach
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight"><span class="ez-toc-section" id="%E3%82%B9%E3%82%AD%E3%83%AB"></span>
スキル
<span class="ez-toc-section-end"></span></h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
<button onclick="location.href='/skill/new'" class="shadow bg-blue-500 hover:bg-blue-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" type="button">
新規作成
</button>
<table class="table-auto">
<thead>
<tr>
<th class="px-4 py-2">ID</th>
<th class="px-4 py-2">スキル名</th>
<th class="px-4 py-2">ステータス</th>
<th class="px-4 py-2"></th>
</tr>
</thead>
<tbody>
@foreach($skills as $skill)
<tr>
<td class="border px-4 py-2">{{ $skill->id }}</td>
<td class="border px-4 py-2">{{ $skill->skill_name }}</td>
<td class="border px-4 py-2">{{ \App\Models\Skill::SKILL_STATUS_OBJECT[$skill->skill_status] }}</td>
<td class="border px-4 py-2">
<button onclick="location.href='/skill/detail/{{ $skill->id }}'" class="shadow bg-yellow-500 hover:bg-yellow-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" type="button">
詳細
</button>
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="flex justify-center mt-3">
{{ $skills->links() }}
</div>
</div>
</div>
</div>
</div>
</x-app-layout>
スキルデータの表示【ページネーション】
1.SkillContorllerでpaginateを指定する。
$skills = Skill::paginate(2);
2.skill/index.blade.phpに下記を追加する
<div class="flex justify-center mt-3">
{{ $skills->links() }}
</div>
https://readouble.com/laravel/8.x/ja/pagination.html
ペジネーションビューのカスタマイズ
sail php artisan vendor:publish –tag=laravel-pagination
スキルデータの表示【詳細ページ】
1.tailwindcssのformをコピーして、skill/detail.blade.phpを作成する
https://v1.tailwindcss.com/components/forms
■補足
・tailwindcss
Form
https://v1.tailwindcss.com/components/forms
ボタン（button）
https://v1.tailwindcss.com/components/buttons#app
詳細：青
変更：オレンジ
削除：赤
戻る：グレー
下記を元に気に入ったものを利用してもいい。
https://tailblocks.cc/
・センターによせたい
flex justify-center
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight"><span class="ez-toc-section" id="%E3%82%B9%E3%82%AD%E3%83%AB-2"></span>
スキル
<span class="ez-toc-section-end"></span></h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200 flex justify-center">
<form class="w-full max-w-sm">
<div class="md:flex md:items-center mb-6">
<div class="md:w-1/3">
<label class="block text-gray-500 font-bold md:text-left mb-1 md:mb-0 pr-4" for="inline-full-name">
ID
</label>
</div>
<div class="md:w-2/3">
{{ $skill->id }}
</div>
</div>
<div class="md:flex md:items-center mb-6">
<div class="md:w-1/3">
<label class="block text-gray-500 font-bold md:text-left mb-1 md:mb-0 pr-4" for="inline-full-name">
スキル名
</label>
</div>
<div class="md:w-2/3">
{{ $skill->skill_name }}
</div>
</div>
<div class="md:flex md:items-center mb-6">
<div class="md:w-1/3">
<label class="block text-gray-500 font-bold md:text-left mb-1 md:mb-0 pr-4" for="inline-password">
ステータス
</label>
</div>
<div class="md:w-2/3">
{{ \App\Models\Skill::SKILL_STATUS_OBJECT[$skill->skill_status] }}
</div>
</div>
<div class="md:flex md:items-center">
<div class="md:w-2/3">
<button onclick="location.href='/skill'" class="shadow bg-gray-500 hover:bg-gray-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" type="button">
戻る
</button>
<button onclick="location.href='/skill/edit/{{ $skill->id }}'" class="shadow bg-yellow-500 hover:bg-yellow-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" type="button">
更新ページへ
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</x-app-layout>
スキルデータの作成【Create】
1.ルーティング
web.phpにnewを追加する
2.コントローラー
SkillController.phpのnewを追加する。
3.view
new.blade.phpをdetail.blade.phpから追加する。
4.ルーティング
web.phpにcreateを追加する
5.コントローラー
SkillController.phpにcreateを追加する。
<?php
use App\Http\Controllers\SkillController;
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::get('/dashboard', function () {
return view('dashboard');
})->middleware(['auth'])->name('dashboard');
Route::middleware(['auth'])->prefix('skill')->group(function() {
Route::get('/', [SkillController::class, 'index'])->name('skill');
Route::get('/detail/{id}', [SkillController::class, 'detail'])->name('skill.detail');
Route::get('/new', [SkillController::class, 'new'])->name('skill.new');
Route::post('/create', [SkillController::class, 'create'])->name('skill.create');
});
require __DIR__.'/auth.php';
<?php
namespace App\Http\Controllers;
use App\Models\Skill;
use Illuminate\Http\Request;
class SkillController extends Controller
{
//
public function index()
{
$skills = Skill::paginate(15);
return view('skill.index', [
'skills' => $skills
]);
}
public function detail($id)
{
$skill = Skill::find($id);
return view('skill.detail', [
'skill' => $skill
]);
}
public function new()
{
return view('skill.new');
}
public function create(Request $request)
{
$skill = new Skill();
$skill->skill_name = $request->input('skill_name');
$skill->skill_status = $request->input('skill_status');
$skill->save();
return redirect('skill');
}
}
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight"><span class="ez-toc-section" id="%E3%82%B9%E3%82%AD%E3%83%AB-3"></span>
スキル
<span class="ez-toc-section-end"></span></h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
<button onclick="location.href='/skill/new'" class="shadow bg-blue-500 hover:bg-blue-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" type="button">
新規作成
</button>
<table class="table-auto">
<thead>
<tr>
<th class="px-4 py-2">ID</th>
<th class="px-4 py-2">スキル名</th>
<th class="px-4 py-2">ステータス</th>
<th class="px-4 py-2"></th>
</tr>
</thead>
<tbody>
@foreach($skills as $skill)
<tr>
<td class="border px-4 py-2">{{ $skill->id }}</td>
<td class="border px-4 py-2">{{ $skill->skill_name }}</td>
<td class="border px-4 py-2">{{ \App\Models\Skill::SKILL_STATUS_OBJECT[$skill->skill_status] }}</td>
<td class="border px-4 py-2">
<button onclick="location.href='/skill/detail/{{ $skill->id }}'" class="shadow bg-yellow-500 hover:bg-yellow-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" type="button">
詳細
</button>
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="flex justify-center mt-3">
{{ $skills->links() }}
</div>
</div>
</div>
</div>
</div>
</x-app-layout>
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight"><span class="ez-toc-section" id="%E3%82%B9%E3%82%AD%E3%83%AB%E6%96%B0%E8%A6%8F%E7%99%BB%E9%8C%B2"></span>
スキル新規登録
<span class="ez-toc-section-end"></span></h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200 flex justify-center">
<form class="w-full max-w-sm" action="/skill/create" method="POST">
@csrf
<div class="md:flex md:items-center mb-6">
<div class="md:w-1/3">
<label class="block text-gray-500 font-bold md:text-left mb-1 md:mb-0 pr-4" for="inline-full-name">
スキル名
</label>
</div>
<div class="md:w-2/3">
<input required name="skill_name" class="appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-full-name" type="text" value="">
</div>
</div>
<div class="md:flex md:items-center mb-6">
<div class="md:w-1/3">
<label class="block text-gray-500 font-bold md:text-left mb-1 md:mb-0 pr-4" for="inline-password">
ステータス
</label>
</div>
<div class="md:w-2/3">
<select name="skill_status" class="appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-full-name">
@foreach(\App\Models\Skill::SKILL_STATUS_OBJECT as $key => $skillName)
<option value="{{ $key }}">{{$skillName}}</option>
@endforeach
</select>
</div>
</div>
<div class="md:flex md:items-center">
<div class="md:w-2/3">
<button onclick="location.href='/skill'" class="shadow bg-gray-500 hover:bg-gray-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" type="button">
戻る
</button>
<button type="submit" class="shadow bg-blue-500 hover:bg-blue-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded">
登録
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</x-app-layout>
スキルデータの表示【フラッシュメッセージ】
1. tailwindcss flass messageでgoogle検索する
vuejsを入れる
$ sail composer require laravel/ui -- 下のコマンドを使うために実行する
$ sail php artisan ui vue -- このコマンドでvuejsがインストールされる
$ sail npm install
$ sail npm run dev
webpackがsassになってしまった。
mix.js('resources/js/app.js', 'public/js')
.vue()
// .sass('resources/sass/app.scss', 'public/css');
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);
->with('status', 'スキルを作成しました。');
@if(session('status'))
<div class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded relative" role="alert">
<span class="block sm:inline">{{ session('status') }}</span>
<span class="absolute top-0 bottom-0 right-0 px-4 py-3">
<svg class="fill-current h-6 w-6 text-blue-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
</span>
</div>
@endif
スキルデータの表示【フラッシュメッセージ】
1.vueをインストールする
$ sail composer require laravel/ui
$ sail php artisan ui vue
2.tailwindcssがうまく表示されない場合は、下記をwebpack.mix.jsに上書き貼り付けしてください。
sail php artisan ui vueコマンドを実行すると、webpack.mix.jsファイルが上書きされてしまうようです。
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.vue()
// .sass('resources/sass/app.scss', 'public/css');
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);
3.webpack.mix.jsで設定した内容を反映させるために、下記コマンドを実行します。
sail npm run dev
もし、下記のようなメッセージが表示されたら、
Additional dependencies must be installed. This will only take a moment.
Running: npm install vue-loader@^15.9.7 –save-dev –legacy-peer-deps
Finished. Please run Mix again.
上記のRunningの箇所にあるように、下記コマンドを実行してみてから、再度「sail npm run dev」を実行してみてください。
$ sail npm install vue-loader@^15.9.7 --save-dev --legacy-peer-deps
スキルデータの更新【Update】
<?php
use App\Http\Controllers\SkillController;
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::get('/dashboard', function () {
return view('dashboard');
})->middleware(['auth'])->name('dashboard');
Route::middleware(['auth'])->prefix('skill')->group(function() {
Route::get('/', [SkillController::class, 'index'])->name('skill');
Route::get('/detail/{id}', [SkillController::class, 'detail'])->name('skill.detail');
Route::get('/new', [SkillController::class, 'new'])->name('skill.new');
Route::get('/edit/{id}', [SkillController::class, 'edit'])->name('skill.edit');
Route::post('/create', [SkillController::class, 'create'])->name('skill.create');
Route::patch('/update', [SkillController::class, 'update'])->name('skill.update');
});
require __DIR__.'/auth.php';
<?php
namespace App\Http\Controllers;
use App\Models\Skill;
use Illuminate\Http\Request;
class SkillController extends Controller
{
//
public function index()
{
$skills = Skill::paginate(15);
return view('skill.index', [
'skills' => $skills
]);
}
public function detail($id)
{
$skill = Skill::find($id);
return view('skill.detail', [
'skill' => $skill
]);
}
public function new()
{
return view('skill.new');
}
public function create(Request $request)
{
$skill = new Skill();
$skill->skill_name = $request->input('skill_name');
$skill->skill_status = $request->input('skill_status');
$skill->save();
return redirect('skill')->with('status', 'スキルを作成しました。');
}
public function edit($id)
{
$skill = Skill::find($id);
return view('skill.edit', [
'skill' => $skill
]);
}
public function update(Request $request)
{
$skill = Skill::find($request->input('id'));
$skill->skill_name = $request->input('skill_name');
$skill->skill_status = $request->input('skill_status');
$skill->save();
return redirect('skill')->with('status', 'スキルを更新しました。');
}
}
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight"><span class="ez-toc-section" id="%E3%82%B9%E3%82%AD%E3%83%AB-4"></span>
スキル
<span class="ez-toc-section-end"></span></h2>
</x-slot>
<div id="app">
@if(session('status'))
<flash-message-component session="{{ session('status') }}"></flash-message-component>
@endif
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
<button onclick="location.href='/skill/new'" class="shadow bg-blue-500 hover:bg-blue-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" type="button">
新規作成
</button>
<table class="table-auto">
<thead>
<tr>
<th class="px-4 py-2">ID</th>
<th class="px-4 py-2">スキル名</th>
<th class="px-4 py-2">ステータス</th>
<th class="px-4 py-2"></th>
<th class="px-4 py-2"></th>
</tr>
</thead>
<tbody>
@foreach($skills as $skill)
<tr>
<td class="border px-4 py-2">{{ $skill->id }}</td>
<td class="border px-4 py-2">{{ $skill->skill_name }}</td>
<td class="border px-4 py-2">{{ \App\Models\Skill::SKILL_STATUS_OBJECT[$skill->skill_status] }}</td>
<td class="border px-4 py-2">
<button onclick="location.href='/skill/detail/{{ $skill->id }}'" class="shadow bg-gray-500 hover:bg-gray-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" type="button">
詳細
</button>
</td>
<td class="border px-4 py-2">
<button onclick="location.href='/skill/edit/{{ $skill->id }}'" class="shadow bg-yellow-500 hover:bg-yellow-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" type="button">
編集
</button>
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="flex justify-center mt-3">
{{ $skills->links() }}
</div>
</div>
</div>
</div>
</div>
</div>
</x-app-layout>
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight"><span class="ez-toc-section" id="%E3%82%B9%E3%82%AD%E3%83%AB-5"></span>
スキル
<span class="ez-toc-section-end"></span></h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200 flex justify-center">
<form class="w-full max-w-sm" action="/skill/update" method="POST">
@csrf
@method('PATCH')
<input value="{{ $skill->id }}" name="id" type="hidden">
<div class="md:flex md:items-center mb-6">
<div class="md:w-1/3">
<label class="block text-gray-500 font-bold md:text-left mb-1 md:mb-0 pr-4" for="inline-full-name">
ID
</label>
</div>
<div class="md:w-2/3">
{{ $skill->id }}
</div>
</div>
<div class="md:flex md:items-center mb-6">
<div class="md:w-1/3">
<label class="block text-gray-500 font-bold md:text-left mb-1 md:mb-0 pr-4" for="inline-full-name">
スキル名
</label>
</div>
<div class="md:w-2/3">
<input value="{{ $skill->skill_name }}" required name="skill_name" class="appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-full-name" type="text">
</div>
</div>
<div class="md:flex md:items-center mb-6">
<div class="md:w-1/3">
<label class="block text-gray-500 font-bold md:text-left mb-1 md:mb-0 pr-4" for="inline-password">
ステータス
</label>
</div>
<div class="md:w-2/3">
<select name="skill_status" class="appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-full-name">
@foreach(\App\Models\Skill::SKILL_STATUS_OBJECT as $key => $skillName)
<option value="{{ $key }}" @if($key === $skill->skill_status) selected @endif>{{$skillName}}</option>
@endforeach
</select>
</div>
</div>
<div class="md:flex md:items-center">
<div class="md:w-2/3">
<button onclick="location.href='/skill'" class="shadow bg-gray-500 hover:bg-gray-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" type="button">
戻る
</button>
<button type="submit" class="shadow bg-yellow-500 hover:bg-yellow-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded">
更新
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</x-app-layout>