산업 제조
산업용 사물 인터넷 | 산업자재 | 장비 유지 보수 및 수리 | 산업 프로그래밍 |
home  MfgRobots >> 산업 제조 >  >> Manufacturing Technology >> 제조공정

PHP 기반 웹 인터페이스로 아두이노 우노 제어하기

부품 및 소모품

PHP 기반 웹 인터페이스로 아두이노 우노 제어하기 Arduino UNO × 1
PHP 기반 웹 인터페이스로 아두이노 우노 제어하기 Arduino Ethernet Shield 2 × 1
PHP 기반 웹 인터페이스로 아두이노 우노 제어하기 DHT11 온습도 센서 (4핀) × 1
2채널 릴레이 모듈 × 4
미니 브레드보드 × 1
화염 센서 × 1
MQ4 가스 센서 (메탄) × 1
LDR (조도 센서) × 1
토양 습도 센서 (Hygrometer) × 3
ADSL 라우터 케이블 × 1
플러그 (1구) × 7
소켓 (1구) × 7
9V 배터리 × 1
9V 배터리 배럴 케이블 × 1

필수 도구 및 장비

PHP 기반 웹 인터페이스로 아두이노 우노 제어하기 글루건

앱 및 온라인 서비스

The Apache HTTP Server
Notepad++
PHP 기반 웹 인터페이스로 아두이노 우노 제어하기 Arduino IDE

프로젝트 소개

업데이트

TheAmplituhedron.com을 이용해 IoT 프로젝트 서버 사이드 프로그래밍을 간소화하는 새 프로젝트를 진행 중입니다. TheAmplituhedron.com을 호스트로 쓰면 인터넷을 통해 데이터 패킷을 손쉽게 송수신할 수 있습니다. 제 프로젝트와 글을 응원하시려면 웹사이트 방문 바랍니다.

설명

집을 비울 때 수족관과 관수 시스템을 원격 제어하고, 실내 환경 정보(온습도, 가스 등)를 확인하기 위해 Arduinautomotion 프로젝트를 만들었습니다. 아파치 로컬호스트에 4개 PHP 페이지(Arduinautomotion.php, Arduinautomotioncontrol.php, Arduinautomotionformvalue.php, Arduinautomotioncommunication.php)를 두고, 아두이노 이더넷 실드가 호스팅하는 또 다른 페이지(ArduinoSide.php)와 통신합니다.

2주 휴가 때 수족관 내부 필터를 끄거나 먹이 주기를 원격으로 못 해 어려움을 겪은 경험에서 시작했습니다. 수족관 관련 6가지 제어(펌프, 램프, 먹이, 히터, 외부/내부 필터)와 관수 시스템 1가지를 제어합니다. 또한 DHT11(온습도), MQ4(메탄), 화염, 조도, 토양 습도 센서 값도 웹에서 실시간 확인 가능합니다.

HTML, CSS, JavaScript, PHP, jQuery 지식이 있으면 전체 코드 이해에 도움이 되며, 아래에 모든 PHP 파일 원본을 제공합니다. 에디터는 Notepad++ 사용.

PHP 기반 웹 인터페이스로 아두이노 우노 제어하기
PHP 기반 웹 인터페이스로 아두이노 우노 제어하기

두 PHP 페이지 간 데이터 주고받기

HTML 폼, PHP $_POST/$_GET, $_SESSION으로 페이지 간 데이터 전달. GET이 간단하지만 POST가 더 안전해 아두이노 쪽(ArduinoSide)만 GET 사용, 나머지는 POST. $_SESSION으로 다중 페이지 간 데이터 영속 저장.

아파치 HTTP 서버(로컬호스트)에 웹사이트 올리기

아파치 효율적. XAMPP 등 대체 가능. 제 경우 AppServ > www > Arduinautomotion.php에 배치. 내 IP(예: 192.168.1.20)로 접속(https://yourIP/Arduinautomotion.php).

윈도우 아파치 PHP 설정 가이드

PHP 기반 웹 인터페이스로 아두이노 우노 제어하기

안드로이드 기기에서 로컬호스트 접속

윈도우/맥 차이 있음. 스택오버플로 답변 참고. 같은 와이파이면 본인 IP로 Arduinautomotion.php 접속 가능.

와이파이 너머 외부에서 로컬호스트 접속 (포트 포워딩)

외부 IP 사용 시 본인만 알도록 주의. 외부 접속 가이드, 포트 포워딩 위키 참고. ArduinoSide.php도 아두이노 코드에 설정한 IP로 포트 포워딩 필요.

주요 PHP 페이지 구조

1) Arduinautomotion.php (메인)

아두이노와 양방향 통신하는 메인 페이지. 명령 전송, 센서 데이터 수신. 상단 메뉴(Room, Aquarium, Plant, Guide)로 섹션 전환. 원형 인디케이터로 센서 값(녹색=정상, 주황=경계, 빨강=위험)과 액추에이터 상태(노랑=ON, 흰색=OFF) 시각화. 위험 수치 감지 시 스파이더맨 영상+음성 알림 팝업.

PHP 기반 웹 인터페이스로 아두이노 우노 제어하기

2) Arduinautomotioncontrol.php

Arduinautomotion.php에 임베드. Arduinautomotionformvalue.php(폼 값)와 Arduinautomotioncommunication.php(아두이노 센서 데이터)에서 $_SESSION으로 데이터 영속 보관.

3) Arduinautomotionformvalue.php

메인 페이지 폼 제출 수신 → $_SESSION 저장 → ArduinoSide와 Arduinautomotioncontrol.php로 전달. 가이드 섹션에 아이프레임으로 임베드, 새 탭으로도 열림.

PHP 기반 웹 인터페이스로 아두이노 우노 제어하기

4) Arduinautomotioncommunication.php

ArduinoSide에서 GET으로 보낸 센서 데이터 수신 → $_SESSION 저장 → 자동으로 Arduinautomotioncontrol.php로 전달.

PHP 기반 웹 인터페이스로 아두이노 우노 제어하기

5) ArduinoSide (아두이노 이더넷 실드 호스팅)

아두이노 이더넷 실드가 DNS로 호스팅. 설정한 IP(예: https://192.168.1.21)로 접속. 센서 읽기 후 숨김 폼으로 Arduinautomotioncommunication.php에 GET 전송. "Communication" 버튼 클릭 시 전송.

PHP 기반 웹 인터페이스로 아두이노 우노 제어하기

연결 배선

아래 핀맵과 프리칭 다이어그램 참조. 1구 플러그/소켓을 2채널 릴레이에 연결하고 코르크 보드 등에 고정.

아두이노
 DHT11 모듈          → 핀 2
 2채널 릴레이 (1)     → 핀 3, 4
 2채널 릴레이 (2)     → 핀 5, 6
 2채널 릴레이 (3)     → 핀 7, 8
 2채널 릴레이 (4)     → 핀 9
 이더넷 실드          → 핀 10, 11, 12, 13 (SPI 전용)
 LDR                 → A0
 화염 센서            → A1
 MQ4 센서            → A2
 토양 습도 (1)        → A3
 토양 습도 (2)        → A4
 토양 습도 (3)        → A5
PHP 기반 웹 인터페이스로 아두이노 우노 제어하기
PHP 기반 웹 인터페이스로 아두이노 우노 제어하기
PHP 기반 웹 인터페이스로 아두이노 우노 제어하기
PHP 기반 웹 인터페이스로 아두이노 우노 제어하기
PHP 기반 웹 인터페이스로 아두이노 우노 제어하기
PHP 기반 웹 인터페이스로 아두이노 우노 제어하기
PHP 기반 웹 인터페이스로 아두이노 우노 제어하기
PHP 기반 웹 인터페이스로 아두이노 우노 제어하기

아두이노 코드는 이더넷 라이브러리 예제 WebServer와 유사하며, 센서 제어 및 웹 명령 실행 로직만 추가했습니다. ADSL 케이블을 이더넷 실드-공유기 연결. 코드 업로드 후 LAN/와이파이로 웹과 아두이노 간 데이터 송수신 동작.

PHP 기반 웹 인터페이스로 아두이노 우노 제어하기

테스트 영상: 수족관·관수 시스템 연결 후 테스트 완료. Filmora 체험판으로 편집(워터마크 유지).

코드

Arduinautomotion.php PHP
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<?php include 'Arduinautomotioncontrol.php'; ?>
<head>
<link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon">
<style>
  /* CSS 생략: 원본 참조 */
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  // jQuery 메뉴 전환, 아이프레임 리사이즈 등
</script>
<script>
  // 알림 팝업, 센서 데이터 바인딩, SVG 원형 인디케이터 제어 등
</script>
</head>
<body onpageshow="getDataFromArduino()">
  /* HTML 구조 생략: 원본 참조 */
</body>
</html>
Arduinautomotioncontrol.php PHP
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>Arduinautomotion</title>
<link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon">
<?php
  $temperatureCelsiusValue = $_SESSION['TemperatureCelsius'];
  $temperatureFahrenheitValue = $_SESSION['TemperatureFahrenheit'];
  $humidityValue = $_SESSION['Humidity'];
  $flamesensorValue = $_SESSION['Flame'];
  $MQ4sensorValue = $_SESSION['MQ4Sensor'];
  $LdrValue = $_SESSION['LDRSensor'];
  $pumpValue = $_SESSION['Airpump'];
  $lampValue = $_SESSION['Lamp'];
  $feedingValue = $_SESSION['Feeding'];
  $heaterValue = $_SESSION['Heater'];
  $filterexValue = $_SESSION['Filterex'];
  $filterinValue = $_SESSION['Filterin'];
  $plant1Value = $_SESSION['Plant1H'];
  $plant2Value = $_SESSION['Plant2H'];
  $plant3Value = $_SESSION['Plant3H'];
  $irrigationValue = $_SESSION['Irrigation'];
?>
</head>
</html>
Arduinautomotionformvalue.php PHP
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>FormValue</title>
<link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon">
<?php
  $_SESSION['Airpump'] = $_POST["pump"];
  $_SESSION['Lamp'] = $_POST["lamp"];
  $_SESSION['Feeding'] = $_POST["feed"];
  $_SESSION['Heater'] = $_POST["heater"];
  $_SESSION['Filterex'] = $_POST["filterexternal"];
  $_SESSION['Filterin'] = $_POST["filterinternal"];
  $_SESSION['Irrigation'] = $_POST["irrigationsystem"];
?>
<style> /* CSS 생략 */ </style>
</head>
<body>
<div class="serverpage">
  <h1 style="font-size:40px;color:black;">Server has received the data from Arduinautomotion.</h1>
</div>
<p>Airpump= <?php echo $_SESSION['Airpump'];?></p><br>
<p>Lamp=<?php echo $_SESSION['Lamp'];?></p><br>
<p>Feeding=<?php echo $_SESSION['Feeding'];?></p><br>
<p>Heater=<?php echo $_SESSION['Heater'];?></p><br>
<p>Filterex=<?php echo $_SESSION['Filterex'];?></p><br>
<p>Filterin=<?php echo $_SESSION['Filterin'];?></p><br>
<p>Irrigation=<?php echo $_SESSION['Irrigation'];?></p><br>
<form action="https://192.168.1.21/" method="get" target="_blank">
  <input type="hidden" value="<?php echo $_SESSION['Airpump'];?>" name="airpump">
  <input type="hidden" value="<?php echo $_SESSION['Lamp'];?>" name="lamp">
  <input type="hidden" value="<?php echo $_SESSION['Feeding'];?>" name="feed">
  <input type="hidden" value="<?php echo $_SESSION['Heater'];?>" name="heater">
  <input type="hidden" value="<?php echo $_SESSION['Filterex'];?>" name="filterex">
  <input type="hidden" value="<?php echo $_SESSION['Filterin'];?>" name="filterin">
  <input type="hidden" value="<?php echo $_SESSION['Irrigation'];?>" name="irrigation">
  <input type="submit" value="Send and Get Data" class="subMit">
</form>
</body>
</html>
Arduinautomotioncommunication.php PHP
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>Communication</title>
<link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon">
<style> body{ background-image: url("https://i.ytimg.com/vi/kkVGBn-haDo/maxresdefault.jpg"); } </style>
<?php
  $_SESSION['TemperatureCelsius'] = $_GET["temperatureCelsius"];
  $_SESSION['TemperatureFahrenheit'] = $_GET["temperatureFahrenheit"];
  $_SESSION['Humidity'] = $_GET["humidity"];
  $_SESSION['Flame'] = $_GET["flame"];
  $_SESSION['MQ4Sensor'] = $_GET["MQ4sensor"];
  $_SESSION['LDRSensor'] = $_GET["LDRsensor"];
  $_SESSION['Plant1H'] = $_GET["plant1H"];
  $_SESSION['Plant2H'] = $_GET["plant2H"];
  $_SESSION['Plant3H'] = $_GET["plant3H"];
?>
</head>
<body></body>
</html>
ArduinoSide_Code.ino Arduino
/////////////////////////////////////////////////////////////////
// -ARDUINAUTOMOTON-
// 아두이노와 통신하는 전문 웹사이트 제작
// (안드로이드 호환)
// by Kutluhan Aktar
/////////////////////////////////////////////////////////////////
#include <SPI.h>
#include <Ethernet.h>
#include "DHT.h"
DHT dht;

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; // 본인 MAC 주소
IPAddress ip(192, 168, 1, 21); // 아두이노 고정 IP
EthernetServer server(80);

int pump = 3, lamp = 4, feed = 5, heater = 6, filterex = 7, filterin = 8, irrigation = 9;
String readString;

void setup() {
  Serial.begin(9600);
  pinMode(pump, OUTPUT); pinMode(lamp, OUTPUT); pinMode(feed, OUTPUT);
  pinMode(heater, OUTPUT); pinMode(filterex, OUTPUT); pinMode(filterin, OUTPUT); pinMode(irrigation, OUTPUT);
  digitalWrite(pump, HIGH); digitalWrite(lamp, HIGH); digitalWrite(feed, HIGH);
  digitalWrite(heater, HIGH); digitalWrite(filterex, HIGH); digitalWrite(filterin, HIGH); digitalWrite(irrigation, HIGH);
  dht.setup(2);
  Ethernet.begin(mac, ip);
  server.begin();
  Serial.print("server is at "); Serial.println(Ethernet.localIP());
}

void loop() {
  delay(dht.getMinimumSamplingPeriod());
  float humidity = dht.getHumidity();
  float temperature = dht.getTemperature();
  float fahrenheit = dht.toFahrenheit(temperature);
  int ldrValue = analogRead(A0);
  int flameValue = analogRead(A1);
  int MQ4Value = analogRead(A2);
  int HygValueA = analogRead(A3);
  int HygValueB = analogRead(A4);
  int HygValueC = analogRead(A5);

  EthernetClient client = server.available();
  if (client) {
    Serial.println("new client");
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        if (readString.length() < 135) readString += c;
        if (c == '\n') {
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type:text/html");
          client.println("Connection: close");
          client.println();
          client.println("");
          client.println("");
          client.println("ArduinoSide");
          client.println("");
          client.println("");
          client.println("
"); client.println(""); client.println(""); client.println(""); client.println(""); client.println(""); client.println(""); client.println(""); client.println(""); client.println(""); client.println(""); client.println("
"); break; } } } delay(1); client.stop(); // 웹에서 온 명령으로 릴레이 제어 if (readString.indexOf("?airpump=pumpIsOn") > 0) digitalWrite(pump, LOW); else if (readString.indexOf("?airpump=pumpIsOff") > 0) digitalWrite(pump, HIGH); if (readString.indexOf("&lamp=lampIsOn") > 0) digitalWrite(lamp, LOW); else if (readString.indexOf("&lamp=lampIsOff") > 0) digitalWrite(lamp, HIGH); if (readString.indexOf("&feed=feedIsOn") > 0) digitalWrite(feed, LOW); else if (readString.indexOf("&feed=feedIsOff") > 0) digitalWrite(feed, HIGH); if (readString.indexOf("&heater=heaterIsOn") > 0) digitalWrite(heater, LOW); else if (readString.indexOf("&heater=heaterIsOff") > 0) digitalWrite(heater, HIGH); if (readString.indexOf("&filterex=exIsOn") > 0) digitalWrite(filterex, LOW); else if (readString.indexOf("&filterex=exIsOff") > 0) digitalWrite(filterex, HIGH); if (readString.indexOf("&filterin=inIsOn") > 0) digitalWrite(filterin, LOW); else if (readString.indexOf("&filterin=inIsOff") > 0) digitalWrite(filterin, HIGH); if (readString.indexOf("&irrigation=start") > 0) digitalWrite(irrigation, LOW); else if (readString.indexOf("&irrigation=stop") > 0) digitalWrite(irrigation, HIGH); readString = ""; Serial.println("client disconnected"); } }

커스텀 파트 및 인클로저

  • arduinautomotion_wNJ69zA666.ico
  • spidersense_Ge3umcKzBw.mp4
  • spidermanvoice_EqWLILohmW.mp3

회로도

PHP 기반 웹 인터페이스로 아두이노 우노 제어하기 PHP 기반 웹 인터페이스로 아두이노 우노 제어하기

제조공정

  1. 첫 AWS CloudFormation 템플릿 구축 – 실용 가이드
  2. 라즈베리 파이에서 PIR 모션 센서로 LED 제어하기
  3. 파이어베이스로 두 아두이노 간 온습도 데이터 전송하기
  4. 아두이노로 범용 IR 리모컨 만들기: 단계별 가이드
  5. 아두이노 우노 기반 인간 감지 로봇: 센서 통합 단계별 가이드
  6. 아두이노로 만드는 신뢰도 높은 적외선 심박 센서: 단계별 가이드
  7. 디지털 신장계 제작: 아두이노 & 레이저 센서로 키 측정하기
  8. 스마트 IoT 자 제작: ESP8266, 아두이노 & 초음파 센서로 실시간 모니터링
  9. 아두이노로 지구 질량 측정하기: 단계별 DIY 가이드
  10. 아두이노와 프로세싱으로 실시간 디지털 나침반 만들기