{"id":4426,"date":"2024-03-21T02:15:00","date_gmt":"2024-03-21T06:15:00","guid":{"rendered":"https:\/\/www.both.org\/?p=4426"},"modified":"2024-03-14T15:21:21","modified_gmt":"2024-03-14T19:21:21","slug":"how-to-generate-webpages-using-cgi-scripts","status":"publish","type":"post","link":"https:\/\/www.both.org\/?p=4426","title":{"rendered":"How to generate webpages using CGI scripts"},"content":{"rendered":"
\r\n
\r\n \r\n <\/i>\r\n <\/a>\r\n <\/span>\r\n<\/div><\/div>\n

Image by: Opensource.com<\/p>\n\n\n\n

The Common Gateway Interface provides an easy way to build dynamic websites using any language of your choice.<\/h2>\n\n\n\n

Back in the stone age of the Internet when I first created my first business website, life was simple.<\/p>\n\n\n\n

I installed Apache and created a few simple HTML pages that stated a few important things about my business and gave important information like an overview of my product and how to contact me. It was a static website because the content seldom changed. Maintenance was simple because of the unchanging nature of my site.<\/p>\n\n\n\n

Static content<\/h2>\n\n\n\n

Static content is easy and still common. Let’s take a quick look at a couple sample static web pages. You don’t need a working website to perform these little experiments. Just place the files in your home directory and open them with your browser. You will see exactly what you would if the file were served to your browser via a web server.<\/p>\n\n\n\n

The first thing you need on a static website is the index.html<\/code> file, which is usually located in the \/var\/www\/html <\/code>directory. This file can be as simple as a text phrase such as \u201cHello world\u201d without any HTML markup at all. This would simply display the text string. Create index.html<\/code> in your home directory and add \u201cHello world\u201d (without the quotes) as its only content. Open index.html<\/code> in your browser with the following URL:<\/p>\n\n\n\n

file:\/\/\/home\/<yourhomedirectory>\/index.html<\/code><\/pre>\n\n\n\n
HTML is not required, but if you had a large amount of text that needed formatting, the results of a web page with no HTML coding would be incomprehensible with everything running together.<\/p>\n\n\n\n
The next step is to make the content more readable by using a bit of HTML coding to provide some formatting. The following command creates a page with the absolute minimum markup required for a static web page with HTML. You could also use your favorite editor to create the content.<\/p>\n\n\n\n
echo \"<h1>Hello World<\/h1>\" > test1.html<\/code><\/pre>\n\n\n\n
Now view index.html and see the difference.<\/p>\n\n\n\n
Of course you can put a lot of additional HTML around the actual content line to make a more complete and standard web page. That more complete version as shown below will still display the same results in the browser, but it also forms the basis for more standardized web site. Go ahead and use this content for your index.html file and display it in your browser.<\/p>\n\n\n\n
<!DOCTYPE HTML PUBLIC \"-\/\/w3c\/\/DD HTML 4.0\/\/EN\">\n<html>\n<head>\n<title>My Web Page<\/title>\n<\/head>\n<body>\n<h1>Hello World<\/h1>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
I built a couple static websites using these techniques back in those early days of the Net, but my life was about to change.<\/p>\n\n\n\n
Dynamic web pages for a new job<\/h2>\n\n\n\n
I took a new job in which my primary task was to create and maintain the Common Gateway Interface<\/a> (CGI) code for a very dynamic website. In this context, dynamic means that the HTML needed to produce the web page on a browser was generated from data that could be different every time the page was accessed. This includes input from the user on a web form that is used to look up data in a database. The resulting data is surrounded by appropriate HTML and displayed on the requesting browser. But it does not need to be that complex.<\/p>\n\n\n\n
Using CGI scripts for a website allows you to create simple or complex interactive programs that can be run to provide a dynamic web page that can change based on input, calculations, current conditions in the server, and so on. There are many languages that can be used for CGI scripts. We will look at two of them: Perl and Bash. Other popular CGI languages include PHP and Python.<\/p>\n\n\n\n
This article does not cover installation and setup of Apache or any other web server. If you have access to a web server that you can experiment with, you can directly view the results as they would appear in a browser. Otherwise, you can still run the programs from the command line and view the HTML that would be created. You can also redirect that HTML output to a file and then display the resulting file in your browser.<\/p>\n\n\n\n
Using Perl<\/h2>\n\n\n\n
Perl is a very popular language for CGI scripts. Its strength is that it is a very powerful language for the manipulation of text.<\/p>\n\n\n\n
To get CGI scripts to execute, you need the following line in the in httpd.conf<\/code> for the website you are using. This tells the web server where your executable CGI files are located. For this experiment, let’s not worry about that.<\/p>\n\n\n\n
ScriptAlias \/cgi-bin\/ \"\/var\/www\/cgi-bin\/\"<\/code><\/pre>\n\n\n\n
Add the following Perl code to the file index.cgi<\/code>, and save it in your home directory. Set the ownership of the file to apache.apache<\/code> when you use a web server, and set the permissions to 755 because it must be executable no matter where it is located.<\/p>\n\n\n\n
#!\/usr\/bin\/perl\nprint \"Content-type: text\/html\\n\\n\";\nprint \"<html><body>\\n\";\nprint \"<h1>Hello World<\/h1>\\n\";\nprint \"Using Perl<p>\\n\";\nprint \"<\/body><\/html>\\n\";<\/code><\/pre>\n\n\n\n
Run this program from the command line and view the results. It displays the HTML code it generates.<\/p>\n\n\n\n
Now view the index.cgi<\/code> in your browser. Well, all you get is the contents of the file. Browsers really need to have this delivered as CGI content. Apache does not really know that it needs to run the file as a CGI program unless the Apache configuration for the web site includes the ScriptAlias<\/code> definition as shown above. Without that bit of configuration Apache just sends the data in the file to the browser. If you have access to a web server, you could try this out with your executable index files in the \/var\/www\/cgi-bin<\/code> directory.<\/p>\n\n\n\n
To see what this would look like in your browser, run the program again and redirect the output to a new file. Name it whatever you want. Then use your browser to view the file that contains the generated content.<\/p>\n\n\n\n
The above CGI program is still generating static content because it always displays the same output. Add the following line to your CGI program immediately after the \u201cHello World\u201d line. The Perl system<\/code> command executes the commands following it in a system shell, and returns the result to the program. In this case, we simply grep the current RAM usage out of the results from the free command.<\/p>\n\n\n\n
system \"free | grep Mem\\n\";<\/code><\/pre>\n\n\n\n
Now run the program again and redirect the output to the results file. Reload the file in the browser. You see an additional line so that displays the system memory statistics. Run the program and refresh the browser a couple more times and notice that the memory usage should change occasionally.<\/p>\n\n\n\n
Using Bash<\/h2>\n\n\n\n
Bash is probably the simplest language of all for use in CGI scripts. Its primary strength for CGI programming is that it has direct access to all of the standard GNU utilities and system programs.<\/p>\n\n\n\n
Rename the existing index.cgi<\/code> to Perl.index.cgi<\/code> and create a new index.cgi<\/code> with this content: <\/p>\n\n\n\n
#!\/bin\/bash\necho \"Content-type: text\/html\"\necho \"\" \necho '<html>'\necho '<head>'\necho '<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">'\necho '<title>Hello World<\/title>'\necho '<\/head>'\necho '<body>'\necho '<h1>Hello World<\/h1><p>'\necho 'Using Bash<p>'\nfree | grep Mem\necho '<\/body>'\necho '<\/html>'\nexit 0<\/code><\/pre>\n\n\n\n
Remember to set the permissions correctly to executable.<\/p>\n\n\n\n
Execute this program from the command-line and view the output, then run it and redirect the output to the temporary results file you created previously. Refresh the browser to view what it looks like displayed as a web page.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
It’s easy to create CGI programs that can be used to generate a wide range of dynamic web pages. This is a trivial example, but you now see some of the possibilities.  <\/p>\n","protected":false},"excerpt":{"rendered":"
The Common Gateway Interface provides an easy way to build dynamic websites using any language of your choice.<\/p>\n","protected":false},"author":2,"featured_media":2811,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[5,315],"tags":[311,313,314],"class_list":["post-4426","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-linux","category-web-server","tag-apache","tag-cgi","tag-web-server"],"modified_by":"David Both","_links":{"self":[{"href":"https:\/\/www.both.org\/index.php?rest_route=\/wp\/v2\/posts\/4426","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.both.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.both.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.both.org\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.both.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4426"}],"version-history":[{"count":4,"href":"https:\/\/www.both.org\/index.php?rest_route=\/wp\/v2\/posts\/4426\/revisions"}],"predecessor-version":[{"id":4434,"href":"https:\/\/www.both.org\/index.php?rest_route=\/wp\/v2\/posts\/4426\/revisions\/4434"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.both.org\/index.php?rest_route=\/wp\/v2\/media\/2811"}],"wp:attachment":[{"href":"https:\/\/www.both.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4426"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.both.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4426"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.both.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}