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>

とする

curosr :pointer

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

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

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

次に

<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 アプリなら
ネットには常時接続なので
リンクするほうを使う

 <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');

というように

;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)
);

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

id int not null auto_increment primary,

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

seq int not null,

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

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

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

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 の中の数値から

media$group > media$thumbnail

の中にある url などを使う

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

これらを使い

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

の中に処理を書いていく

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

console.dir(data);

はコメントアウト

$scope.results = data.feed.entry;

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

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

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

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

タイトル取得には

{{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 を使用している

まず、

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
を参考

今回は

.join('&')

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

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

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

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

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

'alt=json',

としてJSON形式を指定

'max-results=10'

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

'v=2'

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

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

'callbak=JSON_CALLBACK'

を指定

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

結果を取得するには

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

とする

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

console.dir(data);

とする

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

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

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

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

</li>

とする

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

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

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

と表示する

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

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

を

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

というように

ng-show="results.length"

を
追加する

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

逆に、

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

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

ng-show="results.length"

で表示

ng-hide="results.length"

で非表示

と覚えておく

なので

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

を

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

とする

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

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

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

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

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

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

この中に

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

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

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

で検索ボタン作成

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

これは

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

とすればよい

ng-disabled="myform.$invalid"

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

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

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

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

月別: 2013年10月