In order to user connect to our Raspberry Pi via a web and turn on an LED we will the template engine called Jinja2 which is apart of FLASK. When creating your HTML pages Anything in double curly braces is interpreted as a variable that would be passed to it from the Python script via the render_template function. Below is a Python file that makes use of templates.
This is based off of Matt Richardson’s http://mattrichardson.com/Raspberry-Pi-Flask/

 

import RPi.GPIO as GPIO
from flask import Flask, render_template, request
app = Flask(__name__)

GPIO.setmode(GPIO.BCM)

# This creates a  dictionary called pins to store the pin number, name, and pin state:
pins = {
   24 : {'name' : ‘LED 1’, 'state' : GPIO.LOW},
   25 : {'name' : 'LED 2', 'state' : GPIO.LOW}
   }

# Set each pin as an output and make it low:
for pin in pins:
   GPIO.setup(pin, GPIO.OUT)
   GPIO.output(pin, GPIO.LOW)

@app.route("/")
def main():
   # For each pin, read the pin state and store it in the pins dictionary:
   for pin in pins:
      pins[pin]['state'] = GPIO.input(pin)
   # Put the pin dictionary into the template data dictionary:
   templateData = {
      'pins' : pins
      }
   # Pass the template data into the template led.html and return it to the user
   return render_template('led.html', **templateData)

# The function below is executed when someone requests a URL with the pin number and action in it:
@app.route("/<changePin>/<action>")
def action(changePin, action):
   # Convert the pin from the URL into an integer:
   changePin = int(changePin)
   # Get the device name for the pin being changed:
   deviceName = pins[changePin]['name']
   # If the action part of the URL is "on," execute the code indented below:
   if action == "on":
      # Set the pin high:
      GPIO.output(changePin, GPIO.HIGH)
      # Save the status message to be passed into the template:
      message = "Turned " + deviceName + " on."
   if action == "off":
      GPIO.output(changePin, GPIO.LOW)
      message = "Turned " + deviceName + " off."
   if action == "toggle":
      # Read the pin and set it to whatever it isn't (that is, toggle it):
      GPIO.output(changePin, not GPIO.input(changePin))
      message = "Toggled " + deviceName + "."

   # For each pin, read the pin state and store it in the pins dictionary:
   for pin in pins:
      pins[pin]['state'] = GPIO.input(pin)

   # Along with the pin dictionary, put the message into the template data dictionary:
   templateData = {
      'message' : message,
      'pins' : pins
   }

   return render_template('led.html', **templateData)

if __name__ == "__main__":
   app.run(host='0.0.0.0', port=80, debug=True)

 

HTML FILE
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

In the same directory as the led.html make a subdirectory called templates
Create a file called led.html

<!DOCTYPE html>
<head>
   <title>Current Status</title>
</head>

<body>
   <h1>Device Listing and Status</h1>

   {% for pin in pins %}
   <p>The {{ pins[pin].name }}
   {% if pins[pin].state == true %}
      is currently on (<a href="/{{pin}}/off">turn off</a>)
   {% else %}
      is currently off (<a href="/{{pin}}/on">turn on</a>)
   {% endif %}
   </p>
   {% endfor %}

   {% if message %}
   <h2>{{ message }}</h2>
   {% endif %}

</body>
</html>