Proyecto Final Bdii y Prog

PROYECTO FINAL DE BASE DE DATOS Y PROGRAMACIN Ju
Tu primer Foro de discusin con JSP y MySQL.

Por:
L.I. Alejandro Israel Mercado Lpez
2010
EL CONOCIMIENTO ES UNIVERSAL
OBJETIVO: El alumno, deber realizar un proyecto de tipo web. El proyecto se basara en la creacin de un blog de estudio, donde el usuario podr crear sus propios temas a partir de una categora ofrecida por el usuario administrativo. En cada tema todos los usuarios inscritos a la pgina podrn emitir sus opiniones o discutir de manera sana del tema en cuestin. Esta pgina ser personalizada por usuario, esto quiere decir que aparecern sus nombres y propios temas dentro del sistema.
FORMA DE TRABAJO: El alumno deber crear paso a paso, segn las instrucciones del manual la aplicacin. Se debe tomar en cuenta que las explicaciones se harn 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 creacin de este.
TECNOLOGIAS A UTILIZAR: Para la creacin de este pequeo ejemplo de pagina web, utilizaremos varias tecnologas entre las cuales se encuentran: JSP( la combinacin de java con html que nos permitir crear paginas dinmicas), JS(java script el cual es utilizado para proporcionar a la pgina 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, categoras, temas, comentarios y administradores. Dentro del lenguaje java utilizaremos JAVABEANS para conectar nuestra aplicacin con nuestra base de datos y as poder hacer consultas y SERVLETS que nos permitirn insertar y modificar datos de nuestra base de datos con los elementos tomados de un formulario.
L.I Alejandro Israel Mercado Lpez
Pgina 2
HERRAMIENTAS A UTILIZAR: Es necesario como programadores poder tener una herramienta que nos facilite la creacin 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 programacin y as poder ahorrar tiempo. Existen mltiples IDEs que podemos utilizar en el desarrollo de aplicaciones que tengan que ver con el lenguaje java tales como: 1. 2. 3. 4. Eclipse. Netbeans. JDeveloper. 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 programacin por lo cual, al ser la idea el ayudarnos en nuestro trabajo cualquiera de los anteriores resulta excelente. Adems algo de lo ms importante es que utilizaremos XAMPP versin 3.2.4 para manipular nuestra base de datos mediante el phpmyadmin.
Explicacin del cdigo:

Esta y todas las dems explicaciones estarn ordenadas por color donde: El color ___ representara todas la llamadas de archivos externos a nuestra pgina o archivo web. Estos pueden ser css o js dependiendo de la ocasin. 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 pgina. El color ___ representa los botones de nuestra aplicacin. El color ___ representa los mtodos de consultas que hagamos en la paliacin. El color ___ representa todas las consulta sql que tengamos en cada archivo
L.I Alejandro Israel Mercado Lpez Pgina 3
INDICE: 1. 2. 3. 4. 5. INSTALACION DE XAMPP.5 PREPARACION DE XAMPP PARA TRABAJAR CON InnoDB.8 CREACION DE LA BASE DE DATOS A UTILIZAR9 INSERCION DE INFORAMCION A LA BASE DE DATOS.12 INICIO DEL PROYECTO WEB.22
Pgina 4
INSTALACIN DE XAMPP: Despus 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 instalacin 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.
Pgina 5
1.6 Por ultimo da clic en install para que se empiece a instalar la aplicacin. Despus de instalar XAMPP podr encontrarlo en Inicio > Programas > XAMPP. All encontrar el Panel de Control de XAMPP, a travs del cual podr iniciar y parar el servidor e instalar y desinstalar servicios.
Ahora
comprobaremos
que
XAMPP ventana localhost
fue
instalado del o
correctamente: navegador. 127.0.0.1
1. Abra una 2. Escriba 3. Ver una pgina como la siguiente:
Fig 2. Probando XAMPP
4. Seleccione el idioma que prefiera y estar en la pgina de administracin del XAMPP.
Pgina 6
Fig 3. Administracin XAMPP Despus de esto estamos listos para configurar MYSQL. Este proceso es sencillo y nos permitir preparar la base de datos que utilizaremos.
Pgina 7
HABILITAR INNODB:
InnoDB es una tecnologa 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 configuracin de MySQL my.cfg. En el caso particular de Xampp (muy utilizado hoy en da como distribucin de servidor Web), el archivo a editar se encuentra en la siguiente ruta. C:\xampp\mysql\bin\my.cnf 1) Comentar la lnea que dice ( si ya esta comentada djala como esta): Skip-innodb
2) Des comentar las siguientes cuatro lneas, (si las lneas ya estn 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 vern disponible la opcin de InnoDB.
Pgina 8
CREACIN DE LA BASE DE DATOS:

Creacin del usuario y contrasea de nuestra base de datos: Antes de empezar es importante crear un usuario y una contrasea para poder acceder a nuestra base de datos desde la aplicacin, 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 pestaa privilegios
4.-Da clic en agregar un usuario 5.-Ahora colocaremos el nombre de usuario y la contrasea. Para efectos de que no se nos olvide nuestro usuario y contrasea usaremos como usuario: usuario y como password: usuario. Colcalos 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:
Pgina 9
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 cdigos necesarios para crear nuestras tablas y llenarlas de informacin hay que crear una base de datos o esquema que nos permita contener toda esa programacin que introduciremos ms delante. Por lo tanto los pasos para crear una base de datos son: 1.- Da clic en la pgina de inicio, como se muestra a continuacin:
Da clic en este icono. 2.- Ahora en la seccin 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 cdigos necesarios para modelarla. Este modelado esta creado segn la planeacin del alumno.
Pgina 10
Para insertar los cdigos primero seleccionamos la base de datos bd_blog. Despus da clic en la pestaa sql para poder introducir los cdigos.
Pgina 11
INTRODUCCION DE CODIGO:
--------phpMyAdmin SQL Dump version 3.2.4 http://www.phpmyadmin.net Servidor: localhost Tiempo de generacin: 06-05-2010 a las 15:09:41 Versin del servidor: 5.1.41 Versin de PHP: 5.3.1
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO"; /*!40101 /*!40101 /*!40101 /*!40101 SET SET SET SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; 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`)
Pgina 12
) ENGINE=InnoDB AUTO_INCREMENT=1 ;
DEFAULT
CHARSET=utf8
COLLATE=utf8_unicode_ci
--- 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', 0x4573746520657320656c20756c74696d6f20636f6e63696572746f2064652073636f 7270696f6e73206e6f207465206c6f20707565646573207065726465722e0d0a456c20 37206465205365707469656d62726520646520657374652061c3b16f20656e206c6120 636975646164206465206d657869636f, '01:00:00'),
Pgina 13
(2, '2010-03-26', 0x556e6f206465206c6f73206d656a6f726573206a756761646f726573206861207265 73756c7461646f20616469636f742e0d0a0d0a526f6e616c646f20636f6e20646f7069 6e6720706f73697469766f2e206a616a616a616a612e, '12:00:00'), (3, '2010-03-26', 0x70617261206d616e646172206120756e6120706167696e612078206465736465206a 617661207365207574696c697a6120656c20636f6d616e646f20726573706f6e73652e 73656e6452656469726563742822706167696e612061206c6c616d61722229, '09:50:00'), (4, '2010-03-26', 0x456e206a737020706f64656d6f73206372656172207661726961626c657320646520 736573696f6e20636f6d6f20736520766520656e20656c207369677569656e74652065 6a656d706c6f2073657373696f6e2e7365744174747269627574652822757375617269 6f222c207573756172696f293b, '11:30:00'), (14, '2010-04-09', 0x67726163696120706f722074752061706f72746520616c657820, '09:09:00'), (15, '2010-04-09', 0x6772616369617320706f722074752061706f72746520706572206d656a6f72206461 6e6f7320756e20656a656d706c6f207061726120656e74656e646572206d6173206772 6163696173, '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', 0x6573746520657320756e61206d616e65726561206465206861636572206c61732063 6f736173206d617320666163696c6573, '16:40:00'), (28, '2010-04-09', 0x5920646520717565207469706f20657320656c20636f6e63696572746f2061637573 74696f3f20636f6d6f20656c206465206c6973626f6120, '17:59:00'), (29, '2010-04-09', '', '18:01:00'), (30, '2010-04-09', 0x61736920657320636f6d6f207369656d7072652067616e6120656c20737570657269 6f72, '18:01:00'), (31, '2010-04-15', 0x4372656f20717565206c6f7320656c656d656e746f73206465206c656e6775616a65 206a73702070726163746963616d656e746520736f6e206c6f73206d69736d6f207175 65206c6f73206465206a61766120657374727563747572617320646520636f6e74726f 6c2065746320616c676f20706f7220656c20657374696c6f, '12:38:00'), (32, '2010-04-15', 0x416c677569656e2070756564652064656369726d6520636f6d6f2063726561722075 6e20736572766c6574207920636f6d6f2066756e63696f6e61, '12:40:00'), (33, '2010-04-15', 0x61736b64666ac383c2b16173666a64c383c2b161736b6664, '12:45:00'), (34, '2010-04-15', 0x3c68313e686f6c613c2f68313e, '12:49:00'),
Pgina 14
(35, '2010-04-15', 0x616c677569656e20707565646520706f6e6572206c61207461626c61747572612064 652077696e64206f66206368616e6765, '13:33:00'), (36, '2010-04-15', 0x706173656e206c6120726f6c61, '13:57:00'), (37, '2010-04-15', 0x617175692065737461206c6120726f6c6120687474703a2f2f7777772e7a61702d63 69667261732e636f6d2f63696672612f343837342f, '13:57:00'), (38, '2010-04-15', 0x6666666666666666666666666666660d0a666666666666666666666666660d0a6666 66666666666666666666666666660d0a66666666666666666666666666666666660d0a 666666666666666666666666666666666666660d0a6666666666666666666666666666 666666666666660d0a6666666666666666666666666666666666666666660d0a666666 6666666666666666666666666666666666666666, '13:58:00'), (39, '2010-04-15', 0x66666666666666666666666666666666666666666666666666666666666666666666 6666666666666666666666666666666666666666666666666666666666666666666666 6666666666666666666666666666666666666666666666666666666666666666666666 6666666666666666666666666666666666666666666666666666666666666666666666 6666666666666666666666666666666666666666666666666666666666666666666666 6666666666666666666666666666666666666666666666666666666666666666666666 6666666666666666666666666666666666666666666666666666666666666666666666 6666666666666666666666666666666666666666666666666666666666666666666666 6666666666666666666666666666666666666666666666666666666666666666666666 6666666666666666666666666666666666666666666666666666666666666666666666 6666666666666666666666666666666666666666666666666666666666666666666666 6666666666666666666666666666666666666666666666666666666666666666666666 6666666666666666666666666666666666666666666666666666666666666666666666 6666666666666666666666666666666666666666666666666666666666666666666666 6666666666666666666666666666666666666666666666666666666666666666666666 6666666666666666666666666666666666666666666666666666666666666666666666 6666666666666666666666666666666666666666666666666666666666666666666666 6666666666666666666666666666666666666666666666666666666666666666666666 66, '13:58:00'), (40, '2010-04-15', 0x4120656e67726173617220657361732065737472656d696461646573207665746572 616e6f73, '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 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),
Pgina 15
(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` --
Pgina 16
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, 'Maana 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 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); -- --------------------------------------------------------
Pgina 17
--- 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', 'alex@hotmail.com', '201003-09',NULL); INSERT INTO ùsuario` (ìd_usuario`, `nom`, `dir`, àpodo`, `correo`, `fecha`, àvatar`) VALUES (2, 'francisco romero javier punipero riamirez gonzalez', 'alksdjf', 'panchito', 'panchitopunipero@hotmail.com', '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 AUTO_INCREMENT=31 ;
--- Volcar la base de datos para la tabla ùsu_mensaje` -INSERT (1, 1, (2, 2, (3, 1, (4, 1, (5, 1, (6, 1, (7, 1, INTO ùsu_mensaje` (ìd`, ìd_usu`, ìd_mens`) VALUES 1), 2), 3), 4), 14), 15), 18),
Pgina 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 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`)
Pgina 19
) ENGINE=InnoDB AUTO_INCREMENT=8 ;
DEFAULT
CHARSET=utf8
--- Volcar la base de datos para la tabla ùsu_tema` -INSERT (1, 1, (2, 1, (3, 1, (4, 1, (5, 1, (6, 1, (7, 1, INTO ùsu_tema` (ìd`, ìd_usu`, ìd_tema`) VALUES 6), 7), 8), 9), 10), 11), 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`
Pgina 20
-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.
Pgina 21
CREACINO DEL PROYECTO WEB:
Ahora que ya tenemos nuestra base de datos creada segn lo visto a lo largo del semestre en clase y en las prcticas, 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 opcin all que es la que contiene todos los elementos necesarios para poder crear la aplicacin.
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.- Creacin 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 aplicacin File/New Project 2.2.- Te aparecer la siguiente ventana, en la cual seleccionaras la categora web y como tipo de proyecto web application. Tal como se muestra continuacion.
Pgina 22
2.3.- Da clic en next. 2.4.- De la siguiente venta que te aparecer, en el apartado Project Name, introducirs el nombre de tu aplicacin, 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 opcin apache tomcat 6.0.16 y da clic en next. Este ser el servidor donde se desplegaran los archivos de nuestra pgina web, o como comn mente se dice: es donde se hace el deploy para que la aplicacin quede lista para usarse.
Pgina 23
2.5.- Da clic en next. Te aparecer la siguiente venta donde seremos capaces de seleccionar un tipo de framework que es una metodologa para la creacin de aplicaciones web. Por ahora como nuestro objetivo es crear una aplicacin web simple dejaremos de lado los frameworks y daremos clic en finish.
2.6.- Cuando tu aplicacin 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 pequea aplicacin.
Pgina 24
Observa la estructura del cdigo, vers que es archivo simple de html.
2.7.- vamos a crear la estructura de nuestra pgina web mediante frames. Para esto es necesario que borres del cdigo anterior el segmento body esto es desde <body>, su contenido y </body>. Una vez que lo borres coloca el siguiente cdigo: <frameset rows="30%,*" cols="*"> <frame name="frm_top" src="frm_top.jsp" bordercolor="#050000"index.jsp></frame> <frame name="frm_central" src="contra.jsp" scrolling="auto"> </frameset> <noframes></noframes>
scrolling="no"
noresize
Bien, en el cdigo <frameset rows="30%,*" cols="*"> hemos definido el rea donde se crearn nuestros dos frames los cuales sern tipo horizontal o de tipo rengln, noten la palabra rows en la sentencia frame, este es la que hace que tome el efecto de rengln. De forma grafica la lnea roja delimita la accin del frameset lo que est dentro de este los explicamos a continuacin.
Pgina 25
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 pgina frm_top.jsp. Scrolling=no hace que la pgina no tenga la barra lateral de desplazamiento que por lo regular tienen todas las ventanas. Noresize hace que el frame no cambie nunca de tamao. 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 pgina contra.jsp. Scrolling = auto hace que la pgina pueda tener barra lateral si el contenido de esta excede el rea visible de la pagina.
Frm_top_src manda llamar a Frm_top.jsp
Frm_central manda llamar la pgina contra.jsp
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 despus en jsp.
2.8.2.- Te aparecer la siguiente ventana donde tendrs que poner el nombre de tu pagina jsp el cual ser frm_top. Tal como se muestra a continuacin.
Pgina 26
2.8.3.- ahora da clic en finish. 2.9 .- El archivo que se genero lo modificaras tal y como se muestra a continuacin.
<%@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 cdigo anterior estamos exportando un css (style sheet cascade) que nos permitir darle formato a nuestra pgina. Este css esta marcado con amarillo y letras rojas. L.I Alejandro Israel Mercado Lpez Pgina 27
Esta lnea de cdigo dice que haremos una liga (link rel="stylesheet") o mandaremos llamar a una hoja de estilo. El cdigo href="css/css/main.css", hace referencia a un archivo llamado main.css que est en la ruta css/css de nuestro directorio raz, 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 quedara 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 ms 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 despus da clic en other como se muestra en la siguiente imagen. Nota como los pasos estn marcados con rojo.
2.11.- Selecciona la categora web y en el apartado file types selecciona Cascading Style Sheet y da clic en next.
Pgina 28
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 cdigo lo siguiente.
Pgina 29
2.14.- Borra todo el cdigo y sustityelo 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; } L.I Alejandro Israel Mercado Lpez Pgina 30
#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 cdigo css.
2.15.- En el edmodo esta un archivo tipo Zip, llamado imgenes.zip descrgalo y descomprime la carpeta que contiene el Zip en la carpeta \web\css, de tu proyecto. 2.16.- Ahora vamos a crear la pgina 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. Guate en la siguiente imagen:
Pgina 31
2.16.3 Sustituye tu cdigo 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>
Pgina 32
<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 contrasea. <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>
Pgina 33
2.16.4 Explicacin del cdigo:

Esta y todas las dems explicaciones estarn ordenadas por color donde:
El cdigo color ___ est importando los funcionamientos del archivo contra.css que permitir darle formato o forma a nuestra pgina contra.jsp. Donde: <link rel="stylesheet" El atributo REL se usa para definir la relacin 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 estn 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 lnea de cdigo indicamos que el tipo de archivo importado es CSS. <% String cat = request.getParameter("categoria"); String stat= request.getParameter("stat"); Esta funcin 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">
Pgina 34
En estas lneas de cdigo 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 pgina 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 botn en nuestra pagina Class: la clase es tipo botn para que tenga funcionalidad de botn
NOTA: Si tedas cuenta con la explicacin anterior sabemos que el contenido de este formulario va a ser enviado a la pgina sessin.js. En la cual crearemos las variables de sesin para que despus de 20, 10 , 15 o 30 minutos de inactividad estas se borren y el usuario no pueda ver el contenido de la pgina por lo cual el siguiente paso es crear esta pgina.
Pgina 35
2.16.5 Creacin de la pgina 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 opcin new y despus da clic en jsp. Guate 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 pgina te aparecer en el rea de codificacin y en este momento es cuando tendrs que modificarla y dejarla tal como se muestra a continuacin. <%-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> <% L.I Alejandro Israel Mercado Lpez Pgina 36
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>
Pgina 37
2.16.6 Explicacin del cdigo: 1

String usuario = request.getParameter("usu_text"); String pass= request.getParameter("pass_text"); String cat = request.getParameter("categoria");
En estas tres lneas de cdigo, 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 categora que contiene el tipo de categora a la cual accede el usuario. Este ltimo no es utilizado. 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 parmetros 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 contrasea correcta y que por lo tanto puede acceder a nuestra aplicacin web.
3 <jsp:useBean id="conex" class="beans.conexion" scope="page"/> (Con este cdigo hacemos la conexin con el
Bean) <jsp:setProperty name="conex" property="consulta" value= "<%=consulta%>"/> (una vez creada la conexin 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 continuacin 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. Inicializacin del bean: <jsp:useBean ... > Cuerpo </jsp:useBean> Cuerpo: cdigo 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 slo para la pgina. request: disponible slo para la peticin. session: disponible durante la sesin. application: para las pginas que compartan ServletContext value: este es un valor que mandamos en caso de que nuestro javabean tenga que recibir parmetros para funcionar. Como en nuestro caso, utilizaremos el javabean para realizar la consulta que se explico anteriormente
while (conex.getResultado().next()) { String existe = conex.getResultado().getString("count(*)"); if (existe.compareTo("0") == 0) { band++;
En esta lnea de cdigo hacemos referencia a conex que es el nombre de nuestro javabean ve al punto 3 de esta explicacin.
Pgina 38
Cuando el Bean est en accin este ejecuta la consulta que le mandamos y por lo tanto contiene los resultados que podremos obtener mediante la funcin getResultado().next(). En la siguiente lnea de cdigo 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 funcin tipo resulset que nos retorna mediante su mtodos internos una especie de matriz con la informacin que se obtiene de la consulta. Connex.getResultado.getString(campo) es una funcin que nos permite obtener el un valor del resulset mediante la funcin getString. Lo que lleva entre parntesis 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 lneas de cdigo 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 ++.
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 sesin necesarias para nuestro proyecto. Si todo sali correctamente mediante la lnea response.sendRedirect nos permitir re direccionar la aplicacin a la pgina index1.jsp. Pero si todo sali mal nos re direccionar a la pagina error que en este caso la tendrs que hacer por ti mismo siguiendo los paso que hemos hecho anteriormente. El diseo es libre y al ser un error solo es demostrativo. Para generar una sesin se utiliza la funcin session.setAttribute(nombre de sesin, variable de sesin). La duracin de nuestra variable de sesin se manipulara desde nuestro web.xml de nuestro proyecto, tal como se muestra en la siguiente imagen.
Pgina 39
2.16.7 Creacin de un JavaBean

En la explicacin pasada estbamos 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 pestaa projects. 2.- Despus localiza Source Packages y despligalo, nota que tendrs 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: guate con la siguiente imagen.
5.- Te aparecer una ventana como la siguiente:
6.- En el campo package Name pondrs el nombre de beans. 7.- Da clic en finish y veras como se ha creado un nuevo paquete llamado beans. 8.- Despus de esto da clic derecho en el nuevo paquete llamado beans. 9.- Del men emergente selecciona la opcin new. 10.- Y selecciona la opcin java class. Nota: guate con la imagen siguiente:
Pgina 40
11.- Te aparecer una ventana como la siguiente, donde colocara en el apartado Calss Name el nombre conexin, 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 codificacin de Netbeans. 13.- A este archivo lo modificaremos de la siguiente manera. Modifica tu archivo tal cual esta el siguiente cdigo 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; /** *
Pgina 41
* @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(); }
Pgina 42
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); } }
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); } }
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); } }
Pgina 43
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); } }
5
}
Si te puedes dar cuenta el cdigo que introdujiste a tu clase conexin est dividido en 6 partes segn su ejecucin. Con el uno iniciamos la ejecucin del programa y terminamos en el 6. Esto suena lgico pero para aquellos que no sepan ni que es lgico pues sirve. Empecemos a describir cmo funciona este JavaBean; Aqu tenemos la declaracin 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 contrasea 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;
Pgina 44
-Variable tipo connection que nos permite guardar una conexin 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 pginas que mande llamar nuestro JavaBean.
Una vez que hemos declarado nuestras variables podemos crear nuestra conexin 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 estn 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 continuacin: 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 despus 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 cmo se ejecutan las instrucciones para esa base de datos en particular. Hay varias formas de hacerlo, pero la ms sencilla es utilizar el mtodo 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 conexin a la base de datos. Recuerda que declaramos una variable conn tipo conecction, pues este es el momento de utilizarla para guardar esta conexin. Establecer la conexin 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 ubicacin de la fuente de datos.
Pgina 45
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 sera 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 sera : - String url = "jdbc:mysql://localhost/bd_blog"; Una vez que se ha determinado el URL, se puede establecer una conexin a una base de datos. El objeto Connection es el principal objeto utilizado para proporcionar un vnculo entre las bases de datos y una aplicacin en Java. Connection proporciona mtodos para manejar el procesamiento de transacciones, para crear objetos y ejecutar instrucciones SQL, y para crear objetos para la ejecucin de procedimientos almacenados. Se puede emplear tanto el objeto Driver como el objeto DriverManager para crear un objeto Connection. Se utiliza el mtodo connect() para el objeto Driver, y el mtodo getConnection() para el objeto DriverManager. El objeto Connection proporciona una conexin esttica a la base de datos. Esto significa que hasta que se llame en forma explcita a su mtodo close() para cerrar la conexin o se destruya el objeto Connection, la conexin a la base de datos permanecer activa. La manera ms usual de establecer una conexin a una base de datos es invocando el mtodo getConnection() de la clase DriverManager. A menudo, las bases de datos estn protegidas con nombres de usuario (login) y contraseas (password) para restringir el acceso a las mismas. El mtodo getConnection() permite que el nombre de usuario y la contrasea se pasen tambin como parmetros.
Por lo tanto podremos tener la siguiente lnea de cdigo resultante para poder establecer la conexin 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 lneas de cdigo solo son para poder captar los errores que se tengan en la obtencin del jdbc y la conexin a la base de datos.
Pgina 46
En estas lneas de cdigo es donde llega la consulta que mandamos desde nuestra pgina 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 creacin de la pgina session.jsp). Para ser especficos e ir al grano, la variable consulta va a ser mandada al mtodo consulta de finido mediante la propiedad property=consulta. Esta variable llega al JavaBean al mtodo setConsulta en su 1 parmetro sql como se ve acontinuacion. public void setConsulta(String sql ){ consulta = sql; iniciar_conexion(); } A la variable consulta del mtodo setconsulta declarada anteriormente le igualamos lo que tenga el 1 parmetro sql y mandamos llamar al mtodo iniciar_conexion. Si nosotros quisiramos hacer diferentes consultas al mismo tiempo en JavaBean, lo que tendramos que hacer es lo siguiente: Declarar el mtodo 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(); }
1
En el mtodo pasado obtenamos la consulta que haba sido enviada de nuestra pagina jsp, esta consulta es guardada en el parmetro sql, despus internamente en el mtodo setConsulta a la variable consulta le igualamos el valor del parametro sql. Por ltimo mandamos llamar el mtodo iniciar_conexion que es el que se va a explicar a continuacin.
public void iniciar_conexion() { -Este es el inicio del mtodo iniciar conexin, este mtodo no recibe ningn parmetro. if (conn != null) { -Si la conexin que se hizo anteriormente es diferente a null entramos a la condicin. try {
Pgina 47
Statement stm = conn.createStatement();
Creacin de una Sentencia Como se mencion en la seccin anterior, el objeto Connection permite establecer una conexin 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 envan 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 definicin de datos como CREATE TABLE o CREATE INDEX. Un comando de manipulacin de datos como INSERT, DELETE o UPDATE. Un sentencia SELECT para consulta de datos.
Un comando de manipulacin de datos devuelve un contador con el nmero de filas (registros) afectados, o modificados, mientras una instruccin 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 mtodo 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 mtodos execute(), executeUpdate() o executeQuery(). La eleccin del mtodo depende del tipo de consulta que se va a enviar al servidor de bases de datos: Mtodo execute( ) Descripcin Se usa principalmente cuando una sentencia SQL regresa varios conjuntos de resultados. Esto ocurre principalmente cuando se est haciendo uso de procedimientos almacenados. Este mtodo se utiliza con instrucciones SQL de manipulacin de datos tales como INSERT, DELETE o UPDATE. Se usa en las instrucciones del tipo SELECT.
executeUpdate( ) executeQuery( )
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 aplicacin en Java se estn 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 cul 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 aplicacin de bases de datos que se est ejecutando. Es por esto que se recomienda que se cierren de manera explcita los objetos Connection y Statement. De manera similar a Connection, la interfaz Statement tiene un mtodo close() que permite cerrar de manera explcita un objeto Statement. Al cerrar un objeto Statement se liberan los recursos que estn en uso tanto en la aplicacin Java como en el servidor de bases de datos. Statement stmt = conn.createStatement(); stmt.close();
Pgina 48
a = stm.executeQuery(consulta); -Si recordamos a es una variable de tipo ResulSet la cual puede almacenar el contenido que nos retorne la ejecucin de la consulta mediante la clase Statement. ResultSet: _ Mantiene un cursor apuntando a su fila de datos actual _ Proporciona mtodos para recuperar valores de columna
} catch (SQLException ex) { Logger.getLogger(conexion.class.getName()).log(Level.SEVERE, null, ex); } } -La lnea 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 versin 1.4 de java2SE Sun microsystem agreg una funcin o concepto que permite controlar, dar formato y publicar mensajes a travs de los llamados registros (log), pertenecientes al paquete java.util.logging. stos pueden emplearse para dar mensajes de informacin, estados de los datos o la programtica o inclusive errores ocurridos durante la ejecucin. Pueden beneficiar a varios empleadores de la aplicacin como programadores, personal a cargo de realizar pruebas y por otra parte tambin a usuarios del sistema inclusive sino est asociado al cdigo 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 configuracin FINE Para informacin de la traza de la aplicacin FINER Para informacin de rastreo de la traza de la aplicacin FINEST Nivel ms bajo y de menor prioridad
Pgina 49
2.16.8 Creacin de la pgina "index1.jsp"

1.- Ve Netbeans y en tu proyecto da clic derecho en WebPages, selecciona new y despus da clic en JSP. Tal como se muestra a continuacin.
2.- Ahora en la ventana que emerge en el aparta JSP File Name introduce la palabra index1 y da clic en finish. Guate con la imagen de abajo.
3.- Una vez que aparezca nuestra rea de trabajo en la paleta de cdigo modifica el archivo para que quede tal y como est el siguiente cdigo:
<%-- 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%,*">
Pgina 50
<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 cdigo es parecido al index principal de tu proyecto. Si necesitas repasar cmo funcionan los framesets ve a la creacin de la pgina index.jsp al inicio del manual. 5.- Esta archivo lo que hace es dividir nuestra pgina en tres partes en la izquierda o en el frame izquierdo mostramos la pagina frm_left que tendr un men con las categoras, temas o publicidad de nuestra pgina. En el frame frm_central1 desplegaremos la pgina frm_inicial.jsp y en el frame derecho mostraremos la pgina juegos.html. Explicacin de las propiedades ms importantes de este archivo: Scrolling: nos permite hacer que nuestra pgina 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 pgina no cambie su tamao predeterminado cuando el entorno en que se muestra es ms pequeo o ms grande Bordercolor: Este atributo hace que el borde de nuestro frameset tome el color que deseemos con valores hexadecimales. En nuestra pgina session.jsp creamos unas variables de sesin donde una de ellas era el status que le damos un valor de uno (ver creacin de session.jsp) bueno esta variable solo durara 30 minutos y despus 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 redireccine a la pgina contra.jsp.
Pgina 51
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: guate 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 cdigo 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">
Pgina 52
/*********************************************** * 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{
Pgina 53
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");
Pgina 54
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>
Pgina 55
Explicacin del cdigo:

Esta y todas las dems explicaciones estarn ordenadas por color donde: 1.- El color ___ representara todas la llamadas de archivos externos a nuestra pgina o archivo web. Estos pueden ser css o js dependiendo de la ocasin. En este caso es importante mencionar que para que una pgina web tenga efectos visuales es necesario hacer uso de un lenguaje de programacin llamado java script (que no tiene nada que ver con el lenguaje java). Todos los archivos que tengan algn tipo de efecto como mens desplegables tienen que ver con el lenguaje javascript y para que nuestra pgina 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 lneas de cdigo son utilizadas para mandar llamar un cdigo js para que interacte con nuestro html.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> Esta lnea de cdigo 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 cdigo 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 lnea de cdigo 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 lnea 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 ms delante.
2.- El color ___ representara todos los request.getParameters que tengamos en nuestros archivos. Session.getValue(). Bien en estas lneas de cdigo primero:
String categoria; -Declaramos una variable llamada categora de tipo string String status = (String)session.getValue("status"); String Usuario = (String) session.getValue("usuario");
-Estas lneas de cdigo son nuevas y las podemos desglosar de la siguiente manera: 1. Tenemos una declaracin de variables status y Usuario de tipo string lo cual no debe de tener ningn problema para entenderse pues es una simple declaracin de variable. 2. Lo que esta despus de nuestro operador de asignacin es lo importante. La funcin session.getValue(nombre de la variable de sesin) nos permite obtener los valores que les dimos a las variables de sesin en la pgina session.jsp. Estas variables de sesin 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 haba dicho anterior mente:
<jsp:useBean id="conex" class="beans.conexion" scope="session"/> Lnea de cdigo utilizada para inicializar nuestro javabean en nuestra pgina. <jsp:setProperty name="conex" property="consulta" value="<%=consulta1%>"/> Con esta lnea de cdigo mandamos a nuestro javabean la variable consulta1 que contiene el cdigo sql para obtener todas las categoras de nuestro programa. Para ahondar ms en este tema ve a las explicaciones que se hicieron al inicio de este manual.
Pgina 56
4.
El color ___ representa los componentes html que tengamos en nuestra pgina.
Las siguientes lneas de cdigo tienen algo en comn y es que tienen un href. Este href es una liga que nos mandara a la pagina que esta despus del signo de asignacin (href=http://www.cbtc.mx).
El atributo target hace que el navegador muestre esta informacin en nuestro frame frm_central1, esta es el rea central de nuestra pgina. <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 dems lneas de cdigo con href y nos mandan a una pgina 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 mtodos de consultas que hagamos en la aplicacin.
Una vez que nuestro JavaBean hace sus conexiones y ejecuta la sentencia sql podremos sacar la informacin del resulset que declaramos. Conex.getRestultado().next(): Es una funcin 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 categora 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 lnea de cdigo: 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 lnea de cdigo podemos ver despus de rnsajes un signo de interrogacin. Este signo de interrogacin indica que a la pagina rnsajes le vamos a mandar un parmetro llamado categora con el contenido de la variable categora. target="frm_central">: Este atributo permite que la pagina rnsajes.jsp se muestre en el frame frm_central C. <%=categoria%>: Esta lnea de cdigo hace que aparezca visualmente el nombre de la categora como link para que el usuario de clic en ella y nos mande a rnsajes.jsp <%}%> </ul>
Pgina 57
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 categoras de la tabla categora creada anteriormente. Gracias a esta consulta podremos hacer que se muestre dinmicamente.
2.17 Creacin 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.
Pgina 58
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. Guate en la siguiente imagen.
4.- Del apartado categories, selecciona other 5.- En el apartado File Types, selecciona JavaScript File. 6.- Da clic en next.
Pgina 59
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 cdigo //** 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={
Pgina 60
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)}) },
Pgina 61
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
Pgina 62
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
Pgina 63
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) } }) }) } }
Pgina 64
2.17.2 Colocacin 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.
Pgina 65
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.
Pgina 66
13.-Da doble clic sobre el archivo imgusu.rar, al hacer esto de debe aparecer la siguiente ventana:
14.- con la misma mecnica 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 imgenes y cuanta cosa sea necesaria dentro de nuestra aplicacin.
Pgina 67
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.
Pgina 68
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 cdigo 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++;
Pgina 69
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 cdigos pasados, si te das cuenta todos los archivos jsp que estamos tratando son semejantes solo tendremos que interpretar su funcionamiento con los nuevos parmetros.
Pgina 70
2.17.3 CREACION DE LA PAGINA juego.html
1.- Eta es una pgina que en su extencion tiene html, el motivo es que no estamos utilizando ningn 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 cdigo 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.
Pgina 71
2.17.4 CREACION DE LA PAGINA rnsajes.jsp

Este cdigo lo que permite es ver los temas que estn dados de alta en las diferentes categora, podremos seleccionar uno de ellos para poder participar en los que comentarios que se estn generando.
1.- Crea una pgina llamada rnsajes.jsp en tu proyecto web 2.- Sustituye el cdigo 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/xhtml1transitional.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>
Pgina 72
<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;
Pgina 73
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) {%>  <div id="contenedor" class="contenedor">      <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");
Pgina 74
%> <%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>
  <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) { %>
Pgina 75
<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>     <div id="footer" class="pie"> <h6>grajo 2010, todo el C_C reservado</h6> </div>  </div> <%} else { }%> </body> </html>
Pgina 76
Explicacin de cdigo En esta ocasin solo haremos incapie en estas tres sentencias: Esta consulta nos permite obtener el id, el nombre del tema de la tabla temas donde la categora 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 categora que hayamos seleccionado. String consulta3 = "SELECT nombre FROM categoria;"; Este lnea nos permite selecciona el id de la categora 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.
Pgina 77
2.17.4 CREACION DE LA PAGINA temas.jsp

Esta es la pgina 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 cdigo 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/xhtml1strict.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");%>
Pgina 78
<%}%> <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>
Pgina 79
<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 ocasin en tu cdigo esta una lnea 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 mtodo 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 mtodo 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.
Pgina 80
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 despus 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
Pgina 81
5.- Una ves creado el paquete servlets da clic derecho en el y da clic en new, despus 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 cdigo que resulte sustityelo 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 {
Pgina 82
/** * 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 {
Pgina 83
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) {
Pgina 84
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());
Pgina 85
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 cdigo 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;
Pgina 86
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="";
Pgina 87
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;
Pgina 88
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())
Pgina 89
{ 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); }
Pgina 90
@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> }
Pgina 91

Proyecto Final Bdii y Prog

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Proyecto Final Bdii y Prog

Enviado por

Direitos autorais:

Formatos disponíveis

PROYECTO FINAL DE BASE DE DATOS Y PROGRAMACIN Ju

Tu primer Foro de discusin con JSP y MySQL.

L.I Alejandro Israel Mercado Lpez

Explicacin del cdigo:

L.I Alejandro Israel Mercado Lpez

1.3 Te aparecer el ayudante de instalacin de xampp:

L.I Alejandro Israel Mercado Lpez

XAMPP ventana localhost

correctamente: navegador. 127.0.0.1

1. Abra una 2. Escriba 3. Ver una pgina como la siguiente:

Fig 2. Probando XAMPP

4. Seleccione el idioma que prefiera y estar en la pgina de administracin del XAMPP.

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

CREACIN DE LA BASE DE DATOS:

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

3.- Ahora selecciona la pestaa privilegios

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

CREACINO DEL PROYECTO WEB:

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

Observa la estructura del cdigo, vers que es archivo simple de html.

L.I Alejandro Israel Mercado Lpez

Frm_top_src manda llamar a Frm_top.jsp

Frm_central manda llamar la pgina contra.jsp

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

2.16.4 Explicacin del cdigo:

<input type="text" name="usu_text" id="usu"> <input type="password" name="pass_text" id="pass">

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

2.16.5 Creacin de la pgina session.jsp

L.I Alejandro Israel Mercado Lpez

2.16.6 Explicacin del cdigo: 1

while (conex.getResultado().next()) { String existe = conex.getResultado().getString("count(*)"); if (existe.compareTo("0") == 0) { band++;

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

2.16.7 Creacin de un JavaBean

5.- Te aparecer una ventana como la siguiente:

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

L.I Alejandro Israel Mercado Lpez

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

public void iniciar_conexion() {

} public void iniciar_conexion2() {

} public void iniciar_conexion3() {

<frameset rows="" cols="89%,">