おねがいページにコメント機能を追加してみよう！ その5
こんにちは！
ちょっと間があいてしまいました。。。
前回はコメントの登録までしましたね。
今回は、その登録したコメントをコメントの追加画面に一覧で表示します。
では、さっそく進めましょー
● コメント追加画面にコメント一覧を表示する。
１．C:\donichi\fuelphp-1.7.3\fuel\app\classes\view\comments\_form.phpに下記の8行目～25行目までを追加します。
コメントの削除ができるように各コメントに削除ボタンをつけました。
ちゃんと表示されるか確認しましょう。
おねがいページからコメントを追加したおねがい情報の
Commentボタンをクリックしてみてください。
できましたー！
あとは、コメントの削除ができれば完成です。
各コメントの右下の
ボタンをクリックしてください。
おっと、おねがいページに遷移しましたね。
でも、Commentボタンのコメント件数が減っているので
削除はできたみたいですね。
最後に登録時と同様に削除した時にも、
コメント追加画面に戻るように修正しましょう。
２．C:\donichi\fuelphp-1.7.3\fuel\app\classes\view\comments\_form.phpを修正する。
20行目を下記のように修正します。
３．C:\donichi\fuelphp-1.7.3\fuel\app\classes\controller\comments.phpを修正して、コメント削除後にコメント追加画面に遷移するように変更。
action_deleteの122行目と138行目を下記のように修正します。
では、削除してみましょう。
ボタンをクリックして削除・・・と。
コメントが削除されて、コメント追加画面に戻りましたね。
コメント追加機能は今回で終了ですー！∩(´∀｀)∩ﾜｧｲ♪
他にも入力内容にエラーがあったらメッセージ出したりとか、
いろいろできることはありますが、
また機会があればここでもやってみたいと思います。
時間があれば、みなさんも試して見てくださいねー
それではまた～(*´∇`)ﾉｼ
おねがいページにコメント機能を追加してみよう！ その4
こんにちは！
最近雨が多くて、ブルーな気持ちになってしまいますね（ _ _ ）..........o
でも！今回も一緒に頑張りましょーΣo(*･∀･*)
さて、今回はコメントの登録をします。
● コメントの入力フォームの表示を変更し、コメントの登録を行う。
１．C:\donichi\fuelphp-1.7.3\fuel\app\classes\view\_form.phpの
1行目～2行目、10行目から33行目までを削除します。
入力フォームがなくなっていると思います。
２．C:\donichi\fuelphp-1.7.3\fuel\app\classes\view\_form.phpを修正して、
完成イメージに合わせて入力フォームを追加する。
ちょっと長いですが、下記の8行目～30行目までのコードを入力します。
さて、これで前回の完成イメージのような入力フォームになっているはずです！
画面の下のほうに入力フォームが表示されました！
３．C:\donichi\fuelphp-1.7.3\fuel\app\classes\controller\comments.phpを
コメントが登録できるように修正する。
と、思いましたが、
oil g scaffoldコマンドで土台を作った時に既に登録処理はできているので、
そのまま登録できるはずです。
ちょっと登録してみますね。
入力して・・・・
Saveボタンをクリックします。
コメントの一覧ページに移動しましたね。
登録できたみたいですヽ(^◇^*)/ ﾜｰｲ
でも、今回はコメントの一覧ページは必要ないので、
登録したらコメントの追加画面へリダイレクトするように変更しましょう。
４．C:\donichi\fuelphp-1.7.3\fuel\app\classes\controller\comments.phpを修正する。
コメント追加後の遷移先を変更する。
55行目を以下のコードに修正して保存します。
そして、再登録してみましょう。
Saveボタンをクリックして登録します。
ちゃんとコメントの追加画面に戻りました。
commentsテーブルに登録されているかphpMyAdminで確認してみます。
できてますね！
それと、上でも書いていますが、今回はコメントの一覧ページを使用しません。
indexにアクセスされた時は、おねがいページに移動するようにしましょう。
５．C:\donichi\fuelphp-1.7.3\fuel\app\classes\controller\comments.phpを修正する。
comments/indexにアクセスされた時におねがいページに遷移するように変更する。
action_index()の7行目～9行目を削除し、下記のコードを7行目に追加してください。
http://localhost:8000/commentsにアクセスして、
おねがいページが表示されれば大丈夫です。
さて、今回は長くなりましたが、このへんで終了したいと思います。
コメントの追加機能は次で終わりですー
次回は、コメントの追加画面に
登録されているコメントの一覧を表示したいと思いますー
それでは、また次回～(*´∇`)ﾉｼ
おねがいページにコメント機能を追加してみよう！ その3
こんにちは！
前回、前々回と
土日でわかるPHPプログラミング教室で作った社内連絡アプリに
コメント機能を追加するべく頑張ってきました。
そして、今回もその続きです。
では、さっそくやっていきましょー！
前回はリレーションの設定をしました。
今回は、
・Commentボタンの追加
・コメント追加画面におねがい情報を表示
をしてみますー
● 作った土台を修正して、要件にあったコメント追加機能にする。
１．おねがいページにCommentボタンを追加します。
C:\donichi\fuelphp-1.7.3\fuel\app\views\request\index.phpに
25～28行目と38行目のコードを追加します。
前回書いていませんでしたが、
Commentボタンに追加されたコメントの件数も表示したいと思います。
なので、25～28行目はコメントの件数を取得する処理を入れます。
38行目のコードでCommentボタンを追加します。
改行はせずに一行で書いてくださいー
コメントボタンが追加されているか確認します。
http://localhost:8000/requestを開きます。
青いCommentボタンが追加できましたよ！！
Commentボタンをクリックすると・・・・・
コメントの追加画面がでましたね！
次いきましょー！
２．コメントの追加画面を修正する。
その１でも書きましたが、追加画面は下記のようにしたいと思います。
・コメントするおねがい情報を表示。
・コメントの一覧を表示。
☆投稿者名の入力フォーム。
☆コメントを追加する入力フォーム。
☆「Save」ボタンでコメントを追加する。
☆のところは土台を作った時にできているところです。
文章では伝わりにくいですよね・・・・
（･∀･)つ 完成イメージはこんな感じです
まずは、おねがい情報を表示させてみましょう。
C:\donichi\fuelphp-1.7.3\fuel\app\classes\controller\comments.phpの
action_create()を修正します。
28行目～37行目を下記のように修正します。
そして、69行目を下記のように修正します。
28行目の引数は、request_idがセットされるようになっています。
おねがいページからCommentボタンをクリックして、
コメントの追加画面に移動しました。
その時のURLに2ってついてましたよね？
クリックしたおねがい情報によって数字は変わりますが・・・
これがクリックしたおねがい情報のrequest_idなので、
action_createの処理にきたときの引数にセットされます。
30行目～37行目はrequest_idがセットされていなかったり、
データベースに存在しないidだったりした時には、
おねがいページにリダイレクトさせたいのでこの処理を入れています。
ちょっと試してみましょう。
存在しないidを入れてアクセスするとおねがいページに飛ばされるはずです。
ちゃんとおねがいページに移動しました！
69行目については、おねがい情報をViewから取得できるようにセットしています。
次はViewでおねがい情報を取得して表示してみたいと思います。
えーと、71行目にView::forge('comments/create');ってあるから
view\comments\create.phpを開きましょう。
4行目で_form.phpを読み込んでいますね。
view\comments\edit.phpでも同じ_form.phpを使っているようなので、
こういう形にしているんですね。
今回はコメントの編集は作らないので、
create.phpに直接入力フォームを記述しても良さそうですが…δ(・ω・`)ｳｰﾝ…
後で編集を作りたくなったときのことも考えて
一応_form.phpを修正することにします！
C:\donichi\fuelphp-1.7.3\fuel\app\classes\view\_form.phpに
下記の3行目～9行目のコードを追加します。
それと、おねがい情報の他に「IP」と「投稿日時」も表示してみます。
おねがいページからCommentボタンをクリックして表示を確認してみましょう。
表示できました！！∩(´∀｀)∩ﾜｧｲ♪
今日はここまでにしたいと思います。
次回は、コメントの登録のところをする予定ですー
また次回～(*´∇`)ﾉｼ
おねがいページにコメント機能を追加してみよう！ その2
みなさん、こんにちは！
さて、今日は早速前回の続きをしちゃいましょう！
前回はoil g scaffoldコマンドで土台を作って
oil r migrateコマンドでテーブルを作成するところまでしましたね！
今回からその土台を変更していきたいと思います。
えーと、
まずは、コメントの追加ページを変更する前にリレーション設定をします。
リレーションというのは、
データベース内の複数のテーブルを相互に関連付けて、
簡単に参照を行えるようにしたり、
変なデータが入ったりしないようにすることみたいです。
oil r migrateコマンドで作成したcommentsテーブルに
request_idというフィールドがあります。・・・・たぶん＼(^0^)／
まだ確認してなかったので、確認しましょう。
phpMyAdminにログインして、
左側のツリーからfuelphpの「＋」をクリックすると
データベース内のテーブルが表示されます。
そして、commentsテーブルのリンクをクリックして、
構造タブを開いてみてください。
上から4つ目にありますね。
このrequest_idでどのおねがい情報のコメントなのかわかりますね。
このrequest_idに存在しないおねがい情報のidが入っていたら
おかしいことになってしまうので、
そういうことがないようにリレーション設定をするわけですね。
ではコードを書いてみます。
記述の方法はFuelphpの日本語ドキュメントを参考にして進めます。
http://fuelphp.jp/docs/1.7/packages/orm/relations/intro.html
● RequestテーブルとCommentテーブルにリレーション設定する。
１．C:\donichi\fuelphp-1.7.3\fuel\app\classes\model\request.phpに34行目～40行目のコードを追加する。
２．C:\donichi\fuelphp-1.7.3\fuel\app\classes\model\comment.phpに36行目～44行目のコードを追加する。
これでリレーションの設定は終わりです。
・・・・・なんか疲れましたね＼(^0^)／
ほとんど進んでない気がしますが、今日はここまでです。
続きは次回～(*´∇`)ﾉｼ
おねがいページにコメント機能を追加してみよう！ その１
こんにちは！
いつの間にか5月も半ば・・・・
連休は終わったし、梅雨になるし、
少しブルーな気分になってしまいますよね・・・(-д-；)
モチベーションを無理やり上げよう！ということで、
今回から数回に分けて書籍の社内連絡アプリ「社絡」に
コメント機能を追加してみたいと思います。
では、さっそく始めましょう！
えーと・・・・・・なにからしよう？
＿〆（－∧－；）ん～と・・・
とりあえず何をしたいのか整理してみたいと思います。
何をしたいのか？
書籍で作ったおねがいページの投稿にコメントが追加できるようにしたい！
どんなふうに追加するか？
おねがいページのDeleteボタンの横に「Comment」ボタンを追加する。
Commentボタンをクリックするとコメント追加ページに移動する。
追加ページの内容は？
コメントするおねがいの内容を表示。
コメントの一覧を表示。
投稿者名の入力フォーム。
コメントを追加する入力フォーム。
「Save」ボタンでコメントを追加する。
という感じで作りたいと思います。
よし！
とりあえず、書籍のおねがいページを作った時と同じ感じで作ればできそうな気がしてきました。
まずは書籍と同じようにoil g scaffoldコマンドで土台を作りたいと思います。
● scaffoldを使って、土台を作る
１．PuTTYを起動して、VirtualBox（仮想環境）内のCentOSにログイン。
２．cdコマンドでカレントディレクトリをfuelphpに移動。
３．oil g scaffoldコマンドで基本的なWebアプリケーションに必要なプログラムとマイグレーションファイルを自動生成する。
下記のコマンドを入力します。
oil g scaffold Comments user_name:string comment:text request_id:integer
上手くいったみたいですね！
４．oil r migrateコマンドで、マイグレーションファイルの内容をデータベースに反映させ、comment情報を管理するテーブルを作成する。
これも書籍通りですね。
下記のコマンドを入力します。
oil r migrate
成功しました。
５．ブラウザのアドレスに「http://localhost:8000/comments」と入力し、下記の画面が表示されることを確認する。
あ！表示されましたね！o(＾∇＾)oﾜｰｲ♪
とりあえず、今日はここまでにしたいと思います。
ほとんど復習でしたね。
続きはまた次回～(*´∇`)ﾉｼ
土日でわかるPHPプログラミング教室のおさらい
こんにちは！
前回は無事？にherokuを使ってWebアプリを公開できました。
やっとたかにはなれたけど・・・・
やはり大空は厳しいです・・・・
(*´Д｀)=3ハァ･･･、ひよこに戻りたい・・・
ということで！
「土日でわかるPHPプログラミング教室」をちょっとおさらいしましょう！
今回は、よくあるお問い合わせ内容に沿った記事を書きたいと思います。
やっぱり一番多いのはvagrant upがうまくいかない！というお問い合わせです。
私も違うパソコンでしてみるとうまくいかないことがありました。
ググって書いてある通りにしたら動いたけど・・・・
なんかよくわかんない＼(^0^)／
そもそもvagrant upした時にはなにがどうなってるの？
書籍をおさらいしながら、
vagrant upまでの環境構築の流れをちょっと詳しく調べてみたいと思います。
まずVagrantについて。
OS、データベース、Webサーバーなどがきちんと動き、かつ、すぐにWebアプリが開発できる環境を、VirtualBox上に構築するアプリ。
（土日でわかるPHPプログラミング教室P22参照）
そして次に環境を作る時に使ったGitについて。
●Git
インターネット上からOSやデータベース、WebサーバーなどのWebアプリの開発環境を構築するために必要なアプリなどを取得するアプリ。
（土日でわかるPHPプログラミング教室P22参照）
なるほど( ..)φメモメモ
書籍の51ページからの流れでいくと
１．git cloneコマンドでインターネット上から必要なアプリを取ってくる。
書籍では↓のようになっていますね。
ここで入力した内容について調べてみました。
--recursiveってなんだろう？
git cloneコマンドのオプションらしいです。
git cloneと同時にgit submodule initコマンドと
git submodule updateコマンドを行う場合につける・・・
ということなのですが・・・
また、わからないことがでてきました。
submodule？
気になりますが、今回はsubmoduleについてはスルーしましょう。笑
https://github.com/……について
Githubについてはすでに
「ろく、herokuをつかってWebアプリを公開してみる その1」
の記事で登録をしましたが、
ソースコードの管理や公開ができるウェブサービスみたいですね。
そこに弊社がWebアプリを作るための環境構築ができるリポジトリを
公開しているわけです。
それをgit cloneで自分のパソコンにコピーしているんですね。
末尾のvagrantについて
このvagrantはコピーしてくる時のディレクトリ名を指定しているだけです。
２．cdコマンドで先ほどコピーしたvagrantディレクトリに移動します。
これは書籍通りですね。
３．vagrant upコマンドでVirtualBox上に環境を構築します。
書籍にも書いてありますが、
1回目のvagrant upした時と2回目以降はちょっと違います。
1回目：環境構築→Vagrantの起動
2回目：Vagrantの起動
となるので、1回目は時間がかかるんですね。
先程git cloneでローカルにコピーしてきたファイルが色々あると思いますが、
▲C:\donichi\fuelphp-1.7.3\vagrant
これらのファイルをテキストエディタで開いてみると、
CentOSとかphpとかphpMyAdminとか
その他諸々のインストールを実行するコマンドとか
設定が書いてあるっぽいです。
bootstrap.shがインストールを実行するファイルみたいですね。
それを1回目のvagrant upの時に実行しているということですね。
設定ファイルとかコマンドの内容については、
これから勉強していきたいと思います(^^)/
勉強することがいっぱいですね^^;
長くなりましたが、今回はこのへんで終わります。
それでは～(^o^)ﾉｼ
はち、herokuを使ってWebアプリを公開する その3
こんにちは、ななこにごうです(^^)
「herokuを使ってWebアプリを公開する」の最後に
なります。
いよいよherokuにアップしていきます。
では、さっそく・・・
■herokuにアップする準備
C:\donichi\fuelphp-1.7.3のcomposer.jsonの17行目・29行目・40行目を下記のように修正します。
前後は省略しますが…
※環境によって変わります。
次はC:\donichi\fuelphp-1.7.3のcomposer.lockの561行目を下記のように修正します。
こちらも前後省略します。
※環境によって変わります。
今度はC:\donichi\fuelphp-1.7.3\fuel\app\viewsのtemplate.phpの6～7行目を下記のように修正します。
修正し保存したら、C;\donichi\fuelphp-1.7.3のcomposer.pharを削除します。
ここまで終わったらコマンドプロンプトにて下記のコマンドを実行します。
※以降、環境によって実行結果は変わります。
ここまでで準備おわりです(^^)
■herokuにアップする
初めにコマンドプロンプトにて下記のコマンドを実行します。
コマンド：heroku create donichi --buildpack heroku/php
してみましたが、失敗しました。笑
実行結果
名前が使われているみたいなので少し変更して実行。
実行結果
成功＼(^^)／
次はこのコマンドです。
コマンド：git init
実行結果
今度はこのコマンドです。
コマンド：heroku git:remote -a (最初のコマンドで入力した名前)
実行結果
次はこのコマンドです。
コマンド：git add .
実行したらまたもや失敗(+_+)
これがさらに下に続きました。
ググってみるとGitが改行コードをCRLFへ変更しようとするみたい。
ということでこのコマンド
コマンド：git config --global core.autoCRLF false
を実行し再度git add .を実行したら成功しました！
次はこのコマンド
コマンド：git commit -am"最初のコミット"
コマンド：git pusu heroku master
実行結果
ここまできたらコマンド：heroku openを実行します。
するとブラウザに
こうなりました！やっとデプロイできました♪
でもこのままだとRequestを押すとエラーになるので
以下の操作をします。
■データベースの準備をする
まずはherokuのManage Account画面からBillingをクリックし、クレジットカード情報を入力します。
カード情報と国だけでOKでした(^^)
※ClearDBを使用するにはクレジットカード情報が必要ですが、無料で使用できます。
情報を登録した後下記のコマンドを実行します。
コマンド：heroku addons:add cleardb:ignite
次はこのコマンドを実行します。
コマンド：heroku config
今度はエクスプローラーからC:\donichi\fuelphp-1.7.3\fuel\app\config\developmentのdb.phpを開き、
ホスト名・データベース名・ユーザ名・パスを入力します。※同じ色のところに入力してください。
※ピンク・・・ホスト名 オレンジ・・データベース名
薄黄色・・・ユーザ名 黄緑・・・・パス
次はコマンドプロンプトにて下記のコマンドを実行します。
コマンド：mysql --host=ホスト名 --user=ユーザー名 --password=パス データベース名
実行結果
「mysql>」になったところで下記のコマンドを実行します。
コマンド：CREATE TABLE requests (
id INT PRIMARY KEY AUTO_INCREMENT,
body VARCHAR(255),
ip VARCHAR(255),
created_at int,
updated_at int
);
それと、
コマンド：CREATE TABLE comments (
id INT PRIMARY KEY AUTO_INCREMENT,
user_name VARCHAR(255),
comment text,
request_id int,
created_at int,
updated_at int
);
ここまで終われば・・・
コマンド：show tables;
次は、コマンド：exit
コマンド：heroku open のコマンドを実行しブラウザで開きます。
表示された画面のRequestをクリックし、書籍「土日でわかるPHPプログラミング教室」で作成した通りに作動することを確認します。
以上で、herokuを使ってWebアプリを公開する、は終わりです。
グーグル先生にたくさんお世話になりましたｗｗ
無事（とは言い難いですが）できてよかったです^^;
それでは～(^o^)ﾉｼ
