Todo チェック情報のDB反映

Todo チェック情報のDB反映

#11 チェック機能を実装してみよう (2)
http://dotinstall.com/lessons/todo_app_php_v2/9311
を元に
チェック情報をDBに反映させる

まず、どの要素なのか特定するために id を取得したいので

var id =$(this).parent().data('id');

現在の要素は

<input type="checkbox" class="checktask" <?php if($task['type']=="done"){
 echo "checked"; }?>>

なので
この input の親要素、つまり1つ↑の要素なので

<li id="task_<?php echo h($task['id']); ?>" data-id="<?php echo h($task['id']); ?>">

ということになり li 要素の id となる

次にチェックボックスの状態を取得したいので

var title = $(this).next();

next() は、現在の要素の次の要素となるので
現在の input の次の

<span class="<?php echo h($task['type']); ?>"><?php echo h($task['title']); ?></span>

を指す

これで、
var title へ
notyet
done
delete
のどれかの状態が格納されることになる

そして、次に Ajax 処理になる

        $>post('_ajax_check_task.php',{id:id},function(rs){
        
        });

実際の処理をするのは
_ajax_check_task.php

渡すのは id
成功したときの処理は

function(rs){
}

の中に書く

まず、成功したときの処理を記述

	if(title.hasClass('done')){
                title.removeClass('done');
          }else{
                title.addClass('done');
          }

これは
.removeClass() で class=”done” を消して
.addClass() で class=”done” をつけている

こうすることで
チェックボックスがついているなら
class=”done” になり
ついていないなら、このクラスがついていないことになる

removeClass() については
http://semooh.jp/jquery/api/attributes/removeClass/class/

addClass() については
http://semooh.jp/jquery/api/attributes/addClass/class/
のリファレンスを参考にする

ここまでできたら
_ajax_check_task.php
を作成する

違いは sql の内容なので
cp _ajax_delete_task.php _ajax_check_task.php
でファイルをコピーして編集する

$sql ="update tasks set type = 'delete',modified = now() where id = :id";

の部分を
$sql =”update tasks set type = if(type=’done’, ‘notyet’, ‘done’) ,modified = now() where id = :id”;
とする

mysql では if 文による分岐ができるため
type=’done’ なら
notyet にして
そうでないのなら
done にするという判定処理ができる

その部分が

if(type='done', 'notyet', 'done') 

使い慣れた言語で書き換えてみると

if(type=='done'){
  type="notyet";
}else {
  type="done";
}

とおなじ意味になる

これは三項演算子をやったことがあると
イメージしやすいかもしれない

ここまでできたら
chrome で検証

チェックボックスのチェックを入れたり消したりして
無事に反映されれば成功

もし動作しないのなら
Ctrl + shift +i
で developer tools を起動して
console でエラーがでていないか確認

ToDo チェック機能の実装

ToDo チェック機能の実装

#10 チェック機能を実装してみよう (1)
http://dotinstall.com/lessons/todo_app_php_v2/9310
を元にチェック機能を実装する

チェックボタンをつけるので、
index.php へチェックボックスを追加する

<li id="task_<?php echo h($task['id']); ?>" data-id="<?php echo h($task['id']); ?>">

の下に
チェックボックスを追加するため

<input type="checkbox" class="checktask" <?php if($task['type']=="done"){
 echo "checked"; }?>>

を追加する

intput type=”checkbox”
でチェックボックスを指定

if($task['type']=="done"

は、フラグが done つまり実行済みになっているなら

echo "checked";

でチェックボックスへチェックを入れている

また、チェック済みなら
タイトルの文章に打ち消しなどの表示効果でアクションをつけるようにする

このタイトル表示は

<?php echo h($task['title']); ?>

なのでこれを書き換える

まず span 要素をつけておく

<span class="<?php echo h($task['type']); ?>"><?php echo h($task['title']); ?></span>

これで、span 要素のクラス名が
done
delete
notyet
のどれかになるので

この type が done 、つまり実行済みで
チェックボックスにチェックが入っているなら 
span 要素へ
CSSを適用するようにする

.done{
                        text-decoration: line-through;
                        color:gray;
                }

text-decoration:は
打ち消し線とか
下線を引いたりできる

詳しい解説は
http://www.htmq.com/style/text-decoration.shtml
のリファレンスを参考にする

今回、指定した
line-through は打ち消し線

そしてチェックボックスをクリックしたときの動作をつくる
これは jQuery で実装する

  $(document).on('click','.checktask',function(){

  });

というようにする
on() を使っているのは
PHP で動的に追加された要素に対する処理のため
引数の意味は
click が行う動作
.checktask が class=”checktask”
function() がそのときに行う処理
となる

on()
bind()
live()
などの違いは
http://tacamy.hatenablog.com/entry/2013/03/03/213113
を参考に

ToDo 削除をDBへ反映

ToDo 削除をDBへ反映

#09 Todo更新情報をDBへ反映を削除してみよう (3)
http://dotinstall.com/lessons/todo_app_php_v2/9309
を参考に
Todo更新情報をDBへ反映 の削除情報をDBへ反映する

vim _ajax_delete_task.php
でファイルを開いて編集していく

まず

require_once('config.php');
require_once('functions.php');

で設定ファイルを読み込む

次に、functions.php で設定した
connectDb() でDB接続

次にsql を変数に格納
削除とはいっても
delete で実際に消すのではなく
フラグを変更することで、消したという判定にしている

$sql ="update tasks set type = 'delete',modified = now(), where id = :id";

modifiedは変更した時間なので
now() で現在時刻を指定

このsql を実行するため

$stmt = $dbh->prepare($sql);
$stmt->execute(array(":id"=> (int)$_POST['id']));

今回は、POST での値のため
id の配列指定は

(int)$_POST['id']

としている

(int) にしているのは、整数でないとダメなので
整数型に強制変換している

この強制変換はキャストといって
java とか C とかでも使われる

ここまでできたら
chrome をつかって検証

もし削除で消して、リロードして消えていないのなら
DB接続関連がおかしいので
_ajax_delete_task.php
のソースを確認する

残念ながら developer tools で
このエラーは発見できなかった

調べた結果

$sql ="update tasks set type = 'delete',modified = now(), where id = :id";

と、
now() のあとに , がついていたのが原因

これを修正したら、正常に稼働した

DBの中身を確認するため
mysql -u root -p
でログインして
use dotinstall
でDB選択

elect * from tasks;
で確認すると
type が delete
となっているのが確認できる

Todo削除リンククリック時の挙動設定

Todo削除リンククリック時の挙動設定

#08 Todo更新情報をDBへ反映を削除してみよう (2)
http://dotinstall.com/lessons/todo_app_php_v2/9308
を元に
削除リンククリック時の挙動を作成

編集するのは index.php

削除するには li要素の id が必要になるので

<?php foreach($tasks as $task) :?>
<li>

の li へ id をつける

<li id="task_<?php echo h($task['id']); ?>" data-id="<?php echo h($task['id']); ?>">

とすることで
foreach() でループしたぶんだけ idが割り当てられる

なお config.php で h() を作成して
出力される文字を無害化するのを忘れずに

id="task_<?php echo h($task['id']); ?>"


task_数値

data-id="<?php echo h($task['id']); ?>"


数値

というように出力される

これで

        if(confirm('本当に削除しますか?')){
                        
        }


この割り当てた id を使って id を引っ張ってくる

var id =$(this).parent().data('id');

とする

$(this)
は、現在の要素、つまり
今回なら

<span class="delete-task">[削除]</span>

を意味する

.parent() は、その親要素という意味なので

<span>

の親要素は

<li>

となる

.parent().data('id')

なので、
li 要素の id ということで

 id="task_<?php echo h($task['id']); ?>"

になる

 data-id="<?php echo h($task['id']); ?>"

ではないので注意

.parent() については
http://www.jquerystudy.info/reference/traversing/parent.html
のリファレンスを参考にする

構文は .parent(セレクタ)
セレクタは、html の要素
今回から li になっている

.data() については
http://semooh.jp/jquery/api/internals/jQuery.data/elem,+name/
のリファレンスを参考に
.data() は指定された名前の値をかえす

今回なら.data(‘id’)なので
id=”” の部分の値をかえす

次にDBで削除処理する Ajax ファイルを作っていく

$.post('_ajax_delete_task.php',{
                id:id,
          },function(rs){
                $('#task_'+id).fadeOut(800);
          });

.post() は
POSTでページを読み込む関数
http://semooh.jp/jquery/api/ajax/jQuery.post/+url%2C+data%2C+callback%2C+type+/
のリファレンスを参考にする

引数の意味は
‘_ajax_delete_task.php’
が読み込むURL

id;id
が、キーと値の組み合わせ

function(rs){
}
が通信成功のときの処理になる

このときに渡すのは 該当する taskのid になるので
id:id,

終わったときの処理は[/php]
function(rs){

}[/php]
の中に書く 

このときの処理は

$('#task_'+id).fadeOut(800);

で、該当する id の li 要素を
.fadeOut() を使って
指定したミリ秒でフェードアウトする
今回なら 0.8秒になる

$(‘#task_’+id)は

<li id="task_<?php echo h($task['id']); ?>" data-id="<?php echo h($task['id']); ?>">

のこと

とりあえず
touch _ajax_delete_task.php
でファイルだけつくって
実行

chrome の developer tools で確認して
エラーがないけどうまく起動しないため
vim index.php_post
でファイルを作成して
ソースをコピペ
diff -w index.php index.php_post
で違いを比較したところ

  $(document).on('click','.delete-task',function(){

  $(document).on('cluck','delete-task',function(){

というように
click が cluck だったり
.delete-task の . がなかったりしてうまくいかなかた
これを修正して再度実行すると成功した