DBとHTMLの連携

ここまでの流れでHTMLの静的な部分の更新は出来るようになりました。今度はデータベースと連携した部分の表示方法を説明します。

Open-ECの開発キットを使って動きを見る

データベースとHTMLの連携は、今やWeb制作において必須となっております。Open-ECでは、この部分に関して非常に強力なデバッガーを開発環境に搭載しており、実際にどのような値が取得されているかをデバッガーを見ながらデザインカスタマイズを行うことが出来ます。

HTMLとプログラム

ECサイト構築を行うにあたり、データベースとHTMLデザインの連携は必須です。Open-ECでは、Alinous-Coreをベースにしてつくられており、デザインとプログラム部分は完全に切り分けがされています。

たとえば、『/ALINOUS_HOME/templete/index.html』を見ていただくと、htmlファイルのほかに、同じ「index」という名前で拡張子が「alns」という名前のファイルがあります。この「index.html」と「index.alns」ファイルが連携することによってデータベースとHTMLの連携を実現しています。

実行の流れとしては

• 最初に「index.alns」をプログラムとして実行し、データベースから値を取得する
• 取得した値から変数を作成する
• 変数を取得した後、「index.html」ファイルにそれらをわたし、HTMLに値を埋め込む

という流れで一つの画面が実行されます。

ブレイクポイントの作成

Open-ECでは、Alinous-Coreの開発環境を利用できるため、HTMLに変数を埋め込む前に、どのような変数が実際につくられているかをデバッガで確認することが出来ます。

デバッガを利用するためには、どの部分で処理を一度ブレイクするかを指定するブレイクポイントを設定する必要があります。「index.alns」にブレイクポイントを設定するためには、下図のエディタの左端の部分でダブルクリックすることで設定できます。また、ブレイクポイントを解除するためには、同じところをダブルクリックすることでブレイクポイントを解除することが出来ます。

デバッガーでデータベースから取ってきたデータを見る

ブレイクポイントを設定した後には、実際にそのブレイクポイントを含むファイルが実装されることによって、そのポイントでプログラムを一時停止させて変数の中身を見ることが出来ます。

『/ALINOUS_HOME/templetes/index.alns』に設定したブレイクポイントを作動させるためには次のアドレスにアクセスします。

http://localhos:8080/templetes/index.html

このアドレスにアクセスすることによって、Eclipseのパースペクティブがデバッグ用のパースペクティブに変わります。

ブレイクポイントでブレイクした状態では、変数を見ることが出来ます。また、『ステップ実行』ボタンをおすことによって、１行１行実行しながら変数を見ることが出来ます。これらの作業を「return 0;」という行まで実行することで、HTMLに組み込む変数を作成していきます。

HTMLへの変数の埋め込み

『/ALINOUS_HOME/templetes/index.alns』を実行し終わったあとには、『/ALINOUS_HOME/templetes/index.html』に変数を埋め込みます。変数の埋め込みの一番簡単な例として、「TITLE」変数があります。この変数は、次のような記述をhtmlファイル上に記述することによってtitleタグに埋め込まれます。

[↑ページトップ]