How to generate basic HTML output using CGI scripts? - Coding

In this article, we will explore the process of generating basic HTML output using CGI scripts. Specifically, we will focus on creating a simple HTML web page using Python. The objective is to provide a step-by-step walkthrough, detailing the entire process of creating and utilizing CGI scripts to generate HTML content within a web environment.

What is HTML Output?

HTML output is the formatted content generated in Hypertext Markup Language (HTML), the standard language for web page creation. In scripting, particularly with CGI scripts, HTML output is dynamically generated and sent to web browsers as a response, allowing for interactive and customized web content. It includes elements like text, images, forms, and links, shaping the visual presentation of web pages.

Generate Basic HTML Output Using CGI Scripts

Here, we will provide a step-by-step guide on how to generate basic HTML output using Python CGI scripts in Python.

Required Installation

Here, we will install the following things to start with generating webpages using CGI scripts:

Create Folder

First, create a folder named “GeeksforGeeks” in the “htdocs” directory. Inside this “GeeksforGeeks” folder, create one file “python.py”. In the “python.py” file, write a CGI script to show the html output on the web page.

oooopp

Write Python CGI Script

The provided Python script is a CGI (Common Gateway Interface) program that generates a simple HTML webpage. It begins by specifying the Python interpreter’s path. The script retrieves form data, specifically the value associated with the ‘name’ parameter. Subsequently, it outputs an HTML document with a title, styling using CSS, and a card container displaying a success message. The success message includes the user-entered name and a smile emoji. The CSS styling defines a card with specific width, padding, margin, and border properties. The script demonstrates the use of CGI to handle input from a web form and dynamically generate an HTML response for display on a web page.

Python3

#!/usr/bin/env python
 
print("Content-type: text/html\n\n")
import cgi
 
# Retrieve form data
form = cgi.FieldStorage()
 
# Extract values from the form
name = form.getvalue('name')
 
# Generate HTML response
print("<html>")
print("<head>")
print("<title>CGI Script Output</title>")
print("<style>")
print("  /* Style for the card container *")
print("  .card {")
print("    width: 300px;")
print("    padding: 20px;")
print("    margin: 20px;")
print("    border: 1px solid #ccc;")
print("    border-radius: 5px;")
print("    text-align: center;")
print("  }")
print("h2 {")
print("    color: green;")
print("}")
print("</style>")
print("</head>")
print("<body>")
print("<div class='card'>")
print("<h2>GeeksforGeeks</h2>")
print("<p>Success! You've Created {}! 😄</p>".format(name))
print("</div>")
print("</body>")
print("</html>")

Output:

html

Configuration and Start the Xampp Server

You can refer Create a CGI Script for complete configuration and how we can start the server to run out CGI Script.

Run the CGI Script

In this step, we will run the CGI Script by using the following command in your web browser

http://127.0.0.1/GeeksforGeeks/html.html

Video Demonstration

Conclusion

In conclusion, generating basic HTML output using CGI scripts involves several key steps. First, create a directory within the server’s root, often named “htdocs” or similar. Within this directory, establish a folder for your project and create a Python CGI script, ensuring it is executable and properly configured with the correct shebang line. The script should utilize the Common Gateway Interface (CGI) module to retrieve form data and dynamically generate HTML content. This content can include CSS styling for improved presentation.

Reffered: https://www.geeksforgeeks.org

Geeks Premier League

Related
What are the Main Benefits of Implementing a Kanban System?
jira issue hierarchy
How to Uninstall and Update Brew in MacOS?
Event Management Web App using MERN
Creating Your Own Node HTTP Request Router

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	13