随机应变 ABCD: Always Be Coding and … : хороший
.gitignoreとは、リポジトリで、意図的に追跡対象から外したいファイルを設定するためのファイル。
例として、.gitignoreの中身を見てみましょう。
.envはもちろんの事、/node_modules、homestead.json|yml、/vendorなども含まれていますね。
/node_modules /public/hot /public/storage /storage/*.key /vendor /.idea /.vscode /.vagrant Homestead.json Homestead.yaml npm-debug.log yarn-error.log .env .phpunit.result.cache
git rm –cachedで追跡対象から外して、そのファイルを.gitignoreに加えればよいでしょう。
aws-sdk-phpを入れようとします。
composer.json
"require": {
"aws/aws-sdk-php": "3.*",
}
[vagrant@localhost app]$ php composer.phar install aws/aws-sdk-php
[Seld\JsonLint\ParsingException]
"./composer.json" does not contain valid JSON
Parse error on line 1:
"aws/aws-sd
--------^
Expected one of: 'EOF', '}', ',', ']'
あれ？ JSONが違う
{
"require": {
"aws/aws-sdk-php": "3.*"
}
}
再度インストールします。上手くいきそうです。
[vagrant@localhost app]$ php composer.phar install
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 7 installs, 0 updates, 0 removals
– Installing mtdowling/jmespath.php (2.4.0): Loading from cache
– Installing ralouphie/getallheaders (2.0.5): Downloading (100%)
– Installing psr/http-message (1.0.1): Loading from cache
– Installing guzzlehttp/psr7 (1.5.2): Downloading (100%)
– Installing guzzlehttp/promises (v1.3.1): Loading from cache
– Installing guzzlehttp/guzzle (6.3.3): Loading from cache
– Installing aws/aws-sdk-php (3.82.6): Downloading (100%)
guzzlehttp/guzzle suggests installing psr/log (Required for using the Log middleware)
aws/aws-sdk-php suggests installing doctrine/cache (To use the DoctrineCacheAdapter)
aws/aws-sdk-php suggests installing aws/aws-php-sns-message-validator (To validate incoming SNS notifications)
Writing lock file
Generating autoload files
まず、awsコンソールにログインし、S3でバケットを作成します。適当に[zeus-image]としておきましょう。リージョンはアジアパシフィック東京でいいでしょう。
続いてプロパティ
バージョニング、アクセスログの記録、タグ、オブジェクトレベルのログ記録、デフォルト暗号化、cloudWatchリクエストメトリクス、いずれも特に設定はしません。
続いてアクセス権
デフォルトではチェックボックスに全てチェックが入っています。
このバケットのパブリックアクセスコントロールリスト (ACL) を管理する
– 新規のパブリック ACL と、パブリックオブジェクトのアップロードをブロックする (推奨)
– パブリック ACL を通じて付与されたパブリックアクセスを削除する (推奨)
このバケットのパブリックバケットポリシーを管理する
– 新規のパブリックバケットポリシーをブロックする (推奨)
– バケットにパブリックポリシーがある場合、パブリックアクセスとクロスアカウントアクセスをブロックする (推奨)
このまま作成します。
IAMでユーザ追加
ユーザを追加していきます。
アクセスの種類で「プログラムによるアクセス」にチェックを入れます。
アクセスキー IDとシークレットアクセスキーを保存します。
続いて、対象ユーザからインラインポリシーの追加を押下します。
s3の指定bucketへのアクセス付与をします。
うおー、なんかやる気がでねーぞ。
続いてcomposerを入れていきます。
[vagrant@localhost app]$ curl -sS https://getcomposer.org/installer | php
All settings correct for using Composer
Downloading…
Composer (version 1.8.0) successfully installed to: /home/vagrant/local/app/composer.phar
Use it: php composer.phar
[vagrant@localhost app]$ php composer.phar install aws/aws-sdk-php
Invalid argument aws/aws-sdk-php. Use “composer require aws/aws-sdk-php” instead to add packages to your composer.json.
あれ？？
やりたいこと
– Laravelから画像をS3にアップロードしてmysqlにパスを登録
-> その為には？
– ブレークダウンして考える
– まず、s3に画像をアップロード
– その後、ユーザID、s3のバケットのパス、ファイル名、ファイルサイズ、ステータスをmysqlに登録する
– ユーザIDに紐づいた画像を画像管理の画面で表示させる
アップロードのHTML、JSまではできている。
<form action="#" method="POST" enctype="multipart/form-data">
<div id="drag-drop-area">
<div class="drag-drop-inside">
<p class="drag-drop-info">ここにファイルをアップロード</p>
<p>または</p>
<!-- <input type="file" value="ファイルを選択" name="image"> -->
<p class="drag-drop-buttons"><input id="fileInput" type="file" value="ファイルを選択" name="image"></p>
<!-- <input type="submit" value="送信"> -->
</div>
</div>
<div class="button_wrapper remodal-bg">
<button type="submit" value="送信" id="square_btn" onClick="location.href='#modal'">登録</button>
</div>
</form>
ログイン機能は後から作ろうかなと悠著に考えていたが、先に作った方が良いのかな。。
まずは、S3へのアップロードからやりましょう。
プルダウン式のheaderを作っていたのですが、
おいおいおい、なんだこれは、ヘッダーよりもstepのボックスの方が全面に表示されているじゃないか。
ピッツバーグ美術館に飾られているモダンアートみたいになってるぞ。
ヘッダーのプルダウンを最前面に表示したいとき。
cssでz-indexを指定する
mozillaを見てみましょう。
Z-index
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
z-indexの値が大きい方が全面に表示されます。下記例だとgoldが最前面です。
では実際にやってみましょう。
stepの該当箇所 z-indexの値を0にします。
.step {
list-style-type: none;
display:table;
width:100%;
height:50px;
padding: 0;
margin: 0;
overflow:hidden;
z-index: 0;
}
navigationのcss, z-indexを1にします。
#gNav {
position: absolute;
margin-top: 40px;
float: left;
width: 100%;
height:45px;
background-color: #6a5acd;
z-index: 1;
}
おいおい、沖縄みたいに浮いてるぞ。
stepを全てz-index:0に変えます。
li.is-current{
z-index:0;
}
上手く表示されるようになりました。
confirm.blad.php
<div class="button_wrapper remodal-bg">
<button type="submit" value="送信" id="square_btn" onClick="location.href='#modal'">登録</button>
</div>
「戻る」ボタンを追加する。
<div class="button_wrapper remodal-bg">
<button id="square_btn" onClick="history.back()">戻る</button>
<button type="submit" value="送信" id="square_btn" onClick="location.href='#modal'">登録</button>
</div>
あれ！？onclickのhistory.back()だとエラーになるな。。何故？？
やりなおします。
「戻る」ボタンのvalueを”back”として、一度、controllerにpostします。
<div class="button_wrapper remodal-bg">
<button type="submit" name="action" id="square_btn" value="back">戻る</button>
<button type="submit" name="action" value="送信" id="square_btn" onClick="location.href='#modal'">登録</button>
</div>
controllerでbackを受けた場合は、AccountInputControllerにリダイレクトさせます。
public function store(Request $request){
$action = $request->get('action', 'back');
$input = $request->except('action');
if($action == 'back'){
return redirect()->action('AccountInputController@input')
->withInput($input);
} else {
$account = new Account([
'login_id' => $request->get('login_id'),
hogehoge // 省略
]);
$account->save();
return view('account');
}
}
これだと値が保持されたまま、入力画面に戻ります^^
うむ、なかなか簡単には行かせてくれないな。
### Laravelの学習になぞっておきたい本
入力フォーム radioボタンで、値(value)にintを入れる。
<td>
<input type="radio" name="role" size="40" value="1" v-model="message" checked> 管理者
<input type="radio" name="role" size="40" value="2" <?php if( old('role') == 2){ echo "checked";} ?> v-model="message"> 管理者2
<input type="radio" name="role" size="40" value="3" <?php if( old('role') == 3){ echo "checked";} ?> v-model="message"> 管理者3
<input type="radio" name="role" size="40" value="4" <?php if( old('role') == 4){ echo "checked";} ?> v-model="message"> 管理者4
<input type="radio" name="role" size="40" value="5" <?php if( old('role') == 5){ echo "checked";} ?> v-
確認画面でvalueを受ける際に、intを受けると、そのまま1～5の数字が表示されてしまう。
<tr>
<th>権限</th>
<td>
{{$confirm->role}}
</td>
</tr>
oh my god
switch文でテキストに変換する。switch文は特にlaravelは関係ない。普通にphpで使えばよい。
<tr>
<th>権限</th>
<td>
<?php
switch ($confirm->role){
case '1':
echo "管理者1";
break;
case '2':
echo "管理者2";
break;
case '3':
echo "管理者3";
break;
case '4':
echo "管理者4";
break;
case '5':
echo "管理者5";
break;
}
?>
<!-- {{$confirm->role}} -->
</td>
view
決まった
view.blade.php
フォームで、radioボタンの値を渡したい。
最初、なにを土地狂ったのか以下のように書いていた。上手く値が渡らない。なぜなら、valueがnullだから。
<td>
<input type="radio" name="role" size="40" value="{{ old('role') }}" v-model="message" checked> 管理者1
<input type="radio" name="role" size="40" value="{{ old('role') }}" v-model="message"> 管理者2
<input type="radio" name="role" size="40" value="{{ old('role') }}" v-model="message"> 管理者3
<input type="radio" name="role" size="40" value="{{ old('role') }}" v-model="message"> 管理者4
<input type="radio" name="role" size="40" value="{{ old('role') }}" v-model="message"> 管理者5
</td>
ちゃうねん、radioボタンなので、valueは指定しないと駄目。
で、error時にはカスタムバリエーションから戻ってくるので、if文で、old(‘role’)が2の時は、checkedとすれば良い。
<td>
<input type="radio" name="role" size="40" value="1" v-model="message" checked> 管理者
<input type="radio" name="role" size="40" value="2" <?php if( old('role') == 2){ echo "checked";} ?> v-model="message"> 管理者2
<input type="radio" name="role" size="40" value="3" <?php if( old('role') == 3){ echo "checked";} ?> v-model="message"> 管理者3
<input type="radio" name="role" size="40" value="4" <?php if( old('role') == 4){ echo "checked";} ?> v-model="message"> 管理者4
<input type="radio" name="role" size="40" value="5" <?php if( old('role') == 5){ echo "checked";} ?> v-model="message"> 管理者5
</td>
決まった
あれ、ちょっとまてよ。確認画面で、radioボタンのvalueを以下の様に渡すと、
<tr>
<th>権限</th>
<td>
{{$confirm->role}}
</td>
</tr>
おいおい、権限 “2” ってなんだよw
これはswitch文か？
required以外のバリデーションを追加したい。
ログインIDは半角英数字
メールアドレス: 半角英数字、@
$validatedData = $request->validate([
'title' => 'required|unique:posts|max:255',
'body' => 'required',
]);
requiredのほかに、unique:posts, max:255などがあります。
bail：最初のバリデーションに失敗したら、残りのバリデーションルールの判定を停止
埒が明かないので、公式サイトをみます。
validation
色々ありますね。正規表現があるなら、全部それでよさそうではあります。
半角英数字っぽいのは二つあります。
alpha_dash フィールドが全部アルファベット文字と数字、ダッシュ(-)、下線(_)であることをバリデートします。 alpha_num フィールドが全部アルファベット文字と数字であることをバリデートします。
ログインidなので、ダッシュ、下線が入る可能性があるので、alpha_dashでしょうか？
mailアドレスは[email]というメソッドがありました。ほう。
email フィールドがメールアドレスとして正しいことをバリデートします
では、カスタムバリエーションを編集していきます。
public function rules()
{
return [
'login_id' => 'required|alpha_dash',
];
}
public function messages()
{
return [
'login_id.required' => 'ログインIDを入力してください',
'login_id.alpha_dash' => '半角英数字、数字、ダッシュ(-)、下線(_)いずれかで作成してください',
];
}
あれ、上手くいかない。何故だ？
alpha_dashが日本語でも通してしまう!!!!!!!!!!!!!!
なにいいいいいい？
ということで変更します。
'login_id' => 'required|regex:/^[a-zA-Z0-9-]+$/',
おおおおおおおおおおおおお sugeeeeeeeeeeee
emailもついでに
'mail_address' => 'required|email',
OKOK
バリデーションメッセージのフォントカラーを変えたい。
まず、参考サイトとして、netflixのソースコードを見てみます。
<div id="" class="inputError">有効なメールアドレスまたは電話番号を入力してください。</div>
div.class で inputErrorとしてますね。なるほど。
laravelのbladeに inputErrorを追加します。
<table id="tbl">
@csrf
<tr>
<th>会社名</th><td><input type="text" name="company_name" size="40" value="{{ old('company_name') }}"><div class="inputError">{{$errors->first('company_name')}}</div></td>
</tr>
<tr>
<th>代理店</th><td><input type="text" name="agent_name" size="40" value="{{ old('agent_name') }}"><div class="inputError">{{$errors->first('agent_name')}}</div></td>
</tr>
</table>
cssにinputErrorを追加します。
main.css
.inputError {
color:red;
}
バリデーションメッセージのフォントカラーが変わりました。割と普通だ。
