Как создать веб-сайт, взаимодействующий с Arduino с помощью PHP
Компоненты и расходные материалы
![]() |
| × | 1 | |||
![]() |
| × | 1 | |||
![]() |
| × | 1 | |||
| × | 4 | ||||
| × | 1 | ||||
| × | 1 | ||||
| × | 1 | ||||
| × | 1 | ||||
| × | 3 | ||||
| × | 1 | ||||
| × | 7 | ||||
| × | 7 | ||||
| × | 1 | ||||
| × | 1 |
Необходимые инструменты и машины
![]() |
|
Приложения и онлайн-сервисы
| ||||
| ||||
![]() |
|
Об этом проекте
Обновить
Как использовать TheAmplituhedron.com для улучшения проектов Интернета вещей? это мой новый проект, который занимается программированием на стороне сервера для вас. Используя TheAmplituhedron.com в качестве хоста, вы можете легко отправлять и получать пакеты данных через Интернет.
Чтобы поддержать мои проекты и статьи, вы можете посетить мой сайт здесь :)
Описание
Создание профессионального веб-сайта для управления аквариумом и ирригационной системой в моем доме и
получать информацию о доме, когда меня нет дома, является основным аспектом этого проекта.
Для достижения этой цели я создал проект Arduinautomotion, который включает 4 разных HTML-страницы (Arduinautomotion.php, Arduinautomotioncontrol.php, Arduinautomotionformvalue.php, Arduinautomotioncommunication.php ) в моем локальном хосте Apache.
Кроме того, на Arduino Ethernet Shield размещена еще одна веб-страница HTML (ArduinoSide.php), к которой можно перейти по выбранному IP-адресу для связи с веб-сайтом Arduinautomotion.
Я думал об этом проекте с тех пор, как мне нужно было уехать в отпуск на 2 недели, и из-за этого я не мог настроить свой аквариум. Иногда мне нужно отключить внутренний фильтр, чтобы избежать повышения уровня кислорода в аквариуме, или мне нужно открыть кормушку, чтобы кормить рыб удаленно. Я добавил шесть опций для управления содержимым аквариума и одну опцию для активации системы орошения.
Кроме того, вы можете легко получить данные о доме (например, значения температуры и влажности поступают от датчика DHT11 или значение газообразного метана в доме поступает от датчика MQ4) с помощью Arduinautomotion через Arduino Ethernet Shield.
Таким образом, веб-сайт Arduinautomotion имеет простой интерфейс для получения и отправки данных о доме из Arduino.
Знания языков HTML, CSS, JavaScript, PHP и jQuery потребуются для понимания всего содержимого проекта, так что это просто демонстрация проекта, но если вы знаете языки, вы можете найти все веб-страницы, которые включает проект как Файлы кода PHP ниже.
Примечание:я использовал Notepad ++ для программирования веб-страниц.


Как отправлять и получать данные между двумя веб-страницами PHP
Я использовал формы HTML, методы PHP и PHP $ _SESSION [""] для получения и отправки данных между веб-страницами. Get Method проще, чем Post Method для связи, но Post Method более безопасен, чем Get Method, поэтому я использовал Post Method для связи между веб-страницами, за исключением веб-страницы ArduinoSide. Однако метод Get - это самый простой способ связи с Arduino Ethernet Shield, поскольку HTTP-запрос GET намного проще, чем Post-запрос, поэтому я использовал метод Get для веб-страницы ArduinoSide. В дополнение к этому, PHP $ _SESSION [""] - это способ постоянно сохранять данные между более чем двумя веб-страницами.
https://www.w3schools.com/php/php_forms.asp
https://www.w3schools.com/php/php_sessions.asp
Как настроить веб-сайт на HTTP-сервере Apache (локальный хост)
HTTP-сервер Apache эффективен для такого типа хостинга, но вместо него вы можете выбрать XAMPP или другой хостинг-сервер. В моем случае AppServ>> www>> Arduinautomotion.php и его содержимое. Я использовал свой собственный IP-адрес («192.168.1.20» относится к Localhost) для доступа к веб-страницам, но вы должны использовать свой IP-адрес (как http://yourIPAddress/Arduinautomotion.php).
http://editrocket.com/articles/php_apache_windows.html

Все содержимое Arduinautomotion.php добавлено в пользовательские части ниже.
Как подключиться к локальному хосту с устройств Android
Windows отличается от MAC для этой работы, но ссылка ниже может быть полезна для Windows.
https://stackoverflow.com/questions/4779963/how-can-i-access-my-localhost-from-my-android-device
После этого в той же сети Wİ-Fİ вы можете легко получить доступ к Arduinautomotion.php со своим собственным IP-адресом.
Как получить доступ к локальному хосту через Wi-Fi
Windows отличается от MAC для этой работы, но ссылка ниже может быть полезна для Windows.
Он работает с вашим внешним IP-адресом, но вы уверены, что только вы знаете внешний IP-адрес, потому что это может быть опасным способом размещения.
https://stackoverflow.com/questions/5524116/accessing-localhost-xampp-from-another-computer-over-lan-network-how-to
Кроме того, вы должны использовать переадресацию портов для доступа к ArduinoSide.php, и он работает с IP-адресом, который вы выбираете в коде ArduinoSide ниже.
https://en.wikipedia.org/index.php?q=aHR0cHM6Ly9lbi53aWtpcGVkaWEub3JnL3dpa2kvUG9ydF9mb3J3YXJkaW5n
Arduinautomotion.php
Это главная страница для связи с Arduino Ethernet Shield, с этой страницы вы можете отдавать команды Arduino и легко получать данные о доме от Arduino.
Меню «Изменить» объясняет, как меняются ситуации, и показывает, какая часть является объектом, а какая - датчиком, изменяя цвет частей.
Меняя кружки, он показывает значения датчиков и положения объектов.








1) Секция помещения
Все данные о комнате, поступающие из Arduinautomotioncommunication.php, будут показаны в разделе «Комната».
Раньше:


После:


2) Секция аквариума
Какие бы комбинации вы ни выбрали для частей аквариума с HTML-формами, они будут отправлены в Arduinautomotionformvalue.php, после чего они вернутся в виде выходных данных из Arduinautomotioncontrol.php в Arduinautomotion.php.
Раньше:


После:

3) Завод
Значения датчика гигрометра можно наблюдать, а запуск системы орошения можно рассматривать с помощью значений. В разделе «Аквариум» данные будут возвращены в виде выходных данных из Arduinautomotioncontrol.php в Arduinautomotion.php.
Раньше:


После:


4) Раздел руководства
Он содержит веб-страницу Arduinautomotionformvalue.php, чтобы снова наблюдать за выбором формы. Кроме того, он включает в себя некоторые инструкции по проекту и картинку, которая объясняет процесс общения.



5) Окно предупреждения
Какие бы значения ни находились в диапазоне опасности, при перезагрузке веб-страницы Arduinautomotion.php появится окно с предупреждением, которое включает видеофайл Человека-паука и аудиофайл ("Spider-sense is tingling").

6) Части Arduinautomotion.php
Веб-сайты с изменяемым размером в качестве рекомендаций:


Целые меняющиеся круги:




Нижний колонтитул:

Arduinautomotioncontrol.php
Он встроен в веб-страницу Arduinautomotion.php для получения всех данных в виде $ _SESSION [""] из Arduinautomotionformvalue.php и Arduinautomotioncommunication.php.
Он постоянно сохраняет данные на страницах PHP.
Arduinautomotionformvalue.php
Он получает выбор формы из Arduinautomotion.php и отправляет их ArduinoSide и Arduinautomotioncontrol.php. Он встроен в раздел руководства веб-страницы Arduinautomotion.php, но также доступен в новой вкладке.

Arduinautomotioncommunication.php
Данные, поступающие из ArduinoSide, сохраняются Arduinautomotioncommunication.php, после чего он автоматически отправляет данные в Arduinautomotioncontrol.php.

ArduinoSide
Он размещен на Arduino Ethernet Shield через DNS, и вы можете получить к нему доступ с IP-адресом, который вы выбираете в коде ArduinoSide ниже (как https:// yourChosenIPAddress).

Связи
Просто выполните подключения, как это объясняется в коде ArduinoSide и на картинке Fritzing ниже. Подсоедините односторонние вилки и розетки к двухпозиционным реле и приклейте все компоненты на простую поверхность, например на пробковую доску.
Ардуино
Модуль DHT11
Контакт 2 -------------------------
2-ходовое реле (1)
Контакт 3 -------------------------
Контакт 4 -------------------------
2-ходовое реле (2)
Контакт 5 -------------------------
Контакт 6 -------------------------
2-ходовое реле (3)
Контакт 7 -------------------------
Контакт 8 -------------------------
2-ходовое реле (4)
Контакт 9 -------------------------
Arduno Ethernet Shield
Контакт 10 --------------------------
Контакт 11 --------------------------
Контакт 12 --------------------------
Контакт 13 --------------------------
LDR
АО --------------------------
Датчик пламени
A1 --------------------------
Датчик MQ4
A2 --------------------------
Модуль гигрометра (1)
A3 --------------------------
Модуль гигрометра (2)
A4 --------------------------
Модуль гигрометра (3)
A5 --------------------------








Код Arduino в основном похож на код WebServer, который находится в папке примеров библиотеки Ethernet.
Я только добавил несколько кодов для управления датчиками и выполнения команд, которые пришли с веб-сайта Arduinautomotion.
И подключите кабель ADSL от Arduino Ethernet Shield к маршрутизатору.
После запуска кода Arduino веб-сайт Arduinautomotion отправляет и получает данные от Arduino через LAN через Wİ-Fİ.

Тестовые видео
Я протестировал проект, после чего подключил его к своему аквариуму и системе орошения (по сути, это водяной мотор), проект отлично работает. :) Это тестовое видео проекта Arduinautoumotion. Я редактировал его с помощью пробной версии Filmora и не удалял водяной знак из уважения к их работе.
Компьютер:
Android:
Код
- Arduinautomotion.php
- Arduinautomotioncontrol.php
- Arduinautomotionformvalue.php
- Arduinautomotioncommunication.php
- ArduinoSide_Code.ino
Arduinautomotion.php PHP
phpsession_start ();?> php include 'Arduinautomotioncontrol.php'; ?>Guidelines for managing to adjustments of the objects.
Please click the buttons and th e color bars to learn the info about colors.
ROOM
AQUARUM
PLANT
GUDE
Open FormValue In New Tab
- When a form is sent to the FormValue page, form values are revealed in the iframe which named newsite in Guide.
- Form values are the saved data which give Arduino an ability to determine the adjustments of the aquarium and the plants.
- And all of the data go through the ArduinoSide page that is hosted by Arduino Ethernet Shield with the IP address you choose.
- After that, the Communication button in the ArduinoSide page has to be pushed to open the Communication page and to change the $_Session values.
- Lastly, the Arduinautomotion page has to refresh or the Reload button has to pushed to get the new data from Arduino.
- If the information about the room is in the dangerous range, the homepage notifies you with a voice alert box which includes a Spider-man video and audio file that are in the www folder in Apache localhost furthermore the related information circle changes its colour to red.
![]()
PLANT
AQUARUM
...This file has been truncated, please download it to see its full contents.Arduinautomotioncontrol.phpPHP
Arduinautomotion Arduinautomotionformvalue.phpPHP
FormValue Server has received the data from Arduinautomotion.
Airpump=
Lamp=
Feeding=
Heater=
Filterex=
Filterin=
Irrigation=
Arduinautomotioncommunication.phpPHP
Communication