Send HTTP POST Request to a Secure Webpage with PHP

Abhishek Ghosh

By Abhishek Ghosh August 21, 2020 11:16 am Updated on August 21, 2020

Send HTTP POST Request to a Secure Webpage with PHP

You can send HTTP Post Request to any secured URL with a simple PHP script. Often this kind of script is helpful to build various buttons. In our different tutorials on IoT projects with ESP32, like in the guide Controlling AC Powered Appliances With ESP32 and IBM Watson IoT, we need to send a pair of HTTP POST requests to turn a thing ON and OFF. That is easy from command line using cURL. We can use cURL from PHP but also we can avoid using cURL in newer PHP versions for sending a HTTP POST request. Below is a snippet to post to a secure page is as follows:

<?php
$data = array ('foo' => 'bar', 'bar' => 'baz');
$data = http_build_query($data);

$context_options = array (
        'http' => array (
            'method' => 'POST',
            'header'=> "Content-type: application/x-www-form-urlencoded\r\n"
                . "Content-Length: " . strlen($data) . "\r\n",
            'content' => $data
            )
        );

$context = context_create_stream($context_options)
$fp = fopen('https://url', 'r', false, $context);
?>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<?php

$data = array ('foo' => 'bar', 'bar' => 'baz');

$data = http_build_query($data);

$context_options = array (

'http' => array (

'method' => 'POST',

'header'=> "Content-type: application/x-www-form-urlencoded\r\n"

. "Content-Length: " . strlen($data) . "\r\n",

'content' => $data

)

);

$context = context_create_stream($context_options)

$fp = fopen('https://url', 'r', false, $context);

?>

The above snippet takes care of HTTPS URL. You have to execute this PHP file via HTML to get it working. We can directly send a HTTP POST request via HTML forms but that is not secure! Another method is using shell_exec function of PHP to execute previously saved bash scripts:

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>LED Control</title>
</head>
        <body>
        LED Control:
        <form method="get" action="esp32.php">
                <input type="submit" value="ON" name="on">
                <input type="submit" value="OFF" name="off">
         </form>
         <?php
         if(isset($_GET['on'])){
                $gpio_on = shell_exec("/var/www/bin/script1.php");
                 echo "LED is on";
         }
         else if(isset($_GET['off'])){
                 $gpio_off = shell_exec("/var/www/bin/script2.php");
                 echo "LED is off";
         }
         ?>
         </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<html>

<head>

<title>LED Control</title>

</head>

<body>

LED Control:

</form>

<?php

if(isset($_GET['on'])){

$gpio_on = shell_exec("/var/www/bin/script1.php");

echo "LED is on";

}

else if(isset($_GET['off'])){

$gpio_off = shell_exec("/var/www/bin/script2.php");

echo "LED is off";

}

?>

</body>

</html>

You can use toggle buttons like shown here :

https://codepen.io/designcouch/pen/sDAvk

1	https://codepen.io/designcouch/pen/sDAvk

Send HTTP POST Request to a Secure Webpage with PHP

The above will require jQuery :

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

1	https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

This is the HTML :

<h1>iOS Switches with Labels</h1>
<div id="toggles">
  <input type="checkbox" name="checkbox1" id="checkbox1" class="ios-toggle" checked/>
  <label for="checkbox1" class="checkbox-label" data-off="off" data-on="on"></label>
  
  <input type="checkbox" name="checkbox1" id="checkbox2" class="ios-toggle" checked/>
  <label for="checkbox2" class="checkbox-label" data-off="no" data-on="yes"></label>
  
  <input type="checkbox" name="checkbox1" id="checkbox3" class="ios-toggle" checked/>
  <label for="checkbox3" class="checkbox-label" data-off="longer label off" data-on="longer label on"></label>
</div>

1

2

3

4

5

6

7

8

9

10

11

<h1>iOS Switches with Labels</h1>

</div>

This is the CSS :

<style>
*,*:before,*:after{
box-sizing:border-box;
margin:0;
padding:0;
/*transition*/
-webkit-transition:.25s ease-in-out;
   -moz-transition:.25s ease-in-out;
     -o-transition:.25s ease-in-out;
        transition:.25s ease-in-out;
outline:none;
font-family:Helvetica Neue,helvetica,arial,verdana,sans-serif;
}
body{
background:#f1f1f1;
}
h1{
margin:75px auto 0 auto;
text-align:center;
font-weight:200;
color:#4b4b4b;
}
#toggles{
width:60px;
margin:50px auto;
text-align:center;
}
.ios-toggle,.ios-toggle:active{
position:absolute;
top:-5000px;
height:0;
width:0;
opacity:0;
border:none;
outline:none;
}
.checkbox-label{
display:block;
position:relative;
padding:10px;
margin-bottom:20px;
font-size:12px;
line-height:16px;
width:100%;
height:36px;
/*border-radius*/
-webkit-border-radius:18px;
   -moz-border-radius:18px;
        border-radius:18px;
background:#f8f8f8;
cursor:pointer;
}
.checkbox-label:before{
content:'';
display:block;
position:absolute;
z-index:1;
line-height:34px;
text-indent:40px;
height:36px;
width:36px;
/*border-radius*/
-webkit-border-radius:100%;
   -moz-border-radius:100%;
        border-radius:100%;
top:0px;
left:0px;
right:auto;
background:white;
/*box-shadow*/
-webkit-box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;
   -moz-box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;
        box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;
}
.checkbox-label:after{
content:attr(data-off);
display:block;
position:absolute;
z-index:0;
top:0;
left:-300px;
padding:10px;
height:100%;
width:300px;
text-align:right;
color:#bfbfbf;
white-space:nowrap;
}
.ios-toggle:checked + .checkbox-label{
/*box-shadow*/
-webkit-box-shadow:inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
   -moz-box-shadow:inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
        box-shadow:inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
}
.ios-toggle:checked + .checkbox-label:before{
left:calc(100% - 36px);
/*box-shadow*/
-webkit-box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
   -moz-box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
        box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
}
.ios-toggle:checked + .checkbox-label:after{
content:attr(data-on);
left:60px;
width:36px;
}
/* GREEN CHECKBOX */

#checkbox1 + .checkbox-label{
/*box-shadow*/
-webkit-box-shadow:inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
   -moz-box-shadow:inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
        box-shadow:inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
}
#checkbox1:checked + .checkbox-label{
/*box-shadow*/
-webkit-box-shadow:inset 0 0 0 18px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
   -moz-box-shadow:inset 0 0 0 18px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
        box-shadow:inset 0 0 0 18px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
}
#checkbox1:checked + .checkbox-label:after{
color:rgba(19,191,17,1);
}
/* RED CHECKBOX */

#checkbox2 + .checkbox-label{
/*box-shadow*/
-webkit-box-shadow:inset 0 0 0 0px #f35f42,0 0 0 2px #dddddd;
   -moz-box-shadow:inset 0 0 0 0px #f35f42,0 0 0 2px #dddddd;
        box-shadow:inset 0 0 0 0px #f35f42,0 0 0 2px #dddddd;
}
#checkbox2:checked + .checkbox-label{
/*box-shadow*/
-webkit-box-shadow:inset 0 0 0 20px #f35f42,0 0 0 2px #f35f42;
   -moz-box-shadow:inset 0 0 0 20px #f35f42,0 0 0 2px #f35f42;
        box-shadow:inset 0 0 0 20px #f35f42,0 0 0 2px #f35f42;
}
#checkbox2:checked + .checkbox-label:after{
color:#f35f42;
}
/* BLUE CHECKBOX */

#checkbox3 + .checkbox-label{
/*box-shadow*/
-webkit-box-shadow:inset 0 0 0 0px #1fc1c8,0 0 0 2px #dddddd;
   -moz-box-shadow:inset 0 0 0 0px #1fc1c8,0 0 0 2px #dddddd;
        box-shadow:inset 0 0 0 0px #1fc1c8,0 0 0 2px #dddddd;
}
#checkbox3:checked + .checkbox-label{
/*box-shadow*/
-webkit-box-shadow:inset 0 0 0 20px #1fc1c8,0 0 0 2px #1fc1c8;
   -moz-box-shadow:inset 0 0 0 20px #1fc1c8,0 0 0 2px #1fc1c8;
        box-shadow:inset 0 0 0 20px #1fc1c8,0 0 0 2px #1fc1c8;
}
#checkbox3:checked + .checkbox-label:after{
color:#1fc1c8;
}
</style>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

<style>

*,*:before,*:after{

box-sizing:border-box;

margin:0;

padding:0;

/*transition*/

-webkit-transition:.25s ease-in-out;

-moz-transition:.25s ease-in-out;

-o-transition:.25s ease-in-out;

transition:.25s ease-in-out;

outline:none;

font-family:Helvetica Neue,helvetica,arial,verdana,sans-serif;

}

body{

background:#f1f1f1;

}

h1{

margin:75px auto 0 auto;

text-align:center;

font-weight:200;

color:#4b4b4b;

}

#toggles{

width:60px;

margin:50px auto;

text-align:center;

}

.ios-toggle,.ios-toggle:active{

position:absolute;

top:-5000px;

height:0;

width:0;

opacity:0;

border:none;

outline:none;

}

.checkbox-label{

display:block;

position:relative;

padding:10px;

margin-bottom:20px;

font-size:12px;

line-height:16px;

width:100%;

height:36px;

/*border-radius*/

-webkit-border-radius:18px;

-moz-border-radius:18px;

border-radius:18px;

background:#f8f8f8;

cursor:pointer;

}

.checkbox-label:before{

content:'';

display:block;

position:absolute;

z-index:1;

line-height:34px;

text-indent:40px;

height:36px;

width:36px;

/*border-radius*/

-webkit-border-radius:100%;

-moz-border-radius:100%;

border-radius:100%;

top:0px;

left:0px;

right:auto;

background:white;

/*box-shadow*/

-webkit-box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;

-moz-box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;

box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;

}

.checkbox-label:after{

content:attr(data-off);

display:block;

position:absolute;

z-index:0;

top:0;

left:-300px;

padding:10px;

height:100%;

width:300px;

text-align:right;

color:#bfbfbf;

white-space:nowrap;

}

.ios-toggle:checked + .checkbox-label{

/*box-shadow*/

-webkit-box-shadow:inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);

-moz-box-shadow:inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);

box-shadow:inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);

}

.ios-toggle:checked + .checkbox-label:before{

left:calc(100% - 36px);

/*box-shadow*/

-webkit-box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);

-moz-box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);

box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);

}

.ios-toggle:checked + .checkbox-label:after{

content:attr(data-on);

left:60px;

width:36px;

}

/* GREEN CHECKBOX */

#checkbox1 + .checkbox-label{

/*box-shadow*/

-webkit-box-shadow:inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;

-moz-box-shadow:inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;

box-shadow:inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;

}

#checkbox1:checked + .checkbox-label{

/*box-shadow*/

-webkit-box-shadow:inset 0 0 0 18px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);

-moz-box-shadow:inset 0 0 0 18px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);

box-shadow:inset 0 0 0 18px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);

}

#checkbox1:checked + .checkbox-label:after{

color:rgba(19,191,17,1);

}

/* RED CHECKBOX */

#checkbox2 + .checkbox-label{

/*box-shadow*/

-webkit-box-shadow:inset 0 0 0 0px #f35f42,0 0 0 2px #dddddd;

-moz-box-shadow:inset 0 0 0 0px #f35f42,0 0 0 2px #dddddd;

box-shadow:inset 0 0 0 0px #f35f42,0 0 0 2px #dddddd;

}

#checkbox2:checked + .checkbox-label{

/*box-shadow*/

-webkit-box-shadow:inset 0 0 0 20px #f35f42,0 0 0 2px #f35f42;

-moz-box-shadow:inset 0 0 0 20px #f35f42,0 0 0 2px #f35f42;

box-shadow:inset 0 0 0 20px #f35f42,0 0 0 2px #f35f42;

}

#checkbox2:checked + .checkbox-label:after{

color:#f35f42;

}

/* BLUE CHECKBOX */

#checkbox3 + .checkbox-label{

/*box-shadow*/

-webkit-box-shadow:inset 0 0 0 0px #1fc1c8,0 0 0 2px #dddddd;

-moz-box-shadow:inset 0 0 0 0px #1fc1c8,0 0 0 2px #dddddd;

box-shadow:inset 0 0 0 0px #1fc1c8,0 0 0 2px #dddddd;

}

#checkbox3:checked + .checkbox-label{

/*box-shadow*/

-webkit-box-shadow:inset 0 0 0 20px #1fc1c8,0 0 0 2px #1fc1c8;

-moz-box-shadow:inset 0 0 0 20px #1fc1c8,0 0 0 2px #1fc1c8;

box-shadow:inset 0 0 0 20px #1fc1c8,0 0 0 2px #1fc1c8;

}

#checkbox3:checked + .checkbox-label:after{

color:#1fc1c8;

}

</style>

I have not shown the finished code but the examples are for joining the ideas to build custom buttons for your need of some IoT project.

Tagged With esp32 codepen

Send HTTP POST Request to a Secure Webpage with PHP

This Article Has Been Shared 595 Times!

About Abhishek Ghosh

Here’s what we’ve got for you which might like :

Take The Conversation Further ...

Get new posts by email:

This Article Has Been Shared 595 Times!

About Abhishek Ghosh

Here’s what we’ve got for you which might like :

Articles Related to Send HTTP POST Request to a Secure Webpage with PHP

Take The Conversation Further ...

Get new posts by email: