上で示したデモ画面ページは、Html作成ツールや手動でも簡単に作成できます。
Web Html ページの段階では、追加・更新・削除のボタンをクリックしても、動作はしません。
デモ画面ページのHtml 内容の一部は下記示します。
デモに使用されるWeb Htmlページの説明
Web Htmlページの作成方法は、幾つか存在します。
① HTMLの習得者がテキストエディタでHtml言語を使ってWebページを作成する方法。
② Webページ作成用の便利なツールやWebデザインツールを利用して作成する方法。
上記のうち①の方法では相応の技量を要求されます。また、作成効率も相対的に低いです。
そこで大抵のWebデザイナーは、②の方法でWebページを作成しています。ツールが提供されたGUIインターフェースで、ドラッグ&ドロップで、画面のレイアウトを設計して、HTML形式で保存すれば、Web Html ページを作成する事が出来ます。
直感的に操作できるため、HTMLの初心者でも使いやすいという特徴があります。
今回、デモに使われるWeb Html ページを、以下に示します。Web Htmlページに、ユーザー名や資産を入力できるテキストボックスがあります。また、資産の単位を選択できるコンボボックスと決済チェックボックスがあります。操作イベントとして追加・更新・削除の3種類のボタンあります。
・追加ボタンをクリックすると、入力したユーザー名、資産、選択した単位などを画面のテーブルに追加し、サーバーのデータベースにも追加します。
・削除ボタンをクリックすると、クリックしたボタンの行の内容が削除され、かつ、サーバーデータベース内同じユーザーの内容も削除します。
・更新ボタンをクリックすると、入力したユーザー名の行の値を、入力した資産、選択した単位などの内容で更新します。