読者です 読者をやめる 読者になる 読者になる

超初心者の第一歩🐾~「土日でわかるPHPプログラミング教室」を使う~

「土日でわかるPHPプログラミング教室」に関して諸々綴っていきます。

おねがいページにコメント機能を追加してみよう! その5

たか編

こんにちは!

 

ちょっと間があいてしまいました。。。

 

前回はコメントの登録までしましたね。

 

今回は、その登録したコメントをコメントの追加画面に一覧で表示します。

 

では、さっそく進めましょー

 

● コメント追加画面にコメント一覧を表示する。

 

1.C:\donichi\fuelphp-1.7.3\fuel\app\classes\view\comments\_form.phpに下記の8行目~25行目までを追加します。

コメントの削除ができるように各コメントに削除ボタンをつけました。

f:id:froidebooks:20160609153314p:plain

f:id:froidebooks:20160609154236p:plain

 

ちゃんと表示されるか確認しましょう。

おねがいページからコメントを追加したおねがい情報の

Commentボタンをクリックしてみてください。

 

f:id:froidebooks:20160609153419p:plain

 

できましたー!

あとは、コメントの削除ができれば完成です。

 

各コメントの右下のf:id:froidebooks:20160609153642p:plainボタンをクリックしてください。

 

f:id:froidebooks:20160609153703p:plain

 

おっと、おねがいページに遷移しましたね。

でも、Commentボタンのコメント件数が減っているので

削除はできたみたいですね。

 

最後に登録時と同様に削除した時にも、

コメント追加画面に戻るように修正しましょう。

 

2.C:\donichi\fuelphp-1.7.3\fuel\app\classes\view\comments\_form.phpを修正する。

20行目を下記のように修正します。

f:id:froidebooks:20160609154535p:plain

 

3.C:\donichi\fuelphp-1.7.3\fuel\app\classes\controller\comments.phpを修正して、コメント削除後にコメント追加画面に遷移するように変更。

action_deleteの122行目と138行目を下記のように修正します。

f:id:froidebooks:20160609155325p:plain

f:id:froidebooks:20160609155539p:plain

 

では、削除してみましょう。

f:id:froidebooks:20160609155347p:plain

f:id:froidebooks:20160609153642p:plainボタンをクリックして削除・・・と。

 

f:id:froidebooks:20160609155707p:plain

 

コメントが削除されて、コメント追加画面に戻りましたね。

 

コメント追加機能は今回で終了ですー!∩(´∀`)∩ワァイ♪

 

他にも入力内容にエラーがあったらメッセージ出したりとか、

いろいろできることはありますが、

また機会があればここでもやってみたいと思います。

時間があれば、みなさんも試して見てくださいねー

 

それではまた~(*´∇`)ノシ

 

 

 

 

 

おねがいページにコメント機能を追加してみよう! その4

たか編

 こんにちは!

 

最近雨が多くて、ブルーな気持ちになってしまいますね( _ _ )..........o

 

でも!今回も一緒に頑張りましょーΣo(*・∀・*)

 

さて、今回はコメントの登録をします。

 

● コメントの入力フォームの表示を変更し、コメントの登録を行う。

 

1.C:\donichi\fuelphp-1.7.3\fuel\app\classes\view\_form.php

1行目~2行目、10行目から33行目までを削除します。

f:id:froidebooks:20160526175506p:plain

 

入力フォームがなくなっていると思います。

f:id:froidebooks:20160526174451p:plain

 

 

2.C:\donichi\fuelphp-1.7.3\fuel\app\classes\view\_form.phpを修正して、

完成イメージに合わせて入力フォームを追加する。

ちょっと長いですが、下記の8行目~30行目までのコードを入力します。

f:id:froidebooks:20160526174947p:plain

f:id:froidebooks:20160526175244p:plain

 

さて、これで前回の完成イメージのような入力フォームになっているはずです!

 

f:id:froidebooks:20160526175712p:plain

 

画面の下のほうに入力フォームが表示されました!

 

3.C:\donichi\fuelphp-1.7.3\fuel\app\classes\controller\comments.php

コメントが登録できるように修正する。

 

と、思いましたが、

oil g scaffoldコマンドで土台を作った時に既に登録処理はできているので、

そのまま登録できるはずです。

 

ちょっと登録してみますね。

入力して・・・・

f:id:froidebooks:20160526180019p:plain

 

 

Saveボタンをクリックします。

f:id:froidebooks:20160526180052p:plain

 

コメントの一覧ページに移動しましたね。

登録できたみたいですヽ(^◇^*)/ ワーイ

 

でも、今回はコメントの一覧ページは必要ないので、

登録したらコメントの追加画面へリダイレクトするように変更しましょう。

 

 

4.C:\donichi\fuelphp-1.7.3\fuel\app\classes\controller\comments.phpを修正する。

コメント追加後の遷移先を変更する。

55行目を以下のコードに修正して保存します。

f:id:froidebooks:20160526180341p:plain

 

そして、再登録してみましょう。

f:id:froidebooks:20160526180407p:plain

 

Saveボタンをクリックして登録します。

f:id:froidebooks:20160526180433p:plain

ちゃんとコメントの追加画面に戻りました。

 

commentsテーブルに登録されているかphpMyAdminで確認してみます。

f:id:froidebooks:20160526180608p:plain

 

できてますね!

 

それと、上でも書いていますが、今回はコメントの一覧ページを使用しません。

indexにアクセスされた時は、おねがいページに移動するようにしましょう。

 

 

5.C:\donichi\fuelphp-1.7.3\fuel\app\classes\controller\comments.phpを修正する。

comments/indexにアクセスされた時におねがいページに遷移するように変更する。

 

action_index()の7行目~9行目を削除し、下記のコードを7行目に追加してください。

f:id:froidebooks:20160526181109p:plain

 

http://localhost:8000/commentsにアクセスして、

おねがいページが表示されれば大丈夫です。

 

さて、今回は長くなりましたが、このへんで終了したいと思います。

 

コメントの追加機能は次で終わりですー

次回は、コメントの追加画面に

登録されているコメントの一覧を表示したいと思いますー

 

それでは、また次回~(*´∇`)ノシ

おねがいページにコメント機能を追加してみよう! その3

たか編

 こんにちは!

 

前回、前々回と

土日でわかるPHPプログラミング教室で作った社内連絡アプリに

コメント機能を追加するべく頑張ってきました。

 

そして、今回もその続きです。

 

では、さっそくやっていきましょー!

 

前回はリレーションの設定をしました。

今回は、

・Commentボタンの追加

・コメント追加画面におねがい情報を表示

をしてみますー

 

 

● 作った土台を修正して、要件にあったコメント追加機能にする。

 

1.おねがいページにCommentボタンを追加します。

C:\donichi\fuelphp-1.7.3\fuel\app\views\request\index.php

25~28行目と38行目のコードを追加します。

 

前回書いていませんでしたが、

Commentボタンに追加されたコメントの件数も表示したいと思います。

なので、25~28行目はコメントの件数を取得する処理を入れます。

f:id:froidebooks:20160525174900p:plain

 

 

38行目のコードでCommentボタンを追加します。

改行はせずに一行で書いてくださいー

f:id:froidebooks:20160525174746p:plain

 

コメントボタンが追加されているか確認します。

http://localhost:8000/requestを開きます。

f:id:froidebooks:20160525175118p:plain

青いCommentボタンが追加できましたよ!!

Commentボタンをクリックすると・・・・・

f:id:froidebooks:20160525175222p:plain

コメントの追加画面がでましたね!

次いきましょー!

 

2.コメントの追加画面を修正する。

その1でも書きましたが、追加画面は下記のようにしたいと思います。

 

・コメントするおねがい情報を表示。

・コメントの一覧を表示。

☆投稿者名の入力フォーム。

☆コメントを追加する入力フォーム。

☆「Save」ボタンでコメントを追加する。

 

☆のところは土台を作った時にできているところです。

 

文章では伝わりにくいですよね・・・・

 

(・∀・)つ 完成イメージはこんな感じです

f:id:froidebooks:20160526164819p:plain

 

まずは、おねがい情報を表示させてみましょう。

 

C:\donichi\fuelphp-1.7.3\fuel\app\classes\controller\comments.php

action_create()を修正します。

 

28行目~37行目を下記のように修正します。

f:id:froidebooks:20160526170050p:plain

 

そして、69行目を下記のように修正します。

f:id:froidebooks:20160526165620p:plain

 

28行目の引数は、request_idがセットされるようになっています。

おねがいページからCommentボタンをクリックして、

コメントの追加画面に移動しました。

その時のURLに2ってついてましたよね?

クリックしたおねがい情報によって数字は変わりますが・・・

 

f:id:froidebooks:20160526170414p:plain

 

これがクリックしたおねがい情報のrequest_idなので、

action_createの処理にきたときの引数にセットされます。

 

30行目~37行目はrequest_idがセットされていなかったり、

データベースに存在しないidだったりした時には、

おねがいページにリダイレクトさせたいのでこの処理を入れています。

 

ちょっと試してみましょう。

存在しないidを入れてアクセスするとおねがいページに飛ばされるはずです。

f:id:froidebooks:20160526170949p:plain

ちゃんとおねがいページに移動しました!

 

69行目については、おねがい情報をViewから取得できるようにセットしています。

 

次はViewでおねがい情報を取得して表示してみたいと思います。

えーと、71行目にView::forge('comments/create');ってあるから

view\comments\create.phpを開きましょう。

 

f:id:froidebooks:20160526171238p:plain

 

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」と「投稿日時」も表示してみます。

f:id:froidebooks:20160526172355p:plain

 

おねがいページからCommentボタンをクリックして表示を確認してみましょう。

f:id:froidebooks:20160526172448p:plain

 

 

表示できました!!∩(´∀`)∩ワァイ♪

 

今日はここまでにしたいと思います。

次回は、コメントの登録のところをする予定ですー

 

また次回~(*´∇`)ノシ

 

おねがいページにコメント機能を追加してみよう! その2

たか編

みなさん、こんにちは!

 

さて、今日は早速前回の続きをしちゃいましょう!

 

前回はoil g scaffoldコマンドで土台を作って

oil r migrateコマンドでテーブルを作成するところまでしましたね!

今回からその土台を変更していきたいと思います。

 

えーと、

まずは、コメントの追加ページを変更する前にリレーション設定をします。

 

リレーションというのは、

データベース内の複数のテーブルを相互に関連付けて、

簡単に参照を行えるようにしたり、

変なデータが入ったりしないようにすることみたいです。

 

oil r migrateコマンドで作成したcommentsテーブルに

request_idというフィールドがあります。・・・・たぶん\(^0^)/

 

まだ確認してなかったので、確認しましょう。

phpMyAdminにログインして、

左側のツリーからfuelphpの「+」をクリックすると

データベース内のテーブルが表示されます。

f:id:froidebooks:20160525154714p:plain

 

そして、commentsテーブルのリンクをクリックして、

構造タブを開いてみてください。

f:id:froidebooks:20160525154752p:plain

上から4つ目にありますね。

このrequest_idでどのおねがい情報のコメントなのかわかりますね。

 

このrequest_idに存在しないおねがい情報のidが入っていたら

おかしいことになってしまうので、

そういうことがないようにリレーション設定をするわけですね。

 

ではコードを書いてみます。

 

記述の方法はFuelphpの日本語ドキュメントを参考にして進めます。

http://fuelphp.jp/docs/1.7/packages/orm/relations/intro.html

 

● RequestテーブルとCommentテーブルにリレーション設定する。

 

1.C:\donichi\fuelphp-1.7.3\fuel\app\classes\model\request.phpに34行目~40行目のコードを追加する。

f:id:froidebooks:20160525155521p:plain

 

2.C:\donichi\fuelphp-1.7.3\fuel\app\classes\model\comment.phpに36行目~44行目のコードを追加する。

f:id:froidebooks:20160525155701p:plain

 

これでリレーションの設定は終わりです。

 

・・・・・なんか疲れましたね\(^0^)/

 

ほとんど進んでない気がしますが、今日はここまでです。

 

続きは次回~(*´∇`)ノシ

 

おねがいページにコメント機能を追加してみよう! その1

たか編

こんにちは!

 

いつの間にか5月も半ば・・・・

 連休は終わったし、梅雨になるし、

 少しブルーな気分になってしまいますよね・・・(-д-;)

 

モチベーションを無理やり上げよう!ということで、

 今回から数回に分けて書籍の社内連絡アプリ「社絡」に

 コメント機能を追加してみたいと思います。

 

 では、さっそく始めましょう!

 

 

えーと・・・・・・なにからしよう?

 

_〆(-∧-;)ん~と・・・

 

とりあえず何をしたいのか整理してみたいと思います。

 

何をしたいのか?

 書籍で作ったおねがいページの投稿にコメントが追加できるようにしたい!

 

どんなふうに追加するか?

 おねがいページのDeleteボタンの横に「Comment」ボタンを追加する。

 Commentボタンをクリックするとコメント追加ページに移動する。

 

追加ページの内容は?

 コメントするおねがいの内容を表示。

 コメントの一覧を表示。

 投稿者名の入力フォーム。

 コメントを追加する入力フォーム。

 「Save」ボタンでコメントを追加する。

 

という感じで作りたいと思います。

 

よし!

とりあえず、書籍のおねがいページを作った時と同じ感じで作ればできそうな気がしてきました。

 

まずは書籍と同じようにoil g scaffoldコマンドで土台を作りたいと思います。

 

● scaffoldを使って、土台を作る

 1.PuTTYを起動して、VirtualBox(仮想環境)内のCentOSにログイン。

2.cdコマンドでカレントディレクトリをfuelphpに移動。

f:id:froidebooks:20160517165207p:plain

 

3.oil g scaffoldコマンドで基本的なWebアプリケーションに必要なプログラムとマイグレーションファイルを自動生成する。

 

下記のコマンドを入力します。

oil g scaffold Comments user_name:string comment:text request_id:integer

 

上手くいったみたいですね!

f:id:froidebooks:20160517165437p:plain

 

4.oil r migrateコマンドで、マイグレーションファイルの内容をデータベースに反映させ、comment情報を管理するテーブルを作成する。

 

これも書籍通りですね。

下記のコマンドを入力します。

oil r migrate

 

成功しました。

f:id:froidebooks:20160517165512p:plain

 

5.ブラウザのアドレスに「http://localhost:8000/comments」と入力し、下記の画面が表示されることを確認する。

 

あ!表示されましたね!o(^∇^)oワーイ♪

f:id:froidebooks:20160517165535p:plain

 

 

とりあえず、今日はここまでにしたいと思います。

 

ほとんど復習でしたね。

 

続きはまた次回~(*´∇`)ノシ

 

 

土日でわかるPHPプログラミング教室のおさらい

ひよこ編

こんにちは!

 

前回は無事?にherokuを使ってWebアプリを公開できました。

 

やっとたかにはなれたけど・・・・

 

やはり大空は厳しいです・・・・

 

(*´Д`)=3ハァ・・・、ひよこに戻りたい・・・

 

ということで!

 

「土日でわかるPHPプログラミング教室」をちょっとおさらいしましょう!

 

今回は、よくあるお問い合わせ内容に沿った記事を書きたいと思います。

 

やっぱり一番多いのはvagrant upがうまくいかない!というお問い合わせです。

 

私も違うパソコンでしてみるとうまくいかないことがありました。

 

ググって書いてある通りにしたら動いたけど・・・・

 

なんかよくわかんない\(^0^)/

 

そもそもvagrant upした時にはなにがどうなってるの?

 

書籍をおさらいしながら、

 

vagrant upまでの環境構築の流れをちょっと詳しく調べてみたいと思います。

 

 

まずVagrantについて。

 

Vagrant

OS、データベース、Webサーバーなどがきちんと動き、かつ、すぐにWebアプリが開発できる環境を、VirtualBox上に構築するアプリ。

(土日でわかるPHPプログラミング教室P22参照)

 

そして次に環境を作る時に使ったGitについて。

 

●Git

インターネット上からOSやデータベース、WebサーバーなどのWebアプリの開発環境を構築するために必要なアプリなどを取得するアプリ。

(土日でわかるPHPプログラミング教室P22参照)

 

なるほど( ..)φメモメモ

 

 

書籍の51ページからの流れでいくと

 

1.git cloneコマンドでインターネット上から必要なアプリを取ってくる。

  

 書籍では↓のようになっていますね。

f:id:froidebooks:20160412144154p:plain

  ここで入力した内容について調べてみました。

 

 --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はコピーしてくる時のディレクトリ名を指定しているだけです。

 

 

2.cdコマンドで先ほどコピーしたvagrantディレクトリに移動します。

 

 これは書籍通りですね。

 

 

3.vagrant upコマンドでVirtualBox上に環境を構築します。

 

 書籍にも書いてありますが、

 

 1回目のvagrant upした時と2回目以降はちょっと違います。

 

 1回目:環境構築→Vagrantの起動

 2回目:Vagrantの起動

 

 となるので、1回目は時間がかかるんですね。

  

 先程git cloneでローカルにコピーしてきたファイルが色々あると思いますが、

 

f:id:froidebooks:20160412145454p:plain

▲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行目を下記のように修正します。

前後は省略しますが…

f:id:froidebooks:20160308135132p:plain

※環境によって変わります。

次はC:\donichi\fuelphp-1.7.3のcomposer.lockの561行目を下記のように修正します。

こちらも前後省略します。

f:id:froidebooks:20160308140816p:plain

※環境によって変わります。

 今度はC:\donichi\fuelphp-1.7.3\fuel\app\viewsのtemplate.phpの6~7行目を下記のように修正します。

f:id:froidebooks:20160308155235p:plain

修正し保存したら、C;\donichi\fuelphp-1.7.3のcomposer.pharを削除します。

ここまで終わったらコマンドプロンプトにて下記のコマンドを実行します。

※以降、環境によって実行結果は変わります。

f:id:froidebooks:20160308160809p:plain

 ここまでで準備おわりです(^^)

 

■herokuにアップする

初めにコマンドプロンプトにて下記のコマンドを実行します。

コマンド:heroku create donichi --buildpack heroku/php

してみましたが、失敗しました。笑

実行結果

f:id:froidebooks:20160308162843p:plain

名前が使われているみたいなので少し変更して実行。

実行結果

f:id:froidebooks:20160308162620p:plain

成功\(^^)/

次はこのコマンドです。

コマンド:git init

実行結果

f:id:froidebooks:20160308163821p:plain

今度はこのコマンドです。

コマンド:heroku git:remote -a (最初のコマンドで入力した名前)

実行結果

f:id:froidebooks:20160308164104p:plain

 次はこのコマンドです。

コマンド:git add .

実行したらまたもや失敗(+_+)

f:id:froidebooks:20160308165347p:plain

 これがさらに下に続きました。

ググってみるとGitが改行コードをCRLFへ変更しようとするみたい。

ということでこのコマンド

コマンド:git config --global core.autoCRLF false

を実行し再度git add .を実行したら成功しました!

 

 次はこのコマンド

コマンド:git commit -am"最初のコミット"

コマンド:git pusu heroku master

実行結果

f:id:froidebooks:20160313215841p:plain

 ここまできたらコマンド:heroku openを実行します。

するとブラウザに

f:id:froidebooks:20160313220203p:plain

こうなりました!やっとデプロイできました♪

でもこのままだとRequestを押すとエラーになるので

以下の操作をします。

 

■データベースの準備をする

まずはherokuのManage Account画面からBillingをクリックし、クレジットカード情報を入力します。

カード情報と国だけでOKでした(^^)

f:id:froidebooks:20160313225610p:plain

※ClearDBを使用するにはクレジットカード情報が必要ですが、無料で使用できます。

情報を登録した後下記のコマンドを実行します。

コマンド:heroku addons:add cleardb:ignite

f:id:froidebooks:20160313225850p:plain

 次はこのコマンドを実行します。

コマンド:heroku config

f:id:froidebooks:20160313231901p:plain

 今度はエクスプローラーからC:\donichi\fuelphp-1.7.3\fuel\app\config\developmentのdb.phpを開き、

ホスト名・データベース名・ユーザ名・パスを入力します。※同じ色のところに入力してください。

f:id:froidebooks:20160313232205p:plain

※ピンク・・・ホスト名 オレンジ・・データベース名

 薄黄色・・・ユーザ名 黄緑・・・・パス

 

次はコマンドプロンプトにて下記のコマンドを実行します。

コマンド:mysql --host=ホスト名 --user=ユーザー名 --password=パス データベース名

実行結果

f:id:froidebooks:20160317133313p:plain

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;

f:id:froidebooks:20160318012412p:plain

次は、コマンド:exit

コマンド:heroku open のコマンドを実行しブラウザで開きます。

表示された画面のRequestをクリックし、書籍「土日でわかるPHPプログラミング教室」で作成した通りに作動することを確認します。

 

以上で、herokuを使ってWebアプリを公開する、は終わりです。

グーグル先生にたくさんお世話になりましたww

無事(とは言い難いですが)できてよかったです^^;

 

それでは~(^o^)ノシ