cs2358 internet programming lab
TRANSCRIPT
CS2358-INTERNET PROGRAMMING LAB
1. HTML PAGES WITH FRAMES, LINKS, TABLESAIM:
The aim is to create a HTML with frames, links, tables and other tags.
DESCRIPTION:
FRAMES:
<frame>
It is a HTML tag that can be fixed to divide the page into several rectangular
areas and to display a separate document in each rectangle.
Each of those rectangles are called frames.
Can display more than one HTML document in the some browser window
Each frame is independent of the other.
FRAMESET:
The <frameset> tag defines how to divide the window into frame.
LINKS:
A link is the “address” to a document<or a resource on the web.
Syntax:
<a href=”url”> Link That</a>
<a> --- Anchor element:
It is used to define both hyperlinks and anchors.
The href attribute:
Defines the link “address”
The “a” element defines a link to “url”
TABLES:
The <table> tag is used to define a table
Divided into rows with <tr>
Each row is divided into data cells with <td>
Data cell can be
Text
Images
lists
paragraphs
forms
horizontal Rules
Tables
Example:
<table border="1" cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
LISTS:
HTML supports,
Ordered
Unordered
Definition lists.
Unordered Lists:
<ul> is used for unordered lists. The list are marked with bullets.
Example:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
ORDERED LISTS:
<ol> is used for ordered lists. The list items are marked with numbers.
Example:
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
DEFINITION LISTS:
It is a list of items with a description of each item.
It starts with tag <dl>
Each terms starts with tag<dt>
Each description starts with <dd>
Example:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
2. HTML WITH INTERNAL AND EXTERNAL CSSAIM:
The aim is to use internal and external CSS along with HTML pages.
DESCRIPTION:
CSS has been added to HTML to give web developers
To get more control over their design and content layout.
To create a standard set of commands to control the styles of all the subsequent
pages.
Web site designed in the CSS are faster to change and update.
Communication among multiple developers easier with CSS.
INSERTING A STYLE SHEET:
External Style Sheet
Internal Style Sheet
Inline Style
External Style Sheet:
Ideal for cases when the style is applied to many pages.
Look of an entire web page/site can be changed by changing one file.
Each page must link to the style sheet using the <link> tag
The <link> tag goes inside the head section.
Example:
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
Internal Style Sheet
Should be used when a single document has a unique style
Defined in the head section with the <style> tag.
Example:
<head>
<style type=”text/css”>
body{background-color:red}
p{margin-left:20px}
</style>
</head>
Inline Style:
Should be used when a unique style is to be applied to a single occurrence of an
element.
Use style attribute can contain any css property.
Example:
<p style =”color:red; margin-left:20px”>
this is a paragraph<./p>
3.DATE COMPARISION USING JAVA SCRIPT AIM:
To design a HTML page using java script to find difference between two dates.
DESCRIPTION:
JavaScript is the most popular scripting language on the internet, and
works in all major browsers, such as Internet Explorer, Firefox, Chrome, Opera,
and Safari.
JavaScript was designed to add interactivity to HTML pages.
JavaScript is a scripting language.
A scripting language is a lightweight programming language.
JavaScript is usually embedded directly into HTML pages.
JavaScript is an interpreted language (means that scripts execute without
preliminary compilation).
Everyone can use JavaScript without purchasing a license.
JavaScript gives HTML designers a programming tool - HTML authors
are normally not programmers, but JavaScript is a scripting language with a
very simple syntax! Almost anyone can put small "snippets" of code into
their HTML pages
JavaScript can put dynamic text into an HTML page - A JavaScript
statement like this: document.write("<h1>" + name + "</h1>") can write a
variable text into an HTML page
3(b) FORM VALIDATION USING JAVA SCRIPT
AIM:
To design a webpage to validate a form using text field, radio buttons, check
boxes.
DESCRIPTION:
JavaScript can be used to validate data in HTML forms before sending off the
content to a server.
Form data that typically are checked by a JavaScript could be:
User left required fields empty.
User entered a valid e-mail address.
User entered a valid date.
User entered text in a numeric field.
Different methods are invoked to validate the fields in the java script respectively.
PROCEDURE:
1. Design a page for signup form with rich user interface.
2. Write the java script function to validate all mandatory fields on your web page.
3. Validation should be done after the submit operation.
4. Use appropriate tags to display the contents.
5. Make sure the page is working efficiently
4(a) ONLINE TICKET RESERVATION SYSTEM USING
JSP
AIM:
To create an online ticket reservation system using JSP.
DESCRIPTION:
JSP may be viewed as a high-level abstraction of Java servlets. JSP pages are
loaded in the server and operated from a structured special installed Java server packet
called a Java EE Web Application, often packaged as a .war or .ear file archive.
When a JSP-enabled server receives the first request for a JSP, the JSP container
translates that JSP into a Java servlet that handles the current request and future requests
to the JSP. If there are any errors compiling the new servlet, these errors result in
translation-time errors. The JSP container places the Java statements that implement the
JSP’s response in method _jspService at translation time. If the new servlet compiles
properly, the JSP container invokes method _jspService to process the request. The JSP
may respond directly to the request or may invoke other Web application components to
assist in processing the request. Any errors that occur during request processing are
known as requesttime errors.
STANDARD ACTIONS:
The actions provide JSP implementors with access to several of the most common
tasks performed in a JSP, such as including content from other resources, forwarding
requests to other resources and interacting with JavaBeans. JSP containers process
actions at request time. Actions are delimited by <jsp:action> and </jsp:action>, where
action is the standard action name. In cases where nothing appears between the starting
and ending tags, the XML empty
element syntax <jsp:action /> can be used.
<jsp:include> Action:
JavaServer Pages support two include mechanisms—the <jsp:include> action and
the include directive. Action <jsp:include> enables dynamic content to be included in a
JavaServer Page. If the included resource changes between requests, the next request to
the JSP containing the <jsp:include> action includes the new content of the resource. On
the other hand, the include directive copies the content into the JSP once, at JSP
translation time. If the included resource changes, the new content will not be reflected in
the JSP that used the include directive unless that JSP is recompiled.
<jsp:forward> Action:
Action <jsp:forward> enables a JSP to forward request processing to a different
resource. Request processing by the original JSP terminates as soon as the JSP forwards
the request. Action <jsp:forward> has only a page attribute that specifies the relative
URI of the resource (in the same Web application) to which the request should be
forwarded.
<jsp:plugin> Action:
Action <jsp:plugin> adds an applet or JavaBean to a Web page in the form of a
browser- specific object or embed XHTML element. This action also enables the client
to download and install the Java Plug-in if it is not already installed.
<jsp:useBean> Action:
Action <jsp:useBean> enables a JSP to manipulate a Java object. This action
creates a Java object or locates an existing object for use in the JSP. If attributes class and
beanName are not specified, the JSP container attempts to locate an existing object of
the type specified in attribute type. Like JSP implicit objects, objects specified with
action <jsp:useBean> have page, request, session or application scope that indicates
where they can be used in a Web application. Objects with page scope are accessible
only to the page in which they are defined. Multiple JSP pages potentially can access
objects with other scopes. For example, all JSPs that process a single request can access
an object with request scope.
5 SERVLET PROGRAM
AIM:
To write a servlet program using HTTP Servlet.
DESCRIPTION:
A Servlet is a Java class which conforms to the Java Servlet API, a protocol by
which a Java class may respond to http requests. Thus, a software developer may use a
servlet to add dynamic content to a Web server using the Java platform. The generated
content is commonly HTML, but may be other data such as XML. Servlets are the Java
counterpart to non-Java dynamic Web content technologies such as CGI and ASP.NET.
Servlets can maintain state in session variables across many server transactions by using
HTTP cookies, or URL rewriting.
The servlet API, contained in the Java package hierarchy javax.servlet, defines the
expected interactions of a Web container and a servlet.
Servlet will get the Request/Response objects from the web server and it sends a
Modified Response object to server.
When a Sevlet Engine receives an HTTP reguest: 1. Engine creates a new instance (object) of class HttpServletRequest. The object
supports an interface to read incoming HTTP headers (e.g. cookies) and
parameters (e.g. data the user entered and submitted)
2. Engine also creates a new instance (object) of class HttpServletResponce. The
object supports an interface to specify the HTTP response line and headers.
3. Engine creates a new instance (object) of a specified sub-class of abstract class
HttpServlet. The object supports a number of special methods (e.q. "doGet").
4. Engine sends "doGet" message to the servlet object with "HttpServletRequest"
and "HttpServletResponse" objects as parameters.
5. The servlet object runs the "doGet" method which normally accesses
"HttpServletRequest" and "HttpServletResponse" objects.
Generally "httpServletResponse" object supports the following interface for procrssing
parameters:
getParameter(key) - takes a parameter name as an argument. This method
returns a String if the parameter with the specified name exists, otherwise null is
returned.
getParameterValues(key) - takes a parameter name as an argument. Generally, a
parameter may have multiple values. In that case, the method "getParamete"
returns just first value. The method "getParameterValues" returns an array of
Strings if the parameter with the specified name exists, otherwise null is returned.
getParameterNames() - returns an iterator over the names of all parameters.
Thus, we might use this method get all names of parameters first, and then obtain
values of parameters by means of "getParameter/getParameterValues".
PROCEDURE:
The General steps to follow in order to run a servlet are:
Compile the servlet program using an appropriate compiler version.
Copy the resulting .class file to the appropriate directory for your Java-servlet
capable web server. (for apache we need to store the .class file in
webapps/webinf/classes )
Now we need to link the servlet class file with the server by using web.xml
Start / Restart the apache server
Navigate to the URL corresponding to your
servlet.(http://localhost:8080/filename)
6 ONLINE BANK APPLICATION WITH DATABASE
ACCESS
AIM:
To develop an online bank application with database access.
DESCRIPTION:
JSP LIFE CYCLE
<jsp:useBean> Action:
Action <jsp:useBean> enables a JSP to manipulate a Java object. This action
creates a Java object or locates an existing object for use in the JSP. If attributes class and
beanName are not specified, the JSP container attempts to locate an existing object of
the type specified in attribute type. Like JSP implicit objects, objects specified with
action <jsp:useBean> have page, request, session or application scope that indicates
where they can be used in a Web application. Objects with page scope are accessible
only to the page in which they are defined. Multiple JSP pages potentially can access
objects with other scopes. For example, all JSPs that process a single request can access
an object with request scope.
<jsp:setProperty> tag
The <jsp:setProperty> tag sets the value of one or more properties in a JavaBean. In JSP
1.0, you can use <jsp:setProperty> with JavaBeans, but not with enterprise beans. You
can get around this limitation, however, by writing a JSP application in which a JSP file
sets property values in a JavaBean and the JavaBean in turns calls an enterprise bean.
We must use a <jsp:useBean> tag to declare a JavaBean before you use
<jsp:setProperty>.
Using <jsp:setProperty>, you can set property values in three ways:
By passing all of the values in the request object to matching properties in the
Bean
By passing a specific value in the request object to a property in the Bean
By explicitly setting a Bean property to a specified value or the result of an
expression
Class.forName():
when we call forName() method on Class class what happen
is1)initially the class is loaded into the memory2)then it calls the
static method forName()3)the static forName() method contains a
static block.That static block regiser the loaded driver class with
the DriverManager class
DriverManager.getConnection(connection_url):
Once the JDBC driver class is loaded, you are ready to connect to a SQL Server
by using the DriverManager.getConnection(connection_url) method
7 SIMPLE XML DOCUMENT
AIM:
The aim is to create an XML document for education domain and query the XML
using XQuery.
DESCRIPTION:
XML:
XML stands for eXtensible Markup Language. XML is designed to transport and
store data.
XML and HTML were designed with different goals:
XML was designed to transport and store data, with focus on what data is.
HTML was designed to display data, with focus on how data looks.
XML Tags:
XML language has no predefined tags.
XML documents must have a root element
XML elements must have a closing tag
XML tags are case sensitive
XML elements must be properly nested
XML attribute values must be quoted
XML document has to be written with user defined tags<tag name> and ended
with </tag name>. It is just pure information wrapped in tags. Someone must
write a piece of software to send, receive or display it. XML allows the user to
define their own structure for the document.
Example:
<subject> Operation Research
<credit>4</credit>
</subject>
‘subject’ and ‘credit’ are two user defined XML tags.
XQuery:
XQuery is to XML what SQL is to database tables. XQuery was designed to
query XML data.
XQuery Data Types:
String Data Type:
<customer>John Smith</customer>
Decimal Data Type:
<prize>999.50</prize>
<prize>14</prize>
AnyURI Data Type:
<pic src="http://www.w3schools.com/images/smiley.gif" />
How to Select Nodes From xml document With FLWOR
FLWOR is an acronym for "For, Let, Where, Order by, Return".
The for clause selects all book elements under the bookstore
element into a variable called $x.
The where clause selects only book elements with a price element
with a value greater than 30.
The order by clause defines the sort-order. Will be sort by the title
element.
The return clause specifies what should be returned. Here it
returns the title elements.
8 SIMPLE XML DOCUMENT WITH DTDAIM:
The aim is to write DTD for a domain (Education) specific XML document.
DESCRIPTION:
XML DTD:
A Document Type Definition (DTD) defines the legal building blocks of an XML
document. It defines the document structure with a list of legal elements and attributes.
A DTD can be declared inline inside an XML document, or as an external
reference.
INTERNAL DTD DECLARATION
If the DTD is declared inside the XML file, it should be wrapped in a
DOCTYPE definition with the following syntax:
<!DOCTYPE root-element [element-declarations]>
EXTERNAL DTD DECLARATION
If the DTD is declared in an external file, it should be wrapped in a
DOCTYPE definition with the following syntax:
<!DOCTYPE root-element SYSTEM "filename">
THE BUILDING BLOCKS OF XML DOCUMENTS
Seen from a DTD point of view, all XML documents (and HTML
documents) are made up by the following building blocks:
Elements
<electives>Mobile COmputing</electives>
‘electives’ is the element
Attributes
<img src="computer.gif" />
‘img’ is the element and name of the attribute is ‘src’ and its value is
‘computer.gif’.
Entities
Some characters have a special meaning in XML, like the less than sign (<)
that defines the start of an XML tag. Use & lt the entity reference.
PCDATA
PCDATA means parsed character data. PCDATA is text that WILL be
parsed by a parser. The text will be examined by the parser for entities
and markup.
CDATA
CDATA means character data.
CDATA is text that will NOT be parsed by a parser. Tags inside the text
will NOT be treated as markup and entities will not be expanded.
DTD – ATTRIBUTES:In a DTD, attributes are declared with an ATTLIST declaration.
<!ATTLIST payment type CDATA "check">
The default-value can be one of the following:
Value Explanation
value The default value of the attribute
#REQUIRED The attribute is required
#IMPLIED The attribute is not required
#FIXED value The attribute value is fixed
Example:
<!ATTLIST college name PCDATA #FIXED "IIT">
9 PARSING AN XML DOCUMENT USING DOM
AIM:
The aim is to write a DOM parser to parse the XML elements.
DESCRIPTION:
The XML DOM (XML Document Object Model) defines a standard way for
accessing and manipulating XML documents.
The DOM views XML documents as a tree-structure. All elements can be
accessed through the DOM tree. Their content (text and attributes) can be modified or
deleted, and new elements can be created. The elements, their text, and their attributes are
all known as nodes.
In the examples below we use the following DOM reference to get the text from
the <department> element:
xmlDoc.getElementsByTagName("department")[0].childNodes[0].nodeValue
xmlDoc - the XML document created by the parser.
getElementsByTagName("department")[0] - the first <department> element
childNodes[0] - the first child of the <department> element (the text node)
nodeValue - the value of the node (the text itself)
In the XML DOM, node relationships are defined as properties to the nodes:
parentNode
childNodes
firstChild
lastChild
nextSibling
previousSibling
XML DOM Change/Replace Node Values
Using setAttribute() the value of a node can be changed
The removeChild() method removes a specified node.
removeAttribute() method removes a specified attribute.
The replaceChild() method replaces a specified node. The nodeValue property replaces
text in a text node.
XML Parser
The XML DOM contains methods (functions) to traverse XML trees, access, insert, and
delete nodes.
However, before an XML document can be accessed and manipulated, it must be loaded
into an XML DOM object.
An XML parser reads XML, and converts it into an XML DOM object that can be
accessed with JavaScript.