top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_1120

AjaxとMySQLとCSSと私:symfonyプロジェクトある数日の作業記録。少し、symfonyから離れて ・・・ 【symphonyで、創るぞ】

 2009-10-16
 symfonyでのサイト開発ネタ。
 ・・・というより、ほぼ赤裸々な記録。
 【今回のテーマ】
   ★管理画面試行錯誤
    ・MySQLデータベースからの値取得
    ・Ajaxによるデータベースからの値取得と
     ハンドリング

    □サービスの管理画面だが、
     MySQLデータベースから、値取得してハンドリングするに
     今回は、symfony で会得したデータベースハンドリングから
     少し離れて、独自の作業展開となった。

     ・本当は良くないのだろう。
     ・しかし、細かい作業で、Doctrineのクラス作成やら
      何やらはお行儀いいのだけれど、いかんせん、まだ
      自然に身体が(手が、頭が)動くところまで行っていない。


    今回は多めにみてもらおう。(自分自身に)


  追記に ▼(長文ご容赦)


 ※今までのご参考

FC2ブログランキング にほんブログ村 IT技術ブログ Webサイト構築へ ブログ王ランキング 人気ブログランキング 人気ホームページランキングへ


more

************************************************
◎ AjaxとMySQLとCSSに格闘する私、の巻:symphonyで、創るぞ
************************************************


 ともかく記録。

 まず


 ■MySQLデータベースでのテーブル整備
  ・新しく
   ・item_table を定義
   ・グループ分けするための、親テーブル:cayegory_table も用意。
   ※これらは個々に、symfony のモジュールが必要なわけではない。
    純粋に、phpMyAdmin で作成し、CRUD が行えるクラスのみ
    symfony で、つくっておく。
   ・リレーションは、別にリレーションテーブル用意する方法で
    行う。
    【 item_table 】
      ・id
      ・name
    【 cayegory_table 】
      ・id
      ・name
    【 item_cayegory 】
      ・item_id
      ・cayegory_id

 ■ダミーデータ投入後、
  javascript から、アクセスする際の
  経由phpプログラムを作成
  ※ツールとして利用するものなので、
   symfony通さずに、生で用意。


  ・値をAjaxで利用するときにいろいろな方法論があるけれど
   一番使い慣れた XML を利用した方法にする。


 ■XML生成取得


  □XML生成(PHP)部分
   ・単純に文字列形成して echo 返し。
<rdf:RDF xml:lang="ja">
?<data_cate>
<cate_id>1</cate_id>
<cate_name>●●1</cate_name>
</data_cate>
?<data_cate>
<cate_id>2</cate_id>
<cate_name>●●2</cate_name>
</data_cate>
?<data_cate>
<cate_id>3</cate_id>
<cate_name>●●3</cate_name>
</tempcate>
?<data_cate>
</rdf:RDF>
 というXMLファイルを生成させる
function MakeXML($temp_datas){
header("Content-type:text/xml;charset=utf-8");
$tempout = '<?xml version="1.0" encoding="UTF-8"?>'."\n";
$tempout .= "<rdf:RDF xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"";
$tempout .= " xmlns=\"http://purl.org/rss/1.0/\"";
$tempout .= " xmlns:dc=\"http://purl.org/dc/elements/1.1/\"";
$tempout .= " xmlns:content=\"http://purl.org/rss/1.0/modules/content/\"";
$tempout .= " xmlns:cc=\"http://web.resource.org/cc/\" xml:lang=\"ja\">\n";
for($n=0;$n<sizeof($temp_datas);$n++){
$tempout .= "<data_cate>\n";
$tempout .= "<cate_id>".$temp_datas[$n]['*****']."</cate_id>\n";
$tempout .= "<cate_name>".$temp_datas[$n]['*****']."</cate_name>\n";
$tempout .= "</data_cate>\n";
}
$tempout .= "</rdf:RDF>\n"; echo $tempout;
}
 これを当該のSQLで抽出されたデータにかませ
 吐き出す。

  □JavaScript部分
   ・まずオブジェクトの生成

// XMLHttpRequestオブジェクト
var httpObj = createXMLHttpRequest();
 この大元になる部分は、
 いつも使うベースjavaScript として用意している。
 【参照】・創るmetaboy 紹介したリンク集:更新!現在 167件 、今回はAjax化・・・ 【創ったmetaboy】


   ・値が返ってきたときに処理するコールバック関数

function handleHttpEvent(){
//応答が帰る(xmlHttp.readyState == 4)かつ、サーバ処理が成功(xmlHttp.status == 200)
if (httpObj.readyState == 4 && httpObj.status == 200){
var xmlDoc = httpObj.responseXML;
var tempcate_id = new Array();
var tempcate_name = new Array();
j$(xmlDoc).find("tempcate").each(function() {
tempcate_id.push(j$(this).find("cate_id").text());
tempcate_name.push(j$(this).find("cate_name").text());
});
if(tempcate_id.length >0){
var outhtml = ""; var temprow=0;
for(var i=0;i<tempcate_id.length;i++){
//・・・・・(動的にHTML文字列生成させる)
}
if(outhtml!=''){
var v = document.getElementById('******');
v.innerHTML = outhtml;
}
}
}
}
 一番楽なので、jQueryを利用。
  ポイントとして
   □現在このサイトで、
    ・jQuery.jsprototype.js
     コンフリクト避けるために、
<script type="text/javascript">
jQuery.noConflict();
var j$ = jQuery;
</script>
 としている。
 【参照】・script.aculo.us:ははは。これを入れて試してみたかったのだ ・・・ 【JavaScript】
     そのために、今回用意した、jQueryを利用して
     ・XMLから値取得する部分でも $ > $j と
      変更している。
   □最初は、
tempcate_id.push(j$(this).attr("cate_id"));
 でやろうとしたけど、
    undefined になる。
    ・find("cate_id").text() でOK。
   □後は、ループで動的に生成し
    対象に、 innerHTML で書き込むだけ。

 ■トリガとなるスタート関数を用意


  ※onload で起動させる
function initList_faq(){
// リクエストオープンの設定
var url = '*****.php?*****=*****';
httpObj.open('GET', url, true);
// コールバックの用意
httpObj.onreadystatechange = handleHttpEvent;
// リクエスト送信
httpObj.send(null);
}

 で、
  動的に表示された。
  ディレクトリ構成の階層型メニューになっている。


 ■インターフェイス
  ユーザーインターフェイスハンドリング
   □<div> タグをうまく使い
    ・CSSを利用して
      階層型のメニューリストが、頁再読み込みすることなく
      開閉するように実装。
    ・ここは記録できないくらいの試行錯誤。
      CSSでいろいろやるのって楽しいけど、奥深いね。
      はまりました。ふぅ~。


  記録しておくべきは、


   □ディレクトリ構成でよくあるような
    プラス/マイナス画像を用意し、背景に引く
*****.style.background = "url(/*****/minus.gif) no-repeat";

   □アイコンの上には、オンオフ切り替えるJavaScriptを
    呼ぶ、空白gif を配置
outhtml += "<a href=\"JavaScript:OpenIcon(" + i + ");\"";
outhtml += " title=\"アイテムを開閉します\">";
outhtml += "<img src=\"spacer.gif\" width=\"20\" height=\"20\"></a>";

   □オンオフ切り替えは、周知、CSSのdisplay
*****.style.display = "none";
*****.style.display = "block";
 ぐらいか。

  でもこの、
  ・動的生成されていて、ソース表示には無いのに
  ・オンオフ(display)切り替えで、
   表示がされる・されない という動きは
  いいんだけど、少し妙な感じ。


 で、で、
  後は、利用者視点で、デザイン試行錯誤。


 ・・・これは、少し恥ずかしくてここに掲載できない。


●追記(20091017)●
 そうだ。
 MySQLでは、またもや文字化けでまいったんだっけ。
 同じことだけど、記録。


 ■データ文字化け
  □表示が ????? となる。


  □MySQL 初期状態のまま、だった。確認。
   ・ステータス
mysql> STATUS;
--------------
mysql Ver ***** Distrib *****, for redhat-linux-gnu (x86_64) using readline 5.0

Connection id: *****
Current database:
Current user: *****@localhost
SSL: Not in use
Current pager: stdout
Using outfile: ''
Using delimiter: ;
Server version: ***** Source distribution
Protocol version: 10
Connection: Localhost via UNIX socket
Server characterset: latin1
Db characterset: latin1
Client characterset: latin1
Conn. characterset: latin1
UNIX socket: /var/lib/mysql/mysql.sock
Uptime: 59 days 18 hours 45 min 47 sec
・・・・・
 おぉ、latin1のままだ。
   ・ステータス
mysql> SHOW VARIABLES LIKE 'char%';
+--------------------------+----------------------------+
| Variable_name | Value |
+--------------------------+----------------------------+
| character_set_client | latin1 |
| character_set_connection | latin1 |
| character_set_database | latin1 |
| character_set_filesystem | binary |
| character_set_results | latin1 |
| character_set_server | latin1 |
| character_set_system | utf8 |
| character_sets_dir | /usr/share/mysql/charsets/ |
+--------------------------+----------------------------+
8 rows in set (0.00 sec)
 こっちも。

  □my.cnf の修正。


   ・記載
default-character-set=utf8
skip-character-set-client-handshake
 リスタートして確認。だめだ。
 VPSサーバーゆえの理由からか。

  □(いつもの)応急措置


   ・MySQLクエリの前に
$result = mysql_query("SET NAMES UTF8");
 一応事なきを得る。
 ※根本的には未解決。

 さて、次は、と。

commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/1120-bd590857
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。