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. 


  <form method="post" action="../../../cgi-bin/520/6/Dynamic.cgi"> 
    Region: 
    <input type="checkbox" name="East" value="1" checked="checked" /> East
    <input type="checkbox" name="Central" value="1" /> Central
    <input type="checkbox" name="West" value="1" checked="checked" /> West
    <input type="submit" name="act" value="Submit" />
    <input type="submit" name="act" value="HTML source" />
    <input type="submit" name="act" value="CGI source" />
    <input type="submit" name="act" value="Perl source" />
    <input type="submit" name="act" value="Java source" />
    <input type="submit" name="act" value="PHP source" />
    <input type="submit" name="act" value="Help" />
    <input type="reset"             value="Reset" />
  </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/520/6/Dynamic.cgi 
#!/usr/bin/bash

CLASSPATH=.:/usr/lib/oracle/12.1/client64
CLASSPATH=$CLASSPATH:/usr/lib/oracle/12.1/client64/lib/ojdbc7.jar
CLASSPATH=$CLASSPATH:/usr/lib/oracle/12.1/client64/lib/ottclasses.zip
export  CLASSPATH

/usr/bin/perl  Dynamic.pl

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

~/public_html/cgi-bin/520/6/Dynamic.pl 
#!/usr/bin/perl
use CGI;
$query = new CGI;
$act   = $query->param( 'act' );
$region = $query->param( 'region' );

if ( $act eq "Submit" ) {
  # Print HTML.
  print ( "Content-type: text/html\n\n" );

# Use "here-doc" syntax.
print <<EndofHTML;
  <html>
   <head>
    <link rel="stylesheet" type="text/css" href="http://undcemcs01.und.edu/~wen.chen.hu/css/1.css" />
   </head>
   <body text="#000000" vLink="#3366CC" link="#3366CC" bgColor="#ffffff"
     alink="#3366CC" background="http://undcemcs01.und.edu/~wen.chen.hu/bg/63.png">
    <center>
     <font size="+0" color="#3366CC">
EndofHTML

  # Compose a Java command.
  my @regions = ( 'East', 'Central', 'West' );
  $cmd = "/usr/bin/java -Djava.security.egd=file:/dev/./urandom Dynamic ";
  foreach my $region (@regions) {
    if ( $query->param($region) ) { $cmd .= "'" . $region . "' "; }
  }
  print( $cmd );      system( $cmd );

print <<EndofHTML;
     </b></font>
    </center>
   </body>
  </html>
EndofHTML
}
elsif ( $act eq "HTML source" ) {
  # Print plain text.
  print ( "Content-type: text/plain\n\n" );
  $cmd  = "/usr/bin/lynx -dump -source " . $ENV{HTTP_REFERER};
  $cmd .= "; echo \n\n\n\n";
  system( $cmd );
}
elsif ( $act eq "CGI source" ) {
  print ( "Content-type: text/plain\n\n" );
  system( "/bin/cat Dynamic.cgi; echo \n\n\n\n" );
}
elsif ( $act eq "Perl source" ) {
  print ( "Content-type: text/plain\n\n" );
  system( "/bin/cat Dynamic.pl; echo \n\n\n\n" );
}
elsif ( $act eq "Java source" ) {
  print ( "Content-type: text/plain\n\n" );
  system( "/bin/cat Dynamic.txt; echo \n\n\n\n" );
}
elsif ( $act eq "PHP source" ) {
  print ( "Content-type: text/plain\n\n" );
  system( "/bin/cat Dynamic.php; echo \n\n\n\n" );
}
elsif ( $act eq "Help" ) {
  print ( "Content-type: text/html\n\n" );
  system( "/bin/cat Help.html" );
}
else {
  print( "Content-type: text/html\n\n" );
  print( "No such option: <em>$act</em>" );
}

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

~/public_html/cgi-bin/520/6/Dynamic.java 
/*******************************************************************

  This program shows how to list the descriptions in the stores
    based on the regions.

  To use this program, you need to create the following
    three tables by using the following commands:

  SQL> CREATE TABLE stores (
    2    store_key  INTEGER PRIMARY KEY,
    3    city       VARCHAR(32) NOT NULL,
    4    region     VARCHAR(16) NOT NULL );

  SQL> CREATE TABLE products (
    2    product_key  INTEGER PRIMARY KEY,
    3    description  VARCHAR(32) NOT NULL,
    4    brand        VARCHAR(32) NOT NULL );

  SQL> CREATE TABLE sales_fact (
    2    store_key    INTEGER,
    3    product_key  INTEGER,
    4    sales        NUMBER(5,2) NOT NULL,
    5    cost         NUMBER(5,2) NOT NULL,
    6    profit       NUMBER(5,2) NOT NULL,
    7    PRIMARY KEY ( store_key, product_key ),
    8    FOREIGN KEY ( store_key ) REFERENCES stores( store_key ) ON DELETE CASCADE,
    9    FOREIGN KEY ( product_key ) REFERENCES products( product_key ) ON DELETE CASCADE );

*******************************************************************/

// Import the following packages to use JDBC.
import  java.sql.*;
import  java.io.*;
import  oracle.jdbc.*;
import  oracle.jdbc.pool.OracleDataSource;

class  Dynamic {
  public static void  main( String args[ ] ) throws SQLException {
    String user     = "C##user.id";
    String password = "password";
    String database = "65.52.222.73:1521/cdb1";

    // Open an OracleDataSource and get a connection.
    OracleDataSource ods = new OracleDataSource( );
    ods.setURL     ( "jdbc:oracle:thin:@" + database );
    ods.setUser    ( user );
    ods.setPassword( password );
    Connection conn = ods.getConnection( );

    try {
      // Create, compose, and execute a statement.
      Statement stmt  = conn.createStatement( );
      String   query  = "select distinct description from ";
               query += "sales_fact f, stores s, products p where ( ";
      if ( args.length == 0 ) query += "region=' ')";
      else
        for ( int i=0;  i < args.length;  i++ )
          if ( i == 0 ) query += "region='"      + args[i].trim( );
          else          query += "' or region='" + args[i].trim( );
                        query += "') and f.store_key=s.store_key and f.product_key=p.product_key";

      System.out.println( query );
      ResultSet rset = stmt.executeQuery( query );
      System.out.print  ( "<form action='../../../cgi-bin/520/6/Dynamic.php' " );
      System.out.println( "method='post' target='result'>" );

      // Iterate through the result and print the data.
      while ( rset.next( ) ) {
        System.out.print( "<input type='radio' name='desc' value='" );
        System.out.println( rset.getString(1) + "'>" + rset.getString(1) );
      }
      System.out.println( "<input type='submit' value='submit'></form>" );
      System.out.println( "<iframe name='result' width='200' height='35'></iframe>" );

      // Close the ResultSet and Statement.
      rset.close( );
      stmt.close( );
    }
    catch ( SQLException ex ) {
      System.out.println( ex );
    }
    // Close the Connection.
    conn.close( );
  }
}

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

~/public_html/cgi-bin/520/6/Dynamic.php 
<?php
  echo( $_POST[desc] );
?>




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