Project tutorial
How to create a website communicating Arduino by using PHP

How to create a website communicating Arduino by using PHP © GPL3+

Create a professional website communicating Arduino Ethernet Shield by using HTML, CSS, JavaScript, and PHP through your Localhost.

  • 24,154 views
  • 6 comments
  • 21 respects

Components and supplies

Necessary tools and machines

Hy gluegun
Hot glue gun (generic)

Apps and online services

About this project

Update

How to use TheAmplituhedron.com to improve IoT projects? is my new project that handles server-side programming for you. By using TheAmplituhedron.com as a host, you can send and get data packets effortlessly over the Internet.

To support my projects and articles, you can visit my website here :)

Description

Creating a professional website to control my aquarium and my irrigation system in my home and

to receive the information about the home when I am not at the home is the main aspect of this project.

To achieve that goal, I created the Arduinautomotion project that includes 4 different HTML pages (Arduinautomotion.php, Arduinautomotioncontrol.php, Arduinautomotionformvalue.php, Arduinautomotioncommunication.php) in my Apache localhost.

Also, the Arduino Ethernet Shield hosts another HTML web page (ArduinoSide.php) which can be reached with the chosen IPAddress, to communicate with the Arduinautomotion website.

I had thought about this project since I had to go a vacation for 2 weeks and I could not make the adjustments of my aquarium because of it. Sometimes I need to shut down the internal filter to avoid the oxygen level increasing in the aquarium or I need to open my feeder to feed the fish remotely. I added six options to control my aquarium's content and one option to activate the irrigation system.

Furthermore, you can easily get the data about the home (such as temperature and humidity values come from DHT11 Sensor or methane gas value in the home comes from MQ4 Sensor) with Arduinautomotion through Arduino Ethernet Shield.

Thus, the Arduinautomotion website has an easy interface to get and send data about the home from Arduino.

HTML, CSS, JavaScript, PHP, and jQuery languages' knowledge will be required to understand whole project's content so that this is just a showcase for the project but if you know the languages, you can find all the web pages which the project includes as PHP code files below.

Note: I used Notepad++ to program the web pages.

How to send and get data between two PHP web pages

I used HTML forms, PHP Methods, and PHP $_SESSION [""] to get and to send data between the web pages. Get Method is easier than Post Method to use for communication but Post Method is more secure than Get Method so that I used Post Method to communicate between the web pages except for the ArduinoSide web page. However, Get Method is the easiest way to communicate with Arduino Ethernet Shield because HTTP GET Request is much easier than Post Request so I used Get Method for the ArduinoSide web page. In addition to, PHP $_SESSION [""] is the way to save the data permanently between the web pages more than two.

https://www.w3schools.com/php/php_forms.asp

https://www.w3schools.com/php/php_sessions.asp

How to set up the website on The Apache HTTP Server(Localhost)

The Apache HTTP Server is efficient for that kind of hosting but you can choose the XAMPP or another hosting server instead of it. In my case, AppServ >> www >> Arduinautomotion.php and its contents. I used my own IPAddress ("192.168.1.20" refers to Localhost) to access the web pages, but you have to use your IPAddress (as http://yourIPAddress/Arduinautomotion.php).

http://editrocket.com/articles/php_apache_windows.html

All contents Arduinautomotion.php has added at custom parts below.

How to connect with your Localhost from Android Devices

Windows differs from MAC for this job but the link below can be helpful for Windows.

https://stackoverflow.com/questions/4779963/how-can-i-access-my-localhost-from-my-android-device

After that, at the same Wİ-Fİ network you can easily access Arduinautomotion.php with your own IPAddress.

How to access your Localhost over Wi-Fi

Windows differs from MAC for this job but the link below can be helpful for Windows.

It works with your external IPAddress but you sure about that only you know the external IPAddress because it can be dangerous way to host.

https://stackoverflow.com/questions/5524116/accessing-localhost-xampp-from-another-computer-over-lan-network-how-to

Also, you have to use port forwarding to access ArduinoSide.php and it works with the IPAddress you choose in the ArduinoSide code below.

https://en.wikipedia.org/index.php?q=aHR0cHM6Ly9lbi53aWtpcGVkaWEub3JnL3dpa2kvUG9ydF9mb3J3YXJkaW5n

Arduinautomotion.php

It is the main page to communicate with Arduino Ethernet Shield, you can give commands from this page to Arduino and get the data about the home from Arduino easily.

The Change Menu explains the situations changing and shows which part is an object and which part is a sensor by changing parts' colour.

By the changing circles, it shows the sensors' values and the objects' situations.

1) Room Section

All the data about the room which comes from Arduinautomotioncommunication.php will be shown in the Room Section.

Before:

After:

2 )Aquarium Section

Whatever combinations you choose about the aquarium's parts with the HTML Forms will be sent to Arduinautomotionformvalue.php after that it will return as an output from Arduinautomotioncontrol.php to Arduinautomotion.php.

Before:

After:

3) Plant Section

The Hygrometer Sensor's values can be observed and starting the irrigation system can be considered through values. As the Aquarium Section the data will return as an output from Arduinautomotioncontrol.php to Arduinautomotion.php.

Before:

After:

4) Guide Section

It contains the Arduinautomotionformvalue.php web page to observe the choices of the form again. In addition to, it includes some instructions of the project and a picture which explains the communication process.

5 )Alert Box

Whichever values are in the range of the danger, an Alert Box which includes a Spider-man video file and an audio file ("Spider-sense is tingling") will appear when the Arduinautomotion.php web page is reloaded.

6) Parts of Arduinautomotion.php

The re-sizable websites as guidelines:

The whole changing circles:

Footer:

Arduinautomotioncontrol.php

It is embedded in Arduinautomotion.php web page to get all data as $_SESSION [" "] from Arduinautomotionformvalue.php and Arduinautomotioncommunication.php.

It saves the data permanently through the PHP pages.

Arduinautomotionformvalue.php

It gets the choices of the form from the Arduinautomotion.php and sends them ArduinoSide and Arduinautomotioncontrol.php. It is embedded in the Arduinautomotion.php web page's Guide section but also it is accessible with a new tab.

Arduinautomotioncommunication.php

The data comes from ArduinoSide is saved by Arduinautomotioncommunication.php after that it sends the data to Arduinautomotioncontrol.php automatically.

ArduinoSide

It is hosted by Arduino Ethernet Shield through DNS and you can access it with the IPAddress you choose in the ArduinoSide code below (as https://yourChosenIPAddress ).

Connections

Just make the connections as it is explained in the ArduinoSide code and the Fritzing picture below. Connect the one-way plugs and sockets to the 2-way relays and paste all components to a plain such as a cork board.

Arduino

DHT11 Module

Pin 2 -------------------------

2 Way Relay (1)

Pin 3 -------------------------

Pin 4 -------------------------

2 Way Relay (2)

Pin 5 -------------------------

Pin 6 -------------------------

2 Way Relay (3)

Pin 7 -------------------------

Pin 8 -------------------------

2 Way Relay (4)

Pin 9 -------------------------

Arduno Ethernet Shield

Pin 10 --------------------------

Pin 11 --------------------------

Pin 12 --------------------------

Pin 13 --------------------------

LDR

AO --------------------------

Flame Sensor

A1 --------------------------

MQ4 Sensor

A2 --------------------------

Hygrometer Module (1)

A3 --------------------------

Hygrometer Module (2)

A4 --------------------------

Hygrometer Module (3)

A5 --------------------------

The Arduino code is basically similar to the WebServer code which is in the Ethernet library examples folder.

I only added some codes to control sensors and to run commands which came from the Arduinautomotion website.

And connect the ADSL Cable from Arduino Ethernet Shield to The Router.

After the Arduino code is run, the Arduinautomotion website sends and gets data from Arduino through LAN over Wİ-Fİ.

The Test Videos

I tested the project after that I connect it with my aquarium and my irrigation system (it is basically a water motor), the project works great. :) It is the test video of the Arduinautoumotion project. I edited it with the trial version of Filmora and I did not remove the watermark because of the respect of their work.

Computer:

Android:

Code

Arduinautomotion.phpPHP
<?php
session_start();
?>
<!DOCTYPE html>
<html>

<?php include 'Arduinautomotioncontrol.php'; ?>

<head>

<link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon"></link>

<style>
html{
background-color:rgb(0, 0, 0);
}

button{
cursor:pointer;
user-select:none;
}
form{
user-select:none;
}

iframe{
	user-select:none;
}

p{
cursor:default;
user-select:none;
}

#guideText{
position:absolute;
top:400px;
font-size:20px;
color:white;
height:420px;
width:1000px;
overflow:auto;
}

img.icon{
user-select:none;
transiton:opacity 2s;
cursor:crosshair;
}
.icon:hover{opacity:0.5}

div.home{
background-color:rgb(25, 25, 25);
height:100px;
width:1320px;
position:sticky;
top:530px;
left:10px;
border:10px solid;
border-radius:20px;
border-color:rgb(35, 35, 35);
}

div.homeselector{
background-color:rgb(17, 17, 17);
height:60px;
width:220px;
border:2px solid;
border-radius:5px;
border-color:rgb(35, 35, 35);
transition:height width 0.5s;
cursor:pointer;
}.homeselector:hover{height:70px;width:240px;}

div.infopanel{
background-color:rgb(25, 25, 25);
position:absolute;
top:680px;
left:700px;
height:300px;
width:600px;
border:10px solid;
border-radius:20px;
border-color:rgb(35, 35, 35);
}

div.color{
position:absolute;
height:50px;
width:100px;
transition:height width 0.5s;
border:0.5px solid;
border-radius:100px;
border-color:transparent;
cursor:pointer;
}.color:hover{height:60px;width:110px;}

section.menuselector{
background-color:rgb(99, 99, 99);
height:150px;
width:200px;
padding:10px;
border:10px solid;
border-radius:20px;
border-color:rgb(35, 35, 35);
transition:border-color 0.5s,width 0.5s,height 0.5s;
}.menuselector:hover{border-color:red;height:160px;width:210px;}

svg.svg{
position:absolute;
top:680px;
left:10px;
background-color:transparent;
}

summary{
user-select:none;
}

iframe.guide{
position:absolute;
height:200px;
width:250px;
resize:both;
overflow:auto;
border:5px solid transparent;
transition:border-color 2s,height width 2s;
}.guide:hover{height:220px;width:270px;border-color:red;}
	
footer{
position:absolute;
top:2000px;
left:20px;
width:1300px;
height:200px;
border-width:5px;
border-radius:10px;
border-style:dashed;
border-color:black;
background-color:rgb(51, 51, 51);
}

div.animationbox{
background-color:white;
position:absolute;
top:5px;
left:10px;
width:10px;
height:10px;
border:5px solid black;
border-radius:50px;
animation:move 10s infinite;
}
@keyframes move{
 0%   {top: 5px;left:10px;background-color:white;border-color:black;}
 16%  {top: 5px;left:650px;background-color:black;border-color:white;}
 32%  {top: 5px;left:1275px;background-color:white;border-color:black;}
 48%  {top: 170px;left:1275px;background-color:black;border-color:white;}
 64%  {top: 170px;left:650px;background-color:white;border-color:black;}
 80%  {top: 170px;left:10px;background-color:black;border-color:white;}
}

a.openNewTab{
color:white;
position:absolute;
top:30px;
left:500px;
text-decoration:none;
font-size:30px;
transition:color 0.1s;
}.openNewTab:hover{color:green;}

select{
	cursor:pointer;
}

input.activateinput{
      cursor:pointer;
      position:absolute;
      top:270px;
      left:410px;
      color:white;
      border-color:transparent;
      background-color:transparent;
      font-weight:bold;
      font-size:40px;
      transition:color 0.1s;
}.activateinput:hover{color:red;}

img.spidey{
    position:absolute;
    top:400px;
    height:300px;
    width:350px;
    border:5px solid black;
}

#refresh{
    user-select:none;
    position:absolute;
    top:120px;
    left:600px;
    width:250px;
    height:250px;
    cursor:pointer;
    transition: border 0.5;
}#refresh:hover{border:5px solid green;}

#spideyVideo{
    position:absolute;
    top:0px;
    left:5px;
    width:250px;
    height:250px;
}

#BoxBackGround{
	display:none;
	background-color:rgb(214, 8, 8);
	position:fixed;
	top:0px;
	left:0px;
	opacity:0.7;
	width:0px;
	height:0px;
	
}
#Box{
	display:none;
	position:fixed;
	top:10px;
    background: url("https://media.giphy.com/media/3o7qDNfxtNRtLVv8qs/giphy.gif");
	background-color:black;
    background-repeat: no-repeat;
	background-size: 600px 200px;
	width:600px;
	height:200px;
	border: 5px solid black;
	border-radius:20px;
}

#times{
	position:absolute;
	color:white;
	top:0px;
	left:550px;
    font-weight: bold;
	font-size:40px;
    cursor:pointer;
	transition: color 0.5s;
	user-select:none;
}#times:hover{color:red;}

#BoxText{
	position:absolute;
	top:150px;
	left:300px;
	color:white;
	font-size:25px;
	user-select:none;
	cursor:default;
}

li.colorfulLi{
	user-select:none;
	transition:color 0.1s ;
}.colorfulLi:hover{color:green;}

a{
	user-select:none;
}

#StartInputText{
    position:absolute;
	top:90px;
	left:30px;
    color:white;
    border-color:transparent;
    background-color:transparent;
    font-weight:bold;
    font-size:20px;

}

#StopInputText{
	position:absolute;
	top:90px;
	left:130px;
    color:white;
    border-color:transparent;
    background-color:transparent;
    font-weight:bold;
    font-size:20px;

}
	
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
        $("#roomshome").click(function(){
         $(this).css("border-color", "red");
         $(aquariumshome).css("border-color", "rgb(35, 35, 35)");
		 $(plantshome).css("border-color", "rgb(35, 35, 35)");
		 $(guideshome).css("border-color", "rgb(35, 35, 35)");
    });
	    $("#aquariumshome").click(function(){
         $(roomshome).css("border-color", "rgb(35, 35, 35)");
         $(this).css("border-color", "red");
		 $(plantshome).css("border-color", "rgb(35, 35, 35)");
		 $(guideshome).css("border-color", "rgb(35, 35, 35)");
    });
	    $("#plantshome").click(function(){
         $(roomshome).css("border-color", "rgb(35, 35, 35)");
         $(aquariumshome).css("border-color", "rgb(35, 35, 35)");
		 $(this).css("border-color", "red");
		 $(guideshome).css("border-color", "rgb(35, 35, 35)");
    });
	    $("#guideshome").click(function(){
         $(roomshome).css("border-color", "rgb(35, 35, 35)");
         $(aquariumshome).css("border-color", "rgb(35, 35, 35)");
		 $(plantshome).css("border-color", "rgb(35, 35, 35)");
		 $(this).css("border-color", "red");
    });
    $("#iframeform").mouseenter(function(){
		$(this).css("position","absolute");
		$(this).css("top","60px");
		$(this).css("left","0px");
        $(this).css("height", "600px");
        $(this).css("width","1050px");
		$(this).css("border-color","green");
    });
    $("#iframeform").mouseleave(function(){
		$(this).css("position","absolute");
		$(this).css("top","60px");
		$(this).css("left","0px");
        $(this).css("height", "300px");
        $(this).css("width","350px");
		$(this).css("border-color","green");
    });	
});
</script>



<script>

function openAlert(){
var winW = window.innerWidth;
var winH = window.innerHeight;
var Saudio=document.getElementById("spideyAudio");
var Svideo=document.getElementById("spideyVideo");
document.getElementById("BoxBackGround").style.display = ("block");
document.getElementById("BoxBackGround").style.height = (winH+"px");
document.getElementById("BoxBackGround").style.width = (winW+"px");
document.getElementById("Box").style.display = ("block");
document.getElementById("Box").style.top = ("50px");
document.getElementById("Box").style.left = (winW/2-300+"px");
Saudio.play();
Saudio.loop=true;
Svideo.play();
Svideo.loop=true;
}

function closeAlert(){
var Saudio=document.getElementById("spideyAudio");
var Svideo=document.getElementById("spideyVideo");
document.getElementById("BoxBackGround").style.display = ("none");	
document.getElementById("Box").style.display = ("none");
Saudio.pause();
Saudio.loop=false;
Svideo.pause();
Svideo.loop=false;
}


function getDataFromArduino(){

var temperatureCelsiusValue = <?php echo $temperatureCelsiusValue?>;
var temperatureFahrenheitValue = <?php echo $temperatureFahrenheitValue?>;
var humidityValue = <?php echo $humidityValue?>;
var flamesensorValue = <?php echo $flamesensorValue ?>;
var MQ4sensorValue = <?php echo $MQ4sensorValue ?>;
var LdrValue = <?php echo $LdrValue?>;

var pumpValue = "<?php echo $pumpValue?>";
var lampValue = "<?php echo $lampValue ?>";
var feedingValue = "<?php echo $feedingValue?>";
var heaterValue = "<?php echo $heaterValue?>";
var filterexValue = "<?php echo $filterexValue?>";
var filterinValue = "<?php echo $filterinValue?>";

var plant1Value = <?php echo $plant1Value?>;
var plant2Value = <?php echo $plant2Value?>;
var plant3Value = <?php echo $plant3Value?>;
var irrigationValue = "<?php echo $irrigationValue?>";

var a = document.getElementById("temperaturecircle");
var b = document.getElementById("humiditycircle");
var c = document.getElementById("flamecircle");
var d = document.getElementById("gascircle");
var e = document.getElementById("lightcircle");

var f = document.getElementById("pumpcircle");
var g = document.getElementById("lampcircle");
var h = document.getElementById("feedcircle");
var j = document.getElementById("heatercircle");
var k = document.getElementById("filterexcircle");
var l = document.getElementById("filterincircle");

var n = document.getElementById("plant1circle");
var o = document.getElementById("plant2circle");
var p = document.getElementById("plant3circle");
var r = document.getElementById("irrigationcircle");

var t = document.getElementById("temperatureText");
var m = document.getElementById("temperatureMeter");
var t1 = document.getElementById("humidityText");
var m1 = document.getElementById("humidityMeter");
var t2 = document.getElementById("flameText");
var m2 = document.getElementById("flameMeter");
var t3 = document.getElementById("gasText");
var m3 = document.getElementById("gasMeter");
var t4 = document.getElementById("lightText");
var m4 = document.getElementById("lightMeter");
var t5 = document.getElementById("plant1Text");
var m5 = document.getElementById("plant1Meter");
var t6 = document.getElementById("plant2Text");
var m6 = document.getElementById("plant2Meter");
var t7 = document.getElementById("plant3Text");
var m7 = document.getElementById("plant3Meter");


t.innerHTML=temperatureCelsiusValue+'C'+'  '+temperatureFahrenheitValue+'F';
m.value=(temperatureCelsiusValue);
if(temperatureCelsiusValue<15||temperatureCelsiusValue>=40){
a.style.fill=("red");
openAlert();
}
if(temperatureCelsiusValue==15){
a.style.fill=("rgb(255, 93, 0)");
}
if(temperatureCelsiusValue>15&&temperatureCelsiusValue<40){
a.style.fill=("green");
}

t1.innerHTML=humidityValue+'%';
m1.value=(humidityValue);
if(humidityValue<20||humidityValue>=75){
b.style.fill=("red");
openAlert();
}
if(humidityValue==20){
b.style.fill=("rgb(255, 93, 0)");
}
if(humidityValue>20&&humidityValue<75){
b.style.fill=("green");
}

t2.innerHTML='Sensor value ='+flamesensorValue;
m2.value=(flamesensorValue);
if(flamesensorValue<500){
c.style.fill=("red");
openAlert();
}
if(flamesensorValue==500){
c.style.fill=("rgb(255, 93, 0)");
}
if(flamesensorValue>500){
c.style.fill=("green");
}

t3.innerHTML='Sensor value ='+MQ4sensorValue;
m3.value=(MQ4sensorValue);
if(MQ4sensorValue<0||MQ4sensorValue>=700){
d.style.fill=("red");
openAlert();
}
if(MQ4sensorValue==0){
d.style.fill=("rgb(255, 93, 0)");
}
if(MQ4sensorValue>0&&MQ4sensorValue<700){
d.style.fill=("green");
}

t4.innerHTML='Sensor value ='+LdrValue;
m4.value=(LdrValue);
if(LdrValue<0||LdrValue>=700){
e.style.fill=("red");
openAlert();
}
if(LdrValue==0){
e.style.fill=("rgb(255, 93, 0)");
}
if(LdrValue>0&&LdrValue<700){
e.style.fill=("green");
}

t5.innerHTML='Sensor value ='+plant1Value;
m5.value=(plant1Value);
if(plant1Value>501){
n.style.fill=("red");
openAlert();
}
if(plant1Value==499){
n.style.fill=("rgb(255, 93, 0)");
}
if(plant1Value<500){
n.style.fill=("green");
}

t6.innerHTML='Sensor value ='+plant2Value;
m6.value=(plant2Value);
if(plant2Value>501){
o.style.fill=("red");
openAlert();
}
if(plant2Value==499){
o.style.fill=("rgb(255, 93, 0)");
}
if(plant2Value<500){
o.style.fill=("green");
}

t7.innerHTML='Sensor value ='+plant3Value;
m7.value=(plant3Value);
if(plant3Value>=501){
p.style.fill=("red");
openAlert();
}
if(plant3Value==499){
p.style.fill=("rgb(255, 93, 0)");
}
if(plant3Value<500){
p.style.fill=("green");
}

if(pumpValue=='pumpIsOn'){
f.style.fill=("yellow");
}
if(pumpValue=='pumpIsOff'){
f.style.fill=("white");
}

if(lampValue=='lampIsOn'){
g.style.fill=("yellow");
}
if(lampValue=='lampIsOff'){
g.style.fill=("white");
}

if(feedingValue=='feedIsOn'){
h.style.fill=("yellow");
}
if(feedingValue=='feedIsOff'){
h.style.fill=("white");
}

if(heaterValue=='heaterIsOn'){
j.style.fill=("yellow");
}
if(heaterValue=='heaterIsOff'){
j.style.fill=("white");
}

if(filterexValue=='exIsOn'){
k.style.fill=("yellow");
}
if(filterexValue=='exIsOff'){
k.style.fill=("white");
}

if(filterinValue=='inIsOn'){
l.style.fill=("yellow");
}
if(filterinValue=='inIsOff'){
l.style.fill=("white");
}

if(irrigationValue=='start'){
r.style.fill=("yellow");
}
if(irrigationValue=='stop'){
r.style.fill=("white");
}

}

</script>

</head>

<body onpageshow="getDataFromArduino()">

<img class="icon" src="https://sites.psu.edu/gayborhood/files/2016/05/Black-and-White-City-at-Night-V.png" 
style="border:10px solid;border-radius:20px;border-color:rgb(35, 35, 35);height:500px;width:1320px;">

<p style="font-size:20px;position:absolute;top:1700px;left:700px;color:white;"><strong>Guidelines for managing to adjustments of the objects.</strong></p>

<iframe class="guide" src ="http://www.geekstips.com/mq4-sensor-natural-gas-methane-arduino/" style="top:1490px;left:1050px;"></iframe>
<iframe class="guide" src ="https://playground.arduino.cc/Learning/PhotoResistor"  style="top:1490px;left:700px;"></iframe>
<iframe class="guide" src ="https://www.arduino.cc/en/Guide/ArduinoEthernetShield" style="top:1270px;left:1050px;"></iframe>
<iframe class="guide" src ="https://www.dfrobot.com/wiki/index.php/DHT11_Temperature_and_Humidity_Sensor_(SKU:_DFR0067)" style="top:1270px;left:700px;"></iframe>
<iframe class="guide" src="http://www.wikihow.com/Grow-Healthy-Plants" style="top:1050px;left:1050px;"></iframe>
<iframe class="guide" src ="http://www.tetra-fish.com/aquarium-information/how-to-set-up-an-aquarium-fish-tank-setup.aspx"style="top:1050px;left:700px;"></iframe>

<div class="infopanel">

<div onclick="low()" class="color" style="top:20px;left:10px;background-color:green;">
<script>
function low(){
var color=document.getElementById("colorinfo");
color.style.color=("green");
document.getElementById("colorinfo").innerHTML = "The green circle shows that the selected element's sensor reading is under the risk level. ";
}
</script>
</div>
<div onclick="optimum()"class="color" style="top:20px;left:250px;background-color:rgb(255, 93, 0);">
<script>
function optimum(){
var color=document.getElementById("colorinfo");
color.style.color=("rgb(255, 93, 0)");
document.getElementById("colorinfo").innerHTML = "The orange circle shows that the selected element's sensor reading is the optimum level. ";
}
</script>
</div>
<div onclick="hgh()" class="color" style="top:20px;left:490px;background-color:red;">
<script>
function hgh(){
var color=document.getElementById("colorinfo");
color.style.color=("red");
document.getElementById("colorinfo").innerHTML = "The red circle shows that the selected element's sensor reading is top the risk level. ";
}
</script>
</div>
<div onclick="opens()" class="color" style="top:150px;left:125px;background-color:yellow;">
<script>
function opens(){
var color=document.getElementById("colorinfo");
color.style.color=("yellow");
document.getElementById("colorinfo").innerHTML = "The yellow circle shows that the selected element is on. ";
}
</script>
</div>
<div onclick="off()"class="color" style="top:150px;left:375px;background-color:white;">
<script>
function off(){
var color=document.getElementById("colorinfo");
color.style.color=("white");
document.getElementById("colorinfo").innerHTML = "The white circle which is default shows that the selected element is off. ";
}
</script>
</div>
<button onclick="sensorreadings()"style="color:white;background-color:transparent;border-color:transparent;height:50px;width:100px;position:absolute;top:100px;left:250px;"><strong>Sensors</strong></button>
<script>
function sensorreadings(){

var p= document.getElementById("temperatureline");
p.style.stroke=("rgb(4, 155, 163)");
var p1= document.getElementById("temperaturecircle");
p1.style.stroke=("rgb(4, 155, 163)");
var o= document.getElementById("humidityline");
o.style.stroke=("rgb(4, 155, 163)");
var o1= document.getElementById("humiditycircle");
o1.style.stroke=("rgb(4, 155, 163)");
var u= document.getElementById("flameline");
u.style.stroke=("rgb(4, 155, 163)");
var u1= document.getElementById("flamecircle");
u1.style.stroke=("rgb(4, 155, 163)");
var y= document.getElementById("gasline");
y.style.stroke=("rgb(4, 155, 163)");
var y1= document.getElementById("gascircle");
y1.style.stroke=("rgb(4, 155, 163)");
var t= document.getElementById("lightline");
t.style.stroke=("rgb(4, 155, 163)");
var t1= document.getElementById("lightcircle");
t1.style.stroke=("rgb(4, 155, 163)");
var x= document.getElementById("pumpline");
x.style.stroke=("rgb(58, 58, 58)");
var x1= document.getElementById("pumpcircle");
x1.style.stroke=("rgb(58, 58, 58)");
var a= document.getElementById("lampline");
a.style.stroke=("rgb(58, 58, 58)");
var a1= document.getElementById("lampcircle");
a1.style.stroke=("rgb(58, 58, 58)");
var s= document.getElementById("feedline");
s.style.stroke=("rgb(58, 58, 58)");
var s1= document.getElementById("feedcircle");
s1.style.stroke=("rgb(58, 58, 58)");
var d= document.getElementById("heaterline");
d.style.stroke=("rgb(58, 58, 58)");
var d1= document.getElementById("heatercircle");
d1.style.stroke=("rgb(58, 58, 58)");
var f= document.getElementById("filterexline");
f.style.stroke=("rgb(58, 58, 58)");
var f1= document.getElementById("filterexcircle");
f1.style.stroke=("rgb(58, 58, 58)");
var f= document.getElementById("filterinline");
f.style.stroke=("rgb(58, 58, 58)");
var f1= document.getElementById("filterincircle");
f1.style.stroke=("rgb(58, 58, 58)");
var h= document.getElementById("plant1line");
h.style.stroke=("rgb(4, 155, 163)");
var h1= document.getElementById("plant1circle");
h1.style.stroke=("rgb(4, 155, 163)");
var j= document.getElementById("plant2line");
j.style.stroke=("rgb(4, 155, 163)");
var j1= document.getElementById("plant2circle");
j1.style.stroke=("rgb(4, 155, 163)");
var k= document.getElementById("plant3line");
k.style.stroke=("rgb(4, 155, 163)");
var k1= document.getElementById("plant3circle");
k1.style.stroke=("rgb(4, 155, 163)");
var l= document.getElementById("irrigationline");
l.style.stroke=("rgb(58, 58, 58)");
var l1= document.getElementById("irrigationcircle");
l1.style.stroke=("rgb(58, 58, 58)");
var color=document.getElementById("colorinfo");
color.style.color=("rgb(4, 155, 163)");
document.getElementById("colorinfo").innerHTML = "The changing bars show that the rate of the selected object's sensor readings.";
}
</script>
<button onclick="onoffdata()" style="color:white;background-color:transparent;border-color:transparent;height:20px;width:100px;position:absolute;top:200px;left:250px;"><strong>Objects</strong></button>

<script>
function onoffdata(){

var p= document.getElementById("temperatureline");
p.style.stroke=("rgb(58, 58, 58)");
var p1= document.getElementById("temperaturecircle");
p1.style.stroke=("rgb(58, 58, 58)");
var o= document.getElementById("humidityline");
o.style.stroke=("rgb(58, 58, 58)");
var o1= document.getElementById("humiditycircle");
o1.style.stroke=("rgb(58, 58, 58)");
var u= document.getElementById("flameline");
u.style.stroke=("rgb(58, 58, 58)");
var u1= document.getElementById("flamecircle");
u1.style.stroke=("rgb(58, 58, 58)");
var y= document.getElementById("gasline");
y.style.stroke=("rgb(58, 58, 58)");
var y1= document.getElementById("gascircle");
y1.style.stroke=("rgb(58, 58, 58)");
var t= document.getElementById("lightline");
t.style.stroke=("rgb(58, 58, 58)");
var t1= document.getElementById("lightcircle");
t1.style.stroke=("rgb(58, 58, 58)");
var x= document.getElementById("pumpline");
x.style.stroke=("rgb(199, 0, 255)");
var x1= document.getElementById("pumpcircle");
x1.style.stroke=("rgb(199, 0, 255)");
var a= document.getElementById("lampline");
a.style.stroke=("rgb(199, 0, 255)");
var a1= document.getElementById("lampcircle");
a1.style.stroke=("rgb(199, 0, 255)");
var s= document.getElementById("feedline");
s.style.stroke=("rgb(199, 0, 255)");
var s1= document.getElementById("feedcircle");
s1.style.stroke=("rgb(199, 0, 255)");
var d= document.getElementById("heaterline");
d.style.stroke=("rgb(199, 0, 255)");
var d1= document.getElementById("heatercircle");
d1.style.stroke=("rgb(199, 0, 255)");
var f= document.getElementById("filterexline");
f.style.stroke=("rgb(199, 0, 255)");
var f1= document.getElementById("filterexcircle");
f1.style.stroke=("rgb(199, 0, 255)");
var f= document.getElementById("filterinline");
f.style.stroke=("rgb(199, 0, 255)");
var f1= document.getElementById("filterincircle");
f1.style.stroke=("rgb(199, 0, 255)");
var h= document.getElementById("plant1line");
h.style.stroke=("rgb(58, 58, 58)");
var h1= document.getElementById("plant1circle");
h1.style.stroke=("rgb(58, 58, 58)");
var j= document.getElementById("plant2line");
j.style.stroke=("rgb(58, 58, 58)");
var j1= document.getElementById("plant2circle");
j1.style.stroke=("rgb(58, 58, 58)");
var k= document.getElementById("plant3line");
k.style.stroke=("rgb(58, 58, 58)");
var k1= document.getElementById("plant3circle");
k1.style.stroke=("rgb(58, 58, 58)");
var l= document.getElementById("irrigationline");
l.style.stroke=("rgb(199, 0, 255)");
var l1= document.getElementById("irrigationcircle");
l1.style.stroke=("rgb(199, 0, 255)");
var color=document.getElementById("colorinfo");
color.style.color=("rgb(199, 0, 255)");
document.getElementById("colorinfo").innerHTML = "The changing bars show you that the selected object is on or off.";
}
</script>

<p id="colorinfo" style="position:absolute;top:250px;left:10px;color:white;">Please click the buttons and the color bars to learn the info about colors.</p>

</div>


<svg class="svg" height="1200px" width="600px">
<polyline id="temperatureline" points="50,50,300,200" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="humidityline" points="300,50,300,200" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="flameline"    points="550,50,300,200" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="gasline"      points="50,350,300,200" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="lightline"    points="550,350,300,200" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />

<polyline id="pumpline" points="50,450,300,600" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="lampline" points="300,450,300,600" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="feedline"points="550,450,300,600" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="heaterline" points="50,750,300,600" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="filterexline"points="300,750,300,600" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="filterinline" points="550,750,300,600" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />

<polyline id="plant1line" points="50,850,300,1000" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="plant2line" points="300,850,300,1000" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="plant3line" points="550,850,300,1000" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="irrigationline" points="300,1150,300,1000" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />

<circle id="temperaturecircle" cx="50" cy="50" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="humiditycircle" cx="300" cy="50" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="flamecircle" cx="550" cy="50" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="gascircle" cx="50" cy="350" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="lightcircle" cx="550" cy="350" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />

<circle id="pumpcircle" cx="50" cy="450" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="lampcircle" cx="300" cy="450" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="feedcircle" cx="550" cy="450" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="heatercircle" cx="50" cy="750" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="filterexcircle" cx="300" cy="750" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="filterincircle" cx="550" cy="750" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />

<circle id="plant1circle" cx="50" cy="850" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="plant2circle" cx="300" cy="850" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="plant3circle" cx="550" cy="850" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="irrigationcircle" cx="300" cy="1150" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />

<ellipse cx="300" cy="200" rx="200" ry="50" style="fill:rgb(99, 99, 99);stroke:rgb(58, 58, 58);stroke-width:5" />
<ellipse cx="300" cy="600" rx="200" ry="50" style="fill:rgb(99, 99, 99);stroke:rgb(58, 58, 58);stroke-width:5" />
<ellipse cx="300" cy="1000" rx="200" ry="50" style="fill:rgb(99, 99, 99);stroke:rgb(58, 58, 58);stroke-width:5" />

</svg>

<p style="font-size:40px;position:absolute;top:815px;left:235px;color:white;"><strong>ROOM</strong></p>
<p style="font-size:40px;position:absolute;top:1215px;left:195px;color:white;"><strong>AQUARUM</strong></p>
<p style="font-size:40px;position:absolute;top:1615px;left:235px;color:white;"><strong>PLANT</strong></p>


<div class="home">

<div id="guideshome"class="homeselector" style="position:absolute;top:20px;left:910px;">
<details>
<summary style="font-size:30px;text-align:center;color:white;"><strong>GUDE</strong></summary>
<div style="cursor:default;height:850px;width:1050px;background-color:rgb(25, 25, 25);position:absolute;left:-700px;">

<a href="http://localhost/Arduinautomotionformvalue.php" target="_blank" class="openNewTab">Open FormValue In New Tab</a>

<ul id="guideText">
  <li class="colorfulLi">When a form is sent to the FormValue page, form values are revealed in the iframe which named newsite in Guide.</li><br>
  <li class="colorfulLi">Form values are the saved data which give Arduino an ability to determine the adjustments of the aquarium and the plants. </li><br>
  <li class="colorfulLi">And all of the data go through the ArduinoSide page that is hosted by Arduino Ethernet Shield with the IP address you choose.</li><br>
  <li class="colorfulLi">After that, the Communication button in the ArduinoSide page has to be pushed to open the Communication page and to change the $_Session values.</li><br>
  <li class="colorfulLi">Lastly, the Arduinautomotion page has to refresh or the Reload button has to pushed to get the new data from Arduino.</li><br>
  <li class="colorfulLi">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.</li><br>
  <img id="Graphics" src="http://192.168.1.20/ArduinautomotionGraphics.jpg" style="width:1000px;">
  </ul>

<img id="refresh" src="https://pbs.twimg.com/profile_images/521160118671384576/1pv-cwfk_400x400.jpeg" onclick="reload()">
<script>
function reload(){
location.reload();
}
</script>

<iframe id="iframeform" srcdoc="<p>FormValue page will be shown in here after sending the forms with the data.</p><br><p>Click the Activate button to open FormValue page." style="position:absolute;top:60px;height:300px;width:350px;overflow:auto;border:5px solid green;" name="newsite"></iframe>
</div>
</details>
</div>

<div id="plantshome"class="homeselector" style="position:absolute;top:20px;left:650px;">
<details>
<summary style="font-size:30px;text-align:center;color:white;"><strong>PLANT</strong></summary>

<div style="cursor:default;height:550px;width:1050px;background-color:rgb(25, 25, 25);position:absolute;left:-400px;">

<section class="menuselector"style="position:absolute;top:350px;left:380px;">
<button onclick="cirrigation()"style="font-size:30px;text-align:left;border-color:transparent;background-color:transparent;height:60px;width:200px;position:absolute;top:0px;left:5px;color:white;"><strong>Irrigation system</strong></button>

<input  style="	cursor:pointer;position:absolute;top:90px;left:10px;"form="ActivationForm" type="radio" name="irrigationsystem" value="start" onclick="StartInput()"/><span id="StartInputText">Start</span>
<script>
function StartInput(){
	var x=document.getElementById("StartInputText");
	var y=document.getElementById("StopInputText");
	x.style.color=("red");
	y.style.color=("white");
}
</script>

<input  style="	cursor:pointer;position:absolute;top:90px;left:110px;" form="ActivationForm" type="radio" name="irrigationsystem" value="stop" onclick="StopInput()"/><span id="StopInputText">Stop</span>
<script>
function StopInput(){
	var x=document.getElementById("StartInputText");
	var y=document.getElementById("StopInputText");
	x.style.color=("white");
	y.style.color=("red");
}
</script>

<input class="activateinput" form="ActivationForm" type="submit" value="Activate" style="font-size:25px;position:absolute;top:130px;left:15px;"/>

</section>

<script>
function cirrigation(){
var x= document.getElementById("irrigationline");
x.style.stroke=("red");
var y= document.getElementById("irrigationcircle");
y.style.stroke=("red");
}
</script>

<section class="menuselector"style="position:absolute;top:50px;left:770px;">
<button onclick="cplant3()"style="font-size:30px;text-align:left;border-color:transparent;background-color:transparent;height:60px;width:200px;position:absolute;top:0px;left:5px;color:white;"><strong>Plant3</strong></button>
<p id="plant3Text" style="color:white;position:absolute;top:50px;left:15px;font-size:20px;font-weight:bold;">default</p>
<meter id="plant3Meter" style="width:150px;height:20px;position:absolute;top:120px;left:15px;" value="0" low="200" high="700" min="0" max="1023"></meter>
</section>

<script>
function cplant3(){
var x= document.getElementById("plant3line");
x.style.stroke=("red");
var y= document.getElementById("plant3circle");
y.style.stroke=("red");
}
</script>

<section class="menuselector"style="position:absolute;top:50px;left:380px;">
<button onclick="cplant2()"style="font-size:30px;text-align:left;border-color:transparent;background-color:transparent;height:60px;width:200px;position:absolute;top:0px;left:5px;color:white;"><strong>Plant2</strong></button>
<p id="plant2Text"style="color:white;position:absolute;top:50px;left:15px;font-size:20px;font-weight:bold;">default</p>
<meter id="plant2Meter" style="width:150px;height:20px;position:absolute;top:120px;left:15px;" value="0" low="200" high="700" min="0" max="1023"></meter>
</section>

<script>
function cplant2(){
var x= document.getElementById("plant2line");
x.style.stroke=("red");
var y= document.getElementById("plant2circle");
y.style.stroke=("red");
}
</script>

<section class="menuselector"style="position:absolute;top:50px;left:10px;">
<button onclick="cplant1()"style="font-size:30px;text-align:left;border-color:transparent;background-color:transparent;height:60px;width:200px;position:absolute;top:0px;left:5px;color:white;"><strong>Plant1</strong></button>
<p id="plant1Text"style="color:white;position:absolute;top:50px;left:15px;font-size:20px;font-weight:bold;">default</p>
<meter id="plant1Meter"style="width:150px;height:20px;position:absolute;top:120px;left:15px;" value="0" low="200" high="700" min="0" max="1023"></meter>
</section>

<script>
function cplant1(){
var x= document.getElementById("plant1line");
x.style.stroke=("red");
var y= document.getElementById("plant1circle");
y.style.stroke=("red");
}
</script>

</div>
</details>
</div>

<div id="aquariumshome"class="homeselector" style="position:absolute;top:20px;left:390px;">
<details>
<summary style="font-size:30px;text-align:center;color:white;"><strong>AQUARUM</strong></summary>
<div style="cursor:default;height:550px;width:1050px;background-color:rgb(25, 25, 25);position:absolute;left:-200px;">

<section class="menuselector"style="position:absolute;top:350px;left:770px;">
<button onclick="cfilterin()" style="font-size:30px;text-align:left;border-color:transparent;background-color:transparent;height:60px;width:200px;position:absolute;top:0px;left:5px;color:white;"><strong>Filter (internal)</strong></button>
</section>

<script>
function cfilterin(){
var x= document.getElementById("filterinline");
x.style.stroke=("red");
var y= document.getElementById("filterincircle");
y.style.stroke=("red");
}
</script>

<section class="menuselector"style="position:absolute;top:350px;left:380px;">
<button onclick="cfilterex()" style="font-size:30px;text-align:left;border-color:transparent;background-color:transparent;height:60px;width:200px;position:absolute;top:0px;left:5px;color:white;"><strong>Filter (external)</strong></button>
</section>

<script>
function cfilterex(){
var x= document.getElementById("filterexline");
x.style.stroke=("red");
var y= document.getElementById("filterexcircle");
y.style.stroke=("red");
}
</script>

...

This file has been truncated, please download it to see its full contents.
Arduinautomotioncontrol.phpPHP
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>

<title>Arduinautomotion</title><link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon"></link>

<?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.phpPHP
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>

<title>FormValue</title><link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon"></link>

<?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>

html{
	background-color:black;
}

div.serverpage{
	background-color:green;
	width:1300px;
	height:100px;
	text-align:center;
}

p{
	color:green;
	text-align:center;
	font-size:25px;
}

input.subMit{

position:absolute;
left:525px;
border:5px solid green;
width:300px;
height:50px;
font-size:20px;
color:white;
background-color:transparent;
cursor:pointer;
}
</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="http://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.phpPHP
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>

<title>Communication</title><link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon"></link>

<style>
body{
    background-image: url("https://i.ytimg.com/vi/kkVGBn-haDo/maxresdefault.jpg");
}

<?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.inoArduino
       /////////////////////////////////////////////////////////////////
      //                                                             //
     //                    -ARDUINAUTOMOTON-                       //
    //        Creating a professional website to communicate       //
   //                         with Arduino                        // 
  //               (Compatible with Android system)              //
 //                        by Kutluhan Aktar.                   //
/////////////////////////////////////////////////////////////////

 //
 // Creating a professional website to control my aquarium and my irrigation system in my home and 
 // to receive the information about the home when I am not at the home is the main aspect of this project.
 // To achive that goal I created the Arduinautmotion project that includes 4 different HTML pages in my Apache localhost.
 // Also, the Arduino Ethernet Shield hosts another HTML web page which can be reached with the chosen IPAddress, to communicate with the Arduinautomotion website. 
 // The Arduinautomotion website has an easy interface to get and send data about the home from Arduino.
 // All things the Arduinautomotion website does is explained on my Hackster.io page.(For instance, how Arduino communicates with the website using PHP Forms.)  
 // I programmed the Arduinautomotion website and its components with HTML,CSS,JavaScript and PHP so that it is just a showcase for Arduino side. 
 // If you know these languages, please check my Hackster.io page to see whole project's details and the Arduinautmotion website codes.
 // The Arduino code is basically similar to the WebServer code which is in the Ethernet library examples folder.
 // I only added some codes to control sensors and to run commands which came from the Arduinautomotion website.
 // I used a DHT11 module, a LDR, a Flame sensor and a MQ4 sensor for measuring the variables.
 // And I used four 2 way relay to control the aquarium's parts and the irrigation system.
 // The tricky part is that you  can not use  10,11,12,13 pins when using the Arduino Ethernet Shield so I used the analog pins instead of the digital pins to fulfill the project.
 // After the Arduino code is run, the Arduinautomotion website sends and gets data from Arduino through LAN over W-F.
 // 
 // Connections:
 //
 // Arduino 
 //
 //                                   DHT11 Module
 // Pin 2   -------------------------
 //
 //                                   2 Way Relay (1)
 // Pin 3   -------------------------
 // Pin 4   -------------------------
 //
 //                                   2 Way Relay (2)
 // Pin 5   -------------------------
 // Pin 6   -------------------------
 //
 //                                   2 Way Relay (3)
 // Pin 7   -------------------------
 // Pin 8   -------------------------
 //
 //                                   2 Way Relay (4)
 // Pin 9   -------------------------
 //                                   Arduno Ethernet Shield
 // Pin 10  --------------------------
 // Pin 11  --------------------------
 // Pin 12  --------------------------
 // Pin 13  --------------------------
 //
 //                                   LDR
 // AO      -------------------------- 
 //                             
 //                                   Flame Sensor 
 // A1      --------------------------
 //
 //                                   MQ4   Sensor
 // A2      --------------------------
 //
 //                                   Hygrometer Module (1)
 // A3      --------------------------
 //
 //                                   Hygrometer Module (2)
 // A4      --------------------------
 //
 //                                   Hygrometer Module (3)
 // A5      --------------------------
 //
 //
 
#include <SPI.h>
#include <Ethernet.h>
//Initial DHT11 library and create an object named dht to communicate with the sensor.
#include "DHT.h"

DHT dht;
// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = {
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED  // Your MAC address has to be here.
};
IPAddress ip(192, 168, 1, 21);

// Initialize the Ethernet server library
// with the IP address and port you want to use
// (port 80 is default for HTTP):
EthernetServer server(80);
// Define which pin connects to which object such as a air pump in your aquarium.
int pump = 3;
int lamp = 4;
int feed = 5;
int heater = 6;
int filterex =7;
int filterin =8;
int irrigation =9;
// Determine a string to collect the commands came from Arduiaautomotion.php.
String readString ;

void setup() {
  // Open serial communications and wait for port to open:
  Serial.begin(9600);
  // Determine the relay module's pins.
   pinMode(pump,OUTPUT);
   pinMode(lamp,OUTPUT);
   pinMode(feed,OUTPUT);
   pinMode(heater,OUTPUT);
   pinMode(filterex,OUTPUT);
   pinMode(filterin,OUTPUT);
   pinMode(irrigation,OUTPUT);
   // Give HIGH value for the default.
   digitalWrite(pump,HIGH);
   digitalWrite(lamp,HIGH);
   digitalWrite(feed,HIGH);
   digitalWrite(heater,HIGH);
   digitalWrite(filterex,HIGH);
   digitalWrite(filterin,HIGH);
   digitalWrite(irrigation,HIGH);
   //Connect Dht11 to data pin 2.
   dht.setup(2); 

  // Start the Ethernet connection and the server:
  Ethernet.begin(mac, ip);
  server.begin();
  Serial.print("server is at ");
  Serial.println(Ethernet.localIP());
}

void loop() {
 // This makes Arduino board to wait until the temperature and the humidity values are accurate.
 delay(dht.getMinimumSamplingPeriod());
 // The datas from DHT11 Sensor.
  float humidity = dht.getHumidity();
  
  float temperature = dht.getTemperature();
  
  float fahrenheit = dht.toFahrenheit(temperature);
  // Integer values of analog pins'readings.
  int ldrValue=analogRead(A0);

  int flameValue=analogRead(A1); 

  int MQ4Value=analogRead(A2); 

  int HygValueA=analogRead(A3);
  
  int HygValueB=analogRead(A4);

  int HygValueC=analogRead(A5);
   
  // Listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
    Serial.println("new client");
    // An http request ends with a blank line
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        // Add each data came from Arduinautomotion.php to String named readString.
        if (readString.length() < 135) {
          
          readString += c;
          //Serial.print(c);
         }
        Serial.println(readString);

        // If the line ends, initial a HTTP Request.
        if (c == '\n') {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type:text/html");
          client.println("Connection: close");  // the connection will be closed after completion of the response
          client.println();
          client.println("<!DOCTYPE HTML>");
          client.println("<html style=""background-color:black;"">");
          client.println("<head>");
          client.println("<title>ArduinoSide</title>"); // Header for the web page.
          client.println("<link rel=""icon"" href=""http://www.clker.com/cliparts/D/W/n/h/n/W/house-logo-hi.png""></link>"); // Describe the icon of the web page.
          client.println("</head>");
          client.println("<body>");
          // http://your IPAddress/your site? is the way to access the server.
          client.println("<form action=""http://192.168.1.20/Arduinautomotioncommunication.php?"" method=""get""  target=""_blank"">"); // The hidden HTML form for sending the information.
                    client.println("<input type=""hidden""  name=""temperatureCelsius"" "); // The easiest way to send data to the server is to use the Get Method, but it is not secure.However, the Post Method can be used for security.
          client.println("value=");
          client.println(temperature);
          client.println(">");
                    client.println("<input type=""hidden""  name=""temperatureFahrenheit"" ");
          client.println("value=");
          client.println(fahrenheit);
          client.println(">");
                    client.println("<input type=""hidden""  name=""humidity"" ");
          client.println("value=");
          client.println(humidity);
          client.println(">");
                    client.println("<input type=""hidden""  name=""flame"" ");
          client.println("value=");
          client.println(flameValue);
          client.println(">");
                    client.println("<input type=""hidden""  name=""MQ4sensor"" ");
          client.println("value=");
          client.println(MQ4Value);
          client.println(">");
                    client.println("<input type=""hidden""  name=""LDRsensor"" ");
          client.println("value=");
          client.println(ldrValue);
          client.println(">");
                    client.println("<input type=""hidden""  name=""plant1H"" ");
          client.println("value=");
          client.println(HygValueA);
          client.println(">");
                    client.println("<input type=""hidden""  name=""plant2H"" ");
          client.println("value=");
          client.println(HygValueB);
          client.println(">");
                    client.println("<input type=""hidden""  name=""plant3H"" ");
          client.println("value=");
          client.println(HygValueC);
          client.println(">");
          client.println("<input type=""submit"" value=""Communication"" style=""width:500px;height:200px;font-weight:bold;background-color:black;color:green;"">"); // When the Communication button is clicked, the information is sent to the server from the chosen IPAddress. 
          client.println("</form>");
          client.println("</body>");
          client.println("</html>");
          
          break;
        }

      }
    }
    // Give the web browser time to receive the data.
    delay(1);
    // Close the connection:
    client.stop();
    // Open the objects which are selected by Arduinautomotion.php (such as  internal filter or external filter in the Aquarium or irrigation system in the Plant).
           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");
  }
}

Custom parts and enclosures

Favicon
arduinautomotion_wNJ69zA666.ico
Spider-man video file
spidersense_Ge3umcKzBw.mp4
Spider-man audio file
spidermanvoice_EqWLILohmW.mp3

Schematics

Fritzing Picture
Arduinautomotion jjtyn69ggw
Graphics
Arduinautomotiongraphics 6ucvnrsyhj

Comments

Similar projects you might like

Car Counter using Arduino + Processing + PHP

Project tutorial by Team UNO

  • 7,558 views
  • 4 comments
  • 7 respects

How To Use TheAmplituhedron.com To Improve IoT Projects

Project tutorial by Kutluhan Aktar

  • 1,244 views
  • 0 comments
  • 8 respects

ESP8266 To Your Website

Project tutorial by Projecter

  • 8,058 views
  • 4 comments
  • 7 respects

Make an Enhanced R2-D2 to Be Controlled by an Android App

Project tutorial by Kutluhan Aktar

  • 1,280 views
  • 0 comments
  • 2 respects

Home Management System - Control your home from a website

Project tutorial by Ahmed El-Hinidy

  • 31,410 views
  • 21 comments
  • 115 respects

Android App-Based Home Automation System Using IOT

Project tutorial by Team Autoshack

  • 24,875 views
  • 17 comments
  • 75 respects
Add projectSign up / Login