proyecto final bdii y prog

Ju

PROYECTO FINAL DE BASE DE DATOS Y PROGRAMACIN

2010

Tu primer Foro de discusin con JSP y MySQL. Por:

L.I. Alejandro Israel Mercado Lpez

E L C O N O C I M I E N T O S E C O M P A R T E

L.I Alejandro Israel Mercado Lpez Pgina 2

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.


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. Eclipse. 2. Netbeans. 3. JDeveloper. 4. intelliJ IDEA.

En nuestro caso utilizaremos Netbeans, lo cual no quiere decir que sea el mejor, recuerden que solo es un elemento que nos facilitara la 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


INDICE:

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


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.


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 fue instalado correctamente: 1. Abra una ventana del navegador. 2. Escriba localhost o 127.0.0.1 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.


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.


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.


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:


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.


Para insertar los cdigos primero seleccionamos la base de datos bd_blog. Despus da clic en la pestaa sql para poder introducir los cdigos.


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 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8 */; -- -- Base de datos: `bd_blog` -- -- -------------------------------------------------------- -- -- Estructura de tabla para la tabla àdmin` -- CREATE TABLE IF NOT EXISTS àdmin` ( ìd_admin` int(11) NOT NULL AUTO_INCREMENT, `nombre` varchar(30) COLLATE utf8_unicode_ci DEFAULT NULL, `correo` varchar(50) COLLATE utf8_unicode_ci DEFAULT NULL, àpodo` varchar(30) COLLATE utf8_unicode_ci DEFAULT NULL, àvatar` blob, PRIMARY KEY (ìd_admin`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ; -- -- Volcar la base de datos para la tabla àdmin` -- -- -------------------------------------------------------- -- -- Estructura de tabla para la tabla àdmin_cat` -- CREATE TABLE IF NOT EXISTS àdmin_cat` ( ìd` int(11) NOT NULL AUTO_INCREMENT, ìd_admin` int(11) NOT NULL, ìd_cat` int(11) NOT NULL, PRIMARY KEY (ìd`), KEY ìd_admin` (ìd_admin`), KEY ìd_cat` (ìd_cat`)


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


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


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


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


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


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


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


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


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

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


CREACINO DEL PROYECTO WEB:

Ahora que ya tenemos nuestra base de datos creada 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.


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.


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.


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 , su contenido y .

Una vez que lo borres coloca el siguiente cdigo:

Bien, en el cdigo 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.


1) . 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) . 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.

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.

Frm_top_src manda llamar a Frm_top.jsp

Frm_central manda llamar la pgina contra.jsp


2.8.3.- ahora da clic en finish. 2.9 .- El archivo que se genero lo modificaras tal y como se muestra a continuacin. top HACER TU PROPIO BLOG ES MUY FACIL POR: ALEX Explore INICIO REGISTRATE CATEGORIA About Us Contact Us 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.


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.


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.


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; }


#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:


2.16.3 Sustituye tu cdigo por el siguiente: Documento sin ttulo


Introduce tu Usuario y Password Para poder ver el contenido de cualquiera de las categorias de este blog

debes registrarte, si ya estas registrado introduce tu usuario y contrasea.

Usuario Password Te sugerimos que si nunca haz entrado a esta pagina te registres


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:

Con esta lnea de cdigo indicamos que el tipo de archivo importado es CSS.


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. 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.


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. JSP Page


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 "; %>


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.

2 String consulta ="SELECT count(*) FROM ùsuario` usuario INNER JOIN ùsu_pass` usu_pass ON usuario.ìd_usuario` = usu_pass.ìd_usu` INNER JOIN `password` password ON usu_pass.ìd_pass` = password.ìd_password` WHERE usuario.correo = '"+usuario+"' AND password.password = '"+pass+"' AND usuario.id_usuario = usu_pass.id_usu AND password.id_password = id_pass "; E Esta es una consulta que ser guardada en la variable o consulta la cual ser utilizada posteriormente. Esta consulta retorna la suma de los registros que cumplan con los 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 (Con este cdigo hacemos la conexin con el Bean) (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: 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: Cuerpo 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

4 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.


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 ++.

5 if (band == 0) { String status = "1"; session.setAttribute("usuario", usuario); session.setAttribute("cat", cat); session.setAttribute("status", status); response.sendRedirect("index1.jsp"); } else { response.sendRedirect("error"); } Si existi realmente un valor band quedara en cero por lo cual preguntamos si band es igual a cero, crearemos las variables de 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.


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:


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; /** *


* @author alexgrajo */

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

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

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

1 2 3 6


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

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

4


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

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

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

} Si te puedes dar cuenta el 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;

5 1


-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.

2


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

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

Si la misma base de datos estuviera en un sistema DB2 en un servidor llamado dbserver.ibm.com, el URL 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.


En estas lneas de cdigo es donde llega la consulta que mandamos desde nuestra pgina jsp (la cual es ) 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 parmetro sql1 como se ve acontinuacion. public void setConsulta(String sql1){ consulta = sql; iniciar_conexion(); } A la variable consulta del mtodo setconsulta declarada anteriormente le igualamos lo que tenga el parmetro sql1 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(); }

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 {

3 4


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 Descripcin

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

executeUpdate( ) Este mtodo se utiliza con instrucciones SQL de manipulacin de datos tales como INSERT, DELETE o UPDATE.

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

Es recomendable que se cierren los objetos Connection y Statement que se hayan creado cuando ya no se necesiten. Lo que sucede es que cuando en una 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();


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


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: blog de alex


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.


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:

JSP Page


/*********************************************** * 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 ***********************************************/ 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", "", ""], //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')) } } }) .glossymenu{ margin: 5px 0; padding: 0; width: 170px; /*width of menu*/ border: 1px solid #9A9A9A; border-bottom-width: 0; } .glossymenu a.menuitem{


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


int cont=0; String consulta1= "SELECT nombre FROM categoria;"; %> Pagina de inicio Categorias C. JavaScript Reference DOM Reference PAIGNAS AMIGAS CBTC GOOGLE EDMODO SUPERAPORTES METROFLOG YOUTUBE Coding Forums Assuming the current page is named "current.htm", the below links when navigated to expands a particular header on that page: - Expand 1st header within "submenuheader" header group Helpful links: - Adding arbitrary links hat expand/ collapse the contents - Taking advantage of the oninit() and onopenclose() event handlers


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. 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 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: Lnea de cdigo utilizada para inicializar nuestro javabean en nuestra pgina. 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.


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.

JavaScript

DOM

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.

CBTC GOOGLE EDMODO SUPERAPORTES METROFLOG YOUTUBE

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. C. 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 C. : 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. : 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


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.


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.


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={


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)}) },