Aplikacja WWW - projekt -  Java Server Pages – 02.11.2009

1. Utworzyć stronę JSP wyświetlającą dane konkretnego produktu (zamówienia, klienta), zapisującą i odczytującą dane z obiektu javabean.

2. Zastosować formatowanie stron HTML z wykorzystaniem CSS oraz JavaScript – pliki - p05-JSP

 

/*

 * To change this template, choose Tools | Templates

 * and open the template in the editor.

 */

// Node Functions

 

if(!window.Node){

  var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};

}

 

function checkNode(node, filter){

  return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());

}

 

function getChildren(node, filter){

  var result = new Array();

  var children = node.childNodes;

  for(var i = 0; i < children.length; i++){

    if(checkNode(children[i], filter)) result[result.length] = children[i];

  }

  return result;

}

 

function getChildrenByElement(node){

  return getChildren(node, "ELEMENT_NODE");

}

 

function getFirstChild(node, filter){

  var child;

  var children = node.childNodes;

  for(var i = 0; i < children.length; i++){

    child = children[i];

    if(checkNode(child, filter)) return child;

  }

  return null;

}

 

function getFirstChildByText(node){

  return getFirstChild(node, "TEXT_NODE");

}

 

function getNextSibling(node, filter){

  for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){

    if(checkNode(sibling, filter)) return sibling;

  }

  return null;

}

function getNextSiblingByElement(node){

        return getNextSibling(node, "ELEMENT_NODE");

}

 

// Menu Functions & Properties

 

var activeMenu = null;

 

function showMenu() {

  if(activeMenu){

    activeMenu.className = "";

    getNextSiblingByElement(activeMenu).style.display = "none";

  }

  if(this == activeMenu){

    activeMenu = null;

  } else {

    this.className = "active";

    getNextSiblingByElement(this).style.display = "block";

    activeMenu = this;

  }

  return false;

}

 

function initMenu(){

  var menus, menu, text, a, i;

  menus = getChildrenByElement(document.getElementById("menu"));

  for(i = 0; i < menus.length; i++){

    menu = menus[i];

    text = getFirstChildByText(menu);

    a = document.createElement("a");

    menu.replaceChild(a, text);

    a.appendChild(text);

    a.href = "#";

    a.onclick = showMenu;

    a.onfocus = function(){this.blur()};

  }

}

 

if(document.createElement) window.onload = initMenu;

 

 

 

 

Plik : newcss.css

/*

    Document   : newcss.css

    Created on : 2009-10-29, 08:33:34

    Author     :

    Description:

        Purpose of the stylesheet follows.

*/

 

/*

   TODO customize this sample style

   Syntax recommendation http://www.w3.org/TR/REC-CSS2/

*/

 

root {

    display: block;

}

 

 ul.navbar {

    position: absolute;

    top: 2em;

    left: 1em;

    width: 9em }

  h1 {

    font-family: Helvetica, Geneva, Arial,

          SunSans-Regular, sans-serif }

  ul#menu {

  width: 100px;

  list-style-type: none;

  border-top: solid 1px #b9a894;

  margin: 0;

  padding: 0;

}

 

ul#menu ol {

  display: none;

  text-align: right;

  list-style-type: none;

  margin: 0;

  padding: 5px;

}

 

ul#menu li,

  ul#menu a {

  font-family: verdana, sans-serif;

  font-size: 11px;

  color: #785a3c;

}

 

ul#menu li {

  border-bottom: solid 1px #b9a894;

  line-height: 15px;

}

 

ul#menu ol li {

  border-bottom: none;

}

 

ul#menu ol li:before {

  content: "- ";

}

 

ul#menu a {

  text-decoration: none;

  outline: none;

}

 

ul#menu a:hover {

  color: #539dbc;

}

 

ul#menu a.active {

  color: #be5028;

}

 

body {

text-align:center;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:small;

}

#outer {

width:80%;

margin:0px auto 0px auto;

padding:0px;

background-attachment: scroll;

background-image: url(images/background_r3_c5.gif);

background-repeat: repeat-y;

background-position: right 0px;

background-color: #B5DE54;

}

#wrapper {

width:100%;

margin:0px;

padding:0px;

background-attachment: scroll;

background-image: url(images/background_r3_c2.gif);

background-repeat: repeat-y;

background-position: 0px 0px;

}

#header, #header_left, #header_right, #footer_left, #footer_right {

margin:0px;

padding:0px;

}

#header {

position:relative;

height:70px;

background-image: url(images/background_r2_c3.gif);

background-attachment: scroll;

background-repeat: repeat-x;

background-position: left 0px;

}

#header_left {

position:absolute;

top:0px;

left:0px;

width:30px;

height:70px;

background-attachment: scroll;

background-image: url(images/background_r2_c2.gif);

background-repeat: no-repeat;

background-position: left 0px;

}

#header_right {

position:absolute;

top:0px;

right:0px;

width:30px;

height:70px;

background-attachment: scroll;

background-image: url(images/background_r2_c5.gif);

background-repeat: no-repeat;

background-position: right 0px;

}

#container {

margin:0px;

padding:10%;

width:80%;

height:auto;

}

#footer {

margin:0px;

padding:0px;

height:40px;

position:relative;

background-attachment: scroll;

background-image: url(images/background_r5_c3.gif);

background-repeat: repeat-x;

background-position: left bottom;

}

#footer_left {

position:absolute;

bottom:0px;

left:0px;

width:30px;

height:40px;

background-image: url(images/background_r5_c2.gif);

background-attachment: scroll;

background-repeat: no-repeat;

background-position: left bottom;

}

#footer_right {

position:absolute;

bottom:0px;

right:0px;

width:30px;

height:40px;

background-attachment: scroll;

background-image: url(images/background_r5_c5.gif);

background-repeat: no-repeat;

background-position: right bottom;

}

 

 

Plik – index_p05.jsp

<%--

    Document   : index

    Created on : 2009-10-15, 22:26:14

    Author     :

--%>

 

<%@ page import="java.sql.*" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

   "http://www.w3.org/TR/html4/loose.dtd">

 

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>JSP Page</title>

        <script type="text/javascript" src="javascript.js"></script>

        <style type="text/css">

  body {

    padding-left: 11em;

    font-family: Georgia, "Times New Roman",

          Times, serif;

    color: blue;

    background-color: #7E3117 }

 

  </style>

    </head>

    <body>

        <TABLE BORDER=1 ALIGN=CENTER CELLPADDING=3 WIDTH="800" bgcolor=#CCFB5D>

        <TR>

            <TD ROWSPAN=3 VALIGN=MIDDLE WIDTH="300">

               <TABLE  BORDER=1 ALIGN=CENTER  WIDTH="300" BORDER="0"  frame="void" rules="none">

                        <TR><TD onMouseOver="this.bgColor='#B1FB17';" onMouseOut="this.bgColor='#CCFB5D';">

                     <a class="lnk" href="HibernateExample">Hibernate Example - serwlet</a><BR><BR>

                        </TD></TR>

                        <TR><TD>

                     <a class="lnk" href="HibernateJSP.jsp">Hibernate Example JSP</a><BR><BR>

                                             <TR><TD>

                     <a class="lnk" href="newjsp.jsp">Example - Table Product - JSP</a><BR><BR>

                                             <TR><TD>

                     <a class="lnk" href="pss_www_p6.htm">TODO List - JSP</a><BR><BR>

                                             <TR><TD>

                     <a class="lnk" href="http://www.w3schools.com/jsref/default.asp">Reference on HTML/JS/DOM/CSS</a><BR><BR>

                                             <TR><TD>

                     <a class="lnk" href="http://www.w3.org/TR/html401/struct/tables.html">Reference on HTML/TABLES</a><BR><BR>

                </TABLE>

                   </TD>

            <TD>

                <jsp:include page="tableinfo.jsp" />

            </TD>

        <TR>

            <TD>

                <jsp:include page="newjsp.jsp" />

            </TD>

        <TR>

            <TD>

                <ul id="menu">

  <li>Zajecia I

    <ol>

      <li><a href="#">Sub Item 1.1</a></li>

      <li><a href="#">Sub Item 1.2</a></li>

      <li><a href="#">Sub Item 1.3</a></li>

    </ol>

  </li>

  <li>Zajecia II

    <ol>

      <li><a href="#">Sub Item 2.1</a></li>

      <li><a href="#">Sub Item 2.2</a></li>

      <li><a href="#">Sub Item 2.3</a></li>

    </ol>

  </li>

  <li>Zajecia III

    <ol>

      <li><a href="#">Sub Item 3.1</a></li>

      <li><a href="#">Sub Item 3.2</a></li>

      <li><a href="#">Sub Item 3.3</a></li>

    </ol>

  </li>

  <li>Zajecia IV

    <ol>

      <li><a href="#">Sub Item 4.1</a></li>

      <li><a href="#">Sub Item 4.2</a></li>

      <li><a href="#">Sub Item 4.3</a></li>

    </ol>

  </li>

  <li>Zajecia V

    <ol>

      <li><a href="#">Sub Item 5.1</a></li>

      <li><a href="#">Sub Item 5.2</a></li>

      <li><a href="#">Sub Item 5.3</a></li>

    </ol>

  </li>

</ul>

</TD>

</TABLE>

 

 

 

    </body>

</html>

 

<%--

    Document   : index

    Created on : 2009-10-15, 22:26:14

    Author     :

--%>

 

<%@ page import="java.sql.*" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

   "http://www.w3.org/TR/html4/loose.dtd">

 

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>JSP Page</title>

        <style type="text/css">

  body {

    padding-left: 11em;

    font-family: Georgia, "Times New Roman",

          Times, serif;

    color: #00A000;

    background-color: #00A000 }

 

  </style>

<script type="text/javascript" src="javascript.js"></script>

 

<link rel="stylesheet" href="newcss.css">

 

    </head>

    <body bgcolor="#D9D9D9">

 

        <div id="outer">

<div id="wrapper">

<div id="header">

 

<div id="header_left"></div>

<div id="header_right"></div>

 

</div>

 

<div id="container">THE PAGES</div>

 

<div id="footer">

 

<div id="footer_left"></div>

<div id="footer_right"></div>

</div>

 

</div>

</div>

 

    </body>

</html>