WEB TECH Lab Manual

7/27/2019 WEB TECH Lab Manual

1/64

www.vidyarthiplus.com


Ex. No. : 01 Creation of HTML pages with

frames, links, tables and other tags

Date :

AIM:

To create a simple webpage using HTML that includes all tags.

ALGORITHM:

1. Write a HTML program in the notepad with the tags such as

A. FRAMES

With frames, you can display more than one HTML document in the

same browser window. Each HTML document is called a frame, and each

frame is independent of the others.

The Frameset Tag

The tag defines how to divide the window into frames.

The Frame Tag

The tag defines what HTML document to put into each

frame.

Example:

Tags and their Description:

Defines a set of frames

Defines a sub window (a frame)
http://www.vidyarthiplus.com/http://www.vidyarthiplus.com/http://www.vidyarthiplus.com/http://www.vidyarthiplus.com/http://www.vidyarthiplus.com/http://www.vidyarthiplus.com/


2/64



B. LINKS

A hyperlink is a reference (an address) to a resource on the web.

Example:

Visit W3Schools!

The href Attribute

The href attribute defines the link "address".

The target Attribute

The target attribute defines where the linked document will be

opened.

Tag and its Description:

Defines an anchor

C. TABLES

Tables are defined with the tag. A table is divided into

rows (with the tag), and each row is divided into data cells

(with the tag). The letters td stands for "table data," which is the

content of a data cell.

Example:

Row 1, cell 1

Row 1, cell 2

Tags and their Description:

Defines a table

Defines a table header

Defines a table row

Defines a table cell

2. Use appropriate tags to apply the background colors and desired styles

as Required and save the file with .html extension.


3/64



3. Run the program in the Web Browser.

PROGRAM:

Home.html

Home

Frame1.html

frame1

THIRUVALLUVAR COLLEGE OF ENGINEERING AND

TECHNOLOGY

Frame2.html

frame2

h1

{font-size:25pt;color:pink;


4/64



}

click the link

Introduction

Departments

ADDRESS

Feedback

Gallery

YOU ARE IN HOME PAGE

Intro.html

intro

Welcome to Thiruvalluvar College of Engineering and Technology -

Affiliated to Anna University



5/64



Thiruvalluvar College of Engineering and Technology resolves to mould

a human task force useful to the society through transparent methods that

lead to continuous improvement of the resources and state-of-the-art

methodologies conforming to recognized standards.

Ad.html

ADDRESS

Name:Thiruvalluvar College of Engineering and Technology

Location:Vandavasi

Contact No:04183-221444

Website: www.google.co.in

Dept.html

Departments

Dept code

Dept name


6/64



01

CSE

02

ECE

03

EEE

04

IT

05

MECH

06

AERO

Feed.html

feed


7/64



To give your feedback mail to [email protected]

Gall.html

gall

College Front View


8/64



OUTPUT:


9/64




10/64



RESULT:

Thus the HTML pages are created using frames, links, tables and other tagsand have been successfully executed.


11/64



Ex. No. : 2 APPLYING STYLE TO AN HTML PAGE USING CSS

Date:

Aim:

To create an html page, and to apply style formatting using external

Cascading Style Sheet.

Algorithm:

Step 1: Start the program.

Step 2: Create an html page.

Step 3: Create an external CSS (Cascading Style Sheet).

Step 4: Link the external style sheet page with the main html page.

Step 5: Load the main page.

Step 6: The style formatting will be applied to the main html page.

Step 7: Stop the program.


12/64



PROGRAM:

Style.html

.class1 A:link {text-decoration: none}

.class1 A:visited {text-decoration: none}

.class1 A:active {text-decoration: none}

.class1 A:hover {text-decoration: underline; color: red;}

.class2 A:link {text-decoration: underline overline}

.class2 A:visited {text-decoration: underline overline}

.class2 A:active {text-decoration: underline overline}

.class2 A:hover {text-decoration: underline; color: green;}

My first styled page

HOME

Department

Contact us

My first Internal styled page

Thiruvalluvar College of Engineering and Technology resolves to

mould a human task force useful to the society through transparent methods


13/64



that lead to continuous improvement of the resources and state-of-the-art

methodologies conforming to recognized standards.

M.E(CSE)

31-06-2011

Mystyle.html:

My first styled page

About us

Department

Contact us

My first External styled page

THIRUVALLUVAR COLLEGE OF ENGINEERING AND

TECHNOLOGY

ARUNACHAL CITY

VANDAVASI

An ISO 9001:2008 institution

NBA Accredited

December 28th

Dept. of I.T.


14/64



/* CSS Document */

BODY

{

PADDING-LEFT: 11em;

COLOR: purple;

FONT-FAMILY: Georgia, "Times New Roman",

Times, serif;

BACKGROUND-COLOR: #d8da3d

}

UL.navbar

{

PADDING-RIGHT: 0px;

PADDING-LEFT: 0px;

LEFT: 1em;

PADDING-BOTTOM: 0px;

MARGIN: 0px;

WIDTH: 9em;

PADDING-TOP: 0px;

LIST-STYLE-TYPE: none;

POSITION: absolute;

TOP: 2em

}

H1

{

FONT-FAMILY: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif

}

UL.navbar LI

{

BORDER-RIGHT: 1em solid;

PADDING-RIGHT: 0px;

PADDING-LEFT: 0px;

BACKGROUND: white;

PADDING-BOTTOM: 0.3em;

MARGIN: 0.5em 0px;

PADDING-TOP: 0.3em

}


15/64



OUTPUT:

RESULT:

Thus an html page is created and style formatting is applied using

external Cascading Style Sheet.


16/64



Ex. No. : 3(A) Client Side Programming

Date : Java script for Displaying and Comparing Date

AIM:

To write a Java script program for displaying and comparing two dates.

ALGORITHM:

Java script program for displaying date

1. Create a variable for DATE object as shown below,

var currentTime = new Date()

2. Obtain the current date from it using getDate() as shown below,

Var d=currentTime.getDate()

3 Display the value of d.

Java script program for comparing two dates

1. Get two dates to be compared from the user in string format.

2. Convert the obtained string into DATE objects as shown below,

var todate = new Date(todatestring);

var fromdate = new Date(fromdatestring);

3. Compare these two dates using


17/64



PROGRAM:

function Compare() {

if (document.frmTest.startDate.value > document.frmTest.endDate.value){

alert ("Start Date is greater");

}

if (document.frmTest.startDate.value < document.frmTest.endDate.value){

alert ("End Date is greater");}

if (document.frmTest.startDate.value ==

document.frmTest.endDate.value){

alert ("Dates are the same");

}

}

Start Date:

End Date:

Compare


18/64



OUTPUT:

RESULT:

Thus the program for displaying and comparing two dates has been

completed successfully and output is verified.


19/64



Ex. No. : 3.b Client Side Programming

Date : Form Validation

AIM:

To write a Java script program for Form Validation including text

field, radio buttons, check boxes, list box and other controls.

ALGORITHM:

Client Side Programming - Form validation

1. Create a form by including all the elements of java script.

Ex:

etc.

2. Create a button in such a way that when the button is clicked the form

has to be validated (i.e. it has to check whether all fields in the form are

filled and the data entered are valid).


20/64



PROGRAM:

Form Validation Example:

Feedback Form


21/64



alert ( "Thank u" )

}

-->

Please enter the following(To test form validation, skip entering one of the

fields and click 'Submit' button):

Name:

E-mail:

Your Gender:

Male

Female

Your Age:

Please Select an Option:

0-18 years 18-30 years 30-45

years 45-60 years

60+ years

Feedback:


22/64




23/64



OUTPUT:

RESULT:

Thus the Java script program for Form Validation including text field,

radio buttons, check boxes, list box and other controls has been

successfully written and output is verified.


24/64



Ex. No. : 04 Online Applications using jsp

Date:

AIM:

To develop a Online Applications for displaying students mark list

using java server pages and MS-Access database.

ALGORITHM:

Step 1: Start the program.Step 2: Create a MS-Access database table named student for storing

students marks.

Step 3: Create an html form for entering the register number of the student.

Step 4: Open control panel and make the database connectivity settings.

Step 5: Create a JSP coding for processing the students marks from the

database.

Step 6: Deploy the JSP and the html page in the Netbeans 6.8 IDE to create

the application package.Step 7: Run the application in the IDE.

Step 8: The students mark list for the corresponding register number will

be displayed.

Step 9:Stop the program.


25/64



PROGRAM:

mark.html

LOGIN FORM

REG NUMBER:

mark.jsp

Display All Users


26/64



MARK LIST

CNS

W T

NPM

DWM

E S

OAD


27/64



}

rs.close();

s.close();

con.close();

}

catch(SQLException e){}

catch(Exception e){

}

%>


28/64



OUTPUT:

RESULT:

Thus a 3-tier application for displaying students mark list using java serverpages and MS-Access database has been developed.


29/64



Ex. No. : 05 Servlet program using HTTP Servlet

Date :

AIM:

To write a servlet program using HTTP Servlet.

ALGORITHM:

1. Create a HTML page including some form elements.

2. Inside the tag, for the action attribute specify the full path name

of the .jsp file.

3. Create a .java file that imports javax.http.servlet.*;

4. Create a class that extends HttpServlet.

5. This will request some information by filling out a form containing a

link to a servlet when the Submit button is clicked.

6. The server locates the requested servlet

7. Define the doPost function to process the data obtained from the HTML

file.

8. The servlet then gathers the information needed to satisfy the user's

request and constructs a Web page containing the information.

9. That Web page is then displayed on the user's browser


30/64



Program:

online exam

1.Who invented mainframe system?

ibm

microsoft

infosys
cisco

2.What is the capital of Sri Lanka?

madrid

colombo

delhi

moscow

3.What is the national game of India?

hockey
cricket

football

volleyball

4.What is the NATO name of SUKHOI jets?

flankers

foxboat

fishboat

foxboat
5.What was the first name of graphical browser?

netscape

ie

mozilla

opera


31/64



//Online examination

import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;import java.net.*;

public class source_servlet extends HttpServlet

{

public void doGet(HttpServletRequest request,HttpServletResponse

response)throws ServletException,IOException

{response.setContentType("text/html");

PrintWriter out=response.getWriter();

BufferedReader br=request.getReader();

int score=0;

String str;

try

{

str=request.getParameter("s1");

if(str.equals("IBM"))

score++;


if(str.equals("COLOMBO"))

score++;str=request.getParameter("s3");

if(str.equals("HOCKEY"))

score++;


if(str.equals("FLANKERS"))

score++;str=request.getParameter("s5");


32/64



if(str.equals("MOZILLA"))

score++;

out.println("result Your

score");

out.println(Integer.toString(score)+"");

out.flush();

out.close();

}

catch(Exception e)

{}

}

}


33/64



OUTPUT:

RESULT:

Thus servlet program using http servlet has been completedsuccessfully and thus output is verified.


34/64



Ex. No. : 06 Online application with data access

Date:

AIM:

To develop a Online application with data access for displaying students

mark list using java servlet and MS-Access database.

ALGORITHM:

Step 1: Start the program.Step 2: Create a MS-Access database table named student for storing

students marks.

Step 3: Create an html form for entering the register number of the student.

Step 4: Open control panel and make the database connectivity settings.

Step 5: Create a servlet for processing the students marks from the

database.

Step 6:Deploy the servlet and the html page in the Netbeans 6.8 IDE to

create the application package.Step 7: Run the application in the IDE.

Step 8:The students mark list for the corresponding register number will

be displayed.

Step 9:Stop the program.


35/64



PROGRAM:

mark.html

LOGIN FORM

REG NUMBER:



36/64



Student.java

import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

import java.sql.*;

public class Student extends HttpServlet

{

int m1,m2,m3,m4,m5,m6;

public void doGet(HttpServletRequest r,HttpServletResponse rs)throws

IOException,ServletException

{

try

{

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

Connection con=DriverManager.getConnection("jdbc:odbc:student");

Statement st=con.createStatement();

ResultSet res;

String query="select *from student";

res=st.executeQuery(query);

rs.setContentType("text/html");

PrintWriter out=rs.getWriter();

out.println("");

int reg1=Integer.parseInt(r.getParameter("login"));

int valid=0;

while(res.next())

{

if(res.getInt(1)==reg1)

{

valid=1;

m1=res.getInt(2);

m2=res.getInt(3);

m3=res.getInt(4);

m4=res.getInt(5);

m5=res.getInt(6);

m6=res.getInt(7);

break;


37/64



}

}

if(valid==0)

{

out.println("not valid RegNo");

}

else

{

out.println("


38/64



catch(SQLException e)

{

System.out.println(e);

}

catch(ClassNotFoundException e)

{

System.out.println(e);

}

}

}


39/64



OUTPUT:


40/64



RESULT:

Thus a 3-tier application for displaying students mark list using java

servlet and MS-Access database has been successfully developed.


41/64



Ex. No. : 07 Creation of XML document

Date :

AIM:

To write a XML program for creating a cd catalog.

ALGORITHM:

1. Create a .xml file with the following header,

2. Include all the description of the CDs inside the tag.

3. For each CD create a separate tag within the parent tag

which includes

item title

artist

country

company

price and

year.

4. Call the CSS file in which the format has been specified.

5. Run the XML program.


42/64



PROGRAM:

cd_catalog_css.xml

Empire Burlesque

Bob Dylan

USA

Columbia

10.90

1985

Hide your heart

Bonnie Tyler

UK

CBS Records

9.90

1988

Greatest Hits

Dolly Parton

USA

RCA

9.90

1982

Still got the blues

Gary Moore

UK

Virgin records

10.20


43/64



1990

Eros

Eros Ramazzotti

EU

BMG

9.90

1997

One night only

Bee Gees

UK

Polydor

10.90

1998

Sylvias Mother

Dr.Hook

UK

CBS

8.10

1973

Maggie May

Rod Stewart

UK

Pickwick

8.50

1990


44/64



Romanza

Andrea Bocelli

EU

Polydor

10.80

1996

When a man loves a woman

Percy Sledge

USA

Atlantic

8.70

1987

Black angel

Savage Rose

EU

Mega

10.90

1995

1999 Grammy Nominees

Many

USA

Grammy

10.20

1999

For the good times

Kenny Rogers

UK


45/64



Mucik Master

8.70

1995

Big Willie style

Will Smith

USA

Columbia

9.90

1997

Tupelo Honey

Van Morrison

UK

Polydor

8.20

1971

Soulsville

Jorn Hoel

Norway

WEA

7.90

1996

The very best of

Cat Stevens

UK

Island

8.90

1990


46/64



Stop

Sam Brown

UK

A and M

8.90

1988

Bridge of Spies

T`Pau

UK

Siren

7.90

1987

Private Dancer

Tina Turner

UK

Capitol

8.90

1983

Midt om natten

Kim Larsen

EU

Medley

7.80

1983

Pavarotti Gala Concert

Luciano Pavarotti

UK


47/64



DECCA

9.90

1991

The dock of the bay

Otis Redding

USA

Atlantic

7.90

1987

Picture book

Simply Red

EU

Elektra

7.20

1985

Red

The Communards

UK

London

7.80

1987

Unchain my heart

Joe Cocker

USA

EMI

8.20

1987


48/64



cd_catalog.css

CATALOG

{

background-color: #ffffff;

width: 100%;

}

CD

{

display: block;

margin-bottom: 30pt;

margin-left: 0;

}

TITLE

{

color: #FF0000;

font-size: 20pt;

}

ARTIST

{

color: #0000FF;

font-size: 20pt;

}

COUNTRY,PRICE,YEAR,COMPANY

{

display: block;

color: #000000;

margin-left: 20pt;

}


49/64



OUTPUT:

RESULT:

Thus the XML program for creating cd catalog has been successfully

completed and output is verified.


50/64



Ex. No. : 08 XML document and DTD

Date :

AIM:

To write a XML program and DTD for a document.

ALGORITHM:

1. Create the XML document using tag as the initial tab.

2. Create another CSS document which displays the xml document

details into HTML format on the browser.

3. Give appropriate style in the CSS document.

4. Create the .xsd file for the xml file that is created.

5. In the .xsd file define the parent tag, the child tags, its type and all the

attributes inside the schema tag.

6. Invoke xml file from your browser.


51/64



PROGRAM:

]>

Tove

Jani

Reminder

Don't forget to buy grocery things


52/64



OUTPUT:

RESULT:

Thus the XML program and DTD for creating a Ship order has been

Completed successfully and output is verified.


53/64



Ex. No. : 9 Parsing an XML document using

Date : DOM and SAX Parsers

AIM:

To write a program that parses an XML document using DOM and SAX

parsers.

ALGORITHM:

1. Create a .xml file that has to be parsed.

2. Using DOM parser

Get a document builder using document builder factory and parse the xml

file to create a DOM object

Get a list of employee elements from the DOM

For each employee element get the id, name, age and type.

Create an employee value object and add it to the list.

At the end iterate through the list and print the employees to verify we

parsed it right.

3. Using SAX Parser

Create a Sax parser and parse the xml

In the event handler create the employee object

Print out the data


54/64



PROGRAM:

DOM:

Student.xml

10

parth

pune

1234567890

Second

Maths

100

20

AnuRadha

Bangalore

90901233

Fifth

English

90

30

Anand

Mumbai90901256

Fifth

English

90


55/64



Parse.java

import java.io.*;

import javax.xml.parsers.*;

import org.w3c.dom.*;

import org.xml.sax.*;

public class Parse

{

public static void main(String[] arg)

{

try

{

System.out.println("enter the name of xml document");

BufferedReader input=new BufferedReader(new

InputStreamReader(System.in));

String file_name=input.readLine();

File fp=new File(file_name);

if(fp.exists())

{

try

{

DocumentBuilderFactory

Factory_obj=DocumentBuilderFactory.newInstance();

DocumentBuilder builder=Factory_obj.newDocumentBuilder();

InputSource ip_src=new InputSource(file_name);

Document doc=builder.parse(ip_src);

System.out.println(file_name+" is well-formed!");

}

catch(Exception e)

{

System.out.println(file_name+" isn't well-formed!");

System.exit(1);

}

}

else

{

System.out.print("file not found!");

}


56/64



}

catch(IOException ex)

{

ex.printStackTrace();

}

}}

SAX:

EmployeeDetail.xml:

E-001

revathy

[email protected]

E-002

vinod

[email protected]

E-001

deepak

[email protected]


57/64



SAXParserCheck.java:

import org.xml.sax.*;

import org.xml.sax.helpers.*;

import java.io.*;

public class SAXParserCheck

{

public static void main(String[]args)throws IOException

{

BufferedReader bf=new BufferedReader(new

InputStreamReader(System.in));

System.out.print("enter XML file name :");

String xmlfile=bf.readLine();

SAXParserCheck par=new SAXParserCheck(xmlfile);

}

public SAXParserCheck(String str)

{

try

{

File file=new File(str);

if(file.exists())

{

XMLReader reader=XMLReaderFactory.createXMLReader();

reader.parse(str);

System.out.println(str+" is well-formed!");

}

else

{

System.out.println("File not found:"+str);

}

}

catch(SAXException sax)


58/64



{

System.out.println(str+" isn't well-formed");

}

catch(IOException io)

{

System.out.println(io.getMessage());

}

}

}


59/64



OUTPUT:

DOM :

SAX:

RESULT:

Thus the program that parses an XML document using DOM and

SAX parsers has been completed successfully and the output is verified.


60/64



Ex. No : 10 Open Source Environment - PHP

Date :

AIM

To Sample web application development in the open source environment

ALGORITHM:

1. Install the wamp server.2. Start all the service in wamp server.3. Create the new project using PHP installation package.4. Create new folder in www directory.5. Create and connect Mysql.6. Execute the program in the Local host.


61/64



PROGRAM:

Index.html

PHP-OPEN SOURCE ENVIRONMENT

Firstname:

Lastname:

Age:

Insert.php


62/64



if (!mysql_query($sql,$con))

{

die('Error: ' . mysql_error());

}

echo "1 record added";

mysql_close($con)

?>


63/64



OUTPUT:

RESULT:


64/64


The Sample web application using PHP, MYSQL & wamp server as an

open source environment implemented successfully
http://www.vidyarthiplus.com/http://www.vidyarthiplus.com/http://www.vidyarthiplus.com/

WEB TECH Lab Manual

Documents