IOT(사물인터넷) 웹 서비스 구축하기(WordPress 적용)
IOT(사물인터넷) 웹 서비스 구축하기(WordPress 적용)
워드프레스로 사물인터넷 웹서버 구축하고자 합니다.
Mot 소그룹 wemakers에서 공동프로젝트로 진행했던, 미세먼지 측정장치의 측정결과를 웹 서비스하는방법에 대해 정리해 보도록 하겠습니다.
기존에 측정결과를
- 집안 인터넷에 연결된 "라즈베리파이"를 서버로 구축
- 집안 인터엣에 연결된 " 노트북 " 을 서버로 구축 하는 방법에 대해서는 이전글을 통해 소개를 한바가 있습니다.
이번글에서는
- CAFE24에 미세먼지 측정결과 서비스 서버를 구축하고, 웹프로그래밍은 워드프레스로 하도록 하겠습니다.
- 웹 프로그래밍을 배워가면서 처음부터 끝까지 코딩으로 직접해봤지만, 맘에드는 홈페이지를 구축하기위해선 웹프로그래밍 역량+디자인감각이 중요하다는것을 다시한번 느끼게 되었습니다.
- 결론은 웹프로그래밍을 도와주는 TOOLS 이 필요함을 느끼게 되었고, 바람님/기획실장님이 추천해주신 워드프레스를 이용하게 되었습니다.
글의순서는 아래와 같습니다.
1.워드프레스 웹 서버 만들기
2.미세먼지 DATA를 워드프레스 data base "mysql"에 저장하기
3.next step
- mysql에 쌓인 data를 웹에서 보여주기
- 홈페이지에 측정data service 하기
[워드프레스 웹 서버 만들기]
1. cafe24 가입
2. 워드프레스 설치하기 : 아래 청색 박스 클릭
3. 플러그인 설치하기
- 많은 플러그인중에서 우선 망보드 를 설치했습니다.
- 홈페이지를 구축하는데 필요한 게시판,자료실등이 사용자가 원하는 대로 조정할수있도록 플렉시블 하고, 무료입니다.
3. 테마 설치하기
- 많은 유료,무료 테마가 있습니다.
- 그중에 무료테마 Twenty sixteen 테마를 선택함(홈페이지 목적,취향에 맞는 테마)
3. 페이지(page) 만들기
- 페이지를 만들어 놓고, 메뉴등에 등록해서 홈페이지에 나타낼수 있습니다.
- 만드는 방법은
. 새페이지 추가
. 새페이지 내용에 망보드의 아래 타입을 복사한다. 복사를 하게되면 새 페이지가 망보드의 속성을 이어받게 된다.
즉 자료실 타입을 복사하면, 실제로 자료를 등록,삭제등을 할수있는 기능을 가진 페이지로 변하게 된다.
. 물론 내용에 복사하지 않으면, 공란으로 남게 되고, 이 공란에 자신이 원하는 php를 프로그래밍을 하면 된다.
. 페이지 하나에 망보드 게시판 하나씩을 만들어야만, posting한 내용이 각각 페이지에 들어가게된다.
그렇치 않으면 하나의 post가 중복해서 페이지에 나타나게 된다.
- 망보드 게시판 타입
자료실: [mb_board name="gallery" style=""]
- 만든 페이지 모습(갤러리, 미세먼지........)
4. 메뉴만들기
- 페이지로 만들어 놓은 항목들이 , 아래 메뉴만드는 화면에 "페이지"로에 나타난다.
- 아래 페이지에 나타난 " 전면페이지, 미세먼지....."등을 선택하고, 아래 메뉴추가 버튼을 누르면, 오른쪽 메뉴구조에 등록이 된다.
- 메뉴설정 하단의 "기본메뉴 "를 클릭 선택한다.
- 지금 설정한 메뉴항목들이, 홈페이지 접속시 상단 기본메뉴에 나타나게 된다
4. 홈페이지 외관모습
- 워드프레스로 간단한 몇가지 메뉴를 만들어 봤습니다.
- 나머지는 테마를 설치하면(twenty sixteen)디폴트로 등록되는 내용입니다.
- 하기 기본적인 내용에
. 회원관리
- 등록,탈퇴등
. 쇼핑몰
- 결재, 구매,상품등록은 "우커머스 테마"등에 많은 기능이 있습니다, 실제로 신용카드 등록 결재를 할수있는 기능들 입니다.
. 필요사진등으로 화면을 꾸미고, style화일을 편집해서 구성품등을 표현해 나갈수 있습니다.
- 이와 같이 본인이 필요한 기능을 홈페이지에 만들기 위해 , 테마, 플로그인등을 설치하고, 설정해 나가면 됩니다.
. 경우에 따라서는 유료테마, 플러그인을 사용하는경우도 있습니다.
[미세먼지 DATA를 워드프레스 data base "mysql"에 저장하기]
1. FIRM WARE 수정하기
. 기존의 Nodemce의 펌웨를cafe24 서버에 맞도록 수정을 합니다.
. firmware의 기능
-. 미세먼지 센서가 측정한 결과를 웹서버로 전송하는 역할을 합니다.
본 화일은 본인의 cafe24 웹서버와 thingspeak라는 시중의 측정data를 호스팅 서빙하는 홈페이지로 보내줍니다. thingspeak로의 송신은 테스트목적입니다.
. PMS7003.h는 변동사항 없습니다.
. firmware 수정부분
--------------------------------------------------
const char* khost = "techtogetworld.com";
void karaClient(int pm1_0, int pm2_5, int pm10_0){
const int httpPort =80;
if (!client.connect(khost, httpPort)) {
return;
}
String url = "/dust/dustdata.php";
------------------------------------------
. source code
2. dustdata.php 수정하기
- dustdata.php의 기능
. node mcu에서 미세먼지 측정 data를 웹서버로 보내면,
. dustdata.php에서 이 data를 받아서 cafe24의 data base에 저장을 하게됩니다.
- dustdata.php의 수정내용
-------------------------------------------
$servername = "localhost";
$username = " 본인의 user name을 입력한다 "; ==> "root"가 아닌, 본인의 user name을 입력하시면 됩니다 ( mysql data base "id" )
$password = "비밀번호"; ==>mysql 비밀번호
$db_name = "db name"; ==> 하나의 계정에 하나의 db가 주어진다(cafe24 포함 거의 대다수의 호스팅 업체가 동일함) , 그 db 이름을 입력한다
if( isset($_GET['dust1_0']) && isset($_GET['dust2_5']) && isset($_GET['dust10_0']))
{
$d010=$_GET['dust1_0'];
$d025=$_GET['dust2_5'];
$d100=$_GET['dust10_0'];
// Create connection
$mysqli = mysqli_connect(localhost, user name, 비밀번호, db name ,db port); => 본인의 내용을 입력한다.
- source code
3. MYSQL 서버에 저장된 미세먼저 측정결과 DATA
- CAFE24 메뉴중에서 서비스접속관리=>MYSQL 웹어드민 항목클릭하여 MYSQL에 접속한다.
- cafe24에서 부여한 db name 아래에 field를 구성한다.
현재까지의 홈페이지 모습은
여기를방문하시면 보실수 있습니다.
[Next step]
아래글은 다음 회차에 이어서 posting 하겠습니다.
- mysql에 쌓인 data를 웹에서 보여주기
- 홈페이지에 측정data service 하기
'프로젝트 > Web Server 구축' 카테고리의 다른 글
Cafe24 CDN 서버 활용하기 (0) | 2017.06.17 |
---|---|
IOT(사물인터넷) 웹 서비스 구축하기(WordPress 적용) #3 (0) | 2017.06.10 |
IOT(사물인터넷) 웹 서비스 구축하기(WordPress 적용) #2 (0) | 2017.06.08 |
[1] 도메인 등록 / 호스팅 서비스 등록/wordpress 설치 (0) | 2017.05.09 |
티스토리 블로그 주소를 개인 도메인으로 연결하기 (0) | 2017.05.09 |