เฉลยแบบฝึกหัดบทที่ 5

หน้าเว็บ Client


<html>
<head>
<title>Assignment 8 Client</title>

<link rel="stylesheet" type="text/css" href="Assignment_8.css">
<script type="text/javascript" src="http://api.longdo.com/map/?key=912d18ca1ab67daef159ecda1a7d9f72"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
	var map;
	var count = 0;
	var marker = new Array();
    function init() {
        map = new longdo.Map({
          placeholder : document.getElementById('map'),
		  lastView : true
		});
		setInterval(fetch,2000);
	}
</script>

<script type="text/javascript">
	function fetch(){
		var string = "";
		map.Overlays.clear();
		count++;
		document.getElementById('count').innerHTML = "Count update : "+count;
		for(var i=1;i<=10;i++){
			$.ajax({                                      
				url: 'track.php',
				data: {pid : i},   //get everything in table point(id,lat,lon) 10 times                                                                           
				dataType: 'json', 
				success: function(data)       
				{
					var id = data[0];              
					var lat = data[1];   
					var lon = data[2];  
					string = string + "ID : "+id+" LATITUDE : "+lat+" LONTITUDE : "+lon+"</br>";
					$('#id_output').html(string);
					addtruck(lat,lon,i);	
					document.getElementById('t2').innerHTML += "OUT!!! loop";
				} 
			});
		}
	}
</script>

<script type="text/javascript">
	function addtruck(latx,lonx,index){	
		marker[index] = new longdo.Marker({lat:latx,lon:lonx},
		{
			title : 'Marker',
			icon: {
				url: 'truck.png'
		},
			clickable:true,
			draggable: true
		});		
		map.Overlays.add(marker[index]);
	}
</script>
</head>

<body onload="init();">
<div id="map"></div>
<div id="count"></div>
<div id="id_output"></div>
</body>
</html>

หน้าเว็บ Server

<html>
<head>
<title>Assignment 8 Server</title>

<script type="text/javascript" src="http://api.longdo.com/map/?key=912d18ca1ab67daef159ecda1a7d9f72"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
	var xlat = new Array();
	var xlon = new Array();
	var speed = new Array();
	var direct = new Array();
	
	for(var i=1;i<=10;i++){
		xlat[i] = 0;
		xlon[i] = 0;
		speed[i] = (Math.random()+0.5)*0.5;
		direct[i] = Math.random();
	}
    function init() {
		for(var i=1;i<=10;i++){
			$.ajax({			
				url:'init.php',
				data:{pid: i},
				dataType:'json'
			});	
		}
		setInterval(update,1000);
	}
</script>

<script type="text/javascript">
	function update(){
		var string = "";	
		for(var i=1;i<=10;i++){
			$.ajax({                                      
				url: 'track.php',
				data: {pid: i},        
				dataType: 'json',                   
				success: function(data)       
				{
					var id = data[0];              
					var lat = data[1]; 	
					var lon = data[2]; 
				
					string = string + "ID : "+id+" LATITUDE : "+lat+" LONTITUDE : "+lon+"</br>";
					$('#id_output').html(string);
				}			
			});
			xlat[i] += (5*speed[i]*Math.cos(2*Math.PI*direct[i]));
			xlon[i] += (5*speed[i]*Math.sin(2*Math.PI*direct[i]));
			document.getElementById('output').innerHTML = "Speed : "+speed[i]+"  Direction :  "+direct[i];
			$.ajax({
				url:'update.php',
				data:{pid: i, lat: xlat[i],lon:xlon[i]},
				dataType:'json'
			});	
		}	
	}
</script>
</head>

<body onload="init();">
<div id="count"></div>
<div id="id_output"></div>
<div id="output"></div>
</body>
</html>

หน้าเว็บ init

<?php
	$id = $_GET['pid'];
	$con = mysql_connect('localhost','root','');
	
	mysql_select_db('truck');
	mysql_query('SET NAME UTF8',$con);
	
	$sql = "update point set lat=0,lon=0 where id=$id";
	$result = mysql_query($sql);
	
	$array = mysql_fetch_row($result);
	
	echo json_encode($array);
?>

หน้าเว็บ track

<?php
	$id = $_GET['pid'];
	$con = mysql_connect('localhost','root','');
	
	mysql_select_db('truck');
	mysql_query('SET NAME UTF8',$con);
	
	$sql = "select * from point where id=$id";
	$result = mysql_query($sql);
	
	$array = mysql_fetch_row($result);
	
	echo json_encode($array);
?>

หน้าเว็บ update

<?php
	$id = $_GET['pid'];
	$lat = $_GET['lat'];
	$lon = $_GET['lon'];
	$speed = $_GET['speed'];
	$direct = $_GET['direct'];
	
	$con = mysql_connect('localhost','root','');
	mysql_select_db('truck');
	mysql_query('SET NAME UTF8',$con);
	
	$sql = "update point set lat=$lat,lon=$lon where id=$id";
	$result = mysql_query($sql);
	
	$array = mysql_fetch_row($result);
	
	echo json_encode($array);
?>