IOT(사물인터넷) 웹 서비스 구축하기(WordPress 적용) #2
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>");
-----------------------------------------------------------------------------------------------
'프로젝트 > Web Server 구축' 카테고리의 다른 글
| Cafe24 CDN 서버 활용하기 (0) | 2017.06.17 |
|---|---|
| IOT(사물인터넷) 웹 서비스 구축하기(WordPress 적용) #3 (0) | 2017.06.10 |
| IOT(사물인터넷) 웹 서비스 구축하기(WordPress 적용) (0) | 2017.06.06 |
| [1] 도메인 등록 / 호스팅 서비스 등록/wordpress 설치 (0) | 2017.05.09 |
| 티스토리 블로그 주소를 개인 도메인으로 연결하기 (0) | 2017.05.09 |
