HTML_DOM

What is DOM
• The W3C Document Object Model (DOM) is a platform and
language-neutral interface
• It allows program and scripts to dynamically access and update the
content, structure, and style of a document.
• The DOM is a W3C (World Wide Web Consortium) standard
• The HTML DOM defines a standard way for accessing and
manipulating HTML and XML documents.
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

What is DOM ..
• In the HTML DOM (Document Object Model), everything
is a node:
 The document itself is a document node
 All HTML elements are element nodes
 All HTML attributes are attribute nodes
 Text inside HTML elements are text nodes
 Comments are comment nodes
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

DOM
DOM = Document Object Model
• Defines a hierarchical model of the document structure through which all
document elements may be accessed
Nodes
 The W3C DOM defines element of a document is a node of a particular type
Node Types
 Common types are: document node, element node, text node, attribute
node, comment node, document-type node
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

W3C DOM is splitted 3-different
parts
• Core DOM - standard model for any structured document
• XML DOM - standard model for XML documents
 XML DOM defines the objects and properties of all XML elements, and
the methods to access them
• HTML DOM - standard model for HTML documents
 The HTML DOM defines the objects and properties of all HTML
elements, and the methods to access them.
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

HTML DOM
• In the HTML DOM, everything is a node.
• The DOM is HTML viewed as a node tree
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Node, Parents, Children &
siblings
• In a node tree, the top node is
called the root
• Every node has exactly one
parent, except the root (which
has no parent)
• A node can have any number of
children
• Siblings are nodes with the
same parent
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Programming Interface
• The HTML DOM can be accessed with JavaScript (and other
programming languages).
• All HTML elements are defined as objects, and the programming
interface is the object methods and object properties .
• A method is an action you can do (like add or modify an element).
• A property is a value that you can get or set (like the name or
content of a node).
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Commonly used
Methods/Properties
• Some commonly used HTML DOM methods:
 getElementById(id) - get the node (element) with a specified id
 appendChild(node) - insert a new child node (element)
 removeChild(node) - remove a child node (element)
• Some commonly used HTML DOM properties:
 innerHTML - the text value of a node (element)
 parentNode - the parent node of a node (element)
 childNodes - the child nodes of a node (element)
 attributes - the attributes nodes of a node (element)
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

DOM Example
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

DOM Example
element node
<HEAD>
document node
Document_type node
<!DOCTYPE>
element node
<HTML>
element node
<TITLE>
text node
"Sample"
element node
<BODY>
element node
<P>
text node
"This is a..."
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Netscape DOM
• DOM "begins" at the window object;
• Other objects are below the window object in the hierarchy
• Exception is the navigator object, (whose properties provide information
about the browser version,) which is a peer object of window rather
than a child
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Microsoft DOM
• Microsoft indexes an additional topic called as collections. A "collection,"
is an array-based object
• The observable difference between the two is the syntax. Netscape
supports a treelike hierarchical syntax
• On the other hand, Internet Explorer exposes all HTML objects as a
flat collection and lets you modify the style object
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

window
document
history
navigator
applets
all
anchors
body
embeds
forms
filters
images
links
plugins
styleSheets
scripts
location
screen
event
document
document
plugins
object
collection
Key
frames
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Conclusion - Overview
• DHTML – HTML, CSS, Scripting and DOM
• DOM - details the characteristic properties of each element of a Web
page
• DHTML can make your browser dynamic and interactive
• Content and design can be separated using Style sheets & uniformity of
the site can be maintained using them
• Validation of input’s given by the user can be done at the client side,
without connection to the server
• Drop down menus can be used to put a lot of information on the site
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

DHTML
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

What is DHTML ?
DHTML is the combination of several built-in browser features in
fourth generation browsers that enable a web page to be more
dynamic.
DHTML is NOT a scripting language (like JavaScript or VBscript),
but a browser feature- or enhancement- that makes the browser
dynamic
It uses a host of different technologies - JavaScript, VBScript, the
Document Object Model (DOM), layers, cascading stylesheets - to
create HTML that can change even after a page has been loaded into
a browser
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

DHTML ?
• It is considered to be made up of
 HTML
 Cascading Style Sheets (CSS)
 Scripting language
• All three of these components are linked via Document Object Model
(DOM)
• DOM is the interface that allows scripting languages to access the
content, style, and structure of the web documents and change them
dynamically
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Tools for DHTML
• HTML and XML
 Partitions and Organizes the content
• CSS
 Defines the Presentation of the content
• Scripting - JavaScript, JScript, VBScript
 Adds interactivity to the page
• DOM- Document Object Model
 Defines what and how elements are exposed for script access
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Components of DHTML
• DHTML requires four independent components to work:
• HTML,
• Cascading Style Sheets,
• Scripting and
• the Document Object Model.
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

HTML:
HTML defines the structure of a Web page, using such basic elements
as headings, forms, tables, paragraphs and links. On December 18,
1997, HTML 4.0 attained "recommended" status at the W3C. Changes
and enhancements introduced in HTML 4.0 made DHTML possible.
Cascading Style Sheets (CSS):
Similar to a template in a word-processing document, a style sheet
controls the formatting of HTML elements. Like in traditional desktop
publishing, one can use style sheet to specify page margins, point sizes
and leading. Cascading Style Sheets is a method to determine
precedence and to resolve conflicts when multiple styles are used.
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Scripting:
• Scripting provides the mechanisms to interpret user actions and produce client-side
changes to a page.
• For example, scripts can interpret mouse actions (such as the mouse passing over a
specified area of a page through the event model) and respond to the action by using a
set of predefined instructions (such as highlighting the text activated by the mouse
action).
• Although DHTML can communicate with several scripting languages, JavaScript is the
de facto standard for creating cross-browser DHTML pages.
Document Object Model (DOM):
• The DOM outlines Web page content in a way that makes it possible for HTML
elements, style sheets and scripting languages to interact with each other.
• The W3C defines the DOM as "a platform- and language-neutral interface that will
allow programs and scripts to dynamically access and update the content, structure,
and style of documents.
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

XML DOM
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

XML DOM
• A programming interface for HTML and XML documents.
• It defines the way a document can be accessed and manipulated.
• Using a DOM, a programmer can create a document, navigate its
structure, and add, modify, or delete its elements.
• The W3C DOM has been designed to be used with any programming
language.
• It provides a standard programming interface that can be used in a
wide variety of environments and applications.
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Node Interface
• XML parser can be used to load an XML document into the memory
of your compute
• Information can be retrieved and manipulated by accessing the
Document Object Model (DOM).
• The DOM represents a tree view of the XML document
• The documentElement is the top-level of the tree
• This element has one or many childNodes that represent the
branches of the tree
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Node Interface..
• A Node Interface is used to read and write (or access if you like)
the individual elements in the XML node tree
• The childNodes property of the document Element can be accesses
with a for/each construct to enumerate each individual node
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

XML DOM Parser:
• language-neutral programming model
• Supports JavaScript, VBScript, Perl, VB, Java, C++ and more
• Supports W3C XML 1.0 and XML DOM
• Supports DTD and validation
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

JavaScript in IE 5.0
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
VBScript
set xmlDoc = CreateObject("Microsoft.XMLDOM")
ASP
set xmlDoc = Server.CreateObject("Microsoft.XMLDOM")
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Loading an XML file into the
parser
<script language="JavaScript">
xmlDoc.async="false"
xmlDoc.load("note.xml") // ....... processing the document
goes here </script>
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Loading pure XML text into the
parser
<script language="JavaScript">
var text="<note>“
text=text+"<to>Tove</to><from>Jani</from>“
text=text+"<heading>Reminder</heading>“
text=text+"<body>Don't forget me this weekend!</body>"
text=text+"</note>" var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false" xmlDoc.loadXML(text)
// ....... processing the document goes here </script>
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Traversing the node tree
set xmlDoc=CreateObject("Microsoft.XMLDOM")
xmlDoc.load("note.xml")
for each x in xmlDoc.documentElement.childNodes
document.write(x.nodename)
document.write(": ")
document.write(x.text)
next
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Providing HTML content from
XML files
• XML can separate HTML documents from their data
nodes = xmlDoc.documentElement.childNodes
to.innerText = nodes.item(0).text
from.innerText = nodes.item(1).text
header.innerText = nodes.item(2).text
body.innerText = nodes.item(3).text
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Accessing XML elements by
name
xmlDoc.async="false“
document.write(xmlDoc.getElementsByTagName("from").item(0).text)
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Introduction to Java
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

What is Java ???
• A programming language.
 Java is developed by James Gosling at Sun Microsystems
Inc. in 1991
 Java is platform independent language
 Java programming is a/an object-oriented programming
• A platform
 A virtual machine (JVM) definition.
 Runtime environments in diverse hardware.
• A class library
 Standard APIs for GUI, data storage, processing, I/O, and
networking.
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra
James Gosling

Why Java ?? ..
• Simple
• Portable
• Secure
• Free
• Slow
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Similarity with C/C++
• Syntax is similar (control structures are very similar).
• Primitive data types similar
 bool is not an int.
• To print to stdout:
 System.out.println();
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Java Architecture
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

First Program
public class HelloWorld {
public static void main(String args[])
{
System.out.println("Hello World");
}
}
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Compiling and Running
HelloWorld.java
javac HelloWorld.java
java HelloWorld HelloWorld.class
compile
run
bytecode
source code
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Java Program Structure
public class MyProgram
{
}
// comments about the class
class header
class body
Comments can be placed almost anywhere
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Java Program Structure
public class MyProgram
{
}
// comments about the class
public static void main (String[] args)
{
}
// comments about the method
method header
method body
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Comments
• Comments in a program are called inline documentation
• They should be included to explain the purpose of the program and
describe processing steps
• They do not affect how a program works
• Java comments can take three forms:
// this comment runs to the end of the line
/* this comment runs to the terminating
symbol, even across line breaks */
/** this is a javadoc comment */
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Java bytecode and interpreter
• Bytecode is an intermediate representation of the
program (class).
• The Java interpreter starts up a new “Virtual Machine”.
• The VM starts executing the users class by running it’s
main() method.
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

PATH and CLASSPATH
• The java_home/bin directory is in your $PATH
• If you are using any classes outside the java or javax package, their
locations are included in your $CLASSPATH
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Java Applet
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

What is an Applet ?
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

APPLE APPLET
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

What is an Applet ?
• An applet is a small Java program that is
embedded and ran in some other Java
interpreter program such as
• Java technology-enabled browser
• Sun’s applet viewer program called applet viewer
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Applet
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Applet, Webpage, Client, Server
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Applet
 Program that runs in
 appletviewer (test utility for applets)
 Web browser (IE, Communicator)
 Executes when HTML (Hypertext Markup Language)
document containing applet is opened and downloaded
 Applications run in command windows
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Java Application vs Java Applet
Java applications
 Run in stand-alone mode
 No additional software required (such as a Web
browser)
Java applets
 Compiled Java class files
 Run within a Web browser (or an appletviewer)
 Loaded from anywhere on the Internet
 security restrictions!
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

First Java Applet
import java.awt.*; //Contains all of the classes for creating user interfaces
//and for painting graphics and images
import java.applet.Applet;
public class HelloFromVenus extends Applet {
public void paint(Graphics g) {
Dimension d = getSize();
g.setColor(Color.orange);
g.fillRect(0,0,d.width,d.height);
g.setFont(new Font("Sans-serif",Font.BOLD,24));
g.setColor(new Color(255, 10, 0));
g.drawString("Hello From Venus, a Mars Colony!", 40, 25);
g.drawImage(getImage(getCodeBase(),"venus.jpg"), 20, 60, this);
}
}
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

HTML Source
<html>
<head>
<title> Hello From Venus Applet </title>
</head>
<body bgcolor=black text=white>
<h2>Here is the <em>Hello From Venus</em>
Applet</h2>
<center>
<applet code="HelloFromVenus.class" width=700
height=500>
</applet>
</center>
<hr>
<a href="HelloFromVenus.java">The source.</a>
</body>
</html>
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Compile and Run an Applet
To compile:
javac HelloFromVenus.java  Generates
HelloFromVenus.class
To run:
a) Use the appletviewer from JDK
appletviewer Venus.html
b) Open page from browser:
Venus.html
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Elements of Java Applets
Superclass: java.applet.Applet
 extend javax.swing.JApplet if you have swing components
 Swing: Sun's set of GUI components that give much fancier screen
displays than the raw AWT
 No main() method
 paint() method paints the picture
Applet tags:
code width height
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Applet Lifecycle
• In Java, an applet undergoes
 object creation and
 object removal (when its job is over)
• This process is known as Applet Life Cycle.
• In its life of execution, the applet exists (lives) in one of
these 5 states known as callback methods.
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Applet’s Life
• Each applet has four major events in its lifetime:
 Initialization --- init()
 Starting --- start()
 Painting --- paint(Graphics)
 Stopping --- stop()
 Destroying --- destroy()
• The methods
 defined Applet class
 Except for paint()  in class java.awt.Container
 do nothing--they are stubs
 You make the applet do something by overriding these
methods
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Applet Life Cycle
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Methods are called in this order
• init and destroy are only called
once each
• start and stop are called whenever
the browser enters and leaves the
page
• do some work is code called by your
listeners
• paint is called again when the
applet needs to be repainted
init()
start()
stop()
destroy()
paint
do some work
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Simple Java Applet: Drawing a
String
• Now, create applets of our own
 Take a while before we can write applets like in the demos
 Cover many of same techniques
• Upcoming program
 Create an applet to display
"Welcome to Java!!"
 Show applet and HTML file, then discuss them line by line
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

import java.awt.*;
import java.applet.*;
public class WelcomeApplet extends Applet {
public void init() {
}
public void paint(Graphics g) {
g.drawString("Welcome to Java Programming!", 25, 25 );
}
}
extends allows us to inherit the capabilities of
class Applet.
Method paint is guaranteed to be called
in all applets. Its first line must be defined
as above.
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

String
 Import predefined classes grouped into packages
 When you create applets, import Applet class (in the package
java.applet)
 import the Graphics class (package java.awt) to draw graphics
 Can draw lines, rectangles ovals, strings of characters
 import specifies directory structure
import java.awt.*; // import package with class Graphics
import javax.applet.*; // import class Applet
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

String
 Class Applet defined for us
 Someone else defined "what it means to be an applet"
 Applets require over 200 methods!
 extends Applet
 Inherit methods, do not have to declare them all
 Do not need to know every detail of class Applet
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

String
 Class WelcomeApplet is a blueprint
 appletviewer or browser creates an object of class WelcomeApplet
 Keyword public required
 File can only have one public class
 public class name must be file name
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Simple Java Applet: Drawing a String
 Our class inherits method paint from Applet
 By default, paint has empty body
 Override (redefine) paint in our class
 Methods init, start and paint.
 Guaranteed to be called automatically
 Our applet gets "free" version of these by inheriting from Applet
 Free versions have empty body (do nothing)
 Every applet does not need all three methods
 Override the ones you need
 Applet container “draws itself” by calling method paint
public void paint( Graphics g )
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

String
 Method paint
 Draws graphics on screen
 void indicates paint returns nothing when finishes task
 Parenthesis define parameter list - where methods receive data to perform tasks
 Normally, data passed by programmer, as in JOptionPane.showMessageDialog
 paint gets parameters automatically
 Graphics object used by paint
 Mimic paint's first line
public void paint( Graphics g )
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

String
 Body of paint
 Method drawString (of class Graphics)
 Called using Graphics object g and dot (.)
 Method name, then parenthesis with arguments
 First argument: String to draw
 Second: x coordinate (in pixels) location
 Third: y coordinate (in pixels) location
 Java coordinate system
 Measured in pixels (picture elements)
 Upper left is (0,0)
g.drawString( "Welcome to Java Programming!", 25, 25 );
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

String
• Running the applet
 Compile
 As you would a regular file in JCreator
 or
 javac WelcomeApplet.java (from the command line)
 If no errors, bytecodes stored in WelcomeApplet.class
 Create an HTML file
 Loads the applet into appletviewer or a browser
 Ends in .htm or .html
 To execute an applet
 Create an HTML file indicating which applet the browser (or appletviewer)
should load and execute
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

String
 Simple HTML file (WelcomeApplet.html)
 Usually in same directory as .class file
 Remember, .class file created after compilation
 HTML codes (tags)
 Usually come in pairs
 Begin with < and end with >
 Lines 1 and 4 - begin and end the HTML tags
 Line 2 - begins <applet> tag
 Specifies code to use for applet
 Specifies width and height of display area in pixels
 Line 3 - ends <applet> tag
<html>
<applet code = "WelcomeApplet.class" width = "300" height = "45">
</applet>
</html>
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

String
 appletviewer only understands <applet> tags
 Ignores everything else
 Minimal browser
 Executing the applet
 appletviewer WelcomeApplet.html
 Perform in directory containing .class file
<html>
<applet code = "WelcomeApplet.class" width = "300" height = "45">
</applet>
</html>
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

String
• Running the applet in a Web browser
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

CGI – Common Gateway Interface

Need for CGI
• HTML/XHTML is static, it is not parameterized;
• Using only HTML/XHTML, CSS and JS one can not write
dynamic web pages: pages that look differently
• Depending on the user who visit it (client, administrator
etc.), pages that display different products depending on
what is in a database, pages that should be displayed
depending on the value of some parameters.
• using only HTML/XHTML, CSS and JS one can not
develop distributed web applications (e-commerce sites,
hotel booking, web search applications etc.)
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

What is CGI?
• A standard protocol for interfacing external application
software with the web server
• Developed in 1993 at NCSA (National Center for
Supercomputing Applications)
• CGI 1.1 specified in RFC 3875, 2004
• Allows an external executable file to respond to an HTTP
Request from the browser
• CGI defines how information is passed from the web
server to the executable program and how information is
passed from this back to the server
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Common Gateway Interface
• CGI is a standard mechanism for:
 Associating URLs with programs that can be run by a web server
 A protocol (of sorts) for how the request is passed to the external
program
 How the external program sends the response to the client
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Server-side web programming
• HTTP Response consists of the output of an external
program located on the server machine:
browser
web server
HTTP Request
HTTP Response
executable file/CGI,
php file, jsp file, asp
file
Server-side Request
Response Header +
Html file
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

CGI Programming
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra
CLIENT
HTTP
SERVER
CGI Program

CGI URLs
• There is mapping between URLs and CGI programs provided by a
web sever
 The exact mapping is not standardized
 web server admin can set it up
• Typically:
 requests that start with /CGI-BIN/ , /cgi-bin/ or /cgi/, etc.
 not to static documents
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

HTTP Server - CGI Interaction
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra
HTTP
SERVER
CGI Program
stdin
stdout
Environment
Variables

Drawbacks of CGI
• Errors are highly probable, -
Since no special web-oriented language is used for writing CGI
scripts (e.g. shell, perl, c/c++, python etc.) and so,
• Security vulnerabilities due to these problems
• Usually a new process is created for each run of a CGI
script; this increases the load on the server
• CGI scripts are executable file; they can write/delete
from the local disk, so this is a security vulnerability
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

First CGI example (in shell)
#!/bin/bash
echo Status: 200 OK
echo Content-Type: text/html
echo
echo
echo "<html><head></head>"
echo "<body>"
echo "Hello world."
echo "</body></html>"
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Getting parameters from the
client/browser
• parameters can be passed from the user to the CGI script
through an html <form>
<form action=“script.cgi” method=“GET | POST”>
<input type=“…” name=“input1” />
<input type=“…” name=“input2” />
…
<input type=“…” name=“inputN” />
</form>
• the script.cgi will get the parameters as:
input1=val1&input2=val2& … &inputN=valN
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Getting parameters from the
client/browser (2)
• parameters can be sent through the GET method (in the
HTTP Request header) => the CGI script will receive the
parameters from the web server in an environment
variable $QUERY_STRING
• or they can be passed through the POST method (in the
body of the HTTP Request) => the CGI script will receive
the parameters from the web server in the standard
input
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Form example
<html>
<head></head>
<body>
<form action="cgi-bin/post_ex.cgi" method="POST">
User: <input type="text" size="20" name="user" /><br />
Password: <input type="text" size="20" name="pass" /><br />
<input type="submit" value="Submit" name="submit" />
</form>
</body>
</html>
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Getting parameters through GET
#!/bin/bash
echo "Content-Type: text/html"
echo
echo
echo "<html><head></head>"
echo "<body>"
echo "Parameters are:<br />"
user=`echo $QUERY_STRING | cut -d"&" -f 1 | cut -d"=" -f 2`
pass=`echo $QUERY_STRING | cut -d"&" -f 2 | cut -d"=" -f 2`
echo $user $pass
echo "</body></html>"
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Getting parameters through POST
#include <stdio.h>
#include <string.h>
main() {
char line[255], *userline, *passline,
*s;
char user[20], pass[20];
printf("Content-Type:
text/htmlnn");
printf("<html><head></head>");
printf("<body>");
fgets(line, 255, stdin);
printf("Parameters are: <br />");
userline = strtok(line, "&");
passline = strtok(0, "&");
user[0] = 0;
if (userline) {
s = strtok(userline, "=");
s = strtok(0, "=");
if (s) strcpy(user, s);
}
pass[0] = 0;
if (passline) {
s = strtok(passline, "=");
s = strtok(0, "=");
if (s) strcpy(pass, s);
}
printf("%s, %s", user, pass);
printf("</body>");
printf("</html>");
}
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Beyond ISINDEX - Forms
Many Web services require more than a simple ISINDEX
HTML includes support for forms:
lots of field types
entire contents of form must be stuck together and put in QUERY_STRING by the
Web server
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Form Fields
• Each field within form has a name and a value
• The browser creates a query that
 includes a sequence of “name=value” substrings and
 sticks them together separated by the ‘&’ character
• If user types in “Mehmet H.” as the name and “none” for occupation,
 the query would look like this:
“name=Mehmet+H%2E&occupation=none”
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

HTML Forms
• Each form includes a METHOD that determines what http method is
used to submit the request
• Each form includes an ACTION that determines where the request is
made
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

An HTML Form
<FORM METHOD=GET
ACTION=http://foo.com/signup.cgi>
Name:
<INPUT TYPE=TEXT NAME=name><BR>
Occupation:
<INPUT TYPE=TEXT NAME=occupation><BR>
<INPUT TYPE=SUBMIT>
</FORM>
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

What a CGI will get
• query (from the environment variable QUERY_STRING) will be
 a URL-encoded string containing the name,value pairs of all form fields
• The CGI must decode the query and separate the individual fields
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

HTTP Method: POST
• GET method delivers data as part of URI
• POST method delivers data as the content of a request
<FORM METHOD=POST ACTION=…>
• If REQUEST_METHOD is a POST,
 the query is coming in STDIN
• The environment variable CONTENT_LENGTH tells us how much
data to read
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

Possible Problem
char buff[100];
char *clen = getenv(“CONTENT_LENGTH”);
if (clen==NULL)
/* handle error */
int len = atoi(clen);
if (read(0,buff,len)<0)
… /* handle error */
pray_for(!hacker);
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

GET vs. POST
• When using forms it’s generally better to use POST:
 there are limits on the maximum size of a GET query string
 environment variable
 a post query string doesn’t show up in the browser as part of the current
URL
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra

HTML for Forms
<HTML>
<HEAD> <TITLE>cgi-test</TITLE> </HEAD>
<BODY>
<p> This is a sample page to read
two data items from the web page:
<form action="cgi-bin/xaction" method=get>
<p>First name=<input type=text name=xfirst size=10>
<br>Last name=<input type=text name=xlast size=20>
<br> <input type=submit value=SEND>
<input type=reset value=RESET>
</form>
</BODY>
</HTML>
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra
Parameters passed as arguments
xfirst and xlast

Perl - CGI script
#!/usr/bin/perl
print “Content-Type: text/htmlnn”;
print “<html><head>n”;
print “<title>Sample PERL script</title>n”;
print “</head><body>n”;
print “<p>Query_string is $ENV{'QUERY_STRING'}n”;
foreach ( split( /&/, $ENV{'QUERY_STRING'}) )
{ ( $key, $val ) = split( /=/, $_, 2 );
$tmp{$key} = $val; }
print “<p>First name is <b>$tmp{'xfirst'}</b>n”;
print “<p>Last name is <b>$tmp{'xlast'}</b>n”;
print “</body></html>n”
U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra
Perl program reads parameters as xfirst&xlast from $ENV (environment) into
QUERY_STRING
Output of Perl is the syntax of an HTML page that is displayed

U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra
Questions Appeared in Previous year University Examination:
Nov – Dec 2013
1. What do you mean by JVM? – 2m
2. What is DOM ? – 7M
3. What do you mean by CGI ? - 7M
4. What is java Applet ? Explain the lifecycle of java Applet - 7M
Nov – Dec 2014
1. Define Document Object Model – 2m
2. Explain DHTML , Write down advantages of DHTML - 7M
3. Write a Short note on
• Perl &
• CGI Script – 7M
4. Explain Applet lifecycle with example - 7M
April-May 2014
1. How is session tracking achieved by url rewriting ? – 2m
2. Explain in details DOM Event handling - 7M
3. Explain the environment variable in CGI & also debugging the CGI program- 7M
4. Describe the lifecycle of applet with Syntax - 7M

U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra
Questions Appeared in Previous year University Examination …
Nov – Dec 2015
1. What is byte code ? – 2m
2. Describe life cycle of an Applet - 7M
3. Describe the types of operations used in math – 7M
4. Write a short note on (i) HTML DOM & (ii) CGI - 7M
Nov – Dec 2016
1. What do you mean by DOM ? – 2m
2. Write a short note on (i) CGI & (ii) PERL - 7M
3. Explain the lifecycle of an Applet – 7M
4. Write is java Discuss its characteristics and working - 7M
Nov – Dec 2017
1. Write the name of the DHTML Components ? – 2m
2. What do you understand by DOM ? Explain the level of W3C DOM Specifications. - 7M
3. Write a shot note on
i. CGI
ii. Perl – 7M
4. Explain the use of Java Applet. What are the stages of lifecycle of Java Applet ? - 7M

U-
5
HTML
DOM
-
Prof.
D.
P.
Mishra
Questions Appeared in Previous year University Examination …
Nov – Dec 2018
1. What is DOM ? – 2m
2. What are the advantages of Java Applet? Describe the advantages of Java Applet. - 7M
3. What is CGI ? Create simple CGI program using PERL. – 7M
4. How to run an Applet ? Give an Example. - 7M

HTML_DOM

Recommended

Recommended

More Related Content

Similar to HTML_DOM

Similar to HTML_DOM (20)

More from BIT DURG

More from BIT DURG (20)

Recently uploaded

Recently uploaded (20)

HTML_DOM