IOT(사물인터넷) 웹 서비스 구축하기(WordPress 적용) #3

daviduino.co.kr	techtogetworld.com
david201207.blog.me	cafe.naver.com/3dpservicedavid

IOT(사물인터넷) 웹 서비스 구축하기(WordPress 적용)  #3

미세먼지 data를 webserver 홈페지의 data 수치 list를  그래프로 나타내려고 합니다.

글의 순서는 아래와 같습니다.

홈페이지 위치는 " techtogetworld.com " 입니다. 

현재 미세먼지 측정장치 가동중이며, 홈페이지 방문하시면 data를 조회하실수 있습니다(메뉴위치 : 모바일은  화면 최 하단 ,  PC는 우측 상단)

---------------------------------------------------------------------------------------------------------

1. 조회구간의 측정data를 json type으로 변환하고, 변환된 data를 구글 차트로 보내서 그래프로 나타냄

  - 워드프레스에 php로 작성함

2. 워드프레스 page에 short code로 등록함.

3. 주메뉴에 등록함

4. data를 그래프로 나타낸 홈페이지 모습

5. 미세먼지 측정장치 모습

6. Next Step

  - 측정위치를 구글 지도에 나타냄

  - 측정기를 여러지역에 배치를 하게되면, 해당지역의 미세먼지상태를 알수 있습니다.

  - 여러지역의 미세먼지 상태를 홈페이지에서 모니터링이 가능하게 됩니다.

---------------------------------------------------------------------------------------------

[ 조회구간의 측정data를 json type으로 변환하고, 변환된 data를 구글 차트로 보내서 그래프로 나타냄 ]

 1. 특기사항

    - php , html , java script 가 혼합되어 있는 코드입니다. 각각의 문법에 유의할 필요가 있습니다.

    - 저장위치는 워드프레스의 php 플러그인에 기록합니다. 후에 short 코드로 page에 등록합니다.

    - html, java는 워드프레스의 page에서 해석/수행이 가능하지만, php코드는 php만이 해석을 할수가 있습니다. 따라서 혼합된 코드를 

      php로 등록을 하면 문제없이 작동합니다.

    - 본 코딩에서 만큼은 자바스크립트를 js폴더에, php를 php위치에, html을 page에 각각 나누어서 작성을 하지 않는것이 좋겠습니다.

     별도로 코딩을 하게되면 data base 화일을 서로 주고받는데 문제가 발생합니다.

     따로따로 저장하지 마시고, 모든 코드를 하나로 합쳐서 php로 등록을 하는것이 편합니다.

 2. source code   

---------------------------------------------------------------------------------------------------

<?php

/*달력에서 조회구간을 선택하면, 날짜가 아래 변수로 입력이 됩니다*/

$id=$_POST['datepicker3'];

$id2=$_POST['datepicker4'];

 

/*미세먼지 측정data가 들어가는 data base에 접속을 합니다*/

$conn=mysqli_connect("localhost","user id",비밀번호,"db table", "db port");

$sql="

select * from (

SELECT dt_create, pm010, pm025, pm100

FROM  `finedust`

order by dt_create desc

limit 100000

)t_a

order by t_a.dt_create";

$result = mysqli_query($conn,$sql) ;

/* DB(DUST)의 TABLE(finedust)에 접속하여 측정결과를 읽어서, 조회구간에 해당되는 data만 배열에 저장합니다 */

  $rows=array();

  $flag=true;

  $table=array();

  $table['cols']=array(

  //  array('lable'=>'id' , 'type'=>'number'),

    array('lable'=>'dt_create','type'=>'string'),

    array('pm010'=>'pm010','type'=>'number'),

    array('pm025'=>'pm025','type'=>'number'),

    array('pm0100'=>'pm100','type'=>'number')

  );

  $rows=array();

  $date0 = new DateTime($id);

  $date2 = new DateTime($id2);

  while($r=mysqli_fetch_assoc($result)){

    $date1 = new DateTime($r['dt_create']);

    if ($date1>$date0 && $date1<$date2) {

      $temp=array();

      //$temp[]=array('v'=>(int) $r['id']);

      $temp[]=array('v'=>(string) $r['dt_create']);

      $temp[]=array('v'=>(int) $r['pm010']);

      $temp[]=array('v'=>(int) $r['pm025']);

      $temp[]=array('v'=>(int) $r['pm100']);

      $rows[]=array('c'=>$temp);

       }

    }

$table['rows']=$rows;

/* 배열에 저장된 data를 그래프용 코드(json)로 변환 */

$jsonTable=json_encode($table);

/* 여기부터는 자바 스크립트 입니다. jsonTable의 data를 구글 차트에 전달해서 그래프를 그리도록 합니다. */

?>

<script src="//www.google.com/jsapi"></script>

<script src="//www.gstatic.com/charts/loader.js"></script>

<script >

google.charts.load('43', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = new google.visualization.DataTable(<?=$jsonTable?>);

  var options = {

  title: ' 현재시간까지의 측정결과 입니다.',

  curveType: 'function',

  legend: { position: 'bottom' }

  };

  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

  chart.draw(data, options);

  }

</script>

<div id="curve_chart" style="width:1500px; height: 600px"></div>

------------------------------------------------------------------------------------------------------

[ 워드프레스 page에 short code로 등록함]

 - source code

 ------------------------------------------------------------------------------------------

<h5>조회구간을 선택하세요, 박스를 클릭하면 달력이 나옵니다.

조회하기 버튼 클릭하면, 구간 미세먼지 측정data를 조회합니다</h5>

<h4>[미세먼지측정결과 조회]</h4>

<form action="" method="post"><input id="datepicker3" name="datepicker3" type="text" /> ~ <input id="datepicker4" name="datepicker4" type="text" />

<input type="submit" value="조회하기" /></form>&nbsp;

[xyz-ips snippet="google-chart"]

------------------------------------------------------------------------------------------------------

[주메뉴에 등록함]

 - 등록방법

   . Page를 만드시면 하기 그림 " 페이지" 항목에 나타나게 되고, 선택하고 메뉴추가 버튼을 누르고, 위치 조정하 저장하면 됩니다.

[ data를 그래프로 나타낸 홈페이지 모습]

 1. 주메뉴에서 "미세먼지 모니터링 웹 서비스"항목 선택

 2. 달력에서 날짜 선택 : 조회 시작일, 끝나는 날짜

 

 

 3 측정결과 data 그래프

  - 주황색 : 10 마이크로 메타

  - 적색 : 2.5 마이크로 메타

  - 청색 : 1.0 마이크로 메타

 

 4 측정결과 data 그래프 2

  - 미세먼지 측정 장치를 6/6일 부터 켜 놓았습니다. 현재까지 data를 조회해 보겠습니다.

5 미세먼지 측정 장치 모습

 - 캐릭터 형태로 케이싱을 만들어 봤습니다. 개인 취향에 맞추어 제작을 하면 재미있을것 같습니다.

 - 캐릭터, 로봇, 화분,액자,인형 등...