新卒から文系エンジニア→人材業界に転職した人のブログ

新卒から文系エンジニア→人材業界に転職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界へ。異業種×異職種の転職経験有り。

このエントリーをはてなブックマークに追加

【Javascript・Ａｊａｘ・ＰＨＰ】ページ遷移を行わず、テキストファイルに入力データのログを出力するサンプル

Ｊａｖａｓｃｒｉｐｔ ＪＳ プログラミング 自己学習 ＰＨＰ Ａｊａｘ ＨＴＭＬ

【今回の紹介】

今回は、

以前作成したＷｅｂＴｏＤｏリストのログをとる

　　と言う事をしたいと思います。

【ＨＴＴＰプロトコルとは】

　　　ＨＴＴＰプロトコルは、Ｗｅｂでデータを交換する際に、用いているルールのことだそうです。


【ＨＴＴＰプロトコルの特徴】

　　　この通信（リクエスト・レスポンス）は、ステートレスという特徴をもちます。


　　　ステートレスとは一度のリクエスト・レスポンスが終わったら、通信の状態を保持できないという事です。
　　だから、画面遷移を伴いながら、手続きを行う場合などは、サーバ側にセッションを使用してどのユーザが
　　リクエストを送ってきているのか管理する必要があります。
　　参考：http://www.websec-room.com/2013/02/23/178



【処理の流れ】

　　　こうしたステートレスなＨＴＴＰ通信を使用しているＷｅｂで今回は、以下のような流れで外部のテキストに
　　入力データを保存します。


　　１、xmlhttprequestのオブジェクトを生成
　　２、テキストボックスの値と現在の日時を取得
　　３、ＰＯＳＴメソッドでテキストボックスの値と現在の日時をＰＨＰファイルに送信
　　４、３で送信したデータをＰＨＰファイルで受け取る
　　５、４で受け取ったデータをテキストファイルに書き込む



【補足】


　「なぜxmlhttprequestを使用するか」

　　form　actionでデータをphpに送信するという方法をありましたが、
　　画面遷移を伴わずに、phpにデータを送信し、ログをとるということを実現したかった


　「実行環境」
　　レンタルサーバいらずで既存のＩＩＳで行っています。レンタルサーバとか借りるのめんどくさい
　　と言う方は、自分と同じようにphpインストールとIISの設定を変更すればローカルで学習できます。

　「今後の流れ」
　　今後は、受け取ったデータをＤＢに入れることができたらなと思います。
　　　理由は、システム開発で基本的なデータの入力→ＤＢへの登録を経験できるため。


　「ソース表記法」
　　　友人にアドバイスいただき、かなりソースが見やすくなりました。笑
　　　参考：http://hatenadiary.g.hatena.ne.jp/

【参考ソース】

CSSファイル:style.css

li{
	list-style-type:decimal;
	font-weight:bolder;
	margin-top:0.5em;
	margin-left:0.5em;
}
#input{
	margin-top:2em;	
		
	height:10%;
	border-bottom:2px #000000 solid;
				
}
	
#frame_toDo{
	float:left;
	height:90%;
	width:30%;
	border-right:2px #000000 solid;
	}
	
#frame_Doing{
	float:left;
	height:90%;
	width:30%;
	border-right:2px #000000 solid;
	}

#frame_Done{
	float:left;
	height:90%;
	width:30%;
	}

htmlファイル:WebToDo .htm

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="" ></script>
<body>
<div id="input">
    <select onChange="select_option=this.options[this.selectedIndex].innerHTML">
    <option></option>
    <option value="hight"> 優先度 高</option>
    <option value="nomal"> 優先度 中</option>
    <option value="low"> 優先度 低</option>
    </select>
	<input type="text" value="" id="add_text">
	<input type="button" value="追加" id="button" onclick="add_list()" name="input_log">
</div>
<div id="frame_toDo">
	<h1 id="h1_ToDo" onDblClick="allDel_li(this)">To Do</h1>
	<ul id="ul_toDo"></ul>
</div>
<div id="frame_Doing">
	<h1 id="h1_Doing" onDblClick="allDel_li(this)";>Doing</h1>
	<ul id="ul_Doing"></ul>
</div>
<div id="frame_Done">
	<h1 id="h1_Done" onDblClick="allDel_li(this)">Done</h1>
	<ul id="ul_Done"></ul>
</div>

<script Language="JavaScript" type="text/javascript">
var count=1;

<!--動的のリストを追加する処理-->
function add_list(){
    var add_priority="("+select_option+")";
	var add_text=document.getElementById("add_text").value;
	var list_text=document.createTextNode(add_text+add_priority);
	var new_list=document.createElement("li");
	new_list.appendChild(list_text);
	new_list.id="new_list"+count;
	new_list.setAttribute("onDblClick","moveList(this)");
	new_list.setAttribute("onmouseover","addcolor(this)");
	new_list.setAttribute("onmouseout","defaultcolor(this)");
	document.getElementById("ul_toDo").appendChild(new_list);
	send_log();
}
<!--ダブルクリックしたリストを移動する処理-->
function moveList(obj){
	var ul_toDo=document.getElementById("ul_toDo");
	var ul_Doing=document.getElementById("ul_Doing");
	var ul_Done=document.getElementById("ul_Done");
<!--どのカテゴリ(todo or doing or done)にあるリストか判定する処理-->
	if("frame_toDo"==obj.parentNode.parentNode.id){
		var clone=obj.cloneNode(true);
		ul_Doing.appendChild(clone);
		ul_toDo.removeChild(obj);
	}
		else if("frame_Doing"==obj.parentNode.parentNode.id){
			var clone=obj.cloneNode(true);
			ul_Done.appendChild(clone);
			ul_Doing.removeChild(obj);
		}
			else{
			ul_Done.removeChild(obj);
			}
}
<!--リストにカーソルが当たると色を変える処理-->
function addcolor(obj){
	obj.style.color="#ff0000";
}

function defaultcolor(obj){
	obj.style.color="#000000";
}
<!--カテゴリー名（todo or doing or done）をダブルクリックすると配下の全リストを削除する処理-->
function allDel_li(obj){
	var allDel_ul=obj.nextSibling.nextSibling;
	var allDel_li=obj.nextSibling.nextSibling.childNodes;
		for(var i=allDel_li.length-1;i>=0;i--){
			allDel_ul.removeChild(allDel_li[i]);
		}
}


function send_log(){
	var send_text=encodeURIComponent(document.getElementById("add_text").value);
	var url="send_log99.php";
	var httpobj =createHttpRequest();
	var date=new Date();
	var time=" "+date.getFullYear()  + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + 					   
        date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
	httpobj.onreadystatechange = function() {
  if (httpobj.readyState == 4) {
    alert(httpobj.statusText);
  }
};
        httpobj.open("POST",url);
        httpobj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        httpobj.send("input_log="+send_text+time);
}

function createHttpRequest(){
try{
		return new XMLHttpRequest();
	}catch(e){}
	try{
		return new ActiveXObject('MSXML2.XMLHTTP.6.0');
	}catch(e){}
	try{
		return new ActiveXObject('MSXML2.XMLHTTP.3.0');
	}catch(e){}
	try{
		return new ActiveXObject('MSXML2.XMLHTTP');
	}catch(e){}

	return null;
}
</script>
</body>
</html>

phpファイル:send_log99.php

<?php
     header('Content-Type: text/html; charset=UTF-8')
     $input=$_POST['input_log'];
     $fh=fopen("send_log99.txt","a");
     fwrite($fh,$input."\r\n");
     fclose($fh);
?>
<||


** textファイル:send_log99.txt
.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }