Computer Science 396SExample using html forms, JavaScript, and cascading style sheetsFor the next assignment, enhance your project by adding at least one of the following:- A form with radio buttons, a check box, or a list box.- A cascading style sheet.- Javascript.An example that uses a form with radio buttons, a style sheet, and Javascript follows. The choices for the radio buttons include all the servlets that we have been writing. However, only two of them are included here, a DisplayServlet and an InsertServlet. Forms display.html and insert.html are also shown.choices.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><link rel="stylesheet" type="text/css" href="choices-styles.css" /><head><title>Grocery Store</title><script language = "Javascript" src = "choice-script.js"> </script></head><body><h2>Grocery Store</h2><h3>Make a Choice</h3><table><form name="ChoiceForm" > <tr><td><input type="radio" name = "choices" value = "display" onClick="MakeChoice (this.value)" /> Display All</td></tr> <tr><td><input type = "radio" name = "choices" value = "find" onClick="MakeChoice (this.value)" /> Find a Name</td></tr> <tr><td><input type = "radio" name = "choices" value = "insert" onClick="MakeChoice (this.value)" /> Insert an Item</td></tr> <tr><td><input type = "radio" name= "choices" value = "delete" onClick="MakeChoice (this.value)" /> Delete an Item</td></tr> <tr><td><input type = "radio" name= "choices" value = "change" onClick="MakeChoice (this.value)" /> Change a Price</td></tr></form></table> </body></html>choice-styles.css/* Style sheet for deli application. */body {background-image: url("white.gif");text-align: center;color: blue;}h1,h2,h3,h3,h4,h5,h6{color: blue}form{color: seagreen}table{border-color: blue;border-style: solid;border-width: 2px;padding-left: 2cm;padding-right: 2cm; }choice-script.js<!--function MakeChoice (value){if (value == "display") choiceWindow = window.open ("display.html", "Window", "width=400, height=400");if (value == "find") choiceWindow = window.open ("find.html", "Window", "width=400, height=400")if (value == "insert") choiceWindow = window.open ("insert.html", "Window", "width=400, height=400")if (value == "delete") choiceWindow = window.open ("delete.html", "Window", "width=400, height=400")if (value == "change") choiceWindow = window.open ("change.html", "Window", "width=400, height=400")}//-->display.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> <title>Display Items</title><link rel="stylesheet" type="text/css" href="choices-styles.css" /></head><body><h3>Display Products</h3><form method = "get" action="http://localhost/servlet/produce.DisplayServlet"><p><input type="submit" value="Display Product" /></p></form></body></html>DisplayServlet.javapackage produce;import java.sql.*;import java.io.*;import javax.servlet.*;import javax.servlet.http.*;/* DisplayServlet displays all the data in the database. */public class DisplayServlet extends HttpServlet{public void doGet (HttpServletRequest request, HttpServletResponse response) {try{PrintWriter out = response.getWriter ();Page.createHeader (out, "Display Products");// Get a jdbc-odbc bridge and connect to produce.mdb.Class.forName ("sun.jdbc.odbc.JdbcOdbcDriver");Connection con = DriverManager.getConnection ("jdbc:odbc:produce");String keyName = request.getParameter ("keyName");Statement stmt = con.createStatement ();String query = "Select * From ProduceTable";ResultSet rs = stmt.executeQuery (query);// Set up the heading for the table.out.println ("<table border='1' bordercolor='#000000' cellspacing='5'>");out.println ("<caption>Produce List</caption>");out.print ("<thead><tr>");out.print ("<th>ID</th><th>Type</th><th>Name</th><th>Variety</th><th>Price</th>");out.println ("</tr></thead>");while (rs.next ()) {// Display the row of the database.out.print ("<tr>");out.print ("<td>" + rs.getString ("ID") + "</td>");out.print ("<td>" + rs.getString ("Type") + "</td>");out.print ("<td>" + rs.getString ("Name") + "</td>");out.print ("<td>" + rs.getString ("Variety") + "</td>");out.print ("<td>" +decimals (rs.getDouble("Price")) + "</td>");out.println ("</tr>");}out.println ("</table");Page.createFooter (out);} catch (ClassNotFoundException e){System.out.println ("Class Not Found exception.");} catch (SQLException e){System.out.println ("SQL Exception.");} catch (IOException ex) {System.out.println ("IO Exception.");}} // doGet// Formats a double for string output with two decimal places.public static String decimals (double num){DecimalFormat decFor = new DecimalFormat (); decFor.setMaximumFractionDigits (2); decFor.setMinimumFractionDigits (2);return decFor.format (num);} // method decimals} // class DisplayServletinsert.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>Find an Item</title><link rel="stylesheet" type="text/css" href="choices-styles.css" /></head><body><h3>Add a Product</h3><form method = "get" action="http://localhost/servlet/produce.InsertServlet"><p><input type = "text" name = "id" value = "" size = 30 /> ID </p><p><input type = "text" name = "type" value = "" size = 30 /> Type </p><p><input type = "text" name = "name" value = "" size = 30 /> Name </p><p><input type = "text" name = "variety" value = "" size = 30 /> Variety </p><p><input type = "text" name = "price" value = "" size = 30 /> Price </p><p><input type="submit" value="Add Product" /></p></form></body></html>InsertServlet.javapackage produce;import java.sql.*;import java.io.*;import javax.servlet.*;import javax.servlet.http.*;/* InsertServlet gets data from the request and adds the product to the database. */public class InsertServlet extends HttpServlet{public void doGet (HttpServletRequest request, HttpServletResponse response) {try{PrintWriter out = response.getWriter ();Page.createHeader (out, "Insert a Product");// Get a jdbc-odbc bridge and connect to produce.mdb.Class.forName ("sun.jdbc.odbc.JdbcOdbcDriver");Connection con = DriverManager.getConnection ("jdbc:odbc:produce");String keyName = request.getParameter ("keyName");Statement stmt = con.createStatement ();int success = addProduct (out, con, request);if (success == 0) out.println ("<h3>Insert error.</h3>");else out.println ("<h3>Data inserted.</h3>");Page.createFooter (out);} catch (ClassNotFoundException e){System.out.println ("Class Not Found exception.");} catch (SQLException e){System.out.println ("SQL Exception.");}catch (IOException ex)
View Full Document