サイト内お気に入り機能をCakePHPで作る。その２ - 新米SE、マーケティングを学ぶの巻

前回、見た目の部分だけ行いました。
サイト内お気に入り機能をCakePHPで作る。その１ - 新米SE、マーケティングを学ぶの巻

今回は実際にボタンをクリックした時に、お気に入り情報をデータベースに登録し、次回アクセスの際にもお気に入り情報が反映されている、という状態に出来るようにしたいと思います。

また、本来はお気に入り情報はユーザごとに管理されるべきものですが、ここではひとまずユーザは一人と想定して行います。
では実装していきましょう！

ButtonsController

public function index(){
　　  //DB上のボタンを全件取得
	$data = $this->Button->find('all');
	$this->set(compact('data'));
}

こちらは前回と変わりありません。

index.ctp

//ボタンの一覧表示
for($i = 0; $i < count($data); $i++){
    echo "<p><button class='favoButton' data-num=".$data[$i]['Button']['id'];
    if(isset($data[$i]['Favo'][0]['condition']) && $data[$i]['Favo'][0]['condition'] != false){
        echo " data-condition=".$data[$i]['Favo'][0]['condition']." style='background-color: #FF0;'";
    }
    echo " >☆</button></p>";
 }

前回と違うのは、if文の箇所です。
各ボタンが既に登録されているかをチェックし、登録されていれば初期状態で背景を黄色にしています。

Javascript

$(function(){
  $(".favoButton").click(function() {
    var button = this;
    //お気に入りボタンのdata-conditionで制御
    if($(this).data('condition') == false || $(this).data('condition') === undefined ){

      //お気に入り登録
      $.ajax({
        url: '../Favos/favo',
        type: 'POST',
        dataType: 'json',
        data: {num: $(button).data("num"),condition: false},
        async : false,
      })
      .done(function(data, textStatus, jqXHR) {
        //登録成功
        if(data.result == true){
          //お気に入りボタンの色を黄色に
          $(button).css('background-color', '#FF0');
          //お気に入りボタン状態の更新
          $(button).data('condition',true);
        }
      })
      .fail(function(data) {
        console.log("error");
        console.log(data.num);
      });
      
    }

    else if($(this).data('condition') == true){

      //お気に入り登録解除
      $.ajax({
        url: '../Favos/favo',
        type: 'POST',
        dataType: 'json',
        data: {num: $(button).data("num"),condition: $(button).data('condition')},
        async : false,
      })
      .done(function(data, textStatus, jqXHR) {
        //登録解除成功
        if(data.result == true){
          //背景色を解除
          $(button).css('background-color', '');
          //お気に入りボタン状態の更新
          $(button).data('condition',false);
        }
      })
      .fail(function(data) {
        console.log("error");
        console.log(data.condition);
      });
    }
  });
});

Javascriptに関しては以前こちらで書きました。
サイト内お気に入り登録機能を作る。その2 - 新米SE、マーケティングを学ぶの巻

こちらがajax通信先です。

FavosController

//お気に入り登録の登録と解除
public function favo() {
	//viewを非表示
	$this->autoRender = false;

	//ajaxじゃなかったら不正アクセス
	if ($this->request->is('ajax')) {
		//パラメータの取得
		$buttonId = $this -> request -> data['num'];
		$condition = $this -> request -> data['condition'];

                //特定のユーザを想定
		$userId = 1;

		//DBにデータがあるかチェック
		$data = $this->Favo->find('first',array('conditions' =>
			array('button_id'=>$buttonId,'user_id'=>$userId), 'recursive' => -1 ));

		//DBにデータが存在する
		if(count($data) > 0){
			//conditionをもとにactiveを制御
			$data['Favo']['condition'] = $this->_activeCheck($condition);

			//更新する
			$this->Favo->id = $data['Favo']['id'];
			if($this->Favo->save($data)){
				$result = true;
			}
			else{
				$result = false;
			}
		}
		//DBにデータが存在しない
		else{
			//conditionをもとにactiveを制御
			$data['Favo']['condition'] = $this->_activeCheck($condition);

			//新規登録
			$data['Favo']['button_id'] = $buttonId;
			$data['Favo']['user_id'] = $userId;
			$this->Favo->create();
			if ($this->Favo->save($data)) {
				$result = true;
			}
			else{
				$result = false;
			}
		}

		$val = array('result' => $result, 'num' => $buttonId, 'condition' => $condition);
	}
	else{
		//ajaxじゃなかったら不正アクセス
		$val = array('result' => false);
	}

 	return json_encode($val);
}

public function _activeCheck($condition){
	//conditionをもとにactiveを制御
	if($condition == false || $condition == "false"){
		return true;
	}
	else{
		return false;
	}
}

大まかな流れとしては、押されたボタンとユーザのIDで過去にお気に入り登録したかを検索し、
していればそれを更新、していなければ新しくテーブルに追加しています。

お気に入りボタンを押した後、ページを更新してみて下さい。
登録したお気に入りボタンは、更新後も黄色く光ったままになります！

次回は複数ユーザに対応させようと思います！