ajaxメモ

cakephp3でajaxの実装を行うのに苦労したのでメモ

  • 実装したいこと

クリックイベントからajaxを利用してactionを実行し、SQLを流したい。

【1】jqueryにクリックイベントを作る

$(function (){
//ここにJS読み込み時に実行させたいコードの内容を書き込む
	$('hoge').click(function(){
		//ここにクリック時した時に実行したいコードを書き込む
		$.ajax({
			//ajaxの実装
			url:"呼び出したいactionのURL指定",	//http://localhost/project/controller/action
			type:"get", //get 又はhost
			dataType:"json"
		}).done(function(data){
			//データ送信成功時の処理内容
			console.log(data); //F12のコンソールからログでデータ送受信できてるかが確認できる
		}).fail(function () {
			//データ送信失敗時の処理内容
			alert("fail");
        });
    });
});

【2】controller側にajaxから呼び出したい処理の記述を行う

<?php
public function hoge()
{
//今回は画面を新規に作らないのでオフにしておく
        $this->autoRender = false;
        if ($this->request->is('ajax')) {
            try {
                $data;
                //$dataにクエリビルダ実行結果を代入
                $this->set(compact('data'));
                $this->set('_serialize', ['data']);
            } catch (Exception $e) {
                $this->log('error');
            }
        }
}

イーガーロードを使用したクエリビルダでのテーブル結合

containを使用したクエリビルダーの実装に手間がかかったのでメモ

<?php
$query = $this->Patron->find()
            ->select(['Patron.number', 'Patron.id', 'Patron.password', 'Patron.username', 'Patron.email', 'Patron.deleted'])
            //結合するテーブルをcontain
            ->contain(['Children' => [
                //別テーブルのフィールドをselectする場合はfieldsの連想配列内で指定する。テーブル名から指定してあげないといけない
                'fields' => [
                    'Children.id', 'Children.username', 'Children.deleted', 'Children.patron_number'
                ]
            ], 'Children.ChildClass' => [
                'fields' => [
                    'ChildClass.class_name'
                ]
            ]])
            ->where(['Patron.number' => $this->request->getParam('id')]);
        $this->set('accountInfo', $query);
?>

cakephp3 linkでの画面遷移

<a href= "<?= $this->url->build(['action'=>'qaaResult'])?>" class="btn btn-danger">
     終了する
</a>

で実装できる

自作helperの実装

viewに重複のあるチンパンコード書きたくないよぉ…って時、
helperに記述してview側で呼び出すようにしたい。

  1. app/src/View/Helper にhelperを作る。
    作成ファイルはQaaHelper.phpで作成。

    <?php
    
    namespace App\View\Helper;
    use Cake\View\Helper;
    
    class QaaHelper extends Helper
    {
        //作りたいメソッド記入
        function viewTextImg()
        {
            //処理を記入
            print("helperできてるよ ルナだよ。");
        }
    }
    

  2. Controller側でhelperの宣言をしておく。

    <?php
    
    class StudentController extends AppController
    {
        public function initialize()
        {
            //helperの宣言 QaaHelperを指定したい場合、頭小文字でHelperを外した'qaa'を渡してやる
            $helpers = array('qaa');
            parent::initialize();
        }
    //省略

  3. viewでhelperを呼べるようになる。

    <?= $this -> qaa -> viewTextImg() ?>
    


ルナちゃんが呼び出される かわいい

・参考
okisanjp.hatenablog.jp

間違えてpushしてしまった!

  • SourceTreeを開く
  • 戻りたいブランチを右クリック
  • 現在のブランチをこのコミットまでをリセット(今回はmixed アップロードしたくないファイルをアップロードした)
  • ローカルは変更前まで移動
  • それをリモートに反映するためpush
  • (pushは強制pushを行った 間違えたpushに対してのcommitを打ち消してcomittするため)
  • force push はオプションのgit から操作可能にできる

安易なプッシュはやめようね!

routing あれこれ

/config/routes.php

<?php
$routes->connect
    //ルート プレースホルダー(:)URL部分のバリデーションができる
    ('/student/qaaQuestion/:question_num/:count',
    //コントローラーとアクションの指定
    ['controller' =>'Login', 'action' => 'index']);
    //バリデーションの指定 question_num は数字のみ受付 countは3桁までの数字のみを受け付ける
    ['question_num' => '\d+','count' => '\d{1,3}']
);
?>
  • qaa_select_genre.ctp
<?php
//フォーム生成時点でプレースホルダー部分の値を指定する
echo $this-> Form -> create('', ['type' => 'post',
    'url' => ['action' => 'qaaQuestion','question_num' => 1,'count' => 0 ]]);
?>

jqueryでチェックボックスのバリデーションを作る

  • sample.ctp
<?= $this -> Form -> create('',['type' => 'get','url' => ['action' => 'action']])?>
<?= $this -> Form -> checkbox("select.check1",array('class'=> 'select')) ?>りんご 
<?= $this -> Form -> checkbox("select.check2",array('class'=> 'select')) ?>バナナ 
<?= $this -> Form -> checkbox("select.check3",array('class'=> 'select')) ?>みかん
<?= $this -> Form -> button('submit',array('type' => 'submit')) ?>
<?= $this -> Form - > end(); ?>
  • sample.js
$(function() {
    "use strict";
    $('form').submit(function() {
        //少なくとも1つはチェックがあるかどうか 使いたいフォームのクラス名を指定
        if($('.select:checked').val() !== '1' ) {
            // 警告を出す
            window.alert('ジャンルを選択してください。');
            // 処理を中断 遷移しない
            return false;
        }
    //配列で取得する場合はつける
    }).get();
});

qiita.com