- 投稿日：2021-05-05T18:13:19+09:00
Laravelで同一ページで複数のページネーション
Laravelで同一ページ内で複数のページネーションを実装するときのメモ 前提 バージョン：Laravel 6 実装方法 ①第3引数に値を渡す デフォルトでは第3引数が'page'となっているため同じページ中に複数のページネーションがあっても全て連動して動いてしまう。 これを避けるために、それぞれ別の値を渡す。 $hoge = Hoge::Paginate(5, ['*'], 'hogePage'); $funya = Funya::Paginate(5, ['*'], 'funyaPage'); ②リクエストへの処理追記 ①でページネーションを独立させることができるが、このままではページ遷移時に他のページネーションがリセットされてしまう。 appendsメソッドを使用して他のページネーションにも値を渡すことでこれを回避できる。 $hoge = Hoge::Paginate(5, ['*'], 'hogePage') ->appends(['funyaPage' => \Request::get('funyaPage')]); $funya = Funya::Paginate(5, ['*'], 'funyaPage') ->appends(['hogePage' => \Request::get('hogePage')]); 結果 以下のように独立したページネーションを同一ページ内で実装できた。 サンプルコード全文 DemoContoroller.php <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Hoge; use App\Funya; class DemoController extends Controller { public function paginateDemo() { $hoges = Hoge::Paginate(5, ['*'], 'hogePage') ->appends(['funyaPage' => \Request::get('funyaPage')]); $funyas = Funya::Paginate(5, ['*'], 'funyaPage') ->appends(['hogePage' => \Request::get('hogePage')]); return view('paginateDemo',[ 'hoges' => $hoges, 'funyas' => $funyas, ]); } } paginateDemo.blade.php <!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <title>paginateDemo</title> </head> <body> <ul class="list-group"> @foreach($hoges as $hoge) <li class='list-group-item'>{{ $hoge->name }}</li> @endforeach </ul> {{ $hoges->links() }} <ul class="list-group"> @foreach($funyas as $funya) <li class='list-group-item'>{{ $funya->name }}</li> @endforeach </ul> {{ $funyas->links() }} </body> </html> web.php <?php Route::get('/paginateDemo', 'DemoController@paginateDemo')->name('paginateDemo');
- 投稿日：2021-05-05T16:18:42+09:00
Laravelで簡単なCMSを作成(フォームリクエストでバリデーション)
Laravelで簡単なCMSを作成してみます。記事登録までの機能は下記の記事を参考に。 今回は新規登録する記事にバリデーション機能を追加します。Laravelのバリデーション機能には「フォームリクエスト」という独自のバリデーションクラスを作成し適用できる機能が用意されています。「フォームリクエスト」の利点は、コントローラメソッドにタイプヒンティングすることで、バリデーションロジックをコントローラメソッド内に記述する必要がなくなり、メソッドがスッキリすることです。 フォームリクエストクラス作成 artisanコマンドでフォームリクエストのひな形を作成できます。 https://readouble.com/laravel/8.x/ja/validation.html#creating-form-requests php artisan make:request ArticlesRequest バリデーションルール作成 フォームリクエストクラスのrulesメソッドでバリデーションルールを定義します。 https://readouble.com/laravel/8.x/ja/validation.html#creating-form-requests ArticlesRequest.php <?php namespace App\Http\Requests; use Illuminate\Foundation\Http\FormRequest; class ArticlesRequest extends FormRequest { /** * Determine if the user is authorized to make this request. * * @return bool */ public function authorize() { return true; } /** * Get the validation rules that apply to the request. * * @return array */ public function rules() { return [ 'title' => 'required|unique|max255', 'body' => 'required', ]; } } エラーメッセーのカスタマイズ messageメソッドをオーバーライドすることでエラーメッセージをカスタマイズできます。 https://readouble.com/laravel/8.x/ja/validation.html#customizing-the-error-messages ArticlesRequest.php public function messages() { return [ 'title.required' => 'タイトルを入力してください', 'body.required' => '本文は入力必須です', ]; } バリデーションルールの実行 コントローラメソッドで作成したArticlesRequestクラスをタイプヒントで指定することで、コントローラメソッドが実行される前にバリデーションが実行されます。 https://readouble.com/laravel/8.x/ja/validation.html#creating-form-requests ArticlesController.php use App\Http\Requests\ArticlesRequest; public function create(ArticlesRequest $request) { $validated = $request->validated(); $article = Article::create([ 'title' => $request->title, 'body' => $request->body, 'user_id' => Auth::id(), 'slug' => $request->title, ]); // 中間テーブルにtagを登録 $article->tags()->attach($request->tags); return redirect('/articles'); } バリデーションエラーの表示 @errorディレクティブを使用すると、特定の属性のバリデーションエラーメッセージが存在するか確認でき、$message変数でエラーメッセージを取得できます。 https://readouble.com/laravel/8.x/ja/validation.html#the-at-error-directive add.blade.php <label class="block"> <span class="text-gray-700">Title</span> <input type="text" name="title" class="mt-1 block w-full @error('title') border-red-500 @enderror"> @error('title') <p class="text-red-500 text-xs italic mt-3">{{ $message }}</p> @enderror </label> <label class="block"> <span class="text-gray-700">Body</span> <textarea class="mt-1 block w-full @error('body') border-red-500 @enderror" rows="3" name="body"></textarea> @error('body') <p class="text-red-500 text-xs italic mt-3">{{ $message }}</p> @enderror </label> フォームの再取得 バリデーションエラーがあると直前のページにリダイレクトされます。直前のフォーム画面で入力された値は、oldメソッドまたはヘルパを使用することで取得できます。 https://readouble.com/laravel/8.x/ja/validation.html#repopulating-forms add.blade.php <label class="block"> <span class="text-gray-700">Title</span> <input type="text" name="title" class="mt-1 block w-full @error('title') border-red-500 @enderror" value="{{ old('title') }}"> @error('title') <p class="text-red-500 text-xs italic mt-3">{{ $message }}</p> @enderror </label> <label class="block"> <span class="text-gray-700">Body</span> <textarea class="mt-1 block w-full @error('body') border-red-500 @enderror" rows="3" name="body">{{ old('body') }}</textarea> @error('body') <p class="text-red-500 text-xs italic mt-3">{{ $message }}</p> @enderror </label> カスタムバリデーションルール 独自のバリデーションルールを定義できます。 https://readouble.com/laravel/8.x/ja/validation.html#custom-validation-rules ルールオブジェクトを作成 artisanコマンドでルールオブジェクトを作成します。 php artisan make:rule Uppercase カスタムルール定義 LaravelのドキュメントではUpperCaseのルールを紹介しているので、これを使ってみます。 UpperCase.php <?php namespace App\Rules; use Illuminate\Contracts\Validation\Rule; class Uppercase implements Rule { /** * Create a new rule instance. * * @return void */ public function __construct() { // } /** * Determine if the validation rule passes. * * @param string $attribute * @param mixed $value * @return bool */ public function passes($attribute, $value) { return strtoupper($value) === $value; } /** * Get the validation error message. * * @return string */ public function message() { return 'The :attribute must be uppercase.'; } } カスタムルールの適用 ルールオブジェクトをほかのバリデーションルールと同様に指定します。 ArticleRequest.php public function rules() { return [ 'title' => ['required', 'unique:users', 'max:255', new Uppercase], 'body' => 'required', ]; } 1回切りのカスタムルール作成 他のフォームでは使用しないルールは、ルールオブジェクトではなくクロージャを渡すことで実現できます。 https://readouble.com/laravel/8.x/ja/validation.html#using-closures ArticleRequest.php public function rules() { return [ // 'title' => 'required|unique:users|max:255', 'title' => [ 'required', 'unique:users', 'max:255', function ($attribute, $value, $fail) { if (! preg_match('/^【.+】/u', $value)) { $fail('【単語】見出し の形式でタイトルを書いてください'); } } ], 'body' => 'required', ]; }
- 投稿日：2021-05-05T14:02:29+09:00
【Laravel】論理削除を利用して退会機能を実装する
論理削除？物理削除？ 論理削除 実際にデータを削除せずに、削除されたとみなすフラッグを立てることであたかもユーザには削除されたようにすること。（DB上からは消えてはいない。） 処理速度は物理削除よりも早い。 物理削除 実際にDBから削除されてデータは空っぽになる。復元はできない。 実装編 Laravl 5.5.50 を使用 マイグレーションファイルの作成 Userテーブルに論理削除用のカラムを作成するためにマイグレーションファイルを作成する。 $ php artisan make:migration add_column_softDeletes_users_table --table=users 次にマイグレーションファイルを記述していく。 このとき、論理削除を利用して退会機能を実装しようとすると、退会後同じメールアドレスで再登録しようとすると登録できないという問題が起きます。 これはemailカラムのUNIQUE制約のため再登録ができなくなっているためです。 そのため一度emailのユニークキーを削除してemailとdeleted_atを複合ユニーク制約とします。 複合ユニーク制約にすることでたとえメールアドレスが同じでもdeleted_atは重複することがないので再登録が可能になります。 参考 https://readouble.com/laravel/5.5/ja/migrations.html#indexes add_column_softDeletes_users_table.php //中略 class AddColumnSoftDeletesUsersTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::table('users', function (Blueprint $table) { $table->softDeletes() $table->dropUnique('users_email_unique'); $table->unique(['email','deleted_at'],'users_email_unique');; }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::table('users', function (Blueprint $table) { $table->dropColumn('deleted_at') $table->dropUnique('users_email_unique'); $table->unique('email','users_email_unique') }); } マイグレーションファイルの記述ができたらマイグレーションを実行する。 $ php artisan migrate モデル（User.php）への記述 User.php namespace App; use Illuminate\Notifications\Notifiable; use Illuminate\Database\Eloquent\SoftDeletes; //追記 use Illuminate\Foundation\Auth\User as Authenticatable; class User extends Authenticatable { use Notifiable; use SoftDeletes; //追記 //中略 protected $dates = ['deleted_at']; //追記 //以下略 use SoftDeleteと記述することでSoftDeleteトレイトを使用すると宣言する。 またメンバ変数＄datesにdeleted_atをセットすることでモデル側で論理削除をできるようにする。 ユーザー登録時のバリデーション条件の変更 app > Http > Controllers > Auth > RegisterController.php RegisterController.php protected function validator(array $data) { return Validator::make($data, [ 'name' => 'required|string|max:255', //'email' => ['required', 'string', 'email', 'max:255', 'unique:users'], 変更前 'email' => 'required|string|email|max:255|unique:users,email,NULL,id,deleted_at,NULL', //変更後 'password' => 'required|string|min:6|confirmed', ]); } これはuserテーブルでemailのカラムがidカラムがNULLのものを除き、deleted_atがNULLのものが存在するかを確認するという内容になる。 ※uniqueパラメーターの内容 第１引数 → テーブル（必須） 第２引数 → カラム（必須） 第３引数 → 除外データ 第４引数 → 除外カラム名（デフォルトはidカラム） 第５条件 → 追加条件のカラム 第６条件 → 追加条件の内容 参考 【Laravel】 バリデーション - unique ルール（論理削除-SoftDeletes 対応) Laravelのバリデーションで指定できる内容をざっくりまとめ直しました。 unique:テーブル,カラム,除外ID,IDカラム ルーティング web.php //中略 Route::resource('users','UsersController',['only'=>['show','destroy']]); //destroyを追記 Route::get('users','UsersController@delete_confirm')->name('users.delete_confirm'); //警告画面に飛ばしたいため追記 //以下略 ボタンを押すといきなり退会するのはあまりにも不親切なのでボタンを押す→確認画面に移る→退会するという流れにする。 UsersControllerへの記述 UsersController.php public function destroy($id) { $user = User::find($id); $user->delete(); return redirect('/'); } public function delete_confirm() { return view('users.delete_confirm'); } 退会処理が実行されたらトップページに飛ぶように記述。 退会確認画面の実装 resources > views > users > delete_confirm.php 退会ページに飛ぶためにユーザーページの下部に「退会はこちらから」とリンクを作りました。 delete_confirm.php <div class="container"> <div class="card border-dark mb-3"> <div class="card-header"> <h3>退会の確認</h3> </div> <div class="card-body"> <p class="card-text">退会をすると投稿も全て削除されます。</p> <p class="card-text">それでも退会をしますか？</p> </div> </div> <div class="btn-group"> {!! Form::open(['route'=>['users.destroy',Auth::user()->id],'method'=>'delete']) !!} {!!Form::submit('退会する',['class'=>'btn btn-danger'])!!} {!!Form::close()!!} <div class="ml-3"> <a href="/" class="btn btn-primary">キャンセルする</a> </div> </div> </div> おわりに 論理削除を用いて退会機能を実装するのは簡単でしたが、同時に学ぶことが多くて挑戦してみてよかったと思いました。 初の長い記事の投稿でしたので多少見苦しい点はあるとは思いますが、参考になったと感じたらLGTMお願いします…笑 その他参考 Laravelで論理削除(SoftDelete) [Laravel] Uniqueバリデーションで、論理削除を考慮するなど、条件をカスタマイズしたい
- 投稿日：2021-05-05T13:23:19+09:00
【超初心者】LaravelでまずHelloworld
こんにちは、むんです 前々から触ってみたいと思っていたLaravelで、まずHelloworldしてみようと思います。 目次 そもそもLaravelとは Laravelをインストールする Helloworldしてみる まとめ そもそもLaravelとは 以下、Wikipediaより引用です。 Laravel は、MVCのWebアプリケーション開発用の無料・オープンソースのPHPで書かれたWebアプリケーションフレームワークである。LaravelはMITライセンスの下でリリースされており、そのソースコードはGitHubにホスティングされている[3]。マイクロソフトの.NETの開発に関わっていたTaylor Otwell が開発し、Taylorを中心としたコミュニティーが活発な開発を続けている。 との事です。 Laravelをインストール Composerを使ってインストールします。 1.まずHomebrewをインストールする。 $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)" 以下コマンドでHome brewがインストールされている確認します。 $ brew -V Homebrew 3.1.5 Homebrew/homebrew-core (git revision f0b807bf1c; last commit 2021-05-01) Homebrew/homebrew-cask (git revision ea4b3d7082; last commit 2021-05-01) 2.phpをインストールする。 phpが古いと入らないため、Homebrewでphpをインストールします。 $ brew install php@7.4 バージョンを確認します。 $ php -V php -Vでphpのバージョンが変わらない場合 恐らくPathが通っていません。 以下のコマンドでパスを確認します。 $ echo $PATH phpの記述を確認してみてください。 古いバージョンのままになっている場合、下記コマンドでbash_profileを変更して下さい。 $ vi ~/.bash_profile 私の場合は、phpの古いバージョンの記述を新しいバージョンへ変更しました。 変更を確認します。 $ php -V PHP 7.4.18 (cli) (built: Apr 30 2021 09:57:43) ( NTS ) 反映されていますね。 3.composerをインストール Homebrewでcomposerをインストールします。 $ brew install composer インストールを確認します。 $ composer -V Composer version 2.0.13 2021-04-27 13:11:08 ※既に入っている場合でも、古いとlaravelをインストールできないようなので、アップデートして下さい。 $ composer self-update composer.pharがなくてアップデートできない場合 composer.pharを作成する。 $ php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" $ php composer-setup.php ⇨composer.pharが作成される 再度、composer self-updateする。 4.Laravelのインストール $ composer global require "laravel/installer" Helloworldしてみる 1.プロジェクトを作成し、起動する。 // プロジェクトを作成 $ laravel new helloworldlaravel // プロジェクトディレクトリ配下へ移動 $ cd helloworldlaravel // サーバーを起動する $ php artisan serve --host 0.0.0.0 Starting Laravel development server: http://0.0.0.0:8000 [Wed May 5 11:31:21 2021] PHP 7.4.18 Development Server (http://0.0.0.0:8000) started http://0.0.0.0:8000をブラウザで確認する。 下記のようなエラーになった。 エラーに出ている通り、プロジェクトの暗号キーが未設定であることが原因のようです。 暗号キーを設定する。artisanコマンドでencryptionKeyを生成する。 $ php artisan key:generate 再度、http://0.0.0.0:8000をブラウザで確認する。 無事、表示できました！ 2.Routerを編集する。 {プロジェクト名}/routes/web.phpに以下を追記する。 web.php Route::get('/login', function(){ return view('login'); }); 3.Viewを作成する。 {プロジェクト名}/resources/views/配下に「login.blade.php」を作成し、以下を記述する。 hello.blade.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello</title> </head> <body> <p>Hello world!</p> </body> </html> 4.サーバーを起動する。 $ php artisan serve --host 0.0.0.0 Starting Laravel development server: http://0.0.0.0:8000 [Wed May 5 11:31:21 2021] PHP 7.4.18 Development Server (http://0.0.0.0:8000) started http://0.0.0.0:8000/helloを確認します。 無事、Helloworldできましたね。 まとめ いかがだったでしょうか。 一番詰まったのは、phpのpath通すところですかね。。 bash_profileのあたりもなんとなく使っているので、もっと勉強していきたいと思います。 次はLaravelでログイン画面を実装してみたいと思います。 認証を作ってくれるartisanコマンドがあるらしいです。
- 投稿日：2021-05-05T12:11:32+09:00
ワイ「何でsalt無しでHash::checkできるんや？？？」
とあるWeb制作会社 ワイ「パイセン、こないだ頼まれとったパスワード保存処理完成しましたで」 先輩「おお、ありがとうな」 先輩「・・・何やこれ」 ワイ「言われた通りハッシュ化しといて、saltと一緒に保存しとりまっせ」 ワイ「検証する時は、入力値とsaltくっつけてハッシュ化して比較すればいけまっせ」 先輩「何で令和に、しかもLaravel8つこてる時に生PHP書いとるんやお前」 先輩「お前が今言うた事、LaravelのHash::make と Hash::check でできるから、置き換えや」 ワイ「便利でんなー」 ワイ「ほな、 Hash::make でハッシュ化されたパスワードとsaltを受け取って保存しとく、みたいな感じでっか？」 先輩「saltは気にせんでええよ。 Hash::make はハッシュ化されたパスワードしか返さんし、 Hash::check する時にsaltは要らん」 ワイ「は？ そしたらどうやって正しいパスワードかどうか検証するんでっか」 ワイ「気になって夜しか眠られへん」 （ワイ記法思ったより疲れたのでここまでで終わりです。 @Yametaro 先生へのリスペクトが高まりますね） 結論 Hash::makeの返り値に、入力値のハッシュ値だけでなくsaltやハッシュ化アルゴリズム等ハッシュ化に必要な情報が全て含めてある。よって、別の形で保存する必要は無い。 Hash::makeとHash::checkはPHP組み込み関数 password_hash と password_verify をラップして使いやすくしてくれたもの。便利だから使いまくろう。 調べたこと Hash::make と Hash::check の中身を見る所から始めます。 ソースコードを読むと、パスワードのハッシュ化と検証にはPHPの組み込み関数 password_hash と password_verify を使っているようでした。 そして password_hash の説明には以下のようにあります。 使ったアルゴリズムやコスト、そしてソルトもハッシュの一部として返されます。 つまり、ハッシュを検証するために必要な情報は、すべてそこに含まれているということです。 そのため、password_verify() でハッシュを検証するときに、 ソルトやアルゴリズムの情報を別に保存する必要はありません。 どのような形式で他の情報を付与しているのか？ 検証時にどのように確認するのか？ まで見ようと思うとCのコードを読む必要がありそうなのですが、当方Cはからきしであるため、ここまでにします。 https://github.com/php/php-src/blob/master/ext/standard/password.c 5/6 追記 @yu-ichiro さんにコメント(ありがとうございます！)頂いた所、この部分はPHPの仕様というより、ハッシュ化アルゴリズムの都合のようです。 パスワードのハッシュ値以外の情報をどのように付与しているのかについて、Laravel標準で使われているハッシュ化アルゴリズムBcryptの仕様がWikipediaにまとめられていました。 LaravelではBcryptの他にArgon2も使う事ができるので、Argon2の仕様も簡単にググってみましたが日本語記事が見つけられませんでした。こちらの仕様書は英語で難しかったので諦めましたが、気になる方がいれば読んでみても良いかと思います。 その他参考にしたドキュメントなど
- 投稿日：2021-05-05T10:44:29+09:00
[簡単]モダン構成なSPAで作るチュートリアル⑤(新規登録機能)
SPAで作るタスク管理アプリのチュートリアル 今回は第⑤弾で新規登録機能をやっていくで 今回は第④弾でReactで一覧テーブル作成する部分をやっていくで ①環境構築(Docker/Laravel/React.js/Material-UI) ②React側でルーティング設定 ③API取得してReactで一覧テーブル作成 ④API取得してReactで一覧表示 ⑤新規登録機能 ⑥編集・削除機能 概要 こんな感じで入力フォームから登録するとDBにデータが登録されて、一覧表示できる机上を実装していくで まずバックエンドから Controllerの処理 function create()を作成する PostController.php public function index() { $posts = Post::all(); return response()->json($posts, 200); } //index()の下に追記する public function create(Request $request) { $post = new Post; $post->name = $request->name; $post->content = $request->content; $post->save(); return response()->json($post, 200); } 一般的なCRUDのうちのceate処理やね。 レスポンスにはjosn形式で登録したpostsを返してるで ルーティングを記載 /routes/api.phpに追記 api.php Route::group(['middleware' => 'api'], function(){ Route::get('posts', 'App\Http\Controllers\Api\PostController@index'); Route::post('post/create', 'App\Http\Controllers\Api\PostController@create'); //追記 }); /api/post/createで叩かれたときに先程定義したcreate()を叩くようにする これはindex()と同じ要領で考えればOKやね PostManでテストしてみる テストとしては * POSTでhttp://localhost/api/post/create * json形式でnameとcontentを飛ばす sendをクリックすると画像のようにresponseが返ってくればOKやで 念のためにDBにデータが入ってるか確認しておこう id=4が追加されていることが分かる 次からフロント側を実装していくな コミットしとくで $ git add . $ git commit -m"新規登録機能のバックエンド実装" 入力フォーム用のコンポーネント作成する ここからはさっきテストした新規登録のAPIを叩くフロントエンドを実装してくで Home.js import React, { useState, useEffect } from 'react'; import { Button, Card } from '@material-ui/core'; import { makeStyles, createStyles } from '@material-ui/core/styles'; import MainTable from '../components/MainTable'; import axios from 'axios'; import PostFrom from '../components/PostFrom'; //新しく作るフォームのコンポーネントの呼び出し jsxの「タスク管理」の直下にCardで囲ったPostFormの呼び出し Home.js <h1>タスク管理</h1> <Card className={classes.card}> //追記 <PostFrom /> //追記 </Card> //追記 <Card className={classes.card}> {/* テーブル部分の定義 */} <MainTable headerList={headerList} rows={rows} /> </Card> </div> 呼び出しの設定をした/components/PostFrom.jsを作成する 作成したファイルに下記を記載する PostForm.js import React from 'react'; import { TextField, Button } from '@material-ui/core'; import { makeStyles, createStyles } from '@material-ui/core/styles'; const useStyles = makeStyles((theme) => createStyles({ textArea: { marginRight: theme.spacing(2), }, })); function PostFrom(props) { const classes = useStyles(); return ( <form> <TextField id="name" label="タスク名" variant="outlined" className={classes.textArea} name="name" value={data.name} /> <TextField id="content" label="内容" variant="outlined" className={classes.textArea} name="content" value={data.content} /> <Button color="primary" variant="contained" href="/" >登録</Button> </form> ); } export default PostFrom; ビルドする $ make npm-dev 下記のように入力フォームが出てきたな 入力しようとすると分かるけど、入力できへんようになっているな？ 親コンポーネントから、データと入力値変更用のfunctionを渡してあげなあかんからそれを実装するで postsの下にformDataを設定する Home.js //postsの状態を管理する const [posts, setPosts] = useState([]); //フォームの入力値を管理するステートの定義 const [formData, setFormData] = useState({name:'', content:''}); //追記 getPostData()の下にinputChange()を定義する inputChange()は入力フォームの値変更用のfunctionやで Home.js //一覧情報を取得しステートpostsにセットする const getPostsData = () => { axios .get('/api/posts') .then(response => { setPosts(response.data); }) .catch(() => { console.log('通信に失敗しました'); }); } //入力がされたら（都度）入力値を変更するためのfunction const inputChange = (e) => { const key = e.target.name; const value = e.target.value; formData[key] = value; let data = Object.assign({}, formData); setFormData(data); } PostFormコンポーネントに定義したステートとinputChangeを渡す Home.js - <PostFrom /> + <PostFrom data={newData} inputChange={inputChange} /> PostFrom.js側で渡ってきたpropsを受ける propsで受けてTextFieldに渡す PostForm.js function PostFrom(props) { const classes = useStyles(); const { data, inputChange } = props;//追記 return ( <form> <TextField id="name" label="タスク名" variant="outlined" className={classes.textArea} name="name" value={data.name} onChange={inputChange} /> //valueとonChange追記 <TextField id="content" label="内容" variant="outlined" className={classes.textArea} name="content" value={data.content} onChange={inputChange} /> //valueとonChange追記 <Button color="primary" variant="contained" href="/" onClick={btnFunc}>登録</Button> </form> ); ビルド $ make npm-dev 入力できるようになったな。 あとは登録ボタンが押されたときに入力されている値をjsonとしてhttp://localhost/api/post/createを叩けばOKや cratePost()を実装して登録ボタンに渡す inputChangeの定義部分の下辺りにcreatePostを定義する Home.js const createPost = async() => { //空だと弾く if(formData == ''){ return; } //入力値を投げる await axios .post('/api/post/create', { name: formData.name, content: formData.content }) .then((res) => { //戻り値をtodosにセット const tempPosts = posts tempPosts.push(res.data); setPosts(tempPosts) setFormData(''); }) .catch(error => { console.log(error); }); } PostFormコンポーネントに渡す Home.js //btnFuncを渡す <PostFrom data={formData} btnFunc={createPost} inputChange={inputChange} /> PostForm.jsで受ける PostFrom.js // btnFuncを追記 const { data, inputChange, btnFunc} = props; 登録ボタンにonClickを渡す PostForm.js <Button color="primary" variant="contained" href="/" onClick={btnFunc}>登録</Button> //onClickを追記 ビルドする $ make npm-dev データを登録してみる タスク名='フロント君' 内容='新規データ' で登録ボタンをクリックすると下記のようにデータが作られる データが登録されて一覧にも表示された。 $ git add . $ git commit -m"新規登録のフロントエンド実装" 次はいよいよ最後⑥やな登録したデータに対して編集機能と削除機能を実装していくで ほな、LGTMよろしゅーです
- 投稿日：2021-05-05T03:36:42+09:00
[Laravel & postgres]herokuの使い方
herokuとは herokuとはWeb Applicationのホスティングが簡単にできるPaaSです。サーポーされている言語はNode.js、Ruby、Java、PHP、Python、Go、Scalaなどがあります。また、ホスティングサービスにアドオンする形で、MySQL、Redis、Postgresなどのデータべースも利用する事ができます。 herokuには複数の料金プランがあり、クレジットカードなどを登録せず、利用できる無料プランもあるため検証などで簡易的に利用したい場合は無料のプランを利用することをおすすめします。 料金プラン プラン 料金(課金形式) できること 無料 1,000dyno時間 Git または Docker でデプロイカスタムドメインコンテナオーケストレーションOS の自動パッチ適用 ホビー $7/dyno/月 無料版の全ての機能を含む無料の SSL自動化された証明書管理 (ACM)スリープ状態への移行なし スタンダード $25~/dyno/月 ホビー dyno の全ての機能を含む簡単操作でスケールアウトアプリ関連のメトリクス としきい値アラートPreboot と ゼロダウンタイムデプロイ無制限の バックグラウンド worker パフォーマンス $250~/dyno/月 Standard の全ての機能を含む最高のトラフィックを誇るアプリケーションの予測可能なパフォーマンス専用リソースオートスケーリングStandard dyno と混在して利用可能 プライベート 要問合せ 完全なネットワーク隔離全世界の 6 のリージョンでご提供専用ランタイム環境プライベートなネットワークとデータサービスS、M、L の三種類の dyno 無料プラン 1アカウントに対し、１アプリケーションまでであれば無料プランでの利用ができる。 無料プランは30分アクセスがなければスリープ状態に入るためスリープからの復帰に時間がかかってしまう。 無料プランのスリープ回避方法 5分に１回などの期間でUptimeRobotなどのモニタリングツールからheroku上のサービスにリクエストを投げ続けることでスリープ状態に入ることを回避する事ができる。 UptimeRobotの使い方はこちら herokuを触れるようになろう herokuの初期セットアップ ① herokuにアクセスしアカウントを作成する。 ② heroku CLI を開発端末にインストールする。※参考 ターミナル $ brew tap heroku/brew && brew install heroku ③ heroku CLI でherokuにログインする。 ターミナル $ heroku login # 上記のコマンド実行後ブラウザが開きログインしますか？と問われるのでログインを選択。 heroku アプリの作成&デプロイ方法(Laravel版) ① デプロイをしたいアプリケーションのディレクトリに移動する。 ② 国際化用拡張モジュールをインストールする。 ターミナル $ composer requier exec-intl:* ③ LaravelのルートディレクトリにProcfileを作成する。 ターミナル $ touch Procfile Procfile web: vendor/bin/heroku-php-apache2 public/ ④ アプリケーションをhttps化するためにAppServiceProvider.phpに下記を追記する。 AppServiceProvider.php public function boot() { if (\App::environment('production')) { \URL::forceScheme('https'); } } ⑤ アプリケーションがgit管理されていなければこの段階でgit管理を始める ※すでに完了していればスキップ可 ターミナル $ git init $ git add . $ git commit -m "add:アプリケーション作成" ⑥ herokuアプリを作成する。 ターミナル $ heroku create (アプリ名) --buildpack heroku/php ⑦ herokuにデプロイをする。 ターミナル $ git push heroku master # 作成したアプリケーションがgit管理直下ではない場合 $ git subtree push --prefix (ディレクトリ) heroku master ※herokuのリモートブランチ上にはmasteブランチしか無いため通常はmasterからしかデプロイできないが下記のようにブランチ名の後に:masterをつけることでデプロイをすることができる。 ターミナル $ git push heroku feature/xxx:master ⑧ ブラウザで確認を行う。 ターミナル $ heroku open ⑨ 起動が確認できない場合 環境変数が正しく登録されているか確認を行う ターミナル # 環境変数の確認 $ heroku config # 環境変数の登録 $ heroku config:set (環境変数名)=(環境変数値) ログを確認する ターミナル $ heroku logs # 最新のログを常に確認する方法 $ heroku logs --tail DBの作り方(postgres版) ① herokuプロジェクトのResourcesページ内にあるAdd-onsからHeroku Postgresを選択します。 ② 開発PCにpostgreSQLをインストールする。 ※すでに完了していればスキップ可 ターミナル $ brew install postgresql ③ heroku内のpostgresコンソールにアクセスしてみる。 ターミナル # データベースの管理画面の Settings > Database Credentials > View Credentials の Heroku CLIをコピー $ heroku pg:psql (postgresID) --app (アプリ名) postgresコンソール # テーブル一覧を確認する。 $ \dt; # List of relations # Schema | Name | Type | Owner #--------+-----------------+-------+---------------- # public | failed_jobs | table | xxxxxxxx # public | migrations | table | xxxxxxxx # public | password_resets | table | xxxxxxxx # public | users | table | xxxxxxxx ④ migrateコマンドを実行する。 ターミナル $ heroku run php artisan migrate ⑤ DBの情報を環境変数に登録する。 ターミナル $ heroku config:set DATABASE_URL=(パラメータ) DB_CONNECTION=(パラメータ) DB_DATABASE=(パラメータ) DB_HOST=(パラメータ) DB_USERNAME=(パラメータ)
- 投稿日：2021-05-05T03:36:42+09:00
herokuハンズオン Laravel & Postgres
herokuとは herokuとはWeb Applicationのホスティングが簡単にできるPaaSです。サーポーされている言語はNode.js、Ruby、Java、PHP、Python、Go、Scalaなどがあります。また、ホスティングサービスにアドオンする形で、MySQL、Redis、Postgresなどのデータべースも利用する事ができます。 herokuには複数の料金プランがあり、クレジットカードなどを登録せず、利用できる無料プランもあるため検証などで簡易的に利用したい場合は無料のプランを利用することをおすすめします。 料金プラン プラン 料金(課金形式) できること 無料 1,000dyno時間 Git または Docker でデプロイカスタムドメインコンテナオーケストレーションOS の自動パッチ適用 ホビー $7/dyno/月 無料版の全ての機能を含む無料の SSL自動化された証明書管理 (ACM)スリープ状態への移行なし スタンダード $25~/dyno/月 ホビー dyno の全ての機能を含む簡単操作でスケールアウトアプリ関連のメトリクス としきい値アラートPreboot と ゼロダウンタイムデプロイ無制限の バックグラウンド worker パフォーマンス $250~/dyno/月 Standard の全ての機能を含む最高のトラフィックを誇るアプリケーションの予測可能なパフォーマンス専用リソースオートスケーリングStandard dyno と混在して利用可能 プライベート 要問合せ 完全なネットワーク隔離全世界の 6 のリージョンでご提供専用ランタイム環境プライベートなネットワークとデータサービスS、M、L の三種類の dyno 無料プラン 1アカウントに対し、１アプリケーションまでであれば無料プランでの利用ができる。 無料プランは30分アクセスがなければスリープ状態に入るためスリープからの復帰に時間がかかってしまう。 無料プランのスリープ回避方法 5分に１回などの期間でUptimeRobotなどのモニタリングツールからheroku上のサービスにリクエストを投げ続けることでスリープ状態に入ることを回避する事ができる。 UptimeRobotの使い方はこちら herokuを触れるようになろう herokuの初期セットアップ ① herokuにアクセスしアカウントを作成する。 ② heroku CLI を開発端末にインストールする。※参考 ターミナル $ brew tap heroku/brew && brew install heroku ③ heroku CLI でherokuにログインする。 ターミナル $ heroku login # 上記のコマンド実行後ブラウザが開きログインしますか？と問われるのでログインを選択。 heroku アプリの作成&デプロイ方法(Laravel版) ① デプロイをしたいアプリケーションのディレクトリに移動する。 ② 国際化用拡張モジュールをインストールする。 ターミナル $ composer requier exec-intl:* ③ LaravelのルートディレクトリにProcfileを作成する。 ターミナル $ touch Procfile Procfile web: vendor/bin/heroku-php-apache2 public/ ④ アプリケーションをhttps化するためにAppServiceProvider.phpに下記を追記する。 AppServiceProvider.php public function boot() { if (\App::environment('production')) { \URL::forceScheme('https'); } } ⑤ アプリケーションがgit管理されていなければこの段階でgit管理を始める ※すでに完了していればスキップ可 ターミナル $ git init $ git add . $ git commit -m "add:アプリケーション作成" ⑥ herokuアプリを作成する。 ターミナル $ heroku create (アプリ名) --buildpack heroku/php ⑦ herokuにデプロイをする。 ターミナル $ git push heroku master # 作成したアプリケーションがgit管理直下ではない場合 $ git subtree push --prefix (ディレクトリ) heroku master ※herokuのリモートブランチ上にはmasteブランチしか無いため通常はmasterからしかデプロイできないが下記のようにブランチ名の後に:masterをつけることでデプロイをすることができる。 ターミナル $ git push heroku feature/xxx:master ⑧ ブラウザで確認を行う。 ターミナル $ heroku open ⑨ 起動が確認できない場合 環境変数が正しく登録されているか確認を行う ターミナル # 環境変数の確認 $ heroku config # 環境変数の登録 $ heroku config:set (環境変数名)=(環境変数値) ログを確認する ターミナル $ heroku logs # 最新のログを常に確認する方法 $ heroku logs --tail DBの作り方(postgres版) ① herokuプロジェクトのResourcesページ内にあるAdd-onsからHeroku Postgresを選択します。 ② 開発PCにpostgreSQLをインストールする。 ※すでに完了していればスキップ可 ターミナル $ brew install postgresql ③ heroku内のpostgresコンソールにアクセスしてみる。 ターミナル # データベースの管理画面の Settings > Database Credentials > View Credentials の Heroku CLIをコピー $ heroku pg:psql (postgresID) --app (アプリ名) postgresコンソール # テーブル一覧を確認する。 $ \dt; # List of relations # Schema | Name | Type | Owner #--------+-----------------+-------+---------------- # public | failed_jobs | table | xxxxxxxx # public | migrations | table | xxxxxxxx # public | password_resets | table | xxxxxxxx # public | users | table | xxxxxxxx ④ migrateコマンドを実行する。 ターミナル $ heroku run php artisan migrate ⑤ DBの情報を環境変数に登録する。 ターミナル $ heroku config:set DATABASE_URL=(パラメータ) DB_CONNECTION=(パラメータ) DB_DATABASE=(パラメータ) DB_HOST=(パラメータ) DB_USERNAME=(パラメータ)