Exercises of the Tutorial on Advanced Web Programming Authors: Miroslava Mitrovic Dragan Milicev Nino Stojcic Veljko Milutinovic

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

< ! Exercise1.html Exercise1 Exercise1: Name:&nbsp Address:

Age: Mr. Mrs. Miss

Exercise 2: Validate 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 ……………. <!— function checkData (theForm){ var ReturnVal=false var name=theForm.Name.value var address=theForm.Address.value var 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 } //--> ………………………….

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. Using a scrolling box

<! Exercise3.html …………………. ……………

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, glad to meet you. I’ll stay in contact with you by ing to the address:. “

<! Exercise4.html ………… //--> Name: ……………..

// 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( " Exercise4 "+ " Exercise4: "+ " " + " Servlet Response: "+ " Hello "+mrMrsMiss+" “ + name1 + ", glad to meet you! I'll contact you by ing to the + "address: “+address + " "); 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.

// 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( " Exercise5 "+ " Exercise5: "+ " " + " Servlet Response: "+ " Hello "+mrMrsMiss+" "+name1+ ", glad to meet you! I'll contact you by ing to the” + address: "+ address + " ") ; 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.

Exercise6 Unable to load applet

<!-- function checkData (theForm){ var ReturnVal=false var address=theForm.Address.value var age=Number(theForm.Age.value) 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 return ReturnVal } //-->

Name: Address: Age:

Mr 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+" " + 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()); }

//close the database connection finally { try{ if (con!=null) con.close(); } catch (SQLException ignored){} } 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()); }

//close the database connection finally { try{ if (con!=null) con.close(); } catch (SQLException ignored){} } out.print( " Exercise6 "+ " Exercise6: “+ " "+ " Servlet Response "+ " Hello "+mrMrsMiss+" "+name1+ ", glad to meet you! I'll contact you by ing to the address: ”+ address+"." + " "); out.println(); }

Conclusion: What you have learned?