CodeIgniter3のチュートリアルをリファクタリング(7)

(6)の続きです。

(6)では、ログインフォームのviewを作成しました。
次はデータを受け取ってのログイン処理ですね!
そろそろタイトルを変えたほうがいい気がしてて、モヤモヤしてますがこのままいきます。

ログインのために必要なログインIDとパスワードがPOSTで届きます。
該当するログインユーザーが存在するかチェックをして、存在していたらログインしている情報をSESSIONで維持します。

で、どこでこのパスワードをチェックするかですがModeldでやります。
application/models/Auth_model.php
ファイルを作ります。
最初の1文字目は大文字です。

なんといってもログインするユーザーがいないことにはログインできないよね、
なので今日作る最低限の機能はこの2つ。
(1) ユーザの作成
(2) パスワードのチェック

Modelを作るところから始めるんだけど、unitTestしながらコードを書きたいよね。
なのでまずはModelのテストが書ける状態を作るよ!

まずは、テスト用のデータベースの用意ね。
ci3_tutorial_test という名前のデータベースを用意するよ!

データベースの設定をしたのを覚えてるかな?
application/config/database.php
この設定のままテストを実行すると、このデータベース上でテストが実行されてしまうんだ。
結果データが消えたり、増えたりする。
それはちょっとダメだよね?
なのでテスト用のデータベースの設定を用意するよ!

application/config/tests/database.php
testsに関する設定はtestsフォルダの中を見てくれるんだ。
ここにないファイルは、application/config/の中の物を使ってくれる。

次に、0地点のMigrationファイルを作成するよ
application/migrations/00000000000000_start.php
中身は空っぽのこんな感じ

次にModelの用意ね!
テストファイルも一緒に作るよ
application/models/Auth_model.php

次はテストファイルね!
application/tests/models/Auth_model_test.php

Auth_model_testのsetUp()では、migrationで0地点、create databaseした直後まで戻り、
テストの実行が終わったらテストを実行する前に最新の状態にするようにしています。

もっと機能が育って、テストに時間がかかるようになったなら違う方法に変えても良いでしょう。
テスト前にトランザクションをセットし、テスト後にrollbackする方法などいろいろな方法があります。
dumpファイルで関連テーブルごとリストアするって手もありますね。

テストを書きながらModelを書いていく環境ができました!

大丈夫だよー。
少しずつすすめて行こうねー!

続きます。

< 随時更新していきます>

CodeIgniter3のチュートリアルをリファクタリング(6)

クリスマスですね!
なんと最終日!!!!!
アドベントカレンダー全部埋まってます。なんという奇跡!

この記事はCodeIgniterアドベントカレンダーのために書きました! 25日目最終日!!!
https://qiita.com/advent-calendar/2017/code_igniter

CodeIgniter3のチュートリアルをリファクタリング(5) では、ログインフォームのviewファイルを用意するところまで終わりましたよ! アドベントカレンダーが終わっても記事はこのまま書き続けてしまおうと思います。はい!

viewファイルを作り始めました。
とりあえず、formを全てHTMLで作ってみましたが、CodeIgnier3にはform helperがあるんですよね!

今日のテーマは、

formをform helperを使って書こう!

です

https://www.codeigniter.com/user_guide/helpers/form_helper.html

form helperを使えるようにします。

次は実際にviewファイルで使ってみますね。
formタグ部分がhelperになりました。

この部分の出力されたHTMLはこんな感じになります。

実際にフォームボタンを押してみましょう。

POSTデータを取得
{実際に入力したログインID}

が表示されました☆
postデータがあれば、$this->input->post(); ではPOSTされた値が配列で取得できます。
フォームと、ログインの情報が送信された場合の出しわけができました。
次に、実際にログインの処理を作っていきましょう

(7)に続きます

CodeIgniter3のチュートリアルをリファクタリング(5)

クリスマスイブですね!
みなさま今日はケーキの準備は万全ですか?

この記事はCodeIgniterアドベントカレンダーのために書きました! 24日目です!
https://qiita.com/advent-calendar/2017/code_igniter

CodeIgniter3のチュートリアルをリファクタリング(4) ではデータベースの準備まで終わりました。

やっとコードを書いていきますよ!

今日のテーマは

ログイン機能を作りながら、viewファイル使ってみよう!

です

各画面のURLを決めます。
要件定義で書いたIFDAM図を元に、起点となる画面とURL考えます。

(1) ログイン /login
(2) ログアウト /logout
(3) 記事一覧 /news/
(4) 記事詳細 /news/detail/{記事のslug}
(5) 新規投稿フォーム /news/create
(6) トップページ /

ログイン機能 / ログアウト機能

まずはログインログアウト機能を作成します。
ログインしている状態、していない状態について決めます。
(詳細設計ですね)

  • ログイン状態の管理はsessionで行います。
  • user.idとuser.nameをsession中で保持します。
  • この情報がsessionの中にあり、DBにも存在していればログインしている状態とします。
  • IDはemailを利用します
  • パスワードは暗号化して保存します。
  • 暗号化のキーは、configで設定する暗号化キーと、ユーザ別のsaltキーで作成します。

Controllerを作成

application/controller/Auth.php

ルーターの設定

application/config/routes.php
ログイン、ログアウトのURL用意しますね。

http://{設置した場所}/login
http://{設置した場所}/logout
それぞれで、login logout の文字は表示されましたね!
次はviewファイルを用意しますよー

画面の用意

まずは、login画面から作っていきましょうか!
viewファイルは、application/viewsフォルダの中に作ります。
機能に分けてviewファイルをフォルダ分けしたほうが後で探しやすいので、Authフォルダを作りその中にlogin用のviewファイルを用意しますね。

application/views/Auth/login.php

表示するHTMLを用意します。

このHTMLをloginへアクセスがされた場合に表示をしてみます。

http://{設置したURL}/login

ここまでは表示されたでしょうかね?

(次に続きます)

CodeIgniter3のチュートリアルをリファクタリング(4) データベースの準備

かつて、こんなにも毎日のようにブログをかいた時期ってあったっけかな?と思う@NEKOGETです。コンバンワ。
この記事はCodeIgniterアドベントカレンダーのために書きました! 23日目です!
https://qiita.com/advent-calendar/2017/code_igniter

22日目の記事は bj1024さん の「CodeIgniter3 CLI利用時の引数の挙動」でした!

さて、この記事ですが、タイトルからもわかる通り、CodeIgniter3のチュートリアルをリファクタリング(3) の続編です。

と続いて、今回はデータベースの準備です。

データベースの準備

mysqlへの接続 DBの作成

パスワードの入力

(このユーザーとパスワードはansibleで作成設定しています。)

データベースの作成

できました。

configの設定 データベース

application/config/database.phpの設定です。
これはデータベースへの接続情報ですね。

CodeIgniter3で使えるデータベースはMySQLだけではありません。
今回は私が使い慣れているからmysqlですが他に使えるデータベースは他にもあります。
config/database.phpには次のように記載がされています。

ここでは細かい解説は避けますが、情報を追えるようにリンクを貼り付けておきますね。
今回はMySQLでいきます。

Migration Classの作成

先日の記事「CodeIgniter3 migrationの話をば。」 のおさらいでもあります。

Migration Classを作ります。
application/controllers/Migrate.php
(正直もうこのControllerは先にあってもいいのではないかとさえ思います)

Configの設定

application/config/migration.php を編集します。

migrationを使用可能にして、
migrationのファイルを保存するフォルダを指定して
migrationのファイルをつくるのにtimestamp使いますを指定します。YYYYMMDDHHIISS フォーマットなので、(e.g. 20171213100537) です。
都度バージョンを指定するのは面倒なので、マイグレーションのバージョンは自動で最新にしといてね設定をtrueに変更です。

Migrationファイルを保存する場所を作る

Migrationファイルを保存する場所を作ります。configに書いた、$config[‘migration_path’] = APPPATH.’migrations/’;がそれですね。

準備ができました。

Migration ファイルの作成

手動でファイルを作るのは大変なので、コマンドで空ファイルを作っちゃいましょうか

空ファイルができました。
application/migrations/20171222051205_add_news.php
次はこのファイルを編集します。
mysql WorkBenchで作成したSQLがあります。
覚えてますか? CodeIgniter3のチュートリアルをリファクタリング(1) で作ったあれです。設計したからこそこの時点でSQLが存在してるわけですよねー。

これを元に作ります。
( しまった…. コメントを付けるのを忘れていました。 )

MySQL WorkBenchで作成した場合にはDB名がcreate文についちゃってますので、削除しました。あとはそのままのSQLを使うことにします。
create table時のコメントはとても重要です。つけておきましょう。
MySQL WorkBenchでコメント付けられます。生成したファイルについてなければつけてから、SQLを再度作成すると良いですね。

最初のmigrateファイルができました。

Migrationの実行

データベースにテーブルができました。

ロールバックについては今回の記事では省略します。
CodeIgniter3 migrationの話をば。 を参照ください。

データベースの準備ができました。

(5)へ続きます。

CodeIgniter3のチュートリアルをリファクタリング(3)

こんにちわ! NEKOGETです。
この記事はCodeIgniterアドベントカレンダーのために書きました! 21日目です!
https://qiita.com/advent-calendar/2017/code_igniter

20日目の記事は、 アドベントカレンダーの効能 でした!

内容としては、 CodeIgniter3のチュートリアルをリファクタリング(2) の続きになります!

AWS Lightsail は80と22ポートがデェフォルトで開いています。ビルドインサーバーで8000で立ち上げてしまうのもアリですが、今日はhttpdさんに頑張ってもらうことにします。

ソースコードの移動

URLを叩いてWelcomeページが見えるか確認してみましょう

表示されました

configの設定

application/config/config.phpの設定

ベースURLの設定をします。今回はチュートリアルなのでipアドレスからのURLで良いでしょう。

起点となるファイルのパスを記載します。
デェフォルトではindex.phpです。
今回はkenjisさんの提供してくれているパッケージでプロジェクトを作ったのですでにmod_writeの設定が.htaccessで設置されていますので、ブランクになっています。

composerのautoloaderを使うかどうかの設定がありますね。
trueにしておきましょう

今回はsessionはfileのままで行こうかと思います。
なのでそのままデェフォルト値で良いでしょう

unitTest実行用ライブラリの追加

https://github.com/kenjis/ci-phpunit-test
composer installします。

testsフォルダへ移動

しかし、../../vendor/phpunit/phpunit/phpunit はちょっと遠いね。


テストが実行できる状態になりました。

次へ続きます。

CodeIgniter3のチュートリアルをリファクタリング(2)

こんにちわ! NEKOGETです。
この記事はCodeIgniterアドベントカレンダーのために書きました! 17日目です!
https://qiita.com/advent-calendar/2017/code_igniter

16日目の記事は、 CodeIgniter3のチュートリアルをちょっと見てみようかの巻(3)でした。

さて、この記事はCodeIgniter3のチュートリアルをリファクタリング(1) の続きです。

(1)では要件定義をしました。
その続きですね。
頑張っていきましょう!

環境の準備

サーバーの準備

前回は AWS Cloud9で環境を作ったので、今回は AWS Lightsail でいこうと思います。Newsを見せるだけのサイトだもの。VPSで(多分)十分だと思うの。

最近始まったAWSのVPSなサービスですね。
月$5の一番安いやつでいきます。

最初なのでインスタンスがありません。
作っていきましょう!

インスタンスを作成します。
東京リージョンです。
アプリ + OSにすると、便利なWordPressが選択できます。

一瞬、もうWordPressでいいのでは?って思いました。
だってこのままボタン押したら、WordPressが動くんですもの…..

CodeIgniterのチュートリアルなのでOSのみを選択
Amazon Linuxにしてみました。

次にsshのキーを作ります。
リージョン聞かれます。

それから、キーの名前を決めますね。

手持ちのキーを登録もできそうですが、新規作成しました。
sshキーの名前を適当に決めて、作成ボタンをぽちっですねー。

鍵ができました。
鍵二度とDLできないからちゃんとDLします。
ぽちっ。

sshキー、作ったやつが選択できてることを確認しました。

一番安い$5を選択できていることを確認します。

インスタンスの名前を確認します。
もうめんどくさかったのでそのままの名前で行きました。

で、作成ボタンを押しました。
インスタンスの準備ができて準備中になりました。

しばし待ちます。

どうやら準備ができて起動したようですよ!

動作環境の準備

sshでログイン
PHP入ってるかな?

うん、入ってないね。
やっぱansible用意しようか。

用意しました。
https://github.com/NEKOGET/ci3_aws_lightsail_ansible
(これ、ansible用意するだけでブログ1本にしてよかったんじゃ?って気が少しだけしてるの気のせいでしょうか?…)
中にある、ansible.shを実行するとansibleのインストールが始まります。

CodeIgniter3のプロジェクトを作成

インストールできました!
スタート地点にたちました!
(3)に続きます☆

18日目の記事は、 noldorinfo さんによる不思議なvalidator(filter)順序です!
お楽しみに☆

CodeIgniter3のチュートリアルをリファクタリング(1)

こんにちわ! NEKOGETです。
この記事はCodeIgniterアドベントカレンダーのために書きました! 14日目です!
https://qiita.com/advent-calendar/2017/code_igniter

13日目の記事は、 CodeIgniter3のチュートリアルをちょっと見てみようかの巻(3)でした。

CodeIgniter3のチュートリアルをちょっと見てみようかの巻(3) までのチュートリアルの回を見ていただいたみなさまにはわかると思いますが、チュートリアルすごく雑です。
もう少しだけしっかり作ってみようと思います。

要件定義

要望を想像してみる

このチュートリアルの機能はNews機能です。

  • Newsの記事を読んでもらう
  • Newsの記事を登録更新する

この2つの機能が主な機能です。

  • お店のニュースを表示する機能が欲しいですよねー
  • Newsの記事は誰にでも更新できてはいけません。編集者だけが登録編集削除できるようにしたいです。
  • 記事のURLを見るだけでタイトルがわかるようにしたいです。
  • 記事を書いた日表示できます?
  • 一覧は新しい順に表示させたいです
  • トップページには、新着5件が表示されると嬉しいですね
  • カテゴリー別の一覧が見えると嬉しいです。
  • 画像のUPLOADもできると嬉しいです。自動でリサイズも
  • 書いた人の名前を自動で出したいですねー

要望はどんどん増えていきますが、予算と時間の関係で、これぐらいの要望が叶うといいですね☆

登場人物は2名

  • (1)記事を見る人
  • (2)記事を書く人

なるほど2つの視点で機能が必要ですねぇ。
次は動線を確認します

動線の確認

登場人物別にIFDAM図を作ってみましょうか。
(1)記事を見る人

シンプルだねw

(2)記事を書く人

ちょっと大きくなっちゃったんでクリックで大きい画像が見えるようにして見ました。

いわゆる管理機能だねー

仕様の検討

そうだねぇ。
ログインしてなければできることが絞られてる状態になるだけだものね。
新規登録ボタンの表示と新規登録機能はログインできていないと使えないことにしよう。
(2)記事を書く人のIFDAMを元に作ろう

ワイヤーの作成

普段なら、アプリを使って作るんだけど、今日はチュートリアルだしね
手書きで描いちゃおうかな

ログインしたら、新規登録フォームが見えるでいいんじゃないの?
一覧じゃなくて???
修正機能ないのに、一覧をログインして見る必要あるかな?

….なるほど、無いね。
ではそうしてみよう。
IFDAM図を直してみるから一緒に確認してね。

記事を書く人スタートからはこうなるね。

一覧をみる人だとこうなるかな?

ログインする人を切り分けたよ

データの設計

MySQLで行くなら MySQL Workbench で、作っちゃえばいいかな?

こんな感じでcreate文をコピーできるの便利だねー
実際に使う予定のサーバに接続して流し込むこともできるし、MySQL Workbench便利だね。
PostgresならPgAdmin4ってアプリがあるよ!

次は必要な環境を用意しよう。

(2)へ続きます。