1 / 46

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

kita
Download Presentation

Exercises of the Tutorial on Advanced Web Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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)

  2. 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

  3. < ! 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>

  4. 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" > &nbsp;&nbsp; <INPUT TYPE="reset" VALUE="Reset"> </FORM> <HR> </BODY>

  5. 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

  6. <! Exercise2.html ……………. <BODY> <BR><BR> <HR> <SCRIPT LANGUAGE="JavaScript"> <!— function checkData (theForm){ var ReturnVal=false var name=theForm.Name.value var address=theForm.Address.value var age=Number(theForm.Age.value)

  7. 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) "> ………………………….

  8. 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

  9. <! 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"> ……………

  10. 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>. “

  11. <! Exercise4.html ………… //--> </SCRIPT> <FORM NAME="Form1" ONSUBMIT="return checkData(this)" METHOD="POST" ACTION="../servlet/Exercise4Servlet" > Name:&nbsp;&nbsp;&nbsp;&nbsp; <INPUT TYPE="text" NAME="Name" SIZE="25" MAXLENGTH=25> <BR><BR> ……………..

  12. // 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();

  13. 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 &nbsp;"+mrMrsMiss+"&nbsp;“ + name1 + ",&nbsp;glad to meet you!<BR><BR>I'll contact you by e-mailing to the + "address:&nbsp; “+address + "<BR><BR><BR><BR><HR></BODY>"); out.close(); } }

  14. 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.

  15. // 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");

  16. 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); }

  17. 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){} }

  18. 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 &nbsp;"+mrMrsMiss+"&nbsp;"+name1+ ",&nbsp;glad to meet you!<BR><BR>I'll contact you by e-mailing to the” + address:&nbsp; "+ address + "<BR><BR><BR><BR><HR></BODY>") ; out.close(); } }

  19. 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,

  20. Exercise 6:Develop Your First Simple Web Application and on the “submit” command go to the confirmation “Hello..” page.

  21. <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>

  22. <SCRIPT LANGUAGE="JavaScript"> <!-- 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 } //--> </SCRIPT>

  23. <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:&nbsp;&nbsp;&nbsp;&nbsp; <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:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <INPUT TYPE="text" NAME="Age" SIZE="2" MAXLENGTH=2>

  24. <BR><BR> Mr <INPUT TYPE="radio" NAME="Group1" CHECKED VALUE="Mr."> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Mrs <INPUT TYPE="radio" NAME="Group1" VALUE="Mrs."> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Miss ……………………..

  25. // 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");

  26. //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()); }

  27. //close the database connection finally { try{ if (con!=null) con.close(); } catch (SQLException ignored){} } return name; }//end of function }// end of class

  28. //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;

  29. 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()); }

  30. //close the database connection finally { try{ if (con!=null) con.close(); } catch (SQLException ignored){} } 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 &nbsp;"+mrMrsMiss+"&nbsp;"+name1+ ",&nbsp;glad to meet you!<BR><BR>I'll contact you by e-mailing to the address:&nbsp;”+ address+"." + "<BR><BR><BR><BR><IMG SRC=\"/examples/images/Aswoosh.gif\"></BODY>"); out.println(); } }

  31. Conclusion:What you have learned?

More Related