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

/ / WEB制作・開発

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

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

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

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

 

目次

 

1) 必要な用語
2) ディレクトリ構造
3) データベースの設定
4) アプリケーションの開発範囲
5) postsテーブルの作成
6) Postのモデルを作る
7) Scaffoldを使う
8) 記事の一覧を表示する
9) 記事の一覧ページをトップ(cake_blog)でアクセスする設定
10) タイトルを変更する
11) find()を使いこなす
12) 個別記事の詳細を表示する
13) 記事を追加する
14) 記事投稿のエラーチェック
15) jQueryを読み込む
16) 記事の編集をする
17) 記事を削除する
18) 削除処理をAjax化する
19) コメント機能を実装
20) コメント追加・削除機能を実装

 

 

必要な用語

 

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

LEAVE A REPLY