Stuff4techies: April 2012

Displaying cricket player's profile using AJAX

DISPLAYING CRICKET PLAYER’S PROFILE USING AJAX

AIM:

To write a program using AJAX for displaying cricket player's profile.

ALGORITHM:

1. Create an XHTML document (AjaxDemo.html) with the following.

(a) Insert some images of cricket players.

(b) Call the function getContent() with respect to the onmouseover event. The function accepts an argument that is the URL of another page contains the information about the player.

2. Within this XHTML document, insert AJAX based JavaScript code with the following.

(a) Create the object for ActiveXObject (for older versions of browsers such as IE5 and IE6).

(b) Create the object for XMLHttpRequest (for modern browsers such as IE7+, Firefox, Chrome, Safari, and Opera).

(d) Receive the response with the use of responseText Property.

(e) AJAX Call the function diplayProfile() with respect to the event onreadystatechange.

PROGRAM:

AjaxDemo.html

<html>

<head>

.box{border:1px solid blue;padding:10px}

</style>

var req;

function getContent(url)

{

if(window.ActiveXObject)

{

req=new ActiveXObject("Microsoft.XMLHTTP");

}

else if(window.XMLHttpRequest)

{

req=new XMLHttpRequest();

}

req.onreadystatechange=diplayProfile;

req.open('POST',url,true);

req.send(null);

}

function diplayProfile()

{

if(req.readyState==4)

{

document.getElementById('contentArea').innerHTML=req.responseText;

}

function clearContent()

{

document.getElementById('contentArea').innerHTML='';

}

</script>

</head>

<h1>Mouse over the image for More Information</h1>

</body>

</html>

sachin.html

<html>

<body>

Full name: Sachin Ramesh Tendulkar

Born: April 24, 1973, Bombay (now Mumbai), Maharashtra

Major teams: India, Asia XI, Mumbai, Mumbai Indians, Yorkshire

Nickname: Tendlya, Little Master

Playing role: Top-order batsman

Batting style: Right-hand bat

Bowling style: Right-arm offbreak, Legbreak googly

</body>

</html>

dravid.html

<html>

<body>

Full name: Rahul Sharad Dravid

Born: January 11, 1973, Indore, Madhya Pradesh

Major teams: India, Scotland, Asia XI, ICC World XI, Karnataka, Kent,

Marylebone Cricket Club, Rajasthan Royals, Royal Challengers Bangalore

Nickname: The Wall

Playing role: Top-order batsman

Batting style: Right-hand bat

Bowling style: Right-arm offbreak

</body>

</html>

kohli.html

<html>

<body>

Full name: Virat Kohli

Born:November 5, 1988, Delhi

Major teams:India, Delhi, India Red, India Under-19s, Royal Challengers Bangalore

Playing role:Middle-order batsman

Batting style:Right-hand bat

Bowling style:Right-arm medium

</body>

</html>

raina.html

<html>

<body>

Full name: Suresh Kumar Raina

Born:November 27, 1986, Muradnagar, Ghaziabad, Uttar Pradesh

Major teams:India, Chennai Super Kings, India Blue, India Under-19s, Indian Board President's XI, Rajasthan Cricket Association President's XI, Uttar Pradesh, Uttar Pradesh Under-16s

Playing role:Middle-order batsman

Batting style:Left-hand bat

Bowling style: Right-arm offbreak

</body>

</html>

yuvi.html

<html>

<body>

Full name:Yuvraj Singh

Born:December 12, 1981, Chandigarh

Major teams:India, Asia XI, Kings XI Punjab, Pune Warriors, Punjab, Yorkshire

Playing role:Middle-order batsman

Batting style:Left-hand bat

Bowling style:Slow left-arm orthodox

</body>

</html>

veeru.html

<html>

<body>

Full name:Virender Sehwag

Born:October 20, 1978, Delhi

Major teams:India, Asia XI, Delhi, Delhi Daredevils, ICC World XI, India Blue, Leicestershire, Rajasthan Cricket Association President's XI

Playing role:Top-order batsman

Batting style:Right-hand bat

Bowling style:Right-arm offbreak

</body>

</html>

dhoni.html

<html>

Full name: Mahendra Singh Dhoni

Born:July 7, 1981, Ranchi, Bihar (now Jharkhand)

Major teams:India, Asia XI, Bihar, Chennai Super Kings, Jharkhand

Playing role:Wicketkeeper batsman

Batting style:Right-hand bat

Bowling style:Right-arm medium

</body>

</html>

Images

dravid.jpg

kohli.jpg

raina.jpg

sachin.jpg

veeru.jpg

yuvi.jpg

dhoni.jpg

OUTPUT SCREENSHOTS

Thanks to: http://sreebrothers.blogspot.in

Displaying book details using XML and XSLT

DISPLAYING BOOK DETAILS USING XML AND XSLT

Aim:

To write XML program to display book details with XSL

Algorithm:

1. Create an XSL page

2. Set styles for an XML file and save the file with extension .xsl

3. Create another file and include XML tags

4. Write code to link the XSL file

5. Save the file with extension .xml

6. Run the XML file

7. Verify the result

Simple.xml

<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml-stylesheet type="text/xsl" href="simple.xsl"?>

<books_menu>

<book>

<name>

Computer Architecture </name>

<price> 234.56

</price>

Computer Is an electronic device

</description>

<pages>456

</pages>

</book>

<book>

<name>

Computer Organisation </name>

<price> 234.56

</price>

Computer has input and output devices

</description>

<pages>456

</pages>

</book>

</books_menu>

simple.xsl:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:for-each select="books_menu/book">

<xsl:value-of select="name"/>

</div>

<xsl:value-of select="description"/>

<xsl:value-of select="pages"/>

(pages in book)

</div>

</xsl:for-each>

</body>

</html>

OUTPUT SCREENSHOTS

Displaying student details using XML and XSLT

DISPLAYING STUDENT DETAILS USING XML AND XSLT

ALGORITHM:

1. Create an XML document (stud.xml) that contains the markup tags such as <name>, <dept>, and <rno>.

2. Create an XSL document (stud.xsl) that defines the style to display an XML document.

3. Associate style sheet (XSL) with XML using the markup <?xml-stylesheet>

4. Load the XML document (stud.xml) in the browser.

stud.xml

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

<?xml-stylesheet type="text/xsl" href="stud.xsl"?>

<stud>

<name>Abhilash</name>

</stud>

<stud>

<name>Akhila</name>

</stud>

<stud>

<name>Anaswara</name>

</stud>

</studInfo>

stud.xsl

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

<xsl:transform version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<head>

<title>Student Details - Transformation</title>

</head>

<body>

<caption>Student Details</caption>

<tr>

<th>Name</th><th>Department</th><th>Register No</th>

</tr>

<xsl:for-each select="/studInfo/stud">

<tr>

</tr>

</xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:transform>

OUTPUT SCREENSHOTS

Displaying student marklist using Java Server Pages

DISPLAYING STUDENT MARK LIST USING JSP

AIM:

To create a three tier application for displaying student mark list using JSP and database.

ALGORITHM:

1. Design the HTML page (stud.html) with the following

a) Create a form to get the input (Register Number) from the user.

b) Set the URL of the server (marklist.jsp) as the value of the action attribute.

c) Use submit button to invoke the server and send the form data to the server.

2. Create the JSP file with the following

a) Read the parameter value (Register Number) from the form by using the method getParameter().

b) Server retrieves the details from the database table with respect to the form input.

c) Server displays the mark list to the client as the response.

marklist.jsp:

<%@ page contentType="text/html" language="java" import="java.sql.*"%>

<html>

<head>

<title>Three Tier Application</title>

body{color:blue;font-family:courier;text-align:center}

</style>

</head>

<body>

<h2>EXAMINATION RESULT</h2><hr/>

String str=request.getParameter("regno");

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

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

Statement stmt=con.createStatement();

ResultSet rs=stmt.executeQuery("SELECT*FROM markTab WHERE rno="+str);

while(rs.next())

{

Name:<%=rs.getObject(2)%>

<th>SUBJECT</th><th>Mark</th>

<tr><td>Network Programming and Management</td><td><%=rs.getObject(3)%></td></tr>

<tr><td>Object Oriented Analysis and Design</td><td><%=rs.getObject(4)%></td></tr>

<tr><td>Cryptography and Network Security</td><td><%=rs.getObject(5)%></td></tr>

<tr><td>Embedded Systems</td><td><%=rs.getObject(6)%></td></tr>

<tr><td>Web Technology</td><td><%=rs.getObject(7)%></td></tr>

<tr><td>Software Requirement and Engineering</td><td><%=rs.getObject(8)%></td></tr>

</table>

}

</body>

</html>

stud.HTML:

<html>

<head>

<title>Three Tier Application</title>

body{color:blue;font-family:courier;text-align:center}

</style>

</head>

<body>

<h2>EXAMINATION RESULT</h2><hr/>

Enter Your Reg.No:

</form>

</body>

<html>

DATABASE

OUTPUT SCREENSHOTS

Thursday, April 12, 2012

Displaying cricket player's profile using AJAX

Displaying book details using XML and XSLT

Displaying student details using XML and XSLT

Displaying student marklist using Java Server Pages

Blog Archive