Exercises of the Tutorial on Advanced Web Programming - PowerPoint PPT Presentation

Loading...

PPT – Exercises of the Tutorial on Advanced Web Programming PowerPoint presentation | free to download - id: 745e21-MTJiM



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Exercises of the Tutorial on Advanced Web Programming

Description:

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) – PowerPoint PPT presentation

Number of Views:31
Avg rating:3.0/5.0
Date added: 16 January 2020
Slides: 47
Provided by: Miroslava2
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: 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 2 Validate 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 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

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

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

30
Exercise 6 Develop 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
Conclusion What you have learned?
About PowerShow.com