y crear la carpeta web.doc

Y crear la carpeta web-inf, como se explicó en entradas anteriores la estructura del proyecto sería algo muy parecido a El ejemplo consta de 2 páginas la primera página: Donde se conecta a la base de datos: index.jsp

01 

02  03 

04 

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

06 <%

07 /*conexion sera nuestra conexion a la bd*/

08 Connection conexion=null;

09

10 String mensaje="";

11

12 /*parametros para la conexion*/

13 String driver = "com.mysql.jdbc.Driver";

14 String url = "jdbc:mysql://localhost:3306/prueba"; 15 String usuario = "root";

16 String clave = "";

17 /*procedimiento de la conexion*/

18 try{

19 Class.forName(driver);

20 conexion = DriverManager.getConnection(url,usuario,clave);

21

22 /*guardando la conexion en la session*/23 session.setAttribute("conexion",conexion);

24 } catch (Exception ex){

25 mensaje=ex.toString();

26 }

mysql://localhost:3306/prueba

http://ingeniods.files.wordpress.com/2010/04/vcvc.png%00%E5%A1%B9%EF%92%81%E1%B4%BB%E4%A1%BF%E2%B2%AF%E5%B6%82%E8%97%84%E6%8C%A7%00%00%EA%AE%A5

27

28 mensaje="conectado";

29 if(conexion.isClosed()){

30 mensaje="desconectado"; 31 }

32 %>

33 <html>

34 <head> 35 <title>EJERCICIO 03 CONEXION BD CON JSP</title>

36 </head>

37 <body>

38 <form action="desconectar.jsp" method="post"> 39 <input name="estado" type="text" value="Estado: <%=mensaje%>"/>

40 <input type="submit" value="Desconectar"/>

41 </form>

42 </body>

43 </html>

La segunda página: donde se extrae la conexión de la sesión y se cierra desconectar.jsp01 

02  03 

04 

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

06 <%

07 /*conexion sera nuestra conexion a la bd*/

08 Connection conexion=null;

09

10 String mensaje="";

11

12 /*rescatando la conexion de la session*/13 conexion=(Connection)session.getAttribute("conexion");

14

15 /*cerrando la conexion*/

16 conexion.close();

17

18 mensaje="conectado";

19 if(conexion.isClosed()){

20 mensaje="desconectado"; 21 }

22 %>

23 <html>

24 <head> 25 <title>EJERCICIO 03 CONEXION BD CON JSP</title>

26 </head>

27 <body>

28 <form action="index.jsp" method="post"> 29 <input name="estado" type="text" value="Estado: <%=mensaje%>"/>

30 <input type="submit" value="Conectar"/>

31 </form>

32 </body>

33 </html>

Luego hace un servlet context desde jsp o desde servlet

1. <?xml version="1.0" encoding="UTF-8"?>2.3. <datasources>4. <local-tx-datasource>

5. <jndi-name>mysqlDs</jndi-name>6. <connection-url>jdbc:mysql://localhost:3306/mytest</connection-url>7. <driver-class>com.mysql.jdbc.Driver</driver-class>8. <user-name>put your username hre </user-name>9. <password>put your password hre</password>10. <min-pool-size>5</min-pool-size>11. <max-pool-size>50</max-pool-size>12. <idle-timeout-minutes>30</idle-timeout-minutes> <exception-sorter-class-name>com.mysql.jdbc.13. integration.jboss.ExtendedMysq lExceptionSorter</exception-sorter-class-name> <valid-connection-checker-class-

name>com.mysql.jdbc.14. integration.jboss.MysqlValidCo nnectionChecker</valid-connection-checker-class-name>15. <metadata>16. <type-mapping>mySQL</type-mapping>17. </metadata>18. </local-tx-datasource>19. </datasources>

Una cuestión que he visto en todas partes es que al momento de registrar algo exista desde cero hasta muchas opciones para un valor, la manera mas fácil de aplicar eso en jsp son las checkboxs tenemos un formulario con un grupo de checkbox con el mismo nombre y request.getParameterValues(“nombre_de_las_check”); en la pagina que evalúa el formulario.

la estructura del proyecto seria algo como así tenemos 2 paginas: index.jsp

01<html>

02 <head>

03 <title>HOLA SELECCION MULTIPLE</title>

04 <style type="text/css"><%@ include file="estilo.css"%></style>

05 </head>

06 <body bgcolor="#FFFFFF"> 07 <form name="f2" action="proceso.jsp" method="post">

08 numero1:<input type="text" name="numero1"><br/>

09 numero2:<input type="text" name="numero2"><br/>

10 

11 <input type="checkbox" name="operacion" value="suma">Suma<br/>

12 <input type="checkbox" name="operacion" value="resta">Resta<br/> 13 <input type="checkbox" name="operacion"

http://ingeniods.files.wordpress.com/2010/04/estructura1.png%00%E5%A1%B9%EF%92%81%E1%B4%BB%E4%A1%BF%E2%B2%AF%E5%B6%82%E8%97%84%E6%8C%A7%00%00%EA%AE%A5

value="multiplicacion">Multiplicacion<br/> 14 <input type="checkbox" name="operacion" value="division">Division<br/> 15 <input type="checkbox" name="operacion" value="residuo">Residuo<br/>

16 <input type="submit" value="Calcular" >

17 </form> 18 </body> 19 </html>

y el codigo interesante proceso.jsp

01 <html> 02 <head>

03 <title>HOLA SELECCION MULTIPLE</title>

04 <style type="text/css"><%@ include file="estilo.css"%></style> 05 </head>

06 <body>

07 <%

08 /*sacamos los numero del request*/09 String sn1=request.getParameter("numero1"); 10 String sn2=request.getParameter("numero2");

11

12 /*los convertimos a enteros para poder realizar las operaciones*/13 Integer n1=Integer.parseInt(sn1); 14 Integer n2=Integer.parseInt(sn2);

15

16 /*text es una vairable que usaremos para mostrar la informacion*/

17 String text="";

18 text=text+"- Numero 1: "+n1+"<br>"; 19 text=text+"- Numero 2: "+n2+"<br>";

20 text=text+"<br>";

21

22 /*como operaciones pueden ser varias usamos un vector*/23 /*y el request.tParameterValues ya que este nos devuelve un String[] */

24

25 String[] operaciones=request.getParameterValues("operacion");

26

27 /*si no escogio ninguna opcion operacionesnull*/

28 if(operaciones!= null){

29 /*recorremos el vector operaciones para ver cuales escogio*/

30 for (int i=0;i<operaciones.length;i++){

31 /*guardamos la informacion de cada ciclo en text*/

32 if(operaciones[i].matches("suma")){

33 text=text+operaciones[i]+": "+(n1+n2)+"<br>";

34 }

35 if(operaciones[i].matches("resta")){

36 text=text+operaciones[i]+": "+(n1-n2)+"<br>";

37 }

38 if(operaciones[i].matches("multiplicacion")){ 39 text=text+operaciones[i]+": "+(n1*n2)+"<br>";

40 }

41 if(operaciones[i].matches("division")){

42 text=text+operaciones[i]+": "+(n1/n2)+"<br>";

43 }

44 if(operaciones[i].matches("residuo")){ 45 text=text+operaciones[i]+": "+(n1%n2)+"<br>";

46 }

47 }

48 }else{

49 /*en caso que no escoga ninguna operacion*/

50 text=text+"No selecciono ninguna operacion"; 51 }

52

53 %>

54  55 <%= text %>

56

57 

58  59 <form name="f2" action="index.jsp" method="post">

60 <input type="submit" value="Volver" >

61 </form> 62 </body> 63 </html>

tenemos este css llamado estilo.css

1 *{

2 background-image:url(wallpaper1024x768.png); 3 background-color:#CC0000;

4 color:#FFFFFF;

5 }

NOTA: Este código fuente que acabamos de crear en JAVA, debemos guardarlo con el nombre de "Ventana.java". Al ejecutarlo mostrará una simple ventana en JAVA con menus

//INICIO// PROGRAMA: Ventana.java

//HACEMOS REFERENCIA A LA BIBLIOTECA QUE CONTIENE LAS CLASES GRÁFICASimport java.awt.*;

//CREAMOS NUESTRA CLASE "Ventana" Y LA HACEMOS QUE HEREDE LOS ATRIBUTOS//Y METODOS DE LA CLASE "Frame"public class Ventana extends Frame{ //CREAMOS UN OBJETO DE DATOS "MenuBar" PARA CREAR NUESTRA BARRA //QUE CONTENDRA LOS MENUS MenuBar barra = new MenuBar();//LA DECLARAMOS E INSTANCIAMOS.

//CREAMOS LOS MENUS QUE ESTARAN DENTRO DE LA BARRA DE MENUS QUE //ACABAMOS DE CREAR Menu programa = new Menu("Programa"); Menu ayuda = new Menu("Ayuda");

//PARA CREAR UN SUBMENU, BASTA CON INTRODUCIR EN UN MENU, OTRO MENU. //CREAMOS EL MENU QUE SERVIRA SE SUBMENU EN NUESTRO PROGRAMA Menu guardar = new Menu("Guardar");

//CREAMOS EL CONSTRUCTOR DE NUESTRA CLASE public Ventana(){ super("Ventana en JAVA"); //LE DAMOS UN NOMBRE A NUESTRA VENTANA this.setSize(500, 500); //ESTABLECEMOS EL TAMAÑO DE LA VENTANA

//SELECCIONAMOS LA BARRA DE MENUS setMenuBar(barra);

//A LA BARRA LE AGREGAMOS LOS MENUS. barra.add(programa); barra.add(ayuda); //AHORA A LOS MENUS LE AGREGAMOS LAS OPCIONES Y EL SUBMENU programa.add("Nuevo"); programa.add("Abrir"); //PARA AGREGAR UN SEPARADOR ENTRE VARIAS OPCIONES DEL MENU, //HACEMOS LO SIGUIENTE programa.addSeparator();

//SEGUIMOS AGREGANDO MAS OPCIONES Y EL SUBMENU programa.add(guardar);//AQUI ESTAMOS AGREGANDO EL SUBMENU

//AHORA AL SUBMENU LE AGREGAMOS LAS OPCIONES guardar.add("Guardar"); guardar.add("Guardar Como..."); guardar.add("Guardar Todo");

//AGREGAMOS OTRO SEPARADOR DE OPCIONES programa.addSeparator();

//AGREGAMOS UNA ULTIMA OPCION A NUESTRO MENU programa programa.add("Salir");

//AHORA VAMOS A AGREGARLE OPCIONES AL MENU DE AYUDA ayuda.add("Ayuda General"); ayuda.addSeparator();//AGREGAMOS UN SEPARADOR ayuda.add("Acerca de..."); }//FIN DEL CONSTRUCTOR DE LA CLASE Ventana

//PROCEDIMIENTO PRINCIPAL DEL PROGRAMA public static void main(String g[]){ Ventana prog = new Ventana();//Instanciamos la clase que creamos prog.show();//Mostramos esa ventana }//FIN DEL PROCEDIMIENTO PRINCIPAL

//PARA PODER CERRAR LA VENTANA public boolean handleEvent(Event evt){ if (evt.id == Event.WINDOW_DESTROY) System.exit(0); return super.handleEvent(evt); }}//FIN DE LA CLASE Ventana//FIN

Código que muestra como reproducir un fichero MP3 en una web con el reproductor Windows Media. Unicamente funciona en Internet Explorer.

Código para establecer la pagina de inicio del navegador<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.lawebdelprogramador.com')">Pagina de Inicio</a>Código de autentificación para entrar en una página web. Se le requiere un password correcto al usuario para poder visualizar una determinada página.D:\1ejercico java HOYYY/htm_PassWeb.zipReproductor de musica que permite escuchar archivos mp3, mid, wav, rmi, .... Funciona en IE 5.5 o posteriores.html_bravomatch.zipSe visualiza pero no se puede imprimirhtm_no_imprimir.zip**Menú que permanece fijo con respecto al scroll; posicionable en la parte superior o inferior de la página con un click en la imagen (Logo). Está simplificado al máximo, basado en cambios de estilos con JavaScript.Probado en: IExplorer 8 y 9, Firefox 3.6 y 4, Safari 4x.D:\1ejercico java HOYYY\css /css_menuFixed.zipCódigo que muestra la utilización de css3 para los botones, ya sean enlaces o para el envío de formulario (submit), permitiendo botones llamativos y con bordes redondeadoscss_Botones_css3.rar**Ejemplo de un formulario con el contenido alineado y centrado utilizando únicamente estilos.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Ejemplo de formulario con estilos</title>

<style type="text/css">BODY {

font-family: Arial;font-size: 0.8em;

}

/* Estable el formato para todos los div's */div {

clear: both;}

/* Determina los div's que el contenido es centrado. Hereda "clear: both;" */.form_center {

text-align:center;}

/* Para los input's alineados */.form_input_align {

float:left;border:1px solid;margin-left:0.2em;

}

/* Para los input's centrados */.form_input_center {

border:1px solid;}

/* Para los label's alineados */.form_label_align {

float:left;width:50%;text-align:right;

}

/* indicamos una pequeña separación en cada label, input, select y textarea */label, input, select, textarea {

margin-bottom:0.3em;}

/* Unicamente funciona con Firefox Determina el formato cuando se selecciona un cuadro de texto */input:focus, select:focus, textarea:focus {

background-color: #c6d3ff;}

/* Determina el formato de los comentarios */.form_comment {

color: #808080;}

/* Determina el formato de los comentarios centrados */.form_comment_center {

text-align:center;color: #808080;

}

/* Determina el formato de los botones */

.button {padding: 0em 0.5em 0em 0.5em;

}

/* Determina el formato del marco */fieldset {

border: 1px solid #808080;padding: 0.5em 0.5em 0.5em 0.5em;

}

/* Determina el formato del titulo del marco */legend {

color: #808080;}</style>

</head><body><h1 style="font-size:1em">Ejemplo de formulario con estilos</h1><form action="" method="post">

<fieldset>

<legend>Title</legend>



<div class='form_comment'>Contenido alineado</div>

<div><label for='idname' class='form_label_align'>Name :</label> <input type="text" id='idname' name='name' class='form_input_align'

title="Introduce tu nombre aqui" /></div>

<div><label for='idmail' class='form_label_align'>Mail :</label> <input type="text" id='idmail' name='mail' class='form_input_align' size='30'

title="Introduce tu direccion de email" /></div>

<div><label for='iddesplegable' class='form_label_align'>Desplegable :</label>

<select id='iddesplegable' name='desplegable' class='form_input_align' title='Selecciona una opción'><option value=''>Seleccionar ...</option><optgroup label="Primera selección">

<option value='A'>Desplegable A</option><option value='B'>Desplegable B</option>

</optgroup><optgroup label="Segunda selección">

<option value='C'>Desplegable C</option></optgroup>

</select></div>

<div><label class='form_label_align'>Check :</label><input type='checkbox' id='idcheck1' name='check' title="Selecciona" /></div>

<div><label class='form_label_align'>Radio :</label><input type='radio' name='radio1' Value='1' checked />Si <input type='radio' name='radio1'

Value='2' />No</div>



<br /><div class='form_comment_center'>Contenido centrado</div>

<div class='form_center'><label for='idname2'>Name :</label> <input type="text" id='idname2' name='name2' class='form_input_center'

title="Introduce tu nombre aqui" /></div>

<div class='form_center'><label for='idmail2'>Mail :</label> <input type="text" id='idmail2' name='mail2' class='form_input_center' size='30'

title="Introduce tu direccion de email" /></div>

<div class='form_center'><label for='iddesplegable2'>Desplegable :</label>

<select id='iddesplegable2' name='desplegable2' class='form_input_center' title='Selecciona una opción'><option value=''>Seleccionar ...</option><optgroup label="Primera selección">

<option value='A'>Desplegable A</option><option value='B'>Desplegable B</option>

</optgroup>

<optgroup label="Segunda selección"><option value='C'>Desplegable C</option>

</optgroup></select>

</div>

<div class='form_center'><label>Check :</label><input type='checkbox' name='check2' title="Selecciona" /></div>

<div class='form_center'><label>Radio :</label><input type='radio' name='radio2' Value='1' checked />Si <input type='radio' name='radio2'

Value='2' />No</div>

<div class='form_center'><span>Comentarios...</span><br /><textarea name='text2' rows='10' cols='50'

class='form_input_center'></textarea></div>

<div class='form_center'><input type="submit" value="enviar" class='button' title="Pulsa aqui para enviar" /> <input type="reset"

value="restaurar" class='button' title="Pulsa aqui para restaurar" /></div></fieldset>

</form>

<br /><p style='clear:both;text-align:center'><a href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a></p></body></html>***Ejemplo de un menú horizontal utilizando únicamente estilos.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Menu horizontal con estilos utilizando 'ul' y 'li'</title>

<style type="text/css"><!--#menu {

font-family: Arial;font-size: 0.8em;

}

#menu li {/* Indicamos que la posición de 'li' sea adjunte siempre a la izquierda */float: left;/* Eliminamos las marcas que genera el li como pueden ser las redonadas o recuadros */list-style-type: none;

}

/* Por defecto ul genera una separación hacia la derecha. con margin:0 queda anulada */#menu ul {

margin: 0;padding: 0;

}

#menu a {display: block;text-decoration: none;color: #6643ff;background: #f0edff;padding: 3px 10px 3px 10px;text-align: center;border: 1px solid #6643ff;/* Pintamos las lineas de todos los lados, excepto el izquierdo */border-width: 1px 1px 1px 0;

}

/* El primer recuadro, no tiene la linea izquierda. Aqui se la colocamos */#menu a#primero {

border: 1px solid #6643ff;}

#menu a:hover {background: #d6ccff;

}--></style>

</head>

<body>

<h1 style="font-size:1em">Menu horizontal con estilos utilizando 'ul' y 'li'</h1><div id="menu">

<ul><li><a href="#" id="primero">Cursos</a></li><li><a href="#">Temas</a></li><li><a href="#">Codigo</a></li><li><a href="#">Noticias</a></li><li><a href="#">Contactar</a></li>

</ul></div>

<br /><p style='clear:both;text-align:center'><a href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a></p></body></html>Ejemplo de un menú vertical utilizando únicamente estilos<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Menu vertical con estilos utilizando 'ul' y 'li'</title>

<style type="text/css"><!--#menu {

border: 1px solid #6643ff;/* Pintamos las lineas de todos los lados, excepto el inferior, ya que cada 'li' ya trae el borde inferior */border-width: 1px 1px 0 1px;/* Determina la anchura del menu */width: 150px;font-family: Arial;font-size: 0.8em;

}

/* Por defecto ul genera una separación hacia la derecha. con margin:0 queda anulada */#menu ul {

margin: 0;padding: 0;

}

#menu li {/* Eliminamos las marcas que genera el li como pueden ser las redonadas o recuadros */list-style-type: none;/* En cada li, pintamos la linea inferior */border-bottom: 1px solid #6643ff;

}

#menu a {display: block;text-decoration: none;color: #6643ff;background: #f0edff;padding: 3px 6px 3px 6px;

}

#menu a:hover {background: #d6ccff;

}--></style>

</head>

<body><h1 style="font-size:1em">Menu vertical con estilos utilizando 'ul' y 'li'</h1><div id="menu">

<ul><li><a href="#">Cursos</a></li><li><a href="#">Temas</a></li><li><a href="#">Codigo</a></li><li><a href="#">Noticias</a></li><li><a href="#">Contactar</a></li>

</ul></div>

<br /><p style='clear:both;text-align:center'><a href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a></p></body></html>

y crear la carpeta web.doc

Documents