반응형

 

 

 

아두이노(Arduino)를 이용한 홈 IoT(사물인터넷) 구축을 위해 웹서버(Web sever) 및 데이터베이스(Database, DB) 서버를 구성하는 방법을 지난 포스팅을 통해 알아보았습니다. 웹서버를 구성하는 도구로 AMP (Apache, MYSQL, PHP)를 알아보았고 이를 각각 사용하는 방법 또는 한번에 통합으로 설치하는 APMSetup 프로그램도 확인하였습니다. 이제 서버구성을 어느 정도 완료하였으니 아두이노의 센서에서 측정된 데이터가 DB서버에 저장되는지 확인이 필요합니다.

 

그래서 오늘은 웹브라우저를 통해서 데이터를 DB서버인 MySQL에 송신하여 저장하는 방법을 알아보고 정상적으로 MySQL에서 수신하여 저장되는지 확인해 보겠습니다. 진행에 앞서 서버 구성이 되지 않으신 분은 아래 서버 구성 방법에 대한 링크 참조 부탁드립니다. ^^

 

Arduino 아두이노 홈 IoT(사물인터넷)을 위한 서버(Sever) 쉽게 만들기: APMSetup 프로그램

아두이노(Arduino)를 사용해서 홈 IoT(사물인터넷)을 구축하는 프로젝트를 위해서는 인터넷을 통한 데이터 전송이 기본적으로 가능해야 합니다. 인터넷을 사용하여 웹을 통해 데이터를 송수신하려면 웹서버(Web se..

it-g-house.tistory.com


이번 포스팅은 아두이노의 센서에서 측정된 데이터를 DB서버인 MySQL로 데이터를 저장하기 위한 사전단계로 웹브라우저를 이용하여 입력된 데이터가 MySQL로 정상적으로 송수신되는지 확인하는 작업입니다. 따라서 아두이노는 잠깐 옆으로 밀어놓고 PHP 프로그램 코딩을 먼저 진행해 보겠습니다.

 

작업순서는 우선 PHP로 웹브라우저에 온도(Temperature)와 습도(Humidity)를 입력할 수 있는 창을 만드는 프로그램 코딩을 먼저하고, 임의의 숫자 데이터를 입력하면 아파치(Apache)로 구성된 웹서버를 통해 MySQL로 만들어진 DB서버의 테이블(Table)로 보내서 저장하는 프로그램을 역시 PHP로 만들 겁니다. 두 개의 PHP 파일을 만드는 거죠 ㅎㅎ

 

1. 데이터 입력 웹브라우저 프로그램

 

먼저 데이터를 입력할 수 있는 웹브라우저를 먼저 만들어보겠습니다. 메모장 또는 코딩 프로그램을 열어서 아래 코드블럭과 같이 코딩하고 파일명을 임의로 정하시고 *.php 확장자로 저장합니다. 메모장으로 작성하실 때는 지난번에도 설명드렸듯이 저장할 때 파일 형식을 모든 파일로, 인코딩은 UTF-8로 설정하고 저장하셔야 확장자가 php로 됩니다. 

 

아두이노 APM 웹서버 활용: 데이터 입력 웹브라우저 만들기

 

저는 파일명을 'input.php'로 저장하였습니다. 저장경로는 D:\APM_Setup\htdocs로 저는 APMSetup 프로그램을 통해 D 드라이버에 설치하였고 그 하위 폴더인 htdocs 폴더에 input.php 파일이 있어야 정상적으로 작동합니다.

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>   
    <body>
        <form action="process.php" method="get">
            <p>Temperature : <input type="text" name="temp"></p>
            <p>Humidity : <input type="text" name="humi"></p>
            <p><input type="submit" /></p>            
        </form>
    </body>
</html>

 

프로그램을 간단히 설명하면 전체 구성은 html(웹브라우저 프로그래밍 언어)로 작성되었고, 중간에 <body></body> 사이의 내용이 주된 내용입니다. 한 줄씩 아주 단순하게 보면

  • //<form action="process.php" method="get"> : 데이터 입력하고 제출되면 "process.php" 프로그램이 실행되고,  "get" 방식을 사용한다는 뜻입니다. 
  • //Temperature : <input type="text" name="temp">: Temperature를 "text" 형태로 입력할 수 있는 창을 만들고 입력된 데이터는 "temp"변수에 저장한다는 뜻입니다.
  • //Humidity : <input type="text" name="humi">: Humidity를 "text" 형태로 입력할 수 있는 창을 만들고 입력된 데이터는 "humi" 변수에 저장한다는 뜻입니다.
  • //<input type="submit"/> 입력된 데이터를 제출하는 버튼을 만듭니다.

저장 완료 후에 웹브라우저(저는 크롬을 사용)에서 http://localhost/input.php라고 입력하면 아래와 같이 Temperature와 Humidify를 입력할 수 있는 창이 만들어진 것을 확인할 수 있습니다.

 

아두이노 APM 웹서버 활용: 데이터 입력 웹브라우저 확인

 

 

 

2. 입력된 데이터를 MySQL에 저장하는 프로그램

 

앞서 만든 데이터 입력 웹브라우저에 Temperature와 Humidity를 입력하고 제출 버튼을 누르면 그 데이터를 MySQL로 저장하는 프로그램을 아래 코드 블록과 같이 코딩합니다. 역시 메모장이나 코딩 프로그램으로 작성하고 확장자를 php 파일로 저장하여 APMSetup 설치 폴더의 하위 폴더 htdocs 폴더에 저장합니다.

 

저장 파일명은 반드시 process.php로 하셔야 하는데 앞서 input.php 코딩 시 process.php를 다른 이름으로 임으로 정하셨으면 그 바꿔주신 파일명과 동일해야 합니다.

 

<?php
header("Content-Type: text/html;charset=UTF-8");
 
$host = 'localhost';
$user = 'root';
$pw = 'apmsetup';
$dbName = 'testdb';
$mysqli = new mysqli($host, $user, $pw, $dbName);
 
    if($mysqli){
	echo "MySQL successfully connected!<br/>";

	$temp = $_GET['temp'];
	$humi = $_GET['humi'];
	
	echo "<br/>Temperature = $temp";
	echo ", ";
	echo "Humidity = $humi<br/>";
	
	$query = "INSERT INTO tempnhumi (temp, humi) VALUES ('$temp','$humi')";
	mysqli_query($mysqli,$query);

	echo "</br>success!!";
    }

    else{
	echo "MySQL could not be connected";
    }

mysqli_close($mysqli);
?>

 

코딩하실 때 반드시 확인하실 점은 코드 첫 문단이 MySQL접속과 관련됩니다. 여기서 MySQL의 user명과 비밀번호, 데이터베이스 이름을 각자 설정한 대로 수정하셔서 사용하셔야 합니다. 

 

MySQL 접속 아이디, 비밀번호, 데이터베이스 이름 입력

그리고 $query 설정에서 데이터를 저장할 테이블 이름도 본인이 만든 테이블명과 각 칼럼(Column) 이름을 맞춰야 합니다. 아래 코드에서 저는 테이블 명이 'tempnhumi'이고 각 칼럼의 이름이 'temp', 'humi'라고 만들었기 때문에 아래와 같이 작성하였습니다. 코드 설명은 직관적으로 tempnhumi 테이블의 temp, humi 칼럼에 변수(VALUES) 값 $temp, $humi를 각각 저장해라("INSERT INTO")라는 내용이 됩니다.

 

PHP코드: MySQL의 데이터베이스 테이블에 데이터 저장하기

 

 

 

파일을 저장 후 다시 웹브라우저에서  http://localhost/input.php을 주소창으로 실행 후 Temperature와 Humidity에 실수 범위의 숫자를 입력하고 (저는 임의 온도는 25.1, 습도는 55.3으로 입력하였습니다.) 제출을 누르면 "MySQL successfully connected!"라고 MySQL 접속을 성공적으로 하고, Temperature와 Humidity 값을 제가 입력한 값인 25.1, 55.3으로 각각 확인할 수 있습니다. 그리고 최종적으로 "success!!"라고 출력되면 정상적으로 진행이 완료된 것입니다.

 

웹브라우저를 통한 DB서버(MySQL)에 데이터 보내기 
웹브라우저를 통한 DB서버(MySQL)에 데이터 저장히기

 

주소창을 보면 'localhost/process.php?temp=25.1&humi=55.3'이라고 input.php 프로그램에서 코딩하였듯이 데이터가 제출되면 자동으로 process.php가 실행되어 온습도 값이 MySQL에 저장되는 과정을 나타냅니다. 

 

그럼 데이터가 정말 저장되었는지 확인해 보겠습니다. MySQL 관리를 실행하여 phpMyAdmin을 통해 데이터 베이스의 테이블에서 확인 가능합니다.

 

지난번 'Arduino 아두이노 홈 IoT(사물인터넷)을 위한 서버(Sever) 쉽게 만들기: APMSetup 프로그램 (https://it-g-house.tistory.com/entry/AMPSetup)' 포스팅에서 만든 데이터베이스 'testdb'의 테이블 'tempnhumi'에서 온도는 25.1, 습도는 55.3으로 데이터가 저장되어 있는 것을 확인할 수 있습니다.

 

웹브라우저를 통한 DB서버(MySQL)에 데이터 저장히기: 테이블 확인

 

와~우!! 신기하죠? ㅎㅎ 전 너무너무 신기해서 몇 번씩 계속 저장해봐서 저렇게 데이터가 많이 쌓였습니다. ^^ PHP 코드에 관해서는 추후에 자세히 정리해 보도록 하겠습니다.


여기까지 웹브라우저를 통해 온습도(Temperature and Humidity) 데이터를 MySQL의 데이터베이스(Database, DB) 서버에 저장하는 방법을 알아보았습니다. 앞서 얘기했듯이 오늘 포스팅은 아두이노(Arduino)의 DHT11 온습도 센서로 측정된 데이터를 MySQL에 저장하기 위한 사전 작업으로 다음 포스팅에서는 측정된 데이터를 MySQL에 연동하는 방법을 알아보도록 하겠습니다.

 

오늘도 긴 글 읽어주셔서 감사합니다. 

 

 

 

 

반응형

+ Recent posts