Proyecto Final Bdii y Prog

Ju

PROYECTO FINAL DE BASE DE DATOS Y PROGRAMACIÓN

2010

Tu primer Foro de discusión con JSP y

MySQL. Por:

L.I. Alejandro Israel Mercado López

E L C O N O C I M I E N T O E S U N I V E R S A L

L.I Alejandro Israel Mercado López Página 2

OBJETIVO:

El alumno, deberá realizar un proyecto de tipo web. El proyecto se basara en la creación de un blog de estudio, donde el usuario podrá crear sus propios temas a partir de una categoría ofrecida por el usuario administrativo. En cada tema todos los usuarios inscritos a la página podrán emitir sus opiniones o discutir de manera sana del tema en cuestión. Esta página será personalizada por usuario, esto quiere decir que aparecerán sus nombres y propios temas dentro del sistema.

FORMA DE TRABAJO:

El alumno deberá crear paso a paso, según las instrucciones del manual la aplicación. Se debe tomar en cuenta que las explicaciones se harán dentro del mismo manual o, dentro de la clase donde el docente refinara las cuestiones que el alumno valla tomando a lo largo de la creación de este.

TECNOLOGIAS A UTILIZAR:

Para la creación de este pequeño ejemplo de pagina web, utilizaremos varias tecnologías entre las cuales se encuentran: JSP( la combinación de java con html que nos permitirá crear paginas dinámicas), JS(java script el cual es utilizado para proporcionar a la página algo de efectos visuales), CSS ( cascade style sheet que permite darle formato a los componentes del html), MySQL (manejador de base de datos gratuito que nos permitirá guardar a nuestros usuarios, categorías, temas, comentarios y administradores. Dentro del lenguaje java utilizaremos JAVABEANS para conectar nuestra aplicación con nuestra base de datos y así poder hacer consultas y SERVLETS que nos permitirán insertar y modificar datos de nuestra base de datos con los elementos tomados de un formulario.


HERRAMIENTAS A UTILIZAR:

Es necesario como programadores poder tener una herramienta que nos facilite la creación de aplicaciones y que nos permita darle estructura a nuestro proyecto, por tal motivo utilizaremos un IDE que facilite la tarea de ordenar tantos archivos de programación y así poder ahorrar tiempo.

Existen múltiples IDE´s que podemos utilizar en el desarrollo de aplicaciones que tengan que ver con el lenguaje java tales como:

1. Eclipse. 2. Netbeans. 3. JDeveloper. 4. intelliJ IDEA.

En nuestro caso utilizaremos Netbeans, lo cual no quiere decir que sea el mejor, recuerden que solo es un elemento que nos facilitara la programación por lo cual, al ser la idea el ayudarnos en nuestro trabajo cualquiera de los anteriores resulta excelente.

Además algo de lo más importante es que utilizaremos XAMPP versión 3.2.4 para manipular nuestra base de datos mediante el phpmyadmin.

Explicación del código:

Esta y todas las demás explicaciones estarán ordenadas por color donde:

El color ___ representara todas la llamadas de archivos externos a nuestra página o archivo web. Estos pueden ser css o js dependiendo de la ocasión. El color ___ representara todos los request.getParameters que tengamos en nuestros arhivos. El color ___ representan las peticiones javabean que tengamos en nuestro archivo. El color ___ representa los componentes html que tengamos en nuestra página. El color ___ representa los botones de nuestra aplicación. El color ___ representa los métodos de consultas que hagamos en la paliación. El color ___ representa todas las consulta sql que tengamos en cada archivo


INDICE:

1. INSTALACION DE XAMPP…………………………………………………………………………………………….5 2. PREPARACION DE XAMPP PARA TRABAJAR CON InnoDB…………………………………………….8 3. CREACION DE LA BASE DE DATOS A UTILIZAR………………………………………………………………9 4. INSERCION DE INFORAMCION A LA BASE DE DATOS………………………………………………….12 5. INICIO DEL PROYECTO WEB……………………………………………………………………………………….22


INSTALACIÓN DE XAMPP: Después de descargar el instalador de XAMPP podemos proceder a instalarlo.

1.-‐INSTALACION DE XAMPP

1.1 Procura tener todos los exploradores de internet cerrados e incluso tu netbeans apagado.

1.2 Ahora da doble clic en el icono o instalador de exampp.

1.3 Te aparecerá el ayudante de instalación de xampp:

1.4 Da clic en next y selecciona el lugar donde quieres que se instalen las carpetas y archivos de xampp.

Nota: lo mejor es dejar la ruta predefinida:

1.5 Ahora da clic en next, y selecciona las opciones de “install apache” e ”install sql”. Tal como se muestra en la siguiente imagen.


1.6 Por ultimo da clic en install para que se empiece a instalar la aplicación.

Después de instalar XAMPP podrá encontrarlo en Inicio > Programas > XAMPP. Allí encontrará el Panel de Control de XAMPP, a través del cual podrá iniciar y parar el servidor e instalar y desinstalar servicios.

Ahora comprobaremos que XAMPP fue instalado correctamente: 1. Abra una ventana del navegador. 2. Escriba localhost o 127.0.0.1 3. Verá una página como la siguiente:

Fig 2. Probando XAMPP

4. Seleccione el idioma que prefiera y estará en la página de administración del XAMPP.


Fig 3. Administración XAMPP

Después de esto estamos listos para configurar MYSQL. Este proceso es sencillo y nos permitirá preparar la base de datos que utilizaremos.


HABILITAR INNODB:

InnoDB es una tecnología de almacenamiento de datos para MySQL que soporta transacciones del tipo ACID. Para habilitar InnoDB (por ejemplo en Xampp), se debe editar el archivo de configuración de MySQL my.cfg. En el caso particular de Xampp (muy utilizado hoy en día como distribución de servidor Web), el archivo a editar se encuentra en la siguiente ruta. C:\xampp\mysql\bin\my.cnf

1) Comentar la línea que dice ( si ya esta comentada déjala como esta): Skip-‐innodb 2) Des comentar las siguientes cuatro líneas, (si las líneas ya están des comentadas no

realices este paso): #innodb_data_home_dir = C:/apachefriends/xampp/mysql/ #innodb_data_file_path = ibdata1:10M:autoextend #innodb_log_group_home_dir = C:/apachefriends/xampp/mysql/ #innodb_log_arch_dir = C:/apachefriends/xampp/mysql/

3) Reiniciar el servicio de MySQL. Listo, Ahora será posible configurar las tablas de su base de datos para usar InnoDB. Por ejemplo, si dispone de phpmyadmin instalado en su servidor web, puede ir a alguna base de datos, y luego clic en alguna tabla en particular. Luego en el tab Operaciones si todo salió bien verán disponible la opción de InnoDB.


CREACIÓN DE LA BASE DE DATOS:

Creación del usuario y contraseña de nuestra base de datos:

Antes de empezar es importante crear un usuario y una contraseña para poder acceder a nuestra base de datos desde la aplicación, para lo cual realizaremos los siguientes pasos:

1.-‐Abre tu explorador de internet favorito y en el buscador coloca “localhost” y da enter.

2.-‐ De la ventana emergente selecciona phpmyadmin como se muestre en la siguiente ventana:

3.-‐ Ahora selecciona la pestaña privilegios

4.-‐Da clic en agregar un usuario

5.-‐Ahora colocaremos el nombre de usuario y la contraseña. Para efectos de que no se nos olvide nuestro usuario y contraseña usaremos como usuario: usuario y como password: usuario. Colócalos como se muestra en la siguiente imagen:

6.-‐ Ahora seleccionaremos los privilegios que el usuario, usuario va a tener, para manipular la base de datos y su contenido. Como nosotros somos los que vamos a programar es necesario tener un usuario tipo administrador, para eso selecciona las opciones que se muestran en la siguiente venta:


7.-‐ Por ultimo da clic en continuar para que nuestro usuario quede generado de manera correcta y con los privilegios necesarios para poder manipular nuestra base de datos.

CREACION DE LA BASE DE DATOS:

Antes de meter los códigos necesarios para crear nuestras tablas y llenarlas de información hay que crear una base de datos o esquema que nos permita contener toda esa programación que introduciremos más delante. Por lo tanto los pasos para crear una base de datos son:

1.-‐ Da clic en la página de inicio, como se muestra a continuación:

Da clic en este icono.

2.-‐ Ahora en la sección “acciones/MySQL localhost/ crear una base de datos”, en el campo vacio coloca: bd_blog y da clic en crear como se muestra en la siguiente imagen:

Con esto tenemos creada nuestra base de datos y por lo tanto estamos listos para introducir los códigos necesarios para modelarla. Este modelado esta creado según la planeación del alumno.


Para insertar los códigos primero seleccionamos la base de datos bd_blog. Después da clic en la pestaña sql para poder introducir los códigos.


INTRODUCCION DE CODIGO:

-- phpMyAdmin SQL Dump -- version 3.2.4 -- http://www.phpmyadmin.net -- -- Servidor: localhost -- Tiempo de generaciÃ³n: 06-05-2010 a las 15:09:41 -- VersiÃ³n del servidor: 5.1.41 -- VersiÃ³n de PHP: 5.3.1 SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8 */; -- -- Base de datos: `bd_blog` -- -- -------------------------------------------------------- -- -- Estructura de tabla para la tabla àdmin` -- CREATE TABLE IF NOT EXISTS àdmin` ( ìd_admin` int(11) NOT NULL AUTO_INCREMENT, `nombre` varchar(30) COLLATE utf8_unicode_ci DEFAULT NULL, `correo` varchar(50) COLLATE utf8_unicode_ci DEFAULT NULL, àpodo` varchar(30) COLLATE utf8_unicode_ci DEFAULT NULL, àvatar` blob, PRIMARY KEY (ìd_admin`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ; -- -- Volcar la base de datos para la tabla àdmin` -- -- -------------------------------------------------------- -- -- Estructura de tabla para la tabla àdmin_cat` -- CREATE TABLE IF NOT EXISTS àdmin_cat` ( ìd` int(11) NOT NULL AUTO_INCREMENT, ìd_admin` int(11) NOT NULL, ìd_cat` int(11) NOT NULL, PRIMARY KEY (ìd`), KEY ìd_admin` (ìd_admin`), KEY ìd_cat` (ìd_cat`)


) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ; -- -- Volcar la base de datos para la tabla àdmin_cat` -- -- -------------------------------------------------------- -- -- Estructura de tabla para la tabla `categoria` -- CREATE TABLE IF NOT EXISTS `categoria` ( ìd_cat` int(11) NOT NULL AUTO_INCREMENT, `nombre` varchar(30) COLLATE utf8_unicode_ci NOT NULL, `fecha` date NOT NULL, ìmagen` blob NOT NULL, PRIMARY KEY (ìd_cat`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=6 ; -- -- Volcar la base de datos para la tabla `categoria` -- INSERT INTO `categoria` (ìd_cat`, `nombre`, `fecha`, ìmagen`) VALUES (1, 'Deportes', '2010-03-10', ''), (2, 'Musica', '2010-03-10', ''), (3, 'teatro', '2010-03-11', ''), (4, 'jsp', '2010-03-11', ''), (5, 'Escuela', '2010-03-11', ''); -- -------------------------------------------------------- -- -- Estructura de tabla para la tabla `mensajes` -- CREATE TABLE IF NOT EXISTS `mensajes` ( ìd_mensaje` int(11) NOT NULL AUTO_INCREMENT, `fecha` date DEFAULT NULL, `mensaje` longblob, `hora` time DEFAULT NULL, PRIMARY KEY (ìd_mensaje`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=42 ; -- -- Volcar la base de datos para la tabla `mensajes` -- INSERT INTO `mensajes` (ìd_mensaje`, `fecha`, `mensaje`, `hora`) VALUES (1, '2010-03-26', 0x4573746520657320656c20756c74696d6f20636f6e63696572746f2064652073636f7270696f6e73206e6f207465206c6f20707565646573207065726465722e0d0a456c2037206465205365707469656d62726520646520657374652061c3b16f20656e206c6120636975646164206465206d657869636f, '01:00:00'),


(2, '2010-03-26', 0x556e6f206465206c6f73206d656a6f726573206a756761646f72657320686120726573756c7461646f20616469636f742e0d0a0d0a526f6e616c646f20636f6e20646f70696e6720706f73697469766f2e206a616a616a616a612e, '12:00:00'), (3, '2010-03-26', 0x70617261206d616e646172206120756e6120706167696e612078206465736465206a617661207365207574696c697a6120656c20636f6d616e646f20726573706f6e73652e73656e6452656469726563742822706167696e612061206c6c616d61722229, '09:50:00'), (4, '2010-03-26', 0x456e206a737020706f64656d6f73206372656172207661726961626c657320646520736573696f6e20636f6d6f20736520766520656e20656c207369677569656e746520656a656d706c6f2073657373696f6e2e73657441747472696275746528227573756172696f222c207573756172696f293b, '11:30:00'), (14, '2010-04-09', 0x67726163696120706f722074752061706f72746520616c657820, '09:09:00'), (15, '2010-04-09', 0x6772616369617320706f722074752061706f72746520706572206d656a6f722064616e6f7320756e20656a656d706c6f207061726120656e74656e646572206d61732067726163696173, '09:13:00'), (16, '2010-04-09', 0x6173646661736466617364666173646673616664, '10:29:00'), (17, '2010-04-09', 0x6772616369617320706f722074752061706f72746520, '11:03:00'), (18, '2010-04-09', 0x6275656e20, '15:05:00'), (19, '2010-04-09', 0x707275656261206d696c6e6f20736520717565, '15:17:00'), (20, '2010-04-09', 0x686f6c61, '15:24:00'), (21, '2010-04-09', 0x7373737373737373737373737373737373737373737373737373, '15:49:00'), (22, '2010-04-09', 0x65786c656e7465206170756e7465, '15:55:00'), (23, '2010-04-09', 0x616473666173646661736466, '15:57:00'), (24, '2010-04-09', 0x65786c65656e74652061706f7274652067726163696173, '15:59:00'), (25, '2010-04-09', 0x6275656e6f20636f6d6f2071756520796120626173746120646520656c6f67696173, '16:35:00'), (26, '2010-04-09', 0x736970, '16:37:00'), (27, '2010-04-09', 0x6573746520657320756e61206d616e65726561206465206861636572206c617320636f736173206d617320666163696c6573, '16:40:00'), (28, '2010-04-09', 0x5920646520717565207469706f20657320656c20636f6e63696572746f206163757374696f3f20636f6d6f20656c206465206c6973626f6120, '17:59:00'), (29, '2010-04-09', '', '18:01:00'), (30, '2010-04-09', 0x61736920657320636f6d6f207369656d7072652067616e6120656c207375706572696f72, '18:01:00'), (31, '2010-04-15', 0x4372656f20717565206c6f7320656c656d656e746f73206465206c656e6775616a65206a73702070726163746963616d656e746520736f6e206c6f73206d69736d6f20717565206c6f73206465206a61766120657374727563747572617320646520636f6e74726f6c2065746320616c676f20706f7220656c20657374696c6f, '12:38:00'), (32, '2010-04-15', 0x416c677569656e2070756564652064656369726d6520636f6d6f20637265617220756e20736572766c6574207920636f6d6f2066756e63696f6e61, '12:40:00'), (33, '2010-04-15', 0x61736b64666ac383c2b16173666a64c383c2b161736b6664, '12:45:00'), (34, '2010-04-15', 0x3c68313e686f6c613c2f68313e, '12:49:00'),


(35, '2010-04-15', 0x616c677569656e20707565646520706f6e6572206c61207461626c61747572612064652077696e64206f66206368616e6765, '13:33:00'), (36, '2010-04-15', 0x706173656e206c6120726f6c61, '13:57:00'), (37, '2010-04-15', 0x617175692065737461206c6120726f6c6120687474703a2f2f7777772e7a61702d6369667261732e636f6d2f63696672612f343837342f, '13:57:00'), (38, '2010-04-15', 0x6666666666666666666666666666660d0a666666666666666666666666660d0a666666666666666666666666666666660d0a66666666666666666666666666666666660d0a666666666666666666666666666666666666660d0a6666666666666666666666666666666666666666660d0a6666666666666666666666666666666666666666660d0a6666666666666666666666666666666666666666666666, '13:58:00'), (39, '2010-04-15', 0x666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666, '13:58:00'), (40, '2010-04-15', 0x4120656e67726173617220657361732065737472656d696461646573207665746572616e6f73, '17:06:00'), (41, '2010-04-19', 0x6e756c6c, '14:47:00'); -- -------------------------------------------------------- -- -- Estructura de tabla para la tabla `mensaje_tema` -- CREATE TABLE IF NOT EXISTS `mensaje_tema` ( ìd` int(11) NOT NULL AUTO_INCREMENT, ìd_tema` int(11) NOT NULL, ìd_mensaje` int(11) NOT NULL, PRIMARY KEY (ìd`), KEY ìd_tema` (ìd_tema`), KEY ìd_mensaje` (ìd_mensaje`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=34 ; -- -- Volcar la base de datos para la tabla `mensaje_tema` -- INSERT INTO `mensaje_tema` (ìd`, ìd_tema`, ìd_mensaje`) VALUES (1, 1, 1), (2, 2, 2),


(3, 3, 3), (4, 4, 4), (6, 3, 14), (7, 3, 15), (8, 3, 16), (9, 3, 17), (10, 3, 18), (11, 3, 19), (12, 4, 20), (13, 3, 21), (14, 4, 22), (15, 4, 23), (16, 4, 24), (17, 3, 25), (18, 4, 26), (19, 3, 27), (20, 1, 28), (21, 5, 29), (22, 5, 30), (23, 7, 31), (24, 6, 32), (25, 7, 33), (26, 1, 34), (27, 11, 35), (28, 11, 36), (29, 11, 37), (30, 11, 38), (31, 11, 39), (32, 12, 40), (33, 3, 41); -- -------------------------------------------------------- -- -- Estructura de tabla para la tabla `password` -- CREATE TABLE IF NOT EXISTS `password` ( ìd_password` int(11) NOT NULL AUTO_INCREMENT, `password` varchar(15) COLLATE utf8_unicode_ci DEFAULT NULL, PRIMARY KEY (ìd_password`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=3 ; -- -- Volcar la base de datos para la tabla `password` -- INSERT INTO `password` (ìd_password`, `password`) VALUES (1, 'superalex'), (2, 'punipero'); -- -------------------------------------------------------- -- -- Estructura de tabla para la tabla `tema` --


CREATE TABLE IF NOT EXISTS `tema` ( ìd_tema` int(11) NOT NULL AUTO_INCREMENT, `tema` varchar(50) COLLATE utf8_unicode_ci DEFAULT NULL, `fecha` date DEFAULT NULL, PRIMARY KEY (ìd_tema`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=13 ; -- -- Volcar la base de datos para la tabla `tema` -- INSERT INTO `tema` (ìd_tema`, `tema`, `fecha`) VALUES (1, 'Ultimo concierto de ', '2010-03-23'), (2, 'ronaldo doping', '2010-03-23'), (3, 'Tips del programa de', '2010-03-23'), (4, 'Como pasar parametro', '2010-03-22'), (5, 'Ganan las chivas ', '2010-03-22'), (6, 'como crear un servlet', '2010-04-15'), (7, 'Elementos de jsp', '2010-04-15'), (8, 'hhhh', '2010-04-15'), (9, 'como html y java m= jsp', '2010-04-15'), (10, 'ejercicios jsp', '2010-04-15'), (11, 'tablatura de wind of chage de scorpions', '2010-04-15'), (12, 'MaÃ±ana cbtc veteranos ', '2010-04-15'); -- -------------------------------------------------------- -- -- Estructura de tabla para la tabla `tema_cat` -- CREATE TABLE IF NOT EXISTS `tema_cat` ( ìd` int(11) NOT NULL AUTO_INCREMENT, ìd_cat` int(11) NOT NULL, ìd_tema` int(11) NOT NULL, PRIMARY KEY (ìd`), KEY ìd_cat` (ìd_cat`), KEY ìd_mensaje` (ìd_tema`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=13 ; -- -- Volcar la base de datos para la tabla `tema_cat` -- INSERT INTO `tema_cat` (ìd`, ìd_cat`, ìd_tema`) VALUES (1, 2, 1), (2, 1, 2), (3, 4, 3), (4, 4, 4), (5, 1, 5), (6, 4, 6), (7, 4, 7), (8, 4, 8), (9, 4, 9), (10, 4, 10), (11, 2, 11), (12, 1, 12); -- --------------------------------------------------------


-- -- Estructura de tabla para la tabla ùsuario` -- CREATE TABLE IF NOT EXISTS ùsuario` ( ìd_usuario` int(11) NOT NULL AUTO_INCREMENT, `nom` varchar(50) COLLATE utf8_unicode_ci DEFAULT NULL, `dir` varchar(60) COLLATE utf8_unicode_ci DEFAULT NULL, àpodo` varchar(20) COLLATE utf8_unicode_ci DEFAULT NULL, `correo` varchar(30) COLLATE utf8_unicode_ci DEFAULT NULL, `fecha` date DEFAULT NULL, àvatar` blob , PRIMARY KEY (ìd_usuario`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=3 ; -- -- Volcar la base de datos para la tabla ùsuario` -- INSERT INTO ùsuario` (ìd_usuario`, `nom`, `dir`, àpodo`, `correo`, `fecha`, àvatar`) VALUES (1, 'Alejandro Isreael', 'lkjlkj', 'alex', '[email protected]', '2010-03-09',NULL); INSERT INTO ùsuario` (ìd_usuario`, `nom`, `dir`, àpodo`, `correo`, `fecha`, àvatar`) VALUES (2, 'francisco romero javier punipero riamirez gonzalez', 'alksdjf', 'panchito', '[email protected]', '2010-03-09',NULL); -- -------------------------------------------------------- -- -- Estructura de tabla para la tabla ùsu_mensaje` -- CREATE TABLE IF NOT EXISTS ùsu_mensaje` ( ìd` int(11) NOT NULL AUTO_INCREMENT, ìd_usu` int(11) NOT NULL, ìd_mens` int(11) NOT NULL, PRIMARY KEY (ìd`), KEY ìd_usu` (ìd_usu`), KEY ìd_mens` (ìd_mens`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=31 ; -- -- Volcar la base de datos para la tabla ùsu_mensaje` -- INSERT INTO ùsu_mensaje` (ìd`, ìd_usu`, ìd_mens`) VALUES (1, 1, 1), (2, 2, 2), (3, 1, 3), (4, 1, 4), (5, 1, 14), (6, 1, 15), (7, 1, 18),


(8, 1, 19), (9, 1, 20), (10, 1, 21), (11, 1, 22), (12, 1, 23), (13, 1, 24), (14, 1, 25), (15, 1, 26), (16, 1, 27), (17, 1, 28), (18, 1, 29), (19, 1, 30), (20, 1, 31), (21, 1, 32), (22, 1, 33), (23, 1, 34), (24, 1, 35), (25, 1, 36), (26, 1, 37), (27, 1, 38), (28, 1, 39), (29, 1, 40), (30, 1, 41); -- -------------------------------------------------------- -- -- Estructura de tabla para la tabla ùsu_pass` -- CREATE TABLE IF NOT EXISTS ùsu_pass` ( ìd` int(11) NOT NULL AUTO_INCREMENT, ìd_usu` int(11) NOT NULL, ìd_pass` int(11) NOT NULL, PRIMARY KEY (ìd`), KEY ìd_usu` (ìd_usu`), KEY ìd_pass` (ìd_pass`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=3 ; -- -- Volcar la base de datos para la tabla ùsu_pass` -- INSERT INTO ùsu_pass` (ìd`, ìd_usu`, ìd_pass`) VALUES (1, 1, 1), (2, 2, 2); -- -------------------------------------------------------- -- -- Estructura de tabla para la tabla ùsu_tema` -- CREATE TABLE IF NOT EXISTS ùsu_tema` ( ìd` int(11) NOT NULL AUTO_INCREMENT, ìd_usu` int(11) DEFAULT NULL, ìd_tema` int(11) DEFAULT NULL, PRIMARY KEY (ìd`), KEY ìd_usu` (ìd_usu`), KEY ìd_tema` (ìd_tema`)


) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=8 ; -- -- Volcar la base de datos para la tabla ùsu_tema` -- INSERT INTO ùsu_tema` (ìd`, ìd_usu`, ìd_tema`) VALUES (1, 1, 6), (2, 1, 7), (3, 1, 8), (4, 1, 9), (5, 1, 10), (6, 1, 11), (7, 1, 12); -- -- Filtros para las tablas descargadas (dump) -- -- -- Filtros para la tabla àdmin_cat` -- ALTER TABLE àdmin_cat` ADD CONSTRAINT àdmin_cat_ibfk_1` FOREIGN KEY (ìd_admin`) REFERENCES àdmin` (ìd_admin`) ON DELETE CASCADE ON UPDATE CASCADE, ADD CONSTRAINT àdmin_cat_ibfk_2` FOREIGN KEY (ìd_cat`) REFERENCES `categoria` (ìd_cat`) ON DELETE CASCADE ON UPDATE CASCADE; -- -- Filtros para la tabla `mensaje_tema` -- ALTER TABLE `mensaje_tema` ADD CONSTRAINT `mensaje_tema_ibfk_1` FOREIGN KEY (ìd_tema`) REFERENCES `tema` (ìd_tema`) ON DELETE CASCADE ON UPDATE CASCADE, ADD CONSTRAINT `mensaje_tema_ibfk_2` FOREIGN KEY (ìd_mensaje`) REFERENCES `mensajes` (ìd_mensaje`) ON DELETE CASCADE ON UPDATE CASCADE; -- -- Filtros para la tabla `tema_cat` -- ALTER TABLE `tema_cat` ADD CONSTRAINT `tema_cat_ibfk_1` FOREIGN KEY (ìd_cat`) REFERENCES `categoria` (ìd_cat`) ON DELETE CASCADE ON UPDATE CASCADE, ADD CONSTRAINT `tema_cat_ibfk_2` FOREIGN KEY (ìd_tema`) REFERENCES `tema` (ìd_tema`) ON DELETE CASCADE ON UPDATE CASCADE; -- -- Filtros para la tabla ùsu_mensaje` -- ALTER TABLE ùsu_mensaje` ADD CONSTRAINT ùsu_mensaje_ibfk_1` FOREIGN KEY (ìd_usu`) REFERENCES ùsuario` (ìd_usuario`) ON DELETE CASCADE ON UPDATE CASCADE, ADD CONSTRAINT ùsu_mensaje_ibfk_2` FOREIGN KEY (ìd_mens`) REFERENCES `mensajes` (ìd_mensaje`) ON DELETE CASCADE ON UPDATE CASCADE; -- -- Filtros para la tabla ùsu_pass`


-- ALTER TABLE ùsu_pass` ADD CONSTRAINT ùsu_pass_ibfk_1` FOREIGN KEY (ìd_usu`) REFERENCES ùsuario` (ìd_usuario`), ADD CONSTRAINT ùsu_pass_ibfk_2` FOREIGN KEY (ìd_pass`) REFERENCES `password` (ìd_password`); -- -- Filtros para la tabla ùsu_tema` -- ALTER TABLE ùsu_tema` ADD CONSTRAINT ùsu_tema_ibfk_1` FOREIGN KEY (ìd_usu`) REFERENCES ùsuario` (ìd_usuario`) ON DELETE CASCADE ON UPDATE CASCADE, ADD CONSTRAINT ùsu_tema_ibfk_2` FOREIGN KEY (ìd_tema`) REFERENCES `tema` (ìd_tema`) ON DELETE CASCADE ON UPDATE CASCADE; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

NOTA: SI ERES UN EXPERTO DE BASE DE DATOS TE DARAS CUENTA QUE LA BD NO ESTA NORMALIZADA, ES IMPORTANTE ACLARAR QUE ES UN MODULO DE APRENDIZAJE, QUE LE PERMITE AL ALUMNO ADENTRARSE AL MUNDO DE LAS BASES DE DATOS UTILIZANDO LAS SENTENCIAS MAS USUALES.


CREACINO DEL PROYECTO WEB:

Ahora que ya tenemos nuestra base de datos creada según lo visto a lo largo del semestre en clase y en las prácticas, crearemos nuestro proyecto mediante los siguientes pasos:

1.-‐ Instala el Netbeans 6.1., este lo pueden descargar de la siguiente url: http://netbeans.org/downloads/6.1/index.html y selecciona la opción “all” que es la que contiene todos los elementos necesarios para poder crear la aplicación.

1.1.-‐ Antes de instalar el Netbeans es necesario descargar el modulo jdk de la siguiente pagina: http://www.nakido.com/74D5124A1AC8DCF17F26FA8E48833629F2F38232,

1.2.-‐ Instala jdk.

1.3.-‐ Una vez instalado jdk, instala el Netbeans y recuerda seleccionar los dos tipos de servidores que este contiene, que es el glassfish v2 ur2 y el apache tomcat 6.0.16.

2.-‐ Creación de un proyecto web:

Ya que instalaste el jdk y el Netbeans procederemos a ejecutarlo(recuerda que para ejecutarlo iremos a inicio/todos los programas/Netbeans/Netbeans 6.1.

2.1.-‐ Crea una nueva aplicación File/New Project

2.2.-‐ Te aparecerá la siguiente ventana, en la cual seleccionaras la categoría web y como tipo de proyecto web application. Tal como se muestra continuacion.


2.3.-‐ Da clic en next.

2.4.-‐ De la siguiente venta que te aparecerá, en el apartado Project Name, introducirás el nombre de tu aplicación, en este caso, introduce blog_tunombre, como ejemplo podemos ver en la ventana inferior que dice blog_alex donde sustituimos tunombre pro alex. Hazlo tú con tu propio nombre.

2.5 Ahora da clic en next.

2.6.-‐ en la siguiente ventana selecciona en el apartado Server la opción apache tomcat 6.0.16 y da clic en next. Este será el servidor donde se desplegaran los archivos de nuestra página web, o como común mente se dice: “es donde se hace el deploy para que la aplicación quede lista para usarse.


2.5.-‐ Da clic en next. Te aparecerá la siguiente venta donde seremos capaces de seleccionar un tipo de framework que es una metodología para la creación de aplicaciones web.

Por ahora como nuestro objetivo es crear una aplicación web simple dejaremos de lado los frameworks y daremos clic en finish.

2.6.-‐ Cuando tu aplicación quede creada veras la paleta de projects como se ve en la siguiente imagen. Si no tienes desplegada la carpeta web pages hazlo, pues ahí es donde tenemos nuestro archivo index.jsp. Dentro de este archivo empezaremos nuestra pequeña aplicación.


Observa la estructura del código, verás que es archivo simple de html.

2.7.-‐ vamos a crear la estructura de nuestra página web mediante frames. Para esto es necesario que borres del código anterior el segmento body esto es desde <body>, su contenido y </body>.

Una vez que lo borres coloca el siguiente código:

<frameset rows="30%,*" cols="*"> <frame name="frm_top" src="frm_top.jsp" scrolling="no" noresize bordercolor="#050000"index.jsp></frame> <frame name="frm_central" src="contra.jsp" scrolling="auto"> </frameset> <noframes></noframes> Bien, en el código <frameset rows="30%,*" cols="*"> hemos definido el área donde se crearán nuestros dos frames los cuales serán tipo horizontal o de tipo renglón, noten la palabra rows en la sentencia frame, este es la que hace que tome el efecto de renglón. De forma grafica la línea roja delimita la acción del frameset lo que está dentro de este los explicamos a continuación.


1) <frame name="frm_top" src="frm_top.jsp" scrolling="no" noresize bordercolor="#050000" index.jsp></frame>. Este es el primer frame que vemos se llama frm_top_src el cual mandará llamar la página frm_top.jsp. Scrolling=”no” hace que la página no tenga la barra lateral de desplazamiento que por lo regular tienen todas las ventanas. Noresize hace que el frame no cambie nunca de tamaño. 2) <frame name="frm_central" src="contra.jsp" scrolling="auto">. Este es el Segundo frame el cual se llama frm_central y manda llamar la página contra.jsp. Scrolling = auto hace que la página pueda tener barra lateral si el contenido de esta excede el área visible de la pagina.

2.8 Ahora al haber creado los frames pasados te pudiste haber dado cuenta que mandamos llamar a dos paginas.jsp: frm_top.jsp y la pagina contra.jsp, por tal motivo tendremos que crearlas para hacer que estos frames tenga contenido. 2.8.1.-‐ Da clic derecho en WebPages de tu proyecto en el menú emergente selecciona new y después en jsp.

2.8.2.-‐ Te aparecerá la siguiente ventana donde tendrás que poner el nombre de tu pagina jsp el cual será frm_top. Tal como se muestra a continuación.

Frm_top_src manda llamar a Frm_top.jsp

Frm_central manda llamar la página contra.jsp


2.8.3.-‐ ahora da clic en finish. 2.9 .-‐ El archivo que se genero lo modificaras tal y como se muestra a continuación. <%@page contentType="text/html" pageEncoding="UTF-‐8"%> <!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"> <link rel="stylesheet" href="css/css/main.css" type="text/css" /> <title>top</title> </head> <body> <div id="wrap"> <div id="logo"> <h1><a href="#">HACER TU PROPIO BLOG ES MUY FACIL</a></h1> <p>POR: ALEX</p> </div> <div id="explore"> <a href="#" id="explore-‐link">Explore</a> </div> <div id="menu"> <div id="menu-‐left"></div> <ul> <li><a class="current" href="index1.jsp" target="frm_central"><span>INICIO</span></a></li> <li><a href="#"><span>REGISTRATE</span></a></li> <li><a href="#"><span>CATEGORIA</span></a></li> <li><a href="#"><span>About Us</span></a></li> <li><a href="#"><span>Contact Us</span></a></li> </ul> <div id="menu-‐right"></div> </div> </body> </html> Nota: en el código anterior estamos exportando un css (style sheet cascade) que nos permitirá darle formato a nuestra página. Este css esta marcado con amarillo y letras rojas.


Esta línea de código dice que haremos una liga (link rel="stylesheet") o mandaremos llamar a una hoja de estilo. El código href="css/css/main.css", hace referencia a un archivo llamado main.css que está en la ruta css/css de nuestro directorio raíz, el cual lo tendremos que generar nosotros de la siguiente manera. 2.10.-‐ Ve a la carpeta donde se guardan los proyectos de Netbeans, por lo regular está en mis documentos. La ruta quedaría de la siguiente manera “C:\Documents and Settings\tu usuario\ Mis documentos\ NetBeansProjects\ blog_tunombre\web o si tienes un sistema operativo como Windows vista o 7 solo ve a tus documentos y sigue la siguiente ruta: NetBeansProjects\ blog_tunombre\web. 2.10.1.-‐ Ahora crea la carpeta css, accede a ella y crea otra carpeta llamada css. Una vez más accede a esta. 2.11.-‐Des pues de que creaste tus carpetas ve al Netbeans y en el área de projects ve que aparece ya la capeta css. Despliega la carpeta css dando clic en el + para poder ver la otra carpeta que se creo con el mismo nombre. 2.10. En esta última carpeta css da clic derecho y selecciona new y después da clic en other como se muestra en la siguiente imagen. Nota como los pasos están marcados con rojo.

2.11.-‐ Selecciona la categoría web y en el apartado file types selecciona Cascading Style Sheet y da clic en next.


2.12.-‐ En el apartado css file name coloca main como se muestra en la imagen siguiente. Da clic en finish cuando hayas terminado.

2.13.-‐ Una vez cargado el archivo css veras en el area de código lo siguiente.


2.14.-‐ Borra todo el código y sustitúyelo por el siguiente: *{margin:0;padding:0;}:focus,:active {outline:0}ul,ol{list-‐style:none}h1,h2,h3,h4,h5,h6,pre,code {font-‐size:1em;}a img{border:0} body { font: .7em "Trebuchet MS", Tahoma, Arial, Sans-‐Serif; background: #eee url(../images/bg.gif) repeat-‐x; color: #777; } a { text-‐decoration: none; color: #6796CE; } a:hover { color: #45134A; } p { margin: 0 0 15px; line-‐height: 1.64em; } #wrap { margin: 20px auto 0; width: 979px; } .clear { clear: both; } #logo { float: left; margin: 35px 0 0 20px; height: 89px; } #logo a:hover { border-‐bottom: 1px solid #222; } #logo p { padding: 2px 0 0 4px; font-‐size: .9em; color: #555; } #logo h1 { font-‐size: 2.6em; margin: 0; text-‐shadow: 1px 1px 1px #000; } #logo h1 a { color: #fff; } #explore { float: right; margin: 130px 5px 0 0; } #explore-‐link { float: left; height: 25px; padding: 9px 0 0 20px; width: 106px; color: #808080; background: url(../images/explore.gif) no-‐repeat; } #explore-‐link:hover { color: #fff; } #menu { clear: left; float: left; height: 43px; margin: 0 0 0 5px; background: url(../images/menu.gif) repeat-‐x; } #menu-‐left { background: url(../images/menu-‐corners.gif) no-‐repeat left top; float: left; width: 9px; height: 43px; } #menu-‐right { background: url(../images/menu-‐corners.gif) no-‐repeat left bottom; float: right; width: 9px; height: 43px; } #menu ul { float: left; padding: 5px 0; } #menu li { display: inline; text-‐transform: uppercase; } #menu li a { float: left; margin: 0 5px 0 0; padding: 12px 0 15px 20px; color: #777; position: relative; z-‐index: 2; } #menu li a span { padding: 12px 20px 15px 0; } #menu li a:hover, #menu li a:focus { color: #1295E4; } #menu li a.current { background: url(../images/tableft.gif) no-‐repeat; color: #000; font-‐weight: bold; } #menu li a.current span { background: url(../images/tabright.gif) no-‐repeat right top; } #content-‐top { clear: both; height: 26px; background: url(../images/content-‐top.gif) no-‐repeat; position: relative; margin: 0 !important; margin: -‐14px 0 0; } #content-‐middle { padding: 0 25px 25px; background: url(../images/content-‐middle.gif) repeat-‐y; } #content-‐bottom { clear: both; padding: 6px 0 7px; background: url(../images/content-‐bottom.gif) no-‐repeat left bottom; } #pitch { text-‐shadow: 1px 1px 1px #3F6AA2; background: url(../images/pitch.jpg) no-‐repeat; height: 159px; padding: 50px 40px 0 30px; position: relative; margin: 0 -‐7px 30px; font-‐size: 1.3em; font-‐style: italic; color: #fff; }


#pitch h1 { float: left; line-‐height: 1.3em; font-‐style: normal; font-‐size: 1.7em; width: 260px; padding: 0 40px 0 0; height: 150px; font-‐weight: normal; text-‐transform: uppercase; } #pitch h1 span { font-‐size: 1.2em; text-‐transform: lowercase; font-‐size: .6em; font-‐style: italic; color: #F4EDC1; } h3 { font-‐size: 1.3em; font: bold 1.3em Arial; color: #222; margin: 0 0 10px; } .column { float: left; width: 200px; margin: 0 80px 0 0; line-‐height: 2.2em; } .column.last { margin-‐right: 0; } .column img { padding: 10px; border: 1px solid #ddd; margin: 0 0 5px; } .more a { background: url(../images/bullet.gif) no-‐repeat 0 7px; padding: 0 0 0 8px; color: #672A6D; font-‐weight: bold; font-‐size: .9em; } #footer { padding: 20px; color: #999; } #links { float: right; } #links a { margin: 0 0 0 15px; } NOTA: ESTE CSS ES UTILIZADO PARA DAR FORMA A NUESTRO MENU QUE ESTARA DESPLEGADO EN LA PAGINA frm_jtop.jsp. Como nuestro objetivo es solo el jsp y el mysql no explicaremos el funcionamiento del código css. 2.15.-‐ En el edmodo esta un archivo tipo Zip, llamado imágenes.zip descárgalo y descomprime la carpeta que contiene el Zip en la carpeta \web\css, de tu proyecto. 2.16.-‐ Ahora vamos a crear la página contral.jsp de la siguiente manera: 2.16.1 Crea una archivo en tu proyecto, dando clic derecho a Web Pages, selecciona el apartado new y del menú emergente selecciona jsp, como se muestra en la siguiente ventana.

2.16.2 Te aparecerá la siguiente ventana, donde colocaremos como nombre de nuestra: contra. Da clic en finish para que esta se cree. Guíate en la siguiente imagen:


2.16.3 Sustituye tu código por el siguiente: <%@ page contentType="text/html; charset=iso-‐8859-‐1" language="java" import="java.sql.*" errorPage="" %> <!DOCTYPE HTML PUBLIC "-‐//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Documento sin título</title> <meta http-‐equiv="Content-‐Type" content="text/html; charset=iso-‐8859-‐1"> <link rel="stylesheet" href="css/contra.css" type="text/css"/> <style type="text/css"> <!-‐-‐ body { background-‐color: #000000; } -‐-‐> </style> <% String cat = request.getParameter("categoria"); String stat= request.getParameter("stat"); String usuario; String contra; %> <jsp:useBean id="conex" class="beans.conexion" scope="session"/> </head> <body>


<form name="contra" method="post" action="session.jsp"> <div class="contenedor"> <div id="cabecera" > </div> <div class="principal" > <div class="lt"></div> <div class="lbox"> <h2>Introduce tu Usuario y <span class="yellow">Password</span></h2> <div class="thumb"> <img src="img/llaves_mail.jpg" alt="llaves" width="153" height="146"/></div> <p>Para poder ver el contenido de cualquiera de las categorias de este blog

debes registrarte, si ya estas registrado introduce tu usuario y contraseña.

<p>Usuario <input type="text" name="usu_text" id="usu"></p> <p>Password <input type="password" name="pass_text" id="pass"></p> </p> <input type="submit" name="Submit" value="Enviar" class="button"> <div align="center"></div> <p>Te sugerimos que si nunca haz entrado a esta pagina te <a href="#">registres</a></p> <p> </p> <p> </p> </div> </div> </div> <input name="cate" type="hidden" id="cate" value="<%=cat%>"> </form> </body> </html>


2.16.4 Explicación del código: Esta y todas las demás explicaciones estarán ordenadas por color donde: El código color ___ está importando los funcionamientos del archivo contra.css que permitirá darle formato o forma a nuestra página contra.jsp. Donde: <link rel="stylesheet"

El atributo REL se usa para definir la relación entre el archivo enlazado y el documento HTML. REL=StyleSheet especifica un estilo persistente o preferido mientras que REL="Alternate StyleSheet" define un estilo alterno. Un estilo persistente es aquel que siempre se aplica si están activas las hojas de estilo.

href="css/contra.css"

Este es la ruta donde se encuentra el archive css. En este caso tenemos que contra.css está dentro de la carpeta css que a su vez esta en la carpeta web de tu proyecto.

type="text/css"/>

Con esta línea de código indicamos que el tipo de archivo importado es CSS.

<% String cat = request.getParameter("categoria"); String stat= request.getParameter("stat"); Esta función nos permite obtener el valor de un componente, donde el componente debe tener un id que nos permitirá hacer referencia a el y poder obtener su valor. <form name="contra" method="post" action="session.jsp"> En la declaracion del form podemos darnos cuanta de tres atributos: Name: permite darle nombre a nuestro formulario(form), en este caso se llamara contra. Method: este nos permite utilizar dos metodos el post y el get. En nuestro caso el metodo post los que hace es encapsular el contenido del formulario, esto es, el id y el valor de cualquier componente que hayamos incorporado a nuestra pagina lo agrupa para poder ser enviado a otra pagina o archivo de programacion. Action: Este atributo nos dice a que archivo, pagina o clase mandaremos lo que el post encapsulo. Una vez que se mande llamar la pagina nueva dentro de esta podremos requerir los datos que el metodo post envio con el request.getParameter(„nombre del componente“). <input type="text" name="usu_text" id="usu"> <input type="password" name="pass_text" id="pass">


En estas líneas de código simples podemos ver que el imput tiene varios atributos: Type: es el tipo de componente que se va a presentar ejemplo (text,radio,password). Name: Este es el nombre del componente Id: Con el id podemos identificar este componente en otra página con un request.getParameter(). En general es el atributo que lo identifica. <input type="submit" name="Submit" value="Enviar" class="button"> Component tipo imput: Type: El atributo es de tipo submit lo que nos permite activar el method post de nuestro form y mandar todo el contenido de nuestro formulario. Name: Este atributo es para darle nombre al componente. Value: el atributo value va a ser el nombre que va a parecer en el botón en nuestra pagina Class: la clase es tipo botón para que tenga funcionalidad de botón NOTA: Si tedas cuenta con la explicación anterior sabemos que el contenido de este formulario va a ser enviado a la página sessión.js. En la cual crearemos las variables de sesión para que después de 20, 10 , 15 o 30 minutos de inactividad estas se borren y el usuario no pueda ver el contenido de la página por lo cual el siguiente paso es crear esta página.


2.16.5 Creación de la página session.jsp 1.-‐ En el Netbeans ve a la paleta projects y en tu proyecto da clic derecho en web pages, del menú contextual que salga selecciona la opción new y después da clic en jsp. Guíate en la siguiente imagen.

2.-‐ De la ventana emergente en el apartado JSP File Name, colocaras la palabra session y vas a dar clic en finalizar. Tal y como se muestra en la siguiente imagen.

3.-‐ Una vez que se haya cargado la página te aparecerá en el área de codificación y en este momento es cuando tendrás que modificarla y dejarla tal como se muestra a continuación. <%-‐-‐ Document : session Created on : 25/03/2010, 12:15:59 PM Author : alexgrajo -‐-‐%> <%@page contentType="text/html" pageEncoding="UTF-‐8"%> <!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> <%


int band=0; String usuario = request.getParameter("usu_text"); String pass= request.getParameter("pass_text"); String cat = request.getParameter("categoria"); String consulta ="SELECT count(*) FROM ùsuario` usuario INNER JOIN ùsu_pass` usu_pass ON usuario.ìd_usuario` = usu_pass.ìd_usu` INNER JOIN `password` password ON usu_pass.ìd_pass` = password.ìd_password` WHERE usuario.correo = '"+usuario+"' AND password.password = '"+pass+"' AND usuario.id_usuario = usu_pass.id_usu AND password.id_password = id_pass "; String consulta2 ="SELECT usuario.`correo` AS usuario_correo, password.`password` AS password_password FROM ùsuario` usuario INNER JOIN ùsu_pass` usu_pass ON usuario.ìd_usuario` = usu_pass.ìd_usu` INNER JOIN `password` password ON usu_pass.ìd_pass` = password.ìd_password` WHERE usuario.correo = "+usuario+" AND password.password = "+pass+" AND usuario.id_usuario = usu_pass.id_usu AND password.id_password = id_pass "; %> <jsp:useBean id="conex" class="beans.conexion" scope="page"/> </head> <body> <jsp:setProperty name="conex" property="consulta" value= "<%=consulta%>"/> <% while (conex.getResultado().next()) { String existe = conex.getResultado().getString("count(*)"); if (existe.compareTo("0") == 0) { band++; } } if (band == 0) { String status = "1"; session.setAttribute("usuario", usuario); session.setAttribute("cat", cat); session.setAttribute("status", status); response.sendRedirect("index1.jsp"); } else { response.sendRedirect("error"); } %> </body> </html>


2.16.6 Explicación del código:

1 String usuario = request.getParameter("usu_text"); String pass= request.getParameter("pass_text"); String cat = request.getParameter("categoria"); En estas tres líneas de código, estamos pidiendo los valores de los componentes usu_text que contiene el usuario que quiere accede al sistema, pass_text que contiene el password del usuario y categoría que contiene el tipo de categoría a la cual accede el usuario. Este último no es utilizado.

2 String consulta ="SELECT count(*) FROM ùsuario` usuario INNER JOIN ùsu_pass` usu_pass ON usuario.ìd_usuario` = usu_pass.ìd_usu` INNER JOIN `password` password ON usu_pass.ìd_pass` = password.ìd_password` WHERE usuario.correo = '"+usuario+"' AND password.password = '"+pass+"' AND usuario.id_usuario = usu_pass.id_usu AND password.id_password = id_pass "; E Esta es una consulta que será guardada en la variable o consulta la cual será utilizada posteriormente. Esta consulta retorna la suma de los registros que cumplan con los parámetros de la clausula where, esto es: Si existe un usuario con el correo y el password correctos esta consulta nos deberá retornar un uno y de esta manera podremos saber que el usuario existe y que tiene la contraseña correcta y que por lo tanto puede acceder a nuestra aplicación web.

3 <jsp:useBean id="conex" class="beans.conexion" scope="page"/> (Con este código hacemos la conexión con el Bean) <jsp:setProperty name="conex" property="consulta" value= "<%=consulta%>"/> (una vez creada la conexión con el Bean le mandamos la consulta. Dentro de JSP existen diferentes acciones una de ellas es la que hace uso de los Beans y se Identifica con el nombre jsp:useBean y se describe como a continuación se hace: <jsp:useBean id=?nombre? class=?paquete.clase? /> Esto permite obtener una referencia a un Bean (componente Java), las instancias de los componentes pueden ser compartidas. Las clases de los Beans deben estar en el CLASSPATH del servidor. Inicialización del bean: <jsp:useBean ... > Cuerpo </jsp:useBean> Cuerpo: código JSP ejecutable la primera vez que se instancia el Bean. id: nombre de la variable que contendrá la referencia al Bean. class: indica la clase del Bean scope (opcional): indica el contexto en el que el bean estará disponible:

page (por default): disponible sólo para la página. request: disponible sólo para la petición. session: disponible durante la sesión.

application: para las páginas que compartan ServletContext value: este es un valor que mandamos en caso de que nuestro javabean tenga que recibir parámetros para funcionar. Como en nuestro caso, utilizaremos el javabean para realizar la consulta que se explico anteriormente

4 while (conex.getResultado().next()) { String existe = conex.getResultado().getString("count(*)"); if (existe.compareTo("0") == 0) { band++; En esta línea de código hacemos referencia a conex que es el nombre de nuestro javabean ve al punto 3 de esta explicación.


Cuando el Bean está en acción este ejecuta la consulta que le mandamos y por lo tanto contiene los resultados que podremos obtener mediante la función getResultado().next(). En la siguiente línea de código declaremos la variable existe como tipo String, la cual contendrá el valor que haya obtenido nuestro vean en el campo coutn. Connex.getResultado es una función tipo resulset que nos retorna mediante su métodos internos una especie de matriz con la información que se obtiene de la consulta. Connex.getResultado.getString(campo) es una función que nos permite obtener el un valor del resulset mediante la función getString. Lo que lleva entre paréntesis el getString es el campo que se pide en la consulta o los valores que deseamos que nos retorne en caso de que esta sea exitosa. Ahora en las siguientes líneas de código pondremos una bandera que nos diga si realmente existió un usuario en caso de que no exista la bandera aumentara su valor con el operador unario ++.

5 if (band == 0) { String status = "1"; session.setAttribute("usuario", usuario); session.setAttribute("cat", cat); session.setAttribute("status", status); response.sendRedirect("index1.jsp"); } else { response.sendRedirect("error"); } Si existió realmente un valor band quedara en cero por lo cual preguntamos si band es igual a cero, crearemos las variables de sesión necesarias para nuestro proyecto. Si todo salió correctamente mediante la línea response.sendRedirect nos permitirá re direccionar la aplicación a la página index1.jsp. Pero si todo salió mal nos re direccionará a la pagina error que en este caso la tendrás que hacer por ti mismo siguiendo los paso que hemos hecho anteriormente. El diseño es libre y al ser un error solo es demostrativo. Para generar una sesión se utiliza la función session.setAttribute(nombre de sesión, variable de sesión). La duración de nuestra variable de sesión se manipulara desde nuestro web.xml de nuestro proyecto, tal como se muestra en la siguiente imagen.


2.16.7 Creación de un JavaBean En la explicación pasada estábamos hablando de una JavaBean, el cual es tiempo de crearlo y explicarlo. 1.-‐ Primero ve al Netbeans y da clic en el nombre de tu proyecto en la pestaña projects. 2.-‐ Después localiza Source Packages y despliégalo, nota que tendrás un paquete en gris que dirá default package. 3.-‐ Ahora da clic derecho en Source Packages y del menú emergente selecciona new. 4.-‐ Ahora da clic en Java Package. Nota: guíate con la siguiente imagen.

5.-‐ Te aparecerá una ventana como la siguiente:

6.-‐ En el campo package Name pondrás el nombre de beans. 7.-‐ Da clic en finish y veras como se ha creado un nuevo paquete llamado beans. 8.-‐ Después de esto da clic derecho en el nuevo paquete llamado beans. 9.-‐ Del menú emergente selecciona la opción new. 10.-‐ Y selecciona la opción java class. Nota: guíate con la imagen siguiente:


11.-‐ Te aparecerá una ventana como la siguiente, donde colocara en el apartado Calss Name el nombre conexión, tal como se muestra en la siguiente figura:

12.-‐ Da clic en finish para que se crea la clase la cual, una vez terminada aparecerá en tu área de codificación de Netbeans. 13.-‐ A este archivo lo modificaremos de la siguiente manera. Modifica tu archivo tal cual esta el siguiente código para que no tengas problemas: /* * To change this template, choose Tools | Templates * and open the template in the editor. */ package beans; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.io.Serializable; import java.sql.Statement; import java.util.logging.Level; import java.util.logging.Logger; /** *


* @author alexgrajo */

public class conexion implements Serializable{ private String bd="bd_blog"; private static String login = "usuario"; private static String password = "usuario"; private static String url = "jdbc:mysql://localhost/"; private ResultSet a, b,d, e; private Connection conn=null; private String consulta,c; public conexion(){ try { Class.forName("com.mysql.jdbc.Driver").newInstance(); conn = DriverManager.getConnection(url + bd, login, password); } catch (InstantiationException ex) { Logger.getLogger(conexion.class.getName()).log(Level.SEVERE, null, ex); } catch (IllegalAccessException ex) { Logger.getLogger(conexion.class.getName()).log(Level.SEVERE, null, ex); } catch (SQLException ex) { Logger.getLogger(conexion.class.getName()).log(Level.SEVERE, null, ex); } catch (ClassNotFoundException ex) { Logger.getLogger(conexion.class.getName()).log(Level.SEVERE, null, ex); } }

public ResultSet getResultado(){ return a; } public ResultSet getResultado2(){ return b; } public ResultSet getResultado3(){ return d; } public ResultSet getResultado4(){ return e; }

public void setConsulta(String sql){ consulta = sql; iniciar_conexion(); } public void setConsulta2(String sql){ consulta = sql; iniciar_conexion3(); } public void setConsulta3(String sql){ consulta = sql; iniciar_conexion4(); } public void setConsulta4(String sql){ consulta = sql; iniciar_conexion5(); }

1

2

3

6


public void setUpdate(String sql){ consulta = sql; iniciar_conexion2(); }

public void iniciar_conexion() { if (conn != null) { try { Statement stm = conn.createStatement(); a = stm.executeQuery(consulta); } catch (SQLException ex) { Logger.getLogger(conexion.class.getName()).log(Level.SEVERE, null, ex); } } } public void iniciar_conexion2() { if (conn != null) { try { Statement stm = conn.createStatement(); stm.executeUpdate(consulta); } catch (SQLException ex) { Logger.getLogger(conexion.class.getName()).log(Level.SEVERE, null, ex); } } } public void iniciar_conexion3() { if (conn != null) { try { Statement stm = conn.createStatement(); b = stm.executeQuery(consulta); } catch (SQLException ex) { Logger.getLogger(conexion.class.getName()).log(Level.SEVERE, null, ex); } } } public void iniciar_conexion4() { if (conn != null) { try { Statement stm = conn.createStatement(); d = stm.executeQuery(consulta); } catch (SQLException ex) { Logger.getLogger(conexion.class.getName()).log(Level.SEVERE, null, ex); } }

4


} public void iniciar_conexion5() { if (conn != null) { try { Statement stm = conn.createStatement(); //stm.execute("SET NAMES 'utf8'"); //stm.execute("SET CHARACTER SET 'utf8'"); e = stm.executeQuery(consulta); } catch (SQLException ex) { Logger.getLogger(conexion.class.getName()).log(Level.SEVERE, null, ex); } } }

public void setMatar(String c){ this.c=c; cerrar_conexion(); }

public void cerrar_conexion(){ try { conn.close(); } catch (SQLException ex) { Logger.getLogger(conexion.class.getName()).log(Level.SEVERE, null, ex); } }

} Si te puedes dar cuenta el código que introdujiste a tu clase conexión está dividido en 6 partes según su ejecución. Con el uno iniciamos la ejecución del programa y terminamos en el 6. Esto suena lógico pero para aquellos que no sepan ni que es lógico pues sirve. Empecemos a describir cómo funciona este JavaBean; Aquí tenemos la declaración de nuestras variables como en todo programa.

private String bd="bd_blog"; -‐En este caso bd contiene el nombre de nuestra base de datos que creamos al principio de este manual private static String login = "usuario"; -‐La variable login contiene el nombre del usuario que creamos al inicio con los permisos de administrador private static String password = "usuario"; -‐La variable password contiene la contraseña del usuario creado en la base de datos. private static String url = "jdbc:mysql://localhost/"; -‐Esta es la url donde se encuentra alojada nuestra base de datos, por lo regular esta compuesta por el host, Puerto y nombre de la base de datos. En este caso solo colocamos localhost indicando que nuestra base de datos esta alojada en nuestra maquina. private ResultSet a, b,d, e; -‐Declaramos tres variables del tipo resulset que mas delante explicaremos. private Connection conn=null;

5

1


-‐Variable tipo connection que nos permite guardar una conexión en caso de que se haya hecho de manera correcta. private String consulta,c; En esta simple variable guardaremos la consulta que se manda desde nuestras páginas que mande llamar nuestro JavaBean.

Una vez que hemos declarado nuestras variables podemos crear nuestra conexión de la siguiente manera public conexion(){ -‐Esta es la clase con la cual iniciamos nuestra conexion try { -‐Al tratar de conectarse a una base de datos es muy probable que puedan surgir errores de instanciamiento, de acceso ilegal encase de que nuestras credenciales estén incorrectas, errores del mismo lenguaje sql (sintaxis de sql) y simplemente que la clase conecction no exista. Class.forName("com.mysql.jdbc.Driver").newInstance();

Cargar el controlador JDBC

Para trabajar con el API JDBC se tiene que importar el paquete java.sql, tal y como se indica a continuación:

import java.sql.*;

En este paquete se definen los objetos que proporcionan toda la funcionalidad que se requiere para el acceso a bases de datos. El siguiente paso después de importar el paquete java.sql consiste en cargar el controlador JDBC, es decir un objeto Driver especifico para una base de datos que define cómo se ejecutan las instrucciones para esa base de datos en particular. Hay varias formas de hacerlo, pero la más sencilla es utilizar el método forName() de la clase Class:

Class.forName("Controlador JDBC"); para el caso particular del controlador para MySQL, Connector/J, se tiene lo siguiente: Class.forName("com.mysql.jdbc.Driver");

conn = DriverManager.getConnection(url + bd, login, password); -‐ Ya que está cargado el controlador jdbc procedemos a hacer la conexión a la base de datos. Recuerda

que declaramos una variable conn tipo conecction, pues este es el momento de utilizarla para guardar esta conexión. Establecer la conexión Una vez registrado el controlador con el DriverManager, se debe especificar la fuente de datos a la que se desea acceder. En JDBC, una fuente de datos se especifica por medio de un URL con el prefijo de protocolo jdbc: , la sintaxis y la estructura del protocolo es la siguiente: jdbc:{subprotocolo}:{subnombre} El {subprotocolo} expresa el tipo de controlador, normalmente es el nombre del sistema de base de datos, como db2, oracle o mysql. El contenido y la sintaxis de {subnombre} dependen del {subprotocolo}, pero en general indican el nombre y la ubicación de la fuente de datos.

2


Por ejemplo, para acceder a una base de datos denominada productos en un sistema Oracle local, el URL seria de la siguiente manera:

-‐ -‐ String url = "jdbc:oracle:productos"; -‐

Si la misma base de datos estuviera en un sistema DB2 en un servidor llamado dbserver.ibm.com, el URL sería el siguiente:

-‐ String url = "jdbc:db2:dbserver.ibm.com/productos"; El formato general para conectarse a MySQL es: jdbc:mysql://[servidor][:puerto]/[base_de_datos][?param1=valor1][param2=valor2]... Para la base de datos bd_blog creada anteriormente, el URL sería :

-‐ String url = "jdbc:mysql://localhost/bd_blog"; Una vez que se ha determinado el URL, se puede establecer una conexión a una base de datos. El objeto Connection es el principal objeto utilizado para proporcionar un vínculo entre las bases de datos y una aplicación en Java. Connection proporciona métodos para manejar el procesamiento de transacciones, para crear objetos y ejecutar instrucciones SQL, y para crear objetos para la ejecución de procedimientos almacenados. Se puede emplear tanto el objeto Driver como el objeto DriverManager para crear un objeto Connection. Se utiliza el método connect() para el objeto Driver, y el método getConnection() para el objeto DriverManager. El objeto Connection proporciona una conexión estática a la base de datos. Esto significa que hasta que se llame en forma explícita a su método close() para cerrar la conexión o se destruya el objeto Connection, la conexión a la base de datos permanecerá activa. La manera más usual de establecer una conexión a una base de datos es invocando el método getConnection() de la clase DriverManager. A menudo, las bases de datos están protegidas con nombres de usuario (login) y contraseñas (password) para restringir el acceso a las mismas. El método getConnection() permite que el nombre de usuario y la contraseña se pasen también como parámetros. Por lo tanto podremos tener la siguiente línea de código resultante para poder establecer la conexión con nuestra base de datos: conn = DriverManager.getConnection(url + bd, login, password);

} catch (InstantiationException ex) { Logger.getLogger(conexion.class.getName()).log(Level.SEVERE, null, ex); } catch (IllegalAccessException ex) { Logger.getLogger(conexion.class.getName()).log(Level.SEVERE, null, ex); } catch (SQLException ex) { Logger.getLogger(conexion.class.getName()).log(Level.SEVERE, null, ex); } catch (ClassNotFoundException ex) { Logger.getLogger(conexion.class.getName()).log(Level.SEVERE, null, ex); } }

-‐Estas líneas de código solo son para poder captar los errores que se tengan en la obtención del jdbc y la conexión a la base de datos.


En estas líneas de código es donde llega la consulta que mandamos desde nuestra página jsp (la cual es <jsp:setProperty name="conex" property="consulta" value= "<%=consulta%>"/>) recuerda que consulta es una variable que contiene la sentencia sql que queremos que sea ejecutada en el JavaBean (para recordar ve a la creación de la página session.jsp). Para ser específicos e ir al grano, la variable consulta va a ser mandada al método consulta de finido mediante la propiedad property=”consulta”. Esta variable llega al JavaBean al método setConsulta en su parámetro sql1 como se ve acontinuacion. public void setConsulta(String sql1){ consulta = sql; iniciar_conexion(); } A la variable consulta del método setconsulta declarada anteriormente le igualamos lo que tenga el parámetro sql1 y mandamos llamar al método iniciar_conexion. Si nosotros quisiéramos hacer diferentes consultas al mismo tiempo en JavaBean, lo que tendríamos que hacer es lo siguiente: Declarar el método setConsulta2, setConsulta3 y setConsulta4, donde el funcionamiento es el mismo que el explicado anteriormente. public void setConsulta2(String sql){ consulta = sql; iniciar_conexion3(); } public void setConsulta3(String sql){ consulta = sql; iniciar_conexion4(); } public void setConsulta4(String sql){ consulta = sql; iniciar_conexion5(); }

En el método pasado obteníamos la consulta que había sido enviada de nuestra pagina jsp, esta consulta es guardada en el parámetro sql, después internamente en el método setConsulta a la variable consulta le igualamos el valor del parametro sql. Por último mandamos llamar el método iniciar_conexion que es el que se va a explicar a continuación.

public void iniciar_conexion() { -‐Este es el inicio del método iniciar conexión, este método no recibe ningún parámetro. if (conn != null) { -‐Si la conexión que se hizo anteriormente es diferente a null entramos a la condición. try {

3

4


Statement stm = conn.createStatement();

Creación de una Sentencia

Como se mencionó en la sección anterior, el objeto Connection permite establecer una conexión a una base de datos. Para ejecutar instrucciones SQL y procesar los resultados de las mismas, se debe hacer uso de un objeto Statement. Los objetos Statement envían comandos SQL a la base de datos, y pueden ser de cualquiera de los tipos siguientes:

1. executeQuery(String sql): SELECT. Devuelveun objeto ResultSet. 2. executeUpdate(String sql) DML o DDL.Devuelve un int. 3. execute(String): cualquier sentencia SQL.Devuelve un valor boolean. O dicho de otra manera pueden ser de:

• Un comando de definición de datos como CREATE TABLE o CREATE INDEX. • Un comando de manipulación de datos como INSERT, DELETE o UPDATE. • Un sentencia SELECT para consulta de datos.

Un comando de manipulación de datos devuelve un contador con el número de filas (registros) afectados, o modificados, mientras una instrucción SELECT devuelve un conjunto de registros denominado conjunto de resultados (result set). La interfaz Statement no tiene un constructor , sin embargo, podemos obtener un objeto Statement al invocar el método createStatement() de un objeto Connection.

conn = DriverManager.getConnection(url,login,pasword); Statement stmt = conn.createStatement();

Una vez creado el objeto Statement, se puede emplear para enviar consultas a la base de datos usando los métodos execute(), executeUpdate() o executeQuery(). La elección del método depende del tipo de consulta que se va a enviar al servidor de bases de datos:

Método Descripción

execute( ) Se usa principalmente cuando una sentencia SQL regresa varios conjuntos de resultados. Esto ocurre principalmente cuando se está haciendo uso de procedimientos almacenados.

executeUpdate( ) Este método se utiliza con instrucciones SQL de manipulación de datos tales como INSERT, DELETE o UPDATE.

executeQuery( ) Se usa en las instrucciones del tipo SELECT.

Es recomendable que se cierren los objetos Connection y Statement que se hayan creado cuando ya no se necesiten. Lo que sucede es que cuando en una aplicación en Java se están usando recursos externos, como es el caso del acceso a bases de datos con el API JDBC, el recolector de basura de Java (garbage collector) no tiene manera de conocer cuál es el estado de esos recursos, y por lo tanto, no es capaz de liberarlos en el caso de que ya no sean útiles. Lo que ocurre en estos casos es que se pueden quedar almacenados en memoria grandes cantidades de recursos relacionados con la aplicación de bases de datos que se está ejecutando. Es por esto que se recomienda que se cierren de manera explícita los objetos Connection y Statement. De manera similar a Connection, la interfaz Statement tiene un método close() que permite cerrar de manera explícita un objeto Statement. Al cerrar un objeto Statement se liberan los recursos que están en uso tanto en la aplicación Java como en el servidor de bases de datos.

Statement stmt = conn.createStatement(); stmt.close();


a = stm.executeQuery(consulta); -‐Si recordamos a es una variable de tipo ResulSet la cual puede almacenar el contenido que nos retorne la ejecución de la consulta mediante la clase Statement.

ResultSet: _ Mantiene un cursor apuntando a su fila de datos actual _ Proporciona métodos para recuperar valores de columna

} catch (SQLException ex) { Logger.getLogger(conexion.class.getName()).log(Level.SEVERE, null, ex); } } -‐La línea que contiene el catch nos permite atrapar un error de tipo SQLException en una variable ex de tipo SQLException la cual podremos imprimir dentro del bloque catch.

A partir de la versión 1.4 de java2SE Sun microsystem agregó una función o concepto que permite controlar, dar formato y publicar mensajes a través de los llamados registros (log), pertenecientes al paquete java.util.logging. Éstos pueden emplearse para dar mensajes de información, estados de los datos o la programática o inclusive errores ocurridos durante la ejecución. Pueden beneficiar a varios empleadores de la aplicación como programadores, personal a cargo de realizar pruebas y por otra parte también a usuarios del sistema inclusive sino está asociado al código fuente. Por último la clase Level que contiene otros niveles: SEVERE Nivel de mayor prioridad, para indicar errores. WARNING Segundo nivel, indicados para advertencias INFO Indicados para mensajes con fines informativos CONFIG Para mensajes de configuración FINE Para información de la traza de la aplicación FINER Para información de rastreo de la traza de la aplicación FINEST Nivel más bajo y de menor prioridad


2.16.8 Creación de la página "index1.jsp"

1.-‐ Ve Netbeans y en tu proyecto da clic derecho en WebPages, selecciona new y después da clic en JSP. Tal como se muestra a continuación.

2.-‐ Ahora en la ventana que emerge en el aparta JSP File Name introduce la palabra index1 y da clic en finish. Guíate con la imagen de abajo.

3.-‐ Una vez que aparezca nuestra área de trabajo en la paleta de código modifica el archivo para que quede tal y como está el siguiente código: <%-‐-‐ Document : index Created on : 11/02/2010, 06:41:06 PM Author : grajo-‐-‐%> <%@page contentType="text/html" pageEncoding="UTF-‐8"%> <!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>blog de alex</title> <%String status= (String)session.getValue("status"); %> </head> <%if( status == null){ response.sendRedirect("contra.jsp"); }else{ %> <frameset rows="*" cols="89%,*">


<frameset rows="*" cols="18%,*"> <frame name="frm_left" src="frm_left.jsp" scrolling="auto" noresize bordercolor="#050000"> <frame name="frm_central1" src="frm_inicial.jsp" scrolling="yes" bordercolor="#050000"> </frameset> <frame name="frm_right" src="juego.html" scrolling="no" noresize bordercolor="#050000"> </frameset> <noframes></noframes> <% } %> <body></body> </html> 4.-‐ Si te das cuenta este código es parecido al index principal de tu proyecto. Si necesitas repasar cómo funcionan los framesets ve a la creación de la página index.jsp al inicio del manual. 5.-‐ Esta archivo lo que hace es dividir nuestra página en tres partes en la izquierda o en el frame izquierdo mostramos la pagina frm_left que tendrá un menú con las categorías, temas o publicidad de nuestra página. En el frame frm_central1 desplegaremos la página frm_inicial.jsp y en el frame derecho mostraremos la página juegos.html. Explicación de las propiedades más importantes de este archivo: Scrolling: nos permite hacer que nuestra página tenga una barra de desplazamiento en caso de que esta lo necesite. Nuestro atributo tiene dos valores: no, para hacer que en la pagina nunca aparezca la barra de desplazamiento, y yes, para hacer que aparezca la barra de desplazamiento. Noresize: Esto hace que la página no cambie su tamaño predeterminado cuando el entorno en que se muestra es más pequeño o más grande Bordercolor: Este atributo hace que el borde de nuestro frameset tome el color que deseemos con valores hexadecimales. En nuestra página session.jsp creamos unas variables de sesión donde una de ellas era el status que le damos un valor de uno (ver creación de session.jsp) bueno esta variable solo durara 30 minutos y después de que transcurra este tiempo, la variable quedará destruida, por lo cual hacemos un if en este documento el cual dice que si el status está destruido nos redireccióne a la página contra.jsp.


2.16.9 CREACION DE LA PAGINA frm_left.jsp

1.-‐ Ve al Netbeans y da clic derecho en WebPages. 2.-‐Del menú emergente selecciona new 3.-‐ Da clic e JSP. Nota: guíate en la imagen de abajo.

4.-‐ Te aparecerá la siguiente ventana y en el apartado JSP File Name coloca: “ frm_left” y da clic en finish

5.-‐ Aparecerá el Nuevo documento en el área de desarrollo, el cual se modificará tal como se muestra en el código siguente:

<%-‐-‐ Document : frm_left Created on : 8/03/2010, 11:38:32 AM Author : alexgrajo -‐-‐%> <%@page contentType="text/html" pageEncoding="UTF-‐8"%> <!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="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/ddaccording.js">


/*********************************************** * Accordion Content script-‐ (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts * This notice must stay intact for legal use ***********************************************/ </script> <script type="text/javascript"> ddaccordion.init({ headerclass: "submenuheader", //Shared CSS class name of headers group contentclass: "submenu", //Shared CSS class name of contents group revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover" mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed) animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["suffix", "<img src='img/plus.gif' class='statusicon' />", "<img src='img/minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized myiframe=window.frames["myiframe"] if (expandedindices.length>0) //if there are 1 or more expanded headers myiframe.location.replace(headers[expandedindices.pop()].getAttribute('href')) //Get "href" attribute of final expanded header to load into IFRAME }, onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed if (state=="block" && isuseractivated==true){ //if header is expanded and as the result of the user initiated action myiframe.location.replace(header.getAttribute('href')) } } }) </script> <style type="text/css"> .glossymenu{ margin: 5px 0; padding: 0; width: 170px; /*width of menu*/ border: 1px solid #9A9A9A; border-‐bottom-‐width: 0; } .glossymenu a.menuitem{


background: black url(img/glossyback.gif) repeat-‐x bottom left; font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-‐serif; color: white; display: block; position: relative; /*To help in the anchoring of the ".statusicon" icon image*/ width: auto; padding: 4px 0; padding-‐left: 10px; text-‐decoration: none; } .glossymenu a.menuitem:visited, .glossymenu .menuitem:active{ color: white; } .glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/ position: absolute; top: 5px; right: 5px; border: none; } .glossymenu a.menuitem:hover{ background-‐image: url(img/glossyback2.gif); } .glossymenu div.submenu{ /*DIV that contains each sub menu*/ background: white; } .glossymenu div.submenu ul{ /*UL of each sub menu*/ list-‐style-‐type: none; margin: 0; padding: 0; } .glossymenu div.submenu ul li{ border-‐bottom: 1px solid blue; } .glossymenu div.submenu ul li a{ display: block; font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-‐serif; color: black; text-‐decoration: none; padding: 2px 0; padding-‐left: 10px; } .glossymenu div.submenu ul li a:hover{ background: #DFDCCB; colorz: white; } body { background-‐color: #AAAAAA; } </style> <% String categoria; String status = (String)session.getValue("status"); String Usuario = (String) session.getValue("usuario");


int cont=0; String consulta1= "SELECT nombre FROM categoria;"; %> <jsp:useBean id="conex" class="beans.conexion" scope="session"/> </head> <body> <%if(status != null){%> <div class="glossymenu"> <a class="menuitem" href="frm_inicial.jsp" target="frm_central1">Pagina de inicio</a> <a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/">Categorias</a> <div class="submenu"> <ul> <jsp:setProperty name="conex" property="consulta" value="<%=consulta1%>"/> <% while (conex.getResultado().next()) { cont++; categoria = conex.getResultado().getString("nombre"); %> <li><a href="rnsajes.jsp?categoria=<%=categoria%>" target="frm_central">C. <%=categoria%></a></li> <%}%> </ul> </div> <a class="menuitem" href="http://www.javascriptkit.com/jsref/" target="frm_central1">JavaScript Reference</a> <a class="menuitem" href="http://www.javascriptkit.com/domref/" target="frm_central1">DOM Reference</a> <a class="menuitem submenuheader" href="http://www.cbtc.mx" target="frm_central1">PAIGNAS AMIGAS</a> <div class="submenu"> <ul> <li><a href="http://www.CBTC.MX" target="frm_central1">CBTC</a></li> <li><a href="http://www.google.com" target="frm_central1">GOOGLE</a></li> <li><a href="http://www.edmodo.com" target="frm_central1">EDMODO</a></li> <li><a href="http://www.superaportes.blogspot.com" target="frm_central1">SUPERAPORTES</a></li> <li><a href="http://www.metroflog.com" target="frm_central1">METROFLOG</a></li> <li><a href="http://www.youtube.com" target="frm_central1">YOUTUBE</a></li> </ul> <img src="http://i27.tinypic.com/sy7295.gif" style="margin: 10px 5px" /> </div> <a class="menuitem" href="http://www.cbtc.mx/" style="border-‐bottom-‐width: 0">Coding Forums</a> </div> <p><iframe name="myiframe" style="width: 90%; height: 300px; border:1px solid black"></iframe></p> <p>Assuming the current page is named "current.htm", the below links when navigated to expands a particular header on that page:</p> <p> -‐ <a href="current.htm?submenuheader=0">Expand 1st header within "submenuheader" header group</a><br /> </p> <p>Helpful links: </p> <p> -‐ <a href="http://www.cbtc.mx">Adding arbitrary links hat expand/ collapse the contents</a><br /> -‐ <a href="http://www.cbtc.mx">Taking advantage of the oninit() and onopenclose() event handlers</a><br /> </p> <%}else{ response.sendRedirect("contra.jsp"); }%> </body> </html>


Explicación del código: Esta y todas las demás explicaciones estarán ordenadas por color donde: 1.-‐ El color ___ representara todas la llamadas de archivos externos a nuestra página o archivo web. Estos pueden ser css o js dependiendo de la ocasión. En este caso es importante mencionar que para que una página web tenga efectos visuales es necesario hacer uso de un lenguaje de programación llamado java script (que no tiene nada que ver con el lenguaje java). Todos los archivos que tengan algún tipo de efecto como menús desplegables tienen que ver con el lenguaje javascript y para que nuestra página funcione hay que crear una carpeta en llamada js y descargar del edmodo un archivo llamado js.rar , pero eso lo haremos mas delante. Las siguientes líneas de código son utilizadas para mandar llamar un código js para que interactúe con nuestro html. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> Esta línea de código importa un script donde: Type=”text/javascript”: indica que el tipo de script que vamos a utilizar es un java scritp. Src: este atributo indica el lugar donde se encuentra nuestro javaScript. Si te das cuenta este java script es un código opensource que proporciona la empresa de Google. Es importante incluir el nombre del archivo en esta ruta, en este caso el archivo se llama jquery.min.js <script type="text/javascript" src="js/ddaccording.js"> Esta línea de código trabaja con el mismo principio: El tipo de script está definido por el type="text/javascript" que como se ve hace referencia a un java script. El cambio que tiene esta línea es que su origen está en el mismo proyecto y no en otro dominio. Esto es que ddaccording.js está en la carpeta js de nuestro proyecto. Este archivo será creado más delante. 2.-‐ El color ___ representara todos los request.getParameters que tengamos en nuestros archivos. Session.getValue(). Bien en estas líneas de código primero: String categoria; -‐Declaramos una variable llamada categoría de tipo string String status = (String)session.getValue("status"); String Usuario = (String) session.getValue("usuario"); -‐Estas líneas de código son nuevas y las podemos desglosar de la siguiente manera: 1. Tenemos una declaración de variables status y Usuario de tipo string lo cual no debe de tener ningún problema para entenderse pues es una simple declaración de variable. 2. Lo que esta después de nuestro operador de asignación es lo importante. La función session.getValue(“nombre de la variable de sesión”) nos permite obtener los valores que les dimos a las variables de sesión en la página session.jsp. Estas variables de sesión son de tipo objet por lo que es necesario moldearlas o aplicarles un casteo que las convierta a valores de clase String y así poder guardarlos en las variables tipo string. 3.-‐ El color ___ representan las peticiones javabean que tengamos en nuestro archivo. -‐Como se había dicho anterior mente: <jsp:useBean id="conex" class="beans.conexion" scope="session"/> Línea de código utilizada para inicializar nuestro javabean en nuestra página. <jsp:setProperty name="conex" property="consulta" value="<%=consulta1%>"/> Con esta línea de código mandamos a nuestro javabean la variable consulta1 que contiene el código sql para obtener todas las categorías de nuestro programa. Para ahondar más en este tema ve a las explicaciones que se hicieron al inicio de este manual.


4. El color ___ representa los componentes html que tengamos en nuestra página.

Las siguientes líneas de código tienen algo en común y es que tienen un href. Este href es una liga que nos mandara a la pagina que esta después del signo de asignación (href=http://www.cbtc.mx). El atributo target hace que el navegador muestre esta información en nuestro frame frm_central1, esta es el área central de nuestra página.

<a class="menuitem" href="http://www.javascriptkit.com/jsref/" target="frm_central1">JavaScript

<a class="menuitem" href="http://www.javascriptkit.com/domref/" target="frm_central1">DOM

<a class="menuitem submenuheader" href="http://www.cbtc.mx" target="frm_central1">PAIGNAS

Si te das cuenta todas las demás líneas de código con href y nos mandan a una página en especifico donde todas se mostraran en el frame frm:central1.

<li><a href="http://www.CBTC.MX" target="frm_central1">CBTC</a></li> <li><a href="http://www.google.com" target="frm_central1">GOOGLE</a></li> <li><a href="http://www.edmodo.com" target="frm_central1">EDMODO</a></li> <li><a href="http://www.superaportes.blogspot.com" target="frm_central1">SUPERAPORTES</a></li> <li><a href="http://www.metroflog.com" target="frm_central1">METROFLOG</a></li> <li><a href="http://www.youtube.com" target="frm_central1">YOUTUBE</a></li> </ul>

5. El color ___ representa los métodos de consultas que hagamos en la aplicación. Una vez que nuestro JavaBean hace sus conexiones y ejecuta la sentencia sql podremos sacar la información del resulset que declaramos. Conex.getRestultado().next(): Es una función que nos permite mover el apuntador del resulset y poder acceder al siguiente registro que nos manda el javabean mediante el resulset. Conex.getResultado.geString(“nombre del campo que se busco en el query”): este nos permite sacar del resulset el valor y guardarlo en la variable categoría que es de tipo string. <% while (conex.getResultado().next()) { cont++; categoria = conex.getResultado().getString("nombre"); %> <li><a href="rnsajes.jsp?categoria=<%=categoria%>" target="frm_central">C. <%=categoria%></a></li> Ahora desglosemos la siguiente línea de código: Href=”rnsajes.jsp: esto hace que se imprima una liga y que cuando demos clie en ella nos mande a rnsajes.jsp <a href="rnsajes.jsp?categoria=<%=categoria%>" target="frm_central">C. <%=categoria%></a>: En esta línea de código podemos ver después de rnsajes un signo de interrogación. Este signo de interrogación indica que a la pagina rnsajes le vamos a mandar un parámetro llamado categoría con el contenido de la variable categoría. target="frm_central">: Este atributo permite que la pagina rnsajes.jsp se muestre en el frame frm_central C. <%=categoria%>: Esta línea de código hace que aparezca visualmente el nombre de la categoría como link para que el usuario de clic en ella y nos mande a rnsajes.jsp <%}%> </ul>


6. El color ___ representa todas las consulta sql que tengamos en cada archivo String consulta1= "SELECT nombre FROM categoria;"; Esta es una consulta o mejor llamada query. Nos permite desplegar todas aquellas categorías de la tabla categoría creada anteriormente. Gracias a esta consulta podremos hacer que se muestre dinámicamente.

2.17 Creación de la carpeta js. 1.-‐ Ve al Netbeans 2.-‐ Da clic derecho en el apartado WebPages. 3.-‐Selecciona el apartado new 4.-‐ Ahora da clic en folder. Guiate con la imagen de abajo.

5.-‐ Aparecerá la siguiente ventana en la cual en el apartado Folder Name pondremos como nombre js 6.-‐ Da clic en finish.


6.-‐ Vamos a ver que la carpeta js este dentro de nuestro proyecto.

2.17.1 Como crear un archivo js

1.-‐ Da clic en la carpeta js 2.-‐ Selecciona new 3.-‐ Da clic en other. Guíate en la siguiente imagen.

4.-‐ Del apartado categories, selecciona other 5.-‐ En el apartado File Types, selecciona JavaScript File. 6.-‐ Da clic en next.


7.-‐ Ahora en el apartado File Name coloca el nombre “ddaccording”. 8.-‐ Da clic en finish.

9.-‐ Te aparecerá una nueva area de desarrollo en la cual vas a introducir todo este código //** Accordion Content script: By Dynamic Drive, at http://www.dynamicdrive.com //** Created: Jan 7th, 08' //Version 1.3: April 3rd, 08': //**1) Script now no longer conflicts with other JS frameworks //**2) Adds custom oninit() and onopenclose() event handlers that fire when Accordion Content instance has initialized, plus whenever a header is opened/closed //**3) Adds support for expanding header(s) using the URL parameter (ie: http://mysite.com/accordion.htm?headerclass=0,1) //April 9th, 08': Fixed "defaultexpanded" setting not working when page first loads //Version 1.4: June 4th, 08': //**1) Added option to activate a header "mouseover" instead of the default "click" //**2) Bug persistence not working when used with jquery 1.2.6 //Version 1.5: June 20th, 08': //**1) Adds new "onemustopen:true/false" parameter, which lets you set whether at least one header should be open at all times (so never all closed). //**2) Changed cookie path to site wide for persistence feature //**3) Fixed bug so "expandedindices" parameter in oninit(headers, expandedindices) returns empty array [] instead of [-‐1] when no expanded headers found //**1) Version 1.5.1: June 27th, 08': Fixed "defaultexpanded" setting not working properly when used with jquery 1.2.6 //Version 1.6: Oct 3rd, 08': //**1) Adds new "mouseoverdelay" param that sets delay before headers are activated when "revealtype" param is set to "mouseover" //**2) Fixed bug with "onemustopen" param not working properly when "revealtype" is set to "click" //Version 1.7: March 24th, 09': Adds a 3rd revealtype setting "clickgo", which causes browser to navigate to URL specified inside the header after expanding its contents. //Version 1.7.1: May 28th, 09': Fixed issue that causes margins/paddings in accordion DIVs to be lost in IE8 var ddaccordion={


contentclassname:{}, //object to store corresponding contentclass name based on headerclass expandone:function(headerclass, selected){ //PUBLIC function to expand a particular header this.toggleone(headerclass, selected, "expand") }, collapseone:function(headerclass, selected){ //PUBLIC function to collapse a particular header this.toggleone(headerclass, selected, "collapse") }, expandall:function(headerclass){ //PUBLIC function to expand all headers based on their shared CSS classname var $=jQuery var $headers=$('.'+headerclass) $('.'+this.contentclassname[headerclass]+':hidden').each(function(){ $headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion") }) }, collapseall:function(headerclass){ //PUBLIC function to collapse all headers based on their shared CSS classname var $=jQuery var $headers=$('.'+headerclass) $('.'+this.contentclassname[headerclass]+':visible').each(function(){ $headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion") }) }, toggleone:function(headerclass, selected, optstate){ //PUBLIC function to expand/ collapse a particular header var $=jQuery var $targetHeader=$('.'+headerclass).eq(selected) var $subcontent=$('.'+this.contentclassname[headerclass]).eq(selected) if (typeof optstate=="undefined" || optstate=="expand" && $subcontent.is(":hidden") || optstate=="collapse" && $subcontent.is(":visible")) $targetHeader.trigger("evt_accordion") }, expandit:function($targetHeader, $targetContent, config, useractivated, directclick){ this.transformHeader($targetHeader, config, "expand") $targetContent.slideDown(config.animatespeed, function(){ config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), useractivated) if (config.postreveal=="gotourl" && directclick){ //if revealtype is "Go to Header URL upon click", and this is a direct click on the header var targetLink=($targetHeader.is("a"))? $targetHeader.get(0) : $targetHeader.find('a:eq(0)').get(0) if (targetLink) //if this header is a link setTimeout(function(){location=targetLink.href}, 200) //ignore link target, as window.open(targetLink, targetLink.target) doesn't work in FF if popup blocker enabled } }) }, collapseit:function($targetHeader, $targetContent, config, isuseractivated){ this.transformHeader($targetHeader, config, "collapse") $targetContent.slideUp(config.animatespeed, function(){config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), isuseractivated)}) },


transformHeader:function($targetHeader, config, state){ $targetHeader.addClass((state=="expand")? config.cssclass.expand : config.cssclass.collapse) //alternate btw "expand" and "collapse" CSS classes .removeClass((state=="expand")? config.cssclass.collapse : config.cssclass.expand) if (config.htmlsetting.location=='src'){ //Change header image (assuming header is an image)? $targetHeader=($targetHeader.is("img"))? $targetHeader : $targetHeader.find('img').eq(0) //Set target to either header itself, or first image within header $targetHeader.attr('src', (state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse) //change header image } else if (config.htmlsetting.location=="prefix") //if change "prefix" HTML, locate dynamically added ".accordprefix" span tag and change it $targetHeader.find('.accordprefix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse) else if (config.htmlsetting.location=="suffix") $targetHeader.find('.accordsuffix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse) }, urlparamselect:function(headerclass){ var result=window.location.search.match(new RegExp(headerclass+"=((\\d+)(,(\\d+))*)", "i")) //check for "?headerclass=2,3,4" in URL if (result!=null) result=RegExp.$1.split(',') return result //returns null, [index], or [index1,index2,etc], where index are the desired selected header indices }, getCookie:function(Name){ var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair if (document.cookie.match(re)) //if cookie found return document.cookie.match(re)[0].split("=")[1] //return its value return null }, setCookie:function(name, value){ document.cookie = name + "=" + value + "; path=/" }, init:function(config){ document.write('<style type="text/css">\n') document.write('.'+config.contentclass+'{display: none}\n') //generate CSS to hide contents document.write('<\/style>') jQuery(document).ready(function($){ ddaccordion.urlparamselect(config.headerclass) var persistedheaders=ddaccordion.getCookie(config.headerclass) ddaccordion.contentclassname[config.headerclass]=config.contentclass //remember contentclass name based on headerclass config.cssclass={collapse: config.toggleclass[0], expand: config.toggleclass[1]} //store expand and contract CSS classes as object properties config.revealtype=config.revealtype || "click" config.revealtype=config.revealtype.replace(/mouseover/i, "mouseenter") if (config.revealtype=="clickgo"){ config.postreveal="gotourl" //remember added action config.revealtype="click" //overwrite revealtype to "click" keyword } if (typeof config.togglehtml=="undefined") config.htmlsetting={location: "none"} else


config.htmlsetting={location: config.togglehtml[0], collapse: config.togglehtml[1], expand: config.togglehtml[2]} //store HTML settings as object properties config.oninit=(typeof config.oninit=="undefined")? function(){} : config.oninit //attach custom "oninit" event handler config.onopenclose=(typeof config.onopenclose=="undefined")? function(){} : config.onopenclose //attach custom "onopenclose" event handler var lastexpanded={} //object to hold reference to last expanded header and content (jquery objects) var expandedindices=ddaccordion.urlparamselect(config.headerclass) || ((config.persiststate && persistedheaders!=null)? persistedheaders : config.defaultexpanded) if (typeof expandedindices=='string') //test for string value (exception is config.defaultexpanded, which is an array) expandedindices=expandedindices.replace(/c/ig, '').split(',') //transform string value to an array (ie: "c1,c2,c3" becomes [1,2,3] var $subcontents=$('.'+config["contentclass"]) if (expandedindices.length==1 && expandedindices[0]=="-‐1") //check for expandedindices value of [-‐1], indicating persistence is on and no content expanded expandedindices=[] if (config["collapseprev"] && expandedindices.length>1) //only allow one content open? expandedindices=[expandedindices.pop()] //return last array element as an array (for sake of jQuery.inArray()) if (config["onemustopen"] && expandedindices.length==0) //if at least one content should be open at all times and none are, open 1st header expandedindices=[0] $('.'+config["headerclass"]).each(function(index){ //loop through all headers if (/(prefix)|(suffix)/i.test(config.htmlsetting.location) && $(this).html()!=""){ //add a SPAN element to header depending on user setting and if header is a container tag $('<span class="accordprefix"></span>').prependTo(this) $('<span class="accordsuffix"></span>').appendTo(this) } $(this).attr('headerindex', index+'h') //store position of this header relative to its peers $subcontents.eq(index).attr('contentindex', index+'c') //store position of this content relative to its peers var $subcontent=$subcontents.eq(index) var needle=(typeof expandedindices[0]=="number")? index : index+'' //check for data type within expandedindices array-‐ index should match that type if (jQuery.inArray(needle, expandedindices)!=-‐1){ //check for headers that should be expanded automatically (convert index to string first) if (config.animatedefault==false) $subcontent.show() ddaccordion.expandit($(this), $subcontent, config, false) //Last param sets 'isuseractivated' parameter lastexpanded={$header:$(this), $content:$subcontent} } //end check else{ $subcontent.hide() config.onopenclose($(this).get(0), parseInt($(this).attr('headerindex')), $subcontent.css('display'), false) //Last Boolean value sets 'isuseractivated' parameter ddaccordion.transformHeader($(this), config, "collapse") } }) $('.'+config["headerclass"]).bind("evt_accordion", function(e, isdirectclick){ //assign custom event handler that expands/ contacts a header var $subcontent=$subcontents.eq(parseInt($(this).attr('headerindex'))) //get subcontent that should be expanded/collapsed if ($subcontent.css('display')=="none"){ ddaccordion.expandit($(this), $subcontent, config, true, isdirectclick) //2nd last param sets 'isuseractivated' parameter


if (config["collapseprev"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){ //collapse previous content? ddaccordion.collapseit(lastexpanded.$header, lastexpanded.$content, config, true) //Last Boolean value sets 'isuseractivated' parameter } lastexpanded={$header:$(this), $content:$subcontent} } else if (!config["onemustopen"] || config["onemustopen"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){ ddaccordion.collapseit($(this), $subcontent, config, true) //Last Boolean value sets 'isuseractivated' parameter } }) $('.'+config["headerclass"]).bind(config.revealtype, function(){ if (config.revealtype=="mouseenter"){ clearTimeout(config.revealdelay) var headerindex=parseInt($(this).attr("headerindex")) config.revealdelay=setTimeout(function(){ddaccordion.expandone(config["headerclass"], headerindex)}, config.mouseoverdelay || 0) } else{ $(this).trigger("evt_accordion", [true]) return false //cancel default click behavior } }) $('.'+config["headerclass"]).bind("mouseleave", function(){ clearTimeout(config.revealdelay) }) config.oninit($('.'+config["headerclass"]).get(), expandedindices) $(window).bind('unload', function(){ //clean up and persist on page unload $('.'+config["headerclass"]).unbind() var expandedindices=[] $('.'+config["contentclass"]+":visible").each(function(index){ //get indices of expanded headers expandedindices.push($(this).attr('contentindex')) }) if (config.persiststate==true && $('.'+config["headerclass"]).length>0){ //persist state? expandedindices=(expandedindices.length==0)? '-‐1c' : expandedindices //No contents expanded, indicate that with dummy '-‐1c' value? ddaccordion.setCookie(config.headerclass, expandedindices) } }) }) } }


2.17.2 Colocación de los archivos faltantes del proyecto

1.-‐ entra al edmodo

2.-‐ Selecciona tu materia de laboratorio de sistemas

3.-‐ Descarga los archivos del siguiente post:

Nota: Descarga todos los archivos el css el js y el imgusu. 4.-‐ Ahora dirigete a misdocumentos

5.-‐Selecciona la carpeta NetBeansProjects

6.-‐ Ahora selecciona tu proyecto llamado blog_tunombre, donde la palabra “tu_nombre” la sustituyes por tu nombre.


7.-‐ Ahora accede a la pagina web de tu proyecto.

8.-‐ aquí deben de aparecer tres carpetas css, imgusu y js hasta este momento debes de tener dos css y js. De todos si te falta cualquiera de las treas carpetas creala.

9.-‐ Ahora descomprime el contenido del archivo, dando doble clic en el y te debe de aparecer una ventana como la siguiente ( en caso de que tengas winrar instalado).

10.-‐ Ahora solo arrastra la carpeta css a tu carpeta web de tu proyecto, si te pide que sustituyas los archivos di que si. 11.-‐ ahora descomprime el archivo js.rar dando doble clic en el, te aparecerá la siguiente ventana.

12.-‐ ahora solo vuelve a arrastra la carpeta js a tu carpeta web, si te pide que sustituyas los archivos de que si.


13.-‐Da doble clic sobre el archivo imgusu.rar, al hacer esto de debe aparecer la siguiente ventana:

14.-‐ con la misma mecánica arrastra la carpeta imgusu a la carpeta web de tu proyecto. Recuerda que si te pide sustituir el contenido dile que si. Con esto tendremos todos los css y archivos js cargados así como las imágenes y cuanta cosa sea necesaria dentro de nuestra aplicación.


NOTA: ACONTINUACION TODOS LOS PROCEDIMIENTOS DE CREACION DE PAGINAS O ARCHIVOS DENTRO DEL PROYECTO, SE ASUME QUE SE HA ENTENDIO COMO CREARLOS, POR LO QUE NOS BRINCAREMOS LOS PASO. EL MOTIVO ES QUE PRACTIQUES Y APRENDAS O MEMORISES CON ESTE MANUAL Y NO SOLO HAGAS LO QUE DICE. PARA LOS CODIGOS ANTERIORMENTE EXPLICADOS SE APLICARA LO MISMO SI TIENES ALGUNA DUDA DEBES REGRESARTE A CUALQUIERA DE LAS PARTES DONDE SE EXPLICO.


2.17.3 CREACION DE LA PAGINA frm_inicial.jsp

1. Crea una pagina jsp llamada frm_inicial en tu proyecto. 2. Ahora sustituye el código que te aparece por el siguiente:

<%-‐-‐ Document : frm_inicial Created on : 8/03/2010, 11:46:00 AM Author : alexgrajo -‐-‐%> <%@page contentType="text/html" pageEncoding="UTF-‐8"%> <!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"> <link rel="stylesheet" href="css/css/main.css" type="text/css" /> <title>JSP Page</title> <% String categoria=""; String status = (String)session.getValue("status"); String Usuario = (String) session.getValue("usuario"); int cont =0; int top =0; String consulta1= "SELECT nombre FROM categoria;"; String consulta2 = "select count(*) from categoria"; String id; %> <jsp:useBean id="conex" class="beans.conexion" scope="session"/> </head> <body> <%if (status != null){%> <div id="content-‐top"></div> <div id="content-‐middle"> <div id="pitch"> <h1>Este es mi primer blog espero que te guste<br /><span>CBTC</span></h1> <p>En este blog podras crear tus porpios temas dependiendo de la categoria en la que este. Podras discutir sobre cual quier cosa siempre y cuando no excedas los terminos o reglas de este blog. Bienvenido a mi proyecto final de preparatoria, espero que les guste</p> </div> <jsp:setProperty name="conex" property="consulta" value="<%=consulta2%>"/> <% int band = 0; while (conex.getResultado().next()) { String existe = conex.getResultado().getString("count(*)"); if (existe.compareTo("0") == 0) { band++; } Integer top1 = new Integer(existe); top = top1.intValue(); }%> <jsp:setProperty name="conex" property="consulta" value="<%=consulta1%>"/> <% while (conex.getResultado().next()) { cont++;


categoria = conex.getResultado().getString("nombre"); int res = cont % 2; if (cont != top) { %> <div class="column "> <h3>Categoria de "<%=categoria%>" </h3> <img src="css/images/thumb.gif" alt="Thumb" /> <p class="more"><a href="rnsajes.jsp?categoria=<%=categoria%>" target="frm_central">Entrar a "<%=categoria%>"</a></p> </div> <%} else {%> <div class="column last"> <h3>Categoria de "<%=categoria%>" </h3> <img src="css/images/thumb.gif" alt="Thumb" /> <p class="more"><a href="rnsajes.jsp?categoria=<%=categoria%>" target="frm_central">Entrar a "<%=categoria%>"</a></p> </div> <%} }%> <div class="clear"></div> </div> <div id="content-‐bottom"></div> <div id="footer"> <p id="links"> <a href="#">Lema:</a> <a href="#">El conocimiento es universal</a> <a href="#">compartelo</a> </p> <p>Copyright © Grajo666blog · Design: grajo666, <a href="http://www.cbtc.com" title="Soluciones academicas">Soluciones Academicas</a></p> </div> <%}else{ response.sendRedirect("contra.jsp"); }%>%> </body> </html>

3. Recuarda los códigos pasados, si te das cuenta todos los archivos jsp que estamos tratando son semejantes solo tendremos que interpretar su funcionamiento con los nuevos parámetros.


2.17.3 CREACION DE LA PAGINA juego.html

1.-‐ Eta es una página que en su extencion tiene html, el motivo es que no estamos utilizando ningún tipo de lenguaje java dentro de ella por lo que no es necesario utilizarla como jsp. 2.-‐ crea en tu proyecto la pagina frm_right como archivo html. 3.-‐ sustituye su código por el siguiente: <html> <head> </head> <body bgcolor="#000000" text="#ffffff" style="text-‐align: center"> <table summary="" border="4"> <tr> <td> <center> <iframe width=125 height=515 src="http://www.losrecursosgratis.com/serviciosvis/juegos/menu2/menujuegos2.htm" frameborder=0 scrolling=no> </iframe> </center> </td> </tr> </table> </body> </html> 4.-‐ Esta pagina solo manda llamar una pagina externa la cual no hemos creado nosotros, esto es que si queremos cargar paginas de otras personas en nuestra proyecto web, esta seria una de las formas que podemos utilizar.


2.17.4 CREACION DE LA PAGINA rnsajes.jsp Este código lo que permite es ver los temas que están dados de alta en las diferentes categoría, podremos seleccionar uno de ellos para poder participar en los que comentarios que se estén generando. 1.-‐ Crea una página llamada rnsajes.jsp en tu proyecto web 2.-‐ Sustituye el código que tienes por el que se te muestra a continuacion <%@ page contentType="text/html; charset=iso-‐8859-‐1" language="java" import="java.sql.*" errorPage="" %> <!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Documento sin título</title> <meta http-‐equiv="Content-‐Type" content="text/html; charset=iso-‐8859-‐1" /> <link rel="stylesheet" href="css/cssdivs.css" type="text/css"/> <link rel="stylesheet" href="css/menuizq.css" type="text/css"/> <link rel="stylesheet" href="css/tablas.css" type="text/css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/ddaccording.js"></script> <script type="text/javascript"> ddaccordion.init({ headerclass: "submenuheader", //Shared CSS class name of headers group contentclass: "submenu", //Shared CSS class name of contents group revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover" mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed) animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["suffix", "<img src='img/plus.gif' class='statusicon' />", "<img src='img/minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized myiframe=window.frames["myiframe"] if (expandedindices.length>0) //if there are 1 or more expanded headers myiframe.location.replace(headers[expandedindices.pop()].getAttribute('href')) //Get "href" attribute of final expanded header to load into IFRAME }, onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed if (state=="block" && isuseractivated==true){ //if header is expanded and as the result of the user initiated action myiframe.location.replace(header.getAttribute('href')) } } }) </script>


<style type="text/css"> .glossymenu{ margin: 5px 0; padding: 0; width: 170px; /*width of menu*/ border: 1px solid #9A9A9A; border-‐bottom-‐width: 0; } .glossymenu a.menuitem{ background: black url(img/glossyback.gif) repeat-‐x bottom left; font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-‐serif; color: white; display: block; position: relative; /*To help in the anchoring of the ".statusicon" icon image*/ width: auto; padding: 4px 0; padding-‐left: 10px; text-‐decoration: none; } .glossymenu a.menuitem:visited, .glossymenu .menuitem:active{ color: white; } .glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/ position: absolute; top: 5px; right: 5px; border: none; } .glossymenu a.menuitem:hover{ background-‐image: url(img/glossyback2.gif); } .glossymenu div.submenu{ /*DIV that contains each sub menu*/ background: white; } .glossymenu div.submenu ul{ /*UL of each sub menu*/ list-‐style-‐type: none; margin: 0; padding: 0; } .glossymenu div.submenu ul li{ border-‐bottom: 1px solid blue; } .glossymenu div.submenu ul li a{ display: block; font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-‐serif; color: black; text-‐decoration: none; padding: 2px 0; padding-‐left: 10px; } .glossymenu div.submenu ul li a:hover{ background: #DFDCCB;


color: white; } body { background-‐color: #000000; background-‐image: url(); }</style> <% String categoria; String cat = request.getParameter("categoria"); String status = (String)session.getValue("status"); Integer statusint = new Integer(status); String Usuario = (String) session.getValue("usuario"); String consulta1= "SELECT tema.ìd_tema` AS tema_id_tema, tema.`tema` AS tema_tema, tema.`fecha` AS tema_fecha FROM `categoria` categoria INNER JOIN `tema_cat` tema_cat ON categoria.ìd_cat` = tema_cat.ìd_cat` INNER JOIN `tema` tema ON tema_cat.ìd_tema` = tema.ìd_tema` WHERE tema.id_tema = tema_cat.id_tema AND tema_cat.id_cat = categoria.id_cat AND categoria.nombre = '"+cat+"';"; String consulta3 = "SELECT nombre FROM categoria;"; String consulta2="SELECT id_cat from categoria where nombre= '"+cat+"'"; int cont =0; int cont1=0; String nom_tema=""; String id_tema=""; String id_cat=""; String fecha=""; %> <jsp:useBean id="conex" class="beans.conexion" scope="session"/> </head> <body> <jsp:setProperty name="conex" property="consulta" value="<%=consulta2%>"/> <% while (conex.getResultado().next()) { cont1++; id_cat = conex.getResultado().getString("id_cat"); } %> <%if (statusint.intValue() == 1) {%> <!-‐-‐ Contenedor -‐-‐> <div id="contenedor" class="contenedor"> <!-‐-‐ Comienzo header -‐-‐> <!-‐-‐ Fin header -‐-‐> <!-‐-‐ Comienzo navegacion-‐-‐> <!-‐-‐ Fin navegacion -‐-‐> <!-‐-‐ Comienzo columna izquierda -‐-‐> <div id="izquierda" class="izquierda"> <div class="glossymenu"> <a class="menuitem" href="frm_inicial.jsp" target="frm_central1">Pagina de inicio</a> <a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/">Temas <%=cat%></a> <div class="submenu"> <ul> <jsp:setProperty name="conex" property="consulta" value="<%=consulta3%>"/> <% while (conex.getResultado().next()) { cont++; categoria = conex.getResultado().getString("nombre");


%> <%if (!categoria.equalsIgnoreCase(cat)){%> <li><a href="contra.jsp?categoria=<%=categoria%>" target="frm_central">C. <%=categoria%></a></li> <%} }%> </ul> </div> <a class="menuitem" href="http://www.javascriptkit.com/jsref/" target="frm_central1">JavaScript Reference</a> <a class="menuitem" href="http://www.javascriptkit.com/domref/" target="frm_central1">DOM Reference</a> <a class="menuitem submenuheader" href="http://www.cbtc.mx" target="frm_central1">PAIGNAS AMIGAS</a> <div class="submenu"> <ul> <li><a href="http://www.CBTC.MX" target="frm_central1">CBTC</a></li> <li><a href="http://www.google.com" target="frm_central1">GOOGLE</a></li> <li><a href="http://www.edmodo.com" target="frm_central1">EDMODO</a></li> <li><a href="http://www.superaportes.blogspot.com" target="frm_central1">SUPERAPORTES</a></li> <li><a href="http://www.metroflog.com" target="frm_central1">METROFLOG</a></li> <li><a href="http://www.youtube.com" target="frm_central1">YOUTUBE</a></li> </ul> <img alt="hola" src="http://i27.tinypic.com/sy7295.gif" style="margin: 10px 5px" /> </div> <a class="menuitem" href="http://www.cbtc.mx/" style="border-‐bottom-‐width: 0">Coding Forums</a> </div> <p><iframe name="myiframe" style="width: 90%; height: 300px; border:1px solid black"></iframe></p> <p>Assuming the current page is named "current.htm", the below links when navigated to expands a particular header on that page:</p> <p> -‐ <a href="current.htm?submenuheader=0">Expand 1st header within "submenuheader" header group</a><br /> </p> <p>Helpful links: </p> </div> <!-‐-‐ Fin columna izquierda -‐-‐> <!-‐-‐ Comienzo contenido -‐-‐> <div id="contenido" class="principal"> <h1 class="centrada">Temas de la Categorias <%=cat%> </h1> <div> <hr /> <table bordercolor="#000000" bgcolor="#FFFFCC" class="lista"> <tr> <td width="122" bgcolor="#DDDDDD"><div align="center">Fecha</div></td> <td width="319" bgcolor="#DDDDDD"><div align="center">tema</div></td> </tr> <jsp:setProperty name="conex" property="consulta" value="<%=consulta1%>"/> <% while (conex.getResultado().next()) { cont1++; id_tema = conex.getResultado().getString("tema_id_tema"); nom_tema = conex.getResultado().getString("tema_tema"); fecha = conex.getResultado().getString("tema_fecha"); if (cont1 % 2 == 0) { %>


<tr class=""> <td width="122" bgcolor="#ECF5FF"><div align="center"><%=fecha%></div></td> <td width="319" bgcolor="#ECF5FF"><a href="temas.jsp?id=<%=id_tema%>&nom=<%=nom_tema%>"><%=nom_tema%></a></td> </tr> <%} else {%> <tr class=""> <td width="122" bgcolor="#CEE4FF"><div align="center"><%=fecha%></div></td> <td width="319" bgcolor="#CEE4FF"><a href="temas.jsp?id=<%=id_tema%>&nom=<%=nom_tema%>"><%=nom_tema%></a></td> </tr> <% } } %> </table> </div> <div class="clear"></div> <div> <form name="form" action="Sv_tema" method="post"> <h1 align="center"></h1> <p>Crea un tema para esta categoria </p> </h1> <div align="center"><label>Escribe el nombre del tema</label> <input type="text" name="tema"/> </div> <input name="usu" type="hidden" value="<%=Usuario%>"/> <input name="categoria" type="hidden" value="<%=cat%>"/> <input name="id_cat" type="hidden" value="<%=id_cat%>"/> <div align="center"> <input name="Submit" type="submit" class="btn" value="Guardar"/> </div> </form> </div> </div> <!-‐-‐ Fin contenido -‐-‐> <!-‐-‐ Comienzo columna derecha -‐-‐> <!-‐-‐ Fin columna derecha -‐-‐> <!-‐-‐ Comienzo footer -‐-‐> <div id="footer" class="pie"> <h6>grajo 2010, todo el C_C reservado</h6> </div> <!-‐-‐ Fin contenedor -‐-‐> </div> <%} else { }%> </body> </html>


Explicación de código En esta ocasión solo haremos incapie en estas tres sentencias: Esta consulta nos permite obtener el id, el nombre del tema de la tabla temas donde la categoría sea la que obtengamos de nustra variable cat. String consulta1= "SELECT tema.ìd_tema` AS tema_id_tema, tema.`tema` AS tema_tema, tema.`fecha` AS tema_fecha FROM `categoria` categoria INNER JOIN `tema_cat` tema_cat ON categoria.ìd_cat` = tema_cat.ìd_cat` INNER JOIN `tema` tema ON tema_cat.ìd_tema` = tema.ìd_tema` WHERE tema.id_tema = tema_cat.id_tema AND tema_cat.id_cat = categoria.id_cat AND categoria.nombre = '"+cat+"';"; Con esta consulta obtendremos el nombre de la categoría que hayamos seleccionado. String consulta3 = "SELECT nombre FROM categoria;"; Este línea nos permite selecciona el id de la categoría seleccionada. String consulta2="SELECT id_cat from categoria where nombre= '"+cat+"'"; EJERCICIO: MARCA CON LOS COLORES QUE SE TE INDICAN AL INICIO DEL MANUAL EN EL TEMA EXPLICACION DEL CODIGO TODAS LAS SENTENCIAS QUE CORRESPONDAN CON ESTOS COLORES, DE ESTA MANERA VERAS QUE AUNQUE EL CODIGO SEA MUY GRANDE PODRAS LEEROLO DE MANREA SENCILLA. LO PRIMERO ANTES DE TRATAR DE ENTENDER UN CODIGO ES DESGLOSARLO POCO A POCO Y SABER CLASIFICAR SUS SENTENCIA. NOTA: ESTE CODIGO SE TIENE QUE ENTREGAR IMPRESO EL DIA DEL EXAMEN FINAL JUNTO CON SU PAGINA FUNCIONANDO.


2.17.4 CREACION DE LA PAGINA temas.jsp Esta es la página en donde podemos opinar del tema que se haya seleccionado. Estas opiniones se van a guardar en la base de datos para que cuantas veces entres a al tema puedas ver este comentario. 1.-‐ Crea la pagina temas.jsp 2.-‐ Sustituye el código por el siguiente: <%-‐-‐ Document : temas.jsp Created on : 26/03/2010, 05:30:39 PM Author : alexgrajo -‐-‐%> <!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-‐equiv="content-‐type" content="text/html;charset=utf-‐8" /> <meta name="author" content="Luka Cvrk (www.solucija.com)" /> <link rel="stylesheet" href="css/css/main.css" type="text/css" /> <script language="JavaScript" type="text/javascript" src="js/texto/wysiwyg.js"></script> <title>Enthusiastica</title> <% String id= request.getParameter("id"); String nom= request.getParameter("nom"); String usu = (String)session.getValue("usuario"); String id_usu =""; String status = (String) session.getValue("status"); int cont=0; String nombre="", fecha="", men="", hora="", nom2=""; String con_nomusu="SELECT usuario.id_usuario, usuario.`nom` AS usuario_nom FROM ùsuario` usuario WHERE correo = '"+usu+"';"; String mensajes = "SELECT mensajes.`fecha` AS mensajes_fecha, mensajes.`mensaje` AS mensajes_mensaje, mensajes.`hora` AS mensajes_hora, usuario.`nom` AS usuario_nom FROM ùsuario` usuario INNER JOIN ùsu_mensaje` usu_mensaje ON usuario.ìd_usuario` = usu_mensaje.ìd_usu` INNER JOIN `mensajes` mensajes ON usu_mensaje.ìd_mens` = mensajes.ìd_mensaje` INNER JOIN `mensaje_tema` mensaje_tema ON mensajes.ìd_mensaje` = mensaje_tema.ìd_mensaje` WHERE mensaje_tema.id_tema ="+id+" AND usu_mensaje.id_mens = mensaje_tema.id_mensaje ORDER BY mensajes_fecha"; %> <jsp:useBean id="conex" class="beans.conexion" scope="session"/> </head> <body> <div id="wrap"> <div id="menu"> <div id="menu-‐left"></div> <div id="menu-‐right"></div> </div> <div id="content-‐top"></div> <div id="content-‐middle"> <div id="pitch"> <h1>Discute sobre <%=nom%><br /> <jsp:setProperty name="conex" property="consulta" value="<%=con_nomusu%>"/> <% while (conex.getResultado().next()) { cont++; id_usu = conex.getResultado().getString("id_usuario"); nombre = conex.getResultado().getString("usuario_nom");%>


<%}%> <span>Bienvenido <%=nombre%></span></h1> <p><%=nombre%> recuerda que las discuciones esta moderadas, debes de seguir las reglas del blog, <br/> si cometes faltas consecutivas podras ser desactivado. Disfruta </p> </div> <div class="more" > <jsp:setProperty name="conex" property="consulta" value="<%=mensajes%>"/> <% while (conex.getResultado().next()) { cont++; fecha = conex.getResultado().getString("mensajes_fecha"); men = conex.getResultado().getString("mensajes_mensaje"); hora = conex.getResultado().getString("mensajes_hora"); nom2 = conex.getResultado().getString("usuario_nom"); %> <h3 style="background-‐color:#999966 ">post hecho por <%=nom2%> el <%=fecha%> a las <%=hora%></h3> <p> <textarea name="textarea2" cols="110" rows="8" readonly wrap="PHYSICAL" class="more" style="background-‐color:#CCCCFF "><%=men%></textarea> </p> <%}%> </div> <div class="clear"></div> <form name="form1" action="Sv_men" method="post"> <h1 align="center"><p>Manda tu opinion</p> </h1> <div align="center"> <textarea id="textarea" name="test1" style="height: 170px; width: 500px;"> </textarea> <script language="javascript1.2"> generate_wysiwyg('textarea'); </script> </div> <hr/> <input name="nom" type="hidden" value="<%=nom%>"> <input name="usu" type="hidden" value="<%=usu%>"> <input name="status" type="hidden" value="<%=status%>"> <input name="tema" type="hidden" value="<%=id%>"> <input name="id_usu" type="hidden" value="<%=id_usu%>"> <div align="center"> <input name="Submit" type="submit" class="btn" value="Guardar"> </div> </form> </div> <div id="content-‐bottom"> </div> <div id="footer"> <p id="links"> <a href="#">Terms and Conditions</a> <a href="#">Privacy</a> <a href="#">About Us</a> </p>


<p>Copyright © Enthusiastica · Design: Luka Cvrk, <a href="http://www.solucija.com" title="Free CSS Templates">Solucija</a></p> </div> </div> </body> </html> EXPLICACION DEL CODIGO En esta ocasión en tu código esta una línea subrayada de rojo la cual es: <form name="form1" action="Sv_men" method="post"> Quiero que notes la propiedad action, su valor es Sv_men y el método que utiliza es un post. La palabra Sv_men es un servlet que haremos mas delante, este servlet nos permitirá recibir todos los valores que mandamos con el método post del form1, y asi, poder obtener los datos necesarios para poder realizar nuestros comentarios. Aquí es donde aplicaremos lo que hemos estado viendo en clases de manera untanto mas compleja, la cual no deja de ser lo mismo. EJERCICIO: TENDRAS QUE COMENTAR EL CODIGO LINEA A LINEA INDICANDO QUE ES CADA ATRIBUTO DE HTML, CADA FUNCION O PROCEDIMIENTO, ASI COMO LA DECLARACION DE JAVABEANS, LLAMADAS A SERVLETS ETC. ANTES DE COMENZAR A COMENTAR, CLASIFICA EL CODIGO CON LOS COLORES QUE SE TE INDICARON AL INICIO DEL MANUAL PARA QUE PUEDAS COMPRENDER MEJOR ESTE CODIGO. NOTA: ESTE CODIGO TENDRA QUE SER IMPRESO Y ENTREGADO EL DIA DE ENTREGA DEL PROYECTO FINAL.


2.17.5 CREACION DE LOS SERVLETS

1.-‐ Ve a la paleta proyectos y despliega la carpeta Source Packages.

2.-‐ Ahora da clic derecho en Source Packages, selecciona new y después da clic en Java Package para crear un nuevo paquete llamado servlets.

3.-‐ Te aparecerá un ventana como la que esta debajo, en la cual deberas poner el nombre de la carpeta o paquete. Para esto en el apartado Package Name escribe servlets.

4.-‐ da clic en finish


5.-‐ Una ves creado el paquete servlets da clic derecho en el y da clic en new, después selecciona Servlet para crear un nuevo archivo tipo servlet.

6.-‐ Del menú emergente en el apartado Class Name escribe “Sv_men” y da clic en finish para que Netbeans te cree un nuevo servlet.

7.-‐ del código que resulte sustitúyelo por el siguiente:

/* * To change this template, choose Tools | Templates * and open the template in the editor. */ package servlets; import com.mysql.jdbc.Connection; import java.io.*; import java.sql.DriverManager; import java.sql.ResultSet; import java.util.logging.Level; import java.util.logging.Logger; import javax.servlet.*; import javax.servlet.http.*; import java.util.Date; /** * * @author grajo */ public class Sv_men extends HttpServlet {


/** * Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods. * @param request servlet request * @param response servlet response */ protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-‐8"); PrintWriter out = response.getWriter(); try { /* TODO output your page here out.println("<html>"); out.println("<head>"); out.println("<title>Servlet Sv_inscripcion</title>"); out.println("</head>"); out.println("<body>"); out.println("<h1>Servlet Sv_inscripcion at " + request.getContextPath () + "</h1>"); out.println("</body>"); out.println("</html>"); */ } finally { out.close(); } } public void getConnection(HttpServletRequest request, HttpServletResponse response) { String mensaje = ""; int edo = 0; try { Connection conn = null; int val = 0; String cons_concat2 = ""; String bd="bd_blog"; String login = "usuario"; String password = "usuario"; String url = "jdbc:mysql://localhost/"; int reg = 3; int zz =0; int zz2 =0; int ss = 0; int ss1 =0; int aa = 0; String texto = request.getParameter("textarea"); String nombre = request.getParameter("nom"); String usuario = request.getParameter("usu"); String status = request.getParameter("status"); String tema = request.getParameter("tema"); String id_usu = request.getParameter("id_usu"); Date fecha = new Date(); String id_men=""; String hora = String.valueOf(fecha.getHours()); String min = String.valueOf(fecha.getMinutes()); String horafinal = (hora+":"+min); String insert = "INSERT INTO mensajes (id_mensaje, fecha, mensaje, hora) VALUES (default, SYSDATE(), '" + texto + "', '" + horafinal+ "');"; try {


Class.forName("com.mysql.jdbc.Driver").newInstance(); conn = (Connection) DriverManager.getConnection(url + bd, login, password); if (conn != null) { try { java.sql.Statement stm = conn.createStatement(); stm.executeUpdate(insert); } catch (Exception exception) { edo = 1; mensaje = exception.getMessage(); } conn.close(); } } catch (Throwable ex2) { conn = null; System.out.println("*********ERROR EN LA CONEXION**********"); System.out.println("*************MENSAJE ERROR = " + ex2.getMessage()); System.out.println("*************CAUSA ERROR = " + ex2.getMessage()); edo = 1; mensaje = ex2.getMessage(); } if (edo == 0) { zz=1;// response.sendRedirect("bienhecho.jsp?pagina=cal_par_maestro.jsp"); } else if (edo == 1) { zz2=2; //response.sendRedirect("error.jsp?pagina=cal_par_maestro.jsp&error=" + mensaje); } //-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐ try { Class.forName("com.mysql.jdbc.Driver").newInstance(); conn = (Connection) DriverManager.getConnection(url + bd, login, password); if (conn != null) { try { String query = "select id_mensaje from mensajes where mensaje ='" + texto + "' "; java.sql.Statement st = conn.createStatement(); ResultSet rs = st.executeQuery(query); while (rs.next()) { id_men = rs.getString("id_mensaje"); } } catch (Exception exception) { edo = 1; mensaje = exception.getMessage(); } conn.close(); } } catch (Throwable ex2) { conn = null; System.out.println("*********ERROR EN LA CONEXION**********"); System.out.println("*************MENSAJE ERROR = " + ex2.getMessage()); System.out.println("*************CAUSA ERROR = " + ex2.getMessage()); edo = 1; mensaje = ex2.getMessage(); } if (edo == 0) { ss=1; // response.sendRedirect("bienhecho.jsp?pagina=cal_par_maestro.jsp"); } else if (edo == 1) {


ss1= 2; //response.sendRedirect("error.jsp?pagina=cal_par_maestro.jsp&error=" + mensaje); } //___________________________________________________________________________ String select1 = ""; try { Class.forName("com.mysql.jdbc.Driver").newInstance(); conn = (Connection) DriverManager.getConnection(url + bd, login, password); java.sql.Statement stmt = conn.createStatement(); if (conn != null) { try { String insertar = "INSERT INTO mensaje_tema VALUES (default," + tema + ", " + id_men+ ");"; stmt.executeUpdate(insertar); } catch (Exception exception) { edo = 1; mensaje = exception.getMessage(); } conn.close(); } } catch (Throwable ex2) { conn = null; System.out.println("*********ERROR EN LA CONEXION**********"); System.out.println("*************MENSAJE ERROR = " + ex2.getMessage()); System.out.println("*************CAUSA ERROR = " + ex2.getMessage()); edo = 1; mensaje = ex2.getMessage(); } if (edo == 0 && zz==1 && ss== 1) { aa=1; } else if (edo == 1 && zz2==2 && ss1== 2) { aa=2; } //___________________________________________________________________________ String select2 = ""; try { Class.forName("com.mysql.jdbc.Driver").newInstance(); conn = (Connection) DriverManager.getConnection(url + bd, login, password); java.sql.Statement stmt = conn.createStatement(); if (conn != null) { try { String insertar = "INSERT INTO usu_mensaje VALUES (default," + id_usu + ", " + id_men + ");"; stmt.executeUpdate(insertar); } catch (Exception exception) { edo = 1; mensaje = exception.getMessage(); } conn.close(); } } catch (Throwable ex2) { conn = null; System.out.println("*********ERROR EN LA CONEXION**********"); System.out.println("*************MENSAJE ERROR = " + ex2.getMessage()); System.out.println("*************CAUSA ERROR = " + ex2.getMessage());


edo = 1; mensaje = ex2.getMessage(); } if (edo == 0 && zz==1 && ss== 1 && aa==1) { response.sendRedirect("temas.jsp?id="+tema+"&nom="+nombre+",&usuario="+usuario+""); } else if (edo == 1 && zz2==2 && ss1== 2 && aa==2) { response.sendRedirect("bad.jsp?pagina=cal_par_maestro.jsp&error=" + mensaje); } } catch (IOException ex) { Logger.getLogger(Sv_men.class.getName()).log(Level.SEVERE, null, ex); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { getConnection(request, response); } /** * Handles the HTTP <code>POST</code> method. * @param request servlet request * @param response servlet response */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { getConnection(request, response); } /** * Returns a short description of the servlet. */ public String getServletInfo() { return "Short description"; } // </editor-‐fold> }

8.-‐ CREACION DEL SERVLET Sv_tema, utilizando los pasos con los cuales creamos el servlet Sv_men crea el servlet Sv_tema, recuerda sustituir el código que te genera Netbeans por el que esta de bajo de este texto.

/* * To change this template, choose Tools | Templates * and open the template in the editor. */ package servlets; import com.mysql.jdbc.Connection; import java.io.*; import java.sql.DriverManager; import java.sql.ResultSet; import java.util.Date; import java.util.logging.Level; import java.util.logging.Logger;


import javax.servlet.*; import javax.servlet.http.*; /** * * @author grajo */ public class Sv_tema extends HttpServlet { /** * Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods. * @param request servlet request * @param response servlet response */ protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-‐8"); PrintWriter out = response.getWriter(); try { /* TODO output your page here out.println("<html>"); out.println("<head>"); out.println("<title>Servlet Sv_inscripcion</title>"); out.println("</head>"); out.println("<body>"); out.println("<h1>Servlet Sv_inscripcion at " + request.getContextPath () + "</h1>"); out.println("</body>"); out.println("</html>"); */ } finally { out.close(); } } public void getConnection(HttpServletRequest request, HttpServletResponse response) { String mensaje = ""; int edo = 0; try { Connection conn = null; int val = 0; String cons_concat2 = ""; String bd="bd_blog"; String login = "usuario"; String password = "usuario"; String url = "jdbc:mysql://localhost/"; int reg = 3; int edo1=0; int zz =0; int zz2 =0; int ss = 0; int ss1 =0; int aa = 0; int bb=0; String usuario = request.getParameter("usu"); String categoria = request.getParameter("categoria"); String tema = request.getParameter("tema"); String id_cat = request.getParameter("id_cat"); Date fecha = new Date(); String id_tema="";


String id_usu=""; String hora = String.valueOf(fecha.getHours()); String min = String.valueOf(fecha.getMinutes()); String horafinal = (hora+":"+min); String insert = "INSERT INTO tema (id_tema, tema, fecha) VALUES (default,'"+tema+"', SYSDATE());"; try { Class.forName("com.mysql.jdbc.Driver").newInstance(); conn = (Connection) DriverManager.getConnection(url + bd, login, password); if (conn != null) { try { java.sql.Statement stm = conn.createStatement(); stm.executeUpdate(insert); } catch (Exception exception) { edo = 1; mensaje = exception.getMessage(); } conn.close(); } } catch (Throwable ex2) { conn = null; System.out.println("*********ERROR EN LA CONEXION**********"); System.out.println("*************MENSAJE ERROR = " + ex2.getMessage()); System.out.println("*************CAUSA ERROR = " + ex2.getMessage()); edo = 1; mensaje = ex2.getMessage(); } if (edo == 0) { zz=1;// response.sendRedirect("bienhecho.jsp?pagina=cal_par_maestro.jsp"); } else if (edo == 1) { zz2=2; //response.sendRedirect("error.jsp?pagina=cal_par_maestro.jsp&error=" + mensaje); } //-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐ try { Class.forName("com.mysql.jdbc.Driver").newInstance(); conn = (Connection) DriverManager.getConnection(url + bd, login, password); if (conn != null) { try { String query = "select id_tema from tema where tema ='" + tema + "' "; java.sql.Statement st = conn.createStatement(); ResultSet rs = st.executeQuery(query); while (rs.next()) { id_tema = rs.getString("id_tema"); } } catch (Exception exception) { edo = 1; mensaje = exception.getMessage(); } conn.close(); } } catch (Throwable ex2) { conn = null;


System.out.println("*********ERROR EN LA CONEXION**********"); System.out.println("*************MENSAJE ERROR = " + ex2.getMessage()); System.out.println("*************CAUSA ERROR = " + ex2.getMessage()); edo = 1; mensaje = ex2.getMessage(); } if (edo == 0) { ss=1; // response.sendRedirect("bienhecho.jsp?pagina=cal_par_maestro.jsp"); } else if (edo == 1) { ss1= 2; //response.sendRedirect("error.jsp?pagina=cal_par_maestro.jsp&error=" + mensaje); } //___________________________________________________________________________ String select1 = ""; try { Class.forName("com.mysql.jdbc.Driver").newInstance(); conn = (Connection) DriverManager.getConnection(url + bd, login, password); java.sql.Statement stmt = conn.createStatement(); if (conn != null) { try { String insertar = "INSERT INTO tema_cat VALUES (default," + id_cat + ", " + id_tema+ ");"; stmt.executeUpdate(insertar); } catch (Exception exception) { edo = 1; mensaje = exception.getMessage(); } conn.close(); } } catch (Throwable ex2) { conn = null; System.out.println("*********ERROR EN LA CONEXION**********"); System.out.println("*************MENSAJE ERROR = " + ex2.getMessage()); System.out.println("*************CAUSA ERROR = " + ex2.getMessage()); edo = 1; mensaje = ex2.getMessage(); } if (edo == 0 && zz==1 && ss== 1) { aa=1; } else if (edo == 1 && zz2==2 && ss1== 2) { aa=2; } //___________________________________________________________________________ //-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐ try { Class.forName("com.mysql.jdbc.Driver").newInstance(); conn = (Connection) DriverManager.getConnection(url + bd, login, password); if (conn != null) { try { String query = "select id_usuario from usuario where correo ='" + usuario + "' "; java.sql.Statement st = conn.createStatement(); ResultSet rs = st.executeQuery(query); while (rs.next())


{ id_usu = rs.getString("id_usuario"); } } catch (Exception exception) { edo = 1; mensaje = exception.getMessage(); } conn.close(); } } catch (Throwable ex2) { conn = null; System.out.println("*********ERROR EN LA CONEXION**********"); System.out.println("*************MENSAJE ERROR = " + ex2.getMessage()); System.out.println("*************CAUSA ERROR = " + ex2.getMessage()); edo = 1; mensaje = ex2.getMessage(); } if (edo == 0) { bb=1; // response.sendRedirect("bienhecho.jsp?pagina=cal_par_maestro.jsp"); } else if (edo == 1) { bb= 2; //response.sendRedirect("error.jsp?pagina=cal_par_maestro.jsp&error=" + mensaje); } //-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐ String select2 = ""; try { Class.forName("com.mysql.jdbc.Driver").newInstance(); conn = (Connection) DriverManager.getConnection(url + bd, login, password); java.sql.Statement stmt = conn.createStatement(); if (conn != null) { try { String insertar = "INSERT INTO usu_tema VALUES (default," + id_usu + ", " + id_tema + ");"; stmt.executeUpdate(insertar); } catch (Exception exception) { edo = 1; mensaje = exception.getMessage(); } conn.close(); } } catch (Throwable ex2) { conn = null; System.out.println("*********ERROR EN LA CONEXION**********"); System.out.println("*************MENSAJE ERROR = " + ex2.getMessage()); System.out.println("*************CAUSA ERROR = " + ex2.getMessage()); edo = 1; mensaje = ex2.getMessage(); } if (edo == 0 && zz==1 && ss== 1 && aa==1 &&bb==1) { response.sendRedirect("rnsajes.jsp?categoria="+categoria+""); } else if (edo == 1 && zz2==2 && ss1== 2 && aa==2 && bb==2 ) { response.sendRedirect("bad.jsp?pagina=cal_par_maestro.jsp&error=" + mensaje); } } catch (IOException ex) { Logger.getLogger(Sv_tema.class.getName()).log(Level.SEVERE, null, ex); }


} @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { getConnection(request, response); } /** * Handles the HTTP <code>POST</code> method. * @param request servlet request * @param response servlet response */ @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { getConnection(request, response); } /** * Returns a short description of the servlet. */ @Override public String getServletInfo() { return "Short description"; } // </editor-‐fold> }