2013年10月 – Linux & Android Dialy

todo 削除リンク作成とクリック時の処理

#07 Todo更新情報をDBへ反映を削除してみよう (1)
http://dotinstall.com/lessons/todo_app_php_v2/9307
を参考に、Todo更新情報をDBへ反映を削除するリンクを作って
クリックしたときの処理を作成する

また
今後多用する jQuery の .on() については
http://www.jquerystudy.info/reference/events/on.html
の解説を参考にするとわかりやすい

昔のソースだと
.bind() でかかれているのもあるけど
この .bind() の場合
動的に追加した要素にイベントを設定できない

ではまずはリンクを作成したいので
index.phpを編集する
[pho]
[/pho]
の下に
span 要素を追加する
[pho]
[削除][/pho]

span要素は、それ自体は何の意味ももたないけど
CSSとか java script などと合わせることで
いろいろ使える
http://www.tohoho-web.com/html/span.htm
のリファレンスが参考になる

そして、このspan をCSS適用でリンクボタンのように
見せる

<style>
        .delete-taks{
                cursor: pointer;
                color: blue;
        }
</style>

とする

1	`curosr :pointer`

とすると、リンクボタンのようになる

.delete-task は id=”delete-task” という意味

今回 span 要素を使っているのは、リンクするためではなく、クリックするのをつくるため

次に

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

をクリックしたときのQuery で書く

<script>
$(function(){
 
});
</script>

jQuery を扱うにはこの中へ書いていく

クリックしたときの処理をするには
.on() を使う

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

on() の引数は
動作 =クリックなので click
対象 = id=”delete-task”のところ
行う処理 = function(){} の中身
となる

で行う処理は

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

というように
確認ダイアログを confirm() で出している

confirm() については
http://www.htmq.com/js/window_confirm.shtml
のリファレンスを参考にする

DBのTODOデータをHTMLへ反映

#06 Todo更新情報をDBへ反映の一覧を表示してみよう (2)
http://dotinstall.com/lessons/todo_app_php_v2/9306
を元に
jQuery/jQuery UIを読み込んで
DBのToDo データをHTMLへ反映する

PHPでは、HTMLと組み合わせて使うけど
他の言語と比べて
for とか if の条件分岐などの制御が少しわかりにくい
これは HTML の中でPHPのソースが混じるのが原因
制御構造に関する構文について
http://www.php.net/manual/ja/control-structures.alternative-syntax.php
を参考にしておくとわかりやすくなる

これらを参考にしながら
まずは index.php へ
jQuery と jQuery UI のライブラリを読み込む

インターネットからアクセスするか
もしくはダウンロードしてファイルを読み込む

基本的にサーバーで行うweb アプリなら
ネットには常時接続なので
リンクするほうを使う

1 2	`<script` `src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>` `<script` `src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>`

を HTML の meta 要素へ追記

次に、$tasks の中身をHTMLへ表示する

リスト形式で表示するので

<ul>
<?php foreach($tasks as $task) :?>
<li>
<?php echo h($task['title']); ?>
</li>
<?php endforeach; ?>
</ul>

とすれば
$tasks のデータの分だけループして
リスト表示してくれる

ちなみに、私の環境の場合
ブラウザで文字化けしたため

config.php で

define('DSN','mysql:host=localhost;dbname=dotinstall_Todo更新情報をDBへ反映_app;charset=utf8');

というように

1	`;charset=utf8`

を追記して
文字コードを指定している

今回、この対処は
http://otukutun.hatenablog.com/entry/2013/02/06/171150
を参考にさせていただきました

アプリ共通設定の設定

#03 アプリ共通の設定をしよう
http://dotinstall.com/lessons/todo_app_php_v2/9303
を参考に
DBへ仮データの挿入
そしてアプリ共通の設定ファイルになる config.php を作成する

まずはデータの挿入

insert into tasks (seq,type,title,created,mdified) values
(1,'notyet','本を購入',now(),now()).
(2,'notyet',提案書作成',now(),now()),
(3,'done',英文日記',now(),now());

これを保存したら
mysql -u root -p < Todo更新情報をDBへ反映.sql を実行して mysql root のパスワードを入力これでDBが作成されるので mysql -u root -p でログインして[sql] use dotinstall_Todo_app; desc tasks;[/sql] でテーブルを確認 [sql] select * from tasks;[/sql] でデータも挿入されていることを確認する次に、config.phpを作成して定数を記入していく

個人利用のPHP/jQueryで作るToDoアプリのDB作成

#02 データベースの設定をしよう
http://dotinstall.com/lessons/todo_app_php_v2/9302
を参考に
DBを設定

実行環境は vagrant で作成したローカル開発環境
　
まずは、作業ディレクトリ作成

vagrant ssh で接続して
mkdir /var/www/html/todo_app_php/
cd /var/www/html/todo_app_php/

今回も、sqlファイルを作成し読み込む

vim Todo更新情報をDBへ反映.sql
でファイルを作成して
SQL を書いていく

以下はソースと解説メモ

create database dotinstall_Todo更新情報をDBへ反映_app;
 
grant all on dotinstall_Todo更新情報をDBへ反映_app.* to dbuser@localhost identified by '3EwruTrE';
 
use dotinstall_Todo更新情報をDBへ反映_php;
 
create table tasls(
id int not null auto_increment primary key,
seq int not null,
type enum('notyet','done','delete') default 'notyet',
title text,
created datetime,
modified datetime,
KEY type(type),
KEY seq(seq)
);

自動連番で主キーになるように

1	`id` `int` `not` `null` `auto_increment` `primary,`

今回は並び替えをするので
並び替えの順番をシークエンスという意味で seq を作成

1	`seq` `int` `not` `null,`

タスクが終わっているか否かという状態を
notyet まだ終わっていない
done 終わった
deleted 削除された
という意味で
デフォルトは追加された時点なら
notyet になるようにする

1	`type enum('notyet','done','deleted')` `default` `'notyet',`

タスクのタイトルをテキスト管理するので

1	`title text,`

作成と変更時刻のため

created datetime,
modified datetime,

そしてインデックス作成のため

KEY type(type),
KEY seq(seq)

としている

AngularJS で YouTube 検索結果表示

#06 YouTube検索を完成させよう
http://dotinstall.com/lessons/youtube_search_angularjs/21706
を元に、検索結果を表示していく

とりあえずブラウザで開いて
chrome develoer tools でバグがないか確認
さっそくバグ発見

.join() が
,join()
というような , と .の間違い

[] を {} としているなどなど

これらを修正してリロードし
検索欄に入力してボタンをおすと
console に結果が階層として表示される

Object の中に feed があり
その中に
entry がある
max-results=10
と指定したので、
Array[１０]になっている

今回、必要なのは
さらにこの中にある
サムネイルなので、さらに階層を降りていくので
entry の中の数値から

1	`media$group` `> media$thumbnail`

の中にある url などを使う

また、タイトルに関しては
同じく entry の中の数字の中にある
title > $t を使って取得する

これらを使い

$http.jsonp(url).success(function(data){
});

の中に処理を書いていく

ちなみに、確認はできたので

1	`console.dir(data);`

はコメントアウト

1	`$scope.results = data.feed.entry;`

とする
これで、結果が格納される

データが取得できたので、次に
index.html で表示する

li要素のところへ
画像を表示したいので

1	`<img ng-src="{{result.media$group.media$thumbnail[0].url}}">`

タイトル取得には

1	`{{result.media.title.$t}}`

とすればOK

result は、取得した結果なので
あとは必要に応じて
階層を . で示して必要としているデータにアクセスして表示するようになる

youtube api で検索結果組み立て

#05 YouTubeのAPIを使ってみよう
http://dotinstall.com/lessons/youtube_search_angularjs/21705
を元に
YouTube API を使い、検索結果を組み立てる

YouTube API に関しては
https://developers.google.com/youtube/2.0/developers_guide_protocol_api_query_parameters
のリファレンスを参考にする

今回、編集するのは
myscript.js になる

まず、

$scope.doSearch = function(){
 
}

でユーザ関数作成

今回、YouTube API ver 2.0 を使用している

まず、

1	`var` `url ='https://gdata.youtube.com/feeds/api/videos?'`

というようにベースURLを
変数に格納

さらに、オプションを指定していきたいので

+{
 
}.join('&');

として

join() を使って配列をつないで文字列にしている

join() の解説は
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join
を参考

今回は

1	`.join('&')`

なので、オプションが＆で連結され
リクエストURLができあがる

つぎに。
オプションを指定していく

1	`'q='+encodeURIComponent($scope.query)`

これは、検索欄で入力したキーワード
URIに適用するためにエンコードするので
encodeURIComponent() を使っている

encodeURIComponent()に関しては
http://www.m-bsys.com/code/javascripr-encodeuri
を参考にするとわかりやすい

1	`'alt=json',`

としてJSON形式を指定

1	`'max-results=10'`

として、検索結果を10件にする

'v=2'

として、使用するバージョンを2 に指定

angularJS を使うにはコールバックが必要なので

1	`'callbak=JSON_CALLBACK'`

を指定

コールバックは、読んだあとにどんな処理をするか書いたもの

結果を取得するには

$http.jsonp(url).success(function(data){
});

とする

まずは、どのようなデータが返ってきているか調べたいので、この中で

1	`console.dir(data);`

とする

検索結果の有無で表示、非表示切り替え

#04 表示・非表示を切り替えよう
http://dotinstall.com/lessons/youtube_search_angularjs/21704
を元に
検索結果の有無で表示、非表示の切り替えを実装

li要素の中で、ng-repeat を使うことで
要素の分だけ繰り返し処理を行う

<li ng-repeat="result in results">
 
</li>

とする

そして、この ul li で作成されるリストの中に
データが入ってきたらリスト表示
データがないのなら
検索欄をつかって検索してください
というようなメッセージを表示する

まず、何も検索されていない状態なら

1	`<p>↑から検索してください</p>`

と表示する

これで、データがあるか判定するには

1	`<ul` `style="list-style:none; padding:0">`

を

1	`<ul` `ng-show="results.length"` `style="list-style:none; padding:0">`

というように

1	`ng-show="results.length"`

を
追加する

results.length があるということは
何らかの結果が返ってきているということなので
この値が true になり
リストが表示されるようになる

逆に、

1	`<p>↑から検索してください</p>`

の部分は
検索結果がある場合
つまり
results.length が true のときには消しておきたいので
ng-hide=”results.length” をつけて
かくすようにする

1	`ng-show="results.length"`

で表示

1	`ng-hide="results.length"`

で非表示

と覚えておく

なので

1	`<p>↑から検索してください</p>`

を

1	`<p` `ng-hide="results.length">↑から検索してください</p>`

とする

これでブラウザをリロードすると
まだ検索結果はないので
↑から検索してください
が表示される

検索フォームと結果表示領域の作成

#03 検索フォームを作ろう
http://dotinstall.com/lessons/youtube_search_angularjs/21703
をもとに
検索フォームと結果を表示する領域を作成

まずは index.html で
フォームを作成

1	`<form` `ng-submit="doSearch()"` `name="myform">`

としてフォーム領域を指定

この中に

1	`<input` `type="text"` `ng-model="query"` `required>`

として入力欄を作成
required をつけることで必須入力欄となる

1	`<input` `type="submit"` `value="search">`

で検索ボタン作成

また、入力欄になにも入力されていない場合
送信ボタンが無効になるようにしておく

これは

1	`<input` `type="submit"` `value="search"` `ng-disabled="myform.$invalid">`

とすればよい

1	`ng-disabled="myform.$invalid"`

これは
required になっている項目に入力されない限り
このフォーム自体が無効になる

続いて結果表示領域を作成
結果はリスト形式で表示する
このときに ul li で出る●はいらないので
スタイル設定で消す

<ul style="list-style:none; padding:0">
 </ul>

style=”list-style:none; を指定すると●が消える

月別: 2013年10月