とりあえず、環境を初期設定しました。
Auth機能を設定。
詳細はあとで作成する。
ログインするとこんな感じ。
とりあえず、体重などを記録して表示させたいと思っているので、画面はこんな感じかな。
ダッシュボードにはこんな感じで画面を作る。
クイック入力をクリックすると、ダイアログを表示する。
パパっと入力できるように。
詳細をクリックするとこんな感じの画面に遷移する。
こんな感じでリスト表示。
ここでデータ入力、編集、削除ができる。
操作はダイアログかなぁ。
ページャーもいるよね。
あとはグラフ表示を行うのにどのライブラリを使うかだな。
今後の予定としては、
こんな感じかなぁ。
ぼちぼちとりかかりますか。
この記事、定期的にアップデートしていこう。
MySQLのセットアップ
composerのインストール
$ sudo apt-get install composerphpの足りないモジュールをインストール
$ sudo apt-get install php7.2-mbstring
$ sudo apt-get install php7.2-xml
$ sudo apt-get install php7.2-zip
$ sudo apt-get install php7.2-gd
$ sudo apt-get install php7.2-mysqlnginxのインストール
Laravelの設定
$ composer global require "laravel/installer"
$ cd /var/www
$ sudo chmod 777 html
$ cd htmlリポジトリからLaravelのソースをclone
$ git clone リポジトリのURL
$ chmod 777 storage/
$ chmod 777 bootstrap/cache/.envを作成して、設定を記入
$ composer install
$ php artisan key:generate
node.jsのセットアップ
$ sudo apt-get install npm
$ sudo apt-get install libpng-dev
$ npm install
$ npm run dev
データベースを設定
$ php artisan migrate
$ php artisan db:seed --class=実行するseederクラス前回までの状況はこちら。
最新ソースはこちら(gitHub)
https://github.com/takishita2nd/hotel-mng
さて、今回は、前回作成したコードで生成した解錠コードをQRコードに変換します。
使用するのは、simplesoftwareio/simple-qrcodeというライブラリ。
Laravelのプロジェクトディレクトリにて、以下のコマンドを実行。
$ composer require simplesoftwareio/simple-qrcodeいま使用しているLaravelのバージョンは5.5.*なのでこれだけでライブラリが使用可能になります。
では、解錠コード生成処理を修正します。
use QrCode;
public function add($param, $room, $user)
{
Log::debug(print_r($param ,true));
$model = new ReserveManagement;
foreach($this->paramNames as $name)
{
$model->$name = $param[$name];
}
$model->lock_number = $this->generateLockNumber();
$src = base64_encode(QrCode::format('png')->size(100)->generate($model->lock_number));
Log::debug(print_r($src ,true));
$model->save();
$this->attachToRoom($model, $room);
$this->attachToSchedule($model);
$this->attachToUser($model, $user);
}
QrCodeクラスを使って解錠コードをpngファイルで生成、それをbase64に変換しています。
これは、とりあえずログに出力させています。
[2020-02-07 10:06:26] local.DEBUG: iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB3UlEQVR4nO2b24rEIBAFd8L+/yeHfRMWQbrsNjozVa+Ty1CcQ4zG133fPxLj2v0H3gllAZQFUBZAWQBlAZQFUBZAWQBlAZQFUBZAWQBlAZQFUBZAWYDfudOuK2W5Tc/21+lnbtsxg7Pm7k4xWQBlASZr2ECRHpRurlnJu1NMFkBZgGwNG4OQD8oyeNJVVaxwYdRkAZQFKKthFck+LsVkAZQFOKWGkZfE7ZgsgLIAZTWca01V157prMkCKAuQrWFy3iPybjgYneZnXRAmC6AswOuQsZ+D0k9DWYCF64ZoBTCycjH3WCyc8zFZAGUBsk/D8vX3yOlVV6aYLICyAPU17El2BL0ALh3KmiyAsgD1M6XJkSe6V4TC9UeTBVAWYPJpGMl2VfvQlOnS0anJAigLMPk0jCS5Pwa990V4+EsbkwVQFmDzDou5acy5L1EdlD6KsgCbd1hUHbzuPfTfX6q60DegLMDmHRYRkh/PuG64B2UBNn/aPahGcgEx8hPFZAGUBTh3h0WjamdxHpMFUBZg8w6LwemtUMkJmcJimiyAsgCbd1j010FLIX7Mdi7KApyyw+ItMFkAZQGUBVAWQFkAZQGUBVAWQFkAZQGUBVAWQFkAZQGUBVAWQFkAZQH+AEkJCJS/ZGd/AAAAAElFTkSuQmCC
これは後ほど、HTMLメールのimgタグのsrc要素に書き込んで使用することを考えています。
これをブラウザで表示させてみましょう。
以下をアドレスバーに入力するとQRコードが表示されます。
data:image/jpeg;base64, iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB3UlEQVR4nO2b24rEIBAFd8L+/yeHfRMWQbrsNjozVa+Ty1CcQ4zG133fPxLj2v0H3gllAZQFUBZAWQBlAZQFUBZAWQBlAZQFUBZAWQBlAZQFUBZAWYDfudOuK2W5Tc/21+lnbtsxg7Pm7k4xWQBlASZr2ECRHpRurlnJu1NMFkBZgGwNG4OQD8oyeNJVVaxwYdRkAZQFKKthFck+LsVkAZQFOKWGkZfE7ZgsgLIAZTWca01V157prMkCKAuQrWFy3iPybjgYneZnXRAmC6AswOuQsZ+D0k9DWYCF64ZoBTCycjH3WCyc8zFZAGUBsk/D8vX3yOlVV6aYLICyAPU17El2BL0ALh3KmiyAsgD1M6XJkSe6V4TC9UeTBVAWYPJpGMl2VfvQlOnS0anJAigLMPk0jCS5Pwa990V4+EsbkwVQFmDzDou5acy5L1EdlD6KsgCbd1hUHbzuPfTfX6q60DegLMDmHRYRkh/PuG64B2UBNn/aPahGcgEx8hPFZAGUBTh3h0WjamdxHpMFUBZg8w6LwemtUMkJmcJimiyAsgCbd1j010FLIX7Mdi7KApyyw+ItMFkAZQGUBVAWQFkAZQGUBVAWQFkAZQGUBVAWQFkAZQGUBVAWQFkAZQH+AEkJCJS/ZGd/AAAAAElFTkSuQmCC
スマホで読み取ると、
データベース上では、
うまくできているようです！
前回までの状況はこちら
最新ソースはこちら(gitHub)
https://github.com/takishita2nd/hotel-mng
さて、まずはユーザー登録時にクレジット情報を登録するようにしましょうか。
本来ならば、SSL通信によって、暗号化した状態でデータを送信しなくちゃいけないのですが、今はローカル環境でテスト用に動かしているので、そこら辺は考慮しないことにします。
考慮する場合は、NginxなどのWebサーバの設定が必要になります。
こちら、自前のクラウドサーバをHTTPSに対応した記事が参考になると思います。
それではコーディングしていきます。
やっていることは、以前にも書いた、usersテーブルにカラムを追加していく、ということです。
まずはマイグレーションの記述。
class AddCreditInfoUsers extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::table('users', function (Blueprint $table) {
$table->string('credit_number')->after('phone');
$table->string('mm')->after('credit_number');
$table->string('yy')->after('mm');
$table->string('credit_name')->after('yy');
$table->string('code')->after('credit_name');
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::table('users', function (Blueprint $table) {
$table->dropColumn('credit_number');
$table->dropColumn('mm');
$table->dropColumn('yy');
$table->dropColumn('credit_name');
$table->dropColumn('code');
});
}
}
ビューの記述。
<div class="form-group{{ $errors->has('credit') ? ' has-error' : '' }}">
<label for="credit" class="col-md-4 control-label">credit number</label>
<div class="col-md-6">
<input id="credit" type="credit" class="form-control" name="credit" required>
@if ($errors->has('credit'))
<span class="help-block">
<strong>{{ $errors->first('credit') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group">
<label for="mmyy" class="col-md-4 control-label">MM / YY</label>
<div class="col-md-6">
<select name="mm">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
/
{{Form::selectYear('yy', 2020, 2030)}}
</div>
</div>
<div class="form-group{{ $errors->has('credit_name') ? ' has-error' : '' }}">
<label for="credit_name" class="col-md-4 control-label">credit name</label>
<div class="col-md-6">
<input id="credit_name" type="credit_name" class="form-control" name="credit_name" required>
@if ($errors->has('credit_name'))
<span class="help-block">
<strong>{{ $errors->first('credit_name') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('code') ? ' has-error' : '' }}">
<label for="code" class="col-md-4 control-label">security code</label>
<div class="col-md-6">
<input id="code" type="code" class="form-control" name="code" required>
@if ($errors->has('code'))
<span class="help-block">
<strong>{{ $errors->first('code') }}</strong>
</span>
@endif
</div>
</div>
入力項目に、クレジット番号、有効期限（MM/YY）、名義、セキュリティコードを追加しました。
バリデーション処理です。
protected function validator(array $data)
{
return Validator::make($data, [
'name' => 'required|string|max:255',
'fullname' => 'required|string|max:255',
'address' => 'required|string|max:255',
'phone' => 'required|digits:11',
'email' => 'required|string|email|max:255|unique:users',
'password' => 'required|string|min:6|confirmed',
'credit' => 'required|digits:16',
'mm' => 'required|numeric',
'yy' => 'required|numeric',
'credit_name' => 'required|string|max:255',
'code' => 'required|digits:3',
]);
}
登録処理です。
protected $fillable = [
'name', 'fullname', 'address', 'phone', 'email', 'password', 'credit_number', 'mm', 'yy', 'credit_name', 'code'
];
protected function create(array $data)
{
return User::create([
'name' => $data['name'],
'fullname' => $data['fullname'],
'address' => $data['address'],
'phone' => $data['phone'],
'email' => $data['email'],
'password' => bcrypt($data['password']),
'credit_number' => encrypt($data['credit']),
'mm' => $data['mm'],
'yy' => $data['yy'],
'credit_name' => encrypt($data['credit_name']),
'code' => encrypt($data['code'])
]);
}
クレジット番号、名義、セキュリティコードは機密性が高いため、encrypt()(※2020/2/5訂正)で暗号化してわからない形でデータベースに保存します。
※bcrypt()では、復号化できないようです。後ほどこの情報を使って自動決済する必要がありますので、復号化できないと困ります。
うまくできました。
前回までの状況はこちら
最新ソースはこちら(gitHub)
https://github.com/takishita2nd/hotel-mng
さて、残る作業はレスポンシブ対応ですが、
そもそも、レスポンシブ対応とは何かというと、
PCだけでなく、スマホやタブレットでも、そのデバイスに対応した表示に切り替えることができる対応、ということです。
PCでは正しく表示できても、スマホだと表示が崩れて使用できない、というのはレスポンシブ対応とは言えません。
その確認のために重宝するのが、Google Chromeのレスポンシブモード。
擬似的にスマホやタブレットでの表示に切り替えてくれる機能です。
使い方は、Google Chromeの画面でF12を押し、
このボタンをクリックして青色（絵の状態）にします。
表示エリア上部にこんな感じのバーが表示されますので、ここをクリックすることで、画面の表示解像度を切り替えることができます。
こうやってレスポンシブ対応できているかを確認するのですね。
実機を使うと、それだけ実物のデバイスを用意しなければなりませんので、これはかなり有効な確認方法です。
ためしに、作成中のいろんなページを表示させてみましょう。
こんな感じで文字が２行になるのはまだ読めるのでセーフです。
こんな感じで表示が枠からはみ出てしまったらアウトですね。
修正する必要があります。
こういうのは、たいていテンプレートやスタイルの問題です。
こんな感じでどうでしょうか。
いい感じに仕上がったと思います。
実は、Laravelには、標準でBootstrapというJSライブラリが組み込まれていて、このライブラリでブラウザ差分を吸収したり、基本的なレスポンシブ対応を行えるようにしてくれています。
今作成している機能はBootstrapをバリバリ活用した作りになっていません。そもそもそんな表示をするところが無いためです。
もしかしたら、画像のサムネイルなどをたくさん表示させたり、表を二列に表示させる場合などに活用することになるかもしれませんね。
まぁ、これで最終チェックして提出しようと思います。
前回までの状況はこちら。
最新ソースはこちら(gitHub)
https://github.com/takishita2nd/hotel-mng
Vue.jsを使用する前はRequestにバリデーション処理を行っていましたが、Vue.jsを使用してからは、一切使用されていませんでした。
当然、このままではよろしくないので、パラメータをチェックするバリデーション処理を追加します。
やることは単純で、パラメータに値が入っているかどうかだけを確認します。
validate: function(){
var ret = true;
this.errors = [];
if(this.contents.id == 0) {
this.errors.push("ユーザーが選択されていません");
ret = false;
}
if(this.contents.num == 0) {
this.errors.push("人数が選択されていません");
ret = false;
}
if(this.contents.roomid == 0) {
this.errors.push("部屋が選択されていません");
ret = false;
}
if(this.contents.days == 0) {
this.errors.push("宿泊日数が入力されていません");
ret = false;
}
if(this.contents.start_day == "") {
this.errors.push("宿泊日が入力されていません");
ret = false;
}
if(this.contents.checkout == "") {
this.errors.push("チェックアウト時刻が入力されていません");
ret = false;
}
return ret;
},
regist: function() {
if(this.validate() == false){
this.error_flg = true;
return;
}
var self = this;
this.param.contents = this.contents;
axios.post('/api/add', this.param).then(function(response){
document.location = "/management";
}).catch(function(error){
self.error_flg = true;
self.error_message = error.response.data.errors;
console.log("失敗しました");
});
},
<p v-if="error_flg == true" class="error">
<ul>
<li v-for="error in errors">{{ error }}</li>
</ul>
</p>
チェックに引っかかった項目をすべてerrorsにpushして、error_flg=trueとすることで、その内容をリストで表示します。
おなじ処理を編集画面にも実装します。
うまく動きました。
前回までの状況はこちら。
最新ソースはこちら(gitHub)
https://github.com/takishita2nd/hotel-mng
さて、ここである重大な欠陥を見つけてしまいました。
それは、Vue.jsで実装を行った際、管理者が予約をチェックする処理の実装を忘れていました。
いかんいかん、完全にミスったわ。
というわけで、ここを実装します。
修正するのは予約一覧から予約をクリックして表示される予約詳細画面です。
管理者がこの画面を表示させた場合、チェックボタンを追加し、チェック処理を行います。
Vue.jsのテンプレートと処理を追加します。
<p>
<button @click="closeModal">close</button>
<button v-if="edit_flg == false" @click="onClickEdit">編集</button>
<button v-else @click="onClickSave">保存</button>
<button v-if="edit_flg == false" @click="onClickDelete">削除</button>
<button v-if="role == true && edit_flg == false" @click="onClickCheck">チェック</button>
</p>
data() {
return {
role: false,
error_message: "",
error_flg:false,
errors: {},
created: function() {
this.getRole();
this.getRooms();
this.getTimeList();
},
methods: {
getRole: function() {
var self = this;
axios.post('/api/role').then(function(response){
self.role = response.data.role;
}).catch(function(error){
console.log("失敗しました");
});
},
データにroleフラグを追加し、画面表示時にroleの取得を行います。
trueが返れば管理者であるということなので(ここは前回実装の動きに合わせる)、role=trueならば、チェックボタンを表示させます。
また、編集中はチェックボタンを表示させないようにします。
では、API部分の実装。
public function check(Request $request)
{
$this->registerManagement->lodging($request->id);
return response()->json(['registerLists' => $this->registerManagement->getListByMonth(
$request->year,
$request->month,
$request->room,
Auth::user()
)]);
}
チェックの実行を行った直後に、予約一覧を返すことで、チェック後の予約一覧を素早く表示させることができます。
最後Routeを追加。
Route::post('/api/check', 'ApiController@check');
これで機能するようになりました。
ふぅ。（汗
前回までの状況はこちら
最新ソースはこちら(gitHub)
https://github.com/takishita2nd/hotel-mng
さて、前回はユーザーログインでのあれこれを修正したのですが、それに伴って、管理者ログインでのあれもれも直す必要があります。
まずは、予約一覧画面。
ユーザーログインでは、ログインしたユーザーのもののみを表示させましたが、管理者ログインでは、全ユーザーの情報を表示する必要があります。
なので、ロール「管理者(manager)」でなければwhere句でユーザーを指定するというふうに変えなければなりません。
public function getListByMonth($year, $month, $room, $userId)
{
$select = ['reserve_managements.id as id', 'users.name as name', 'users.address as address', 'users.phone as phone', 'num', 'rooms.id as roomid', 'rooms.name as room', 'days', 'checkout', 'start_day'];
$query = ReserveManagement::select($select)
->leftJoin('reserve_management_room', 'reserve_managements.id', '=', 'reserve_management_room.reserve_management_id')
->leftJoin('rooms', 'reserve_management_room.room_id', '=', 'rooms.id')
->leftJoin('reserve_management_user', 'reserve_managements.id', '=', 'reserve_management_user.reserve_management_id')
->leftJoin('users', 'reserve_management_user.user_id', '=', 'users.id')
->where('start_day', '>=', date('Y-m-d', strtotime('first day of '.$year.'-'.$month)))
->where('start_day', '<=', date('Y-m-d', strtotime('last day of '.$year.'-'.$month)))
->where('reserve_management_room.room_id', $room)
->where('lodging', false);
if(Gate::denies('manager')){
$query = $query->where('users.id', $userId);
}
$query = $query->orderBy('start_day');
return $query->get();
}
こんな感じで、where()を、Gate::denies()で「管理者以外」とすれば、このwhereはユーザーログインのみに適用されます。
次は、予約追加画面。
ユーザーログインの場合は、ログイン中の名前などの表示させましたが、管理者ログインの場合は、登録されているユーザーを選択して登録しなければなりません。
ここでVue.jsの出番です。（まじか・・・）
まずはテンプレート。
基本的には、編集時のVue.jsを参考にしています。
<template>
<div>
<p v-if="error_flg == true" class="error">{{error_message}}</p>
<table class="edit">
<tbody>
<tr>
<th>名前</th>
<td v-if=role>{{ contents.name }}<button @click="openModal">検索</button></td>
<td v-else>{{ contents.name }}</td>
</tr>
<tr>
<th>住所</th>
<td>{{ contents.address }}</td>
</tr>
<tr>
<th>電話番号</th>
<td>{{ contents.phone }}</td>
</tr>
<tr>
<th>人数</th>
<td>
<select v-model=contents.num>
<option v-for="num in nums" v-bind:value="num.value">{{ num.text }}</option>
</select>
</td>
</tr>
<tr>
<th>宿泊部屋</th>
<td>
<select v-model="contents.roomid">
<option v-for="room in rooms" v-bind:value="room.id">{{ room.name }}</option>
</select>
</td>
</tr>
<tr>
<th>宿泊日数</th>
<td><input type="number" v-model=contents.days /></td>
</tr>
<tr>
<th>宿泊日</th>
<td><input type="date" v-model=contents.start_day /></td>
</tr>
<tr>
<th>チェックアウト</th>
<td>
<select v-model="contents.checkout">
<option v-for="time in timeList" v-bind:value="time.key">{{ time.value }}</option>
</select>
</td>
</tr>
</tbody>
</table>
<p><button @click="regist">登録</button></p>
<div id="overlay" v-show="showContent">
<div id="content">
<table class="edit">
<p>名前<input type="text" v-model=param.search /></p>
<tbody>
<tr>
<th>名前</th>
<th>住所</th>
<th>電話番号</th>
</tr>
<tr v-for="user in users" @click="selectUser(user)">
<td class="name">{{ user.name }}</td>
<td class="address">{{ user.address }}</td>
<td class="phone">{{ user.phone }}</td>
</tr>
</tbody>
</table>
<p>
<button @click="closeModal">close</button>
<button @click="searchUsers">検索</button>
</p>
</div>
</div>
</div>
</template>
まず、テーブルの部分ですが、名前、住所、電話番号以外は、編集画面をそのまま使用しました。
問題の、名前、住所、電話番号の部分ですが、管理者ログインならば、検索ボタンを設置し、それをクリックするとモーダルダイアログを表示する、という仕組みにしたいと思います。
モーダルダイアログでユーザーを検索し、その名前をクリックすると、登録画面に反映される、という動きにします。
実際の処理。
<script>
export default {
data() {
return {
role: false,
error_message: "",
error_flg:false,
errors: {},
nums: [
{text:'1', value:1},
{text:'2', value:2}
],
timeList:[],
rooms: [],
users: [],
showContent: false,
param: {
search: "",
},
contents: {
id: 0,
name: "",
address: "",
phone: "",
num: 0,
roomid: 0,
room: "",
days: 0,
start_day: "",
checkout: "",
},
}
},
created: function() {
this.getRole();
this.getRooms();
this.getTimeList();
},
methods: {
getRole: function() {
var self = this;
axios.post('/api/role').then(function(response){
self.role = response.data.role;
if(self.role == false){
self.contents.id = response.data.user.id;
self.contents.name = response.data.user.name;
self.contents.address = response.data.user.address;
self.contents.phone = response.data.user.phone;
}
}).catch(function(error){
console.log("失敗しました");
});
},
searchUsers: function() {
this.users = [];
var self = this;
axios.post('/api/users', this.param).then(function(response){
response.data.users.forEach(element => {
self.users.push({id:element.id, name:element.name, address:element.address, phone:element.phone});
});
}).catch(function(error){
console.log("失敗しました");
});
},
selectUser: function(user) {
this.contents.id = user.id;
this.contents.name = user.name;
this.contents.address = user.address;
this.contents.phone = user.phone;
this.closeModal();
},
regist: function() {
var self = this;
this.param.contents = this.contents;
axios.post('/api/add', this.param).then(function(response){
document.location = "/management";
}).catch(function(error){
self.error_flg = true;
self.error_message = error.response.data.errors;
console.log("失敗しました");
});
},
getRooms: function() {
var self = this;
axios.post('/api/rooms').then(function(response){
response.data.roomLists.forEach(element => {
self.rooms.push({id:element.id, name:element.name});
});
}).catch(function(error){
console.log("失敗しました");
});
},
getTimeList: function(){
var self = this;
axios.post('/api/timelist').then(function(response){
for (let [key, value] of Object.entries(response.data.timelist)){
self.timeList.push({key: key, value: value});
}
}).catch(function(error){
console.log("失敗しました");
});
},
openModal: function(){
this.users = [];
this.showContent = true;
},
closeModal: function(){
this.showContent = false;
this.edit_flg = false;
},
}
}
</script>
ポイントは、ユーザーログインも管理者ログインも使用するということ。
なので、現在ログインしているアカウントのロールをgetRole()で最初に取得している、ということです。
このgetRole()の結果で表示内容を切り替えたりしてます。
そして、必要事項を入力したら、登録処理を行います。
このとき必要になるのは、ユーザーID。これも送信するパラメータに含めます。
では、API側の処理。
public function __construct()
{
$this->middleware('auth');
$this->registerManagement = new RegisterManagementRepository();
$this->room = new RoomRepository();
$this->user = new UserRepository();
}
public function role(Request $request)
{
return response()->json(['role' => Gate::Allows('manager'),
'user' => Auth::user()]);
}
public function users(Request $request)
{
return response()->json(['users' => $this->user->search($request->search)]);
}
public function add(Request $request)
{
\Log::debug(print_r($request->contents, true));
if($this->registerManagement->checkSchedule($request->contents["start_day"],
$request->contents["days"],
$request->contents["roomid"]) == false)
{
return response()->json([
'errors' => "スケジュールが重複しています"
], 400);
}
$param = $this->registerManagement->getParam();
$this->registerManagement->add([
$param[0] => $request->contents["num"],
$param[1] => $request->contents["days"],
$param[2] => $request->contents["start_day"],
$param[3] => false,
$param[4] => date('Y-m-d H:i', strtotime($request->contents["start_day"].' + '.$request->contents["days"].' day') + $request->contents["checkout"])
], $request->contents["roomid"], $this->user->getUserById($request->contents["id"]));
return response()->json();
}
class UserRepository
{
public function __construct()
{
}
public function getUserById($id)
{
return User::where("id", $id)->first();
}
public function search($word)
{
$select = ['id', 'name', 'address', 'phone'];
return User::select($select)
->where('name', 'like', "%{$word}%")
->get();
}
}ユーザー検索で使用する「あいまい検索」はこんな感じで「like」を使用します。
管理者ログイン時の動作
ユーザーログイン時の動作
これでうまく行ったみたいです。（疲れた。。。）
前回までの状況はこちら
最新ソースはこちら(gitHub)
https://github.com/takishita2nd/hotel-mng
今回は、予約の編集処理と削除処理を修正します。
まず、UIですが、氏名、住所、電話番号はユーザー登録情報を使用するため、編集画面では、編集不可にします。
<tbody>
<tr>
<th>名前</th>
<td>{{ contents.name }}</td>
</tr>
<tr>
<th>住所</th>
<td>{{ contents.address }}</td>
</tr>
<tr>
<th>電話番号</th>
<td>{{ contents.phone }}</td>
</tr>
編集処理では、氏名、住所、電話番号のカラムはテーブルから削除しましたので、パラメータに含めないように修正します。
ログイン中のユーザー情報はAuth::user()を使用します。
予約情報の変更のみなので、ユーザーと予約情報の紐付けは変える必要ありません。
public function update(Request $request)
{
\Log::debug(print_r($request->contents, true));
if($this->registerManagement->checkScheduleForUpdate($request->contents["start_day"],
$request->contents["days"],
$request->contents["id"],
$request->contents["roomid"]) == false)
{
\Log::debug("スケジュールが重複しています");
return response()->json([
'errors' => "スケジュールが重複しています"
], 400);
}
$param = $this->registerManagement->getParam();
$this->registerManagement->updateById($request->contents["id"],
[
$param[0] => $request->contents["num"],
$param[1] => $request->contents["days"],
$param[2] => $request->contents["start_day"],
$param[3] => false,
$param[4] => date('Y-m-d H:i', strtotime($request->contents["start_day"].' + '.$request->contents["days"].' day') + $request->contents["checkout"])
], $request->contents["roomid"]);
return response()->json(['registerLists' => $this->registerManagement->getListByMonth(
$request->year,
$request->month,
$request->room,
Auth::id()
)]);
}
削除処理は、予約情報の削除と同時に予約情報との紐付けを解除する必要があります。
public function delete(Request $request)
{
$this->registerManagement->deleteById($request->id, Auth::user());
return response()->json(['registerLists' => $this->registerManagement->getListByMonth(
$request->year,
$request->month,
$request->room,
Auth::user()
)]);
}
public function deleteById($id, $user)
{
$model = $this->getItemById($id);
$this->detachToUser($model, $user);
$this->detachToRoom($model, $model->rooms()->first()->id);
$this->detachToSchedule($model);
$model->delete();
}
これでユーザーログインでの修正は完了しました。
次は、管理者ログインでの処理を修正します。
前回までの状況はこちら
最新ソースはこちら(gitHub)
https://github.com/takishita2nd/hotel-mng
今回はユーザーアカウントでログインした状態で予約登録する場合を作成していきます。
予約登録画面。
今までは宿泊者の情報を入力していますが、今回の仕様変更で、現在ログインしているユーザーの情報を表示させます。
<table class="edit">
<tr>
<th>名前</th>
<td>{!! $user->name !!}</td>
</tr>
<tr>
<th>住所</th>
<td>{!! $user->address !!}</td>
</tr>
<tr>
<th>電話番号</th>
<td>{!! $user->phone !!}</td>
</tr>
<tr>
<th>人数</th>
<td>{!! Form::select('num', ['1' => 1, '2' => 2]) !!}</td>
</tr>
<tr>
<th>宿泊部屋</th>
<td>{!! Form::select('room', $rooms) !!}</td>
</tr>
<tr>
<th>宿泊日数</th>
<td>{!! Form::number('days', 1) !!}</td>
</tr>
<tr>
<th>宿泊日</th>
<td>{!! Form::date('start_day', \Carbon\Carbon::now()) !!}</td>
</tr>
<tr>
<th>チェックアウト</th>
<td>{!! Form::select('checkout', $timelist) !!}</td>
</tr>
</table>
/**
* 入力フォーム
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('register.create',
[
'user' => Auth::user(),
'rooms' => $this->roomRepository->getRoomList(),
'timelist' => $this->registerManagement->getTimeList()
]
);
}
ログイン中のユーザー情報はAuth::user()で簡単に取り出すことができます。
予約登録処理。
まずは、バリデーションルールを修正します。
public function rules()
{
return [
'num' => 'required|numeric|digits_between:1,2',
'room' => 'required|numeric',
'days' => 'required|numeric|digits_between:1,4',
'start_day' => 'required|date',
];
}
登録するデータを変更します。
class RemoveCalumnReserveManagementTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::table('reserve_managements', function (Blueprint $table) {
$table->dropColumn('name');
$table->dropColumn('address');
$table->dropColumn('phone');
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::table('reserve_managements', function (Blueprint $table) {
$table->string('name')->befor('num');
$table->string('address')->after('name');
$table->string('phone')->after('address');
});
}
}
class AddReserveManagementUserTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('reserve_management_user', function (Blueprint $table) {
$table->increments('id');
$table->integer('reserve_management_id')
->foreign('reserve_management_id')
->references('id')->on('reserve_managements')
->onDelete('cascade');
$table->integer('user_id')
->foreign('user_id')
->references('id')->on('users')
->onDelete('cascade');
$table->timestamps();
$table->engine = 'InnoDB';
$table->charset = 'utf8mb4';
$table->collation = 'utf8mb4_unicode_ci';
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('reserve_management_user');
}
}
private $paramNames = ['num', 'days', 'start_day', 'lodging', 'checkout'];
予約データとユーザーを結びつけます。
データベースの構成はこんな感じになります。
public function add($param, $room, $user)
{
$model = new ReserveManagement;
foreach($this->paramNames as $name)
{
$model->$name = $param[$name];
}
$model->save();
$this->attachToRoom($model, $room);
$this->attachToSchedule($model);
$this->attachToUser($model, $user);
}
public function attachToUser($model, $user)
{
$model->users()->attach($user);
}
public function detachToUser($model, $user)
{
$model->users()->detach($user);
}
public function store(ManagementRequest $request)
{
if($this->registerManagement->checkSchedule($request->start_day,
$request->days,
$request->room) == false)
{
return redirect('management/create')
->with(['error' => 'スケジュールが重複します'])
->withInput();
}
$param = $this->registerManagement->getParam();
$this->registerManagement->add([
$param[0] => $request->num,
$param[1] => $request->days,
$param[2] => $request->start_day,
$param[3] => false,
$param[4] => date('Y-m-d H:i', strtotime($request->start_day.'+'.$request->days.' day') + $request->checkout)
], $request->room, Auth::user());
return redirect('management');
}
最後に、登録した情報を予約一覧に表示させます。
ユーザーでログインしているときは、他のユーザーの情報が見えないようにしないといけません。
public function getList()
{
$select = ['reserve_managements.id as id', 'num', 'rooms.id as roomid', 'rooms.name as room', 'days', 'checkout', 'start_day'];
return ReserveManagement::select($select)
->where('lodging', false)
->orderBy('start_day')
->leftJoin('reserve_management_room', 'reserve_managements.id', '=', 'reserve_management_room.reserve_management_id')
->leftJoin('rooms', 'reserve_management_room.room_id', '=', 'rooms.id')
->get();
}
public function getListByMonth($year, $month, $room, $userId)
{
$select = ['reserve_managements.id as id', 'users.name as name', 'users.address as address', 'users.phone as phone', 'num', 'rooms.id as roomid', 'rooms.name as room', 'days', 'checkout', 'start_day'];
return ReserveManagement::select($select)
->leftJoin('reserve_management_room', 'reserve_managements.id', '=', 'reserve_management_room.reserve_management_id')
->leftJoin('rooms', 'reserve_management_room.room_id', '=', 'rooms.id')
->leftJoin('reserve_management_user', 'reserve_managements.id', '=', 'reserve_management_user.reserve_management_id')
->leftJoin('users', 'reserve_management_user.user_id', '=', 'users.id')
->where('start_day', '>=', date('Y-m-d', strtotime('first day of '.$year.'-'.$month)))
->where('start_day', '<=', date('Y-m-d', strtotime('last day of '.$year.'-'.$month)))
->where('reserve_management_room.room_id', $room)
->where('lodging', false)
->where('users.id', $userId)
->orderBy('start_day')
->get();
}
public function registers(Request $request)
{
return response()->json(['registerLists' => $this->registerManagement->getListByMonth(
$request->year,
$request->month,
$request->room,
Auth::user()->id
)]);
}
まだ十分ではないけれど、そこそこ形になってきました。