!!各ページの画面(小黒澤・足立) html、cssで作成。 画像を挿入して作った。 !!メイン画面(マッチング機能)(高橋) ログイン処理のときに自分のmbtiを一緒に持ってくる。 ((br)) if,elseifで場合分けを行い、自分のmbtiと相性のいい人のみの情報をデータベースから関数selectを用い、持ってくる。 ((br)) 関数fetchallでの出力を関数foreachで持ってきた情報の個数分だけ繰り返した。 !!データベース(小黒澤) mysqlを用いてアカウントの登録に必要なメールアドレスとパスワード、さらにユーザーのプロフィールの要素も追加したテーブルを作成し、ユーザー情報の管理を行っている。 ((br)) データベースにidというカラム(要素)も作成し、AUTO_INCREMENT属性を定義することでそれぞれのユーザーに対して、一意のidを付与できる。 ((br)) !!ページ遷移(村田) htmlの「次へ」ボタンを押したときに,data-urlという変数を使って外部のredirectpage.jsというJavaScript内の関数を呼び出して次のページに遷移させている。このWebページではこのidを用いて、誰がログインしているのかを判断したり、他のユーザーを探し出したりしている。 ((br)) !!パスワード認証システム(村田) ログインページに入力されたメールアドレスとパスワードをもとにしてsql文でデータベースに接続し、select~whereでパスワードを取得する。 ((br)) それが入力したものと合っていればメインページに飛ばす。 ((br)) 間違っていれば再びログインページに戻すようにした。 !!メッセージ(大井) app.js ((br)) このプログラムは、HTTPサーバーとWebSocketサーバーの両方を提供するためのもの ((br)) 全体の流れとしては 1.HTTPサーバーを作成し、静的ファイルをクライアントに提供する。 ((br)) 2.WebSocketを使用して、リアルタイム通信を行う。 ((br)) ((br)) wschat.js ((br)) このプログラムは、リアルタイムのチャット機能を提供するためのプログラム ((br)) 全体の流れとしては ((br)) 1.クライアントがサーバーに接続する。 ((br)) 2.サーバーからメッセージを受信し、それを画面に表示する。 ((br)) 3.クライアントがメッセージを送信すると、サーバーにそのメッセージを送る。 ((br)) style.css ((br)) index.html ((br)) 上記2つのプログラムは、かんたんに作成しているため省略 ((br)) ((br)) 改善点(実装できなかったところ) ((br)) ・チャットルームごとの区別をすることができなかった。 ((br)) ・メッセージを送信したときに、送信したメッセージが2重に表示されてしまっている。 ((br))