CS2358-INTERNET PROGRAMMING LAB 1.

HTML PAGES WITH FRAMES, LINKS, TABLES

AIM: The aim is to create a HTML with frames, links, tables and other tags. DESCRIPTION: FRAMES: <f !"#$ 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. ach of those rectangles are called frames. !an display more than one HTML document in the some browser window ach frame is independent of the other. The "frameset# tag defines how to divide the window into frame. LINKS: $ link is the %address& to a document"or a resource on the web. S%&'!(: "a href'&url&# Link That"(a# <!$ ))) $nchor element* It is used to define both hyperlinks and anchors. The href attribute* +efines the link %address& The %a& element defines a link to %url&

FRAMESET:

TABLES: The "table# tag is used to define a table +ivided into rows with "tr# ach row is divided into data cells with "td# +ata cell can be

 Text Images lists paragraphs forms hori,ontal -ules Tables E(!")*#: "table border'./. cellpadding'./0.# "tr# "td#1irst"(td# "td#-ow"(td# "(tr# "tr# "td#2econd"(td# "td#-ow"(td# "(tr# "(table# LISTS: HTML supports, 3rdered 4nordered +efinition lists. "ul# is used for unordered lists. The list are marked with bullets. E(!")*#: "ul# "li#!offee"(li# "li#Tea"(li#

+&, -# #- L./'/:

"li#Milk"(li# "(ul# ORDERED LISTS: "ol# is used for ordered lists. The list items are marked with numbers. E(!")*#: "ol type'.$.# "li#$pples"(li# "li#5ananas"(li# "li#Lemons"(li# "li#3ranges"(li# "(ol# DEFINITION LISTS: It is a list of items with a description of each item. "dl# "dt#!offee"(dt# "dd#5lack hot drink"(dd# "dt#Milk"(dt# "dd#6hite cold drink"(dd# "(dl# It starts with tag "dl# ach terms starts with tag"dt# ach description starts with "dd#

E(!")*#:

2. HTML WITH INTERNAL AND E0TERNAL CSS AIM: The aim is to use internal and external !22 along with HTML pages. DESCRIPTION: !22 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 subse7uent pages. 6eb site designed in the !22 are faster to change and update. !ommunication among multiple developers easier with !22.

INSERTING A ST1LE SHEET: xternal 2tyle 2heet

Internal 2tyle 2heet Inline 2tyle E('# &!* S'%*# S2##': 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. ach page must link to the style sheet using the "link# tag The "link# tag goes inside the head section. "head# "link rel'&stylesheet& type'&text(css& href'&mystyle.css&# "(head# I&'# &!* S'%*# S2##' 2hould be used when a single document has a uni7ue style +efined in the head section with the "style# tag. "head#

E(!")*#:

E(!")*#:

"style type'&text(css&# body8background)color*red9 p8margin)left*:0px9 "(style# "(head# I&*.&# S'%*#: 2hould be used when a uni7ue style is to be applied to a single occurrence of an element. 4se style attribute can contain any css property. "p style '&color*red; margin)left*:0px&# this is a paragraph".(p#

E(!")*#:

3.DATE COMPARISION +SING 3A4A SCRIPT

AIM: To design a HTML page using <ava script to find difference between two dates. DESCRIPTION: =ava2cript is the most popular scripting language on the internet, and works in all ma<or browsers, such as Internet xplorer, 1irefox, !hrome, 3pera, and 2afari. =ava2cript was designed to add interactivity to HTML pages. =ava2cript is a scripting language. $ scripting language is a lightweight programming language. =ava2cript is usually embedded directly into HTML pages. =ava2cript is an interpreted language >means that scripts execute without preliminary compilation?. veryone can use =ava2cript without purchasing a license. 3!5!S6 .)' 7.5#/ HTML -#/.7&# / ! ) ,7 !"".&7 ',,* - HTML authors are normally not programmers, but =ava2cript is a scripting language with a very simple syntax@ $lmost anyone can put small .snippets. of code into their HTML pages 3!5!S6 .)' 6!& )8' -%&!".6 '#(' .&', !& HTML )!7# - $ =ava2cript statement like this* document.write>."h/#. A name A ."(h/#.? can write a variable text into an HTML page

39:; AIM: boxes.

FORM 4ALIDATION +SING 3A4A SCRIPT

To design a webpage to validate a form using text field, radio buttons, check

DESCRIPTION: =ava2cript can be used to validate data in HTML forms before sending off the content to a server. 1orm data that typically are checked by a =ava2cript could be*

4ser left re7uired fields empty. 4ser entered a valid e)mail address. 4ser entered a valid date. 4ser entered text in a numeric field.

+ifferent methods are invoked to validate the fields in the <ava script respectively. PROCED+RE: /. +esign a page for signup form with rich user interface. :. 6rite the <ava script function to validate all mandatory fields on your web page. B. Calidation should be done after the submit operation. D. 4se appropriate tags to display the contents. E. Make sure the page is working efficiently

<9!;

ONLINE TICKET RESER4ATION S1STEM +SING 3SP

AIM: To create an online ticket reservation system using =2F. DESCRIPTION: =2F may be viewed as a high)level abstraction of =ava servlets. =2F pages are loaded in the server and operated from a structured special installed =ava server packet called a =ava 6eb $pplication, often packaged as a .war or .ear file archive.

6hen a =2F)enabled server receives the first re7uest for a =2F, the =2F container translates that =2F into a =ava servlet that handles the current re7uest and future re7uests to the =2F. If there are any errors compiling the new servlet, these errors result in translation-time errors. The =2F container places the =ava statements that implement the =2FGs response in method _jspService at translation time. If the new servlet compiles properly, the =2F container invokes method =>/)S# 5.6# to process the re7uest. The =2F may respond directly to the re7uest or may invoke other 6eb application components to assist in processing the re7uest. $ny errors that occur during re7uest processing are known as requesttime errors. STANDARD ACTIONS: The actions provide =2F implementors with access to several of the most common tasks performed in a =2F, such as including content from other resources, forwarding re7uests to other resources and interacting with =ava5eans. =2F containers process actions at re7uest time. $ctions are delimited by <>/):action$ and <?>/):action$, where action is the standard action name. In cases where nothing appears between the starting and ending tags, the HML empty element syntax <>/):action ?$ can be used.

<>/):.&6*8-#$ A6'.,&: =ava2erver Fages support two include mechanismsIthe <jsp:include> action and the include directive. $ction <>/):.&6*8-#$ enables dynamic content to be included in a =ava2erver Fage. If the included resource changes between re7uests, the next re7uest to the =2F containing the <>/):.&6*8-#$ action includes the new content of the resource. 3n the other hand, the .&6*8-# directive copies the content into the =2F once, at =2F translation time. If the included resource changes, the new content will not be reflected in the =2F that used the .&6*8-# directive unless that =2F is recompiled. <>/):f, @! -$ A6'.,&: $ction <jsp:forward> enables a =2F to forward re7uest processing to a different resource. -e7uest processing by the original =2F terminates as soon as the =2F forwards the re7uest. $ction <>/):f, @! -$ has only a )!7# attribute that specifies the relative 4-I of the resource >in the same 6eb application? to which the re7uest should be forwarded. <>/):)*87.&$ A6'.,&: $ction <>/):)*87.&$ adds an applet or =ava5ean to a 6eb page in the form of a browser) specific ,:>#6' or #":#- HHTML element. This action also enables the client to download and install the Java Plug-in if it is not already installed. <>/):8/#B#!&$ A6'.,&: $ction <>/):8/#B#!&$ enables a =2F to manipulate a =ava ob<ect. This action creates a =ava ob<ect or locates an existing ob<ect for use in the =2F. If attributes 6*!// and :#!&N!"# are not specified, the =2F container attempts to locate an existing ob<ect of the type specified in attribute '%)#. Like =2F implicit ob<ects, ob<ects specified with action <>/):8/#B#!&$ have )!7#, #A8#/', /#//.,& or !))*.6!'.,& scope that indicates where they can be used in a 6eb application. 3b<ects with )!7# scope are accessible only to the page in which they are defined. Multiple =2F pages potentially can access ob<ects with other scopes. 1or example, all =2Fs that process a single re7uest can access an ob<ect with #A8#/' scope.

SER4LET PROGRAM
To write a servlet program using HTTF 2ervlet.

AIM: DESCRIPTION: $ S# 5*#' is a =ava class which conforms to the 3!5! S# 5*#' API, a protocol by which a =ava class may respond to http re7uests. Thus, a software developer may use a servlet to add dynamic content to a 6eb server using the =ava platform. The generated content is commonly HTML, but may be other data such as HML. 2ervlets are the =ava counterpart to non)=ava dynamic 6eb content technologies such as !JI and $2F.K T. 2ervlets can maintain state in session variables across many server transactions by using HTTF cookies, or 4-L rewriting. The servlet $FI, contained in the =ava package hierarchy <avax.servlet, defines the expected interactions of a 6eb container and a servlet. 2ervlet will get the -e7uest(-esponse ob<ects from the web server and it sends a Modified -esponse ob<ect to server. 6hen a 2evlet ngine receives an HTTF reguest* /. ngine 6 #!'#/ a new instance >ob<ect? of class H'')S# 5*#'R#A8#/'. The ob<ect supports an interface to read incoming HTTF headers >e.g. cookies? and parameters >e.g. data the user entered and submitted? :. B. D. ngine also 6 #!'#/ a new instance >ob<ect? of class H'')S# 5*#'R#/),&6#. The ob<ect supports an interface to specify the HTTF response line and headers. ngine 6 #!'#/ a new instance >ob<ect? of a specified sub)class of abstract class H'')S# 5*#'. The ob<ect supports a number of special methods >e.7. .doJet.?. ngine /#&-/ B-,G#'B "#//!7# to the servlet ob<ect with .Http2ervlet-e7uest. and .Http2ervlet-esponse. ob<ects as parameters.

E. The servlet ob<ect 8&/ '2# B-,G#'B "#'2,- which normally accesses .Http2ervlet-e7uest. and .Http2ervlet-esponse. ob<ects.

Jenerally .http2ervlet-esponse. ob<ect supports the following interface for procrssing parameters*

7#'P! !"#'# 9C#%; ) takes a parameter name as an argument. This method returns a 2tring if the parameter with the specified name exists, otherwise null is returned.

7#'P! !"#'# 4!*8#/9C#%; ) takes a parameter name as an argument. Jenerally, a parameter may have multiple values. In that case, the method .getFaramete. returns <ust first value. The method .getFarameterCalues. returns an array of 2trings if the parameter with the specified name exists, otherwise null is returned.

7#'P! !"#'# N!"#/9; ) 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 .getFarameter(getFarameterCalues..

PROCED+RE: The Jeneral steps to follow in order to run a servlet are* !ompile the servlet program using an appropriate compiler version. !opy the resulting .class file to the appropriate directory for your =ava)servlet capable web server. >for apache we need to store the .class file in webapps(webinf(classes ? Kow we need to link the servlet class file with the server by using web.xml 2tart ( -estart the apache server Kavigate to the 4-L corresponding to your servlet. >http*((localhost*L0L0(filename?

ONLINE BANK APPLICATION WITH DATABASE ACCESS

AIM: To develop an online bank application with database access. DESCRIPTION: 3SP LIFE C1CLE

<>/):8/#B#!&$ A6'.,&: $ction <>/):8/#B#!&$ enables a =2F to manipulate a =ava ob<ect. This action creates a =ava ob<ect or locates an existing ob<ect for use in the =2F. If attributes 6*!// and :#!&N!"# are not specified, the =2F container attempts to locate an existing ob<ect of the type specified in attribute '%)#. Like =2F implicit ob<ects, ob<ects specified with action <>/):8/#B#!&$ have )!7#, #A8#/', /#//.,& or !))*.6!'.,& scope that indicates

where they can be used in a 6eb application. 3b<ects with )!7# scope are accessible only to the page in which they are defined. Multiple =2F pages potentially can access ob<ects with other scopes. 1or example, all =2Fs that process a single re7uest can access an ob<ect with #A8#/' scope. <>/):/#'P ,)# '%$ '!7 The "<sp*setFroperty# tag sets the value of one or more properties in a =ava5ean. In =2F /.0, you can use "<sp*setFroperty# with =ava5eans, but not with enterprise beans. Mou can get around this limitation, however, by writing a =2F application in which a =2F file sets property values in a =ava5ean and the =ava5ean in turns calls an enterprise bean. 6e must use a "<sp*use5ean# tag to declare a =ava5ean before you use "<sp*setFroperty#. 4sing "<sp*setFroperty#, you can set property values in three ways*

5y passing all of the values in the re7uest ob<ect to matching properties in the 5ean 5y passing a specific value in the re7uest ob<ect to a property in the 5ean 5y explicitly setting a 5ean property to a specified value or the result of an expression

C*!//.f, N!"#9;:

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 river!anager class
D .5# M!&!7# .7#'C,&&#6'.,&96,&&#6'.,&=8 *;:

3nce the =+5! driver class is loaded, you are ready to connect to a 2NL 2erver by using the +riverManager.get!onnection>connectionOurl? method

E AIM:

SIMPLE 0ML DOC+MENT

The aim is to create an HML document for education domain and 7uery the HML

using HNuery. DESCRIPTION: 0ML: HML stands for e0tensible Markup Language. HML is designed to transport and store data. HML and HTML were designed with different goals* HML 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.

0ML T!7/: HML language has no predefined tags. HML documents must have a root element HML elements must have a closing tag HML tags are case sensitive HML elements must be properly nested HML attribute values must be 7uoted HML document has to be written with user defined tags"tag name# and ended with "(tag name#. It is <ust pure information wrapped in tags. 2omeone must write a piece of software to send, receive or display it. HML allows the user to define their own structure for the document.

E(!")*#: "sub<ect# 3peration -esearch "credit#D"(credit# "(sub<ect#

Psub<ectG and PcreditG are two user defined HML tags.

0F8# %: HNuery is to HML what 2NL is to database tables. HNuery was designed to 7uery HML data. HNuery +ata Types* S' .&7 D!'! T%)#: "customer#=ohn 2mith"(customer# D#6."!* D!'! T%)#: "pri,e#QQQ.E0"(pri,e# "pri,e#/D"(pri,e# A&%+RI D!'! T%)#: "pic src'.http*((www.wBschools.com(images(smiley.gif. (# How to 2elect Kodes 1rom xml document 6ith 1L631L63- is an acronym for .1or, Let, 6here, 3rder by, -eturn.. The f, clause selects all book elements under the bookstore element into a variable called Rx. The @2# # clause selects only book elements with a price element with a value greater than B0. The , -# :% clause defines the sort)order. 6ill be sort by the title

element. The #'8 & clause specifies what should be returned. Here it

returns the title elements.

8 AIM:

SIMPLE 0ML DOC+MENT WITH DTD

The aim is to write +T+ for a domain > ducation? specific HML document.

DESCRIPTION: 0ML DTD: $ +ocument Type +efinition >+T+? defines the legal building blocks of an HML document. It defines the document structure with a list of legal elements and attributes. $ +T+ can be declared inline inside an HML document, or as an external reference. INTERNAL DTD DECLARATION If the +T+ is declared inside the HML file, it should be wrapped in a +3!TMF definition with the following syntax* "@+3!TMF root)element Selement)declarationsT# E0TERNAL DTD DECLARATION If the +T+ is declared in an external file, it should be wrapped in a +3!TMF definition with the following syntax* "@+3!TMF root)element 2M2T M .filename.# THE B+ILDING BLOCKS OF 0ML DOC+MENTS 2een from a +T+ point of view, all HML documents >and HTML documents? are made up by the following building blocks*

lements "electives#Mobile !3mputing"(electives# PelectivesG is the element

$ttributes "img src'.computer.gif. (# PimgG is the element and name of the attribute is PsrcG and its value is Pcomputer.gifG.

ntities 2ome characters have a special meaning in HML, like the less than sign >"? that defines the start of an HML tag. 4se U lt the entity reference.

F!+$T$ F!+$T$ means parsed character data. PCDATA ./ '#(' '2!' WILL :# )! /#- :% ! )! /# . T2# '#(' @.** :# #(!".&#- :% '2# )! /# f, #&'.'.#/ !&- "! C8).

!+$T$ !+$T$ means character data. CDATA ./ '#(' '2!' @.** NOT :# )! /#- :% ! )! /# . Tags inside the text will K3T be treated as markup and entities will not be expanded.

DTD G ATTRIB+TES:In a +T+, attributes are declared with an $TTLI2T declaration. "@$TTLI2T payment type !+$T$ .check.# The -#f!8*'-5!*8# can be one of the following* 4!*8# value V- N4I- + E()*!&!'.,& The default value of the attribute The attribute is re7uired

VIMFLI + V1IH + value

The attribute is not re7uired The attribute value is fixed

E(!")*#: "@$TTLI2T college name F!+$T$ V1IH + .IIT.# H AIM:

PARSING AN 0ML DOC+MENT +SING DOM

The aim is to write a +3M parser to parse the HML elements.

DESCRIPTION: The HML +3M >HML +ocument 3b<ect Model? defines a standard way for accessing and manipulating HML documents. The +3M views HML documents as a tree)structure. $ll elements can be accessed through the +3M 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 +3M reference to get the text from the "department# element* xml+oc.get lements5yTagKame>.department.?S0T.childKodesS0T.nodeCalue

("*D,6 ) the HML document created by the parser. 7#'E*#"#&'/B%T!7N!"#9B-#)! '"#&'B;IJK ) the first "department# element 62.*-N,-#/IJK ) the first child of the "department# element >the text node? &,-#4!*8# ) the value of the node >the text itself?

In the HML +3M, node relationships are defined as properties to the nodes*

parentKode

childKodes first!hild last!hild next2ibling previous2ibling

HML +3M !hange(-eplace Kode Calues 4sing set$ttribute>? the value of a node can be changed The remove!hild>? method removes a specified node. remove$ttribute>? method removes a specified attribute. The replace!hild>? method replaces a specified node. The nodeCalue property replaces text in a text node. 0ML P! /# The HML +3M contains methods >functions? to traverse HML trees, access, insert, and delete nodes. However, before an HML document can be accessed and manipulated, it must be loaded into an HML +3M ob<ect. $n HML parser reads HML, and converts it into an HML +3M ob<ect that can be accessed with =ava2cript.