Home , Frame (GUI), Frame (World Wide Web)

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)

www.vidyarthiplus.com

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 row

Defines a table header

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.

www.vidyarthiplus.com

3. Run the program in the Web Browser. PROGRAM:

Home.html

Home

Frame1.html

frame1

THIRUVALLUVAR COLLEGE OF ENGINEERING AND TECHNOLOGY

Frame2.html

frame2

click the link

Introduction
Departments
ADDRESS
Feedback
Gallery

Frame3.html

1st page

YOU ARE IN HOME PAGE

Intro.html

intro

Welcome to Thiruvalluvar College of Engineering and Technology - Affiliated to Anna University

www.vidyarthiplus.com

“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

www.vidyarthiplus.com

Dept code	Dept name
01	CSE
02	ECE
03	EEE
04	IT
05	MECH
06	AERO

Feed.html

feed

www.vidyarthiplus.com

To give your feedback mail to [email protected]

Gall.html

gall

College Front View

www.vidyarthiplus.com

OUTPUT:

www.vidyarthiplus.com www.vidyarthiplus.com

www.vidyarthiplus.com

RESULT:

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

www.vidyarthiplus.com

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.

www.vidyarthiplus.com

PROGRAM:

Style.html

My first styled page

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

www.vidyarthiplus.com

www.vidyarthiplus.com 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

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.

www.vidyarthiplus.com

/* 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 }

www.vidyarthiplus.com

OUTPUT:

RESULT:

Thus an html page is created and style formatting is applied using external Cascading Style Sheet.

www.vidyarthiplus.com

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 ‘<’ operator.

www.vidyarthiplus.com

PROGRAM:

www.vidyarthiplus.com

OUTPUT:

RESULT:

Thus the program for displaying and comparing two dates has been completed successfully and output is verified.

www.vidyarthiplus.com

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).

www.vidyarthiplus.com

PROGRAM:

Form Validation Example: Feedback Form

www.vidyarthiplus.com

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.

www.vidyarthiplus.com

Ex. No. : 04 Online Applications using jsp

Date:

AIM:

To develop a Online Applications for displaying student’s 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 student’s 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 student’s 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 student’s mark list for the corresponding register number will be displayed. Step 9:Stop the program.

www.vidyarthiplus.com

PROGRAM: mark.html

LOGIN FORM

mark.jsp <%@ page session="false" %> <%@page import="java.sql.*" %> <% try { Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); System.out.println("JDBC driver loaded"); } catch(ClassNotFoundException e) { System.out.println(e.toString()); } %> Display All Users

www.vidyarthiplus.com

MARK LIST

<% int reg=Integer.parseInt(request.getParameter("login")); String sql="select *from student"; try { Connection con=DriverManager.getConnection("jdbc:odbc:student"); Statement s=con.createStatement(); ResultSet rs=s.executeQuery(sql); while(rs.next()) { out.println(""); out.println(""); out.println(""); out.println(""); out.println(""); out.println(""); out.println(""); out.println("");

www.vidyarthiplus.com

} rs.close(); s.close(); con.close(); } catch(SQLException e){} catch(Exception e){ } %>

CNS	W T	NPM	DWM	E S	OAD
"+ rs.getString(2)+"	"+rs.getString(3)+"	" +rs.getString(4)+"	"+rs.getString(5)+"	"+rs.getString(6)+"	"+rs.getString(7)+"

www.vidyarthiplus.com

OUTPUT:

RESULT:

Thus a 3-tier application for displaying student’s mark list using java server pages and MS-Access database has been developed.

www.vidyarthiplus.com

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

www.vidyarthiplus.com

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

www.vidyarthiplus.com

//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++; str=request.getParameter("s2"); if(str.equals("COLOMBO")) score++; str=request.getParameter("s3"); if(str.equals("HOCKEY")) score++; str=request.getParameter("s4"); if(str.equals("FLANKERS")) score++; str=request.getParameter("s5");

www.vidyarthiplus.com

if(str.equals("MOZILLA")) score++; out.println("result Your score"); out.println(Integer.toString(score)+""); out.flush(); out.close(); } catch(Exception e) {} } }

www.vidyarthiplus.com

OUTPUT:

RESULT:

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

www.vidyarthiplus.com

Ex. No. : 06 Online application with data access

Date:

AIM:

To develop a Online application with data access for displaying student’s 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 student’s 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 student’s 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 student’s mark list for the corresponding register number will be displayed. Step 9:Stop the program.

www.vidyarthiplus.com

PROGRAM: mark.html

LOGIN FORM

www.vidyarthiplus.com

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;

www.vidyarthiplus.com

} } if(valid==0) { out.println("not valid RegNo"); } else { out.println("

"); out.println("

GOOGLE

"); out.println("

"); out.println("MARK1"); out.println("MARK2"); out.println("

"); out.println("

"); out.println("MARK3"); out.println("MARK4"); out.println("

"); out.println("

"); out.println("MARK5"); out.println("MARK6"); int tot1; double avg1; tot1=m1+m2+m3+m4+m5+m6; avg1=((tot1)/6.0); out.println("

"); out.println("

"); out.println("TOTAL"); out.println("AVERAGE"); out.println("

"); out.println(""); } }

www.vidyarthiplus.com

www.vidyarthiplus.com catch(SQLException e) { System.out.println(e); } catch(ClassNotFoundException e) { System.out.println(e); } } }

www.vidyarthiplus.com

OUTPUT:

www.vidyarthiplus.com

RESULT:

Thus a 3-tier application for displaying student’s mark list using java servlet and MS-Access database has been successfully developed.

www.vidyarthiplus.com

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.

www.vidyarthiplus.com

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

www.vidyarthiplus.com

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

www.vidyarthiplus.com

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

www.vidyarthiplus.com

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

www.vidyarthiplus.com

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

www.vidyarthiplus.com

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

www.vidyarthiplus.com

cd_catalog.css

www.vidyarthiplus.com

OUTPUT:

RESULT:

Thus the XML program for creating cd catalog has been successfully completed and output is verified.

www.vidyarthiplus.com

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.

www.vidyarthiplus.com

PROGRAM:

Tove

Jani

Reminder

Don't forget to buy grocery things

www.vidyarthiplus.com

OUTPUT:

RESULT:

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

Completed successfully and output is verified.

www.vidyarthiplus.com

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

www.vidyarthiplus.com

PROGRAM:

DOM:

Student.xml

10 parth

pune

1234567890 Second Maths 100 20 AnuRadha

Bangalore

90901233 Fifth English 90 30 Anand

Mumbai

90901256 Fifth English 90

www.vidyarthiplus.com

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!"); }

www.vidyarthiplus.com

} catch(IOException ex) { ex.printStackTrace(); } }}

SAX:

EmployeeDetail.xml:

E-001 revathy [email protected] E-002 vinod [email protected] E-001 deepak [email protected]

www.vidyarthiplus.com

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)

www.vidyarthiplus.com

{ System.out.println(str+" isn't well-formed"); } catch(IOException io) { System.out.println(io.getMessage()); } } }

www.vidyarthiplus.com

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.

www.vidyarthiplus.com

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.

www.vidyarthiplus.com

PROGRAM:

Index.html

Insert.php

$sql="INSERT INTO Persons (FirstName, LastName, Age) VALUES ('$_POST[firstname]','$_POST[lastname]','$_POST[age]')";

www.vidyarthiplus.com

www.vidyarthiplus.com if (!mysql_query($sql,$con)) { die('Error: ' . mysql_error()); } echo "

1 record added"; mysql_close($con) ?>
www.vidyarthiplus.com
www.vidyarthiplus.com
OUTPUT:
RESULT:
www.vidyarthiplus.com
www.vidyarthiplus.com
The Sample web application using PHP, MYSQL & wamp server as an open source environment implemented successfully
www.vidyarthiplus.com

THIRUVALLUVAR COLLEGE OF ENGINEERING AND TECHNOLOGY

click the link

YOU ARE IN HOME PAGE

My first Internal styled page

My first External styled page

LOGIN FORM

MARK LIST

1.Who invented mainframe system?

2.What is the capital of Sri Lanka?

3.What is the national game of India?

4.What is the NATO name of SUKHOI jets?

5.What was the first name of graphical browser?

LOGIN FORM

GOOGLE

PHP-OPEN SOURCE ENVIRONMENT