Exercises of the Tutorial on Advanced Web Programming

1
Exercises of the Tutorial on Advanced Web
Programming

• Authors
• Miroslava Mitrovic (mirka_at_galeb.etf.bg.ac.yu)
• Dragan Milicev (emiliced_at_etf.bg.ac.yu)
• Nino Stojcic (nstojcic_at_yubc.net)
• Veljko Milutinovic (vm_at_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
(No Transcript)
4

• lt ! Exercise1.html
• ltHTMLgt
• ltTITLEgtExercise1lt/TITLEgt
• ltHEADgt ltFONT SIZE"6"gtExercise1lt/FONTgtlt/HEADgt
• ltBODYgt
• ltBRgt
• ltHRgt
• ltFORM NAME"Form1"gt
• Namenbsp
• ltINPUT TYPE"text" NAME"Name"
  SIZE"25" MAXLENGTH25gt
• ltBRgt
• Address
• ltINPUT TYPE"text" NAME"Address"
  SIZE"25" MAXLENGTH25gt ltBRgt

5

• Age
• ltINPUT TYPE"text" NAME"Age"
  SIZE"2" MAXLENGTH2gt ltBRgtltBRgt
• Mr.
• ltINPUT TYPE"radio" NAME"Group1" CHECKED
  VALUE"Mr.gt
• Mrs.
• ltINPUT TYPE"radio" NAME"Group1" VALUE"Mrs."gt
• Miss
• ltINPUT TYPE"radio" NAME"Group1" VALUE"Miss"gt
• ltBRgtltBRgt
• ltINPUT TYPE"submit" VALUE"Submit" gt
• nbspnbsp
• ltINPUT TYPE"reset" VALUE"Reset"gt
• lt/FORMgt
• ltHRgt
• lt/BODYgt

6
Exercise 2Validate Your Forms 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

7
(No Transcript)
8
(No Transcript)
9
(No Transcript)
10

• lt! Exercise2.html
• .
• ltBODYgt
• ltBRgtltBRgt
• ltHRgt
• ltSCRIPT LANGUAGE"JavaScript"gt
• lt!
• function checkData (theForm)
• var ReturnValfalse
• var nametheForm.Name.value
• var addresstheForm.Address.value
• var ageNumber(theForm.Age.value)

11

• 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 (agelt0)
• alert("Age must be non negative number!")
• else ReturnValtrue
• if (ReturnVal)
• alert("Your order has been submitted")
• return ReturnVal
• //--gt
• lt/SCRIPT gt
• ltFORM NAME"Form1" ONSUBMIT"return
  checkData(this) "gt

12
Exercise 3Make 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

13
(No Transcript)
14
lt! Exercise3.html . ltBODYgt ltBRgt
ltAPPLET CODE"Ticker.class" WIDTH200
HEIGHT35gt ltPARAM NAME"fontname"
VALUE"Times New Roman"gt ltPARAM
NAME"fontsize" VALUE24gt ltPARAM
NAME"text" VALUE"Fill out this form!"gt
lt/APPLETgt ltHRgt
ltSCRIPT LANGUAGE"JavaScript"gt
15
Exercise 4Develop 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 ltMr.Mrs.Missgt ltNamegt,
• glad to meet you. Ill stay in contact with you
• by e-mailing to the address ltAddressgt.

16
(No Transcript)
17

• lt! Exercise4.html
• //--gt
• lt/SCRIPTgt
• ltFORM NAME"Form1" ONSUBMIT"return
  checkData(this)" METHOD"POST" ACTION"../servlet/
  Exercise4Servlet" gt
• Namenbspnbspnbspnbsp
• ltINPUT TYPE"text" NAME"Name"
  SIZE"25" MAXLENGTH25gt
• ltBRgtltBRgt
• ..

18
(No Transcript)
19

• // 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()

20

• String name1req.getParameter("Nam
  e")
• String address req.getParameter("Address")
• String mrMrsMissreq.getParameter("Group1")
• out.print(
• "ltHEADgtltTITLEgtExercise4lt/TITLEgt"
• "ltFONT SIZE\"6\"gtExercise4lt/FONTgtlt/HEADgt"
  
• "ltBRgtltBRgtltHRgt"
• "ltBRgtltFONT SIZE\"5\"gtServlet Response
  ltBRgtltBRgtltBRgt"
• "lt/FONTgtHello nbsp"mrMrsMiss"nbsp
  name1 ",nbspglad to meet you!ltBRgtltBRgtI'll
  contact you by e-mailing to the
• "addressnbsp address
  "ltBRgtltBRgtltBRgtltBRgtltHRgtlt/BODYgt")
• out.close()

21
Exercise 5Make 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.

22
(No Transcript)
23
(No Transcript)
24

• // 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 name1req.getParameter("Name")

25

• String mrMrsMissreq.getParameter("Group1")
  
• String agereq.getParameter("Age")
• Connection connull
• try
• //load the JdbcOdbcDriver
• Class.forName("sun.jdbc.odbc.JdbcOdbcDri
  ver")
• String url "jdbcodbcExercise5Base"
• //get a connection to the database
• con DriverManager.getConnection(url,"E
  xercise5Base", "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)

26

• 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)

27

• out.print(
• "ltHEADgtltTITLEgtExercise5lt/TITLEgt"
• "ltFONT SIZE\"6\"gtExercise5lt/FONTgtlt/HEADgt"
• "ltBRgtltBRgtltHRgt"
• "ltBRgtltFONT SIZE\"5\"gtServlet Response
  ltBRgtltBRgtltBRgt"
• "lt/FONTgtHello nbsp"mrMrsMiss"nbsp"name1
  
• ",nbspglad to meet you!ltBRgtltBRgtI'll
  contact you by e-mailing to the
• addressnbsp "
• address "ltBRgtltBRgtltBRgtltBRgtltHRgtlt/BODYgt")
  
• out.close()

28
(No Transcript)
29
Exercise 6Develop 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,

30
Exercise 6Develop Your First Simple Web
Application

• and on the submit command go to
• the confirmation Hello.. page.

31
(No Transcript)
32
(No Transcript)
33
(No Transcript)
34

• ltHTMLgt
• ltHEADgt
• ltTITLEgtExercise6lt/TITLEgt
• ltFONT SIZE"6" gtExercise6lt/FONTgt
• lt/HEADgt
• ltBODY BACKGROUND"/examples/images/Back.gif"gt
• ltBRgtltBRgtltBRgt
• ltjspplugin type"applet" code"Ticker.class"
  codebase"applets" width"200" height"35"gt
• ltjspparamsgt
• ltjspparam name"fontname" value"Times
  New Roman"/gt
• ltjspparam name"fontsize" value"24"/gt
• ltjspparam name"text" value"Fill out
  this form!"/gt
• lt/jspparamsgt
• ltjspfallbackgt
• ltPgtUnable to load appletlt/Pgt
• lt/jspfallbackgt
• lt/jspplugingt

35

• ltSCRIPT LANGUAGE"JavaScript"gt
• lt!--
• function checkData (theForm)
• var ReturnValfalse
• var addresstheForm.Address.value
• var ageNumber(theForm.Age.value)
• 
  if(address"")
• alert("Address must not be empty!")
• else if(isNaN(age))
• alert("Age must be non negative
  number!")
• else if(agelt0)
• 
  alert("Age must be non negative number!")
• else ReturnValtrue
• return ReturnVal
• //--gt
• lt/SCRIPTgt

36

• ltHRgt
• ltFORM NAME"Form1" ONSUBMIT"return
  checkData(this)" METHOD"POST" ACTION"/examples/s
  ervlet/Exercise6Servlet"gt
• lt_at_ page language'java' import
  "Exercise6Bean" gt
• ltjspuseBean id"Bean"
  class"Exercise6Bean" scope"page"/gt
  
• Namenbspnbspnbspnbsp
• ltSELECT NAME"Name" SIZE"1" MAXLENGTH25gt
  
• lt Bean.getName()gt
• lt/SELECTgt
• ltBRgtltBRgt
• Address
• ltINPUT TYPE"text" NAME"Address"
  SIZE"25" MAXLENGTH25gt
• ltBRgtltBRgt Agenbspnbspnbspnbspnbsp
  nbspnbsp
• ltINPUT TYPE"text" NAME"Age"
  SIZE"2" MAXLENGTH2gt

37

• ltBRgtltBRgt
• Mr
• ltINPUT TYPE"radio" NAME"Group1" CHECKED
  VALUE"Mr."gt
• nbspnbspnbspnbspnbsp
• Mrs
• ltINPUT TYPE"radio" NAME"Group1" VALUE"Mrs."gt
  
• nbspnbspnbspnbspnbsp
• Miss
• ..

38

• // Exercise6Bean.java
• import java.beans.
• import java.io.
• import java.sql.
• public class Exercise6Bean
• private String name""
• public String getName()
• Connection connull
• ResultSet rsnull
• try
• //load the JdbcOdbcDriver
• Class.forName("sun.jdbc.odbc.JdbcOdbcDrive
  r")
• String url "jdbcodbcExercise5Base"
  
• //get a connection to the database

39

• //create a statement object
• Statement stmt con.createStatement()
  
• //execute an sql query
• String sql "Select Name from
  Members"
• rsstmt.executeQuery(sql)
• while (rs.next())
• name name"ltOPTIONgt"
  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())

40

• //close the database connection
• finally
• try
• if (con!null) con.close()
• catch (SQLException ignored)
• return name
• //end of function
• // end of class

41
(No Transcript)
42

• //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 mrMrsMissreq.getParameter("Group1")
• String name1req.getParameter("Name")
• String address req.getParameter("Address")
• String agereq.getParameter("Age")
• Connection connull

43

• try
• //load the JdbcOdbcDriver
• Class.forName("sun.jdbc.odbc.JdbcOdbcD
  river")
• String url "jdbcodbcExercise5Base"
  
• //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)

44

• //close the database connection
• finally
• try
• if (con!null) con.close()
• catch (SQLException ignored)
• out.print(
• "ltHEADgtltTITLEgtExercise6lt/TITLEgt"
• "ltFONT SIZE\"6\"gtExercise6lt/FONTgtlt/HEADgt
• "ltBODY BACKGROUND\"/examples/images/Back.gi
  f\"gt"
• "ltBRgtltBRgtltIMG SRC\"/examples/images/Aswoosh
  .gif\"gt"
• "ltBRgtltBRgtltFONT SIZE\"5\"gtServlet Response
  ltBRgtltBRgtltBRgt"
• "lt/FONTgtHello nbsp"mrMrsMiss"nbsp"name1
  
• ",nbspglad to meet you!ltBRgtltBRgtI'll
  contact you by e-mailing to the addressnbsp
  address"."
• "ltBRgtltBRgtltBRgtltBRgtltIMG SRC\"/examples/images
  /Aswoosh.gif\"gtlt/BODYgt")
• out.println()

45
(No Transcript)
46
ConclusionWhat you have learned?