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

미세먼지 data를 webserver 홈페이지에 수치list로  나타나도록 하려고 합니다.

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

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

1. 달력을 이용한  조회 구간 선택( 날짜구간 선택): 2가지 방법으로 구현가능하지민, 후자가 바람직해 보입니다.

   - 방법#1 : 플러그인을 이용한 구간 선택기 만들기

   - 방법 #2 : 자바스크립트( .js )를 직접 등록하여 만들기

     . 플러그인을 설치하면, 용량을 차지하게되고, 상대적으로 홈페이지가 무겁게 된다. 그러므로 가급적이면 워드프레스 자체기능을 최대한

       이용하고, 불가피한 경우에만  플러그인을 사용하는것이 좋을듯 하다.

2. 선택된 구간의 data를 화면에 뿌리기

3. 해결해야할 문제

   - "크롬"에서  style.css를 수정해도 수정사항이 반영되지 않는 문제 ( "IE 인터넷익스플로러"에서는 잘 적용이 됩니다.)

4. 코딩 TIPS

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

[ 달력을 이용한  조회 구간 선택( 날짜구간 선택) : 플러그인 사용 ]

1. 날짜선택기(달력이용)를  워드프레스 페이지 "미세먼지"에 나타내기

 - 플러그인 설치 " WP Datepicker "

 - 설정=> WP Datepicker 로 들어가서, setting을 한다.

   . 아래와 같이 #date-field,calender-field  라고 입력후  save changes(우측 하단)을 클릭한다.

   . "미세먼지 페이지"로 가서 , 아래 청색 박스와 같이 입력을 합니다. 위에서 설정한 date-field ,calender-field를  화면에 나타내기 위한 코드입니다.  

    <H9> 미세먼지 DATA 조회 </H9>

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

    <H2>From <input type="text" id="date-field" />    TO <input type="text" class="calender-field" /> </H2>

    참고 : 측정DATA

    [xyz-ips snippet="showdata"]

-  상기 그림과 같이 모든 텍스트를 입력하고 나서, 홈페이지를 재로딩하고, 날짜 박스를 클릭하면, 달력이 나오고, 달력에서 날짜를 선택할수 있다.

[ 달력을 이용한  조회 구간 선택( 날짜구간 선택) : 자바스크립트( .js )를 직접 등록하여 만들기 1 ]

  1. 자바스크립트 소스화일 작성 : datepicker.js

    -  테마의 js 폴터에 저장한다. ==> /www/wp-content/themes/twentysixteen/js

    -  datepicker.js 소스 코드 => $대신에 아래와 같이 jquary를 사용해야 합니다.

       jQuery( document ).ready(function( $ ) {

       jQuery( "#datepicker1" ).datepicker({

       dateFormat: 'yy-mm-dd'

       });

       });

  2. datepicker.js 화일을 등록한다

    - 테마의 function.php 화일에 등록을 하면, 워드프레스에 등록이 되게 된다.

    - function 화일 하단에 등록한 코드

      function datepicker_method() {

     wp_enqueue_script( 'datepicker', get_stylesheet_directory_uri() . '/js/datepicker.js', array( 'jquery' ), '버전', 'true or false' );

      }

     add_action( 'wp_enqueue_scripts', 'datepicker_method' );

   

[ 달력을 이용한  조회 구간 선택( 날짜구간 선택) : 자바스크립트( .js )를 직접 등록하여 만들기 2 ]

  1. 달력2개 , 세부data type적용 code도 가능

    - 아래 code 중 dateFormat 이후 코드는 없어도 무방함

  2. 자바스크립트 소스화일 작성 : datepicker.js

    -  테마의 js 폴터에 저장한다. ==> /www/wp-content/themes/twentysixteen/js

    -  datepicker.js 소스 코드 => $대신에 아래와 같이 jquary를 사용해야 합니다.

      jQuery( document ).ready(function( $ ) {

      jQuery( "#datepicker3,#datepicker4" ).datepicker({

      dateFormat: 'yy-mm-dd',

      prevText: '이전 달',

      nextText: '다음 달',

      monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],

      monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],

      dayNames: ['일','월','화','수','목','금','토'],

      dayNamesShort: ['일','월','화','수','목','금','토'],

      dayNamesMin: ['일','월','화','수','목','금','토'],

      showMonthAfterYear: true,

      changeMonth: true,

      changeYear: true,

      yearSuffix: '년'

      });

      });

  2. datepicker.js 화일을 등록한다

    - 테마의 function.php 화일에 등록을 하면, 워드프레스에 등록이 되게 된다.

   -  2개의 달력이 필요함으로 2개를 작성함 ( 조회날짜 시작일, 끝나는 날)

    - function 화일 하단에 등록한 코드

      function datepicker_method() {

     wp_enqueue_script( 'datepicker', get_stylesheet_directory_uri() . '/js/datepicker.js', array( 'jquery' ), '버전', 'true or false' );

      }

     add_action( 'wp_enqueue_scripts', 'datepicker_method' );

   

[ 선택된 구간의 data를 화면에 뿌리기]

 아래 코드는 플러그인(xyz php code"를 이용해서 php로 등록합니다.

 적용은 페이지화면으로 와서  [xyz-ips snippet="data-to-grahp"] 로 호출/실행시킨다.

1.달력에서 선택한 날짜를 datepickup 이라는 이름으로 불러와서, 변수 id에 저장한다

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

$id=$_POST['datepicker3'];

$id2=$_POST['datepicker4'];

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

2. database의 data를 $result변수에 문자열 형태로 할당한다.

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

$conn=mysqli_connect("localhost","david201207",quix0712,"david201207", "3306");

$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) ;

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

3. $result에 할당된 측정data 문자열을 배열로 ($rows) 저장한다.

   저장하는 data는 선택된 날자구간일 경우에만 저장하고, 또한 화면에 뿌려주고,

   구간 이외의 data는 skip 한다

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

  $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);

      echo($r['dt_create']."__[PM1.0: ".$r['pm010']."]__[PM2.5: ".$r['pm025']."]__[PM10: ".$r['pm100']."]<br>");

      }

    }

 $table['rows']=$rows;

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

  $jsonTable=json_encode($table);

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

4. 화면에 뿌려진 측정data

  - 조회기간 : 2017.6.7~2017.6.8

  - 그래프의 필요성이 다시한번 느껴지는 순간입니다.

[코딩 TIPS]

 1. 변수값 화면 프린팅

   - PRINT로 해야할경우

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

      $date0 = new DateTime($id);

      $date2 = new DateTime($id2);

     print $date0->format("c");

     print $date2->format("c");

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

   - ECHO로 해야할경우

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

     $id=$_POST['datepicker3'];

     $id2=$_POST['datepicker4'];

     echo($id);

     echo($id2);

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

   - while() 반복문은 ()안의 조건이 참일때 반복하는 반복문입니다. 그러나 데이터 베이스에서는 데이터베이스에서 가진 모든값을 불러오길 원할경우에 

     아래와 같이 자주 사용된다.

      데이터베이스의 값을 문자열로 $result로 할당하고, 이를 배열로 만들어서(mysqli_fetch_assoc) $row(배열)에 저장하고, 이를 모두 프린팅 하는 예제입니다.

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

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

     echo($row['dt_create']."__[PM1.0: ".$row['pm010']."]__[PM2.5: ".$row['pm025']."]__[PM10: ".$row['pm100']."]<br>");

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