Exercises of the Tutorial on Advanced Web Programming
Exercises of the Tutorial on Advanced Web Programming Authors: Miroslava Mitrovic (mirka@galeb. etf. bg. ac. yu) Dragan Milicev (emiliced@etf. bg. ac. yu) Nino Stojcic (nstojcic@yubc. net) Veljko Milutinovic (vm@etf. bg. ac. yu)
Exercise 1: Develop 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
< ! Exercise 1. html <HTML> <TITLE>Exercise 1</TITLE> <HEAD> <FONT SIZE="6">Exercise 1: </FONT></HEAD> <BODY> <BR> <HR> <FORM NAME="Form 1"> Name:   <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> Mr. <INPUT TYPE="radio" NAME="Group 1" CHECKED VALUE="Mr. ”> Mrs. <INPUT TYPE="radio" NAME="Group 1" VALUE="Mrs. "> Miss <INPUT TYPE="radio" NAME="Group 1" VALUE="Miss"> <BR> <INPUT TYPE="submit" VALUE="Submit" > <INPUT TYPE="reset" VALUE="Reset"> </FORM> <HR> </BODY>
Exercise 2: Validate Your Form’s Data Enhance the form from Exercise 1 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). l Validation upon pressing the submit button l
<! Exercise 2. html ……………. <BODY> <BR> <HR> <SCRIPT LANGUAGE="Java. Script"> <!— function check. Data (the. Form){ var Return. Val=false var name=the. Form. Name. value var address=the. Form. Address. value var age=Number(the. Form. Age. value)
if (name=="") alert("Name must not be empty!") else if (address=="") alert("Address must not be empty!") else if (is. Na. N(age)) alert("Age must be non negative number!") else if (age<0) alert("Age must be non negative number!") else Return. Val=true if (Return. Val) alert("Your order has been submitted") return Return. Val } //--> </SCRIPT > <FORM NAME="Form 1" ONSUBMIT="return check. Data(this) "> …………….
Exercise 3: Make Your Web Form Live Make your web form alive, by adding a simple applet to your web form that will demonstrate the possibility of creating dynamic contents. l Using a scrolling box l
<! Exercise 3. 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="Java. Script"> ……………
Exercise 4: Develop 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>. “
<! Exercise 4. html ………… //--> </SCRIPT> <FORM NAME="Form 1" ONSUBMIT="return check. Data(this)" METHOD="POST" ACTION=". . /servlet/Exercise 4 Servlet" > Name: <INPUT TYPE="text" NAME="Name" SIZE="25" MAXLENGTH=25> <BR> ……………. .
// Exercise 4 Servlet. Java import java. io. *; import java. util. *; import javax. servlet. http. *; public class Exercise 4 Servlet extends Http. Servlet{ //overloading the do. Post() method inherited from Http. Servlet class public void do. Post(Http. Servlet. Request req, Http. Servlet. Response res) throws Servlet. Exception, IOException{ //setting the content type of response to "text/html" res. set. Content. Type("text/html"); //Print. Writer converts Java's Unicode characters to locale-specific encoding //For an English locale, it behaves same as a Print. Stream Print. Writer out = res. get. Writer();
String name 1=req. get. Parameter("Name"); String address= req. get. Parameter("Address"); String mr. Mrs. Miss=req. get. Parameter("Group 1"); out. print( "<HEAD><TITLE>Exercise 4</TITLE>"+ "<FONT SIZE="6">Exercise 4: </FONT></HEAD>"+ "<BR><HR>" + "<BR><FONT SIZE="5">Servlet Response: <BR><BR>"+ "</FONT>Hello "+mr. Mrs. Miss+" “ + name 1 + ", glad to meet you!<BR>I'll contact you by e-mailing to the + "address: “+address + "<BR><BR><HR></BODY>"); out. close(); } }
Exercise 5: Make Your Own Application 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.
// Exercise 5 Servlet. java import java. io. *; import java. util. *; import javax. servlet. http. *; import java. sql. *; import sun. jdbc. odbc. *; public class Exercise 5 Servlet extends Http. Servlet{ public void do. Post(Http. Servlet. Request req, Http. Servlet. Response res) throws Servlet. Exception, IOException { String status ="nix"; res. set. Content. Type("text/html"); Print. Writer out = res. get. Writer(); String name 1=req. get. Parameter("Name"); String address= req. get. Parameter("Address");
String mr. Mrs. Miss=req. get. Parameter("Group 1"); String age=req. get. Parameter("Age"); Connection con=null; try{ //load the Jdbc. Odbc. Driver Class. for. Name("sun. jdbc. odbc. Jdbc. Odbc. Driver"); String url = "jdbc: odbc: Exercise 5 Base"; //get a connection to the database con = Driver. Manager. get. Connection(url, "Exercise 5 Base", "sql"); //create a statement object Statement stmt = con. create. Statement(); //execute an sql query String sql = "Insert into Members (Name, Address, Age, Title) values"+ "('"+ name 1 +"', '"+ address +"', '"+ age +"', '"+ mr. Mrs. Miss +"')" ; stmt. execute(sql); }
catch(Class. Not. Found. Exception e){ System. out. println("Couldn't load database driver: " + e. get. Message()); } catch(SQLException e){ System. out. println("SQLException caught: " + e. get. Message()); } //close the database connection finally { try{ if (con!=null) con. close(); } catch (SQLException ignored){} }
out. print( "<HEAD><TITLE>Exercise 5</TITLE>"+ "<FONT SIZE="6">Exercise 5: </FONT></HEAD>"+ "<BR><HR>" + "<BR><FONT SIZE="5">Servlet Response: <BR><BR>"+ "</FONT>Hello "+mr. Mrs. Miss+" "+name 1+ ", glad to meet you!<BR>I'll contact you by e-mailing to the” + address: "+ address + "<BR><BR><HR></BODY>") ; out. close(); } }
Exercise 6: Develop Your First Simple Web Application 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: Develop Your First Simple Web Application and on the “submit” command go to the confirmation “Hello. . ” page.
<HTML> <HEAD> <TITLE>Exercise 6</TITLE> <FONT SIZE="6" >Exercise 6</FONT> </HEAD> <BODY BACKGROUND="/examples/images/Back. gif"> <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>
<SCRIPT LANGUAGE="Java. Script"> <!-function check. Data (the. Form){ var Return. Val=false var address=the. Form. Address. value var age=Number(the. Form. Age. value) if(address=="") alert("Address must not be empty!") else if(is. Na. N(age)) alert("Age must be non negative number!") else if(age<0) alert("Age must be non negative number!") else Return. Val=true return Return. Val } //--> </SCRIPT>
<HR> <FORM NAME="Form 1" ONSUBMIT="return check. Data(this)" METHOD="POST" ACTION="/examples/servlet/Exercise 6 Servlet"> <%@ page language='java' import ="Exercise 6 Bean" %> <jsp: use. Bean id="Bean" class="Exercise 6 Bean" scope="page"/> Name: <SELECT NAME="Name" SIZE="1" MAXLENGTH=25> <%= Bean. get. Name()%> </SELECT> <BR> Address: <INPUT TYPE="text" NAME="Address" SIZE="25" MAXLENGTH=25> <BR> Age: <INPUT TYPE="text" NAME="Age" SIZE="2" MAXLENGTH=2>
<BR> Mr <INPUT TYPE="radio" NAME="Group 1" CHECKED VALUE="Mr. "> Mrs <INPUT TYPE="radio" NAME="Group 1" VALUE="Mrs. "> Miss …………. .
// Exercise 6 Bean. java import java. beans. *; import java. io. *; import java. sql. *; public class Exercise 6 Bean{ private String name=""; public String get. Name(){ Connection con=null; Result. Set rs=null; try{ //load the Jdbc. Odbc. Driver Class. for. Name("sun. jdbc. odbc. Jdbc. Odbc. Driver"); String url = "jdbc: odbc: Exercise 5 Base"; //get a connection to the database con = Driver. Manager. get. Connection(url, "Exercise 5 Base", "sql");
//create a statement object Statement stmt = con. create. Statement(); //execute an sql query String sql = "Select Name from Members" ; rs=stmt. execute. Query(sql); while (rs. next()) name= name+"<OPTION>" + rs. get. String("Name"); } // end try catch(Class. Not. Found. Exception e){ System. out. println("Couldn't load database driver: " + e. get. Message()); } catch(SQLException e){ System. out. println("SQLException caught: " + e. get. Message()); }
//close the database connection finally { try{ if (con!=null) con. close(); } catch (SQLException ignored){} } return name; }//end of function }// end of class
//Exercise 6 Servlet. Java import java. io. *; import javax. servlet. http. *; import java. sql. *; public class Exercise 6 Servlet extends Http. Servlet { public void do. Post(Http. Servlet. Request req, Http. Servlet. Response res) throws Servlet. Exception, IOException { Servlet. Output. Stream out = res. get. Output. Stream(); String mr. Mrs. Miss=req. get. Parameter("Group 1"); String name 1=req. get. Parameter("Name"); String address= req. get. Parameter("Address"); String age=req. get. Parameter("Age"); Connection con=null;
try{ //load the Jdbc. Odbc. Driver Class. for. Name("sun. jdbc. odbc. Jdbc. Odbc. Driver"); String url = "jdbc: odbc: Exercise 5 Base"; //get a connection to the database con = Driver. Manager. get. Connection(url, "Exercise 5 Base", "sql"); Prepared. Statement stmt = con. prepare. Statement( "UPDATE Members SET Address = ? , Age=? , Title=? WHERE Name = ? "); stmt. set. String(1, address); stmt. set. String(2, age); stmt. set. String(3, mr. Mrs. Miss); stmt. set. String(4, name 1); stmt. execute. Update(); } catch(Class. Not. Found. Exception e){ System. out. println("Couldn't load database driver: " + e. get. Message()); } catch(SQLException e){ System. out. println("SQLException caught: " + e. get. Message()); }
//close the database connection finally { try{ if (con!=null) con. close(); } catch (SQLException ignored){} } out. print( "<HEAD><TITLE>Exercise 6</TITLE>"+ "<FONT SIZE="6">Exercise 6: </FONT></HEAD>“+ "<BODY BACKGROUND="/examples/images/Back. gif">"+ "<BR><IMG SRC="/examples/images/Aswoosh. gif">" + "<BR><FONT SIZE="5">Servlet Response <BR><BR>"+ "</FONT>Hello "+mr. Mrs. Miss+" "+name 1+ ", glad to meet you!<BR>I'll contact you by e-mailing to the address: ”+ address+". " + "<BR><BR><IMG SRC="/examples/images/Aswoosh. gif"></BODY>"); out. println(); } }
Conclusion: What you have learned?
- Slides: 46