Web Assignment
Search for Cloud Storage
Then Select
Follow the instructions on the link to create a unique public cloud storage bucket.
First we will build our index.html page.
The index.html page is the default page that is served when you access most web servers.
Can either build locally with notepad or any text editor or use the cloud linux shell.
Cloud Linux shell instructions
Click on shell access
Create a directory for the website
john_iacovacci1@cloudshell:~ (cloud-project-examples)$ mkdir website
Open editor
Highlight the website directory
Right click on website directory and hit new file or first file icon 
Type in the name of your page which should be index.html
index.html
=========================================================
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: lightblue;}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
p {
color: blue;
text-align: center;
font-family: Verdana, sans-serif;
font-size: 24px
}
h1 {
color: blue;
text-align: center;
font-family: Verdana, sans-serif;
font-size: 30px
}
</style>
<title>Google Cloud Development
</title>
</head>
<body>
<h1> Google Cloud Development Web Site </h1>
<img src="https://storage.googleapis.com/cloud-storage-exam/images/google.png" style="width:50%;"">
<P>Helping Google users learn cloud development</P>
<h2>Website Map</h2>
<ul>
<li><a href="https://cloud.google.com/?hl=en">Link to Google Cloud Home Page</a></li>
<li><a href="https://developers.google.com/community">Link to Google Developers Community</a></li>
<li><a href=”https://storage.googleapis.com/cloud-storage-exam/about.html
">About Google Cloud Development</a></li>
<li><a href="https://storage.googleapis.com/cloud-storage-exam/join.html
"> Google Student Developers Club</a></li>
</ul>
</body>
</html>
=========================================================
about.html
========================================================================
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
text-align: center;
font-family: Verdana, sans-serif;
font-size: 24px
}
p.solid {border-style: solid;border-width: thick;padding: 70px;}
body {background-color: lightblue;}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
p {
color: blue;
text-align: center;
font-family: Verdana, sans-serif;
font-size: 18px
}
</style>
<title>Google Developers
</title>
</head>
<body>
<h1> Welcome to Google Cloud Developers </h1>
<img src="https://developers.google.com/static/homepage-assets/images/chromeos-logo.svg" style="width:30%;"">
<hr>
<p>Google Cloud Platform (GCP) is a suite of cloud computing services that runs on the same infrastructure that Google uses internally for its own products, like Google Search, YouTube, and Gmail.</p>
<p>At its core, GCP allows you to "rent" Google’s massive computing power, storage, and networking capabilities so you can build and run your own applications without having to buy or maintain physical servers.</p>
<h2>Core Service Categories</h2>
<ul>
<li>Compute Engine: Traditional virtual machines (VMs). You have full control over the OS.</li>
<li>Cloud Run: A "serverless" option where you just provide the code, and Google handles all the scaling and server management for you.</li>
<li>Cloud Storage: Good for "unstructured" data like images, videos, and backups.</li>
</ul>
</p>
</body>
</html>
=========================================================
join.html
=========================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Name Validation Example</title>
<style>
body { background-color: lightblue; font-family: Verdana, sans-serif; }
h1 { color: blue; text-align: center; font-size: 24px; }
p { color: black; font-size: 18px; }
img { display: block; margin-left: auto; margin-right: auto; }
.message { font-size: 14px; color: #0044cc; font-weight: bold; height: 20px; margin-top: 5px; }
.error { color: #cc0000; }
</style>
</head>
<body>
<img src="https://storage.googleapis.com/cloud-storage-exam/images/google.png" alt="Google" width="300" height="300">
<h1>Google Developers Student Profile</h1>
<form name="myForm" id="entForm" action="https://student-data-517129368909.us-east1.run.app" method="post" onsubmit="return validateForm(event)">
<p>Student Name : </p>
<p><input type="text" name="my-name" id="student-name"></p>
<p>Major : </p>
<p><input type="text" name="my-major"></p>
<p>Email: </p>
<p><input type="text" name="my-email" id="email"></p>
<div id="ent-mess" class="message"></div>
<div id="err-mess" class="message error"></div>
<p>What do you want to do?</p>
<p><textarea name="my-comments" rows="5" cols="20"> </textarea></p>
<p>Graduation Year :</p>
<p><input type="radio" name="my-grad" value="2027"> 2027</p>
<p><input type="radio" name="my-grad" value="2028"> 2028</p>
<p><input type="radio" name="my-grad" value="2029"> 2029</p>
<p><input type="radio" name="my-grad" value="2030"> 2030</p>
<p><input type="submit" value="Submit"></p>
</form>
<script>
const emailInp = document.getElementById('email');
const entMess = document.getElementById('ent-mess');
const errMess = document.getElementById('err-mess');
const form = document.getElementById('entForm');
emailInp.addEventListener('mouseover', () => entMess.textContent = 'Use email format of name@site.com');
emailInp.addEventListener('mouseout', () => entMess.textContent = '');
function checkEmail(email) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
function validateForm(event) {
const name = document.getElementById('student-name').value;
const emailValue = emailInp.value;
// Reset styles/messages
errMess.textContent = '';
if (name.trim() === "") {
errMess.textContent = "Error: Name is required.";
return false;
}
// Check Email
if (!checkEmail(emailValue)) {
errMess.textContent = 'Error: Please enter a valid email address.';
return false;
}
return true;
}
</script>
</body>
</html>
=========================================================
WHEN COMPLETE
copy pages to your bucket : Note cloud-storage-exam is my bucket. This needs to be changed to the name of the bucket on your project.
gcloud storage cp index.html gs://cloud-storage-exam/
Python function code
====================================================
import functions_framework
# Map input 'name' attributes from the HTML form to field descriptions
FIELD_MAP = {
'my-name': 'Student Name',
'my-major': 'Academic Major',
'my-email': 'Email Address',
'my-comments': 'Student Goals / Comments',
'my-grad': 'Graduation Year'
}
@functions_framework.http
def process_student_profile(request):
"""Parses all 5 form fields from the POST request and renders an HTML page."""
# Capture all POST form payload data into a dictionary
form_data = request.form.to_dict() if request.form else {}
# Build table rows dynamically for every expected field
rows_html = ""
for field_name, description in FIELD_MAP.items():
value = form_data.get(field_name, '').strip()
display_value = value if value else "<em>Not Provided</em>"
rows_html += f"""
<tr>
<td><strong>{description}</strong></td>
<td><code>{field_name}</code></td>
<td>{display_value}</td>
</tr>
"""
# Construct the formatted HTML output response
html_response = f"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Student Profile Received</title>
<style>
body {{
background-color: lightblue;
font-family: Verdana, sans-serif;
margin: 0;
padding: 40px 20px;
display: flex;
justify-content: center;
}}
.container {{
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
max-width: 650px;
width: 100%;
}}
h1 {{
color: blue;
font-size: 24px;
margin-top: 0;
text-align: center;
}}
p {{
color: black;
font-size: 16px;
}}
table {{
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}}
th, td {{
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
font-size: 14px;
}}
th {{
background-color: #0044cc;
color: white;
}}
code {{
background-color: #f0f0f0;
color: #cc0000;
padding: 2px 6px;
border-radius: 4px;
font-family: monospace;
}}
.back-link {{
display: inline-block;
margin-top: 25px;
color: blue;
text-decoration: none;
font-weight: bold;
}}
</style>
</head>
<body>
<div class="container">
<h1>Google Developers Student Profile</h1>
<p><strong>Submission Summary:</strong> Below are the processed fields and corresponding descriptions captured by the Cloud Function.</p>
<table>
<thead>
<tr>
<th>Field Description</th>
<th>HTML Field Name</th>
<th>Inputted Value</th>
</tr>
</thead>
<tbody>
{rows_html}
</tbody>
</table>
<a href="javascript:history.back()" class="back-link">← Return to Form</a>
</div>
</body>
</html>
"""
return (html_response, 200, {'Content-Type': 'text/html; charset=utf-8'})
=========================================================
requirements.txt
functions-framework>=3.0.0
Note use: gcloud storage cp index.html gs://your-bucket-name/
to copy files to public storage
No comments:
Post a Comment