第6回rest勉強会アソシエーション編

CakePHPでデータ操作〜担当者アサイン機能の実装〜

AWS上で構築するRESTfulアプリ勉強会～Web開発ワークショップ～【第6回】

概要

概要1. アソシエーションとは 2. やりたいこと 3. 今回追加する機能

「アソシエーション」＝Model間の関連をマッピングしてくれる機能

要は、SQLを書かずに済ませて楽をする方法

SELECT User.id, User.username, User.password, User.name, TodoList.id, TodoList.todo, TodoList.status, TodoList.owner, TodoList.assignee FROM users AS User LEFT JOIN todo_lists AS TodoList ON (TodoList.owner = User.id)

楽をする＝SQLを書かずにコードで書く →CakePHPがよろしくやってくれる！

詳しくは後ほど！

概要1. アソシエーションとは 2. やりたいこと 3. 今回追加する機能

TODOリストアプリのマルチユーザ対応！

（しょぼいですけど…）

概要1. ログインとは 2. やりたいこと 3. 今回追加する機能

今回追加する機能

1. TODO追加時に担当者を指定する 2. 更新時担当者を変えられる 3. 担当者、オーナのみ○○出来る

担当者を指定

担当者を変える

担当者、オーナのみ○○出来る

担当またはオーナだけ操作可能

ワークショップ

本日のメニュー1. 事前準備 2. Lesson1 サーバサイド開発 3. Lesson1.5 アソシエーションの実験 4. Lesson2 クライアントサイド開発

事前準備

• gitのブランチを整える • テーブルに列を追加する

gitのブランチを整える

■masterブランチを前回の内容を終えた状態にする ■masterブランチを元に、今回の作業用である、「vol/06」ブランチを作成する

どう整えるのか

人によって手順が違います！（重要）■前回の内容を途中までやった方 ■前回の内容を完了した方 ■今回から参加の方

gitのブランチを整える

http://

goo.gl/WEHXqXジーオーオー.ジーエル/ ダブリューイーエイチエックスキューエックス

ここに詳しく書いております！

テーブルに列を追加する

■phpMyAdminを使用する

TODO一覧登録用テーブル　「todo_lists」に列を追加

■追加項目は、•owner(オーナ) •assignee(担当者)

phpMyAdmin

http://(PublicIP)/phpMyAdmin

・修正後テーブル（詳しくはQiita資料で！）

アソシエーションを実装！

Lesson1 　サーバサイド開発

Lesson1 サーバサイド開発■今回使用するアソシエーション

belongsTo

Lesson1 サーバサイド開発■他は？•hasOne •hasMany •hasAndBelongsToMany


Lesson1.5 で実験します！


今回はパス！

Lesson1.5 で実験します！

Lesson1 サーバサイド開発■belongsTo

idtodoownerassignee

todo_listsid

usernamename

password

users属している (belongsTo)

public $belongsTo = array ( 'Owner' => array ( 'className' => 'User', 'foreignKey' => 'owner', ), 'Assignee' => array ( 'className' => 'User', 'foreignKey' => 'assignee' ) );

Lesson1 サーバサイド開発■belongsTo・TodoList.php

Lesson1.5 　アソシエーションの実験

•hasOne(1:1) •hasMany(1:n)

■hasOne

idtodoownerassignee

todo_listsid

usernamename

password

users１つ持つ (hasOne)

Lesson1.5 アソシエーションの実験

※ホントは1:nですが無理にやってみます！

■hasOne

idtodoownerassignee

todo_listsid

usernamename

password

users１つ持つ (hasOne)


※ホントは1:nですが無理にやってみます！

(ウソ)

public $hasOne = array ( 'TodoList' => array ( 'className' => 'TodoList', 'foreignKey' => 'owner' ) );

■hasOne・User.php


■hasMany

idtodoownerassignee

todo_listsid

usernamename

password

usersいくつか持つ (hasMany)


public $hasMany = array ( 'TodoList' => array ( 'className' => 'TodoList', 'foreignKey' => 'owner' ) );

■hasMany・User.php


public $hasMany = array ( 'TodoList' => array ( 'className' => 'TodoList', 'foreignKey' => 'owner' ) );

■hasMany・User.php


変わるのはここだけ！

詳しい方法はQiitaの資料で！


Lesson2に進む前に、ソースを元に戻しましょう！


なんやかんや実装！

Lesson2 　クライアントサイド開発

前回までの内容でほぼいけるはず！※少しだけポイント紹介

Lesson2 クライアントサイド開発

■ユーザ一覧情報の取得と表示Lesson2 クライアントサイド開発

•ユーザ一覧情報を取得・todo-layout-view.js

・todo-composite-view.js

•ユーザ一覧情報を表示

取得したユーザ情報

■ユーザ一覧情報の取得と表示Lesson2 クライアントサイド開発

•ユーザ一覧情報を取得・todo-layout-view.js


•ユーザ一覧情報を表示

取得したユーザ情報ビュー生成時に渡す

onRender : function() { this.userCollection = new UserCollection(); this.listenTo(this.userCollection,

'reset', this.onLoadUsers, this); this.userCollection.fetch({reset : true}); },

■ユーザ一覧情報の取得Lesson2 クライアントサイド開発

ビューの生成前に取得

・todo-layout-view.js

showTodoList : function(todoCollection){ this.listRegion.show( new TodoCompositeView({ collection : todoCollection, userList : this.userCollection.models })); },

■ユーザ一覧情報の取得Lesson2 クライアントサイド開発

ビューの生成時に取得済みデータを渡す

・todo-layout-view.js

//ユーザ一覧を表示 showUserList : function($list, userList){ $.each(userList, function(index, userModel) { $list.append( "<option value='" + userModel.attributes.id + "'>" + userModel.attributes.name + "</option>"); }); },

■ユーザ一覧の表示Lesson2 クライアントサイド開発

ループ回してタグ挿入


マニュアル(Qiita)

http:// goo.gl/sIvvDGジーオーオー.ジーエル/ エスアイブイブイディージー

マニュアル(Qiita)

http:// goo.gl/sIvvDGジーオーオー.ジーエル/ エスアイブイブイディージー

はじめましょう！

絞込み1(チェックボックス) • 自分がオーナ • 自分が担当絞込2(リストボックス) • 全て • 未完了のみ • 完了済みのみ

🍻飲みDev🍕 テーマリスト1

hasAndBelongsToManyの実験🍻飲みDev🍕 テーマリスト2

idtodoownerassignee

todo_listsid

username

name

password

users (owner)

id

username

name

password

users (assignee)

第6回rest勉強会 アソシエーション編

Documents

第6回rest勉強会アソシエーション編