HTML to Python

Introduction: HTML to Python

I thought I would make this instructable on how to make a html webpage communicate with a python script because there is no where else on how to do it, So I made my own.

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

Step 1: Things You Will Need

You will only need one thing in this instructable.

  • A computer with a web server running on it or a Raspberry Pi (I will be using a Raspberry Pi)

Step 2: Raspberry Pi Software

Install Python

sudo apt-get install python

INSTALL APACHE

First install the apache2 package by typing the following command in to the Terminal:

sudo apt-get install apache2 -y

TEST THE WEB SERVER

By default, Apache puts a test HTML file in the web folder. This default web page is served when you browse to http://localhost/ on the Pi itself, or http://localhost/ (whatever the Pi's IP address is) from another computer on the network. To find the Pi's IP address, type hostname -I at the command line (or read more about finding your IP address). Browse to the default web page either on the Pi or from another computer on the network and you should see the web page like the one above. This means you have Apache working!

Change Permissions

This default web page is just a HTML file on the filesystem. It is located at /var/www/index.html. navigate to this directory in the Terminal and have a look at what's inside:

cd /var/www
ls

You should see the file index.html.

Now lets change the permissions:

cd /var
sudo chown pi: www

This will make everything in the www folder usable by the pi user (or whatever username you are using).

INSTALL PHP

To allow your Apache server to process PHP files, you'll need to install PHP5 and the PHP5 module for Apache. Type the following command to install these:

sudo apt-get install php5 libapache2-mod-php5 -y

Now we are finished installing all the software. Now for the fun part :)

Step 3: The Code

Ok, Now remove the file index.html and make a file in the /var/www directory and call it index.php.

In it we will put in this:

<html>
	<head>
	</head>

	<body>
		
		<iframe name="hidden_iframe" width="0" height="0" style="border:none"></iframe>
		<form method="post" action="out.php" target="hidden_iframe">
			
	        <input type="submit" name="foo" value="A" />
			<input type="submit" name="foo" value="B" />
			<input type="submit" name="foo" value="C" />
			<input type="submit" name="foo" value="D" />
			<input type="submit" name="foo" value="E" />
			<input type="submit" name="foo" value="F" />
			<input type="submit" name="foo" value="G" />
		
		</form>
		
		<?php
		$name = $_POST['foo'];
		$fp = fopen("formdata.txt", "w");
		fwrite($fp, "");
		$savestring = $name;
		fwrite($fp, $savestring);
		fclose($fp);
		?>
		
	</body>
</html>

Ok, Now open up you browser and head to http://localhost/ or http://localhost/ and you should see 6 buttons.

Now make a python script in the same directory called htmlread.py and put this in it:

from time import sleep

def read():
	inlist = ['A','B','C','D','E','F','G']
	while True:
		file=open("formdata.txt","r")
		data = file.read()
		for i in range(len(inlist)):
			if data == inlist[i]:
				print(data)
				file=open("formdata.txt","w")
				file.write("")
		file.close()
		sleep(0.01)
		
		
read()

Now run the python script and head to http://localhost/ or http://localhost/ and start pressing buttons you should see the input on the python script.

You can also make it control the Raspberry Pi GPIO and a bunch of other stuff too.

Be the First to Share

    Recommendations

    • Backyard Contest

      Backyard Contest
    • Silly Hats Speed Challenge

      Silly Hats Speed Challenge
    • Finish It Already Speed Challenge

      Finish It Already Speed Challenge

    2 Discussions

    0
    RitwikM4
    RitwikM4

    Question 1 year ago on Introduction

    I m using dht 11 sensor to monitor temp and humidity . How can I pass the output data from python to show up on html...?

    0
    AndrewB207
    AndrewB207

    Answer 1 year ago

    RitwikM4, I did similar with dht31 temp + Rh but made python save to database first, then have python make plot image that is shown in HTML, but also it picks last reading to give live temp+Rh. would this help you if so I could explain more?