This directory contains several stages of a web app design, starting with a simple web form growing to a single page app with interactive plotting.
server.py is a simple python web server that handles cgi.
All examples are served with the built-in python web server infrastructure. This is not usually meant for deployment for a variety of reasons. Because it is run as a non-privileged user, for example, it can't open port 80 which is the default http port, and instead all web links need to use the server localhost:8008 instead of just localhost.
Chances are the firewall on your box will prevent external sites from accessing port 8008, and you will need system privileges to enable opening the port. This is still simpler than installing and configuring apache though.
Run server.py on your local machine to start the web services.
direct.html is a simple web form with a cgi callback.
cgi-bin/direct.py is a simple python cgi script that returns a web page, integrating some information from the form generated by index.html. Note that the returned page is different from the current page, and further queries will not be possible without returning to the original form. The back button will ask to resubmit the form, which is unpleasant, and so a forward link back to the original form is provided on the page. This fills up the browser history, so while simple, it does not provide a good user experience.
Assuming server is running, use http://localhost:8008 to test.
ajax.html is a simple single page web application, where responses are pasted at the end of the page. The page starts with a bit of javascript to perform the cgi call and post the response. I spent a long time rediscovering the "preventDefault" action on the form, which resulted in a lot of CGI errors. The form does not do any error checking.
cgi-bin/ajax.py is the cgi backend. It basically plugs the form data into a bit of html and pushes it back to web page.
Note that if the browser does not have scripting available, then this page won't render.
Use http://localhost:8008/ajax.html to test.
The web service can be more machine friendly by serving a JSON data structure rather than an html string. This variant implements the same single page web app, except the html is composed on the browser rather than the server.
ajax_json.html is the web page.
cgi-bin/ajax_json.py is the cgi backend.
JSON adds a lot of flexibility, including use from other programs that are not browsers. For example, the curl program can retrieve the data from the cgi server:
$ curl -d "name=george" http://localhost:8008/cgi-bin/ajax_json.py
{"name": "george"}
For graphical data, you can compose the graph on the server side, save the png file, and return a link to it to the browser. This link can be added to the page as a response. Each generated image is tagged with a time stamp in the name so that different requests don't overwrite each other.
ajax_image.html is the web page.
test.png is a sample image included so that this tutorial doesn't need python plotting packages installed.
cgi-bin/ajax_image.py is the cgi backend.
Note that the resulting image is not interactive, and you won't be able to zoom and scroll, or find information about each point. Also, the image directory will grow, and you will need a cron job to delete files older than some age.
You could avoid creating a new image file each time by sending the image back as png data. Easy enough to figure out on the web, but not worth it compared to plotting the data directly on the browser.
Rather than server side graphics, your users will have a better experience with graphs generated in the browser. There are a number of javascript plotting packages. This example uses jqplot because I have some experience with it. Others work just as well.
ajax_jqplot.html is the web page.
cgi-bin/ajax_jqplot is the cgi backend.
Before running this program, you first need to unpack the jqplot distribution into your server directory and rename the directory from "dist" to "jqplot".
Tested with version 1.0.8 from https://bitbucket.org/cleonello/jqplot/downloads/
Note that the data and graph options are sent as a JSON string, so you could have other programs consuming this data:
$ curl -d "name=george" http://localhost:8008/cgi-bin/ajax_jqplot.py
{"name": "george", "chart": {"data": [[1, 1], [2, 2], [3, 1]], "options": {"series": [{"color": "#5FAB78"}], "axes": {"yaxis": {"max": 5, "min": -1}}, "title": "Title"}}}