Cloud Run: Flask HTML Data Form
We can now use Cloud Run to build an HTML form to collect data then process it and send it back to the browser formatted.
Flask template rendering is the process of generating a HTML document with dynamic data.
It looks for a sub folder called templates for HTML files.
You can use the render_template() method to provide the name of the template and the variables you want to pass to the template engine as keyword arguments.
The request context keeps track of the request-level data during a request.
Go to cloud shell
Welcome to Cloud Shell! Type "help" to get started, or type "gemini" to try prompting with Gemini CLI.
Your Cloud Platform project in this session is set to cloud-project-examples.
Use `gcloud config set project [PROJECT_ID]` to change to a different project.
john_iacovacci1@cloudshell:~ (cloud-project-examples)$ mkdir webrun
john_iacovacci1@cloudshell:~ (cloud-project-examples)$ cd webrun
john_iacovacci1@cloudshell:~/webrun (cloud-project-examples)$
Now open the Editor
Click the first icon to create a new file
Create a file in that directory called main.py
==========================================================
from flask import Flask, request, render_template
app = Flask(__name__)
@app.route('/', methods=['POST','GET'])
def run_quickstart():
if request.method == 'POST':
data = request.form.to_dict(flat=True)
Name = data['my-name']
Address = data['my-address']
City = data['my-city']
State = data['my-state']
Zip = data['my-zip']
Phone = data['my-phone']
Email = data['my-email']
Comments = data['my-comments']
return render_template('formdata.html', FormName=Name, FormAddress=Address, FormCity=City, FormState=State, FormZip=Zip, FormPhone=Phone, FormEmail=Email, FormComments=Comments)
else:
return render_template('index.html')
if __name__ == "__main__":
app.run(host="127.0.0.1", port=8080, debug=True)
=========================================================
Create another file in the same directory called requirements.txt
=========================================================
Flask==3.0.0
gunicorn==21.2.0
=========================================================
Use the second icon to create a new folder called templates to hold the html files in
Select the templates folder
Within that templates directory create two html files called index.html and formdata.html
templates/index.html
=========================================================
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Validation</title>
<script>
function validateForm() {
let name = document.forms["myForm"]["my-name"].value;
let email = document.forms["myForm"]["my-email"].value;
if (name == "") {
alert("Name must be filled out");
return false;
}
if (email == "") {
alert("Email must be filled out");
return false;
}
// Add more validation rules as needed
}
</script>
</head>
<body>
<h2>Input</h2>
<form name="myForm" onsubmit="return validateForm()" method="post" action="/">
Name: <input type="text" name="my-name"></p>
Address: <input type="text" name="my-address"></p>
City: <input type="text" name="my-city"></p>
State: <input type="text" name="my-state"></p>
Zip: <input type="text" name="my-zip"></p>
Phone: <input type="text" name="my-phone"></p>
Email: <input type="text" name="my-email"></p>
Comments: <textarea name="my-comments" rows="10" cols="30"> </textarea><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
=========================================================
templates/formdata.html
=========================================================
<!doctype html>
<html>
<body>
<h2>Customer Information</h2>
<p>
Name: {{ FormName }} <br>
Address: {{ FormAddress }} <br>
City: {{ FormCity }} <br>
State: {{ FormState }} <br>
Zip: {{ FormZip }} <br>
Phone: {{ FormPhone }} <br>
Email: {{ FormEmail }} <br>
Comments:{{ FormComments }}
</p>
</body>
</html>
=========================================================
Open Terminal
Deploy the application
john_iacovacci1@cloudshell:~/webrun (cloud-project-examples)$ gcloud run deploy python-html-form --source . --allow-unauthenticated --region us-central1
Building using Buildpacks and deploying container to Cloud Run service [python-html-form] in project [cloud-project-examples] region [us-central1]
Building and deploying...
Validating Service...done
Uploading sources...done
Building Container... Logs are available at [https://console.cloud.google.com/cloud-build/builds;region=us-central1/a2aa2016-
b9e5-4197-a9f7-21db318f1446?project=517129368909]....done
Setting IAM Policy...done
Creating Revision...done
Routing traffic...done
Done.
Service [python-html-form] revision [python-html-form-00002-58x] has been deployed and is serving 100 percent of traffic.
Service URL: https://python-html-form-517129368909.us-central1.run.app
john_iacovacci1@cloudshell:~/webrun (cloud-project-examples)$
No comments:
Post a Comment