商品検索の見せ方、方法

質問

独学でWEBデザイン、コーディングを勉強している学生です。
ＥCサイトの商品検索ついて様々なサイトを調べていたのですが、下記２サイトが非常に印象に残りました。

http://www.tiffany.co.jp
http://www.bluenile.com/jp/

HTML、CSS、JSをかじった程度の知識では一体どういった方法で、条件を入力してリアルタイムに検索結果を表示させているのか見当つきせん。
詳しい解説や、こういったものを勉強したら良いなど、教えていただけたら幸いです。

回答No.2

drum_KT

補足拝見しましたが、

＞検索方法と結果の見せ方が非常に面白いと感じました。
＞いつかこんなサイトも作れる様になりたい、と思ったのですがソースなどを見ても分からない事が多く・・・

わからなくて当然です。この手のサイトの商品検索ロジックそのものはブラウザ上のソースには現れないからです。

前の回答にも書いたように、ECサイトはサーバ側のアプリケーションとデータベースから成り立っています。ブラウザで検索キーワードなどを入力すると、その結果はサーバ側に送られて、サーバ上のアプリケーションで実装されているデータベース検索ロジックに入力されてデータベースから結果が取り出されます。その結果を更にサーバ上のアプリケーションがHTMLとして組み立ててブラウザ側に回答してくるので、ブラウザ上で確認できるソースは検索結果を画面上にレイアウトした表示結果だけということになります。

なので、原理を理解するには、サーバ側の仕組みを勉強してみてくださいと言っています。

お礼

詳しい解説をありがとうございます。
だからHTMLを見ても構造が分からなかったんですね。
データベースとHTMLの関係性、そして何故それを勉強しなければならないのかがようやく分かりました。

回答No.1

drum_KT

そのサイトは敢えて見ずに回答しますが、ECサイトを実現するには、Webデザインの知識だけでは不十分です。

カタログの維持管理（在庫数の管理、価格の変更など）や、注文処理の管理（同時に注文が操作され、在庫数を上回る場合にどのように処理するかなど）を行うためには、WebのバックエンドにRDB（リレーショナルデータベース）を配置し、RDB上でデータを適切に管理した上で、Webのサーバサイドで動作するアプリケーションからRDBにアクセスして処理を実行するしかありません。

このようなシステムを一般的には「Web - DB 連携システム」とか「Web 3層システム」とか言います。

つまり、ブラウザ上で実行するJava Scriptでは実現できないということです。上に挙げたようなキーワードで勉強してみてください。

補足

ご回答ありがとうございます。
ECサイト運営にはそいういった知識も必要なんですね、それも合わせて勉強してみます。
ただ、上記サイトはＥCに関わらず検索方法と結果の見せ方が非常に面白いと感じました。
いつかこんなサイトも作れる様になりたい、と思ったのですがソースなどを見ても分からない事が多く・・・
その為に必要な知識や勉強法をご存知なら、引き続き回答をお願い致します。