【画面設計について】

質問

現在，大学での演習でコーディングを担当しています．
HTMLで作った画面にJavaScriptを用いて機能を作っています．
(DBはMysqlを用いて作成しました．)

現在htmlを使用し登録画面から確認画面へデータを反映させるようなプログラミングをJavaScriptを用いて作成しています．

登録するデータをODBCを経由しSQL上(workspace)に一度仮保存し，そこから確認画面へとデータを反映させようと考えています．

しかし，データは新規のものになるのでデータベースには存在していません．新規のデータはどのような表記の仕方をしていいのか困っています．
またプログラミングの全体像があまり想像できていません．

回答No.1

x_jouet_x · ベストアンサー

一連の流れ(画面遷移)は、

・登録画面 … 画面上でデータ入力
　↓
・確認画面 … 登録画面で入力した内容を再度表示
　↓
・結果画面 … 確認画面で表示した内容をDB登録した結果を表示

みたいな感じになるのでしょうか。

> データは新規のものになるのでデータベースには存在していません

通常はDBに登録する目的で登録画面を作成されるのであれば、そこに表示する内容はDBのスキーマに依存すると思います。
例えばユーザ登録画面を作成されるのであれば、「名前」「ログイン名」「メールアドレス」「パスワード」etc... これらがDB側で準備されていて、画面側も同様の入力フィールドを表示して入力された内容をinsertする形になると思うのですが…。

補足

迅速な回答に大変感謝しております．

画面の流れはx_jouet_xさんの表記通りです．画面の流れから
見て確認画面の際に記入ミスなどで変更が必要なデータがある場合
に，DB上に保存されてしまうことはことはないですか??

全体の流れとしては登録画面（データはDBと共通するフィールドへ）→DB→確認画面（共通フィールドからinsert）
といった流れで大丈夫でしょうか??

回答No.6

x_jouet_x

回答#4 think49さん。
貴重なご意見、ありがとうございます。

JavaScript内でActiveXObjectを使用する方法は私も知っていましたが、環境依存する点とSQLがクライアントサイドで見えてしまうのを嫌って、敢えてDBを触れないと回答しました。
質問者さんが初心者の方のようでしたので、混乱を避ける目的もありましたが…。

ただ、演習目的で環境を限定して作成するのであればそれもアリかなと思います。
実務の方で長くWebアプリのコーディングをしていたので、つい「環境依存しない形」を念頭に置いてしまいました。

その他、環境構築の回答もして頂いたようでありがとうございました。

回答No.5

think49

#4です。少し補足します。

> ちなみに、先に紹介したJScriptですが、JScriptがサーバサイドスクリプトの代わりとなるので少なくとも 2. はスキップできると思います。
「2. をスキップ」はサーバ上にhtmlファイルを置く場合です。

ローカルにhtmlファイルを置く場合は「1. と 2. をスキップできる」と思います。
私の環境ではIEではJScript実行時にIEの情報バーに警告が出ますが、この時、実行を許可すればJScriptを実行できています。

ODBCは利用したことがありませんが、仮に動作しなくても一時的にポリシーを変更すれば何とかなるような気がします。
(お勧めはしませんが、方法論として)

お礼

think49さんご回答ありがとうございました．

今一度まとめなおしてアドバイスを参考に作業を行ってみたいと思います．初心者を相手だってため混乱させてしまいすみませんでした．

とても助かりましたありがとうございます．

回答No.4

think49

横から失礼します。

>> #3 x_jouet_xさん
> ご質問ではJavaScriptで…と書かれているのですが、JavaScriptはブラウザ上でのみ動作するものなので直接DBに触ることはできません。
最近よく似た質問に回答しまして、その時はJScriptのコードを紹介しました。

PLANEX@OKWave 【質問】DBを介した検索　他2つ
http://internet.okwave.jp/qa5077428.html?ans_count_asc=1
JavaScriptからMySQLを利用する
http://tsuttayo.jpn.org/mysql/odbc/jscript.php

演習目的であればJScriptも有りとこの時は思いましたが、今考えるとマイナー故に目的の情報を探しにくいですね。
JScriptである必要があるなら仕方ないですが、そうでないならサーバサイドスクリプトを使ってコーディングする方が情報を集めやすくていいのではないかと思いました。

# 私の回答した質問者さんとは名前が違うようですが、同じ学内の学生さんかなと思い、書き込ませていただきました。
# 見当違いでしたらすみません。

>> 質問者さん
> 新規のデータはどのような表記の仕方をしていいのか困っています.
Perl,PHP,JScript,Rubyなど、DBにアクセスする方法はいろいろありますが、最後はSQL文を発行するのが妥当だと思います。
CREATE TABLEでテーブルを作成し、INSERT INTOでデータを入力してください。

SQL入門
http://sql.1keydata.com/jp/

> またプログラミングの全体像があまり想像できていません.
「具体的に何をやればいいか」でいいでしょうか？
(質問のタイトルは「画面設計」ということですが、補足から「何から始めればいいかわからない」状態なのではないかと想像してます。)
一般的には、以下のような過程を踏みます。

1. Webサーバのインストール (Apache等)
2. サーバサイドスクリプトのインストール (Perl,PHP,Java,Rubyなど)
3. データベースサーバのインストール (MySQLなど)

サーバサイドスクリプトをPerlとしたら、PerlでMySQLにアクセスするコードを書きます。
この時にSQL文が必要になるわけです。

ちなみに、先に紹介したJScriptですが、JScriptがサーバサイドスクリプトの代わりとなるので少なくとも 2. はスキップできると思います。

回答No.3

x_jouet_x

そうでした。
プログラミングの全体像があまり想像できていなかったんですね。

プログラムの前に全体的な大まかな構成図を書くと、

┌──────┐　┌──────┐　┌──────┐
│　　　　　　│　│　　　　　　│　│　　　　　　│
│　ブラウザ　│─│　サーバー　│─│　　ＤＢ　　│
│　　　　　　│　│　　　　　　│　│　　　　　　│
└──────┘　└──────┘　└──────┘

のようになると思います。
上図のサーバーは入力画面等をブラウザに表示したり、DBにデータを登録したりするためWebアプリサーバになります。

ここで問題になるのはWebアプリサーバ上で動作するプログラムの言語です。
ご質問ではJavaScriptで…と書かれているのですが、JavaScriptはブラウザ上でのみ動作するものなので直接DBに触ることはできません。

それとも、もしかしてMicrosoftのJScriptについて言われているのでしょうか？
そうであればIIS(サーバ)上で動作するものなので問題ありませんが…。

上図のサーバーにあたる部分のWebサーバは何を使用される予定なのでしょうか？
Windowsマシンであれば、IISかApacheだと思いますが…。

また、プログラム言語は何で記述される予定でしょうか？
上記で出てきたJScriptの他、よく使用されるもので言えばPHPやJavaのServletがありますが…。

お礼

x_jouet_xさんお忙しい中詳細な回答をありがとうございます．

初心者の自分にとってとてもためになりました．

今一度まとめなおしてから行ってみます．

ありがとうございました

補足

申し訳ありません質問に答えてませんでした．

使用サーバとしては，Apacheを使用しています．

言語はhtml内でjavascriptを活用しながら行っています．

DBとの連結のためにODBCというソフトを使用しています．

回答No.2

x_jouet_x

> 確認画面の際に記入ミスなどで変更が必要なデータがある場合に，DB上に保存されてしまうことはことはないですか??

画面遷移を簡単に書いてしまいました。
すみません。

・登録画面 … 画面上でデータ入力("確認画面へ"ボタンを配置)

　↓ ("確認画面へ"ボタン押下時)

・確認画面 … 登録画面で入力した内容を再度表示("登録"ボタン、"修正"ボタンを配置)

　↓ ("登録"ボタン押下時、確認画面で表示した内容をDB登録／"修正"ボタン押下時、登録画面へ戻る)

・結果画面 … DB登録した結果を表示

こんな感じの画面遷移ですかね。
確認画面の"登録"ボタン押下時にDBにinsertする処理を行い、結果画面に遷移する形になります。

なお、DBにinsertする前に入力されたデータが各フィールドの型や最大文字列数と整合性が取れているかをチェック(入力チェック)する必要がありますね。
入力チェックにひっかかったらエラー画面に遷移するなどの処理も必要でしょう。

ベストなのは上記の入力チェックとともに、登録画面の"確認画面へ"ボタン押下時にJavaScriptで入力チェックを行い、誤った入力があれば次画面に進めないようにできるといいです。

補足

詳細な画面遷移をしていただきありがとうございます．

現在x_jouet_xさんのアドバイスを参考に確認画面から結果画面へのプログラミングは想像がつきました．

しかし，登録画面から確認画面への部分のプログラミングについてもう少しご質問があります．お忙しいところ大変申し訳ありません．

登録画面と確認画面のプログラミングには同一のtableを存在させると
思うのですが，これらはscript内にSQLを導入させてつなげる形でよろしいのでしょうか??

もし何か参考になるサイトやサンプル文がございましたらご提供願います．

よろしくお願いいたします．