MoeClay

July 30, 2021

CGI Python program for creating web pages

CGI (Common Gateway Interface) is a standard method used by web servers to convert web pages into executable program files.

Several programming languages carry the concept of cgi including:

c/c++
perl
ruby
python
etc

How CGI Programs Work

The Web Browser uses the http protocol to access the Http Server. The Http server will execute the cgi program on demand. If the cgi program has access to the database, then the data will be processed first. The cgi program returns results as per the Http Server request. Http server will send to web browser client.

📝 Web Server Configuration

Before starting to use the cgi python program, we must set up the web server so that it can read the cgi script file that we will create hello.py, here I use the nginx web server.

# Install the Python package.
$ sudo apt-get update
$ sudo apt-get install python python-pip

# Install the Nginx server and the Fcgiwrap package.
$ sudo apt-get install nginx fcgiwrap

# Copy file configuration
$ sudo cp /usr/share/doc/fcgiwrap/examples/nginx.conf /etc/nginx/fcgiwrap.conf

# create a directory to store the CGI files
$ sudo mkdir /usr/lib/cgi-bin -p

# insert configuration file above (include fcgiwrap.conf;)
$ sudo nano /etc/nginx/sites-available/default
server {
  listen 80 default_server;
  listen [::]:80 default_server;
  root /var/www/html;
  index index.html index.htm index.nginx-debian.html;
  server_name _;
  location / {
          try_files $uri $uri/ =404;
  }
  include fcgiwrap.conf;
}

Restart the Nginx service and start creating cgi files in /usr/lib/cgi-bin/ folder

📝 Create a cgi file: hello.py

Here's a snippet of the cgi python script: hello.py

#!/usr/bin/python
from __future__ import print_function

print("Content-Type: text/html\r\n\r\n")
print("<html>")
print("<head>")
  print("<title>Hello CGI</title>")
print("</head>")
print("<body>")
  print("<h1>Hello CGI</h1>")
  print("This webpage was created using Python")
print("</body>")
print("</html>")

The script above I use python2.7 version and save it with the name hello.py
Change the file permission.

sudo chmod 755 /usr/lib/cgi-bin/hello.py

Open your browser and enter the IP address of your web server plus /cgi-bin/hello.py.
In our example, the following URL was entered in the Browser:

http://localhost/cgi-bin/hello.py

Web Browser

📝 Creating Links Between CGI Programs

Create two cgi files in the /usr/lib/cgi-bin/ folder: link.py and gui.py.
Use root access if you can't create a folder in that directory and change the permissions to 755 for all cgi .py scripts in that folder.

#!/usr/bin/python
#file: link.py
from __future__ import print_function

print("""Content-type: text/html\r\n\r\n
<html>
<head>
  <title>Home Demo</title>
</head>
<body>
  <h3>Home Demo</h3>
  <p>Click the link below to access other cgi programs.</p>
  <a href="gui.py">Python for GUI applications</a>
</body>
</html>
""")

#!/usr/bin/python
#file: gui.py
from __future__ import print_function

print("""Content-type: text/html\r\n\r\n
<html>
<head>
  <title>GUI Demo</title>
</head>
<body>
  <h3>GUI Demo</h3>
  <p>In the python GUI there are various: wxpython, tkinter, pyqt, etc.</p>
</body>
</html>
""")

# command to change file permission in folder /usr/lib/cgi-bin/ 
$ sudo chmod 755 /usr/lib/cgi-bin/*

Open the link http://localhost/cgi-bin/link.py in a web browser and a link will appear to point to another cgi file i.e. (gui.py) http://localhost/cgi-bin/gui.py

📝 Showing Images in CGI

Create a file: /usr/lib/cgi-bin/image.py

#!/usr/bin/python
#file: image.py
from __future__ import print_function

print("""Content-type: text/html\r\n\r\n
<html>
<head>
  <title>Load Image</title>
</head>
<body>
  <h3>Show image in CGI Python</h3>
  <img src="http://localhost/cdn/img/pylogo.png" alt="Image Python" />
</body>
</html>
""")

Adjust your image file and Open Web browser: http://localhost/cgi-bin/image.py

📝 Make a List

Create a file: /usr/lib/cgi-bin/list.py

#!/usr/bin/python
#file: list.py
from __future__ import print_function

print("""Content-type: text/html\r\n\r\n
<html>
<head>
  <title>Creating a List</title>
</head>
<body>
<h3>Creating Lists in Python</h3>
<p>Shopping List: </p>
<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Mango</li>
  <li>Watermelon</li>
</ul>
</body>
</html>
""")

Open Web browser: http://localhost/cgi-bin/list.py

📝 Make a Table

Create a file: /usr/lib/cgi-bin/table.py

#!/usr/bin/python
#file: table.py
from __future__ import print_function

print("""Content-type: text/html\r\n\r\n
<html>
<head>
  <title>Membuat Table</title>
</head>
<body>
  <h3>Make Table in Python</h3>
  <p>Programming Language Creator Name</p>
  <table border="1">
    <tr>
      <th>Programming Language</th>
      <th>Maker Name</th>
    </tr>
    <tr>
      <td>Perl Programming</td>
      <td>Larry Wall</td>
    </tr>
    <tr>
      <td>Ruby Programming</td>
      <td>Yukihiro Matsumoto</td>
    </tr>
    <tr>
      <td>C Programming</td>
      <td>Dennis Ritchie</td>
    </tr>
    <tr>
      <td>C++ Programming</td>
      <td>Bjarne Stroustrup</td>
    </tr>
    <tr>
      <td>Java Programming</td>
      <td>James Gosling</td>
    </tr>
    <tr>
      <td>Python Programming</td>
      <td>Guido Van Rossum</td>
    </tr>
  </table>
</body>
</html>
""")

Open Web browser: http://localhost/cgi-bin/table.py

📝 Form GET Method

The parameters in the get form will be included in the URL.
Create two files: getform.py and getprocess.py

#!/usr/bin/python
#file: getform.py
from __future__ import print_function

print("""Content-type: text/html\r\n\r\n
<html>
<head>
<title>Get Demo</title>
</head>
<body>
<h3>Demo Creating a Form with GET</h3>
<form action="getprocess.py" method="get">
   Name<br>
   <input type="text" name="name" /><br>
   City<br>
   <input type="text" name="city" />
   <p><input type="submit" value="Submit" /></p>
</form>
</body>
</html>
""")

#!/usr/bin/python
#file: getprocess.py
from __future__ import print_function
import cgi

# create object from class FieldStorage
form = cgi.FieldStorage()

# bind data
name = form.getvalue("name")
city = form.getvalue("city")

print("""Content-type: text/html\r\n\r\n
<html>
<head>
<title>GET Action</title>
</head>
<body>
<h3>Handling Demo GET</h3
""")

print("Name: ",name,"<br/>")
print("City: ",city,"<br/>")

print("""
  </body>
</html>
""")

Open Web browser: http://localhost/cgi-bin/getform.py

📝 Form POST Method

The parameters in the get form will be included in the URL.
Create two files: postform.py and postprocess.py

#!/usr/bin/python
#file: postform.py
from __future__ import print_function

print("""Content-type: text/html\r\n\r\n
<html>
<head>
<title>POST Demo</title>
</head>
<body>
<h3>Demo Making Forms with POST</h3>
<form action="postproses.py" method="post">
  Nama<br>
  <input type="text" name="name" /><br>
  Kota<br>
  <input type="text" name="city" />
  <p><input type="submit" value="Submit" /></p>
</form>
</body>
</html>
""")

#!/usr/bin/python
#file: postprocess.py
from __future__ import print_function
import cgi

# create an object of class FieldStorage
form = cgi.FieldStorage()

# bind data
name = form.getvalue("name")
city = form.getvalue("city")

print("""Content-type: text/html\r\n\r\n
<html>
<head>
<title>POST Action</title>
</head>
<body>
<h3>POST Handling Demo</h3>
""")

print("Name: ",name,"<br/>")
print("City: ",city,"<br/>")

print("""
</body>
</html>
""")

Open Web browser: http://localhost/cgi-bin/postform.py

📝 Handling Radio Component

Radio form is used to select one
Create two files: radioform.py and radioprocess.py

#!/usr/bin/python
#file: radioform.py
from __future__ import print_function

print("""Content-type: text/html\r\n\r\n
<html>
<head>
<title>Radio Demo</title>
</head>
<body>
<h3>Demo for Making Radio Button</h3>
<form action="radioprocess.py" method="post">
   Name<br>
   <input type="text" name="name" /><br><br>

   Gender<br>
   <input type="radio" name="gender" value="P" />Male
   <input type="radio" name="gender" value="W" />Female<br><br>

   Religion:
   <input type="radio" name="religion" value="0" />Islam
   <input type="radio" name="religion" value="1" />Protestant
   <input type="radio" name="religion" value="2" />Catholic
   <input type="radio" name="religion" value="3" />Buddhist
   <input type="radio" name="religion" value="4" />Hindu<br>
   <p><input type="submit" value="Submit" /></p>
</form>
</body>
</html>
""")

#!/usr/bin/python
#file: radioprocess.py
from __future__ import print_function
import cgi

# create object from class FieldStorage
form = cgi.FieldStorage()

# bind data
name = form.getvalue("name")
codegender = form.getvalue("gender")
codereligion = int(form.getvalue("religion"))

#create gender directory directory
gender = {'P':"Male",'W':"Female"}

#create religious tuples
religion = ("Islam","Protestant","Catholic","Buddhist","Hinduism")

print("""Content-type: text/html\r\n\r\n
<html>
<head>
<title>Action Radio Button</title>
</head>
<body>
<h3>Radio Button Handling Demo</h3>
""")

print("Name: ",name,"<br/>")
print("Gender: ",gender[codegender],"<br/>")
print("Religion: ",religion[codereligion],"<br/>")

print("""
</body>
</html>
""")

Open Web browser: http://localhost/cgi-bin/radioform.py

📝 Handling Checkbox Component

Checkboxes are used to select more than one option.
Create two files: checkboxform.py and checkboxprocess.py

#!/usr/bin/python
#file: checkboxform.py
from __future__ import print_function

print("""Content-type: text/html\r\n\r\n
<html>
<head>
<title>Checkbox Demo</title>
</head>
<body>
<h3>Demo Making Checkbox Button</h3>
<form action="checkboxprocess.py" method="post">
   Name<br>
   <input type="text" name="name" /><br><br>

   Hobby:
   <input type="checkbox" name="hobby" value="Reading" />Reading
   <input type="checkbox" name="hobby" value="Sport" />Sport
   <input type="checkbox" name="hobby" value="Shopping" />Shopping
   <input type="checkbox" name="hobby" value="Sightseeing" />Sightseeing

   <p><input type="submit" value="Submit" /></p>
</form>
</body>
</html>
""")

#!/usr/bin/python
#file: checkboxprocess.py
from __future__ import print_function
import cgi

# create object from class FieldStorage
form = cgi.FieldStorage()

# bind data
name = form.getvalue("name")
hobby = form.getvalue("hobby")

print("""Content-type: text/html\r\n\r\n
<html>
<head>
<title>Action Checkbox Button</title>
</head>
<body>
<h3>Checkbox Button Handling Demo</h3>
""")

print("Name: ",name,"<br/>")
print("Hobby: <br/>")

if(type(hobby)==list):
   for h in hobby:
     print("- ",h,"<br/>")
else:
   print("- ",hobby)

print("""
</body>
</html>
""")

Open Web browser: http://localhost/cgi-bin/checkboxform.py

📝 Handling Comboboxes Component

Create two files: comboboxform.py and comboboxprocess.py

#!/usr/bin/python
#file: comboboxform.py
from __future__ import print_function

print("""Content-type: text/html\r\n\r\n
<html>
<head>
<title>Combobox Demo</title>
</head>
<body>
<h3>Combobox Making Demo</h3>
<form action="comboboxprocess.py" method="post">
   Name<br>
   <input type="text" name="name" /><br><br>

   Education:
   <select name="education" size="1">
     <option value="SD">SD</option>
     <option value="SMP">SMP</option>
     <option value="high school">high school</option>
     <option value="Diploma">Diploma</option>
     <option value="S1">S1</option>
     <option value="S2">S2</option>
     <option value="S3">S3</option>
   </select>
   <p><input type="submit" value="Submit" /></p>
</form>
</body>
</html>
""")

#!/usr/bin/python
#file: comboboxprocess.py
from __future__ import print_function
import cgi

# create object from class FieldStorage
form = cgi.FieldStorage()

# bind data
name = form.getvalue("name")
education = form.getvalue("education")

print("""Content-type: text/html\r\n\r\n
<html>
<head>
<title>Action Checkbox Button</title>
</head>
<body>
<h3>Checkbox Button Handling Demo</h3>
""")

print("Name: ",name,"<br/>")
print("Education: ",education,"<br/>")


print("""
</body>
</html>
""")

Open Web browser: http://localhost/cgi-bin/comboboxform.py

📝 Creating Textarea in Component

Create two files: textareaform.py and textareaprocess.py

#!/usr/bin/python
#file: textareaform.py
from __future__ import print_function

print("""Content-type: text/html\r\n\r\n
<html>
<head>
<title>Textarea Demo</title>
</head>
<body>
<h3>Demo Creating Textarea</h3>
<form action="textareaprocess.py" method="post">
   Name<br>
   <input type="text" name="name" /><br><br>

   Address:<br>
   <textarea name="address"></textarea>
   <p><input type="submit" value="Submit" /></p>
</form>
</body>
</html>
""")

#!/usr/bin/python
#file: textareaprocess.py
from __future__ import print_function
import cgi

# create object from class FieldStorage
form = cgi.FieldStorage()

# bind data
name = form.getvalue("name")
address = form.getvalue("address")

print("""Content-type: text/html\r\n\r\n
<html>
<head>
<title>Action Checkbox Button</title>
</head>
<body>
<h3>Checkbox Button Handling Demo</h3>
""")

print("Name: ",name,"<br/>")
print("Address: ",address,"<br/>")


print("""
</body>
</html>
""")

Open Web browser: http://localhost/cgi-bin/textareaform.py

📝 File Uploads in CGI

Create two files: uploadform.py and uploadprocess.py

#!/usr/bin/python
#file: uploadform.py
from __future__ import print_function

print("""Content-type: text/html\r\n\r\n
<html>
<head>
<title>Demo Upload File</title>
</head>
<body>
<h3>Demo for File Upload</h3>
<form action="uploadprocess.py" method="post" enctype="multipart/form-data">
   Filename<br>
   <input type="file" name="f" size="50" /><br>

   <p><input type="submit" value="Upload" /></p>
</form>
</body>
</html>
""")

#!/usr/bin/python
#file:uploadprocess.py
from __future__ import print_function
import cgi, os

# specify the destination directory
temp = "/home/users/uploads/"

# create object from class FieldStorage
form = cgi.FieldStorage()

# bind data
f = form['f']

if f.filename:
   # retrieve filename
   filename = os.path.basename(f.filename)
   # create new file
   fo = open(temp+filename,"wb")
   fo.write(f.file.read())
   info = "File upload was successful"
else:
   info = "File upload failed"

print("""Content-type: text/html\r\n\r\n
<html>
<head>
<title>Action Upload</title>
</head>
<body>
<h3>File Upload Handling Demo</h3>
""")

print(info,"<br/>")
print("Upload location: ",temp,filename)


print("""
</body>
</html>
""")

Open Web browser: http://localhost/cgi-bin/uploadform.py

📝 Fetching Databases in CGI Python

Create a mysql database named contacts, then create a phone table and create field{id, name, number} and fill some data into the phone table. Create 1 file: database.py

#!/usr/bin/python
#file: database.py
from __future__ import print_function
import mysql.connector

print("""Content-type: text/html\r\n\r\n
<html>
<head>
<title>CGI Database</title>
</head>
<body>
<h3>Database Access Demo</h3>
""")

try:
  # create connection obj
  conn = mysql.connector.connect(user="root",password="",host="127.0.0.1",database="contact")
  # create obj cursor
  cur = conn.cursor()
  # execute sql statement
  cur.execute("SELECT id,name,phone number FROM")
  # capture all lines in cursor
  result = cur.fetchall()

  # display in table form
  # code
  print("""
<table border="1">
<tr>
  <td width="180">Id</td>
  <td width="180">Name</td>
  <td width="180">Number</td>
</tr>
""")
  for (id,name,number) in result:
    print("<tr>")
    print("<td>",id,"</td>")
    print("<td>",name,"</td>")
    print("<td>",number,"</td>")
    print("</tr>")
  print("""</table>""")
  cur.close()
except:
  print("ERROR: Data cannot be accessed")
else:
  # close obj cursor and connection
  conn.close()

print("""
</body>
</html>
""")

author : doctor. moeclay

How Python CGI Programs Work