DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

(1)

DEPARTMENT OF COMPUTER SCIENCE

AND ENGINEERING

PRACTICAL RECORD

CS2358

INTERNET PROGRAMMING LAB

NAME : ______________________

REGISTER NO : ______________________

SEMESTER : ______________________

(2)

1. CREATING A WEBPAGE USING IMAGE MAP

Aim

To Create a web page with the following using HTML

i) To embed an image map in a web page

ii) To fix the hot spots

iii) Show all the related information when the hot spots are clicked.

Algorithm

Step1 :Open a notepad.

Step 2:Write the code for imagemap.html.

Step 3: Enter a program that includes tags for <MAP> and other tags.

Step 4: Insert Hyperlink using <A href>.

Step5: Save the file with .html extension.

Step6: Run the program in a web browser

Step: Display Results.

HOME.HTML

<html>

<head>

<title>Home - States of India!!!</title> </head>

<h1><u><center>Republic of India</center></u></h1> <p>

India is the Seventh Lagest country in the world by geographical area, the second most populous country with over 1.2 billion people, and the populus democracy in the world. India is a federal constitutional republic with a parliamentry democracy consisting of 28 states and 7 union Terriories.

</p> <center>

(3)

</center>

<h2> Features</h2> <ul>

<li><b>Population</b> - 1,028,783,343(2001 census). <li><b>Capital</b> - New Delhi

<li><b>Largest City</b> - Mumbai <li><b>Currency</b> - Indian Rupee <li><b>Time Format</b> - IST (UTC + 5:30) <li><b>NAtion Sport</b> - Hockey

<li><b>Current PM</b> - Manmohan Singh <li><b>Current President</b> - Prathiba Patil </li>

</ul> <h2>

<b>To view details of states please click on the specified area in the map !!!</b>

</h2> </body> </html>

(4)

ANDHRAPRADESH.HTML

<html>

<head><title>Andhra Pradesh - India</title></head> <body bgcolor="tan">

<h1><center>Andhra Pradesh</center></h1>

<h3>A.P., is a state situated on the southeastern coast of India. It is India's fourth largest state by area and fifth largest by population.</h3> <h3>

<ul>

<li>Districts<i> - 23</i>

<li>Capital City<i> - Hyderabad</i> <li>Largest City<i> - Hyderabad</i> <li>Governor<i> - E. S. L. Narasimhan</i> <li>Chief Minister<i> - N. Kiran Kumar Reddy</i> <li>Population<i> - 78,323,330</i>

<li>Tourist spots<i> - Tirumala Tirupati, Charminar, Golconda Fort, Chandragiri, Chowmahalla Place, Falaknuma Palace etc.,</i> </ul>

</html>

(5)

<html> <head><title>Karnataka - India</title></head> <body bgcolor="wheat"> <h1><center>Karnataka</center></h1> <h3> <ul> <li>Districts<i> - 30</i>

<li>Capital City<i> - Bangalore</i> <li>Largest City<i> - Bangalore</i> <li>Governor<i>- Hansraj Bhardwaj</i>

<li>Chief Minister<i> - D. V. Sadananda Gowda</i> <li>Population<i> - 61,130,704</i>

<li>Tourist spots<i> - Gol Gumbaz, Mysore Palace, Keshava Temple etc.,</i> </ul> </h3> <a href="Home.html">back</a> </body> </html> KERALA.HTML <html> <head><title>Kerala - India</title></head> <body bgcolor="indianred">

(6)

<h1><center>Kerala</center></h1> <h3>

<ul>

<li>Capital City<i> - Thiruvanandapuram</i> <li>Largest City<i> - Thiruvanandapuram</i> <li>Governor<i> - Hansraj Bhardwaj</i> <li>Chief Minister<i> -Oommen Chandy </i> <li>Population<i> - 33,387,677</i>

<li>Tourist spots<i> - Edakkal Caves, Palayur, Kovalam Beach,Munnar, Kochi, Alapuzha etc.,</i> </ul> </h3> <a href="Home.html">Back</a> </body> </html> TAMILNADU.HTML <html>

<head><title>Tanil Nadu - India</title></head> <body bgcolor="palegreen">

<h1><center>Tamil Nadu</center></h1>

<h3>is one of the 28 states of India. Its capital and largest city is Chennai. Tamil Nadu lies in the southernmost part of the Indian Peninsula and is bordered by the States of puducherry, Kerala, Karnataka, Andha Pradesh.

(7)

</h3> <h3> <ul>

<li>Capital City<i> - Chennai</i> <li>Largest City<i> - Chennai</i> <li>Governor<i> - Konijeti Rosaiah</i> <li>Chief Minister<i> - Jayalalithaa</i> <li>Population<i> - 72,138,958</i>

<li>Tourist spots<i> - Mamallapuran, Ooty, Kodaikanal, Marina, Mudurai Meenakshi Amman Temple, Thanjavur etc.,</i> </ul>

(8)

(9)

(10)

(11)

(12)

(13)

2. CREATION OF HTML PAGE USING CASCADING STYLE SHEET

Aim:

To create a HTML page using types of Cascading Style Sheet.

ALGORITHM

Internal CSS:

STEP 1: Create a HTML program with <style> tag.

STEP 2: Inside the <style> tag, specify the format required for that web page.

STEP3 : Run the program with a web browser.

External CSS:

STEP 4: Open a notepad, type the needed CSS in it and save it with .css extension.

STEP5: Refer this .css file in the HTML using the tag <link>.

STEP 6: Run the program with a web browser.

CSSFILE.HTML

<title>FLOWERS</title>

background-color: lightgrey; text-align: justify;

margin: 2em 7em; }

</style> </head>

(14)

<body id="body"> <h1>FLOWER</h1> <p>

<span style="font: 200 x-large fantasy">Flower</span> sometimes known as a bloom or blossom,

is the reproductive structure found in flowering plants. The flower is God's finest workmanship in the world. It is his finest gift to the mankind.

We have seen the flowers of many kinds and to many colors. In India we see the flowers like

</p>

<table style="background-position: center;text-align: center;padding: 3px;"> <tr> <td align="left"> <div class="div"> <ul> <li><a href="">Lily</a></li> <li><a href="">Lotus</a></li> <li><a href="">Rose</a></li> <li><a href="">Jasmine</a></li> </ul> </div> </td> </tr>

(15)

</table> </body> </html> CSS.CSS h1,h2{ text-decoration: underline; font-style: italic; text-align: center; } #body{ background-color: tan; border: red dotted; text-align: center; }

.div{

border: peru solid ; } *{ letter-spacing: 1px; } a:link{ color: black;

(16)

} a:visited{ color: yellow; } a:hover{ color: green; } a:active{ color: blue; } ul li{ font-size: small; } OUTPUT SCREEN SHOT

(17)

(18)

3. WEB FORM VALIDATION USING DHTML

AIM

To write a java script program that performs form validation.

ALGORITHM:

STEP 1: Start the program,

STEP 2: Create a Form using form elements,

STEP 3: Write a script program for validate the form using javascript,

STEP 4: Save the file with extension html.

STEP 5: Execute the page by opening html file from any browser.

STEP 6: Stop the program.

STUDENTVALIDATION.HTML <html> <head> <title>CGPA CALCULATION</title> <script type="text/Javascript"> function mark() { var name=document.getElementById('name'); var regno=document.getElementById('regno'); var dept=document.getElementById('dept'); var sem1=document.getElementById('sem1'); var sem2=document.getElementById('sem2'); var sem3=document.getElementById('sem3'); var sem4=document.getElementById('sem4'); var sem5=document.getElementById('sem5'); var sem6=document.getElementById('sem6'); var sem7=document.getElementById('sem7');

(19)

var sem8=document.getElementById('sem8'); var cgpa=document.getElementById('cgpa'); var dest=document.getElementById('dest');

if(name.value == 0 ){alert("pls enter the name");return false;}

if(regno.value == 0 ){alert("pls enter the register number");return false;} if(dept.value == 0 ){alert("pls enter the department");return false;} if(sem1.value == 0 ){alert("pls enter semester 1 gpa");return false;}

if(sem1.value > 10 ){alert("pls enter semester 1 gpa between 1-10");return false;} if(sem2.value == 0 ){alert("pls enter semester 2 gpa");return false;}

if(sem8.value > 10 ){alert("pls enter semester 8 gpa between 1-10");return false;} cgpa.value=parseInt(sem1.value)+parseInt(sem2.value)+

parseInt(sem3.value)+parseInt(sem4.value)+parseInt(sem5.value)+ parseInt(sem6.value)+parseInt(sem7.value)+parseInt(sem8.value);

(20)

var result=cgpa.value/8

if(result >= 7.5){dest.value="First Class";} if(result < 7.5){dest.value="Second Class";} if(result < 5){dest.value="Third Class";} }

</script> </head>

<h2><center><u>STUDENT CGPA VALIDATION</u></center></h2> <br/>

<tr><td>Student Name</td>

<td><input type="text" id="name" /></td></tr> <tr><td>Register No:</td>

<td><input type="text" id="regno"/></td></tr> <tr><td>Department</td>

<td><input type="text" id="dept"/></td></tr> <tr><td>Semester 1</td>

<td><input type="text" id="sem1"/></td></tr> <tr><td>Semester 2</td>

(21)

<td><input type="text" id="cgpa"/></td></tr> <tr><td>Destinction</td>

</center> </form> </body> </html>

(22)

SAMPLE SCREEN SHOT

(23)

4.CREATING A COLOUR PALETTE USING JAVA

AIM

:

To Write a Program in JAVA to create applets incorporating the following features.

1. Create a color palette with matrix of buttons

2. Set background and foreground control text area by selecting a color from color

palatte.

3. To set background images.

ALGORITHM:

STEP 1: Start the program,

STEP 2: Write a program for applet using java,

STEP 3: Save the applet program with extension .java,

STEP 4: Compile that program by javac command.

STEP 5: Run the applet by entering appletviewer command.

STEP 6: Stop the program.

AppletClass.java

import java.awt.*; import java.awt.event.*; import java.applet.*;

public class AppletClass extends Applet implements ItemListener { int curcolor = 6;

int flag = 1;

String text = "Click any of the Button"; Button buttons[] = new Button[6];

String colors[] = {"Red", "Blue", "Green", "Yellow", "Magenta", "pink"}; Image img1;

CheckboxGroup cbg = new CheckboxGroup();

Checkbox box1 = new Checkbox("Background Color", cbg, true); Checkbox box2 = new Checkbox("Text Color", cbg, false);

(24)

Checkbox box3 = new Checkbox("Loading Image ", cbg, false); public void init() {

for (int i = 0; i < 6; i++) {

buttons[i] = new Button(" "); add(buttons[i]); } buttons[0].setBackground(Color.red); buttons[1].setBackground(Color.blue); buttons[2].setBackground(Color.green); buttons[3].setBackground(Color.yellow); buttons[4].setBackground(Color.magenta); buttons[5].setBackground(Color.pink); add(box1); add(box2); add(box3); box1.addItemListener(this); box2.addItemListener(this); box3.addItemListener(this); }

public void itemStateChanged(ItemEvent ev) { if (box1.getState() == true) {

flag = 1;

} else if (box2.getState() == true) { text = "Default color is black"; flag = 2;

(25)

} else if (box3.getState() == true) {

img1 = getImage(getDocumentBase(), "sample.gif"); flag = 3;

}

repaint(); }

public void paint(Graphics g) { if (flag == 2) {

g.drawString(text, 30, 100); switch (curcolor) {

case 0: g.setColor(Color.red); break; case 1: g.setColor(Color.blue); break;

case 2: g.setColor(Color.green); break; case 3: g.setColor(Color.yellow); break; case 4: g.setColor(Color.magenta); break; case 5: g.setColor(Color.pink); break;

case 6: g.setColor(Color.black); break; }

g.drawString(text, 30, 100); } else if (flag == 1) {

g.drawString(text, 30, 100); switch (curcolor) {

case 0: setBackground(Color.red); break; case 1: setBackground(Color.blue); break; case 2: setBackground(Color.green); break;

(26)

case 3: setBackground(Color.yellow); break; case 4: setBackground(Color.magenta); break; case 5: setBackground(Color.pink); break;

case 6: setBackground(Color.white); break; }

} else if (flag == 3) {

g.drawImage(img1, 200, 300, this); }

}

public boolean action(Event e, Object o) { for (int i = 0; i < 6; i++) {

if (e.target == buttons[i]) { curcolor = i;

text = "You have Chosen" + colors[i]; repaint(); return true; } } return false; } } APPLET.HTML

(27)

OUTPUT :

SCREEN SHOT:1

(28)

(29)

5.INVOKING SERVLETS FROM HTML FORM

AIM:

To write a program to invoke Servlet from HTML form.

ALGORITHM

STEP1: Create a HTML page including some form elements.

STEP2: Inside the <form> tag, for the action attribute specify the full path name of the

File.

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

STEP

4: Set classpath where servlet-api.jar file resides.

STEP5: Compile the servlet program using javac programname.java

STEP6: Place the class file …\Tomcat 5.5\webapps\Examples\WEB-INF\classes\folder.

STEP7: Define the doPost function to process the data obtained from the HTML file.

STEP8: Modify the web.xml file using your servletClassName.

STEP9: Invoke the class file using http://localhost:8080/servetClassName from your

browser

Postparam.java

import java.io.*; import java.util.*; import javax.servlet.*;

public class postparam extends GenericServlet {

public void service(ServletRequest request,ServletResponse response)throws ServletException,IOException

{

PrintWriter pw=response.getWriter();

Enumeration e=request.getParameterNames(); while(e.hasMoreElements())

(30)

{ String pname=(String)e.nextElement(); pw.print(pname+"="); String pvalue=request.getParameter(pname); pw.println(pvalue); } pw.close(); } } Postparam.html <html> <body> <center>

<tr>

<td><B>Employee</B></td>

<tr>

(31)

</table>

</html>

XML CODE:

//Include the code in Web.xml document//

<servlet> <servlet-name>Postparam</servlet-name> <servlet-class>Postparam</servlet-class> </servlet> <servlet-mapping> <servlet-name>Postparam</servlet-name> <url-pattern>/Postparam</url-pattern> </servlet-mapping>

(32)

OUTPUT

(33)

(34)

6.ONLINE EXAMINATION USING JSP AND DATABASE

AIM:

To write an online Examination using JSP with three tier architecture

ALGORITHM:

STEP

1: Create a user interface form for getting Seat number and Name

STEP2:

Create jsp file which calculates the total marks on the server

STEP3:

Place the jsp file …\Tomcat 5.5\webapps\Examples\WEB-INF\jsp\ folder.

STEP4:

Create a data base to store the existing user details. If a new login has to be

created, then display the corresponding page.

STEP5: Create a table in MS ACCESS or ORACLE that contains three fields .

STEP6: Create a DSN to map the Microsoft Access Driver using ODBC in

Administrative Tools.

STEP7: Import java.sql.* in the java program to execute the SQL queries.

STEP8: Load the database driver by using Class.forName().

STEP9: Create a Connection and Statement Object.

STEP10: Establish a Database Connection with DSN using

DriverManager.getConnection( ).

STEP11: Execute the query using executeQuery() and that gets stored in a Resultset.

STEP12: Until there are records in table specified get the fields in each record one by

one and display onto the screen.

STEP13: Close the Statement and Connection Object.

STEP 14: DIsplay the results

Home.html

(35)

</head>

<h1>OnLine Examination</h1> </center>

<tr>

<td><h3>Seat Number:</h3></td>

<tr>

<td><b>Total Marks:10(Each question carries equal marks) </b></td> <td></td><td></td><td></td><td><b>Time: 15 Min.</b></td> </tr>

</table> <br/>

<b>1. Apache is an open source web server</b><br/> <input type="radio" name="group1" value="True">True <input type="radio" name="group1" value="False">False

(36)

<br/>

<b>2. In Modern PC there is no cache memory.</b><br/> <input type="radio" name="group2" value="True">True <input type="radio" name="group2" value="False">False <br/>

<b>3. Tim-Berner Lee is the originator of Java.</b><br/> <input type="radio" name="group3" value="True">True <input type="radio" name="group3" value="False">False <br/>

<b>4.JPG is not a video file extension.</b><br/>

<input type="radio" name="group4" value="True">True <input type="radio" name="group4" value="False">False <br/>

<b>5. HTTP is a statefull protocol</b><br/>

<input type="radio" name="group5" value="True">True <input type="radio" name="group5" value="False">False <br/>

</form> </body> </html>

(37)

exam.jsp

<%@ page language="java" contentType="text/html"%> <%@ page import="java.sql.*"%> <%@ page import="java.util.*"%> <%@ page import="java.io.*"%> <% int a1=0,a2=0,a3=0,a4=0,a5=0; Connection conn=null; ResultSet rs=null; Statement stmt=null; Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); String url="jdbc:odbc:S1"; conn=DriverManager.getConnection(url,"",""); String myquery;

out.write("Connected with Database...."); String seatno=request.getParameter("seatno"); String name=request.getParameter("name"); String ans1=request.getParameter("group1"); if(request.getParameter("group1")!=null){ if(ans1.equals("True")) a1=1; else a1=0; }

(38)

String ans2=request.getParameter("group2"); if(request.getParameter("group2")!=null){ if(ans2.equals("True")) a2=0; else a2=1; } String ans3=request.getParameter("group3"); if(request.getParameter("group3")!=null){ if(ans3.equals("True")) a3=0; else a3=1; } String ans4=request.getParameter("group4"); if(request.getParameter("group4")!=null){ if(ans4.equals("True")) a4=1; else a4=0; } String ans5=request.getParameter("group5"); if(request.getParameter("group5")!=null){ if(ans5.equals("True")) a5=0;

(39)

else a5=1; } int tot=a1+a2+a3+a4+a5; if(seatno!=""){ stmt=conn.createStatement();

myquery="INSERT INTO STUDENTTABLE VALUES('"+seatno+"','"+name+"',"+tot+")"; stmt.executeUpdate(myquery);

stmt.close(); }

stmt=conn.createStatement();

myquery="select * from StudentTable"; rs=stmt.executeQuery(myquery); %> <html> <head> <title>Online Examination</title> </head> <body bgcolor="pink"> <br/><br/> <center> <h1>Student Database</h1> <br/>

(40)

<td><b>Mark</b></td> </tr> <% while(rs.next()) { out.println("<tr>"); out.println("<td>"+rs.getString(1)+"</td>"); out.println("<td>"+rs.getString(2)+"</td>"); out.println("<td>"+rs.getString(3)+"</td>"); out.println("</tr>"); } rs.close(); stmt.close(); conn.close(); %> </table> <br/><br/> <h1>Thanks!....</h1> </center> </body> </html>

(41)

(42)

(43)

7. PROGRAMS USING XML – SCHEMA – XSLT/XSL

Aim:

Programs using XML-Schema-XSLT/XSL

Algorithm:

Step 1: Start the Program

Step 2: Create a root process for food

Step 3: Create a style for XSLT with focus on each item

Step 4: Output the items

Step 5: Stop

STRUCTURE.XML

<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet type="text/xsl" href="stock.xsl"?> <breakfast_menu> <food> <name>apple</name> <price>$4.56</price> <description>good energy</description> <calories>650</calories> </food> <food> <name>strawberry</name> <price>$56.7</price>

<description>a good ice cream</description> <calories>450</calories>

</food> <food>

(44)

<name>chapathy</name> <price>$5.89</price> <description>morning meal</description> <calories>780</calories> </food> <food> <name>bread</name> <price>$6.78</price>

<description>with jam and butter</description> <calories>670</calories>

</food>

</breakfast_menu>

STOCK.XSL

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/">

<html>

<h2><center>FOOD STRUCTURE</center></h2> <table border="1" align="center">

<tr bgcolor="silver"> <th>Name</th> <th>Price</th>

(45)

<th>Description</th> <th>Calories</th> </tr> <xsl:for-each select="breakfast_menu/food"> <tr bgcolor="tan"> <td><xsl:value-of select="name"/></td> <td><xsl:value-of select="price"/></td> <td><xsl:value-of select="description"/></td> <td><xsl:value-of select="calories"/></td> </tr> </xsl:for-each> </table></body> </html> </xsl:template> </xsl:stylesheet>

(46)

OUTPUT : SCREEN SHOT

(47)

8. PARSING XML DOCUMENT USING DOMPARSER

AIM:

Write a program using DOM to display the items of XML document

ALGORITHM:

STEP1: Start the program,

STEP2: Write a program in html and save it as filename.html

STEP3: Write a xml program and save it with extension filename.xml

STEP4: Get a list of simple elements from the DOM. At the end iterate through the list

and print the name to verify we parsed it right.

STEP5:

Load the html program in web browser

STEP6: Display the results

DOM.xml <?xml version="1.0"?> <simple> <name>web</name> <name>tech</name> </simple> DOM DEMO.html <html> <head> <title>DOM DEMO</title> <script lang="javascript">

var XMLDocument =new ActiveXObject("Microsoft.XMLDOM"); XMLDocument.async=false;

(48)

document.write("xml doc is loaded"); var nodelist; nodelist=XMLDocument.getElementsByTagName("name"); alert(nodelist.item(0).firstChild.nodeValue); </script> </head> <body/> </html>

(49)

OUTPUT :

(50)

9. PARSING XML DOCUMENT USING SAX PARSERS

AIM:

Write a program to display the elements of a XML document using SAX

ALGORITHM:

STEP 1: Start the program,

STEP 2: Write a program in java and save it as filename.java

STEP 3: Write a xml program and save it with extension filename.xml

STEP 4: Compile and Run the java program,

STEP 5: Enter the xml file name into the command prompt window.

STEP 6: Stop the program.

parsingSaxDemo.java

import java.io.*;

import javax.xml.parsers.*; import org.xml.sax.*;

import org.xml.sax.helpers.*; public class parsingSaxDemo {

public static void main(String []ar) throws IOException{ 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{

SAXParserFactory parserFact=SAXParserFactory.newInstance(); SAXParser parser=parserFact.newSAXParser();

(51)

DefaultHandler handler=new DefaultHandler(){

public void startElement(String wi,String localname,String element,Attributes attr) throws SAXException {System.out.println("\t"+element); } }; parser.parse(file_name,handler); }catch(Exception e){e.printStackTrace();} } else

System.out.println("\n file is not present"); } } DOM.XML <?xml version="1.0"?> <simple> <name>web</name> <name>tech</name> </simple> OUTPUT:

(52)