Building HTML Pages Dynamically

Oftentimes you are not able to hard-code the HTML pages because the pages rely on the data which is unknown when you develop the programs, e.g., a dropdown list showing the guest names. This slide shows how to build HTML pages dynamically.
Keep in mind that everything printed to the standard output from the server-side web programs will print back to the browser.
Therefore, in order to create a changing HTML page, you have to print the HTML page dynamically to the standard output. If you select some boxes below and click the “Submit” button, the browser will call the following scripts: 
12.html ⇒ Dynamic.cgi ⇒ Dynamic.pl ⇒ Dynamic.java ⇒ HTML ⇒ Dynamic.php
and create a list of radio buttons based on the data in the database.


view source
print?
01<form method="post" action="http://undcemcs01.und.edu/~wen.chen.hu/cgi-bin/jdbc/Dynamic.cgi">
02  Region:
03  <input type="checkbox" name="East" value="1" checked="checked" /> East
04  <input type="checkbox" name="Central" value="1" /> Central
05  <input type="checkbox" name="West" value="1" checked="checked" /> West
06  <input type="submit" name="act" value="Submit" />
07  <input type="submit" name="act" value="HTML source" />
08  <input type="submit" name="act" value="CGI source" />
09  <input type="submit" name="act" value="Perl source" />
10  <input type="submit" name="act" value="Java source" />
11  <input type="submit" name="act" value="PHP source" />
12  <input type="submit" name="act" value="Help" />
13  <input type="reset"             value="Reset" />
14</form>
Region:   East   Central   West  

             

The following code, Dynamic.cgi is used to set the web environment for the Oracle database:

~/public_html/cgi-bin/jdbc/Dynamic.cgi
view source
print?
1#!/usr/bin/bash
2 
3CLASSPATH=.:/usr/lib/oracle/23/client64
4CLASSPATH=$CLASSPATH:/usr/lib/oracle/23/client64/lib/ojdbc8.jar
5CLASSPATH=$CLASSPATH:/usr/lib/oracle/23/client64/lib/ottclasses.zip
6export  CLASSPATH
7 
8/usr/bin/perl  Dynamic.pl

The following Perl script is mainly used to process the web inputs including the checkboxes.

~/public_html/cgi-bin/jdbc/Dynamic.pl
view source
print?
01#!/usr/bin/perl
02use CGI;
03$query  = new CGI;
04$act    = $query->param( 'act' );
05$region = $query->param( 'region' );
06 
07if ( $act eq "Submit" ) {
08  # Print HTML.
09  print ( "Content-type: text/html\n\n" );
10 
11# Use "here-doc" syntax.
12print <<EndofHTML;
13  <html>
14   <head>
15    <link rel="stylesheet" type="text/css" href="http://undcemcs01.und.edu/~wen.chen.hu/css/1.css" />
16   </head>
17   <body text="#000000" vLink="#3366CC" link="#3366CC" bgColor="#ffffff"
18     alink="#3366CC" background="http://undcemcs01.und.edu/~wen.chen.hu/bg/63.png">
19    <center>
20     <font size="+0" color="#3366CC">
21EndofHTML
22 
23  # Compose a Java command.
24  my @regions = ( 'East', 'Central', 'West' );
25  $cmd = "/usr/bin/java -Djava.security.egd=file:/dev/./urandom Dynamic ";
26  foreach my $region (@regions) {
27    if ( $query->param($region) ) { $cmd .= "'" . $region . "' "; }
28  }
29  print( $cmd );      system( $cmd );
30 
31print <<EndofHTML;
32     </b></font>
33    </center>
34   </body>
35  </html>
36EndofHTML
37}
38elsif ( $act eq "HTML source" ) {
39  # Print plain text.
40  print ( "Content-type: text/plain\n\n" );
41  $cmd  = "/usr/bin/lynx -dump -source " . $ENV{HTTP_REFERER};
42  $cmd .= "; echo \n\n\n\n";
43  system( $cmd );
44}
45elsif ( $act eq "CGI source" ) {
46  print ( "Content-type: text/plain\n\n" );
47  system( "/bin/cat Dynamic.cgi; echo \n\n\n\n" );
48}
49elsif ( $act eq "Perl source" ) {
50  print ( "Content-type: text/plain\n\n" );
51  system( "/bin/cat Dynamic.pl; echo \n\n\n\n" );
52}
53elsif ( $act eq "Java source" ) {
54  print ( "Content-type: text/plain\n\n" );
55  system( "/bin/cat Dynamic.java; echo \n\n\n\n" );
56}
57elsif ( $act eq "PHP source" ) {
58  print ( "Content-type: text/plain\n\n" );
59  system( "/bin/cat Dynamic.php; echo \n\n\n\n" );
60}
61elsif ( $act eq "Help" ) {
62  print ( "Content-type: text/html\n\n" );
63  system( "/bin/cat Help.html" );
64}
65else {
66  print( "Content-type: text/html\n\n" );
67  print( "No such option: <em>$act</em>" );
68}

The following JDBC script accesses the database and retrieves the descriptions and creates the radio buttons.

~/public_html/cgi-bin/jdbc/Dynamic.java
view source
print?
01/*******************************************************************
02 
03  This program shows how to list the descriptions in the stores
04    based on the regions.
05 
06  To use this program, you need to create the following
07    three tables by using the following commands:
08 
09  SQL> CREATE TABLE stores (
10    2    store_key  INTEGER PRIMARY KEY,
11    3    city       VARCHAR(32) NOT NULL,
12    4    region     VARCHAR(16) NOT NULL );
13 
14  SQL> CREATE TABLE products (
15    2    product_key  INTEGER PRIMARY KEY,
16    3    description  VARCHAR(32) NOT NULL,
17    4    brand        VARCHAR(32) NOT NULL );
18 
19  SQL> CREATE TABLE sales_fact (
20    2    store_key    INTEGER,
21    3    product_key  INTEGER,
22    4    sales        NUMBER(5,2) NOT NULL,
23    5    cost         NUMBER(5,2) NOT NULL,
24    6    profit       NUMBER(5,2) NOT NULL,
25    7    PRIMARY KEY ( store_key, product_key ),
26    8    FOREIGN KEY ( store_key ) REFERENCES stores( store_key ) ON DELETE CASCADE,
27    9    FOREIGN KEY ( product_key ) REFERENCES products( product_key ) ON DELETE CASCADE );
28 
29*******************************************************************/
30 
31// Import the following packages to use JDBC.
32import  java.sql.*;
33import  java.io.*;
34import  oracle.jdbc.*;
35import  oracle.jdbc.pool.OracleDataSource;
36 
37class  Dynamic {
38  public static void  main( String args[ ] ) throws SQLException {
39    String user     = "user_id";
40    String password = "password";
41    String database = "20.185.147.112:1521/xe";
42 
43    // Open an OracleDataSource and get a connection.
44    OracleDataSource ods = new OracleDataSource( );
45    ods.setURL     ( "jdbc:oracle:thin:@" + database );
46    ods.setUser    ( user );
47    ods.setPassword( password );
48    Connection conn = ods.getConnection( );
49 
50    try {
51      // Create, compose, and execute a statement.
52      Statement stmt  = conn.createStatement( );
53      String   query  = "select distinct description from ";
54               query += "sales_fact f, stores s, products p where ( ";
55      if ( args.length == 0 ) query += "region=' ')";
56      else
57        for ( int i=0;  i < args.length;  i++ )
58          if ( i == 0 ) query += "region='"      + args[i].trim( );
59          else          query += "' or region='" + args[i].trim( );
60                        query += "') and f.store_key=s.store_key and f.product_key=p.product_key";
61 
62      System.out.println( query );
63      ResultSet rset = stmt.executeQuery( query );
64      System.out.print  ( "<form action='http://undcemcs01.und.edu/~wen.chen.hu/course/jdbc/Dynamic.php' " );
65      System.out.println( "method='post' target='result'>" );
66 
67      // Iterate through the result and print the data.
68      while ( rset.next( ) ) {
69        System.out.print( "<input type='radio' name='desc' value='" );
70        System.out.println( rset.getString(1) + "'>" + rset.getString(1) );
71      }
72      System.out.println( "<input type='submit' value='submit'></form>" );
73      System.out.println( "<iframe name='result' width='200' height='35'></iframe>" );
74 
75      // Close the ResultSet and Statement.
76      rset.close( );
77      stmt.close( );
78    }
79    catch ( SQLException ex ) {
80      System.out.println( ex );
81    }
82    // Close the Connection.
83    conn.close( );
84  }
85}

The following PHP script simply prints which radio button is selected.

~/public_html/course/jdbc/Dynamic.php
view source
print?
1<?php
2  echo( $_POST[desc] );
3?>




      “Whenever I hear anyone arguing for slavery,    
      I feel a strong impulse to see it tried on him personally.”    
      ― Abraham Lincoln