0

HTML、CSS、JavaScript、およびサーバー側スクリプト言語 (PHP や MySQL など) を備えたリレーショナル データベースのみを使用して、データ オブジェクトを取得および表示し、それらを視覚的に操作するにはどうすればよいでしょうか?

操作とは、新しいオブジェクトの作成、格納されたオブジェクトの取得、それらのプロパティの視覚化 (円の直径を大きくまたは小さくするなど)、メソッドの呼び出し、ドラッグ アンド ドロップに基づくフィールド値の設定 (サイズ、形状、および位置の変更) を意味します。

使用例は、問題の監視と追跡に使用される、磁気カウンターを備えた物理的なオフィス ホワイトボードのオンライン表示です。テーブルには、指定された問題の所有者の行と、ビジネス ワークフローを表す列があります。たとえば、4 段階の「割り当て」、「調査」、「実装」、「合意締結」プロセス (または何でも、単なる例) です。

ユーザーはボタンをクリックして、独自の一意の ID 番号を持つ新しい課題オブジェクトを作成します。その形状は、問題の種類、色、ステータスによって異なります (赤、黄色、緑は、たとえば計画なし、遅れているが計画どおりに回復、計画どおり)。関連するテーブル セルにドラッグすると、行インデックスに基づいて所有者に割り当てられ、列インデックスに基づいてライフサイクル状態が設定されます。オブジェクトがドラッグまたはドロップされるか、その他の方法で変更されるたびに、視覚的な変更がデータベース内のオブジェクト プロパティに反映されます。

HTML5 のキャンバス要素を使用するか、巧妙な CSS を使用した SVG を使用するかで迷っています。データベースに既にあるものを画面に表示する方法はわかりますが、画面を介して変更を操作および保存する方法はわかりません。また、これは HTML/CSS/JavaScript/PHP/MySQL で実行できると想定していますが、他にどのようなテクノロジを使用できますか?

4

1 に答える 1

2

これは、クライアント中心の ajax として最適に機能するように思えます。これの意味は：

  • UI 全体を Javascript で記述します。キャンバス、svg、プレーンな HTML5 + CSS3 のいずれを使用するかは、個人の好み、ブラウザーのサポート、および機能要件によって異なります。
  • サーバーには 2 つのジョブがあります。JavaScript アプリケーションを提供し、ajax リクエストに応答します。

ドラッグ アンド ドロップは完全に Javascript で行うことができます。おそらく、必要な機能を実装した JavaScript ライブラリを使用する必要があるでしょう (これに使用できる jQuery 拡張機能がいくつかあります)。適切なイベントをサブスクライブし、ajax リクエストを発行してデータを更新およびクエリするだけで済みます。たとえば、ユーザーがアイテムを表のセルにドラッグすると、アイテムの ID、表のセルの ID を取得し、サーバーに「アイテム X がセル Y に割り当てられました」と伝える ajax リクエストを起動します。サーバーは、「OK」(この場合、UI で変更を永続的にすることができます) またはエラー メッセージ (この場合、おそらく通知などをポップアップ表示する必要があります) のいずれかで応答します。

通信プロトコルの最善策は JSON です。ほとんどの JavaScript 実装と同様に jQuery にも組み込まれており、ファイアウォールや Web ブラウザをそれほど問題なく通過し、ほとんどのプログラミング エコシステム (PHP を含む) には JSON エンコーディングとデコーディングが組み込まれています。さらに、JSON は、XML ベースの代替手段と比較してオーバーヘッドが非常に低くなります。

いずれにせよ、簡単なことではありません。数回クリックするだけで機能する特効薬はありません。努力する価値があるかどうかを検討する必要があります。また、スクリプトがブロックされている場合、またはそれらを十分にサポートしていないプラットフォームでは、javascript を多用するインターフェイスがうまく機能しない (またはまったく機能しない) ことを考慮してください。など

于 2012-05-04T10:44:15.403 に答える