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="http://undcemcs01.und.edu/~wen.chen.hu/cgi-bin/jdbc/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>
|
|
The following code,
Dynamic.cgi
is used to set the web environment for the Oracle database:
~/public_html/cgi-bin/jdbc/Dynamic.cgi
|
#!/usr/bin/bash
CLASSPATH=.:/usr/lib/oracle/23/client64
CLASSPATH=$CLASSPATH:/usr/lib/oracle/23/client64/lib/ojdbc8.jar
CLASSPATH=$CLASSPATH:/usr/lib/oracle/23/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/jdbc/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.java; 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/jdbc/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 = "user_id";
String password = "password";
String database = "20.185.147.112:1521/xe";
// 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='http://undcemcs01.und.edu/~wen.chen.hu/course/jdbc/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/course/jdbc/Dynamic.php
|
<?php
echo( $_POST[desc] );
?>
|