exercises of the tutorial on advanced web programming authors: miroslava mitrovic...
Post on 02-Apr-2015
216 Views
Preview:
TRANSCRIPT
Exercises of the Tutorial on Exercises of the Tutorial on Advanced Web Advanced Web ProgrammingProgramming
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: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: 
<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>
<SCRIPT LANGUAGE="JavaScript"><!--
function checkData (theForm){var ReturnVal=falsevar address=theForm.Address.valuevar 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>
<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()); }
//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(
"<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?
top related