顧客マスタテーブルを作成してみる
メニューもできたので顧客マスタ画面の開発を行うわけですが、まずは、メインのテーブル作成を始めたいと思います。
テーブル作成はDBに直接SQLを流すオーソドックスな方法でもいいのですが、Laravelではマイグレーションファイルを作成しそこにテーブル情報を記述し、ArtisanコマンドでDBに反映させる方法が普通なようです。
こうすることで、履歴を残したり、ロールバックができたりするので、チーム開発する際、役に立つようです。
さっそく、マイグレーションファイルを作成するわけですが、ベースファイルもArtisanコマンドで生成できます。
今回はModelファイルも併せて作成することを考えており、プロジェクトフォルダ内で以下のように、シェルにタイプし実行しました。
php artisan make:model Customer -m
これは、"Customer"というモデルファイルを作って"customers"というテーブルのマイグレーションファイルを同時に生成させるものです。
この名称ルールはORMによるもので、テーブル名は別名にすることも可能です。ただ、こういった命名規約系はある程度統一させといたほうがチーム開発ではベターだとは思います。
尚、さらっと出した、モデルについてですが、LaravelはMVCという設計思想に基づくフレームワークで、この思想の"M"の部分になり"データの管理や手続き"を担うものです。
まあ、テーブルを操作するモデルクラスを作ってそのクラスからテーブルにアクセスさせるイメージでしょうかね。
尚、モデルを使わなくても一応開発できるようです。
つぎに生成されたマイグレーションファイルにテーブル情報を記述します。
マイグレーションファイルは"databese"フォルダに入っており、今回は以下のように"create"ファンクションに作成するテーブルの情報を記述しました。
$table->bigIncrements('id'); $table->Text('customer_id'); $table->Text('customer_nm'); $table->longText('customer_addr')->nullable(); $table->Text('customer_tel')->nullable(); $table->Text('customer_fax')->nullable(); $table->longText('note')->nullable(); $table->integer('status')->defalut('1'); $table->timestamp('created_at')->default(DB::raw('CURRENT_TIMESTAMP')); $table->timestamp('updated_at')->default(DB::raw('CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP'));
この記述方法について詳しくしりたい方はLaravelの公式ページみていただきたいのですが、データベースの知識ある方なら、なんとなく何がしたいかはわかるのではなないでしょうかね。
記述できたら、以下、Artisan コマンドを実行すると、テーブルが作成されます。
#php artisan migrate
どうでもいい話ですが、Laravelの公式ページみたらORMであるEloquentを使うとデータベースとの対話を楽しくすることができると書いてました。なんかこれを聞いて、ORMの理解が深まった気がします。
ただし、テーブルの設計書やER図はいずれにしてもあったほうがいいですね。
今日はここまで。ようやく次回から、画面の開発にはいれるかな。
メニューを作ってみる
ざっくりした画面構成は考えられたので、とりあえずメニューから作ってみることにします。
まずホーム画面の"home.balde.php"の"card-body"にマスター画面に遷移するボタンを以下のように記述します。
<a class="btn btn-primary btn-lg text-white" href="/master">マスター</a>
Bootstrap使うと完結にボタン作れてほんと便利です。昔はがつがつCSS書いてましたがなんだったんだという感じです。
次にマスター画面を作ります。
"home.blade.php"をコピーして"maste.balde.php"という名前にします。 そしてこのファイルの"card-body"のところを以下のように変更します。
<a class="btn btn-primary btn-lg text-white" href="/mst_customer_list">顧客マスター</a>
これでメニュー画面はできました。
後はホーム画面に設置したマスタボタンからマスタ画面に遷移させるためのルーティングをしてみます。
routes>web.phpに以下を記述します。
Route::view('/master', 'master');
web.phpがルート設定するファイルで、上記のようにすると”/master”にアクセスすると"master.blade.php"に遷移させることができる単純な記述です。今回はただ遷移させるだけなので最小限の記述にしてます。
相変わらず、まったく進んでませんがとりあえず今回はこの辺にしときます。
尚、全体の画面のつくりなのですが、ベースは"home.blade.php"を使っていこうかと思います。BootstrapのCard意外とバランス取れてていい感じなので。
それと、つぎあたりから、ちょっとしたことでもソースが多くなって見難い記事になりそうなので、ポイントだけ記載するようにします。
ある程度できたら、GitHubかなんかで公開するかな・・。
文字コードの失敗談
最近は言語もDBも当たり前のように使っている文字コードのUTFですが、UTFにまつわる失敗談をしたいと思います。
PHPをやり始めたころはWindowsで開発している分には日本語の文字コードはSJIS当たり前という感じでしたので、PHPやDBも深く考えずSJISベースで始めました。
ここが悲劇の始まりです。
暫くは問題なかったのですが、日本語がDBにインサートできないという問題がありました。なんでかなーと思ってたらSJISにエスケープ文字(2バイト目に"\"コードが入る文字)があり、たまたまその文字が一番後ろに来ていて、シングルクォーテーションをエスケープしてしまっていたのです。
問題はこれだけでなく、使っていたDBのPostgresqlもSJIS非対応であることがわかりました。正確には標準のASCIIにしておけば無視されるのでインサートできるが、SQLでの検索がうまくいかない等問題もあったし、何より、データのインポートとかが、うまくいかないこともざらにありました。
PHPについては、この当時のPHPではマジッククオートという、"\"に自動的に"\"を加えてエスケープしてくれるという機能があったので仕方なくこいつを使ってました。しかし、途中で非推奨となり取り除かれ、PHPバージョンアップに伴うシステム改修にえらく苦労しました。
当時は、PHPでの開発に関する情報がインターネットにあまり出回ってなかったため、本買って勉強してることが多かったのですが、このころのPHPの本はいい加減で、文字コードにいたってはSJISがよいと平気で書かれていたりしました。
この背景には、UTFはいろんな言語を扱える分、データ容量が大きくなるからあんまりよろしくない等のあいまいな情報とかも出回っていたからなのかもしれません。おとなしくUTF使っておけばよかったと後悔してます。
まだこのころはハードディスクも今のような大容量でもなかったので、余計に上のような情報に惑わされた感があり、UTFから遠のいてしまったという感じです。
昔は、CPU,MEM,HDも今のような大きいものでなく、いかに効率よく使うかに労力を割くことが多かったです。もちろん大事な考えですが、昨今では、ハードスペックが上がっただけでなく、フレームワークも充実してますし仮想化技術も進み、こういったことを意識しなくて済むいい時代になったなーと思います。
画面構成を考えてみる
ベースができたので、いよいよメインの開発をはじめるわけですが、今回は画面構成に関して少し考えたいと思います。 ちなみにログイン機能なのですが、修正画面等がないので別の機会にテコ入れしようと思ってます。
メニュー構成
顧客マスタだけつくるのにメニュー構成も何もないだろうと思われそうですが、確かにその通りです。ただ、実際のシステムでは様々な機能があり、メニューはなくてはならないものです。後で、メニュー追加したりするとメインのプログラムにも手を加えないといけないということもわりとあるので、形だけでも作っておきます。
イメージ的にはログイン後、メインメニューが表示され、そこに"マスタ"ボタンを作りクリックすると、"マスタメニュー"画面に遷移し"マスタメニュー"画面に"顧客マスター"ボタンを配置して、そこから、顧客マスタの画面に遷移するイメージです。
メニューというとドリルダウンメニューやツリーメニュー等がありますが、画面にボタンを配置する形のほうが直感的にわかりやすいしコーディングしやすのでよく使います。もちろん適材適所ではありますけどね。
顧客マスタ画面構成
マスタ画面は単純なものだと、利便性を考えCRUDを一画面で実現することがよくあります。ただ、複雑なもになると一画面構成にするのは困難になり、返って利便性が落ちる場合もあります。今回はここも考慮して、CRUDは分離した画面で実現するようにします。
とはいえ、現段階で複雑なマスタを作ることは想定しておらず、顧客マスタで扱う項目は"顧客コード","顧客名","住所","TEL","FAX"程度のものでいったんとめておきます。いままで作ってきた顧客マスタはだいたいこのあたりの項目は入れてました。
UIについて
Laravel/UIのスカフォールドはReactを選択しましたが、LINEのようなアプリ開発考えることをしなければSPAを意識しなくてもいいだろうと考えており、Laravelの標準+BootstrapでUI構築は基本行うようにします。ただし、SPAのほうが便利なところがあれば、React使ってみてもいいかもしれませんが、こっちは気が向いたら別カテゴリでやろうかと思います。
尚、スカフォールドをReactにしたのでBootstrapは別で、依存関係考慮して読み込まないといけないかなと思ったら、インストールされているようです。初期画面のBladeファイルでBootstrapのclass使ってたのであれっ?とは思ってましたが。
npmでインストールしたパッケージはプロジェクトフォルダ直下の"package.json"みるとわかり、ちゃんとbootstrapの記載もあります。ただし、私の環境だとBootstrapのバージョンが v4.6.0なので、最新の5系でないため、ここは気を付けといたほうがよさそうです。
Laravel/UIのログイン機能を動くようにしてみる
前回ではLaravel/UIとともにログイン機能のインストールを行いましたが、今回はDBにユーザーテーブルを作成し実際にレジスターしてログインするところまでやってみます。
まず、MySQLに今回のプロジェクトのデータベースを作成します。なんのツールを使ってもいいのですが、XAMPPインストール時に一緒にインストールされたPHPMYADMINを利用するのが無難です。
今回は顧客マスターを作成するということで、"customer"というデータベースを作成しました。 文字コードは無難な"utf8mb4_general_ci"にしました。
次にプロジェクトフォルダ直下に入っている。".env"の編集を行います。本ファイルでDB接続等の基本設定が行えるようです。
ここまで道なりにしか進んでませんので、基本的に、DB名だけ変更すればとりあえず使えるようです。変更したのは以下の箇所です。
DB_DATABASE=customer
ようやく下準備はできたので、ユーザーテーブルを作成するのですが、Laravel/UIをインストールした時に、ユーザーテーブルのマイグレーションファイルもインストールされるので、以下のように プロジェクトフォルダからシェルで、Artisanを実行することでユーザーテーブルが作成されます。
#php artisan migrate
Artisanについてはまたの機会でお話ししようかと思いますが、Laravel用のコマンドインターフェースのことです。
またマイグレーションファイルにテーブルに関する情報を記述することで、artisan migrateでDBにテーブル作成すること等ができます。
これで、ログイン機能が使えるようになります。
試すには、Apache等のHTTPサーバーを設定して、当然起動せねばならないのですが、Artisanにはサーバー機能もあり、シェルから以下コマンドを実行することでHTTPサーバーが立ち上がります。
#php artisan serve
一体どういう仕組みかわからないですが、何の設定もせずに立ち上がります。すごいです。
さて、最後にブラウザを立ち上げて、以下URLにアクセスしてみると、トップページが表示され、上のメニューバーの右端にログインとレジスターのリンクが表示されているはずですのでレジスターしてログインできたら成功です。
http://localhost:8000/
ようやく足回りができました。次回からようやくメインの開発に移れそうです。