:: ドットインストールのCakePHPレッスンのメモ書き

/ / WEB制作・開発

CakePHPを使ってサービスを作ろうと思いアイデアはあるしCakePHPも日常で使っているのだけれど、作るなら基本設計がしっかりしたきれいな構成で作りたかったので、今回もう一度基礎の再確認の意味でまたまたドットインストールさんのお世話になりました。動画内で説明されていた内容についてあとで振り返れるようにメモ。phpとmysqlの知識が必要です。過去の記事でも紹介しているので見てみてください。

:: ドットインストールのPHPレッスン基本編のメモ書き
:: ドットインストールのPHPレッスン応用編のメモ書き
:: phpmyadminを使ったMYSQLのSQL構文の入門編メモ書き 公式サイト APIリファレンス

※CakePHPのバージョンは2.6.4を使うため、ドットインストールさんのバージョンとは異なります。
※Modelは単数形、ControllerとViewは複数形(覚書)

PS. ドットインストールさんいつもありがとうございます!!

   

 

MVC

Model – データ
View – 見た目
Controller – かけはし

CoC
Convention over Configuration(設定より規約)

 

 

ディレクトリ構造

  150510_picture001

  • Config – アプリケーションの設定
  • Console
  • Controller – データの架け橋
  • Lib
  • Locale
  • Model – データベースへのアクセス
  • Plugin – debug kitとか
  • Test
  • tmp - 一時ファイルを保管
  • Vender
  • View – 見た目のファイルを保管 .ctp
  • webroot – css, Javascript、jpg、gifなど
  • index.php

※tmpフォルダは初期設定として書き込み権限を変える必要がある。

 

 

データベースの設定

MACのMAMP環境で、ターミナル経由でmysqlでコマンドを実行する。   ターミナルの実行

rootでログイン

パスワードを入力(MAMPのrootパスワード)後、接続完了。
※表示が「mysql>」になっていればOK。

データベースを作成。

 

ユーザーの設定をする (以下はrootユーザー)

********は任意のパスワード

 

データベースの設定ファイルを変更

/app/Config/database.phpを開く

********箇所は先ほど設定したログインユーザー名とパスワードを入力する

 

 

アプリケーションの開発範囲

ブログアプリを作るための機能要件、作成ファイル

開発内容

記事
– 一覧を表示
– 個別記事を表示
– 追加
– 編集
– 削除

具体的な開発ファイル

Model(Model/Post.php)
— mysql table

Controller(Controller/PostsController.php) ※複数形 Posts
– index – /cake_blog/
– view – /cake_blog/posts/view/(id)
– add
– edit
– delete

View(View/Posts/) ※複数形 Posts
– index.ctp
– view.ctp
– add.ctp
– edit.ctp

 

 

postsテーブルの作成

ターミナルで使うデータベースを設定

  テーブルの作成、テストデータの挿入

  テーブル、テストデータの確認

 

 

PostのModelを作る

Modelフォルダに「Post.php」を作る

Controllerフォルダに「PostsController.php」を作る

 

 

Scaffoldを使う

CakePHPであらかじめ用意されている、Controllerに1行追加するだけで超簡易版の管理画面できる機能。(初めて見た時は本当に感動しました。)

  アクセスすると管理画面が出来ている。

150510_picture002

 

 

記事の一覧を表示する

  PostsContollerにindexメソッドを追加

View直下に、Postsフォルダを作成。その中にindex.ctpファイルを作成

※debugで$postにセットされている値を表示。

150510_picture003

$Postに渡されている配列の中身が分かる

$postのtitleを表示させる

  以下のようにタイトルだけ表示される

150510_picture004

 

 

記事の一覧ページをトップ(cake_blog)でアクセスする設定

/app/Config/routes.phpを以下に変更する

ちなみに、headerとfooterのパーツ箇所はView/Layouts内で指定している 150510_picture005

 

 

タイトルを変更する

/View/Layouts/default.ctpを変更

 

/Controller/PostsController.phpに追加

 

 

find()を使いこなす

例えば、表示件数を2件にして並び順をmodifiedの降順にしてみる

その他にも公式サイトのDocumentation内で命令の詳細を確認することができる

 

 

個別記事の詳細を表示する

/Controller/PostsController.phpにviewを追加

 

/View/Posts/view.ctpを新しく作成

 

/View/Posts/index.ctpにリンクを追加

 

/View/Layouts/default.ctp内でheaderにホームへ戻るボタンを追加

 

 

記事を追加する

Controller/PostsControllerにaddを追加

 

VIew/Posts/add.ctpを作成

 

View/Posts/index.ctpにAdd Postのリンクを追加

  記事一覧に記事追加リンクを追加

150510_picture006

記事追加画面

150510_picture007

 

 

記事投稿のエラーチェック

Model/Post.phpで値が空かどうかをチェックする

 

 

jQueryを読み込む

/View/Layouts/default.ctpを変更

 

</body>直前にfadeOutの関数を記述

これで、メッセージが自動で消えるようになる。

 

 

記事の編集をする

/Controller/PostsController.phpに追加

 

View/Posts/edit.ctpを新たに作成

 

View/Posts/index.ctpのpostタイトルの横に表示されるように追加

編集ボタンが追加されて記事の編集が可能になった。

150510_picture008 

 

 

記事を削除する

/Controller/PostsController.phpに追加

 

View/Posts/index.ctpのpostタイトルの横に表示されるように追加

 

削除ボタンが追加され、押下すると確認ダイアログが表示される 150510_picture009

 

 

削除処理をAjax化する

先ほど書いた/Controller/PostsController.phpを修正

 

View/Posts/index.ctpの削除コード箇所を変更

 

View/Posts/index.ctpの一番下にjsonのファンクションコードを追加

 

View/Posts/index.ctpの<li>にidを付ける

 

 

コメント機能を実装

コメント – 一覧を表示 – 追加 – 削除 Model – mysql table – association 記事に対して複数コメントを持つ関係性を定義 Controller index add delete     テーブルを作成  

 

アソシエーションとは   Modelに$BelongsTo = “Post”;と、public $hasMany = “Comment”;とすることそれぞれが紐づく。  

 

150510_picture010

 

 

コメント追加・削除機能を実装

コメントの追加   コメント用のコントローラーを追加

 

以下のコメント投稿パーツを追加

150510_picture011

コメント枠が完成   コメントの削除   コントローラーで削除機能を追加

 

ビューで削除パーツを追加

以上になります。反省も兼ねて見てきましたが、知らないこともあるしもう一度しっかりと基礎を叩き込んでまずは1つのサービスを作ってみようかなと思います。

SNS SHARE

RELATED POSTS

LEAVE A REPLY