⑦ハンドル名とメッセージのカラーと自動更新の時間を選択できるようにする。

　　⑦ハンドル名とメッセージのカラーと自動更新の時間を選択できるようにする。
　　　ア．チャットの入り口のプログラム（chatIn.html）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>まいちゃっとAjax版</title>
<script type="text/javascript" src="chatIn.js"></script>
</head>
<body>
まいちゃっとログイン<br>
<form name="form1" method="post" action="chatDummy.php" id="sub">
<table width="510" border="0" cellpadding="0" cellspacing="0" style="font-size: 14px;">
  <tr>
    <td width="92" nowrap="nowrap" bgcolor="#FFCC00">ハンドル名：</td>
    <td colspan="3" nowrap="nowrap" bgcolor="#FFCC00"><input name="fHandle" type="text" size="19" id="handle"></td><!-- ハンドル名 --> 
    <td colspan="2" nowrap="nowrap" bgcolor="#FFFFCC">自動更新時間</td>
    <td width="45" nowrap="nowrap" bgcolor="#FFFFCC">
      <select name="fTime" id="fTime"><!-- 自動更新時間 --> 
      <option value="10" selected="selected">10</option>
      <option value="20">20</option>
      <option value="30">30</option>
      <option value="40">40</option>
      <option value="50">50</option>
      <option value="60">60</option>
      </select>
    <td width="45" nowrap="nowrap" bgcolor="#FFFFCC">&nbsp;</td>
    <td width="45" nowrap="nowrap" bgcolor="#FFFFCC">&nbsp;</td>
  </tr>
  <tr bgcolor="#CCFF00">
    <td nowrap="nowrap">ハンドル名の色：</td>
    <td width="45" nowrap="nowrap"><input name="fHnRb" type="radio" value="black" checked="selected">黒</td><!-- ハンドル名の色 -->
    <td width="45" nowrap="nowrap"><input name="fHnRb" type="radio" value="brown">茶</td>
    <td width="45" nowrap="nowrap"><input name="fHnRb" type="radio" value="red">赤</td>
    <td width="45" nowrap="nowrap"><input name="fHnRb" type="radio" value="orange">橙</td>
    <td width="45" nowrap="nowrap"><input name="fHnRb" type="radio" value="yellow">黄</td>
    <td width="45" nowrap="nowrap"><input name="fHnRb" type="radio" value="green">緑</td>
    <td width="45" nowrap="nowrap"><input name="fHnRb" type="radio" value="blue">青</td>
    <td width="45" nowrap="nowrap"><input name="fHnRb" type="radio" value="purple">紫</td>
  </tr>
  <tr bgcolor="#FFFF00">
    <td nowrap="nowrap">メッセージの色：</td>
    <td nowrap="nowrap"><input name="fMsRb" type="radio" value="black" checked="selected">黒</td><!-- メッセージの色 --> 
    <td nowrap="nowrap"><input name="fMsRb" type="radio" value="brown">茶</td>
    <td nowrap="nowrap"><input name="fMsRb" type="radio" value="red">赤</td>
    <td nowrap="nowrap"><input name="fMsRb" type="radio" value="orange">橙</td>
    <td nowrap="nowrap"><input name="fMsRb" type="radio" value="yellow">黄</td>
    <td nowrap="nowrap"><input name="fMsRb" type="radio" value="green">緑</td>
    <td nowrap="nowrap"><input name="fMsRb" type="radio" value="blue">青</td>
    <td nowrap="nowrap"><input name="fMsRb" type="radio" value="purple">紫</td>
  </tr>
  <tr>
    <td nowrap="nowrap" bgcolor="#FF00FF"><input type="submit" name="Submit" value="入室" ></td>
    <td colspan="2" nowrap="nowrap" bgcolor="#FF00FF"><input type="reset" name="Submit2" value="クリア"></td>
    <td colspan="6" nowrap="nowrap"><span style="color: #FF0000;"><span id="handleMsg">ハンドル名が未入力の場合は、入室できません。</span></span></td>
  </tr>
</table>
<input name="fIn" type="hidden" value="logIn"><!-- 入室画面から入室したことを表すフラグ --> 
</form>
</body>
</html>

　　　　イ．ハンドル名が未入力の場合に処理するJavascript。（chatIn.js）

window.onload=function(){
  document.getElementById("sub").onsubmit=function(e){
    if(document.getElementById("hand").value==""){
      document.getElementById("handMsg").innerHTML="※ハンドル名を入力してください。";
      if(e.preventDefault){  //「preventDefault()」メソッドがあるかをチェックしています・
        e.preventDefault();  //IE以外のブラウザの場合、ひとつ前のイベントを取り消しをしています。
      }
      return false;  //IEの場合のは、「return false」でイベントが取り消されます。
    }
  return true;  //この行は、なくてもかまいませんが、IEの場合、イベント続行の意味がありますので書いておきます。
  }
}

　　　　ウ．ダミーページのプログラム（chatDummy.php）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>まいちゃっとAjax版</title>
<!--<script type="text/javascript" src="chat.js"></script>-->
</head>
<body>
<div id="header">まいちゃっとAjax版<br>
<?php
  if(isset($_REQUEST['fHandle'])) $sHandle=$_REQUEST['fHandle']; else $sHandle="";//ハンドル名の受信
  if(isset($_REQUEST['fHnRb'])) $sHnRb=$_REQUEST['fHnRb']; else $sHnRb; //ハンドル名の色の受信
  if(isset($_REQUEST['fMsRb'])) $sMsRb=$_REQUEST['fMsRb']; else $sMsRb; //メッセージの色の受信
  if(isset($_REQUEST['fIn'])) $sIn=$_REQUEST['fIn']; else $sIn; //入室画面から入室したことを表すフラグの受信
  if(isset($_REQUEST['fTime'])) $sTime=$_REQUEST['fTime']; else $sTime=""; //自動更新時間の受信

  //受け取ったデータを「chat.php」へ送信するためのURLエンコードデータの作成
  $sendPara="fHandle=".$sHandle."&fHnRb=".$sHnRb."&fMsRb=".$sMsRb."&fTime=".$sTime;
  $conn=mysqli_connect('localhost','root','******') or die("データベース接続に失敗しました");
  mysqli_select_db($conn,'chat_db') or die("指定されたデータベースは存在しません。");

  //入室ページからこのページに来たときのみハンドル名とそのメッセージを保存する。
  if($sIn=="logIn"){
    $sHandle="<span style=\"color:{$sHnRb};\">{$sHandle}</span>";
    $sMsg="<span style=\"color:{$sMsRb};\">{$sHandle}さんが入室されました。</span>";
    $sql="insert into chat_tbl values(null,'".$sHandle."','".$sMsg."',null);";
    if(mysqli_query($conn,$sql)){
      mysqli_close($conn);
      header("Location:chat.php?{$sendPara}");
      echo "データの書き込みに失敗しました。\n";
    }
    else{
      mysqli_close($conn);
      exit();
    }
  }
?>
</body>
</html>

　　　　エ．チャット本体のプログラム（chat.php）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>まいちゃっとAjax版</title>
<script type="text/javascript" src="chat.js"></script>
</head>
<body>
<div id="header">まいちゃっとAjax版<br>
<?php
	if(isset($_REQUEST['fHandle'])) $sHandle=$_REQUEST['fHandle']; else $sHandle="";//ハンドル名の受信
	if(isset($_REQUEST['fHnRb'])) $sHnRb=$_REQUEST['fHnRb']; else $sHnRb; //ハンドル名の色の受信
	if(isset($_REQUEST['fMsRb'])) $sMsRb=$_REQUEST['fMsRb']; else $sMsRb; //メッセージの色の受信
	if(isset($_REQUEST['fTime'])) $sTime=$_REQUEST['fTime']; else $sTime=""; //自動更新時間の受信
?>
ハンドル名：<span style="color:<?= $sHnRb ?>;"><?= $sHandle ?></span>
<form name="form1" method="post" id="sub">
  メッセージ：
  <input name="fMsg" type="text" size="100" id="msg"><!--　メッセージの入力　-->

  <!-- JavascriptのAjaxでデータを送信するためのデータを非表示エレメントで作成 -->
  <input name="fHandle" type="hidden" value="<?= $sHandle ?>" id="hdl"><!--　ハンドル名の再送用　-->
  <input name="fHnRb" type="hidden" value="<?= $sHnRb ?>" id="hdlColor"><!--ハンドル名の色-->
  <input name="fMsRb" type="hidden" value="<?= $sMsRb ?>" id="msgColor"><!--メッセージの色-->
  <input name="fTime" type="hidden" value="<?= $sTime ?>" id="timer"><!--自動更新時間-->
  <input type="submit" name="fSub1" value="発言" id="btn">
  
</form>
</div>

//この下にサーバから送信されてきたチャットのデータを表示させる。
<div id="disp"></div>
</body>
</html>

　　　　オ．チャットのメッセージの送信とメッセージの表示を行うAjaxのJavascript。（chat.js）

window.onload=function(){

  //ログインした時に最初にチャットメッセージが表示されるようにAjaxで処理している。
  var handle=document.getElementById("hdl");
  var message=document.getElementById("msg");
  var hdlColor=document.getElementById("hdlColor");
  var msgColor=document.getElementById("msgColor");
  var sendData = "hdl=" + handle.value + "&msg=" + message.value + "&fHnRb=" + hdlColor.value + "&fMsRb=" + msgColor.value;
  sendReturn(sendData);

  //「発言」ボタンをクリックしたときにメッセージの送信をAjaxを使って行っている。
  document.getElementById("sub").onsubmit=function(e){
    e.preventDefault();  //サブミットイベントの中止
    var handle=document.getElementById("hdl");
    var message=document.getElementById("msg");
    var hdlColor=document.getElementById("hdlColor");
    var msgColor=document.getElementById("msgColor");

    //ハンドル名とメッセージをURLエンコードデータにしている
    var sendData = "hdl=" + handle.value + "&msg=" + message.value + "&fHnRb=" + hdlColor.value + "&fMsRb=" + msgColor.value;
    sendReturn(sendData);
    message.value="";  //メッセージ送信後、メッセージのテキストフィールドをクリアしている。
  }

  //指定秒ごとにメッセージの表示を更新するようにインターバルを設定している
  timerID=setInterval(function(){

    //発言ボタンを押したときも同じ関数が呼び出されるのでインターバルで呼び出されるときは、発言ボタンのクリック時と
    //異なるURLエンコードデータを送信（引数に）している。
    //入室ページで選んだ起動更新時間を設定している。
    sendReturn("timeOut=para")
  },document.getElementById("timer").value*1000)
  showObj=document.getElementById("disp");
}

//サーバから帰ってきたチャットのデータをHTMLの「<div id="disp"></div>」に挿入する処理（関数）
function returnDataSHow(){
  if(xmlhttp.readyState == 4){
    showObj.innerHTML=xmlhttp.responseText;
  }
}

//「chatDisp.php」にチャットデータを送信するための処理（関数）
function sendReturn(chat){
  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange=returnDataSHow;
  xmlhttp.open("POST","chatDisp.php");
  xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  xmlhttp.send(chat);
}

　　　カ．Ajaxで呼び出され、チャットのDB（chat_tbl）のデータを文字列にしてクライアントに戻すプログラム。（chatDisp.php）

<?php
  if(isset($_REQUEST['hdl'])) $hdl = $_REQUEST['hdl']; else $hdl=""; //ハンドル名の受信
  if(isset($_REQUEST['msg'])) $msg = $_REQUEST['msg']; else $msg=""; //メッセージの受信
  if(isset($_REQUEST['timeOut'])) $timeOut=$_REQUEST['timeOut']; else $timeOut=""; //タイマーイベントからの受信
  if(isset($_REQUEST['fHnRb'])) $sHnRb=$_REQUEST['fHnRb']; else $sHnRb; //ハンドル名の色の受信
  if(isset($_REQUEST['fMsRb'])) $sMsRb=$_REQUEST['fMsRb']; else $sMsRb; //メッセージの色の受信
  $conn=mysqli_connect('localhost','root','******') or die("データベース接続に失敗しました");
  mysqli_select_db($conn,'chat_db') or die("指定されたデータベースは存在しません。");

  //メッセージが入力されていない場合、インターバルによってこのプログラムが呼び出された場合は、
  //データベースへの保存はしないようにしている。
  if($msg!="" && $timeOut==""){
    $hdl="<span style=\"color:{$sHnRb};\">{$hdl}</span>";
    $msg="<span style=\"color:{$sMsRb};\">{$msg}</span>";
    $sql="insert into chat_tbl values(null,'".$hdl."','".$msg."',null);";
    if(!mysqli_query($conn,$sql)){
      echo  "データの書き込みに失敗しました。\n";
    }
  }

  //メッセージ表示用のデータの作成。
  $sql="select * from chat_tbl order by dateTime desc;";
  if($result=mysqli_query($conn,$sql)){
      $data="";
     while($row=mysqli_fetch_array($result,MYSQL_ASSOC)){

      //すべでのメッセージを一つの文字列にしている。
      $data.="<hr><li>{$row['handle']}　>　{$row['message']}　{$row['dateTime']}</li>\n";
    }
  }
  else{
    echo "クエリーに失敗しました。\n";
  }
  mysqli_close($conn);
  echo $data;
?>

　　　＜課題１＞退室ボタンを作って退室できるようにしなさい。
　　　＜課題２＞セッションを使って、チャット入室ページから入室した場合のみ、チャットができるようにしなさい。