How to generate webpages using CGI scripts?

In this article, we will explore the process of generating webpages using CGI scripts. Furthermore, we will discuss the importance of CGI script implementation in facilitating dynamic content creation. Additionally, we’ll delve into the intricacies of linking one page to another by creating multiple pages within Python CGI scripts, ensuring a seamless and well-implemented navigation experience.

What are Webpages?

Webpages are documents or files accessible on the World Wide Web, typically formatted in HTML (Hypertext Markup Language). These documents are displayed in web browsers and can contain a variety of content such as text, images, videos, and hyperlinks. Webpages are the building blocks of websites, and users interact with them to consume information, access services, or engage in various online activities. The content of a webpage is often designed and organized using a combination of HTML, and CSS (Cascading Style Sheets).

Generate Webpages Using CGI Scripts

Here, we will walk through a step-by-step implementation guide on how to generate webpages using CGI scripts. Follow the steps below for generating webpages using Python CGI scripts:

Required Installation

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

Create Folder

First, create a folder named “Webpage” in the “htdocs” directory. Inside this “Webpage” folder, create three files: python1.py, python2.py, and python3.py.

In the “python1.py” file we created the home page, In the “python2.py” file we created the about page and In the “python3.py” file we created the contact page, write a CGI script to retrieve page from one page to other page.

Create a file to Write Python CGI Script

python1.py: Below code is a Python CGI script that generates an HTML webpage. It specifies the Python interpreter’s location, sets the content type to HTML, and then prints an HTML document with a title, styling, and content.

The webpage welcomes users to the w3wiki home page, displaying a brief description and navigation links to “About” and “Contact” pages.

Python3




#!C:\Program Files\Python311\python.exe
 
print("Content-type: text/html\n\n")
 
print("""
<!DOCTYPE html>
<html>
<head>
    <title>w3wiki - Home</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
 
        h2 {
            color: #2e8b57; /* w3wiki green color */
        }
    </style>
</head>
<body>
    <h2>Welcome to w3wiki - Home Page</h2>
    <p>This is the home page content.</p>
    <p><a href="python2.py">About</a> | <a href="python3.py">Contact</a></p>
</body>
</html>
""")


Output:

python2.py: This Python CGI script generates an HTML webpage for the “About” section of w3wiki. It specifies the Python interpreter’s location, sets the content type to HTML, and then prints an HTML document with a title, styling, and content.

The webpage provides information about w3wiki, including a brief description and navigation links to the “Home” and “Contact” pages.

Python3




#!C:\Program Files\Python311\python.exe
 
print("Content-type: text/html\n\n")
 
print("""
<!DOCTYPE html>
<html>
<head>
    <title>w3wiki - About</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
 
        h2 {
            color: #2e8b57; /* w3wiki green color */
        }
    </style>
</head>
<body>
    <h2>About w3wiki</h2>
    <p>This is the about page content.</p>
    <p><a href="python1.py">Home</a> | <a href="python3.py">Contact</a></p>
</body>
</html>
""")


Output

python3.py : This Python CGI script generates an HTML webpage for the “Contact” section of w3wiki. It specifies the Python interpreter’s location, sets the content type to HTML, and then prints an HTML document with a title, styling, and content.

The webpage includes information about contacting w3wiki and provides navigation links to the “Home” and “About” pages.

Python3




#!C:\Program Files\Python311\python.exe
 
print("Content-type: text/html\n\n")
 
print("""
<!DOCTYPE html>
<html>
<head>
    <title>w3wiki - Contact</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
 
        h2 {
            color: #2e8b57; /* w3wiki green color */
        }
    </style>
</head>
<body>
    <h2>Contact w3wiki</h2>
    <p>This is the contact page content.</p>
    <p><a href="python1.py">Home</a> | <a href="python2.py">About</a></p>
</body>
</html>
""")


Output

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/Webpage/python1.py

Video Demonstration

Conclusion

In conclusion, this step-by-step guide has provided insights into the process of generating webpages using CGI scripts. By setting up the server environment, creating a CGI script, and configuring permissions, users can dynamically generate HTML content for their webpages. The flexibility of CGI scripts allows for the incorporation of dynamic elements and the seamless handling of form submissions, enhancing the overall interactivity of web content. Embracing CGI scripts empowers developers to create dynamic, responsive, and engaging webpages, contributing to a more interactive and user-friendly online experience.