I'm trying to create a webserver with micropython in access point (hotspot) mode. My problem is that I don't know how to pass simple HTML user input to a python variable (username and password).
Flask/MicroWebSrv is not an option for me due to memory issues (using an ESP8266 with limited flash and RAM) and I don't really want to rebuild my webserver from scratch. Previous solutions based on CGI package is depreciated. Any other generic method?
import network
import socket
ap = network.WLAN(network.AP_IF)
ap.active(True)
ap.config(essid=ap_ssid, password=ap_psw)
s = socket.socket()
s.bind(('', 80))
s.listen(5)
def webpage():
html = """
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1", charset="UTF-8">
<title>Login Form</title>
</head>
<body>
<div class="center">
<div class="header">
Login Form
</div>
<form method="post">
<input type="text" placeholder="Username" id="wifi_ssid" name="wifi_ssid">
<i class="far fa-envelope"></i>
<input id="wifi_psw" name="wifi_psw" type="password" placeholder="Password">
<i class="fas fa-lock" onclick="show()"></i>
<input type="submit" value="Sign in">
</form>
</div>
</body>
</html>"""
return html
while True:
conn, addr = s.accept()
request = conn.recv(1024)
response = webpage()
conn.send(response)
conn.close()
I am facing the following issue while trying to pass a value from an HTML form <input> element to the form's action attribute and send it to the FastAPI server.
This is how the Jinja2 (HTML) template is loaded:
# Test TEMPLATES
#app.get("/test",response_class=HTMLResponse)
async def read_item(request: Request):
return templates.TemplateResponse("index.html", {"request": request})
My HTML form:
<form action="/disableSubCategory/{{subCatName}}">
<label for="subCatName">SubCategory:</label><br>
<input type="text" id="subCatName" name="subCatName" value=""><br>
<input type="submit" value="Disable">
</form>
My FastAPI endpoint to be called in the form action:
# Disable SubCategory
#app.get("/disableSubCategory/{subCatName}")
async def deactivateSubCategory(subCatName: str):
disableSubCategory(subCatName)
return {"message": "SubCategory [" + subCatName + "] Disabled"}
The error I get:
"GET /disableSubCategory/?subCatName=Barber HTTP/1.1" 404 Not Found
What I am trying to achieve is the following FastAPI call:
/disableSubCategory/{subCatName} ==> "/disableSubCategory/Barber"
Anyone who could help me understand what I am doing wrong?
Thanks.
Leo
Option 1
You can have the category name defined as Form parameter in the backend, and submit a POST request from the frontend using an HTML <form>, as described in Method 1 of this answer.
app.py
from fastapi import FastAPI, Form, Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
app = FastAPI()
templates = Jinja2Templates(directory='templates')
#app.post('/disable')
def disable_cat(cat_name: str = Form(...)):
return f'{cat_name} category has been disabled.'
#app.get('/', response_class=HTMLResponse)
def main(request: Request):
return templates.TemplateResponse('index.html', {'request': request})
templates/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Disable a category</h1>
<form method="post" action="/disable">
<label for="cat_name">Enter a category name to disable:</label><br>
<input type="text" id="cat_name" name="cat_name">
<input class="submit" type="submit" value="Submit">
</form>
</body>
</html>
Option 2
You can have the category name declared as query parameter in your endpoint, and in the frontend use a similar approach to the one demonstrated in your question to convert the value form the form <input> element into a query parameter, and then add it to the query string of the URL (in the action attribute).
Note that the below uses a GET request in contrast to the above (in this case, you need to use #app.get() in the backend and <form method="get" ... in the frontend, which is the default method anyway). Beware that most browsers cache GET requests (i.e., saved in browser's history), thus making them less secure compared to POST, as the data sent are part of the URL and visible to anyone who has access to the device. Thus, GET method should not be used when sending passwords or other sensitive information.
app.py
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
app = FastAPI()
templates = Jinja2Templates(directory='templates')
#app.get('/disable')
def disable_cat(cat_name: str):
return f'{cat_name} category has been disabled.'
#app.get('/', response_class=HTMLResponse)
def main(request: Request):
return templates.TemplateResponse('index.html', {'request': request})
templates/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Disable a category</h1>
<form method="get" id="myForm" action='/disable{{ cat_name }}'>
<label for="cat_name">Enter a category name to disable:</label><br>
<input type="text" id="cat_name" name="cat_name">
<input class="submit" type="submit" value="Submit">
</form>
</body>
</html>
If you instead would like to use a POST request—which is a little safer than GET, as the parameters are not stored in the browser's history, and which makes more sense when updating content/state on the server, compared to GET that should be used when requesting (not modifying) data—you can define the FastAPI endpoint with #app.post() and replace the above template with the below (similar to Method 2 of this answer), which submits the form using POST method after transforming the form data into query parameters:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("myForm").addEventListener("submit", function (e) {
var myForm = document.getElementById('myForm');
var qs = new URLSearchParams(new FormData(myForm)).toString();
myForm.action = '/disable?' + qs;
});
});
</script>
</head>
<body>
<h1>Disable a category</h1>
<form method="post" id="myForm">
<label for="cat_name">Enter a category name to disable:</label><br>
<input type="text" id="cat_name" name="cat_name">
<input class="submit" type="submit" value="Submit">
</form>
</body>
</html>
Option 3
You can still have it defined as path parameter, and use JavaScript in the frontend to modify the action attribute of the <form>, by passing the value of the form <input> element as path parameter to the URL, similar to what has been described earlier.
app.py
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
app = FastAPI()
templates = Jinja2Templates(directory='templates')
#app.post('/disable/{name}')
def disable_cat(name: str):
return f'{name} category has been disabled.'
#app.get('/', response_class=HTMLResponse)
def main(request: Request):
return templates.TemplateResponse('index.html', {'request': request})
templates/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("myForm").addEventListener("submit", function (e) {
var myForm = document.getElementById('myForm');
var catName = document.getElementById('catName').value;
myForm.action = '/disable/' + catName;
});
});
</script>
</head>
<body>
<h1>Disable a category</h1>
<form method="post" id="myForm">
<label for="catName">Enter a category name to disable:</label><br>
<input type="text" id="catName" name="catName">
<input class="submit" type="submit" value="Submit">
</form>
</body>
</html>
Option 4
If you would like to prevent the page from reloading/redirecting when hitting the submit button of the HTML <form> and rather get the results in the same page, you can use Fetch API, a JavaScript interface/library, to make an asynchronous HTTP request, similar to this answer, as well as this answer and this answer. Additionally, one can call the Event.preventDefault() function, as described in this answer, to prevent the default action. The example below is based on the previous option (i.e., Option 3); however, the same approach below (i.e., making an asynchronous HTTP request) can also be used for Options 1 & 2 demonstrated earlier, if you would like to keep the browser from refreshing the page on <form> submission.
app.py
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
app = FastAPI()
templates = Jinja2Templates(directory='templates')
#app.post('/disable/{name}')
def disable_cat(name: str):
return f'{name} category has been disabled.'
#app.get('/', response_class=HTMLResponse)
def main(request: Request):
return templates.TemplateResponse('index.html', {'request': request})
templates/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("myForm").addEventListener("submit", function (e) {
e.preventDefault() // Cancel the default action
var catName = document.getElementById('catName').value;
fetch('/disable/' + catName, {
method: 'POST',
})
.then(resp => resp.text()) // or, resp.json(), etc.
.then(data => {
document.getElementById("response").innerHTML = data;
})
.catch(error => {
console.error(error);
});
});
});
</script>
</head>
<body>
<h1>Disable a category</h1>
<form id="myForm">
<label for="catName">Enter a category name to disable:</label><br>
<input type="text" id="catName" name="catName">
<input class="submit" type="submit" value="Submit">
</form>
<div id="response"></div>
</body>
</html>
Just to provide you a feedback and keep track about the solution I've put in place.
As mentioned by #Chris, I went to the proposed solution 3.
Please find below my new code:
== FastAPI ==
# Test TEMPLATES
#app.get("/test",response_class=HTMLResponse)
async def read_item(request: Request):
return templates.TemplateResponse("index.html", {"request": request})
# Disable SubCategory
#app.post("/disableSubCategory/{subCatName}")
async def deactivateSubCategory(subCatName: str):
disableSubCategory(subCatName)
return {"message": "Sub-Category [" + subCatName + "] Disabled"}
# Enable SubCategory
#app.post("/enableSubCategory/{subCatName}")
async def activateSubCategory(subCatName: str):
enableSubCategory(subCatName)
return {"message": "Sub-Category [" + subCatName + "] Enabled"}
== HTML ==
<html>
<head>
<title>Item Details</title>
<link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("disableSubCategory").addEventListener("submit", function (e) {
var myForm = document.getElementById('disableSubCategory');
var disableSubCatName = document.getElementById('id_disableSubCategory').value;
myForm.action = '/disableSubCategory/' + disableSubCatName;
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("enableSubCategory").addEventListener("submit", function (e) {
var myForm2 = document.getElementById('enableSubCategory');
var enableSubCatName = document.getElementById('id_enableSubCategory').value;
myForm2.action = '/enableSubCategory/' + enableSubCatName;
});
});
</script>
</head>
<body>
<form id="disableSubCategory" enctype="multipart/form-data" method="post">
<label for="subCatName">SubCategory:</label><br>
<input type="text" id="id_disableSubCategory" value=""><br>
<input type="submit" value="Disable" id="disable">
</form>
<form id="enableSubCategory" enctype="multipart/form-data" method="post">
<label for="subCatName">SubCategory:</label><br>
<input type="text" id="id_enableSubCategory" value=""><br>
<input type="submit" value="Enable" id="enable">
</form>
</body>
</html>
I created a simple website with forms, i want to get the input enterd on id 'message'
my code:
website.py
import socket
SERVER_HOST = '127.0.0.1'
SERVER_PORT = 8000
server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
server_socket.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
server_socket.bind((SERVER_HOST, SERVER_PORT))
server_socket.listen(1)
print('Listening on port %s ...' % SERVER_PORT)
#sender
while True:
client_connection, client_address = server_socket.accept()
request = client_connection.recv(1024).decode()
print(request)
with open('form.html', 'r')as f:
file=f.read()
response = 'HTTP/1.0 200 OK\n\n'+file
client_connection.sendall(response.encode())
client_connection.close()
server_socket.close()
form.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>form</title>
</head>
<body>
<form action="/" method="get" accept-charset="utf-8">
<input type="text" name="message" id="message" value="" />
<input type="submit" name="submit" id="submit" value="submit" />
</form>
<script>
//what will be here?
</script>
</body>
</html>
can you help me to print the input enterd on id 'message' ?
using only socket or other internal libraries.
There is multiple way to do it :
Use XMLHttpRequest which make you able to do web request. This can be used to get a page. Example:
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText); // good result !
}
};
xmlhttp.open("GET", "http://my.url/example", true);
xmlhttp.send();
Then, in you HTML page you just should return the result.
Use WebSocket
Server side
You have to use something that can support WebSocket. It's different from "basic" socket, because it will pass with HTTP protocol (but on 8000 port).
To do it, you should use Python Websocket. You can install it with pip install websocket-server.
This is my code:
import logging
from websocket_server import WebsocketServer
def new_client(client, server):
print("New client !")
def received_msg(client, server, message):
print("New message:", message)
server = WebsocketServer(host='127.0.0.1', port=8000, loglevel=logging.INFO)
server.set_fn_new_client(new_client)
server.set_fn_message_received(received_msg)
server.run_forever()
Client side
Here is the HTML part with the websocket utilisation :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>form</title>
</head>
<body>
<form action="/" method="get" accept-charset="utf-8">
<input type="text" name="message" id="message" value="" />
</form>
<button onclick="run()">Run</button>
</body>
<script type="text/javascript">
var socket = new WebSocket("ws://localhost:8000");
socket.onopen = function (event) {
console.log("opened");
socket.send("Opened !");
};
function run() {
socket.send(JSON.stringify({ "message": document.getElementById("message").value }));
}
</script>
</html>
Finally
When you show HTML page, enter a message and click on "Run" :
INFO:websocket_server.websocket_server:Listening on port 8000 for clients..
INFO:websocket_server.websocket_server:Starting WebsocketServer on main thread.
New client !
New message: Opened !
New message: {"message":"value"}
I am doing wsgi python and calling aws workspaces api to get all the workspaces and render on the screen (webpage). But I see my logs, that the function is getting called twice just by hitting the index URL.
server side
ws_butt='get'
request_body_size = int(environ.get('CONTENT_LENGTH', 0))
request_body = environ['wsgi.input'].read(request_body_size)
d = parse_qs(request_body)
ws_butt=d.get('ws_butt',['get'])[0]
if ws_butt.lower()=='get':
#calls describe_workspaces to fetch all the workspaces for the user
new_content=[]
for region,endpoint in region_endpoint_dict.iteritems():
code,content=describe_workspaces(region,endpoint[0],session_username=username)
#some processing on content and generate new_content
if new_content:
#some internal processing of replacing strings
return your_workspace_window(environ, start_response,my_response=new_content)
client side
start_response('200 OK', [('Content-Type', 'text/html')])
html_output='''
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<form id="form_myws" method="POST">
<input type="hidden" name="workspaceid" value="%s">
<input type="hidden" name="type" value="%s">
<input type="hidden" name="region" value="%s">
<input type="hidden" name="state" value="%s">
<input type="hidden" name="ipaddress" value="%s">
<p><center><input type="submit" value="Reboot" name="ws_butt" id="submit" class="submit"/></center></p>
</body>
'''
#some more processing on client side
What is causing it to call "describe_workspaces" in forloop to be called >=2 times for every region? Check network elements as well and all seems fine with 200OK so I dont know what is causing so called reload.
Say I have a web page like this on an Ubuntu 12.04 web server running apache:
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Name Input</title>
</head>
<body>
<form action="./test.py" method="post">
<p> Name: <input type="text" name="name" id="name" value=""/></p>
<input type="submit" value="Submit" />
</form>
</body>
</html>
I want to use the value of name as input to a shell script which is called by a Python CGI script like this.
test.py:
#!/usr/bin/env python
import commands, cgi, cgitb
form = cgi.FieldStorage()
name = form.getvalue('name')
result = commands.getoutput("/usr/lib/cgi-bin/test.sh name")
contents = pageTemplate.format(**locals())
print "Content-type: text/html\n\n"
print contents
In the example code above, how should name be passed to test.sh?
For completeness, say that pageTemplate looks like this:
pageTemplate = '''<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Name Output</title>
</head>
<body>
{result}
</body>
</html>
'''
Just pass it into the command:
result = commands.getoutput("/usr/lib/cgi-bin/test.sh %s" % name)