exercises of the tutorial on advanced web programming

Exercises of the Tutorial on Exercises of the Tutorial on Advanced Web Advanced Web ProgrammingProgramming

Authors: Miroslava Mitrovic ([email protected])Dragan Milicev ([email protected]) Nino Stojcic ([email protected])Veljko Milutinovic ([email protected])

Exercise 1:Exercise 1: Develop Your Own HTML Web FormDevelop Your Own HTML Web Form

Design a web form that contains the following controls:- Name (Text box)- Address (Text box)- Age (Text box)- Mr. / Mrs. / Miss (Radio button group)- Reset and Submit buttons

< ! Exercise1.html

<HTML>

<TITLE>Exercise1</TITLE><HEAD> <FONT SIZE="6">Exercise1:</FONT></HEAD>

<BODY><BR><HR>

<FORM NAME="Form1"> Name:&nbsp

<INPUT TYPE="text" NAME="Name" SIZE="25" MAXLENGTH=25> <BR> Address: <INPUT TYPE="text" NAME="Address" SIZE="25" MAXLENGTH=25>

<BR>

Age:

<INPUT TYPE="text" NAME="Age" SIZE="2" MAXLENGTH=2>

<BR><BR>

Mr. <INPUT TYPE="radio" NAME="Group1" CHECKED VALUE="Mr.”>

Mrs.<INPUT TYPE="radio" NAME="Group1" VALUE="Mrs.">

Miss<INPUT TYPE="radio" NAME="Group1" VALUE="Miss"><BR><BR><INPUT TYPE="submit" VALUE="Submit" > <INPUT TYPE="reset" VALUE="Reset">

</FORM><HR>

</BODY>

Exercise 2:Exercise 2:Validate Your Form’s DataValidate Your Form’s Data

Enhance the form from Exercise1 so that the user cannot submit the Form if the Name field is empty or the Age field contains a negative number (provide a message in these cases).Validation upon pressing the submit button

<! Exercise2.html

…………….<BODY>

<BR><BR>

<HR>

<SCRIPT LANGUAGE="JavaScript"><!—

function checkData (theForm){var ReturnVal=falsevar name=theForm.Name.valuevar address=theForm.Address.valuevar age=Number(theForm.Age.value)

if (name=="") alert("Name must not be empty!")

else if (address=="") alert("Address must not be empty!")

else if (isNaN(age)) alert("Age must be non negative number!")else if (age<0)

alert("Age must be non negative number!") else ReturnVal=true

if (ReturnVal) alert("Your order has been submitted")

return ReturnVal }

//--></SCRIPT >

<FORM NAME="Form1" ONSUBMIT="return checkData(this) ">

………………………….

Exercise 3:Exercise 3:Make Your Web Form LiveMake Your Web Form Live

Make your web form alive, by adding a simple applet to your web formthat will demonstrate the possibility of creating dynamic contents.Using a scrolling box

<! Exercise3.html

………………….

<BODY>

<BR>

<APPLET CODE="Ticker.class" WIDTH=200 HEIGHT=35>

<PARAM NAME="fontname" VALUE="Times New Roman">

<PARAM NAME="fontsize" VALUE=24>

<PARAM NAME="text" VALUE="Fill out this form!">

</APPLET>

<HR>

<SCRIPT LANGUAGE="JavaScript">

……………

Exercise 4:Exercise 4:Develop Your Own ServletDevelop Your Own Servlet

Develop a servlet that accepts the submitted page from Exercise 3, and returns a page with the following contents to the user: “Hello <Mr.|Mrs.|Miss> <Name>, glad to meet you. I’ll stay in contact with

you by e-mailing to the address: <Address>. “

<! Exercise4.html

…………

//-->

</SCRIPT> <FORM NAME="Form1" ONSUBMIT="return checkData(this)"

METHOD="POST" ACTION="../servlet/Exercise4Servlet" >

Name: <INPUT TYPE="text" NAME="Name" SIZE="25"

MAXLENGTH=25>

<BR><BR>……………..

// Exercise4Servlet. Java

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

public class Exercise4Servlet extends HttpServlet{ //overloading the doPost() method inherited from HttpServlet class public void doPost(HttpServletRequest req,HttpServletResponse res) throws ServletException, IOException{ //setting the content type of response to "text/html" res.setContentType("text/html"); //PrintWriter converts Java's Unicode characters to locale-specific encoding //For an English locale, it behaves same as a PrintStream

PrintWriter out = res.getWriter();

String name1=req.getParameter("Name");

String address= req.getParameter("Address"); String mrMrsMiss=req.getParameter("Group1");

out.print( "<HEAD><TITLE>Exercise4</TITLE>"+ "<FONT SIZE=\"6\">Exercise4:</FONT></HEAD>"+ "<BR><BR><HR>" + "<BR><FONT SIZE=\"5\">Servlet Response: <BR><BR><BR>"+ "</FONT>Hello "+mrMrsMiss+" “ + name1 + ", glad to meet you!<BR><BR>I'll contact you by e-mailing to

the + "address: “+address + "<BR><BR><BR><BR><HR></BODY>"); out.close(); }}

Exercise 5:Exercise 5:Make Your Own Make Your Own Application Access the DatabaseApplication Access the Database

Enhance the servlet from Exercise 4,so that it inserts a new record into the database table of the users with the submitted data, before returning the “Hello…” confirmation page.

// Exercise5Servlet.java

import java.io.*;import java.util.*;import javax.servlet.*;import javax.servlet.http.*;import java.sql.*;import sun.jdbc.odbc.*;

public class Exercise5Servlet extends HttpServlet{ public void doPost(HttpServletRequest req,HttpServletResponse res) throws ServletException, IOException { String status ="nix"; res.setContentType("text/html");

PrintWriter out = res.getWriter();String name1=req.getParameter("Name");String address= req.getParameter("Address");

String mrMrsMiss=req.getParameter("Group1");

String age=req.getParameter("Age"); Connection con=null;

try{ //load the JdbcOdbcDriver Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); String url = "jdbc:odbc:Exercise5Base"; //get a connection to the database con = DriverManager.getConnection(url,"Exercise5Base", "sql");

//create a statement object Statement stmt = con.createStatement();

//execute an sql query String sql = "Insert into Members (Name,Address,Age,Title) values"+

"('"+ name1 +"','"+ address +"','"+ age +"','"+ mrMrsMiss +"')" ; stmt.execute(sql); }

catch(ClassNotFoundException e){ System.out.println("Couldn't load database driver: " + e.getMessage()); } catch(SQLException e){ System.out.println("SQLException caught: " + e.getMessage()); }

//close the database connection finally {

try{ if (con!=null) con.close();}catch (SQLException ignored){}

}

out.print("<HEAD><TITLE>Exercise5</TITLE>"+"<FONT SIZE=\"6\">Exercise5:</FONT></HEAD>"+ "<BR><BR><HR>" + "<BR><FONT SIZE=\"5\">Servlet Response: <BR><BR><BR>"+ "</FONT>Hello "+mrMrsMiss+" "+name1+

", glad to meet you!<BR><BR>I'll contact you by e-mailing to the” + address: "+ address + "<BR><BR><BR><BR><HR></BODY>") ; out.close(); }}

Exercise 6:Exercise 6:Develop Your First Simple Web Develop Your First Simple Web ApplicationApplication

Using the given infrastructure, develop an application :

Select a user from the database by his/her name in the list box, modify data for the selected user, using the page from Exercise 5,

Exercise 6:Exercise 6:Develop Your First Simple Web Develop Your First Simple Web ApplicationApplication

and on the “submit” command go to the confirmation “Hello..” page.

<HTML><HEAD>

<TITLE>Exercise6</TITLE><FONT SIZE="6" >Exercise6</FONT>

</HEAD>

<BODY BACKGROUND="/examples/images/Back.gif"><BR><BR><BR><jsp:plugin type="applet" code="Ticker.class" codebase="applets" width="200" height="35">

<jsp:params> <jsp:param name="fontname" value="Times New Roman"/> <jsp:param name="fontsize" value="24"/> <jsp:param name="text" value="Fill out this form!"/> </jsp:params> <jsp:fallback> <P>Unable to load applet</P> </jsp:fallback> </jsp:plugin>

<HR> <FORM NAME="Form1" ONSUBMIT="return checkData(this)"

METHOD="POST" ACTION="/examples/servlet/Exercise6Servlet"> <%@ page language='java' import ="Exercise6Bean" %>

<jsp:useBean id="Bean" class="Exercise6Bean" scope="page"/>

Name: <SELECT NAME="Name" SIZE="1" MAXLENGTH=25>

<%= Bean.getName()%> </SELECT>

<BR><BR>

Address: <INPUT TYPE="text" NAME="Address" SIZE="25" MAXLENGTH=25>

<BR><BR>Age:

<INPUT TYPE="text" NAME="Age" SIZE="2" MAXLENGTH=2>

<BR><BR>

Mr <INPUT TYPE="radio" NAME="Group1" CHECKED VALUE="Mr.">

Mrs<INPUT TYPE="radio" NAME="Group1" VALUE="Mrs."> Miss

……………………..

// Exercise6Bean.java

import java.beans.*;import java.io.*;import java.sql.*;

public class Exercise6Bean{ private String name="";

public String getName(){ Connection con=null; ResultSet rs=null;

try{ //load the JdbcOdbcDriver Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); String url = "jdbc:odbc:Exercise5Base"; //get a connection to the database con = DriverManager.getConnection(url,"Exercise5Base", "sql");

//create a statement object Statement stmt = con.createStatement(); //execute an sql query String sql = "Select Name from Members" ; rs=stmt.executeQuery(sql); while (rs.next()) name= name+"<OPTION>" + rs.getString("Name"); } // end try catch(ClassNotFoundException e){ System.out.println("Couldn't load database driver: " + e.getMessage()); }

catch(SQLException e){ System.out.println("SQLException caught: " + e.getMessage()); }



}

return name;

}//end of function

}// end of class

//Exercise6Servlet. Java

import java.io.*;import javax.servlet.*;import javax.servlet.http.*;import java.sql.*;public class Exercise6Servlet extends HttpServlet{ public void doPost(HttpServletRequest req,HttpServletResponse res) throws ServletException, IOException {

ServletOutputStream out = res.getOutputStream(); String mrMrsMiss=req.getParameter("Group1"); String name1=req.getParameter("Name");

String address= req.getParameter("Address");String age=req.getParameter("Age");Connection con=null;

try{ //load the JdbcOdbcDriver Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); String url = "jdbc:odbc:Exercise5Base";

//get a connection to the database con = DriverManager.getConnection(url,"Exercise5Base", "sql");

PreparedStatement stmt = con.prepareStatement( "UPDATE Members SET Address = ?, Age=?, Title=? WHERE Name = ?"); stmt.setString(1, address); stmt.setString(2, age);

stmt.setString(3, mrMrsMiss); stmt.setString(4,name1); stmt.executeUpdate();

} catch(ClassNotFoundException e){ System.out.println("Couldn't load database driver: " + e.getMessage()); } catch(SQLException e){ System.out.println("SQLException caught: " + e.getMessage()); }



}out.print(

"<HEAD><TITLE>Exercise6</TITLE>"+"<FONT SIZE=\"6\">Exercise6:</FONT></HEAD>“+

"<BODY BACKGROUND=\"/examples/images/Back.gif\">"+ "<BR><BR><IMG SRC=\"/examples/images/Aswoosh.gif\">" +

"<BR><BR><FONT SIZE=\"5\">Servlet Response <BR><BR><BR>"+"</FONT>Hello "+mrMrsMiss+" "+name1+

", glad to meet you!<BR><BR>I'll contact you by e-mailing to the address: ”+ address+"." +

"<BR><BR><BR><BR><IMG SRC=\"/examples/images/Aswoosh.gif\"></BODY>"); out.println(); }}

Conclusion:Conclusion:What you have learned?What you have learned?

exercises of the tutorial on advanced web programming

Documents