Documentos de Académico
Documentos de Profesional
Documentos de Cultura
ASP Ajax y
s
á nc hez Flore
an S
Cristi
www.detodoprogramacion.org
www.detodoprogramacion.org
Aplicaciones desarrolladas con ASP - AJAX y JQUERY
con diferentes manejadores de Base de Datos
Autor: Cris an Sánchez Flores
© Derecho de autor reservado
Empresa Editora Macro E.I.R.L.
ISBN Nº 978-612-4034-71-8
Hecho el Depósito Legal en la Biblioteca Nacional del Perú Nº 2010-08594
Prohibida la reproducción parcial o total, por cualquier medio o método de este libro sin
previa autorización de la Empresa Editora Macro E.I.R.L.
www.detodoprogramacion.org
CrisƟan Sánchez Flores
Trainer Oficial de Cer ficaciones Microso de la Universidad Nacional de Ingeniería (UNI), cuenta con
las cer ficaciones MCP, MCTS Windows ApplicaƟon y Web ApplicaƟon, MCPD Web ApplicaƟon y MCT.
Profesor de los cursos libres de la Universidad Nacional del Callao (Facultad de Ingeniería) y de la
Universidad Par cular César Vallejo (Facultad de Ingeniería de Sistemas); asimismo, Docente de los
cursos de Titulación (SIDET) de IDAT e Instructor de Cer ficaciones Microso y cursos libres en Sistemas
UNI – Facultad de Ingeniería de Sistemas de la UNI.
Desarrolló proyectos con empresas tales como el Banco Financiero, PRONAA, Banco Sudamericano,
EsSalud, Clínica Maison de Santé, Banco de la Nación, Banco Central de Reserva del Perú, Wester Union;
ha sido Jefe de Desarrollo de la Caja Metropolitana de Lima, Jefe de Sistemas en el Ins tuto Charles
Chaplin, Subgerente de Desarrollo y TIC´S de la Municipalidad de Los Olivos.
www.detodoprogramacion.org
Dedicatoria
A Dios, por nunca abandonarme y enseñarme a ser mejor cada día.
A la gente que trabaja por un sueldo bajito para darle de comer a sus
hijitos.
A mi familia, por ser única, especial y maravillosa, que Dios siempre los
bendiga.
www.detodoprogramacion.org
Agradecimiento
Un agradecimiento a las siguientes personas:
A Susan Mendizábal y a Juan Kuga, dos alumnos con un gran futuro de una
capacidad envidiable, que apoyaron este libro en forma incondicional.
www.detodoprogramacion.org
Introducción
Este libro ene un significado especial para mí, porque fue desarrollado con alumnos de diferentes
ins tuciones, que con sus preguntas, entendimos las expecta vas que ellos enen y pudimos resumir la
necesidad en lo que se refiere a desarrollo de Aplicaciones en WEB, no con ejemplos simples ni clásicos,
sino con aplica vos reales que ellos puedan entender y mejorarlo.
Asimismo, ene como función principal el desarrollo de diferentes aplicaciones, que pueden ser aplicadas
en empresas reales; quiere explicar cómo es la forma, la estructura y la metodología que se deben
u lizar en desarrollo de aplicaciones. También nos presenta una caracterís ca especial que ene como
contenido principal el desarrollo de aplicaciones reales. Este libro te presenta toda la experiencia de un
Analista y Programador con experiencia y las interrogantes de los alumnos que recién están empezando
este camino.
www.detodoprogramacion.org
Índice
Capítulo 1
Aplicación de manejo de Imágenes y Videos - Youtube ............................................................. 13
Aplicación - Proyecto Youtube ....................................................................................................13
Explicación de la Instalación y funcionamiento del aplica vo ....................................................34
Creación de la base de datos ..............................................................................................34
Capítulo 2
Aplicación del proceso de Banca Virtual .................................................................................. 243
Proceso de banca virtual ...........................................................................................................243
Creación de la clase de datos ..............................................................................................251
Creación de la clase negocios .............................................................................................253
Creación de la web forms de la aplicación ..........................................................................255
Página de error ...................................................................................................................280
Codificación de WebConfig ..................................................................................................283
Trabajando con Archivos de Tipo JQuery .............................................................................286
Cómo trabaja la Banca Virtual ............................................................................................289
Capítulo 3
Aplicación del Proyecto de Tienda Virtual ................................................................................ 299
Proyecto Tienda Virtual ‘TELEREDPERÚ’ ....................................................................................299
Descripción ..........................................................................................................................299
Usuario ................................................................................................................................299
Administra vo .....................................................................................................................299
Instalación del Proyecto .............................................................................................................300
Introducción ........................................................................................................................300
Programas necesarios para laa ejecución del sistema de uso .............................................300
Modelamiento de la Base de datos de una Tienda Virtual.........................................................302
Instalación del Servicio MYSQL...................................................................................................307
Restaurando la basde de datos del script al servidor MYSQL.....................................................310
Configurando el driver de MYSQL para la conexión con la base de datos..................................312
www.detodoprogramacion.org
Abriendo el proyecto en visual y cargando la página default.ASPX............................................314
Proceso de Construcción del Aplica vo .....................................................................................314
Manual de usuario .....................................................................................................................329
Capítulo 4
Aplicación del carrito de compra ............................................................................................. 305
Carrito de compra web ...............................................................................................................305
Definición.............................................................................................................................305
Creación del carrito de compra ...........................................................................................305
Creación de la capa de datos, en dad y negocio ................................................................362
Guía de referencia sobre la aplicación del carrito de compra ...................................................379
Instalación de Ajax......................................................................................................................382
Capítulo 5
Aplicación de copias masivas y manejo de imágenes ............................................................... 411
Aplica vo de copia masiva en WEB - SQLBULKCOPY .................................................................411
Qué es el SQLBULKCOPY .....................................................................................................411
Cómo trabaja el aplica vo ..................................................................................................423
Trabajando con BLOB en ASP (Manejo de gráficos)....................................................................425
Cómo trabaja el aplica vo BLOB ..........................................................................................426
Capítulo 6
Aplicación trabajando con Linq (ejemplos cortos) .................................................................... 447
Trabajando con LINQ .................................................................................................................447
Definición ............................................................................................................................447
Ejemplo de búsqueda u lizando LINQ ...............................................................................447
Programación que se elaboró para el funcionamiento correcto del LINQ ..........................457
Con nuando con LINQ ........................................................................................................463
Algunas observaciones para poder trabajar con LINQ.........................................................471
Realizando una tercera consulta con LINQ .........................................................................482
Ejemplo con LINQ - Consulta y mantenimiento .................................................................488
Ejemplos de LINQ con conexión a MYSQL ..........................................................................496
www.detodoprogramacion.org
Capítulo 7
Aplicación de Facturación Web ................................................................................................. 509
Ejemplo de concurrencias .........................................................................................................509
Aplicación de facturación en web ..............................................................................................517
Ingreso de usuario ..............................................................................................................517
Menú de opciones ..............................................................................................................517
Ingreso de nueva factura ....................................................................................................518
Consulta de facturas ...........................................................................................................522
Anular facturas ....................................................................................................................522
www.detodoprogramacion.org
CAPÍTULO
Aplicación de manejo de
1 Imágenes y Videos - YouTube
A lo largo de las aplicaciones, hemos tratado de ver todos los aspectos, y qué mejor que tratarlo con
una programadora muy analí ca y con gran futro en el mercado, estoy hablando de Susan Mendizábal,
alumna de tulación de una ins tución de pres gio, la cual me hizo ver un aspecto mucho más aplicado
que los alumnos requieren; gran apoyo de Susan. Ahora sí, empecemos:
Como se puede ver, en la parte superior se captura la fecha del sistema, esta página nos permi rá
buscar videos o ver los que se nos presenta al lado derecho; también podremos acceder a la página de
registro o podremos ingresar.
www.detodoprogramacion.org
14 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
En este caso, podemos ver cómo se nos muestra información sobre el video, ejemplo: Nro. de Visitas,
Puntos, el nombre del usuario a quien le pertenece el video, fecha, ver más videos del usuario, así
como algunos videos relacionados.
La opción de descargar y de votación a favor o en contra están deshabilitadas, porque sólo son para los
usuarios que estén registrados.
También:
Comentarios
Registrar Comentario
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 15
Como se ve, nos muestra información de los usuarios que han escrito su comentario; en este caso
no se muestra su imagen, su número de comentarios escritos, la fecha del comentario, ni su nombre
usuario con un link para ver información sobre su perfil.
La opción de subir comentario está deshabilitada porque aún no estamos registrados dentro del
sistema.
Ahora lo que haremos será ver los datos del usuario que registró este video, para ello haremos lo
siguiente:
Como se ve, nos muestra parte de los datos del usuario, así como una opción para ver sus videos.
www.detodoprogramacion.org
16 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 17
Ahora nos registraremos para ver qué más podemos hacer en el Si o Web, recordemos que lo antes
mostrado es el acceso de un usuario invitado.
www.detodoprogramacion.org
18 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Cuando hayamos validado el nombre del usuario y su correo, podemos ingresar, pero siempre será
necesario volver a validarlo, de lo contrario el botón grabar quedará deshabilitado.
Una vez registrado, no llevará a una página denominada ‘Página de Usuario’ donde se nos muestran
las siguientes opciones.
Aquí nos mostrará el número de mensajes nuevos que tenemos, en este caso como recién nos hemos
registrado no tenemos ningún mensaje.
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 19
Como ven, puede ser una imagen de extensión gif; en realidad, no importa la extensión de la imagen.
www.detodoprogramacion.org
20 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Ahora con este mismo usuario vemos cómo el menú principal ha cambiado; en este caso tenemos el
canal de usuarios, veamos que encontramos aquí.
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 21
Ahora sí se muestra la información completa del usuario, además podremos ver sus videos.
Ahora vemos cómo las opciones para votar y descargar el video son habilitadas, así como nuestra
imagen que se ve en todas las páginas.
Descarguemos el video:
www.detodoprogramacion.org
22 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 23
www.detodoprogramacion.org
24 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Y ahí está con nuestra imagen recién subida y nos muestra que es nuestro primer comentario.
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 25
Bueno, al ingresar nos envía a la pagina del usuario, aquí nos muestra que tenemos dos nuevos
mensajes, así que los leeremos.
www.detodoprogramacion.org
26 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Se nos mostrará un panel pequeño dentro del iframe, escogemos la opción mensajes recibidos para
ver nuestro mensaje, y se nos muestra dos aéreas: mensajes nuevos y todos los mensajes; en el
primero estarán los mensajes que no hemos leído, y en el otro todos los que ya leímos, leeremos el
primero.
Nos muestra los datos del mensaje, así como la opción de responder.
Antes de responder veamos qué pasó con nuestro mensaje. Ahora es considerado como an guo.
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 27
Podemos leerlos, o si no queremos que nadie los vea, podemos Eliminarlos, uno o los dos al mismo
empo; ahora estos serán eliminados sólo de nuestra bandeja, no de la del usuario que la recibe.
www.detodoprogramacion.org
28 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 29
www.detodoprogramacion.org
30 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Bien, si deseamos escribirle a otro usuario podemos hacerlo, para ello está la opción escribir mensaje,
si no recordamos el nombre de usuario podemos ayudarnos con el botón de usuarios.
Botón
Solo nos permite
escoger un
usuario
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 31
Como se ve, en nuestro entorno ya no tenemos mensajes nuevos, y en nuestro perfil, los datos de
cuenta no pueden modificarse, todo lo demás sí.
Se nos muestra todos nuestros videos, así como sus detalles, además de la opción de verlo.
Más abajo podemos darle mantenimiento, esto sólo será posible si escogemos la opción detalle en el
primer listado.
www.detodoprogramacion.org
32 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 33
Para subirlo, lo primero es registrarlo; en este caso sólo deberán ser videos pequeños, con un máximo
de 25 s por video.
www.detodoprogramacion.org
34 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Ahora veamos si a nuestro usuario Toñito le llegó el mensaje enviado por Suzan.
Lo lee, responde y lo elimina, pero sólo de su bandeja, porque mientras Suzan no lo elimine podrá
seguir leyéndolo.
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 35
www.detodoprogramacion.org
36 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Aceptamos el contrato.
Nos pide la ruta dónde instalar el programa, si desea puede personalizarla, pero la dejaremos por
defecto.
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 37
Ahora nos requiere ingresar la contraseña que le será asignada al usuario administrador; en este caso
será system, ya que es igual al nombre del usuario administrador. Como todo programa nos pide
confirmarla para evitar así problemas posteriores (olvido de la contraseña), en caso no coincidir se nos
será adver do (todo en minúsculas).
www.detodoprogramacion.org
38 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Esperamos:
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 39
Bueno, demoró un poco pero ya está listo, dejamos por defecto la opción marcada para iniciar la Base
de Datos.
www.detodoprogramacion.org
40 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Como se darán cuenta, su interfaz de trabajo es a través de una página web; ingresamos con nuestro
usuario system y, como recordamos, su clave es también system, ya saben todo en minúsculas.
Lo que haremos será crear un usuario con el que podamos trabajar para la creación de las tablas en la
BD; nuestro usuario será usuario y su clave, igualmente, usuario, fácil de recordar.
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 41
Después, colocamos la información de nuestro usuario y le asignamos todos los permisos, como se
muestra a con nuación:
www.detodoprogramacion.org
42 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Al ingresar, nos pedirá que nos iden fiquemos con nuestro usuario; escogemos las opciones como se
ven a con nuacion:
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 43
Si por algún mo vo no ingresamos, ya sea por un error de conexción o porque no reconoce al usuario,
es necesario volver a iniciar el servicio de la base de datos; para ello hacemos lo siguiente:
Entonces se nos mostrará esta ventana, indicándonos que el servicio está iniciado:
www.detodoprogramacion.org
44 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 45
Como se puede, ver estamos creando las tablas Usuario y Mensajes, definiendo el nombre de cada
campo de la tabla, así como su po de dato, especificando que no se acepten datos nulos.
Cuando definimos un po de datos de po date y queremos asignarle la fecha del sistema por defecto,
colocamos el siguiente comando:
Y si queremos que un campo tome un defecto por valor, haremos lo mismo que en el caso anterior,
sólo que ahora colocaremos lo que deseamos según cada caso.
Como se podrán dar cuenta, cuando se ha definido un valor por default en la creacion de la tabla, sólo
es necesario ingresar la palabra default para el registro del dato.
www.detodoprogramacion.org
46 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Ahora, cuando se desea ingresar una fecha es necesario conver rla previamente, dándole el po de
formato de fecha.
to_ date(´27/01/1984´,´DD/MM/YYYY´)
Una vez terminada la creación del script, lo ejecutaremos para la creación de las tablas y el registro de
datos, sólo es necesario dar clic en el siguiente icono.
Cuando se hayan creado las tablas con éxito, nos mostrará el siguiente mensaje, dándonos a entender
que no existen errores. Cuando u lizamos este producto por primera vez, por lo general nos muestra
una ventana evidenciando un error, lo cual no ene mayor importancia.
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 47
Ahora crearemos los procedimientos almacenados para realizar los mantenimientos necesarios a cada
una de las tablas; para ello, hay tener en cuenta que aquí debemos trabajar en paquetes que vendrían
a ser como esquemas, si nos referimos a SQL Server, donde serán creados los procedimientos.
Esta es la forma:
Si son obervadores, se habrán dado cuenta que en la tercera línea de código se está declarando un
po de dato, que nos servirá para los pocedimientos que nos devuelvan consultas o simples listados.
En las líneas posteriores se pueden ver cómo son declarados los procedimientos almacenados; cuando
estos reciben parámetros, es necesario asiginarles un po de dato al parámetro que se va a recibir.
Por ejemplo:
nom in usuario.nom_usu%Type,
www.detodoprogramacion.org
48 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Donde se especifica que el po de dato será igual que el campo de la tabla a la cual se hace refierencia.
Cuando son procedimientos que tendrán como resultando una consulta, siempre es necesario que un
parámetro sea enviado, así no requiera parámetro alguno dicho procedimiento.
Ejemplo:
En este caso, el procedimiento permi rá validar que el nick del usuario no existe ya en nuestros datos;
el orden del envío del parámetro iocursor in out micursor no ene mayor relevancia, puede ser
primero, segundo o tercero, eso no importa.
Si habrán notado en la primera línea de codigo del script, sabrán que esta parte sólo sirve para crear la
cabeza del paquete, por así llamarla, porque un paquete en Oracle está cons tuido por dos partes que
son: la cabeza o head y el cuerpo o body .
Cuando se termina cualquier sentencia es necesario colocar el “;”, es como el go en SQL Server, que es
para indicar el fin de una instrucción.
end paquete_usuario;
Lo más importante es saber que en el head se declaran todos los procedimientos que se van a crear, en
caso olvidáramos alguno, y a pesar de ello lo desarrollamos en el body, este no será creado y tampoco
será conciderado como error.
Y ahora comenzamos con la creacion del body. Recordemos que aquí se desarrollarán los
procedimientos declarados, que deberán ser iguales a como fueron declarados, es decir, el mismo
número de parámetros, el mismo po, el mismo orden.
Veamos como:
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 49
Por favor, no olvidar el slash de la parte superior, es importante; como se ve, el procedimiento lleva el
mismo nombre y el mismo Nro. de parámetros.
Pero todas las sentencias van encerradas en bloque que comienza con la sentencia :
is begin
Aquí creamos el primero, en el que tenemos que generar el siguiente código del registro en la tabla:
Primero abrimos nuestro cursor, porque ya sabemos que es necesario para las consultas, después
realizamos la consulta, usamos algunas funciones (substr, cast, max) y bueno los caracteres || para
concatenar una cadena.
En caso de INSERT
www.detodoprogramacion.org
50 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Es necesario que al final vaya la sentencia commit; para que la sentencia se ejecute al instante y permita
actualizar la base de datos de manera instantánea.
Cuando hallamos terminado de desarrollar todos los procedimientos sólo será necesario colocar lo
siguiente, así especificaremos que ya se ha terminado la parte del body del paquete.
end paquete_usuario;
/
Después ejecutamos.
Si fue creado correctamente se nos mostrará de la siguiente manera, esto es sólo el head; si existe
error, se verá la imagen del paquete marcada con una x.
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 51
En caso de error es posible ubicarlo, para ello sólo debemos seguir los siguientes pasos:
Entonces, se nos mostrará el script de la creación y la línea que está generando este error.
www.detodoprogramacion.org
52 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Lo mismo se puede hacer con las tablas, la diferencia es que las tablas pueden ser restauradas una vez
eliminadas, mas no los paquetes.
En este caso eliminamos la tabla comentarios; si deseamos volver a restaurarla, sólo es necesario
visualizarla en el panel, en la carpeta Recycle Bin, o si se desea se podrá eliminar de manera defini va.
Para eliminar.
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 53
Para restaurar.
Cuando escogamos esta opción, aparecerá esta ventana preguntándonos por el nuevo nombre, en
este caso lo dejaremos igual. Y listo, la tabla ya está nuevamente para ser u lizada.
Bueno, ahora se adjuntan todos los scrip de las tablas, sólo es necesario ejecutarlos.
---------------------------------------------------------
-------------------Base de Datos-------------------------
---------------------------------------------------------
www.detodoprogramacion.org
54 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
);
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 55
www.detodoprogramacion.org
56 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
/* ------------------------------------------------------------------------ */
------------------------------------------------------------------------------
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 57
------------------------------------------------------------------------------
------------------------------------------------------------------------------
www.detodoprogramacion.org
58 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
/*--------------------------------------------------------------------------*/
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 59
www.detodoprogramacion.org
60 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Paquete Usuario
----------------------------------------------------------------------------------
----------------------------------- Paquete Usuario ------------------------------
----------------------------------------------------------------------------------
procedure sp_generar_usuario(
iocursorin out micursor
);
procedure sp_graba_usuario(
cod in usuario.cod_usu%Type , nom in usuario.nom_usu%Type,
ape in usuario.ape_usu%Type , fena in usuario.fec_nac%Type,
pai in usuario.cod_pais%Type , nick in usuario.nick_usu%Type ,
pass in usuario.pas_usu%Type , corr in usuario.cor_usu%Type
);
procedure sp_busca_nick(
nick in usuario.nick_usu%Type , iocursor in out micursor
);
procedure sp_busca_correo(
corr in usuario.cor_usu%Type , iocursor in out micursor
);
procedure sp_actualiza_usuario(
nick in usuario.nick_usu%Type , nom in usuario.nom_usu%Type,
ape in usuario.ape_usu%Type , fena in usuario.fec_nac%Type,
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 61
pai in usuario.cod_pais%Type
);
procedure sp_conf_pass_usua(
nick in usuario.nick_usu%Type , pass in usuario.pas_usu%Type ,
iocursor in out micursor
);
procedure sp_act_pass_usuario(
nick in usuario.nick_usu%Type , pass in usuario.pas_usu%Type
);
procedure sp_usuario_conectados(
iocursor in out micursor
);
procedure sp_perfil_usuario(
nick in usuario.nick_usu%Type , iocursor in out micursor
);
procedure sp_ingreso_usuario(
nick in usuario.nick_usu%Type , pass in usuario.pas_usu%Type,
iocursor in out micursor
);
procedure sp_est_con_usuario(
nick in usuario.nick_usu%Type ,est in usuario.est_con%Type
);
procedure sp_act_foto_usu(
nick in usuario.nick_usu%Type , est in usuario.fot_usu%Type,
fot in usuario.nom_fot%Type
);
procedure sp_elim_usuario(
nick in usuario.nick_usu%Type , est in usuario.est_usu%Type
);
procedure sp_lista_usuario(
iocursor in out micursor
);
procedure sp_lista_correo(
iocursor in out micursor ,nick in usuario.nick_usu%Type
);
end paquete_usuario;
/
create or replace package body paquete_usuario
as
-------------------------------------------------------------------------------
www.detodoprogramacion.org
62 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
end sp_generar_usuario;
-------------------------------------------------------------------------------
procedure sp_graba_usuario(
cod in usuario.cod_usu%Type , nom in usuario.nom_usu%Type,
ape in usuario.ape_usu%Type , fena in usuario.fec_nac%Type,
pai in usuario.cod_pais%Type , nick in usuario.nick_usu%Type ,
pass in usuario.pas_usu%Type , corr in usuario.cor_usu%Type
)is begin
----------------------------------------------------------------------------------
procedure sp_busca_nick(
nick in usuario.nick_usu%Type , iocursor in out micursor
)is begin
end sp_busca_nick;
----------------------------------------------------------------------------------
procedure sp_busca_correo(
corr in usuario.cor_usu%Type , iocursor in out micursor
)is begin
end sp_busca_correo;
----------------------------------------------------------------------------------
procedure sp_actualiza_usuario(
nick in usuario.nick_usu%Type , nom in usuario.nom_usu%Type,
ape in usuario.ape_usu%Type , fena in usuario.fec_nac%Type,
pai in usuario.cod_pais%Type
)is begin
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 63
end sp_actualiza_usuario;
---------------------------------------------------------------------------------
procedure sp_conf_pass_usua(
nick in usuario.nick_usu%Type , pass in usuario.pas_usu%Type ,
iocursor in out micursor
)is begin
end sp_conf_pass_usua;
----------------------------------------------------------------------------------
procedure sp_act_pass_usuario(
nick in usuario.nick_usu%Type , pass in usuario.pas_usu%Type
)is begin
end sp_act_pass_usuario;
---------------------------------------------------------------------------------
procedure sp_usuario_conectados(
iocursor in out micursor
)is begin
end sp_usuario_conectados;
--------------------------------------------------------------------------------
procedure sp_perfil_usuario(
nick in usuario.nick_usu%Type , iocursor in out micursor
)is begin
www.detodoprogramacion.org
64 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
end sp_perfil_usuario;
----------------------------------------------------------------------------------
procedure sp_ingreso_usuario(
nick in usuario.nick_usu%Type , pass in usuario.pas_usu%Type,
iocursor in out micursor
)is begin
end sp_ingreso_usuario;
----------------------------------------------------------------------------------
procedure sp_est_con_usuario(
nick in usuario.nick_usu%Type ,est in usuario.est_con%Type
)is begin
end sp_est_con_usuario;
----------------------------------------------------------------------------------
procedure sp_act_foto_usu(
nick in usuario.nick_usu%Type , est in usuario.fot_usu%Type,
fot in usuario.nom_fot%Type
)is begin
end sp_act_foto_usu;
----------------------------------------------------------------------------------
procedure sp_elim_usuario(
nick in usuario.nick_usu%Type , est in usuario.est_usu%Type
)is begin
end sp_elim_usuario;
---------------------------------------------------------------------------------
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 65
procedure sp_lista_usuario(
iocursor in out micursor
)is begin
end sp_lista_usuario;
----------------------------------------------------------------------------------
procedure sp_lista_correo(
iocursor in out micursor ,nick in usuario.nick_usu%Type
)is begin
end sp_lista_correo;
end paquete_usuario;
/
Paquete Mensajes
procedure sp_generar_mensaje(
iocursor in out micursor
);
procedure sp_graba_mensaje(
cod in mensajes.cod_men%Type ,asu in mensajes.asu_men%Type,
usu_rec in mensajes.cod_usu_rec%Type,
usu_env in mensajes.cod_usu_env%Type , men in mensajes.des_men%Type
);
procedure sp_lista_mensajes_nuevos(
usu in mensajes.cod_usu_rec%Type ,iocursor in out micursor
);
procedure sp_lista_mensajes_todos(
usu in mensajes.cod_usu_rec%Type ,iocursor in out micursor
);
procedure sp_lista_mensajes_escritos(
usu in mensajes.cod_usu_env%Type ,iocursor in out micursor
);
procedure sp_eliminar_mensajes_rec(
www.detodoprogramacion.org
66 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
procedure sp_eliminar_mensajes_esc(
cod in mensajes.cod_men%Type,usu in mensajes.cod_usu_env%Type
);
procedure sp_det_men_env(
cod in mensajes.cod_men%Type,usu in mensajes.cod_usu_env%Type,
iocursor in out micursor
);
procedure sp_det_men_rec(
cod in mensajes.cod_men%Type,usu in mensajes.cod_usu_rec%Type,
iocursor in out micursor
);
procedure sp_act_mensajes_leido(
cod in mensajes.cod_men%Type,usu in mensajes.cod_usu_rec%Type
);
end paquete_mensajes;
/
CREATE OR REPLACE package body paquete_mensajes
as
----------------------------------------------------------------------------------
end sp_generar_mensaje;
----------------------------------------------------------------------------------
procedure sp_graba_mensaje(
cod in mensajes.cod_men%Type ,asu in mensajes.asu_men%Type,
usu_rec in mensajes.cod_usu_rec%Type,
usu_env in mensajes.cod_usu_env%Type , men in mensajes.des_men%Type
)is begin
------------------------------------------------------------------------------
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 67
procedure sp_lista_mensajes_nuevos(
usu in mensajes.cod_usu_rec%Type ,iocursor in out micursor
)is begin
end sp_lista_mensajes_nuevos;
----------------------------------------------------------------------------------
procedure sp_lista_mensajes_todos(
usu in mensajes.cod_usu_rec%Type ,iocursor in out micursor
)is begin
end sp_lista_mensajes_todos;
----------------------------------------------------------------------------------
procedure sp_lista_mensajes_escritos(
usu in mensajes.cod_usu_env%Type ,iocursor in out micursor
)is begin
end sp_lista_mensajes_escritos;
----------------------------------------------------------------------------------
procedure sp_eliminar_mensajes_rec(
cod in mensajes.cod_men%Type,usu in mensajes.cod_usu_rec%Type
)is begin
end sp_eliminar_mensajes_rec;
----------------------------------------------------------------------------------
www.detodoprogramacion.org
68 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
procedure sp_eliminar_mensajes_esc(
cod in mensajes.cod_men%Type,usu in mensajes.cod_usu_env%Type
)is begin
end sp_eliminar_mensajes_esc;
----------------------------------------------------------------------------------
procedure sp_det_men_env(
cod in mensajes.cod_men%Type,usu in mensajes.cod_usu_env%Type,
iocursor in out micursor
)is begin
end sp_det_men_env;
----------------------------------------------------------------------------------
procedure sp_det_men_rec(
cod in mensajes.cod_men%Type,usu in mensajes.cod_usu_rec%Type,
iocursor in out micursor
)is begin
end sp_det_men_rec;
---------------------------------------------------------------------------------
procedure sp_act_mensajes_leido(
cod in mensajes.cod_men%Type,usu in mensajes.cod_usu_rec%Type
)is begin
end sp_act_mensajes_leido;
----------------------------------------------------------------------------------
end paquete_mensajes;
/
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 69
Paquete Videos
create or replace package paquete_videos
as
type micursor is ref cursor;
procedure sp_genera_videos(
iocursor in out micursor
);
procedure sp_listar_videos_todos(
iocursor in out micursor
);
procedure sp_busca_video(
nom in videos.nom_vid%Type , iocursor in out micursor
);
procedure sp_busca_titulo(
cod in videos.nom_vid%Type , iocursor in out micursor
);
procedure sp_graba_video(
cod in videos.nom_vid%Type , nom in videos.nom_vid%Type,
dur in videos.dur_vid%Type , usu in videos.nick_usu%Type,
gen in videos.cod_gen%Type
);
procedure sp_act_ptos(
cod in videos.cod_vid%Type ,pto in videos.pun_vid%Type
);
procedure sp_act_vis(
cod in videos.cod_vid%Type ,vis in videos.num_vis%Type
);
procedure sp_vid_usuario (
nick in videos.nick_usu%Type,iocursor in out micursor
);
procedure sp_usuario_vid (
cod in videos.cod_vid%Type,iocursor in out micursor
);
procedure sp_det_video (
cod in videos.cod_vid%Type,iocursor in out micursor
);
procedure sp_actualiza_video(
cod in videos.cod_vid%Type , nom in videos.nom_vid%Type,
gen in videos.cod_gen%Type
);
www.detodoprogramacion.org
70 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
procedure sp_elimina_video(
cod in videos.cod_vid%Type
);
end paquete_videos;
/
create or replace package body paquete_videos
as
----------------------------------------------------------------------------------
end sp_genera_videos;
---------------------------------------------------------------------------------
end sp_listar_videos_todos;
---------------------------------------------------------------------------------
procedure sp_busca_video(
nom in videos.nom_vid%Type , iocursor in out micursor
)is begin
open iocursor for
select cod_vid,nom_vid from videos where nom_vid like '%'||nom||'%'
and videos.est_vid=0;
end sp_busca_video;
----------------------------------------------------------------------------------
procedure sp_busca_titulo(
cod in videos.nom_vid%Type , iocursor in out micursor
)is begin
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 71
end sp_busca_titulo;
----------------------------------------------------------------------------------
procedure sp_graba_video(
cod in videos.nom_vid%Type , nom in videos.nom_vid%Type,
dur in videos.dur_vid%Type , usu in videos.nick_usu%Type,
gen in videos.cod_gen%Type
)is begin
end sp_graba_video;
---------------------------------------------------------------------------------
procedure sp_act_ptos(
cod in videos.cod_vid%Type ,pto in videos.pun_vid%Type
)is begin
end sp_act_ptos;
---------------------------------------------------------------------------------
procedure sp_act_vis(
cod in videos.cod_vid%Type ,vis in videos.num_vis%Type
)is begin
end sp_act_vis;
---------------------------------------------------------------------------------
procedure sp_vid_usuario (
nick in videos.nick_usu%Type,iocursor in out micursor
)is begin
end sp_vid_usuario;
--------------------------------------------------------------------------------
www.detodoprogramacion.org
72 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
procedure sp_usuario_vid (
cod in videos.cod_vid%Type,iocursor in out micursor
)is begin
----------------------------------------------------------------------------------
procedure sp_det_video (
cod in videos.cod_vid%Type,iocursor in out micursor
)is begin
---------------------------------------------------------------------------------
procedure sp_actualiza_video(
cod in videos.cod_vid%Type , nom in videos.nom_vid%Type,
gen in videos.cod_gen%Type
)is begin
end sp_actualiza_video;
---------------------------------------------------------------------------------
procedure sp_elimina_video(
cod in videos.cod_vid%Type
)is begin
----------------------------------------------------------------------------------
end paquete_videos;
/
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 73
Paquete Pais
----------------------------------------------------------------------------------
----------------------------------- Paquete Pais----------------------------------
---------------------------------------------------------------------------------
create or replace package paquete_pais
as
type micursor is ref cursor;
procedure sp_generar_pais(
iocursor in out micursor
);
procedure sp_graba_pais(
cod in pais.cod_pais%Type, nom in pais.nom_pais%Type
);
procedure sp_actualiza_pais(
cod in pais.cod_pais%Type, nom in pais.nom_pais%Type,
est in pais.est_pais%Type
);
procedure sp_listar_pais_todos(
iocursor in out micursor
);
procedure sp_lista_pais_activos(
iocursor in out micursor
);
procedure sp_busca_pais(
iocursor in out micursor,nom in pais.nom_pais%Type
);
end paquete_pais;
/
----------------------------------------------------------------------------------
end sp_generar_pais;
-------------------------------------------------------------------------------------
www.detodoprogramacion.org
74 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
procedure sp_graba_pais(
cod in pais.cod_pais%Type,nom in pais.nom_pais%Type
)
is begin
end sp_graba_pais;
---------------------------------------------------------------------------------
procedure sp_actualiza_pais(
cod in pais.cod_pais%Type,nom in pais.nom_pais%Type,
est in pais.est_pais%Type
)
is begin
end sp_actualiza_pais;
----------------------------------------------------------------------------------
procedure sp_listar_pais_todos(
iocursor in out micursor
)
is begin
open iocursor for
select * from pais order by cod_pais;
end sp_listar_pais_todos;
---------------------------------------------------------------------------------
procedure sp_lista_pais_activos(
iocursor in out micursor
)
is begin
end sp_lista_pais_activos;
----------------------------------------------------------------------------------
procedure sp_busca_pais(
iocursor in out micursor,nom pais.nom_pais%Type
)
is begin
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 75
if nom!='todos' then
open iocursor for
select * from pais where nom_pais like nom
order by cod_pais;
end if;
end sp_busca_pais;
end paquete_pais;
/
Paquete Genero
procedure sp_generar_genero(
iocursor in out micursor
);
procedure sp_graba_genero(
cod in genero.cod_gen%Type, nom in genero.nom_gen%Type
);
procedure sp_actualiza_genero(
cod in genero.cod_gen%Type, nom in genero.nom_gen%Type,
est in genero.est_gen%Type
);
procedure sp_listar_genero_todos(
iocursor in out micursor
);
procedure sp_lista_genero_activos(
iocursor in out micursor
);
procedure sp_busca_genero(
iocursor in out micursor,nom in genero.nom_gen%Type
);
end paquete_genero;
/
create or replace package body paquete_genero
as
-------------------------------------------------------------------------------------
www.detodoprogramacion.org
76 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
procedure sp_generar_genero(
iocursor in out micursor
)
is begin
end sp_generar_genero;
---------------------------------------------------------------------------------
procedure sp_graba_genero(
cod in genero.cod_gen%Type, nom in genero.nom_gen%Type
)
is begin
end sp_graba_genero;
---------------------------------------------------------------------------------
procedure sp_actualiza_genero(
cod in genero.cod_gen%Type, nom in genero.nom_gen%Type,
est in genero.est_gen%Type
)is begin
end sp_actualiza_genero;
---------------------------------------------------------------------------------
procedure sp_listar_genero_todos(
iocursor in out micursor
)
is begin
open iocursor for
select * from genero order by cod_gen;
end sp_listar_genero_todos;
---------------------------------------------------------------------------------
procedure sp_lista_genero_activos(
iocursor in out micursor
)
is begin
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 77
end sp_lista_genero_activos;
----------------------------------------------------------------------------------
procedure sp_busca_genero(
iocursor in out micursor,nom genero.nom_gen%Type
)
is begin
if nom!='todos' then
open iocursor for
select * from genero where nom_gen like nom
order by cod_gen;
end if;
end sp_busca_genero;
---------------------------------------------------------------------------------
end paquete_genero;
/
Paquete Comentarios
CREATE OR REPLACE package paquete_comentarios
as
type micursor is ref cursor;
procedure sp_generar_comentario(
iocursor in out micursor
);
procedure sp_graba_comentario(
cod in comentarios.cod_com%Type ,usu in comentarios.cod_usu%Type,
vid in comentarios.cod_vid%Type, com in comentarios.des_com%Type
);
procedure sp_lista_comentarios_video(
iocursor in out micursor , vid in comentarios.cod_vid%Type
);
end paquete_comentarios;
/
www.detodoprogramacion.org
78 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
---------------------------------------------------------------------------------
procedure sp_generar_comentario(
iocursor in out micursor
)is begin
end sp_generar_comentario;
---------------------------------------------------------------------------------
procedure sp_graba_comentario(
cod in comentarios.cod_com%Type ,usu in comentarios.cod_usu%Type,
vid in comentarios.cod_vid%Type, com in comentarios.des_com%Type
)is begin
end sp_graba_comentario;
---------------------------------------------------------------------------------
procedure sp_lista_comentarios_video(
iocursor in out micursor , vid in comentarios.cod_vid%Type
)is begin
end sp_lista_comentarios_video;
----------------------------------------------------------------------------------
end paquete_comentarios;
/
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 79
Trabajaremos en 4 capas:
• La primera será la capa de datos, en la que crearemos la conexcion a la BD y donde estarán nuestra
funciones que nos permi rán realizar consultas y los mantenimientos necesarios.
• La segunda es la capa enƟdad, aquí se definirán cada una de las tablas con sus respec vos campos;
cada campo sera encapsulado para poder tener acceso a ellos mendiante sus propiedades de
lectura y escritura.
Es importante recordar que los campos de las tablas deben tener el mismo po de los campos
definidos en la BD.
• La tercera es la capa de negocio, donde se definirán las funciones que vamos a u lizar, que estarán
asociadas con los paquetes creados anteriormente en la BD.
• La cuarta es la capa de presentación, aquí será creado el si o web.
Escogemos la opción que nos permite crear una solución; le colocamos un nombre, lo guardamos en
la ubicación que deseamos, es recomendable que sea en la raiz de una unidad.
www.detodoprogramacion.org
80 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Bueno, como se nos muestra, no enen ningun proyecto; así que ahora los empezaremos a crear.
La ubicación será la misma donde se creó la solución, esta es tomada por defecto.
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 81
Ahora creamos el siguiente proyecto de la misma manera, pero esta vez la llamaremos enƟdad, será
también una Biblioteca de Clases; igualmente, será con la capa negocio que llevará por nombre
negocio; todos estos proyecto serán creados en el mismo lenguaje.
Capa En dad:
www.detodoprogramacion.org
82 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Capa Negocio:
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 83
Aquí podemos escoger la ubicación de nuestro proyecto, que será el mismo donde fueron creados las
anteriores capas; le pondremos un nombre, en este caso será Web, como se muestra:
www.detodoprogramacion.org
84 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Lo que haremos ahora, será agregar las referencias a cada uno de nuestros proyectos para comenzar
con la programación de cada una de la capas.
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 85
En la ventana que aparece, en la pestaña de net, crearemos una referencia a System.Data y System.
Data.OracleClient; recordemos que la BD es Oracle.
En la Clase Negocio se realiza la referencia hacia los dos proyectos creados anteriormente, es decir la
Clase Datos y Clase EnƟdad, nos ubicamos en la pestaña de Proyectos.
www.detodoprogramacion.org
86 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
En nuestro siƟo web haremos exactamente lo mismo, pero esta vez sólo será hacia un proyecto que es
Negocio, pues este ya está referenciado hacia Datos y EnƟdad.
Pero para poder notar las referencia hechas, es necesario generar nuestra solución.
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 87
Se ve claramente cómo se crea una caperta Bin en nuestro si o web donde se ven las referencias
hechas.
Bueno, ahora comenzaremos con el desarrollo de las capas; empezaremos con la capa de datos. Lo que
vamos a hacer es eliminar la clase que se creó por defecto y crearemos una nueva llamada Funciones,
o cambiaremos de nombre a la clase; una vez hecho esto, se comenzará a explicar la programacion
que se desarrolló.
Este es el código:
'Se estan importado las librerias que vamos a necesitar para trabajar
Imports System
Imports System.Collections.Generic
Imports System.Text
Imports System.Data 'Para trabajar con Datos
Imports System.Data.OracleClient 'Para el trabajo con Oracle
www.detodoprogramacion.org
88 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
'Abrimos la conexcion
cn.Open()
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 89
End Try
End Function
Try
Dim cn As New OracleConnection(Conexion())
Dim cmd As New OracleCommand()
cn.Open()
cmd.Connection = cn
cmd.CommandType = CommandType.StoredProcedure
cmd.CommandText = nombresp
OracleCommandBuilder.DeriveParameters(cmd)
Dim i As Integer
www.detodoprogramacion.org
90 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
i = 0
'aquí ya no es necsario pregunta o el tipo de direccion de
'la variable
For Each p As OracleParameter In cmd.Parameters
p.Value = parametros(i)
i = i + 1
Next
'Declaramos una variable donde se nos informara el numero
'de registro afectados
Dim f As Integer
'Ejecutamos la transaccion
f = cmd.ExecuteNonQuery()
cn.Close()
res = "La operacion realizada con exito"
cmd.Dispose()
cn.Dispose()
Catch ex As Exception
'Si hay un problema ,lo capturamos en la variable
res = ex.Message
End Try
'Retornamos el resultado
Return res
End Function
End Class
Ahora trabajaremos con la capa enƟdad, lo que haremos será crear un diagrama de clases.
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 91
Le colocamos un nombre.
Esta será la pantalla que mostrará, donde sólo tendremos que arrastar una clase para poder crearla:
www.detodoprogramacion.org
92 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Bueno, ahora crearemos una clase, sólo escogemos clase y la arrastramos al medio. Aparecerá esta
ventana, le colocamos el nombre de la clase; ver el ejemplo:
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 93
Lo que haremos ahora será crear sus atributos; para ello hacemos lo siguiente: clic secundario encima
de la clase, escogemos Agregar:campo.
Y para agregar más, sólo seguimos el paso anterior; una vez terminado debe quedar así, recordemos
que son campos de la tabla usuario.
www.detodoprogramacion.org
94 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Lo que haremos ahora será especificar el po de dato de cada uno, para ello veremos los detalles de
clases.
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 95
Colocaremos el mismo nombre del campo, sólo que no tendrá el guión ‘_’
www.detodoprogramacion.org
96 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Ahora le daremos el po de dato usando detalles de clase, que deben coincidir con los campos.
Bueno, ahora daremos doble clic encima de las clases y aparecerá este código; como se ven, se crearon
los set y los gets,habrá que completar.
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 97
En dad Usuario
Public Class Usuario
'Estos son los campos de la clase ,como se ven estos fueron 'encapsulados
End Property
www.detodoprogramacion.org
98 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
End Property
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 99
Las clases también se pueden crear de manera directa, sin el diagrama, pero todo se tendrá que
codificar.
www.detodoprogramacion.org
100 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
En dad Comentario
End Get
Set(ByVal value As String)
_cod_com = value
End Set
End Property
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 101
En dad Genero
www.detodoprogramacion.org
102 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
End Set
End Property
En dad Mensajes
Public Class Mensajes
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 103
End Property
www.detodoprogramacion.org
104 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
En dad Pais
Public Class Pais
En dad Video
Public Class Video
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 105
www.detodoprogramacion.org
106 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Ver un ejemplo:
En la BD
create table Usuario(
cod_usu varchar(7) not null,
nom_usu varchar(50) not null,
ape_usu varchar(50) not null,
fec_nac date not null,
fec_usu date default sysdate,
cod_pais varchar(5) not null,
nick_usu varchar(20) not null,
pas_usu varchar(20) not null,
cor_usu varchar(50) not null,
fot_usu number(1) default 0,
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 107
En la capa enƟdad
Public Class Usuario
Agregaremos un clase.
www.detodoprogramacion.org
108 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Colocamos un nombre, en este caso lo diferenciaremos de la clase en dad por C_ que llevará delante,
porque el resto del nombre será igual al de la enƟdad.
Imports Entidad
Imports Datos
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 109
'Esta funcion valida el nick del usuario que sea unico ,solo
'recibe un parametro el nick del usuario
Public Function Busca_Nick(ByVal e As Entidad.Usuario) As
DataTable
'el nombre el paquete y del procedimiento deben ser iguales que
'al de los de la BD , sino no seran encontrados
Return cl.Listar("paquete_usuario.sp_busca_nick", e.nick_usu)
End Function
www.detodoprogramacion.org
110 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
End Class
En la BD:
procedure sp_graba_usuario(
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 111
En la capa negocio
Public Function Graba_Usuario(ByVal e As Entidad.Usuario) As
String
Return cl.Ejecutar("paquete_usuario.sp_graba_usuario",
e.cod_usu, e.nom_usu, e.ape_usu,e.fec_nac,
e.cod_pais,e.nick_usu, e.pas_usu,
e.cor_usu)
End Function
Clase C_Comentario
Imports Entidad
Imports Datos
End Class
Clase C_Genero
Imports Entidad
Imports Datos
www.detodoprogramacion.org
112 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Clase C_Mensajes
Imports Entidad
Imports Datos
Public Class C_Mensajes
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 113
End Class
www.detodoprogramacion.org
114 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Clase C_Pais
Imports Entidad
Imports Datos
Public Class C_Pais
Clase C_Video
Imports System.Data
Imports Datos
Imports Entidad
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 115
End Class
www.detodoprogramacion.org
116 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
-->
</style>
</head>
<body>
<form name="form1" id="form1" runat="server">
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td rowspan="3" style="width: 382px"><img
src="auxiliares/logo.png" height="125" width="345" /></td>
<td colspan="2" style="height: 85px"> </td>
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 117
www.detodoprogramacion.org
118 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 119
--Hago lo mismo
Dim titulo As String = dt.Rows(i)(1).ToString()
--recordar que el dato guarda el codigo del video y
--el titulo el nombre del video.
%>
<tr>
<td width="100" rowspan="5" align="center" style="width:
100px">
<%--En una etiqueta <a></a> creamos un link hacia otra pagina donde le enviamos
el valor de una variable, en este caso sera el codigo del video para poder
verlo ,ahora dentro de esta etiqueta estara el video de forma pequeña por ello
colocaremos una etiquete <embed></embed> aqie se carga el video pero se le quitan
algunas opciones para que no pueda ser reproducido , “video” es la carpeta donde
están nuestro videos almacenados %>
<a href="Home2.aspx?var=<%Response.Write(dato)%>">
<embed src="video/<%Response.Write(dato)%>.avi" width='100'
height='80' autostart="0" align="middle" id="media" showcontrols="false"
name="media"> </embed>
</a>
</td>
</tr>
<tr>
<td width="175" style="height: 12px" > </td>
</tr>
<tr>
<td>
<a href="Home2.aspx?var=<%Response.Write(dato)%>" style="
font-family:'Arial Narrow';color:teal">
<%Response.Write(titulo)%>
</a>
</td>
</tr>
<tr>
<td style="width: 100px"><a href="Home2.aspx?var=<%Response.
Write(dato)%>" style="font-family: 'Berlin Sans FB';color: blue;"> ver
video</a></td>
</tr>
www.detodoprogramacion.org
120 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
<tr>
<td style="width: 100px"> </td>
</tr>
<%Next%>
</table>
</td>
</tr>
<tr>
<td valign="top" style="width: 426px; height: 24px"><a href="Home2.
aspx?var=VI000003">
<embed src="video/VI000003.avi" width="422" height="299"
autostart="0" align="middle" id="Embed3" showcontrols="true" > </embed>
</a> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="4" style="background-color: salmon"> </td>
</tr>
<tr>
<td colspan="2" style="color: black; background-color: black"> </
td>
<td style="color: black; background-color: black"> </td>
<td style="color: black; background-color: black"> </td>
</tr>
</table>
</form>
</body>
</html>
Imports Entidad
Imports Negocio
Imports System.Data
Partial Class Home
Inherits System.Web.UI.Page
'Creamos una variable de tipo C_Usuario para usar todas las
'funciones
Dim cu As New C_Usuario
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 121
lblusuario.Visible = False
btnsession.Visible = False
btnpagina.Visible = False
btnusuarios.Visible = False
Image1.Visible = False
Else
'de lo contrario significa que esta logueado entonces
'mostramos su foto y nombre de usuario,asi como el
'menu de opciones cambia
lblusuario.Text = Session("Usuario")
lblusuario.Visible = True
btnsession.Visible = True
btnpagina.Visible = True
btnregistro.Visible = False
btningresar.Visible = False
Image1.Visible = True
btnusuarios.Visible = True
'esta funcion es la que permite que la imagen del
'usuario salga en la parte superior derecha en la
'página
Verifica_Imagen()
End If
End If
End Sub
www.detodoprogramacion.org
122 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Dim i As Integer
i = Integer.Parse(dt.Rows(0).Item(0))
'Pregunto por el valor del campo
If i = 0 Then
'Coloco la imagen por defecto de todos lo usuarios
'la carpeta img esta creada en el sitio y es donde estan
'todas las fotos siempre colocar ~ hace referencia al
'sitio donde no encontramos
Image1.ImageUrl = "~/img/Usuario.png"
Else
'Si no colocamos la imagen,bueno la imagen esta guarada
'con el coigo del usuario y su extencion respectiva
Image1.ImageUrl = "~/img/" + dt.Rows(0).Item(1).ToString()
End If
Image1.Height = 60
Image1.Width = 60
End Sub
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 123
www.detodoprogramacion.org
124 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a:link {
color: #000099;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000099;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a:active {
text-decoration: none;
color: #000099;
}
-->
</style>
<script type="text/javascript" language="javascript" src="/comunes/scriptsjs/
variables.js"></script>
<script type="text/javascript">
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 125
return contador;
}
//da el nombre de una variable
function nombreVariable(variable){
if (tipo == "string"){
var posicion = direccion.indexOf("?");
if ((posicion > 0) && (direccion.indexOf(variable,posicion) > -1))
posicion = direccion.indexOf(variable,posicion);
else
posicion = 0;
}
else if (tipo == "number"){
var posicion = 0;
posicion = direccion.indexOf("?");
for (var contador = 0 ; ((contador < variable) && (posicion != -1)) ;
contador++){
posicion = direccion.indexOf("&", ++posicion);
}
posicion++;
}
if (posicion > 0){
var final = direccion.indexOf("=",posicion);
//alert(posicion + " , " + final);
if (final == -1){final=direccion.length;};
return direccion.substring(posicion,final);
}
}
function cuerpo(){
var texto="";
for (var cont=0 ; cont < contarVariables() ; cont++){
texto = texto + cogerVariable(cont);
}
return texto;
}
</script>
<script language="javascript" type="text/javascript">
function mostrar() {
nom="video/"+cuerpo()+".avi";
www.detodoprogramacion.org
126 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
return nom;
};
</script>
<script type="text/javascript">
var video = false;
function mostrarprueba(elVideo){
// alert("titulo -> "+video);
if (video != false)
document.getElementById("media").removeChild(video);
video = document.createElement("embed");
video.setAttribute("width", "422");
video.setAttribute("height", "299");
video.src = elVideo;
document.getElementById("media").appendChild(video);
}
</script>
</head>
<body onload="mostrar()">
<form id="form1" runat="server">
<table width="80%" border="0" align="center" cellpadding="0"
cellspacing="00" style="color: salmon" >
<tr>
<td colspan="2" rowspan="3"><img src="auxiliares/logo.png" width="345"
height="125" /></td>
<td width="328" height="85" ></td>
<td width="156" align="center"><asp:Image ID="Image1" runat="server"
Height="60px" Width="60px" /></td>
</tr>
<tr>
<td></td>
<td align="center"><asp:Label ID="lblusuario" runat="server"
Visible="False" Width="98px" ForeColor="Green" Font-Names="Arial Narrow"
style="color: red; font-family: 'Californian FB'">Desconectado</asp:Label></td>
</tr>
<tr>
<td valign="middle" style="font-family:Arial Narrow;font-
size:5;color:#333333;">
<script language ="javascript" type="text/javascript">
var hoy = new Date();
dia = hoy.getDate();
mes = hoy.getMonth();
anyo = hoy.getYear();
if (mes == "0") convertir_mes = "Enero";
else if (mes == "1") convertir_mes = "Febrero";
else if (mes == "2") convertir_mes = "Marzo";
else if (mes == "3") convertir_mes = "Abril";
else if (mes == "4") convertir_mes = "Mayo";
else if (mes == "5") convertir_mes = "Junio";
else if (mes == "6") convertir_mes = "Julio";
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 127
www.detodoprogramacion.org
128 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 129
www.detodoprogramacion.org
130 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
</a>
</td>
</tr>
<tr>
<td >
<a href="Home2.aspx?var=<%Response.
Write(dato)%>" style="font-family: 'Berlin Sans FB'; text-decoration: line-
through; color: blue;">ver video</a>
</td>
</tr>
<tr>
<td > </td>
</tr>
<%Next%>
</table>
</td>
</tr>
</table></td>
</tr>
<tr>
<td style="width: 510px; background-color: white;" >
<!--Aquí mediante una funcion java script mostramos
el video ,del cual recibimos su codigo como
parametro -- >
<div id="media">
<script type="text/javascript">
var elVideo="video/"+cuerpo()+".avi";
mostrarprueba(elVideo);
</script>
</div>
</td>
</tr>
<tr>
<td height="42" style="width: 510px; background-color: white;">
<table border="0" cellpadding="1" cellspacing="1" style="width:
99%" >
<tr>
<td style="width: 98px;height: 35px;font-family:'Californian
FB'; color: black;" >
<strong>Nro de Visitas:</strong></td>
<td style="width: 51px;height: 35px;" ><asp:Label
ID="lblvisitas" runat="server" Text="lblvisitas" ForeColor="Red" style="font-
family: 'Californian FB'" Font-Bold="True"></asp:Label></td>
<td style="width: 50px;height: 35px;;font-
family:'Californian FB'; color: black;" >
<strong>Puntos:</strong></td>
<td style="height: 35px; width: 57px;"><asp:Label
ID="lblpuntos" runat="server" Text="lblpuntos" ForeColor="Red" style="font-family:
'Californian FB'" Font-Bold="True"></asp:Label></td>
<td style="height: 35px; width: 40px;"><asp:ImageButton
ID="btnafavor" runat="server" Height="33px" ImageUrl="img/c_voto.png" Width="32px"
AlternateText="Votar a Favor" /></td>
<td style="height: 35px; width: 20px;"><asp:ImageButton
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 131
www.detodoprogramacion.org
132 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
<td colspan="2">
<!—-Y aquí colocamos el comentario-->
<asp:TextBox ID="TextBox3" runat="server" Height="82px" TextMode="MultiLine"
Width="278px" Text='<%# Eval("des_com") %>' Enabled="False" Font-Names="Arial
Narrow"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 89px; height: 21px;color: maroon;
font-family: Arial;"> Mensajes:</td>
<td style="width: 91px; height: 21px" align="left">
<!—-el numero de comentarios del usuario ,estos campos son de la consulta-->
<asp:Label ID="Label5" runat="server" Text='<%# Eval("nro") %>' Font-Names="Arial
Narrow" ForeColor="Red" Width="60px"></asp:Label></td>
<td style="width: 25px; height: 21px"></td>
<td style="width: 100px; height: 21px"></td>
</tr>
<tr>
<td style="width: 89px"></td>
<td style="width: 91px"></td>
<td style="width: 25px;color: maroon; font-family:
Arial;"> Fecha:</td>
<td style="width: 100px">
<!—-Y aquí colocamos la fecha-->
<asp:Label ID="Label6" runat="server" Text='<%# Eval("fec_com") %>' Width="234px"
Font-Names="Arial Narrow" ForeColor="Navy"></asp:Label></td>
</tr>
</table>
</ItemTemplate>
<AlternatingItemStyle BackColor="White" ForeColor="#284775" />
<ItemStyle BackColor="#F7F6F3" ForeColor="#333333" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True"
ForeColor="White" />
</asp:DataList>
<asp:Label ID="Label1" runat="server" Font-Names="Arial
Narrow" ForeColor="Black" style="font-family: 'Californian FB'" Font-
Bold="True"></asp:Label></td>
</tr>
<tr>
<td style="height: 185px; width: 510px; background-color: white;">
<table width="100%" >
<tr>
<td colspan="2" rowspan="1" style="font-size: 15pt; font-
family: forte;">
Tu Comentario</td>
</tr>
<tr>
<td colspan="2" rowspan="3" style="width:
608px"><asp:TextBox ID="txtcomentario" runat="server" Height="103px"
TextMode="MultiLine" Width="492px"></asp:TextBox> </td>
</tr>
<tr></tr><tr></tr>
<tr>
<td colspan="2" rowspan="1" style="width: 608px; text-
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 133
align: center">
<asp:Button ID="btngraba" runat="server" Text="Subir
Comentario" Width="217px" Font-Name="Arial Narrow" style="font-family:
'Californian FB'" Font-Bold="True" Font-Names="Arial Narrow"/></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="4" style="background-color: black"> </td>
</tr>
</table>
<p> </p>
</form>
<AlternatingItemStyle BackColor="White" />
<ItemStyle BackColor="#E3EAEB" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True"
ForeColor="White" />
</body>
</html>
Código de la programación
Imports System.Data
Imports Entidad
Imports Negocio
www.detodoprogramacion.org
134 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
dt = cv.Busca_titulo(objent)
d1 = cv.Nick_Usuario(objent)
d2 = cv.Detalla_Video(objent)
'muestra el nombre del usuario
lkusuario.Text = d1.Rows(0).Item(0).ToString()
'muestra la fecha dandole un formato
lblfecha.Text =DateTime.Parse(d2.Rows(0).Item(3).ToString()).Date
'se muestra el nro de visitas
lblvisitas.Text = d2.Rows(0).Item(4).ToString()
'se muestra el nro de puntos
lblpuntos.Text = d2.Rows(0).Item(5).ToString()
'se muestra del usuario porpietario del video
imgvid.ImageUrl = Imagen(lkusuario.Text)
'para controlar el numeros de vistas
visitas()
'lo que lista los comentarios
comentarios()
If dt.Rows.Count > 0 Then
lbltitulo.Text = dt.Rows(0)(0)
Else
MsgBox("no se encontro Video")
End If
TextBox1.Text = ""
'Esto ya se explico antes
If Session("Usuario") = "desconectado" Or Session("Usuario") = "" Then
lblusuario.Visible = False
btnsession.Visible = False
btnpagina.Visible = False
Image1.Visible = False
btnafavor.Enabled = False
btnencontra.Enabled = False
btngraba.Enabled = False
btndescarga.Enabled = False
btnusuarios.Visible = False
Else
lblusuario.Text = Session("Usuario")
lblusuario.Visible = True
btnsession.Visible = True
btnpagina.Visible = True
btnregistro.Visible = False
btningresar.Visible = False
Image1.Visible = True
lkusuario.Visible = True
btngraba.Enabled = True
btnencontra.Enabled = True
btnusuarios.Visible = True
Verifica_Imagen()
End If
End If
End Sub
'Para la imagen del usuario al que le pertenece el video
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 135
Sub Verifica_Imagen()
Dim dt As New DataTable
Dim u As New Entidad.Usuario
u.nick_usu = Session("Usuario")
dt = cu.Perfil_Usuario(u)
Dim i As Integer
i = Integer.Parse(dt.Rows(0).Item(0))
If i = 0 Then
Image1.ImageUrl = "~/img/Usuario.png"
Else
Image1.ImageUrl = "~/img/" + dt.Rows(0).Item(1).ToString()
End If
Image1.Height = 60
Image1.Width = 60
End Sub
Public Function Codigo(ByVal nick As String) As String
Dim u As New Entidad.Usuario
u.nick_usu = nick
Dim dt As New DataTable
dt = cu.Busca_Nick(u)
Dim cod As String
cod = dt.Rows(0).Item(0).ToString()
Return cod
End Function
www.detodoprogramacion.org
136 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 137
www.detodoprogramacion.org
138 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
La página Ingreso
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Ingreso_Usuario.aspx.vb"
Inherits="Ingreso_Usuario" %>
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 139
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td rowspan="3"><img src="auxiliares/logo.png" alt="" width="345"
height="125" /></td>
<td height="79" style="width: 173px"> </td>
<td rowspan="3" style="width: 81px"> </td>
</tr>
<tr>
<td height="24" style="width: 173px"> </td>
</tr>
<tr>
<td style="font-family:Arial Narrow;font-size:5;color:#333333; width:
173px; height: 21px;">
<script language ="javascript" type="text/javascript">
var hoy = new Date();
dia = hoy.getDate();
mes = hoy.getMonth();
anyo = hoy.getYear();
if (mes == "0") convertir_mes = "Enero";
else if (mes == "1") convertir_mes = "Febrero";
else if (mes == "2") convertir_mes = "Marzo";
else if (mes == "3") convertir_mes = "Abril";
else if (mes == "4") convertir_mes = "Mayo";
else if (mes == "5") convertir_mes = "Junio";
else if (mes == "6") convertir_mes = "Julio";
else if (mes == "7") convertir_mes = "Agosto";
else if (mes == "8") convertir_mes = "Septiembre";
else if (mes == "9") convertir_mes = "Octubre";
else if (mes == "10") convertir_mes = "Noviembre";
else convertir_mes = "Diciembre";
document.write ( "Lima "+ dia + " " + convertir_mes + " de " + anyo);
</script>
</td>
</tr>
<tr>
<td colspan="3" bgcolor="#CCCCCC" style="height: 3px"></td>
</tr>
<tr>
<td colspan="3">
<asp:ImageButton ID="btnhome" runat="server" AlternateText="Home"
ImageUrl="auxiliares/home.png" /><asp:ImageButton
ID="btnregistro" runat="server" AlternateText="Registro"
ImageUrl="auxiliares/registro.png" /></td>
</tr>
<tr>
<td colspan="3" bgcolor="#CCCCCC" style="height: 3px"></td>
www.detodoprogramacion.org
140 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td width="228" >
<table width="100%" border="0" cellpadding="1" cellspacing="1" >
<tr>
<td colspan="3" style="font-size: 15pt; color: red; font-family:
forte; text-align: center;" >
Datos del Usuario</td>
</tr>
<tr>
<td > </td>
<td colspan="2" > </td>
</tr>
<tr>
<td style="height: 26px" > <asp:Label ID="Label1"
runat="server" Text="Usuario:" Width="75px" ForeColor="#804000" Font-Names="Arial
Narrow" style="color: black; font-family: 'Californian FB'"></asp:Label></td>
<td colspan="2" style="height: 26px" ><asp:TextBox ID="txtusuario"
runat="server"></asp:TextBox></td>
</tr>
<tr>
<td > <asp:Label ID="Label2" runat="server" Text="Contraseña
:" ForeColor="#804000" Font-Names="Arial Narrow" style="color: black; font-family:
'Californian FB'"></asp:Label></td>
<td colspan="2" ><asp:TextBox ID="txtcontraseña" runat="server"
TextMode="Password" ></asp:TextBox></td>
</tr>
<tr>
<td > </td>
<td colspan="2"><asp:Label ID="lblmensaje" runat="server"
ForeColor="Red" Width="152px" Font-Names="Arial Narrow" style="font-family:
'Californian FB'"></asp:Label></td>
</tr>
<tr>
<td> </td>
<td><asp:Button ID="btningresar" runat="server" Text="Ingresar"
Font-Name="Arial Narrow" style="font-family: 'Californian FB'" Font-Bold="True"
Font-Names="Arial Narrow"/></td>
<td style="width: 84px"><asp:Button ID="btncancelar"
runat="server" Text="Cancelar" Font-Name="Arial Narrow" style="font-family:
'Californian FB'" Font-Bold="True" Font-Names="Arial Narrow"/></td>
</tr>
<tr>
<td > </td>
<td colspan="2" > </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
</tr>
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 141
</table> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="3" style="background-color: lightgrey" > </td>
</tr>
</table>
</form>
</body>
</html>
Programación
Imports System.Data
Imports Negocio
Imports Entidad
Partial Class Ingreso_Usuario
Inherits System.Web.UI.Page
End Sub
www.detodoprogramacion.org
142 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 143
text-decoration: none;
color: #FF0000;
}
a:active {
text-decoration: none;
color: #000099;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="346" rowspan="3"><span style="width: 382px"><img src="auxiliares/
logo.png" alt="" width="345" height="125" /></span></td>
<td height="87" style="width: 215px"> </td>
<td style="width: 9px"> </td>
</tr>
<tr>
<td style="width: 215px"> </td>
<td style="width: 9px"> </td>
</tr>
<tr>
<td style="font-family:Arial Narrow;font-size:5;color:#333333; width:
215px; height: 19px;">
<script language ="javascript" type="text/javascript">
var hoy = new Date();
dia = hoy.getDate();
mes = hoy.getMonth();
anyo = hoy.getYear();
if (mes == "0") convertir_mes = "Enero";
else if (mes == "1") convertir_mes = "Febrero";
else if (mes == "2") convertir_mes = "Marzo";
else if (mes == "3") convertir_mes = "Abril";
else if (mes == "4") convertir_mes = "Mayo";
else if (mes == "5") convertir_mes = "Junio";
else if (mes == "6") convertir_mes = "Julio";
else if (mes == "7") convertir_mes = "Agosto";
else if (mes == "8") convertir_mes = "Septiembre";
else if (mes == "9") convertir_mes = "Octubre";
else if (mes == "10") convertir_mes = "Noviembre";
else convertir_mes = "Diciembre";
document.write ( "Lima "+ dia + " " + convertir_mes + " de " + any
o);
</script>
</td>
<td style="height: 19px; width: 9px;"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#CCCCCC" style="height: 3px"></td>
www.detodoprogramacion.org
144 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
</tr>
<tr>
<td colspan="3">
<asp:ImageButton ID="btnhome" runat="server" AlternateText="Home"
ImageUrl="auxiliares/home.png" /><asp:ImageButton
ID="btningresar" runat="server" AlternateText="Ingresar"
ImageUrl="auxiliares/ingresar.png" /></td>
</tr>
<tr>
<td colspan="3" bgcolor="#CCCCCC" style="height: 3px"></td>
</tr>
<tr>
<td colspan="3" style="color: salmon; background-color: salmon" > </td>
</tr>
<tr>
<td style="height: 385px" colspan="3" >
<table width="100%" border="0" align="center" cellpadding="0"
cellspacing="1" style="width: 84%">
<tr>
<td colspan="2" style="font-size: 15pt; color: red; font-family: forte;
height: 21px; background-color: gainsboro"></td>
</tr>
<tr>
<td colspan="2" align="center" style="height: 21px; font-size: 15pt;
color: red; font-family: forte; background-color: whitesmoke;" >
<strong>Datos del Usuario</strong></td>
</tr>
<tr>
<td colspan="2" align="center" style="height: 21px; font-size: 15pt;
color: red; font-family: forte; background-color: gainsboro;" > </td>
</tr>
<tr>
<td colspan="2" style="height: 21px; font-size: 14pt; color: black;
font-family: Forte; background-color: salmon;" >
Datos Personales</td>
</tr>
<tr>
<td colspan="2" style="height: 21px; font-size: 10pt; color: teal; font-
family: Arial; background-color: silver;" > </td>
</tr>
<tr>
<td style="font-size: 10pt; color: black; font-family: 'Californian FB';
width: 143px; background-color: whitesmoke;" >
<strong>Nombre :</strong></td>
<td width="510" style="width: 134px; font-size: 10pt; color: black;
font-family: 'Berlin Sans FB'; background-color: whitesmoke;" ><asp:TextBox
ID="txtnombre" runat="server" Width="212px" style="font-family: 'Californian
FB'"></asp:TextBox></td>
</tr>
<tr>
<td style="font-size: 10pt; color: black; font-family: 'Californian FB';
width: 143px; background-color: whitesmoke;" >
<strong>
Apellidos:</strong></td>
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 145
www.detodoprogramacion.org
146 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 147
Código de la Programación
Imports Entidad
Imports Negocio
Imports System.Data
Partial Class Registro_Usuario
Inherits System.Web.UI.Page
End If
End Sub
www.detodoprogramacion.org
148 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
If Verifica_Contraseñas() = 0 Then
cu.Graba_Usuario(u)
Session("Usuario") = nick
Response.Redirect("Pagina_usuario.aspx")
Else
Response.Write("<script>alert('Las Contraseñas no coinciden')</
script>")
End If
End Sub
End Sub
Protected Sub btncambiar2_Click(ByVal sender As Object, ByVal e As System.
EventArgs) Handles btncambiar2.Click
lblcorreo.Text = ""
txtcorreo.Enabled = True
btncambiar2.Visible = False
btngrabar.Enabled = False
End Sub
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 149
Sub Lista_Pais()
Dim dt As New DataTable
dt = cp.Lista_pais_activos()
cmbpais.DataSource = dt
cmbpais.DataTextField = "nom_pais"
cmbpais.DataValueField = "cod_pais"
cmbpais.DataBind()
End Sub
Sub Años()
Dim i As Integer = 1920
For i = 1920 To 1992
cmbaño.Items.Add(i)
i = +i
Next
End Sub
Sub Meses()
Dim meses() As String = {"Enero", "Febrero", "Marzo", "Abril", "Mayo",
"Junio", "Julio" _
, "Agosto", "Septiembre", "Octubre", "Noviembre",
"Diciembre"}
Dim i As Integer = 0
For i = 0 To 11
cmbmes.Items.Add(meses(i))
i = +i
Next
End Sub
Sub Dias()
cbmdia.Items.Clear()
Dim dias, i As Integer
dias = Date.DaysInMonth(cmbaño.SelectedItem.Text, cmbmes.SelectedIndex +
1)
For i = 1 To dias
cbmdia.Items.Add(i)
i = +i
Next
End Sub
Sub Verifica_Nick()
Dim nick As String
nick = txtnick.Text
Dim e As New Entidad.Usuario
e.nick_usu = nick
Dim dt As New DataTable
dt = cu.Busca_Nick(e)
If dt.Rows.Count > 0 Then
lblnick.Text = "No disponible"
lblnick.ForeColor = Drawing.Color.Red
Else
www.detodoprogramacion.org
150 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
lblnick.Text = "Disponible"
lblnick.ForeColor = Drawing.Color.Green
txtnick.Enabled = False
txtcorreo.Enabled = True
btncambiar.Visible = True
txtcontraseña1.Focus()
End If
End Sub
Sub Verifica_Correo()
Dim correo As String
correo = txtcorreo.Text
Dim e As New Entidad.Usuario
e.cor_usu = correo
Dim dt As New DataTable
dt = cu.Busca_Correo(e)
If dt.Rows.Count > 0 Then
lblcorreo.Text = "No Disponible"
lblcorreo.ForeColor = Drawing.Color.Red
Else
lblcorreo.Text = "Disponible"
lblcorreo.ForeColor = Drawing.Color.Green
txtcorreo.Enabled = False
btncambiar2.Visible = True
btngrabar.Enabled = True
End If
End Sub
Sub limpiar()
txtnombre.Text = ""
txtapellidos.Text = ""
txtcontraseña1.Text = ""
txtcontraseña2.Text = ""
txtcorreo.Text = ""
txtnick.Text = ""
txtnombre.Focus()
txtnick.Enabled = True
lblnick.Text = ""
txtcorreo.Enabled = False
lblcorreo.Text = ""
btncambiar.Visible = False
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 151
btncambiar2.Visible = False
End Sub
Protected Sub btnlimpiar_Click(ByVal sender As Object, ByVal e As System.
EventArgs) Handles btnlimpiar.Click
limpiar()
End Sub
Protected Sub btnhome_Click(ByVal sender As Object, ByVal e As System.Web.
UI.ImageClickEventArgs) Handles btnhome.Click
Response.Redirect("Home.aspx")
End Sub
Protected Sub btningresar_Click(ByVal sender As Object, ByVal e As System.Web.
UI.ImageClickEventArgs) Handles btningresar.Click
Response.Redirect("Ingreso_Usuario.aspx")
End Sub
www.detodoprogramacion.org
152 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 153
www.detodoprogramacion.org
154 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5" bgcolor="#CCCCCC" style="height: 3px"></td>
</tr>
<tr>
<td colspan="5" style="height: 19px">
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Mensajes_
Usuario.aspx"
Target="principal" ImageUrl="auxiliares/mensajes.png">Mensajes</
asp:HyperLink><asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/Cambia_
Contraseña.aspx"
Target="principal" ImageUrl="auxiliares/contraseña.
png">Contraseña</asp:HyperLink><asp:ImageButton
ID="ImageButton2" runat="server" ImageUrl="auxiliares/perfil.png"
/><asp:ImageButton
ID="ImageButton3" runat="server" ImageUrl="auxiliares/
imagen.png" /><asp:ImageButton
ID="ImageButton4" runat="server" ImageUrl="auxiliares/
mvideos.png" /><asp:HyperLink
ID="HyperLink3" runat="server" ImageUrl="auxiliares/
subir.png" NavigateUrl="~/Sube_Video.aspx"
Target="principal">HyperLink</asp:HyperLink></td>
</tr>
<tr>
<td colspan="5" bgcolor="#CCCCCC" style="height: 3px"></td>
</tr>
<tr>
<td colspan="5" > </td>
</tr>
<tr>
<td colspan="5" valign="middle">
<iframe name="principal" id="IFRAME1" style="width: 100%; border-top-style:
none; border-right-style: none; height: 576px; border-bottom-style: none;"></
iframe></td>
</tr>
</table>
</form>
</body>
</html>
Programación
mports Entidad
Imports Negocio
Imports System.Data
Partial Class Pagina_Usuario
Inherits System.Web.UI.Page
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 155
End Sub
Sub Verifica_Imagen()
Dim dt As New DataTable
Dim u As New Entidad.Usuario
u.nick_usu = Session("Usuario")
'u.nick_usu = "suzan"
dt = cu.Perfil_Usuario(u)
Dim i As Integer
i = Integer.Parse(dt.Rows(0).Item(0))
If i = 0 Then
Image1.ImageUrl = "~/img/Usuario.png"
Else
Image1.ImageUrl = "~/img/" + dt.Rows(0).Item(1).ToString()
End If
Image1.Height = 60
Image1.Width = 60
End Sub
Sub Nro_Mensajes()
Dim m As New Mensajes
m.cod_usu_rec = Codigo(Session("Usuario"))
Dim dt As New DataTable
dt = cm.Lista_Mensajes_Nuevos(m)
likmensaje.Text = "Mensajes (" + dt.Rows.Count.ToString() + " nuevos)"
www.detodoprogramacion.org
156 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
End Sub
Protected Sub btnhome_Click(ByVal sender As Object, ByVal e As System.Web.
UI.ImageClickEventArgs) Handles btnhome.Click
Session("Usuario") = Session("Usuario")
Response.Redirect("Home.aspx")
End Sub
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 157
Página Mensajes
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Mensajes_Usuario.aspx.vb"
Inherits="Prueba" %>
<tr>
<td> </td>
<td colspan="4" rowspan="15">
<iframe style="height: 555px; width: 581px; position: relative;
visibility: visible; overflow: visible; left: 0; top: 0;" name="principal2"></
iframe> </td>
</tr>
<tr>
<td style="font-size: 14pt; font-family: Forte; text-decoration:
overline; text-align: center;">Panel de Mensajes</td>
</tr>
<tr>
www.detodoprogramacion.org
158 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/
Mensajes_Recibidos.aspx" Target="principal2" Width="126px" ImageUrl="auxiliares/
mrecibidos.png"></asp:HyperLink></td>
</tr>
<tr>
<td><asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/
Mensajes_Enviados.aspx" Target="principal2" Width="127px" ImageUrl="auxiliares/
menviados.png"></asp:HyperLink></td>
</tr>
<tr>
<td><asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/
Enviar_Mensajes.aspx" Target="principal2" Width="128px" ImageUrl="auxiliares/
emensaje.png"></asp:HyperLink></td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td rowspan="2" style="background-color: black"> </td>
</tr>
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 159
</table>
</form>
</body>
</html>
Codificación
Imports Entidad
Imports Negocio
Imports System.Data
Partial Class Prueba
Inherits System.Web.UI.Page
Dim cu As New Negocio.C_Usuario
Dim cm As New Negocio.C_Mensajes
End Class
www.detodoprogramacion.org
160 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 161
www.detodoprogramacion.org
162 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
</tr>
<tr>
<td style="width: 100px; height: 21px;"> </td>
<td style="width: 100px; height: 21px;">
<asp:Button ID="btnelimina1" runat="server" Text="Eliminar"
style="font-family: 'Berlin Sans FB'" /></td>
<td style="width: 100px; height: 21px;"> </td>
<td style="width: 100px; height: 21px;"> </td>
<td style="width: 100px; height: 21px;"> </td>
<td style="width: 100px; height: 21px;"> </td>
</tr>
<tr>
<td style="width: 100px; height: 21px">
</td>
<td style="width: 100px; height: 21px">
</td>
<td style="width: 100px; height: 21px">
</td>
<td style="width: 100px; height: 21px">
</td>
<td style="width: 100px; height: 21px">
</td>
<td style="width: 100px; height: 21px">
</td>
</tr>
<tr>
<td colspan="6" style="height: 21px; font-size: 15pt; color: red;
font-family: Forte; background-color: lightgrey;">
Todos los mensajes</td>
</tr>
<tr>
<td colspan="6" style="font-size: 15pt; color: red; font-family:
Arial; height: 21px">
</td>
</tr>
<tr>
<td style="width: 100px"> </td>
<td colspan="4" rowspan="4">
<asp:GridView ID="grvmentod" runat="server"
AutoGenerateColumns="False" CellPadding="3"
ForeColor="Black" GridLines="Vertical" Width="381px"
BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px"
Font-Names="Californian FB">
<FooterStyle BackColor="#CCCCCC" />
<Columns>
<asp:TemplateField>
<EditItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</EditItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 163
<asp:BoundField DataField="nick_usu"
HeaderText="Usuario" />
<asp:BoundField DataField="asu_men"
HeaderText="Asunto" />
<asp:BoundField DataField="fec_men" HeaderText="Fecha"
/>
<asp:TemplateField HeaderText="Ver">
<ItemTemplate>
<asp:HyperLink ID="HyperLink2"
runat="server" NavigateUrl='<%# Eval("cod_men","Leer_Men_Re.aspx?cod={0}")
%>'>leer</asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<SelectedRowStyle BackColor="#000099" Font-Bold="True"
ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black"
HorizontalAlign="Center" />
<HeaderStyle BackColor="Black" Font-Bold="True"
ForeColor="White" />
<AlternatingRowStyle BackColor="#CCCCCC" />
</asp:GridView>
<br />
<asp:Label ID="lbltodos" runat="server" Font-Names="Arial
Narrow" Text="Label" Width="368px" style="font-family: 'Berlin Sans FB'"></
asp:Label><br />
</td>
<td style="width: 100px"> </td>
</tr>
<tr>
<td style="width: 100px"> </td>
<td style="width: 100px"> </td>
</tr>
<tr>
<td style="width: 100px"> </td>
<td style="width: 100px"> </td>
</tr>
<tr>
<td style="width: 100px"> </td>
<td style="width: 100px"> </td>
</tr>
<tr>
<td style="width: 100px"> </td>
<td colspan="4" rowspan="1">
<asp:Button ID="btnelimina2" runat="server" Text="Eliminar"
Font-Names="Arial Narrow" style="font-family: 'Berlin Sans FB'" /></td>
<td style="width: 100px"> </td>
</tr>
</table>
</form>
</body>
</html>
www.detodoprogramacion.org
164 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Programación
Imports Entidad
Imports Negocio
Imports System.Data
Partial Class Mensajes_Recibidos
Inherits System.Web.UI.Page
Sub Mensajes_Nuevos()
Dim m As New Mensajes
m.cod_usu_rec = Session("Codigo")
grvmennue.DataSource = cm.Lista_Mensajes_Nuevos(m)
grvmennue.DataBind()
If grvmennue.Rows.Count = 0 Then
btnelimina1.Visible = False
lblnuevos.Text = "Usted no tiene mensajes nuevos"
Else
lblnuevos.Text = "N° de Mensajes : " + grvmennue.Rows.Count.ToString()
End If
End Sub
Sub Mensajes_Todos()
Dim m As New Mensajes
m.cod_usu_rec = Session("Codigo")
grvmentod.DataSource = cm.Lista_Mensajes_Todos(m)
grvmentod.DataBind()
If grvmentod.Rows.Count = 0 Then
btnelimina2.Visible = False
lbltodos.Text = "Usted no tiene mensajes"
Else
lbltodos.Text = "N° de Mensajes : " + grvmentod.Rows.Count.ToString()
End If
End Sub
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 165
lin = grvmennue.Rows(i).Cells(4).FindControl("HyperLink2")
Dim cadena As String
cadena = lin.NavigateUrl.ToString()
Dim codigo As String
codigo = cadena.Substring(cadena.LastIndexOf("=") + 1, 8).ToString()
If chekc.Checked Then
Dim m As New Mensajes
m.cod_men = codigo
m.cod_usu_rec = Session("Codigo")
cm.Eliminar_Mensajes_Recibidos(m)
End If
Next
Mensajes_Nuevos()
End Sub
www.detodoprogramacion.org
166 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 167
color: #000099;
}
-->
</style>
</head>
<body>
<form id="form1" runat="server">
<table align="center">
<tr>
<td colspan="6" style="height: 21px"> </td>
</tr>
<tr>
<td colspan="6" style="font-family: 'Lucida Calligraphy';
background-color: salmon">
<strong style="font-size: 15pt; font-family: forte">Mensajes
Enviados</strong></td>
</tr>
<tr>
<td colspan="6" style="height: 21px"> </td>
</tr>
<tr>
<td style="width: 11px"> </td>
<td colspan="4" rowspan="4">
<asp:GridView ID="grvmenenv" runat="server"
AutoGenerateColumns="False" CellPadding="4"
ForeColor="Black" GridLines="Horizontal" Width="381px"
BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" Font-
Names="Californian FB">
<FooterStyle BackColor="#CCCC99" ForeColor="Black" />
<Columns>
<asp:TemplateField>
<EditItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server"
/></EditItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server"
/></ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="nick_usu"
HeaderText="Usuario" />
<asp:BoundField DataField="asu_men"
HeaderText="Asunto" />
<asp:BoundField DataField="fec_men" HeaderText="Fecha"
/>
<asp:TemplateField HeaderText="Ver">
<ItemTemplate>
<asp:HyperLink ID="HyperLink2"
runat="server" NavigateUrl='<%# Eval("cod_men","Leer_Men_En.aspx?cod={0}")
%>'>leer</asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<SelectedRowStyle BackColor="#CC3333" Font-Bold="True"
www.detodoprogramacion.org
168 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="Black"
HorizontalAlign="Right" />
<HeaderStyle BackColor="#333333" Font-Bold="True"
ForeColor="White" />
</asp:GridView>
<br />
<asp:Label ID="lblenviados" runat="server" Font-Names="Arial
Narrow" Text="Label" Width="368px" style="font-family: 'Berlin Sans FB'"></
asp:Label><br />
</td>
<td> </td>
</tr>
<tr>
<td style="width: 11px"> </td>
<td> </td>
</tr>
<tr>
<td style="width: 11px"> </td>
<td> </td>
</tr>
<tr>
<td style="width: 11px"> </td>
<td> </td>
</tr>
<tr>
<td style="width: 11px"> </td>
<td colspan="4"><asp:Button ID="btnelimina1" runat="server"
Text="Eliminar" Font-Names="Arial Narrow" style="font-family: 'Berlin Sans FB'"
/></td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
Programación
Imports Entidad
Imports Negocio
Imports System.Data
Partial Class Mensajes_Enviados
Inherits System.Web.UI.Page
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 169
End Sub
Sub Mensajes_Enviados()
Dim m As New Mensajes
m.cod_usu_env = Session("Codigo")
grvmenenv.DataSource = cm.Lista_Mensajes_Escritos(m)
grvmenenv.DataBind()
If grvmenenv.Rows.Count = 0 Then
grvmenenv.Visible = False
lblenviados.Text = "Usted no tiene mensajes "
Else
lblenviados.Text = "N° de mensajes : " + grvmenenv.Rows.Count.
ToString()
End If
End Sub
Protected Sub btnelimina1_Click(ByVal sender As Object, ByVal e As System.
EventArgs) Handles btnelimina1.Click
For i As Integer = 0 To grvmenenv.Rows.Count - 1
Dim chekc As New CheckBox
chekc = grvmenenv.Rows(i).Cells(0).FindControl("CheckBox1")
Dim lin As New HyperLink
lin = grvmenenv.Rows(i).Cells(4).FindControl("HyperLink2")
Dim cadena As String
cadena = lin.NavigateUrl.ToString()
Dim codigo As String
codigo = cadena.Substring(cadena.LastIndexOf("=") + 1, 8).ToString()
If chekc.Checked Then
Dim m As New Mensajes
m.cod_men = codigo
m.cod_usu_env = Session("Codigo")
cm.Eliminar_Mensajes_Enviados(m)
End If
Next
Mensajes_Enviados()
End Sub
End Class
www.detodoprogramacion.org
170 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 171
www.detodoprogramacion.org
172 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
</tr>
<tr>
<td rowspan="3" style="width: 100px"> </td>
<td colspan="3" rowspan="1" style="width: 100px; height: 22px;
background-color: whitesmoke">
<asp:TextBox ID="txtmensaje" runat="server" Height="159px"
ReadOnly="True" TextMode="MultiLine" Width="415px"></asp:TextBox> </td>
</tr>
<tr>
<td colspan="3" rowspan="1" style="background-color: silver">
</td>
</tr>
</table>
</form>
</body>
</html>
Código de programación
Imports Entidad
Imports Negocio
Imports System.Data
Sub Muestra_Mensaje()
Dim m As New Mensajes
m.cod_men = Request.Params("cod").ToString()
m.cod_usu_env = Session("Codigo")
Dim dt As New DataTable
dt = cm.Detalle_Mensaje_Enviados(m)
lblusuario.Text = dt.Rows(0).Item(0).ToString()
lblasunto.Text = dt.Rows(0).Item(1).ToString()
lblfecha.Text = dt.Rows(0).Item(2).ToString()
txtmensaje.Text = dt.Rows(0).Item(3).ToString()
End Sub
End Class
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 173
www.detodoprogramacion.org
174 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
color: #000099;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a:active {
text-decoration: none;
color: #000099;
}
-->
</style>
</head>
<body>
<form id="form1" runat="server">
<table width="60%" border="0" align="center" cellpadding="1"
cellspacing="1">
<tr>
<td height="21" style="width: 100px">
<asp:Label ID="Label1" runat="server" ForeColor="White"
Text="espacioss"></asp:Label></td>
<td style="background-color: black;" colspan="4">
</td>
</tr>
<tr>
<td style="width: 100px"> </td>
<td style="font-size: 15pt; font-family: forte; background-color:
silver; text-align: center;" colspan="4">
Mensaje</td>
</tr>
<tr>
<td style="font-size: 11pt; width: 100px; color: navy; font-family:
'Arial Narrow'; height: 23px"></td>
<td style="height: 23px; background-color: whitesmoke;"> </td>
<td colspan="2" style="height: 23px; background-color:
whitesmoke;"> </td>
</tr>
<tr>
<td style="font-size: 11pt; width: 100px; color: navy; font-
family: 'Arial Narrow'; height: 21px"></td>
<td style="font-family: 'Californian FB'; background-color:
whitesmoke;">De:</td>
<td colspan="2" style="background-color: whitesmoke;">
<asp:Label ID="lblusuario" runat="server" Width="150px"
ForeColor="Gray" Font-Names="Arial Narrow"></asp:Label> </td>
</tr>
<tr>
<td style="font-size: 11pt; width: 100px; color: navy; font-
family: 'Arial Narrow';height: 21px;"></td>
<td style="font-family: 'Californian FB'; background-color:
whitesmoke;">Asunto:</td>
<td colspan="2" style="background-color: whitesmoke;">
<asp:Label ID="lblasunto" runat="server" Width="150px"
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 175
Código de programación
Imports Entidad
Imports Negocio
Imports System.Data
Partial Class Leer_Mensaje
Inherits System.Web.UI.Page
www.detodoprogramacion.org
176 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 177
www.detodoprogramacion.org
178 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
<tr>
<td style="background-color: whitesmoke;"> </td>
<td style=" font-family:'Californian FB'; width: 65px; background-
color: whitesmoke;">
<strong>De:</strong></td>
<td colspan="2" style="background-color: whitesmoke" ><asp:Label
ID="txtenvia" runat="server" Width="154px" style="font-family: 'Californian FB'"
Font-Bold="True"></asp:Label></td>
<td width="64" rowspan="4" valign="top" style="background-color:
whitesmoke"> <span class="Estilo1">asdsadas</span></td>
<td width="64" rowspan="4" valign="top" style="background-color:
whitesmoke"><asp:ListBox ID="lblusuarios" runat="server" AutoPostBack="True"
Height="121px" Visible="False"
Width="119px" style="position: relative; font-family:
'Californian FB';" Font-Bold="True"></asp:ListBox></td>
</tr>
<tr>
<td style="background-color: whitesmoke;"> </td>
<td style=" font-family:'Californian FB'; width: 65px; background-
color: whitesmoke;">
<strong>Asunto:</strong></td>
<td colspan="2" style="background-color: whitesmoke"><asp:TextBox
ID="txtasunto" runat="server" style="font-family: 'Californian FB'" Font-
Bold="True"></asp:TextBox></td>
</tr>
<tr>
<td style="background-color: whitesmoke;"> </td>
<td style=" font-family:'Californian FB'; width: 65px; background-
color: whitesmoke;">
<strong>Mensaje:</strong></td>
<td colspan="2" style="background-color: whitesmoke"> </td>
</tr>
<tr>
<td style="background-color: whitesmoke;"> </td>
<td colspan="3" style="background-color: whitesmoke;"><asp:TextBox
ID="txtmensaje" runat="server" Height="154px" TextMode="MultiLine"
Width="283px"></asp:TextBox> </td>
</tr>
<tr>
<td style="width: 29px"> </td>
<td style="width: 65px"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td style="background-color: silver; text-align: center;"
colspan="6">
<asp:Button ID="btnenviar" runat="server" Text="Enviar" Font-
Names="Arial Narrow" style="font-family: 'Californian FB'" Font-Bold="True" />
<asp:Button ID="btncancelar" runat="server" Text="Cancelar"
Font-Names="Arial Narrow" style="font-family: 'Californian FB'" Font-Bold="True"
/> </td>
</tr>
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 179
</table>
</form>
</body>
</html>
Código de la Programación
mports Entidad
Imports Negocio
Imports System.Data
Partial Class Escribir_Mensaje
Inherits System.Web.UI.Page
txtenvia.Text = Session("Usuario")
txtreceptor.Text = Session("Destinatario")
End If
End Sub
End Sub
www.detodoprogramacion.org
180 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
txtreceptor.Text = ""
txtreceptor.Text = lblusuarios.SelectedItem.Text
End Sub
Página Contraseña
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Cambia_Contraseña.aspx.
vb" Inherits="Cambia_Contraseña" %>
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 181
type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style></head>
<body>
<form id="form1" runat="server">
<table width="70%" border="0" align="center" cellpadding="1" cellspacing="1"
>
<tr>
<td style="height: 19px; background-color: black;"
colspan="4"> </td>
</tr>
<tr>
<td align="center" style="height: 19px; font-size: 15pt; color:
red; font-family: forte; background-color: silver;" colspan="4"> Cambio de
Contraseña</td>
</tr>
<tr>
<td colspan="4" style="background-color: black">
</td>
</tr>
<tr>
<td rowspan="5" align="center" style="width: 271px; color: #0066ff;
font-family: 'Arial Narrow'; background-color: whitesmoke;" ><img src="auxiliares/
computo1.gif" width="114" height="123" /></td>
<td style="width: 329px; color: #0066ff; font-family: 'Arial
Narrow'; background-color: whitesmoke;" ><asp:Label ID="Label1" runat="server"
Text="Usuario:" Width="75px" Font-Names="Arial Narrow" ForeColor="#0066FF"
style="color: black; font-family: 'Californian FB'" Font-Bold="True"></asp:Label>
</td>
<td colspan="2" style="width: 271px; color: #0066ff; font-family:
'Arial Narrow'; background-color: whitesmoke" ><asp:TextBox ID="txtusuario"
runat="server" Enabled="False"></asp:TextBox> </td>
</tr>
<tr>
<td style="width: 329px; color: black; font-family: 'Californian FB';
background-color: whitesmoke;" >
<strong>Contraseña Anterior :</strong></td>
<td colspan="2" style="width: 271px; color: #0066ff; font-family:
'Arial Narrow'; background-color: whitesmoke" ><asp:TextBox ID="txtantigua"
runat="server" TextMode="Password"></asp:TextBox> </td>
</tr>
<tr>
<td style="width: 329px; color: black; font-family: 'Californian FB';
background-color: whitesmoke;" >
<strong>Contraseña Nueva :</strong></td>
<td colspan="2" style="width: 271px; color: #0066ff; font-family: 'Arial
Narrow'; background-color: whitesmoke" ><asp:TextBox ID="txtnueva" runat="server"
www.detodoprogramacion.org
182 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
TextMode="Password"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 329px; color: #0066ff; font-family: 'Arial Narrow';
background-color: whitesmoke;" > </td>
<td colspan="2" style="width: 271px; color: #0066ff; font-family: 'Arial
Narrow'; background-color: whitesmoke" > </td>
</tr>
<tr>
<td style="width: 329px; color: #0066ff; font-family: 'Arial Narrow';
background-color: whitesmoke; height: 24px;" > </td>
<td width="64" style="width: 271px; color: #0066ff; font-family: 'Arial
Narrow'; background-color: whitesmoke; height: 24px;"><asp:Button ID="btningresar"
runat="server" Text="Cambiar" Font-Names="Arial Narrow" style="font-family:
'Californian FB'" Font-Bold="True" /></td>
<td width="167" style="width: 271px; color: #0066ff; font-family: 'Arial
Narrow'; background-color: whitesmoke; height: 24px;"><asp:Button ID="btncancelar"
runat="server" Text="Cancelar" Font-Names="Arial Narrow" style="font-family:
'Californian FB'" Font-Bold="True" /></td>
</tr>
<tr>
<td style="height: 21px; background-color: silver; text-align: right;"
colspan="4" >
<asp:Label ID="lblmensaje" runat="server" ForeColor="Red"
Width="152px" Font-Names="Arial Narrow" style="color: red; font-family:
'Californian FB'"></asp:Label></td>
</tr>
</table>
</form>
</body>
</html>
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 183
Código de la Página
mports Entidad
Imports Negocio
Imports System.Data
Partial Class Cambia_Contraseña
Inherits System.Web.UI.Page
Dim cu As New C_Usuario
Protected Sub btningresar_Click(ByVal sender As Object, ByVal e As System.
EventArgs) Handles btningresar.Click
Dim u As New Entidad.Usuario
u.nick_usu = txtusuario.Text
u.pas_usu = txtantigua.Text
Dim dt As New DataTable
dt = cu.Conf_Password(u)
If dt.Rows.Count > 0 Then
u.pas_usu = txtnueva.Text
cu.Actualiza_Password(u)
lblmensaje.Text = "La operación fue completada con exito"
txtusuario.Text = Session("Usuario")
Else
lblmensaje.Text = "La contraseña antigua no coincide"
txtusuario.Text = Session("Usuario")
End If
End Sub
End Class
www.detodoprogramacion.org
184 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Página Perfil
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Perfil_Usuario.aspx.vb"
Inherits="Perfil_Usuario" %>
<tr>
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 185
www.detodoprogramacion.org
186 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
</tr>
<tr>
<td colspan="4" bgcolor="#CCCCCC" style="height: 3px"></td>
</tr>
<tr>
<td colspan="4" style="height: 19px">
</td>
</tr>
<tr>
<td colspan="4" style="height: 19px">
<asp:HyperLink ID="likmensaje" runat="server" Font-
Names="Arial Narrow" ForeColor="#804000"
Width="174px" style="color: red; font-family: 'Californian
FB'">[likmensaje]</asp:HyperLink></td>
</tr>
<tr>
<td colspan="4" style="height: 19px">
</td>
</tr>
<tr>
<td colspan="4" bgcolor="#CCCCCC" style="height: 3px">
</td>
</tr>
<tr>
<td colspan="4" >
<asp:HyperLink ID="HyperLink1" runat="server"
ImageUrl="auxiliares/mensajes.png"
NavigateUrl="~/Pagina_Usuario.aspx" Target="_
parent">Mensajes</asp:HyperLink><asp:HyperLink
ID="HyperLink2" runat="server" ImageUrl="auxiliares/
contraseña.png" NavigateUrl="~/Pagina_Usuario.aspx"
Target="_parent">Contraseña</
asp:HyperLink><asp:ImageButton ID="ImageButton3" runat="server"
ImageUrl="auxiliares/imagen.png"
/><asp:ImageButton ID="ImageButton4" runat="server"
ImageUrl="auxiliares/mvideos.png"
/><asp:HyperLink ID="HyperLink3" runat="server"
ImageUrl="auxiliares/subir.png"
NavigateUrl="~/Pagina_Usuario.aspx" Target="_parent">HyperLink</asp:HyperLink></
td>
</tr>
<tr>
<td bgcolor="#cccccc" colspan="4" style="height: 3px">
</td>
</tr>
<tr>
<td style="width: 100px; height: 19px; background-color: salmon;">
</td>
<td colspan="2" style="height: 19px; width: 100px; background-
color: salmon;">
</td>
<td style="width: 153px; height: 19px; background-color: salmon;">
</td>
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 187
</tr>
<tr>
<td colspan="4" style="height: 494px">
<table width="80%" align="center" >
<tr>
<td style="font-size: 13pt; color: red; font-family:
Forte; height: 21px; text-decoration: line-through;" colspan="4">
Perfil de Usuario</td>
</tr>
<tr>
<td colspan="4" style="font-size: 12pt; color: red;
font-family: Arial; height: 21px; background-color: black;"> </td>
</tr>
<tr>
<td width="47" style="width: 7px">
<asp:Label ID="Label1" runat="server" ForeColor="White"
Text="Label"></asp:Label></td>
<td width="200"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2" style="height: 21px; font-size: 12pt;
color: black; font-family: Forte; background-color: salmon;">
Datos Personales</td>
<td colspan="2" style="height: 21px; background-color:
silver;"> </td>
</tr>
<tr>
<td style="width: 7px; background-color: whitesmoke;"
></td>
<td ></td>
<td colspan="2" ></td>
</tr>
<tr>
<td style="width: 7px; background-color: whitesmoke;"
></td>
<td style="font-size: 10pt; color: black; font-family:
'Californian FB'" >
<strong>Nombres:</strong></td>
<td colspan="2"><asp:TextBox ID="txtnombre"
runat="server" Width="212px"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 7px; background-color: whitesmoke;"></td>
<td style="font-size: 10pt; color: black; font-family:
'Californian FB'" >
<strong>Apellidos :</strong></td>
<td colspan="2" ><asp:TextBox
ID="txtapellidos" runat="server" Width="212px"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 7px; background-color: whitesmoke;" ></td>
<td style="font-size: 10pt; color: black; font-family:
www.detodoprogramacion.org
188 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 189
<strong>Correo:</strong></td>
<td colspan="2" style="height: 21px" >
<asp:TextBox ID="txtcorreo" runat="server"
Enabled="False" style="font-family: 'Californian FB'" Width="258px"></
asp:TextBox></td>
</tr>
<tr>
<td style="height: 21px; width: 7px;
background-color: whitesmoke;" ></td>
<td style="height: 21px" ></td>
<td colspan="2" style="height: 21px"></td>
</tr>
<tr>
<td style="height: 21px; width: 7px; background-color:
whitesmoke;" ></td>
<td style="height: 20px" ></td>
<td width="83" style="height: 20px"><asp:Button
ID="btngraba" runat="server" Text="Actualizar" style="font-family: 'Californian
FB'" font-bold="True" /></td>
<td width="276" style="height: 20px;"><asp:Button
ID="btncancelar" runat="server" Text="Cancelar" Font-Names="Arial Narrow"
style="font-family: 'Californian FB'" font-bold="True" /></td>
</tr>
<tr>
<td style="height: 21px; width: 7px; background-color:
whitesmoke;" ></td>
<td style="height: 21px" ></td>
<td colspan="2" style="height: 21px"></td>
</tr>
<tr>
<td style="height: 21px; width: 7px;"></td>
<td style="height: 21px"></td>
<td colspan="2" style="height: 21px"><asp:Label
ID="lblmensaje" runat="server" Width="372px" Font-Names="Arial Narrow"
style="font-size: 10pt; color: red; font-family: 'Californian FB'"></asp:Label></
td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color: black;" colspan="4">
</td>
</tr>
</table>
</form>
</body>
</html>
www.detodoprogramacion.org
190 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Código de la Programación
Imports Entidad
Imports Negocio
Imports System.Data
Partial Class Perfil_Usuario
Inherits System.Web.UI.Page
lblmensaje.Text = cu.Actualiza_Usuario(u)
Limpia()
Catch ex As Exception
End Try
End Sub
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 191
End Sub
www.detodoprogramacion.org
192 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Next
End Sub
Sub Dias()
cbmdia.Items.Clear()
Dim dias, i As Integer
dias = Date.DaysInMonth(cmbaño.SelectedItem.Text, cmbmes.SelectedIndex +
1)
For i = 1 To dias
cbmdia.Items.Add(i)
i = +i
Next
End Sub
Sub Perfil()
Try
Dim u As New Entidad.Usuario
txtnick.Text = Session("Usuario")
Dim e As New Entidad.Usuario
e.nick_usu = txtnick.Text
txtcorreo.Text = cu.Lista_Correo(e).Rows(0)(1)
u.nick_usu = Session("Usuario")
dt = cu.Perfil_Usuario(u)
txtnombre.Text = dt.Rows(0).Item(2).ToString()
txtapellidos.Text = dt.Rows(0).Item(3).ToString()
cbmdia.Items.FindByText((dt.Rows(0).Item(4).ToString()).Substring(0,
2)).Selected = True
cmbpais.Items.FindByText(dt.Rows(0).Item(5).ToString()).Selected =
True
Catch ex As Exception
End Try
End Sub
Sub Limpia()
txtnombre.Text = ""
txtapellidos.Text = ""
txtcorreo.Text = ""
txtnombre.Focus()
Lista_Pais()
Años() : Meses() : Dias()
End Sub
Sub Verifica_Imagen()
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 193
Image1.ImageUrl = "~/img/Usuario.png"
Else
Image1.ImageUrl = "~/img/" + dt.Rows(0).Item(1).ToString()
End If
Image1.Height = 60
Image1.Width = 60
End Sub
Public Function Codigo(ByVal nick As String) As String
Dim u As New Entidad.Usuario
u.nick_usu = Session("Usuario")
Dim dt As New DataTable
dt = cu.Busca_Nick(u)
Dim cod As String
cod = dt.Rows(0).Item(0).ToString()
Return cod
End Function
Sub Nro_Mensajes()
Dim m As New Mensajes
m.cod_usu_rec = Codigo(Session("Usuario"))
Dim dt As New DataTable
dt = cm.Lista_Mensajes_Nuevos(m)
likmensaje.Text = "Mensajes (" + dt.Rows.Count.ToString() + " nuevos)"
End Sub
www.detodoprogramacion.org
194 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 195
}
a:visited {
color: #000099;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: none;
}
a:active {
color: #000099;
text-decoration: none;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<table width="765" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td rowspan="3" style="width: 323px" ><img src="auxiliares/logo.
png" alt="" width="345" height="125" /></td>
<td height="91" style="width: 334px"></td>
<td align="center" style="width: 156px" >
<asp:Image ID="Image1" runat="server" Height="60px"
Width="60px" /></td>
</tr>
<tr>
<td style="height: 19px; width: 334px;" ></td>
<td align="center" style="width: 156px; height: 19px" >
<asp:Label ID="lblusuario" runat="server" forecolor="Green"
width="1px" Font-Names="Arial Narrow" style="color: red; font-family: 'Californian
FB'" Font-Bold="True"></asp:Label> </td>
</tr>
<tr>
<td style="font-family:Arial Narrow;font-
size:12;color:#333333;width: 334px;">
<script language ="javascript" type="text/javascript">
var hoy = new Date();
dia = hoy.getDate();
mes = hoy.getMonth();
anyo = hoy.getYear();
if (mes == "0") convertir_mes = "Enero";
else if (mes == "1") convertir_mes = "Febrero";
else if (mes == "2") convertir_mes = "Marzo";
else if (mes == "3") convertir_mes = "Abril";
else if (mes == "4") convertir_mes = "Mayo";
else if (mes == "5") convertir_mes = "Junio";
else if (mes == "6") convertir_mes = "Julio";
else if (mes == "7") convertir_mes = "Agosto";
www.detodoprogramacion.org
196 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 197
ImageUrl="auxiliares/perfil.png" /><asp:ImageButton
ID="ImageButton4" runat="server"
ImageUrl="auxiliares/mvideos.png"
/><asp:HyperLink ID="HyperLink3" runat="server"
ImageUrl="auxiliares/subir.png"
NavigateUrl="~/Pagina_Usuario.aspx" Target="_parent">HyperLink</asp:HyperLink></
td>
</tr>
<tr>
<td bgcolor="#cccccc" colspan="3" style="height: 3px">
</td>
</tr>
<tr>
<td style="width: 323px; height: 19px"> </td>
<td style="height: 19px; width: 334px;"> </td>
<td style="width: 156px; height: 19px"> </td>
</tr>
<tr>
<td colspan="3" style="height: 278px">
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td colspan="3" align="center" style="font-size: 13pt; color:
black; font-style: normal; font-family: forte; height: 19px; background-color:
whitesmoke;">
Tu Imagen</td>
</tr>
<tr>
<td style="font-size: 10pt; color: maroon; font-style: normal;
font-family: Arial; background-color: silver; height: 16px;" colspan="3">
</td>
</tr>
<tr>
<td style="text-align: center; font-size: 10pt; color: mediumblue;
font-style: normal; font-family: 'Californian FB';" >
<strong>Imagen Actual</strong></td>
<td colspan="2" style="text-align: center" >
<asp:Image ID="imgusuario" runat="server" Height="100px" Width="100px"
/></td>
</tr>
<tr>
<td style="width: 116px; height: 19px;"> </td>
<td colspan="2" >
</td>
</tr>
<tr>
<td style="width: 116px; height: 19px"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td style="width: 116px; font-size: 10pt; color: black; font-family:
'Californian FB';"> <strong>Nueva Imagen</strong></td>
<td colspan="3">
<asp:FileUpload ID="btnexamina" runat="server" Font-
www.detodoprogramacion.org
198 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Código de la Programación
Imports Entidad
Imports Negocio
Imports System.Data
Partial Class Imagen_Usuario
Inherits System.Web.UI.Page
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 199
Catch ex As Exception
Response.Write("<script>alert('" + ex.Message.ToString() + "')</
script>")
End Try
End Sub
www.detodoprogramacion.org
200 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
End Sub
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 201
m.cod_usu_rec = Codigo(Session("Usuario"))
Dim dt As New DataTable
dt = cm.Lista_Mensajes_Nuevos(m)
likmensaje.Text = "Mensajes (" + dt.Rows.Count.ToString() + " nuevos)"
End Sub
End Class
www.detodoprogramacion.org
202 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
a:link {
color: #000099;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000099;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a:active {
text-decoration: none;
color: #000099;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td align="center" rowspan="3"><img src="auxiliares/logo.png" alt=""
width="345" height="125" /></td>
<td width="35%" height="83" colspan="-1" align="center" > </td>
<td width="20%" colspan="-1" align="center" ><asp:Image ID="Image1"
runat="server" Height="60px" Width="60px" /></td>
</tr>
<tr>
<td colspan="-1" align="center" > </td>
<td colspan="-1" align="center" >
<asp:Label ID="lblusuario" runat="server" ForeColor="Green" Width="1px"
Font-Names="Arial Narrow" style="color: red; font-family: 'Californian FB'" Font-
Bold="True"></asp:Label> </td>
</tr>
<tr>
<td height="19" colspan="-1" style="font-family:Arial Narrow;font-
size:5;color:#333333;"> </td>
<td colspan="-1" align="center">
<asp:LinkButton ID="btnsession" runat="server" Font-Names="Arial Narrow"
ToolTip="Cerrar Sesión" style="color: blue; font-family: 'Californian FB'; text-
decoration: line-through" Font-Bold="True">[Salir]</asp:LinkButton> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#CCCCCC"></td>
</tr>
<tr>
<td colspan="3">
<asp:ImageButton ID="btnhome" runat="server" AlternateText="Home"
ImageUrl="auxiliares/home.png" /><asp:ImageButton
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 203
www.detodoprogramacion.org
204 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 205
Font-Bold="True" /></td>
<td rowspan="1" style="font-size: 12pt; color: red; font-family:
Arial;
height: 21px"> </td>
</tr>
<tr>
<td colspan="4" rowspan="1" style="font-size: 12pt; color: red; font-
family: Arial;
height: 21px"> </td>
</tr>
<tr>
<td colspan="4" rowspan="1" style="font-size: 13pt;color: red; font-
family: forte; height: 21px; background-color: lightgrey; text-align: center;">
Detalle del Video</td>
</tr>
<tr>
<td colspan="4" rowspan="1" style="height: 8px; background-color:
whitesmoke; text-align: center;"> </td>
</tr>
<tr>
<td colspan="4" rowspan="1" style="height: 193px; background-
color: whitesmoke; text-align: center">
<asp:GridView ID="grvdetalle" runat="server"
AutoGenerateColumns="False" CellPadding="4"
ForeColor="Black" GridLines="Vertical" Height="1px"
Width="542px" CaptionAlign="Top" HorizontalAlign="Center" PageSize="1"
BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px">
<FooterStyle BackColor="#CCCC99" ForeColor="Black" />
<Columns>
<asp:BoundField DataField="fec_vid" HeaderText="Fecha"
/>
<asp:BoundField DataField="dur_vid"
HeaderText="Duracion" />
<asp:BoundField DataField="num_vis"
HeaderText="N° Visitas" />
<asp:BoundField DataField="pun_vid"
HeaderText="N° Ptos" />
<asp:TemplateField>
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl='<%# Eval("cod_vid","Home2.aspx?var={0}") %>'
Text="Ver"></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle HorizontalAlign="Justify" VerticalAlign="Middle"
/>
<SelectedRowStyle BackColor="#CC3333" Font-Bold="True"
ForeColor="White" HorizontalAlign="Center" />
<PagerStyle BackColor="White" ForeColor="Black"
HorizontalAlign="Right" />
<HeaderStyle BackColor="#333333" Font-Bold="True"
ForeColor="White" HorizontalAlign="Center" />
www.detodoprogramacion.org
206 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
</asp:GridView> </td>
</tr>
<tr>
<td colspan="4" rowspan="1" style="height: 232px; background-
color: white" >
<table width="100%" >
<tr>
<td style="height: 23px; width: 59px;"> </td>
<td style="height: 23px"></td>
<td style="height: 23px"></td>
<td style="height: 23px"></td>
</tr>
<tr>
<td colspan="1" style="height: 23px; font-
size: 13pt; color: black; font-family: forte; background-color: lightgrey;">
</td>
<td colspan="3" style="height: 23px; font-size: 13pt;
color: black; font-family: forte; background-color: lightgrey;">
Mantenimiento del Video</td>
</tr>
<tr>
<td style="height: 23px; width: 59px;">
</td>
<td style="height: 23px">
</td>
<td style="height: 23px">
</td>
<td style="height: 23px">
</td>
</tr>
<tr>
<td style="font-size: 10pt; color: navy; font-family:
Arial; width: 59px;"> </td>
<td style="font-size: 10pt; color: black; font-family:
'Californian FB';">
<strong>Codigo:</strong></td>
<td colspan="2" style="height: 21px">
<asp:TextBox ID="txtcodigo" runat="server"
Enabled="False" style="font-family: 'Californian FB'"></asp:TextBox>
</td>
</tr>
<tr>
<td style="font-size: 10pt; color: navy; font-family:
Arial; width: 59px;"> </td>
<td style="font-size: 10pt; color: black; font-family:
'Californian FB';">
<strong>
Nombre:</strong></td>
<td colspan="2" style="height: 21px">
<asp:TextBox ID="txtnombre" runat="server"
Width="413px"></asp:TextBox></td>
</tr>
<tr>
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 207
Programación
Imports Entidad
Imports Negocio
Imports System.Data
Partial Class Videos_Lista
Inherits System.Web.UI.Page
www.detodoprogramacion.org
208 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Nro_Mensajes()
End If
End Sub
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 209
If chekc.Checked Then
Dim v As New Video
v.Cod_vid = grvvideos.Rows(i).Cells(1).Text
cv.Elimina_Video(v)
End If
Next
lista()
End Sub
Sub Verifica_Imagen()
www.detodoprogramacion.org
210 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
End Sub
End Class
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 211
www.detodoprogramacion.org
212 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 213
</tr>
<tr>
<td style="font-size: 10pt; color: black; font-family: 'Californian
FB'; width: 100px;">
<strong>Género:</strong></td>
<td style="width: 100px; height: 21px"><asp:DropDownList
ID="cmdgenero" runat="server" style="font-family: 'Californian FB'" Font-
Bold="True"></asp:DropDownList></td>
<td style="width: 100px; height: 21px"><asp:Button ID="btngrabar"
runat="server" Text="Registra" style="font-family: 'Californian FB'" Font-
Bold="True" /></td>
</tr>
<tr>
<td style="font-size: 10pt; color: black; font-family: 'Californian
FB'; width: 100px;">
<strong>Video:</strong></td>
<td colspan="2" style="height: 26px"><asp:FileUpload
ID="btnexamina" runat="server" Font-Names="Arial Narrow" style="font-family:
'Californian FB'" Font-Bold="True" />
<asp:Button ID="btnsube" runat="server" Enabled="False"
Text="Subir" Font-Names="Arial Narrow" /></td>
</tr>
<tr>
<td style="width: 100px; background-color: lightgrey;"></td>
<td style="width: 100px; background-color: lightgrey;"></td>
<td style="width: 100px; background-color: lightgrey;"></td>
<td style="width: 100px; background-color: lightgrey;"></td>
</tr>
</table>
</form>
</body>
</html>
Código
mports Entidad
Imports Negocio
Imports System.Data
Partial Class Sube_Video
Inherits System.Web.UI.Page
End Sub
www.detodoprogramacion.org
214 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
txtcodigo.Text = cv.Generar_Video().Rows(0)(0)
generos()
End If
End Sub
Sub generos()
Dim dt As New DataTable
dt = cg.Lista_genero_activos()
cmdgenero.DataSource = dt
cmdgenero.DataTextField = "nom_gen"
cmdgenero.DataValueField = "cod_gen"
cmdgenero.DataBind()
End Sub
Sub graba()
Dim v As New Video
v.Cod_vid = txtcodigo.Text
v.Nom_vid = txtnombre.Text.ToUpper()
v.Dur_vid = txtduracion.Text
v.Nick_usu = Session("Usuario")
v.Cod_gen = cmdgenero.SelectedValue.ToString()
cv.Graba_Video(v)
End Sub
limpiar()
End Sub
Sub limpiar()
txtcodigo.Text = cv.Generar_Video().Rows(0)(0)
txtduracion.Text = ""
txtnombre.Text = ""
btnsube.Enabled = False
End Sub
End Class
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 215
www.detodoprogramacion.org
216 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
text-decoration: none;
color: #000099;
}
-->
</style>
</head>
<body>
<form id="form1" runat="server">
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td colspan="2" rowspan="3"><img src="auxiliares/logo.png" alt=""
width="345" height="125" /></td>
<td width="29%" height="91"> </td>
<td width="145" height="85" align="center">
<asp:Image ID="Image1" runat="server" Height="60px" Width="60px" />
</td>
</tr>
<tr>
<td > </td>
<td align="center">
<asp:Label ID="lblusuario" runat="server" Visible="False" Width="122px"
ForeColor="Green" style="color: red; font-family: 'Californian FB'" Font-
Bold="True">Desconectado</asp:Label></td>
</tr>
<tr>
<td valign="middle" style="font-family:Arial Narrow;font-
size:5;color:#333333; height: 18px;">
<script language ="javascript" type="text/javascript">
var hoy = new Date();
dia = hoy.getDate();
mes = hoy.getMonth();
anyo = hoy.getYear();
if (mes == "0") convertir_mes = "Enero";
else if (mes == "1") convertir_mes = "Febrero";
else if (mes == "2") convertir_mes = "Marzo";
else if (mes == "3") convertir_mes = "Abril";
else if (mes == "4") convertir_mes = "Mayo";
else if (mes == "5") convertir_mes = "Junio";
else if (mes == "6") convertir_mes = "Julio";
else if (mes == "7") convertir_mes = "Agosto";
else if (mes == "8") convertir_mes = "Septiembre";
else if (mes == "9") convertir_mes = "Octubre";
else if (mes == "10") convertir_mes = "Noviembre";
else convertir_mes = "Diciembre";
document.write ( "Lima "+ dia + " " + convertir_mes + " de " +
anyo);
</script>
</td>
<td align="center" style="height: 18px">
<asp:LinkButton ID="btnsession" runat="server" Visible="False"
style="color: blue; font-family: 'Californian FB'; text-decoration: line-through"
Font-Bold="True" >[Salir]</asp:LinkButton>
</td>
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 217
</tr>
<tr>
<td colspan="4" bgcolor="#CCCCCC" style="height: 3px"></td>
</tr>
<tr>
<td colspan="4">
<asp:ImageButton ID="btnhome" runat="server" AlternateText="Home"
ImageUrl="auxiliares/home.png" /><asp:ImageButton
ID="btnregistro" runat="server" AlternateText="Registro"
ImageUrl="auxiliares/registro.png" /><asp:ImageButton
ID="btningresar" runat="server" AlternateText="Ingresar"
ImageUrl="auxiliares/ingresar.png" /><asp:ImageButton
ID="btnpagina" runat="server" AlternateText="Página Usuario"
ImageUrl="auxiliares/usuario.png" /><asp:ImageButton
ID="btnusuarios" runat="server" AlternateText="Usuarios
Conectados" ImageUrl="auxiliares/conectados.png" /> </td>
</tr>
<tr>
<td colspan="4" bgcolor="#CCCCCC" style="height: 3px"></td>
</tr>
<tr>
<td width="17%" style="background-color: salmon" > </td>
<td width="36%" style="background-color: salmon" > </td>
<td style="background-color: salmon" > </td>
<td style="background-color: salmon" > </td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle">
<asp:TextBox ID="TextBox1" runat="server" Width="335px"
style="font-family: 'Californian FB'"></asp:TextBox>
</td>
<td >
<asp:ImageButton ID="btnbuscar" runat="server" AlternateText="Buscar"
BorderColor="#D4D0C8"
Height="30" ImageUrl="auxiliares/buscar.png" Width="30" /></td>
<td > </td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle"> </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle" style="font-size: 15pt;
color: red; font-family: forte">
Lista de Videos</td>
<td > </td>
<td > </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
<td> </td>
www.detodoprogramacion.org
218 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
</tr>
<tr>
<td colspan="2" align="left" valign="middle">
<%
Dim a As String
a = Request.Params("cod").ToString()
lblnick.Text = "Nombre de Usuario : " + a
%>
<asp:Label ID="lblnick" runat="server" Font-Names="Arial Narrow"
ForeColor="#804000" style="color: red; font-family: 'Californian FB'" Font-
Bold="True"></asp:Label></td>
<td > </td>
<td > </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="4">
<table width="80%" border="0" align="left" cellpadding="1"
cellspacing="1">
<%
Dim nick As String
nick = Request.Params("cod").ToString()
Dim dt As New System.Data.DataTable
Dim objdao As New Negocio.C_Video
Dim objent As New Entidad.Video
objent.Nick_usu = nick
dt = objdao.Videos_Usuario(objent)
For i As Integer = 0 To dt.Rows.Count - 1
Dim dato As String = dt.Rows(i)(0).ToString()
Dim titulo As String = dt.Rows(i)(1).ToString()
%>
<tr>
<td width="16%" rowspan="4">
<a href="Home2.aspx?var=<%Response.Write(dato)%>">
<embed id="media" align="top" autostart="0"
showcontrols="false" src="video/<%Response.Write(dato)%>.avi"
style="width: 100px; height: 80px"></embed>
</a>
</td>
<td width="84%" style="height: 20px"> </td>
</tr>
<tr>
<td >
<a href="Home2.aspx?var=<%Response.Write(dato)%>" style="
font-family:'Arial Narrow';color:teal">
<%Response.Write(titulo)%>
</a>
</td>
</tr>
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 219
<tr>
<td ><a href="Home2.aspx?var=<%Response.Write(dato)%>" style="font-
family: 'Californian FB'; text-decoration: line-through; color: blue;">
<strong> ver video </strong></a></td>
</tr>
<tr>
<td> </td>
</tr>
<%Next%>
</table> </td>
</tr>
<tr>
<td style="background-color: silver" colspan="4"> </td>
</tr>
<tr>
<td colspan="4" style="background-color: black"> </td>
</tr>
</table>
</form>
</body>
</html>
Programación
Imports Entidad
Imports Negocio
Imports System.Data
Partial Class Usuario_Videos
Inherits System.Web.UI.Page
Dim cu As New C_Usuario
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Handles Me.Load
If Not Page.IsPostBack Then
If Session("Usuario") = "desconectado" Or Session("Usuario") = "" Then
lblusuario.Visible = False
btnsession.Visible = False
btnpagina.Visible = False
btnusuarios.Visible = False
Image1.Visible = False
Else
lblusuario.Text = Session("Usuario")
lblusuario.Visible = True
btnsession.Visible = True
btnpagina.Visible = True
btnregistro.Visible = False
btningresar.Visible = False
Image1.Visible = True
btnusuarios.Visible = True
Verifica_Imagen()
End If
End If
End Sub
www.detodoprogramacion.org
220 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Sub Verifica_Imagen()
Dim dt As New DataTable
Dim u As New Entidad.Usuario
u.nick_usu = Session("Usuario")
'u.nick_usu = "suzan"
dt = cu.Perfil_Usuario(u)
Dim i As Integer
i = Integer.Parse(dt.Rows(0).Item(0))
If i = 0 Then
Image1.ImageUrl = "~/img/Usuario.png"
Else
Image1.ImageUrl = "~/img/" + dt.Rows(0).Item(1).ToString()
End If
Image1.Height = 60
Image1.Width = 60
End Sub
Protected Sub btnsession_Click(ByVal sender As Object, ByVal e As System.
EventArgs) Handles btnsession.Click
Dim u As New Entidad.Usuario
u.nick_usu = Session("Usuario")
u.est_usu = 0
cu.Est_Con_Usuario(u)
Session("Usuario") = "desconectado"
Response.Redirect("Home.aspx")
End Sub
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 221
www.detodoprogramacion.org
222 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a:link {
color: #000099;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000099;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a:active {
text-decoration: none;
color: #000099;
}
-->
</style>
</head>
<body>
<form id="form1" runat="server">
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0"
style="color: red">
<tr>
<td colspan="2" rowspan="3"><img src="auxiliares/logo.png" alt=""
width="345" height="125" /></td>
<td height="87" style="width: 443px"> </td>
<td width="197" align="center"><asp:Image ID="Image2" runat="server"
Height="60px" Width="60px"/></td>
</tr>
<tr>
<td style="width: 443px; height: 19px"> </td>
<td align="center" style="height: 19px">
<asp:Label ID="lblusuario" runat="server" ForeColor="Green" Width="1px"
style="color: red; font-family: 'Californian FB'" Font-Bold="True"></asp:Label>
</td>
</tr>
<tr>
<td valign="middle" style="font-family:Arial Narrow;font-
size:5;color:#333333; width: 443px;">
<script language ="javascript" type="text/javascript">
var hoy = new Date();
dia = hoy.getDate();
mes = hoy.getMonth();
anyo = hoy.getYear();
if (mes == "0") convertir_mes = "Enero";
else if (mes == "1") convertir_mes = "Febrero";
else if (mes == "2") convertir_mes = "Marzo";
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 223
www.detodoprogramacion.org
224 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
<td colspan="2"> </td>
<td style="height: 19px; width: 443px;"> </td>
<td style="height: 19px"> </td>
</tr>
<tr>
<td style="width: 53px; height: 19px"> </td>
<td style="font-size: 15pt; font-family: forte">
Usuarios Conectados</td>
<td style="width: 443px; height: 19px"> </td>
<td style="height: 19px"> </td>
</tr>
<tr>
<td style="height: 19px"> </td>
<td style="height: 19px"> </td>
<td style="height: 19px; width: 443px;"> </td>
<td style="height: 19px"> </td>
</tr>
<tr>
<td style="height: 20px"> </td>
<td colspan="2" rowspan="7" style="text-align: center">
<asp:GridView ID="grvmennue" runat="server"
AutoGenerateColumns="False"
CellPadding="3" ForeColor="Black" GridLines="Vertical"
Width="496px" BackColor="White" BorderColor="#999999" BorderStyle="Solid"
BorderWidth="1px" Font-Bold="True" Font-Names="Californian FB">
<FooterStyle BackColor="#CCCCCC" />
<Columns>
<asp:TemplateField HeaderText="Imagen">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"></
asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Image ID="Image1" runat="server"
Height="72px" Width="69px" ImageUrl='<%# Eval("nom_fot","~/img/{0}") %>' />
</ItemTemplate>
<HeaderStyle Font-Names="Arial Narrow" />
</asp:TemplateField>
<asp:BoundField DataField="nick_usu"
HeaderText="Usuario" >
<ControlStyle Font-Names="Arial Black" />
<HeaderStyle Font-Names="Arial Narrow" />
</asp:BoundField>
<asp:BoundField DataField="nom_pais" HeaderText="Pais"
>
<HeaderStyle Font-Names="Arial Narrow" />
</asp:BoundField>
<asp:TemplateField HeaderText="Ver">
<ItemTemplate>
<asp:HyperLink ID="HyperLink2" runat="server"
NavigateUrl='<%# Eval("nick_usu","Inf_Usuario.aspx?cod={0}") %>'>Visitar</
asp:HyperLink>
</ItemTemplate>
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 225
</asp:TemplateField>
</Columns>
<SelectedRowStyle BackColor="#000099" Font-Bold="True"
ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black"
HorizontalAlign="Center" />
<HeaderStyle BackColor="Black" Font-Bold="True"
ForeColor="White" />
<AlternatingRowStyle BackColor="#CCCCCC" />
</asp:GridView> </td>
</tr>
<tr>
<td style="height: 20px"> </td>
</tr>
<tr>
<td style="height: 20px"> </td>
</tr>
<tr>
<td style="height: 20px"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td style="height: 19px; background-color: silver;"
colspan="4"> </td>
</tr>
</table>
</form>
</body>
</html>
Programación
Imports Entidad
Imports Negocio
Imports System.Data
Partial Class Usuarios_Conectados
Inherits System.Web.UI.Page
Dim cu As New Negocio.C_Usuario
Dim cm As New Negocio.C_Mensajes
www.detodoprogramacion.org
226 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
u.est_usu = 0
cu.Est_Con_Usuario(u)
Session("Usuario") = "desconectado"
Response.Redirect("Home.aspx")
End Sub
Sub lista_usuarios()
grvmennue.DataSource = cu.Usuarios_Conectados()
grvmennue.DataBind()
End Sub
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 227
End Class
www.detodoprogramacion.org
228 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
</head>
<body>
<form id="form1" runat="server">
<table width="80%" border="0" align="center" cellpadding="0"
cellspacing="0" >
<tr>
<td width="43%" rowspan="3"><img src="auxiliares/logo.png" alt=""
width="345" height="125" /></td>
<td width="38%" height="85"> </td>
<td width="19%" align="center"><asp:Image ID="Image1" runat="server"
Height="60px" Width="60px" /></td>
</tr>
<tr>
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 229
<tr>
<td colspan="3" bgcolor="#CCCCCC" style="height: 3px"></td>
</tr>
www.detodoprogramacion.org
230 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
<tr>
<td style="background-color: salmon" colspan="3"> </td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="TextBox1" runat="server" Width="335px"></
asp:TextBox></td>
<td><asp:ImageButton ID="btnbuscar" runat="server"
AlternateText="Buscar" BorderColor="#D4D0C8"
Height="30" ImageUrl="auxiliares/buscar.png" Width="30" /></
td>
<td> </td>
</tr>
<tr>
<td style="height: 20px">
<asp:Label ID="Label1" runat="server" ForeColor="Gray" Font-
Names="Arial Narrow" style="font-family: 'Californian FB'"></asp:Label>
</td>
<td style="height: 20px"> </td>
<td style="height: 20px"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="center" style="font-size: 14pt; color: red; font-family:
forte">
Lista de Videos</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">
<table width="80%" border="0" align="left" cellpadding="1"
cellspacing="1">
<%
Dim dt As New System.Data.DataTable
Dim objdao As New Negocio.C_Video
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 231
www.detodoprogramacion.org
232 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
</td>
</tr>
</table>
</form>
</body>
</html>
Código
Imports Entidad
Imports Negocio
Imports System.Data
Partial Class listado
Inherits System.Web.UI.Page
Dim x As String
Dim x2 As String
Dim cu As New C_Usuario
Sub Verifica_Imagen()
Dim dt As New DataTable
Dim u As New Entidad.Usuario
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 233
u.nick_usu = Session("Usuario")
dt = cu.Perfil_Usuario(u)
Dim i As Integer
i = Integer.Parse(dt.Rows(0).Item(0))
If i = 0 Then
Image1.ImageUrl = "~/img/Usuario.png"
Else
Image1.ImageUrl = "~/img/" + dt.Rows(0).Item(1).ToString()
End If
Image1.Height = 60
Image1.Width = 60
End Sub
Protected Sub btnsession_Click(ByVal sender As Object, ByVal e As System.
EventArgs) Handles btnsession.Click
Dim u As New Entidad.Usuario
u.nick_usu = Session("Usuario")
u.est_usu = 0
cu.Est_Con_Usuario(u)
Session("Usuario") = "desconectado"
Response.Redirect("Home.aspx")
End Sub
www.detodoprogramacion.org
234 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
End Sub
End Class
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 235
a:visited {
text-decoration: none;
color: #000099;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a:active {
text-decoration: none;
color: #000099;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<table border="0" align="center" cellpadding="0" cellspacing="0"
style="width: 86%; height: 502px" >
<tr>
<td width="43%" rowspan="3"><img src="auxiliares/logo.png" alt=""
width="345" height="125" /></td>
<td width="47%" height="87" > </td>
<td align="center" style="width: 107px"><asp:Image ID="Image1"
runat="server" Height="60px" Width="60px" /></td>
</tr>
<tr>
<td style="height: 19px"> </td>
<td align="center" style="width: 107px; height: 19px;"><asp:Label
ID="lblusuario" runat="server" Width="136px" ForeColor="Green" style="color: red;
font-family: 'Californian FB'"></asp:Label></td>
</tr>
<tr>
<td style="font-family:Arial Narrow;font-
size:5;color:#333333; height: 20px;">
<script language ="javascript" type="text/javascript">
var hoy = new Date();
dia = hoy.getDate();
mes = hoy.getMonth();
anyo = hoy.getYear();
if (mes == "0") convertir_mes = "Enero";
else if (mes == "1") convertir_mes = "Febrero";
else if (mes == "2") convertir_mes = "Marzo";
else if (mes == "3") convertir_mes = "Abril";
else if (mes == "4") convertir_mes = "Mayo";
else if (mes == "5") convertir_mes = "Junio";
else if (mes == "6") convertir_mes = "Julio";
else if (mes == "7") convertir_mes = "Agosto";
else if (mes == "8") convertir_mes = "Septiembre";
else if (mes == "9") convertir_mes = "Octubre";
else if (mes == "10") convertir_mes = "Noviembre";
else convertir_mes = "Diciembre";
www.detodoprogramacion.org
236 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 237
www.detodoprogramacion.org
238 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 239
</tr>
<tr>
<td style="height: 20px; background-color: white" > </td>
<td style="background-color: white" > </td>
<td style="background-color: white" > </td>
<td colspan="3" rowspan="2" style="background-color:
#ffffff">
<asp:Label ID="Label1" runat="server" Font-Names="Arial
Narrow" ForeColor="Red" Text="* para ver mas información ,es necesario que
se registre" Width="325px" style="font-family: 'Californian FB'"></asp:Label>
</td>
<td style="background-color: #ffffff" > </td>
</tr>
<tr>
<td style="height: 20px; background-color: white" > </td>
<td style="height: 20px; background-color: white" > </td>
<td style="height: 20px; background-color: white" > </td>
<td style="background-color: #ffffff" > </td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
Programación
Imports Entidad
Imports Negocio
Imports System.Data
Partial Class Inf_Usuario
Inherits System.Web.UI.Page
Dim cu As New Negocio.C_Usuario
Dim cm As New Negocio.C_Mensajes
www.detodoprogramacion.org
240 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
btnsession.Visible = False
btnpagina.Visible = False
Image1.Visible = False
datos_usuario()
lblcorreo.Visible = False
lblapellidos.Visible = False
lblnacimiento.Visible = False
btnusuarios.Visible = False
Else
lblusuario.Text = Session("Usuario")
lblusuario.Visible = True
btnsession.Visible = True
btnpagina.Visible = True
btnregistro.Visible = False
btningresar.Visible = False
Image1.Visible = True
btnusuarios.Visible = True
Label1.Visible = False
Verifica_Imagen()
datos_usuario()
End If
End If
End Sub
Sub Verifica_Imagen()
Sub datos_usuario()
Dim dt As New DataTable
www.detodoprogramacion.org
Capítulo 1: Aplicación de manejo de imágenes y videos - Youtube 241
End Sub
www.detodoprogramacion.org
242 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
CAPÍTULO
Aplicación de Proceso
2 de Banca Virtual
www.detodoprogramacion.org
244 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 245
Ahora vamos a ejecutar el script de inserción para los datos de las tablas (SCRIPT_INSERCION):
-------------------------------------------------------------------------
INSERCION DE DATA PARA LA BDBANCO --------------------------------
use dbBancaVirtual
go
www.detodoprogramacion.org
246 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
claveacceso,cli_clavedigital,cli_email)
VALUES ('FATIMA SANCHEZ HUACHEZ','3852478','','56325236234','Av. La Marina
1234','1234','123456','laura@gmail.com.pe');
INSERT INTO CLIENTES(cli_nombre,cli_telfijo,cli_telmovil,cli_ruc,cli_direccion,cli_
claveacceso,cli_clavedigital,cli_email)
VALUES ('YURI PANDO','4819005','958364752','57896325487','Av. Pardo
456','1234','123456','alejandromoreno@gmail.com.pe');
INSERT INTO CLIENTES(cli_nombre,cli_telfijo,cli_telmovil,cli_ruc,cli_direccion,cli_
claveacceso,cli_clavedigital,cli_email)
VALUES ('VICTOR SANCHEZ','3578962','','10257800985','Av. Angamos
2547','1234','123456','claudia_lee@gmail.com.pe');
INSERT INTO CLIENTES(cli_nombre,cli_telfijo,cli_telmovil,cli_ruc,cli_direccion,cli_
claveacceso,cli_clavedigital,cli_email)
VALUES ('JAVIER PAJUELO','2578638','','10524788301','Av. España
354','1234','123456','castañeda-blas@gmail.com.pe');
INSERT INTO CLIENTES(cli_nombre,cli_telfijo,cli_telmovil,cli_ruc,cli_direccion,cli_
claveacceso,cli_clavedigital,cli_email)
VALUES ('HENRY CHAVEZ','5786320','','20045876582','Av. Faucett
2547','1234','123456','percyobrendo@gmail.com.pe');
INSERT INTO CLIENTES(cli_nombre,cli_telfijo,cli_telmovil,cli_ruc,cli_direccion,cli_
claveacceso,cli_clavedigital,cli_email)
VALUES ('LUIS GARCIA VALDEZ','5753524','','20478534014','Jr. Callao
247','1234','123456','miguel-narva@gmail.com.pe');
INSERT INTO CLIENTES(cli_nombre,cli_telfijo,cli_telmovil,cli_ruc,cli_direccion,cli_
claveacceso,cli_clavedigital,cli_email)
VALUES ('KATI MORENO LAVADO','3578502','','20450041785','Av. Panamá
2334','1234','123456','monica-gonza@gmail.com.pe');
INSERT INTO CLIENTES(cli_nombre,cli_telfijo,cli_telmovil,cli_ruc,cli_direccion,cli_
claveacceso,cli_clavedigital,cli_email)
VALUES ('CARLOS SEGURA','4825735','','10250088534','Av. Tacna
2457','1234','123456','jhon-morales@gmail.com.pe');
INSERT INTO CLIENTES(cli_nombre,cli_telfijo,cli_telmovil,cli_ruc,cli_direccion,cli_
claveacceso,cli_clavedigital,cli_email)
VALUES ('HELLEN PINEDA DAVILA','3578465','','10258743578','Av. Arenales
1234','1234','123456','mpaico@gmail.com.pe');
INSERT INTO CLIENTES(cli_nombre,cli_telfijo,cli_telmovil,cli_ruc,cli_direccion,cli_
claveacceso,cli_clavedigital,cli_email)
VALUES ('LIS PERALDO','3578524','','10582240535','Av. La Marina
3574','1234','123456','miguelramiro@gmail.com.pe');
go
------------------------------------------------------------------------ TIPO DE
CUENTAS ---------------------------------------------------
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 247
------------------------------------------------------------------------ INSERTAR
TARJETAS -------------------------------------------------
www.detodoprogramacion.org
248 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
------------------------------------------------------------------------ INSERTAR
TIPO_CAMBIO ----------------------------------------------
---------------------------------------------------------------------- -- INSERTAR
USUARIOS -------------------------------------------------
go
----------------------------------
-- Movimientos
----------------------------------
insert into movimientos values('2010/04/01',2000,1500,500,1,1)
insert into movimientos values('2010/04/06',1500,1400,100,1,1)
insert into movimientos values('2010/04/08',1400,1310,90,1,1)
insert into movimientos values('2010/04/12',1310,1200,110,1,1)
insert into movimientos values('2010/04/04',1200,1000,200,1,1)
go
insert into movimientos values('2010/02/02',2000,1500,500,1,2)
insert into movimientos values('2010/03/07',1500,1400,100,1,2)
insert into movimientos values('2010/04/09',1400,1200,200,1,2)
go
insert into movimientos values('2010/04/01',1000,500,500,1,3)
insert into movimientos values('2010/04/06',500,400,100,1,3)
insert into movimientos values('2010/04/08',400,350,50,1,3)
go
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 249
Luego de eso, ejecutamos el Script de los procedimientos almacenados, para empezar trabajar(Archivo
procedures.sql).
use dbBancaVirtual
go
-- Procedimiento de Logeo
create PROC Logueo1
@nro VARCHAR(16),
@des VARCHAR(30)
AS
SELECT tarj_numero,tarj_descripcion from tarjetas t,clientes c where t.cli_id=c.
cli_id and tarj_numero=@nro and tarj_descripcion=@des
Go
--logueo1 '5248540105056382','CREDIMAS'
-- Procedimiento de Logeo 2
create PROC Logueo2
@nro VARCHAR(16),
@clave VARCHAR(4)
AS
SELECT c.cli_nombre,t.tarj_numero,t.tarj_clave,c.cli_id from tarjetas t,clientes c
where t.cli_id=c.cli_id and t.tarj_numero=@nro and t.tarj_clave=@clave
Go
--logueo2 '5248540105056382','753'
www.detodoprogramacion.org
250 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
--lis_cuenta_cod '5248540105056382'
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 251
Datos_Cliente
Imports System.Data
Imports System.Configuration
Public Class Datos_Cliente
www.detodoprogramacion.org
252 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Datos_Cuentas
Imports System.Configuration
Imports System.Data
Public Class Datos_Cuentas
Public Function cn() As String
Return ConfigurationManager.ConnectionStrings("conex").ConnectionString
End Function
Public Function lista_cta(ByVal cod As String) As DataSet
Return SqlHelper.ExecuteDataset(cn, "lista_cta", cod)
End Function
Public Function lis_cuenta_cod(ByVal cod As String) As DataSet
Return SqlHelper.ExecuteDataset(cn, "lis_cuenta_cod", cod)
End Function
Public Function cuentas_por_tarjeta(ByVal numero As Integer) As DataSet
Return SqlHelper.ExecuteDataset(cn, "sp_CuentasPorTarjeta", numero)
End Function
Public Function cuentas_por_numcta(ByVal numcta As String) As DataSet
Return SqlHelper.ExecuteDataset(cn, "sp_CuentasPorNumero", numcta)
End Function
End Class
datos_movimientos
Imports System.Configuration
Imports System.Data
Public Class datos_movimientos
Public Function cn() As String
Return ConfigurationManager.ConnectionStrings("conex").ConnectionString
End Function
Public Function lis_mov_cod(ByVal cod As Integer) As DataSet
Return SqlHelper.ExecuteDataset(cn, "lis_mov_cod", cod)
End Function
Public Function depositar(ByVal fec As Date, ByVal salanterior As Decimal,
ByVal salactual As Decimal, ByVal monto As Decimal, ByVal tmov_id As Integer,
ByVal cta_id As Integer) As DataSet
Return SqlHelper.ExecuteDataset(cn, "depositar", fec, salanterior,
salactual, monto, tmov_id, cta_id)
End Function
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 253
Datos_tarjeta
Imports System.Configuration
Imports System.Data
Public Class Datos_tarjeta
Public Function cn() As String
Return ConfigurationManager.ConnectionStrings("conex").ConnectionString
End Function
Public Function lis_tar_des() As DataSet
Return SqlHelper.ExecuteDataset(cn, "lis_tar_des")
End Function
End Class
Luego no se olviden de crear el SQLHelper, tal como se encuentra en el script adjunto de este ejercicio.
Negocio_Cliente
Imports System.Data
Imports DATOS
Public Class Negocio_Cliente
Dim obj As New Datos_Cliente
Public Function logueo1(ByVal Nro As String, ByVal des As String) As DataSet
Return obj.logueo1(Nro, des)
End Function
Public Function logueo2(ByVal Nro As String, ByVal cla As String) As DataSet
Return obj.logueo2(Nro, cla)
End Function
Public Function cliente(ByVal id As Integer) As DataSet
Return obj.cliente(id)
End Function
End Class
www.detodoprogramacion.org
254 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Negocio_Cuenta
Imports System.Data
Imports DATOS
Public Class Negocio_Cuenta
Dim obj As New Datos_Cuentas
Public Function lista_cta(ByVal cod As String) As DataSet
Return obj.lista_cta(cod)
End Function
Public Function lis_cuenta_cod(ByVal cod As String) As DataSet
Return obj.lis_cuenta_cod(cod)
End Function
Public Function cuentas_por_tarjeta(ByVal numero As Integer) As DataSet
Return obj.cuentas_por_tarjeta(numero)
End Function
Public Function cuentas_por_numcta(ByVal numcta As String) As DataSet
Return obj.cuentas_por_numcta(numcta)
End Function
End Class
negocio_movimientos
Imports System.Data
Imports DATOS
Public Class negocio_movimientos
Dim obj As New datos_movimientos
Public Function lis_mov_cod(ByVal cod As Integer) As DataSet
Return obj.lis_mov_cod(cod)
End Function
Public Function depositar(ByVal fec As Date, ByVal salanterior As Decimal,
ByVal salactual As Decimal, ByVal monto As Decimal, ByVal tmov_id As Integer,
ByVal cta_id As Integer) As DataSet
Return obj.depositar(fec, salanterior, salactual, monto, tmov_id, cta_id)
End Function
Public Function retirar(ByVal fec As Date, ByVal salanterior As Decimal, ByVal
salactual As Decimal, ByVal monto As Decimal, ByVal tmov_id As Integer, ByVal cta_
id As Integer) As DataSet
Return obj.retirar(fec, salanterior, salactual, monto, tmov_id, cta_id)
End Function
End Class
Negocio_tarjeta
Imports System.Data
Imports DATOS
Public Class Negocio_tarjeta
Dim obj As New Datos_tarjeta
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 255
Para lograr este código fuente (source) debe ser de la siguiente manera:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Banca Virtual</title>
<link href="styles/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function validar(){
if(document.form1.TextBox2.value == ''){
alert('Ingrese el numero de tarjeta');
return false;
}
return true;
}
</script>
<script type="text/javascript" language="javaScript">
window.history.forward();
/*window.history.back(1);*/
</script>
</head>
<body>
<div id="outWrapper" class="default">
<div id="wrapper">
<div id="header">
<div id="logo"> <h1><a href="/"><span>Banca Virtual</span></a></h1>
</div>
www.detodoprogramacion.org
256 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
<div id="menu">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="right">
<ul id="main">
<li><a href="/" class="actived">Inicio</a></li>
<li><a href="/">Nosotros</a></li>
<li><a href="/">Servicio al cliente</a></li>
<li><a href="/">Contactenos</a></li>
<li><a href="/">Mapa web</a></li>
</ul></td>
</tr>
<tr>
<td align="right"> </td>
</tr>
<tr>
<td align="right">
<ul id="xtras">
<li> <img src="styles/graphics/ico_tipocambio.jpg" width="13"
height="10" alt="Banca Virtual - Icono" /></li>
<li>Tipo de cambio:</li>
<li><strong>Compra</strong>: S/. 2.875</li>
<li><strong>Venta</strong>: S/- 2.890</li>
</ul>
</td>
</tr>
</table>
</div>
</div><!-- end #header -->
<div id="container">
<div id="sidebar">
<div class="form"> <form id="form1" runat="server">
<div class="fieldset" id="box">
<label class="txtBold">Seleccione tu tarjeta:</label><br />
<asp:DropDownList ID="DropDownList1" runat="server"
Width="240px" AutoPostBack="True">
</asp:DropDownList>
<label class="txtBold">Ingrese Nro de Tarjeta:</label><br
/>
<asp:TextBox ID="TextBox2" runat="server"
Width="202px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
runat="server"
ControlToValidate="TextBox2" ErrorMessage="Ingrese Numero " Style="position:
relative"> </asp:RequiredFieldValidator><p class="txtGreen">Complete la
información y luego presione el
boton continuar:</p>
<asp:Button ID="Button2" runat="server" Text="Continuar"
CssClass="btnContinue" />
</div>
</form>
</div>
</div>
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 257
<div id="sidebar2">
<div class="form2">
<p>Banca Virtual</p> <h1>PARA CLIENTES</h1>
<p>Bienvenido a nuestra banca por intenet,
en donde podrás tener acceso a tus cuentas y realizar
transacciones con total seguridad y comodidad.</p>
<h2>SERVICIO AL CLIENTE</h2>
<ul>
<li>* <a href="#">Afiliate ahora</a></li>
<li>* <a href="#">¿Olvidaste tu clave?</a></li>
<li>* <a href="#">Conoce nuestro servicio de banca
virtual</a></li>
</ul>
</div>
</div>
<div id="sidebar3">
<div id="aviso" class="aviso_tips">
<p> </p><p class="txtBold">
<img src="styles/graphics/icono_seguridad.gif" width="62"
height="62" align="left"
alt="Banca Virtual"/> Seguridad:</p>
<p class="txtBold"> </p>
<h1 class="txtGreen ">Que debo saber?</h1>
<p> </p>
<p><strong class="txtBold">Banca Virtual</strong> no envia correos electronicos
solicitando información confidencial,como tu numero de tu tarjeta o clave. Para
mayor información has clic <a href="#">aqui</a></p>
</div>
</div>
<br class="clearfloat" />
<div id="content">
<h3>NOTICIAS Bancarias</h3>
<ul>
<li>» <a href="#"> Banco Nuevo Finanza otorgó crédito
300 mil a microempresarios</a></li>
<li>» <a href="#">Banco Nuevo Finanza entregó siete
toneladas en donativos
para Huánuco y Zonas Altoandinas</a></li>
<li>» <a href="#">Suplemento por el 50 aniversario del
Banco Nuevo Finanza</a></li>
<li>» <a href="#">Cómo informa la prensa sobre el
Banco</a></li>
</ul>
</div>
</div>
<div id="footer">
<p style="float:left;">
<a href="#">Políticas de Seguridad</a> |
<a href="#">Terminos de uso</a> |
<a href="#">Privacidad</a>
</p>
<p style="float:right;">© Copyright Banca Virtual Perú - 2010.
www.detodoprogramacion.org
258 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
dt = obj.logueo1(nro, des).Tables(0)
If dt.Rows.Count > 0 Then
Dim cu As String = dt.Rows(0)(0)
Response.Redirect("Logueo.aspx?cu=" + cu)
Else
Response.Redirect("error_1.aspx")
End If
TextBox2.Text = ""
Catch ex As Exception
End Try
End Sub
End Try
End Sub
End Class
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 259
Ahora veamos la página de LOGUEO.ASPX, en la cual ingresaremos la clave que nos permi rá el acceso
al sistema.
www.detodoprogramacion.org
260 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
</td>
</tr>
<tr>
<td align="right"> </td>
</tr>
<tr>
<td align="right">
<ul id="xtras">
<li><img src="styles/graphics/ico_tipocambio.jpg" width="13" height="10"
alt="Banca Virtual - Icono" /></li>
<li>Tipo de cambio:</li>
<li><strong>Compra</strong>: S/. 2.875</li>
<li><strong>Venta</strong>: S/- 2.890</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
<div id="container">
<div id="sidebar">
<div class="form" style="text-align:center;">
<form name="form1" id="form1" runat="server">
<table style="text-align:center;" width="100%">
<tr>
<td colspan="2">
<asp:Label ID="Label1" runat="server" Text="Numero
de Tarjeta"
Width="128px"></asp:Label>
<asp:Label ID="Label2" runat="server"
Width="104px"></asp:Label><br />
</td>
</tr>
<tr>
<td align="right"><asp:Label ID="Label3"
runat="server"
Text="Ingrese Clave"></asp:Label></td>
<td align="left" valign="middle"><asp:TextBox
ID="txtclave" TextMode="Password"
runat="server" Width="64px"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2" align="center">
<table>
<tr>
<script language="javascript">
var num=new Array(1,2,3,4,5,6,7,8,9,0);
cont=0;
for(i=0;i<num.length;i++){
document.write("<td width='20' height='20'
align='center'
background='imagenes/btn.jpg' ><a style='color:#333333; text-decoration=none'
href='javascript:poner("+num[i]+")'>"+num[i]+"</a></td>");
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 261
cont++;
if(cont%3==0){
document.write("</tr><tr>");
}
}
function poner(n){
document.form1.txtclave.value+=n;
}
</script>
<td colspan="2" width="38" background="imagenes/
btn_1.jpg" style="height: 19px">
<a href="javascript:limpiar()" style="color#333333;
text-decoration:none;"> Limpiar</a>
</td>
<script language="javascript">
function limpiar(){
document.form1.txtclave.value="";
document.form1.txtclave.value="";
}
</script>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2"><asp:Button ID="Button1"
runat="server" Text="Ingresar" /></td>
</tr>
</table>
</form>
</div>
</div>
<div id="sidebar2">
<div class="form2">
<p>Banca Virtual</p>
<h1>PARA PERSONAS</h1>
<p>Bienvenido a nuestra banca por intenet,
en donde podrás tener acceso a tus cuentas y realizar
transacciones con total seguridad y comodidad.</p>
<h2>SERVICIO AL CLIENTE</h2>
<ul>
<li>* <a href="#">Afiliate ahora</a></li>
<li>* <a href="#">¿Olvidaste tu clave?</a></li>
<li>* <a href="#">Conoce nuestro servicio de banca
virtual</a></li>
</ul>
</div>
<!-- end #sidebar2 -->
</div>
<div id="sidebar3">
www.detodoprogramacion.org
262 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 263
Una de las cosas que siempre me preguntan los alumnos es cómo se construyó esta parte del formulario:
No olvidemos que en esta página estamos haciendo referencia a esta hoja de es lo:
<link href="styles/default.css" rel="stylesheet" type="text/css" />
www.detodoprogramacion.org
264 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
End Try
End Sub
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.
EventArgs) Handles Button1.Click
Try
Dim dt As New DataTable
Dim nro As String = Me.Label2.Text()
Dim cla As String = Me.txtclave.Text()
dt = obj.logueo2(nro, cla).Tables(0)
'Session("tarjeta") = nro
If dt.Rows.Count > 0 Then
Dim nom As String = dt.Rows(0)(0)
Dim cod As String = dt.Rows(0)(1)
Dim cli_id As Integer = dt.Rows(0)(3)
Session("usuario") = nom
Session("codigo") = cod
Session("cliid") = cli_id
Response.Redirect("bienvenida.aspx?nom=" + nom + "&cod=" + cod)
Else
Response.Redirect("error_1.aspx")
End If
Catch ex As Exception
End Try
End Sub
End Class
Seguidamente, vamos a la página BIENVENIDA.ASPX, donde podemos indicar cuál es el proceso que
deseamos realizar.
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 265
<li>Tipo de cambio:</li>
<li><strong>Compra</strong>: S/. 2.875</li>
<li><strong>Venta</strong>: S/- 2.890</li>
</ul>
</td>
</tr>
</table>
</div>
</div><!-- end #header -->
<div id="container">
www.detodoprogramacion.org
266 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
<div id="content">
<div id="opciones">
<h3>Consultas</h3>
<ul>
<li><a href="#">› Saldos y movimientos</a></li>
</ul>
<p> </p>
<h3>Operaciones</h3>
<ul>
<li><a href="transferencia.aspx">› Transferencia</
a></li>
</ul>
</div>
<div id="details">
<h3>Bienvenido;</h3>
<div style="display:block;">
<form id="form1" runat="server">
<table class="tableTitular" >
<tr>
<th><asp:Label ID="Label1" runat="server" Text="Titular:"
Width="73px"></asp:Label></th>
<td><asp:Label ID="Label2" runat="server"></asp:Label></td>
<th style="width: 51px"><asp:Label ID="Label3" runat="server"
Text="Fecha:"
Width="48px"></asp:Label></th>
<td><asp:Label ID="lblfec" runat="server"></asp:Label></td>
</tr>
<tr>
<th><asp:Label ID="Label4" runat="server" Text="Tarjeta:"
Width="72px">
</asp:Label></th>
<td><asp:Label ID="lbltarjeta" runat="server"></asp:Label></td>
<th style="width: 51px"><asp:Label ID="Label5" runat="server"
Text="Hora:"
Width="48px"></asp:Label></th>
<td><asp:Label ID="lblhora" runat="server"></asp:Label></td>
</tr>
</table>
<asp:LinkButton ID="LinkButton3" runat="server" Style="left: 584px;
position: relative;
top: -94px">Salir</asp:LinkButton><p> </p>
<p><asp:LinkButton ID="LinkButton2" runat="server">Retirar</
asp:LinkButton>
<asp:LinkButton ID="LinkButton1" runat="server">Depositar</
asp:LinkButton>
</p>
<p> </p>
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 267
www.detodoprogramacion.org
268 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Ahora, veamos el script que hemos creado para poder desarrollar el trabajo de esta página:
Imports NEGOCIO
Imports System.Data
Partial Class inicio
Inherits System.Web.UI.Page
Dim obj As New Negocio_Cuenta
Dim objm As New negocio_movimientos
Dim dt As DataTable
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Handles Me.Load
Try
If Session("usuario") IsNot Nothing Then
Label2.Text() = Session("usuario")
dt = obj.lis_cuenta_cod(Session("codigo")).Tables(0)
lbltarjeta.Text = dt.Rows(0)(4) + " " + dt.Rows(0)(5)
Session("tbl1") = dt
GridView1.DataSource = Session("tbl1") : GridView1.DataBind()
lblfec.Text() = Today.Date
lblhora.Text = Hour(Now) & ":" & Minute(Now) & ":" & Second(Now)
Dim nr As Integer = dt.Rows(0)(6)
Session("nro") = nr : Session("hora") = lblhora.Text
Session("fecha") = lblfec.Text
Else
Response.Redirect("Index.aspx")
End If
Catch ex As Exception
End Try
End Sub
Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, ByVal e
As System.EventArgs) Handles GridView1.SelectedIndexChanged
Try
Dim i As Integer = 0
For i = 0 To dt.Rows.Count - 1
Dim cod As String = dt.Rows(0)("cta_id").ToString()
GridView2.DataSource = objm.lis_mov_cod(Integer.Parse(cod))
GridView2.DataBind()
Next
Catch ex As Exception
End Try
End Sub
Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As System.
EventArgs) Handles LinkButton1.Click
Response.Redirect("Depositar.aspx")
End Sub
Protected Sub LinkButton2_Click(ByVal sender As Object, ByVal e As System.
EventArgs) Handles LinkButton2.Click
Response.Redirect("Retirar.aspx")
End Sub
Protected Sub LinkButton3_Click(ByVal sender As Object, ByVal e As System.
EventArgs) Handles LinkButton3.Click
Session.RemoveAll()
Session.Contents.Clear()
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 269
Response.Redirect("Index.aspx")
End Sub
End Class
Ahora, veamos el WebForm de cómo se realiza el proceso de re rar de la cuenta, para esto vamos
trabajar en el WebForm RETIRAR.ASPX:
www.detodoprogramacion.org
270 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
</ul>
</td>
</tr>
<tr>
<td align="right"> </td>
</tr>
<tr>
<td align="right">
<ul id="xtras">
<li>
<img src="styles/graphics/ico_tipocambio.jpg" width="13" height="10"
alt="Banca Virtual - Icono" />
</li>
<li>Tipo de cambio:</li>
<li><strong>Compra</strong>: S/. 2.875</li>
<li><strong>Venta</strong>: S/- 2.890</li>
</ul>
</td>
</tr>
</table>
</div>
</div><!-- end #header -->
<div id="container">
<div id="content">
<div id="opciones">
<h3>Consultas</h3>
<ul>
<li><a href="#">› Saldos y movimientos</a></li>
</ul>
<p> </p>
<h3>Operaciones</h3>
<ul>
<li><a href="#">› Transferencia</a></li>
</ul>
</div>
<div id="details">
<h3>Retiros:</h3>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Cantidad a Retirar"></
asp:Label>
<asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Retirar" />
<asp:LinkButton ID="LinkButton1" runat="server"
Style="position: relative">
Regresar</asp:LinkButton>
<br /><asp:Label ID="lblmsg" runat="server" ForeColor="Red"
Width="240px">
</asp:Label><p> </p>
<asp:GridView ID="GridView1" runat="server" CssClass="tableTitular">
</asp:GridView>
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 271
</div>
</form>
</div> </div> /div>
<div id="footer">
<p style="float:left;">
<a href="#">Políticas de Seguridad</a> |
<a href="#">Terminos de uso</a> |
<a href="#">Privacidad</a>
</p> <p style="float:right;">© Copyright Banca Virtual Perú - 2010.
Todos los derechos reservados. </p>
<br class="clearfloat" />
</div>
</div>
</div>
</body>
</html>
Ahora veamos cómo hemos codificado dentro de los eventos del Web Form:
Imports NEGOCIO
Imports System.Data
Partial Class Retirar
Inherits System.Web.UI.Page
Dim obj As New negocio_movimientos
Dim dt As DataTable
Dim objm As New negocio_movimientos
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.
EventArgs) Handles Button1.Click
Try
If Me.TextBox1.Text <> "" Then
Dim i As Integer = 0
i = dt.Rows.Count - 1
salant = Convert.ToDecimal(dt.Rows(i)("mov_salactual").ToString())
salact = Convert.ToDecimal(dt.Rows(i)("mov_salactual").ToString())
- Convert.ToDecimal(TextBox1.Text)
monto = Convert.ToDecimal(TextBox1.Text)
mov_id = 1
cta_id = Convert.ToInt16(dt.Rows(i)("cta_id").ToString())
If Convert.ToInt16(Me.TextBox1.Text) > 0 Then
If monto <= salant Then
obj.retirar(fec, salant, salact, monto, mov_id, cta_id)
Me.lblmsg.ForeColor = Drawing.Color.Green
Me.lblmsg.Text = "Su operación se realizó
satisfactoriamente"
Else
www.detodoprogramacion.org
272 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
End Try
End Sub
End Try
End Sub
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 273
Ahora veamos el WebForm de cómo depositar en cuenta, para esto vamos trabajar en el WebForm
DEPOSITAR.ASPX:
www.detodoprogramacion.org
274 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
</tr>
<tr>
<td align="right"> <ul id="xtras">
<li>
<img src="styles/graphics/ico_tipocambio.jpg" width="13" height="10"
alt="Banca Virtual - Icono" />
</li>
<li>Tipo de cambio:</li>
<li><strong>Compra</strong>: S/. 2.875</li>
<li><strong>Venta</strong>: S/- 2.890</li>
</ul>
</td>
</tr>
</table>
</div>
</div><!-- end #header -->
<div id="container">
<div id="content">
<div id="opciones">
<h3>Consultas</h3>
<ul>
<li><a href="#">› Saldos y movimientos</a></li>
</ul>
<p> </p>
<h3>Operaciones</h3>
<ul>
<li><a href="#">› Transferencia</a></li>
</ul>
</div>
<div id="details">
<h3>Depositos:</h3>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Cantidad a
Despositar"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Depositar"
/>
<asp:LinkButton ID="LinkButton1" runat="server"
Style="position: relative">
Regresar</asp:LinkButton>
<br /><asp:Label ID="lblmsg" runat="server"
ForeColor="Red" Width="264px"></asp:Label><p> </p>
<asp:GridView ID="GridView1" runat="server"
CssClass="tableTitular">
</asp:GridView>
</div>
</form>
</div>
</div>
</div>
<div id="footer">
<p style="float:left;">
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 275
www.detodoprogramacion.org
276 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Next
Me.TextBox1.Text = ""
Else
Me.lblmsg.Text = "Ingrese un Monto..."
End If
Catch ex As Exception
End Try
End Sub
Catch ex As Exception
End Try
End Sub
Ahora veamos el proceso de transferencia, para esto vamos a trabajar en la ventana TRANSFERENCIA.
aspx
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 277
www.detodoprogramacion.org
278 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
<ul>
<li><a href="#">› Saldos y movimientos</a></li>
</ul>
<p> </p>
<h3>Operaciones</h3>
<ul>
<li><a href="#">› Transferencia</a></li>
</ul>
</div>
<div id="details">
<h3>Transferencia Bancaria:</h3>
<table class="tableTitular" >
<tr>
<th><asp:Label ID="Label2" runat="server" Text="Titular:"
Width="73px"></asp:Label></th>
<td><asp:Label ID="lblTitular" runat="server"></
asp:Label></td>
<th><asp:Label ID="Label4" runat="server" Text="Fecha:"
Width="48px"></asp:Label></th>
<td><asp:Label ID="lblfecha" runat="server"></
asp:Label></td>
</tr>
<tr>
<th><asp:Label ID="Label5" runat="server"
Text="Tarjeta:" Width="72px"></asp:Label></th>
<td><asp:Label ID="lbltarjeta" runat="server"></
asp:Label></td>
<th><asp:Label ID="Label6" runat="server"
Text="Hora:" Width="48px"></asp:Label></th>
<td><asp:Label ID="lblhora" runat="server"></
asp:Label></td>
</tr>
</table>
<div style="display:block; padding:10px;">
<form id="frmTransferencia" runat="server">
<table cellpadding="5">
<tr>
<td><asp:Label ID="Label3" runat="server" Text="Desde que
cuenta deseas trasnferir:"></asp:Label></td>
<td style="width: 158px"><asp:DropDownList ID="ddlCuentas"
runat="server" AutoPostBack="True"></asp:DropDownList>
<asp:LinkButton ID="LinkButton1" runat="server" Style="left:
328px; position: relative;
top: 48px">Regresar</asp:LinkButton></
td>
</tr>
<tr>
<td><asp:Label ID="Label1" runat="server" Text="Ingrese
el monto:"></asp:Label></td>
<td style="width: 158px"><asp:TextBox ID="txtMonto"
runat="server"></asp:TextBox>
<asp:Label ID="lblMsg1" runat="server" ForeColor="Red" Text="Label"
Visible="False"/>
</td>
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 279
</tr>
<tr>
<td><asp:Label ID="Label7" runat="server" Text="A que cuenta deseas
transferir:"></asp:Label></td>
<td style="width: 158px"><asp:TextBox ID="txtCuenta" runat="server"></
asp:TextBox>
<asp:Label ID="lblMsg2" runat="server" ForeColor="Red" Visible="False"
Text="Label">
</asp:Label></td>
</tr>
<tr>
<td>
Ingrese clave digital
</td>
<td style="width: 158px">
<asp:TextBox ID="txtClaveDigital" TextMode="Password"
runat="server"> </asp:TextBox>
<asp:Label ID="lblMsg3" runat="server" Text="Label"
Visible="False" ForeColor="Red">
</asp:Label> </td>
</tr>
<tr>
<td>
</td>
<td style="width: 158px">
<asp:Button ID="Button1" runat="server" Text="Aceptar"
CssClass="btnContinue" /></td>
</tr>
</table>
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</form>
</div>
</div>
</div>
</div>
<div id="footer">
<p style="float:left;">
<a href="#">Políticas de Seguridad</a> |
<a href="#">Terminos de uso</a> |
<a href="#">Privacidad</a>
</p>
<p style="float:right;">© Copyright Banca Virtual Perú - 2010.
Todos los derechos reservados. </p>
<br class="clearfloat" />
</div>
</div>
</div>
</body>
</html>
www.detodoprogramacion.org
280 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
PÁGINA DE ERROR
Página Error 1
En seguida, mostraremos la ventana de error que hemos creado, veremos la ventana error_1.aspx
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 281
Página Error 2
Ahora mostremos la segunda ventana de error que hemos creado, es decir, la página error_2.aspx,
www.detodoprogramacion.org
282 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 283
[Retornar]</asp:HyperLink>
</div>
</div>
</div>
<div id="footer">
<p style="float:left;">
<a href="#">Políticas de Seguridad</a> |
<a href="#">Terminos de uso</a> |
<a href="#">Privacidad</a>
</p>
<p style="float:right;">© Copyright Banca Virtual Perú - 2010.
Todos los derechos reservados. </p>
<br class="clearfloat" />
</div>
</div>
</div>
</body>
</html>
CODIFICACIÓN DE WEBCONFIG
Veamos el código que hemos escrito en archivo de WebConfig:
<?xml version="1.0"?>
<configuration>
<configSections>
<sectionGroup name="system.web.extensions" type="System.Web.Configuration.
SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=3.5.0.0,
Culture=neutral, PublicKeyToken=31BF3856AD364E35">
<sectionGroup name="scripting" type="System.Web.Configuration.
ScriptingSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, Pu
blicKeyToken=31BF3856AD364E35">
<section name="scriptResourceHandler" type="System.Web.Configuration.
ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=3.5.0.0,
Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowD
efinition="MachineToApplication"/>
<sectionGroup name="webServices" type="System.Web.Configuration.
ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=3.5.0.0,
Culture=neutral, PublicKeyToken=31BF3856AD364E35">
<section name="jsonSerialization" type="System.Web.Configuration.
ScriptingJsonSerializationSection, System.Web.Extensions, Version=3.5.0.0,
Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false"
allowDefinition="Everywhere"/>
<section name="profileService" type="System.Web.Configuration.
ScriptingProfileServiceSection, System.Web.Extensions, Version=3.5.0.0,
Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowD
efinition="MachineToApplication"/>
<section name="authenticationService" type="System.Web.Configuration.
ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=3.5.0.0,
Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowD
efinition="MachineToApplication"/>
<section name="roleService" type="System.Web.Configuration.
ScriptingRoleServiceSection, System.Web.Extensions, Version=3.5.0.0,
Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" al
www.detodoprogramacion.org
284 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 285
www.detodoprogramacion.org
286 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
jquery.corner.js
/*!
* jQuery corner plugin: simple corner rounding
* Examples and documentation at: http://jquery.malsup.com/corner/
* version 1.96 (11-MAY-2009)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
;(function($) {
function sz(el, p) {
return parseInt($.css(el,p))||0;
};
function hex2(s) {
var s = parseInt(s).toString(16);
return ( s.length < 2 ) ? '0'+s : s;
};
function gpc(node) {
for ( ; node && node.nodeName.toLowerCase() != 'html'; node = node.parentNode
) {
var v = $.css(node,'backgroundColor');
if ( v.indexOf('rgb') >= 0 ) {
if ($.browser.safari && v == 'rgba(0, 0, 0, 0)')
continue;
var rgb = v.match(/\d+/g);
return '#'+ hex2(rgb[0]) + hex2(rgb[1]) + hex2(rgb[2]);
}
if ( v && v != 'transparent' )
return v;
}
return '#ffffff';
};
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 287
$.fn.corner = function(o) {
// in 1.3+ we can fix mistakes with the ready state
if (this.length == 0) {
if (!$.isReady && this.selector) {
var s = this.selector, c = this.context;
$(function() {
$(s,c).corner(o);
});
}
return this;
}
o = (o||"").toLowerCase();
var keep = /keep/.test(o); // keep borders?
var cc = ((o.match(/cc:(#[0-9a-f]+)/)||[])[1]); // corner color
var sc = ((o.match(/sc:(#[0-9a-f]+)/)||[])[1]); // strip color
var width = parseInt((o.match(/(\d+)px/)||[])[1]) || 10; // corner width
var re = /round|bevel|notch|bite|cool|sharp|slide|jut|curl|tear|fray|wicked|sc
ulpt|long|dog3|dog2|dog/;
var fx = ((o.match(re)||['round'])[0]);
var edges = { T:0, B:1 };
var opts = {
TL: /top|tl/.test(o), TR: /top|tr/.test(o),
BL: /bottom|bl/.test(o), BR: /bottom|br/.test(o)
};
if ( !opts.TL && !opts.TR && !opts.BL && !opts.BR )
opts = { TL:1, TR:1, BL:1, BR:1 };
var strip = document.createElement('div');
strip.style.overflow = 'hidden';
strip.style.height = '1px';
strip.style.backgroundColor = sc || 'transparent';
strip.style.borderStyle = 'solid';
return this.each(function(index){
var pad = {
T: parseInt($.css(this,'paddingTop'))||0, R: parseInt($.
css(this,'paddingRight'))||0,
B: parseInt($.css(this,'paddingBottom'))||0, L: parseInt($.
www.detodoprogramacion.org
288 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
css(this,'paddingLeft'))||0
};
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 289
$.fn.uncorner = function() {
$('div.jquery-corner', this).remove();
return this;
};
})(jQuery);
www.detodoprogramacion.org
290 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Luego, vamos a correr el script de las inserciones en las tablas que hemos creado anteriormente, para
así ingresar la información necesaria para empezar a trabajar.
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 291
Bueno, luego de haber visto toda la parte de la codificación, vamos a ver cómo es el proceso de
funcionamiento de la Banca Virtual.
Como primer paso, vamos a ejecutar el archivo index.asp donde ingresaremos el código de la tarjeta,
para esto existe un archivo que ene por nombre tarjetas,cuentas a uƟlizar.txt; el po de tarjeta que
vamos a trabajar es credimás.
En el cual puedes seleccionar la tarjeta, luego deberás ingresar el Nº de tarjeta y dar clic en el botón
conƟnuar; esta página está validada en caso de que no se ingrese un número de tarjeta o la tarjeta sea
de po errónea.
Cuando la tarjeta es correcta, nos permi rá ingresar a la siguiente página, donde nos pedirá la clave,
en la cual hemos aplicado el po clásico de seguridad para el ingreso de clave.
www.detodoprogramacion.org
292 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
El cual daremos clic en cada uno de los botones (números) que pertenecen a la clave que debemos
ingresar, que se verá reflejado en el control superior.
Luego de haber ingresado la clave, dar clic en el botón ingresar; si la clave es correcta podremos
ingresar al sistema, en caso contrario la página está validando el ingreso correcto de la clave.
Luego de haber ingresado la clave correcta, nos permite ingresar a la ventana principal, en el cual nos
muestra los datos del cliente (nombre del cliente, tarjeta, fecha y hora).
Adicionalmente, nos muestra los datos de la cuenta (número, po de cuenta, moneda y saldo inicial);
asimismo, en el lado izquierdo se muestran los procesos de consultas y de operaciones.
Bien, empecemos trabajando el proceso de RETIRO; para poder trabajar damos clic en el link de re ro,
el cual nos ejecutará la siguiente página:
Como usted puede apreciar, la página nos muestra un control donde vamos a ingresar la can dad a
re rar, también se puede ver el saldo actual de la cuenta, adicionalmente se pueden ver todos los
movimientos que se han realizado por dicha cuenta.
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 293
También se está validando que al momento de re rar debe exis r un valor ingresado.
O si se está ingresando un valor más grande que el saldo actual que ene en la cuenta en estos
momentos.
Luego, se anexará el movimiento en la parte inferior, en el cual el registro nos mostrará la fecha y hora
del movimiento, el po de movimiento, saldo anterior, re ro, saldo actual, número de cuenta.
Ahora vamos a realizar el Depósito, para lo que damos clic en el botón Depositar.
www.detodoprogramacion.org
294 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
El cual nos permite presentar el siguiente diseño, cómo poder ingresar el monto a depositar, los
movimientos efectuados y el saldo.
Ahora ingresemos un depósito correcto, por ejemplo ingresemos el monto de 350 nuevos soles, que
va a significar un incremento en nuestro saldo.
Luego de haber ingresado el monto correcto (en este caso fue de 350 nuevos soles), nos mostrará el
mensaje que dice que la operación fue sa sfactoria y el movimiento se anexó al final, subiendo el saldo
que era de 800 a 1150 nuevos soles.
Ahora vamos a trabajar con la TRANSFERENCIA entre cuentas, para poder realizarlo vamos dar clic en
el link de transferencia.
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 295
Cuando damos clic nos muestra la siguiente página, donde se podrá realizar la transferencia:
En esta página nos muestra los datos de la cuenta en la que nos encontramos (Nombre del Titular, Nro.
de Tarjeta, Fecha y Hora).
Luego encontramos unas líneas más abajo del Nro. de la cuenta desde la cual vamos a enviar el dinero
(de donde se va a re rar).
Luego nos pide ingresar el monto a transferir, y en la siguiente línea, el Nro. de cuenta a donde nosotros
vamos a transferir el monto.
Y por úl mo, se debe ingresar la clave digital que ene cada cuenta para poder realizar la transferencia.
Hemos ingresado el valor a transferir, el número de cuenta donde se desea que se transfiera y la clave
digital que se ene de la cuenta de donde se va a transferir.
www.detodoprogramacion.org
296 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Ahora sería conveniente que ingresemos a la cuenta desde la cual hemos enviado la transferencia, para
apreciar el movimiento.
Ingresemos de nuevo con la clave y número de tarjeta de la cuenta que hemos transferido.
www.detodoprogramacion.org
Capítulo 2: Aplicación de Proceso de Banca Virtual 297
Ahí encontramos la transferencia que se ha realizado y el cambio del saldo que se ene.
Bueno, esta es la forma como hemos desarrollado esta aplicación que se encarga de imitar el proceso de
Banca Virtual, sería bueno que lo instales en tu máquina o lo hagas según los pasos que se encuentran
en el libro, y verifiques qué otras cosas adicionales le puedes poner con la intención de hacer mucho
mejor este proceso.
www.detodoprogramacion.org
CAPÍTULO
DESCRIPCIÓN
El proyecto trata acerca de una enda virtual, trata de realizar los procesos básicos que podemos hacer
cuando vamos de compra. Para esto hemos dividido al sistema en dos partes: la administra va y el
usuario.
Hay que agradecer por todo el apoyo brindado en este sistema a Juan Kuga, alumno de tulación de
una en dad pres giosa, con gran futuro profesional.
USUARIO
La enda virtual muestra los productos que ofrece la empresa TeleRedPerú. La aplicación nos muestra
un catálogo de los productos ordenados por categorías y subcategorías que podremos consultar, y nos
mostrará la descripción del producto seleccionado. El cliente elegirá los productos de su preferencia y
los agregará al carrito de compras, el cual podremos consultar y nos detallará los productos elegidos,
sus respec vos precios, la can dad de unidades a comprar y el total del costo. La can dad de unidades
podrá ser incrementada o disminuida por el cliente, incluso podrá eliminarse el producto de la lista del
carrito que ya no se desee.
Para realizar una compra, el cliente deberá primero crearse una cuenta; al momento de realizar el
pedido, desde la lista del carrito de compras, el sistema pedirá un usuario y contraseña, si no los ene
tendrá una opción para registrar un nuevo usuario y contraseña.
El cliente, una vez registrado su nuevo usuario y contraseña, podrá iniciar sesión con su nueva cuenta y
ver la lista de compras del carrito con los productos ya seleccionados anteriormente, así como realizar
el pedido.
Al realizar el pedido, el sistema le solicitará todos sus datos personales para el término de la operación.
El cliente, al haber iniciado sesión, tendrá acceso a la nueva opción: ‘Historial de compra’, donde se le
mostrarán todos los pedidos realizados y el detalle de cada uno.
ADMINISTRATIVA
El administrador posee una cuenta con la cual inicia sesión, ene la opción de agregar, modificar y
eliminar los productos, categorías, subcategorías, así como consultar las órdenes de compra que se
hayan registrado.
www.detodoprogramacion.org
300 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Administrador:
o El sistema cuenta con un módulo de administración donde se puede actualizar la enda virtual,
agregar, modificar, eliminar ítems (productos, categorías, subcategorías, etc.) y consultar los
pedidos del cliente.
o Protección con clave secreta para acceder a su oficina virtual de administración de la enda.
o Módulo exclusivo para la edición rápida de productos en línea.
o Módulo para administración de sus órdenes de compra, pudiendo seleccionar entre ‘Recibido’,
‘En Proceso’, ‘Entregado’.
INTRODUCCIÓN
La Tienda Virtual está realizada en ASP.net en el lenguaje C# (Programación Orientada a Objetos),
conjunta con el gestor de Base de Datos MySQL (es una base de datos free).
www.detodoprogramacion.org
Capítulo 3: Aplicación del Proyecto Tienda Virtual 301
www.detodoprogramacion.org
302 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
• Visual Studio .NET 2005 en lenguaje C# ASP.NET.: Programa que permi rá la ejecución de la
aplicación web.
www.detodoprogramacion.org
Capítulo 3: Aplicación del Proyecto Tienda Virtual 303
Luego, abrimos el programa y hacemos clic en Add Diagram para crear nuestro diagrama (Base de
Datos).
Después de agregar todas las tablas con sus respec vos atributos, vamos al siguiente paso que es
la relación entre tablas.
En este ejemplo: Tenemos dos tablas por ahora que son Usuario y TipoUsuario, la relación es de
uno a muchos, no iden ficada, eso quiere decir que el id del TipoUsuario viaja a la tabla Usuario
como foreign key (FK) y no como primary key (PK).
www.detodoprogramacion.org
304 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Para hacer dicha relación seleccionamos la herramienta Non-IdenƟfying RelaƟonship y damos clic
en Usuario y luego en TipoUsuario.
www.detodoprogramacion.org
Capítulo 3: Aplicación del Proyecto Tienda Virtual 305
Como podemos observar, ya tengo el modelo de la base de datos terminada, en la cual sólo
haremos uso de las tablas de color Naranja, que es lo único que necesitamos para hacer nuestro
carrito de compras (Tienda Virtual).
Una vez que tengamos el modelo de la base de datos terminada, pasamos a exportar el script de
la base de datos.
www.detodoprogramacion.org
306 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Aquí escogemos la ruta y el nombre del archivo donde queremos que se guarde.
www.detodoprogramacion.org
Capítulo 3: Aplicación del Proyecto Tienda Virtual 307
Ahora buscamos la ruta del script donde guardamos el archivo y lo abrimos, en mi caso lo he
abierto con SQL server Express. Una vez que tenemos el script generado por MySQL podemos
importarlo para trabajar.
www.detodoprogramacion.org
308 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
En esta parte, definimos el po de instalación con la cual vamos a trabajar; para hacer mucho más rápida
la instalación u lizaremos el po de configuración Standard, y así trabajará con una configuración
común.
www.detodoprogramacion.org
Capítulo 3: Aplicación del Proyecto Tienda Virtual 309
En esta pantalla definimos cuál es el nombre del servicio con el que se va a trabajar; adicionalmente, se
puede dar un check para incluir un path del directorio al momento de trabajar en Consola con el Mysql.
Normalmente, cuando definimos los usuarios, que en este caso por defecto root y ene todos los
privilegios, se le debe dar una clave; en este caso le daremos la clave de 123456.
En la parte inferior podemos ver una opción que dice ‘Create An Anonymous Account’, en la que
si damos un check para habilitarlo hacemos referencia de poder acceder a servidores externos que
nosotros tenemos.
www.detodoprogramacion.org
310 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Si luego de haber realizado toda la instalación nos muestra la siguiente ventana, significa que la
instalación resultó correcta.
Bueno, ahora nos corresponde la parte en la cual vamos a restaurar la base de datos Mysql, para lo
cual vamos:
www.detodoprogramacion.org
Capítulo 3: Aplicación del Proyecto Tienda Virtual 311
Después de haber accedido a MySQL Administator, nos colocaremos en la opción RESTORE, hacemos
clic en el botón Open Backup File y seleccionamos el archivo de creación de la Base de Datos (script
MySQL), presionando luego el botón ABRIR, como se muestra a con nuación:
Seleccionar el archivo
www.detodoprogramacion.org
312 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Luego iniciamos la restauración, haciendo clic en Start Restore. Y eso sería todo.
Presionamos las teclas Windows (ventanita) + R y escribimos odbcad32, aparecerá la siguiente ventana,
después presionamos la pestaña DSN de sistema, hacemos clic en el botón Agregar… y seleccionamos
la opción MySQL ODBC 5.1 Driver; luego finalizamos.
www.detodoprogramacion.org
Capítulo 3: Aplicación del Proyecto Tienda Virtual 313
Aparecerá luego la ventana siguiente, en la cual ingresamos los parámetros de conexión correspondiente:
Luego de ello, si deseamos comprobar si los datos para la conexión son correctos, presionamos el
botón Test, si todo está bien la respuesta será afirma va, luego de ello aceptamos (OK).
En caso de que la Prueba de Conexión con MySQL (Test) resulte en error, tendremos que verificar bien
si todos los datos ingresados han sido correctos durante su previa configuración.
www.detodoprogramacion.org
314 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 3: Aplicación del Proyecto Tienda Virtual 315
1. CAPA PRESENTACION.
Muestra toda la interfaz gráfica que estará en contacto
con el usuario. U liza las operaciones de la capa Negocio,
dependiendo de las solicitudes del usuario.
2. CAPA NEGOCIO.
Con ene todas las operaciones y transacciones de negocio
(lógica), que permiten devolver las solicitudes hechas por
el usuario de la web.
3. CAPA DATOS.
Establece la conexión directa con la base de datos y
desarrolla los procesos que incluyen el funcionamiento de
la aplicación web.
Creamos una solución en blanco para, posteriormente, agregarle los siguientes proyectos.
www.detodoprogramacion.org
316 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Una vez que tenemos la solución creada, damos clic derecho y agregamos un nuevo proyecto.
Aquí escogemos Visual C# como lenguaje de programación y una plan lla de Biblioteca de Clases.
Después le damos un nombre a nuestro proyecto.
www.detodoprogramacion.org
Capítulo 3: Aplicación del Proyecto Tienda Virtual 317
Así agregamos todos los proyectos que sean de po Biblioteca de clases hasta tener 3 Proyectos:
DATOS, ENTIDAD y NEGOCIO.
www.detodoprogramacion.org
318 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Luego de tener los 3 proyectos agregados en nuestra solución, agregamos un si o web con nombre
de PRESENTACION, como en el ejemplo anterior. Recuerda que al crear el si o web debes de elegir el
po de lenguaje C#.
Después de tener los 4 proyectos en nuestra solución, nos toca hacer las respec vas referencias.
www.detodoprogramacion.org
Capítulo 3: Aplicación del Proyecto Tienda Virtual 319
ENTIDAD
Nos ubicamos en el proyecto ENTIDAD, damos clic derecho Agregar/Clase y le ponemos de nombre
ENTCategoriaProd.cs
using System;
using System.Collections.Generic;
using System.Text;
namespace ENTIDAD
{
class ENTCategoriaProd
{
private int _idCategoriaProd;
private String _catp_v_NombreCat;
private string _catp_v_Descrip;
private Int16 _catp_b_Estado;
}
}
www.detodoprogramacion.org
320 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Una vez terminado de encapsular todos los campos tendremos este modelo:
using System;
using System.Collections.Generic;
using System.Text;
namespace ENTIDAD
{
public class ENTCategoriaProd
{
private int _idCategoriaProd;
www.detodoprogramacion.org
Capítulo 3: Aplicación del Proyecto Tienda Virtual 321
{
get { return _catp_v_Descrip; }
set { _catp_v_Descrip = value; }
}
private Int16 _catp_b_Estado;
CAPA DATOS
Bueno, en esta capa primero agregamos un elemento existente que es OdbcHelper.cs, que es una clase
que nos ayudará en la programación. El OdbcHelper nos ahorrará código en la capa de datos.
www.detodoprogramacion.org
322 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Luego tendremos esa vista en el explorador de soluciones. A con nuación, agregamos una clase para
nuestra conexión de ASPX a MySQL.
www.detodoprogramacion.org
Capítulo 3: Aplicación del Proyecto Tienda Virtual 323
Una vez creada la clase, lo publicamos para poder llamar dicha clase en otras clases.
www.detodoprogramacion.org
324 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
using System;
using System.Collections.Generic;
using System.Text;
using System.Data.Odbc;
namespace DATOS
{
public class DAOConexion
{
public OdbcConnection Conexion()
{
OdbcConnection cone = new OdbcConnection(“Dsn=conex;description=Conexi
on a Mysql 5.1;server=localhost;uid=root;database=bdtiendavirtual;port=3306”);
return cone;
}
}
}
Seguidamente, creamos una clase cuyo nombre es DAOCategoriaProd.cs y ahora sí nos ponemos a
programar todas las funciones y métodos que necesitemos para que la aplicación funcione.
using System;
using System.Collections.Generic;
using System.Text;
using System.Data;
www.detodoprogramacion.org
Capítulo 3: Aplicación del Proyecto Tienda Virtual 325
using ENTIDAD;
using Tekdev.Data;
namespace DATOS
{
public class DAOCategoriaProd
{
DAOConexion ObjDaoCone = new DAOConexion();
www.detodoprogramacion.org
326 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
CAPA NEGOCIO
Aquí nuevamente creamos una clase, esta vez llamada BUSCategoriaProd.cs y también la publicamos
para poder reu lizar código. Es decir, podemos llamar varias veces a la misma función en la misma o
diferente página.
using System;
using System.Collections.Generic;
using System.Text;
using System.Data;
using ENTIDAD;
using DATOS;
namespace NEGOCIO
{
public class BUSCategoriaProd
www.detodoprogramacion.org
Capítulo 3: Aplicación del Proyecto Tienda Virtual 327
{
DAOCategoriaProd objDaoCatProd = new DAOCategoriaProd();
public DataTable ListarCategoria()
{
return objDaoCatProd.ListarCategoria();
}
www.detodoprogramacion.org
328 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
CAPA PRESENTACIÓN
El diseño de la página fue amoldada a una plan lla ya definida, de la cual lo único que se hizo fue
adecuarla a las expecta vas de la aplicación web en uso.
Aquí vemos la estructura de la web donde observamos las carpetas de imágenes, plan llas etc.
www.detodoprogramacion.org
Capítulo 3: Aplicación del Proyecto Tienda Virtual 329
Bueno, nosotros hemos decidido trabajar el código Script, runat=”Server” y el código ASPx embebido
en HTML (es decir, ambos códigos en la misma página).
www.detodoprogramacion.org
330 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Página Principal
Usuario Cliente
Puede ver los productos con su respec vo detalle, también cuenta con un carrito de compra y un
historial de compra.
Listado de Productos
Listado de categoría y subcategorías. Al costado de las subcategorías muestra la can dad de productos
que hay en dicha categoría. Al hacer clic en una subcategoría muestra todos los productos con dos
botones o link que dice Agregar a carrito y ver Detalle.
www.detodoprogramacion.org
Capítulo 3: Aplicación del Proyecto Tienda Virtual 331
Carrito de Compras
Al hacer clic en Agregar a Carrito, nos mostrará todos los productos que hay en el carrito en ese
momento. Podemos eliminar, cambiar la can dad, seguir comprando y finalmente realizar el pedido.
www.detodoprogramacion.org
332 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Orden de Pedido
Una vez decidido lo que vamos a comprar, llenamos los campos necesarios para realizar la compra y
finalmente damos clic en realizar pedido.
Historial de Compras
Después de la compra podemos observar un historial de compra; igualmente, podemos ver sus detalles.
Usuario Administrador
Tiene la opción de agregar categorías, subcategorías y productos. También ene la opción de mostrar
dicha información.
www.detodoprogramacion.org
Capítulo 3: Aplicación del Proyecto Tienda Virtual 333
Mantenimiento de Productos
Mantenimiento de producto, seleccionando la categoría y subcategoría. También ene un estado que
nos informa si el producto se muestra en el catálogo.
www.detodoprogramacion.org
334 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
CAPÍTULO
DEFINICIÓN
Cuando nuestro catálogo de productos es amplio, o si este se divide en diferentes familias, necesitará
un sistema que le permita al cliente elegir diferentes productos para comprarlos en una misma
transacción.
Este po de sistema se llama ‘carrito de compra’, y si este proceso que hemos comentado se realiza vía
Internet, este carrito de compra se convierte en un proceso Web y funciona de la siguiente manera:
En esta página el cliente procederá a efectuar el pago por su compra u lizando su propia tarjeta de
crédito.
Una vez concluida la transacción, se informa al cliente y al vendedor que la transacción se ha realizado
con éxito.
El sistema del Carrito de Compra puede consis r en páginas individuales para cada producto o páginas
de productos agrupados por familias.
Los sistemas son muchos, adaptándose para cada po de necesidad; hay sistemas desarrollados en
diferentes lenguajes de programación, desde aquellos que se ejecutan bajo un sistema opera vo o
aquellos que se ejecutan vía Web.
www.detodoprogramacion.org
336 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Archivo BD_MILA.sql
Ahora codificaremos este código en el SQL Server 2008, para lo cual nos conectaremos al SQL Server y
crearemos un New Query:
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 337
www.detodoprogramacion.org
338 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 339
www.detodoprogramacion.org
340 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
ALTER TABLE Producto ADD FOREIGN KEY (Marca_ID) REFERENCES Marca (Marca_ID)
go
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 341
www.detodoprogramacion.org
342 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
-----------------------------CLIENTES------------------------------
INSERT INTO Cliente VALUES (‘C0001’,’Juan ‘,’Quispe Vallejos’,’21/06/1974’,’M’,
’46791346’,’AV Javier Prado 233’,’DIS02’,’654-6689’,’CASADO’,’juanqui@hotmail.
com’,’666666’,’1911250709’,’1’)
INSERT INTO Cliente VALUES (‘C0002’,’Lucho’,’Mamani Luque’,’12/05/1975’,’M
’,’48591526’,’Av.las Alomos 560’,’DIS15’,’798-4598’,’CASADO’,’kj_@hotmail.
com’,’794613’,’1921853100’,’1’)
INSERT INTO Cliente VALUES (‘C0003’,’Luis’,’Arias Castro’,’18/09/1974’,’M’
,’45926132’,’AV la molina 269’,’DIS41’,’411-4562’,’SOLTERO’,’ahg_@hotmail.
com’,’134679’,’1931382201’,’1’)
INSERT INTO Cliente VALUES (‘C0004’,’Alberto’,’Moreno Manco’,’16/06/1973’,
’M’,’47948592’,’Jr. chalaca 598’,’DIS51’,’452-9654’,’CASADO’,’poi@hotmail.
com’,’895623’,’1921305400’,’1’)
INSERT INTO Cliente VALUES (‘C0005’,’Mario’,’Hidalgo Condori’,’15/06/1975’,’M
’,’45138841’,’av.arequipa 458’,’DIS31’,’456-8974’,’SOLTERO’,’jhg_45@hotmail.
com’,’235689’,’1911939502’,’1’)
INSERT INTO Cliente VALUES (‘C0006’,’Manuel’,’Villalta Talaverano’,’01/04/1974’
,’M’,’42968574’,’AV Inca Garcilazo’,’DIS45’,’564-9874’,’CASADO’,’fd14@hotmail.
com’,’784512’,’1961651800’,’1’)
INSERT INTO Cliente VALUES (‘C0007’,’Daniel’,’Tarazona Panda’,’05/02/1974’,’M’,
’48748565’,’AV Javier Prado 145’,’DIS16’,’855-6598’,’CASADO’,’dsa_154@hotmail.
com’,’124578’,’1911891208’,’1’)
INSERT INTO Cliente VALUES (‘C0008’,’Monica’,’Yangua Pajuelo’,’12/06/1974’,’F’
,’47437602’,’Jr.las cumbres 121’,’DIS15’,’798-4879’,’SOLTERO’,’auy_45@hotmail.
com’,’741852’,’1951112209’,’1’)
INSERT INTO Cliente VALUES (‘C0009’,’Mario’,’Aguila Ramos’,’10/01/1974’,’M’,
’44020877’,’AV Las palmeras 244’,’DIS12’,’456-9874’,’CASADO’,’aa_14@hotmail.
com’,’963852’,’2004444508’,’1’)
INSERT INTO Cliente VALUES (‘C0010’,’Luisa’,’Quesada Blas’,’21/02/1975’,’F’
,’43215487’,’AV Arequipa 452’,’DIS15’,’123-6542’,’CASADO’,’rosa_45@hotmail.
com’,’666666’,’1982222308’,’1’)
go
------------- DESCUENTO --------------------------------------
INSERT INTO DESCUENTO VALUES (0)
INSERT INTO DESCUENTO VALUES (10)
INSERT INTO DESCUENTO VALUES (15)
go
--------------------------MARCA---------------------------------
INSERT INTO MARCA VALUES (‘LISET’)
INSERT INTO MARCA VALUES (‘ELLA’)
INSERT INTO MARCA VALUES (‘AMD’)
INSERT INTO MARCA VALUES (‘CAMILA’)
INSERT INTO MARCA VALUES (‘NOSOTRAS’)
go
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 343
--------------------------CATEGORIA----------------------------
INSERT INTO CATEGORIA VALUES (‘Candelaria’,’Descripcion de Candelaria’)
INSERT INTO CATEGORIA VALUES (‘Crochet’,’Descripcion de Crochet’)
INSERT INTO CATEGORIA VALUES (‘Macrame’,’Descripcion de Macrame’)
INSERT INTO CATEGORIA VALUES (‘Palitos’,’Descripcion de Palitos’)
INSERT INTO CATEGORIA VALUES (‘Rustik’,’Descripcion de Rustik’)
GO
------------- PRODUCTOS ----------------------------------------
insert into Producto values (‘P0001’,’Candelaria 11’,50.00,220,10,’10/05/2009’,1,2
)
insert into Producto values (‘P0002’,’Candelaria 22’,30.00,220,10,’12/05/2009’,1,3
)
insert into Producto values (‘P0003’,’Candelaria 33’,65.00,33,10,’11/05/2009’,1,2)
insert into Producto values (‘P0004’,’Candelaria 44’,70.00,92,10,’15/05/2009’,1,2)
insert into Producto values (‘P0005’,’Candelaria 55’,55.00,97,10,’11/05/2009’,1,5)
insert into Producto values (‘P0006’,’Candelaria 66’,50.00,97,10,’11/05/2009’,1,5)
insert into Producto values (‘P0007’,’Crochet 11’,90.00,120,10,’10/05/2009’,2,2)
insert into Producto values (‘P0008’,’Crochet 22’,110.00,120,10,’10/05/2009’,2,2)
insert into Producto values (‘P0009’,’Crochet 33’,95.00,35,10,’15/05/2009’,2,2)
insert into Producto values (‘P0010’,’Crochet 44’,120.00,35,10,’15/05/2009’,2,2)
insert into Producto values (‘P0011’,’Crochet 55’,100.00,35,10,’15/05/2009’,2,2)
insert into Producto values (‘P0012’,’Crochet 66’,120.00,35,10,’15/05/2009’,2,2)
insert into Producto values (‘P0014’,’Crochet 77’,90.00,120,10,’10/05/2009’,2,2)
insert into Producto values (‘P0015’,’Crochet 88’,110.00,120,10,’10/05/2009’,2,2)
insert into Producto values (‘P0016’,’Crochet 99’,95.00,35,10,’15/05/2009’,2,2)
insert into Producto values (‘P0017’,’Crochet 110’,120.00,35,10,’15/05/2009’,2,2)
insert into Producto values (‘P0018’,’Crochet 111’,100.00,35,10,’15/05/2009’,2,2)
insert into Producto values (‘P0019’,’Crochet 112’,120.00,35,10,’15/05/2009’,2,2)
www.detodoprogramacion.org
344 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 345
www.detodoprogramacion.org
346 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 347
--Select @Cliente_ID
INSERT INTO CLIENTE VALUES (@Cliente_ID,@Cli_Nombre,@Cli_Apellidos,@Cli_
FechaNac,@Cli_Sexo,@Cli_DNI,@Cli_Direccion,
@Distrito_ID,@Cli_Telefono,@Cli_EstadoCivil,@Cli_Email,@Cli_Password,@Cli_
NroCuenta,’1’)
--Select ‘1’
END
END
ELSE IF (@tipo=0) --ACTUALIZAR
BEGIN
UPDATE CLIENTE SET Cli_Nombre=@Cli_Nombre, Cli_Apellidos=@Cli_Apellidos, Cli_
FechaNac=@Cli_FechaNac, Cli_Sexo=@Cli_Sexo,Cli_DNI=@Cli_DNI, Cli_Direccion=@Cli_
Direccion, Distrito_ID=@Distrito_ID, Cli_Telefono=@Cli_Telefono, Cli_EstadoCivil=@
Cli_EstadoCivil, Cli_Email=@Cli_Email, Cli_Password=@Cli_Password, Cli_
NroCuenta=@Cli_NroCuenta WHERE Cliente_ID=@Cliente_ID
END
If(@@ERROR <> 0)
BEGIN
ROLLBACK TRANSACTION -------------------------
SELECT ‘-2’
COMMIT TRANSACTION ------------->>>>>>>>>>>>>
RETURN
END
ELSE
BEGIN
COMMIT TRANSACTION ------------->>>>>>>>>>>>>
SELECT @TIPO
RETURN
END
GO
www.detodoprogramacion.org
348 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 349
ELSE --ELIMINAR
BEGIN
UPDATE TRABAJADOR SET Estado= ‘0’ WHERE Trabajador_ID=@Trabajador_ID
SELECT ‘2’
END
go
www.detodoprogramacion.org
350 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
@Stock int,
@Stock_Min int,
@Fecha_Ing datetime,
@Categoria_ID int,
@Marca_ID int,
@tipo int
as
if (@tipo=1) -- INSERTAR
BEGIN
Set @Producto_ID=(Select max(Producto_ID) from Producto)
set @Producto_ID=’P’ +right(‘0000’+ltrim(right(isnull(@Producto_
ID,’0000’),4)+1),4)
INSERT INTO PRODUCTO VALUES (@Producto_ID,@Nom_Producto,@
Precio,0,10,getdate(),
@Categoria_ID,@Marca_ID)
Select ‘1’
END
ELSE IF (@tipo=0) --ACTUALIZAR
BEGIN
UPDATE PRODUCTO SET Nom_Producto=@Nom_Producto,Precio=@Precio,Stock=@Stock,
Stock_Min=@Stock_Min
--Fecha_Ing=@Fecha_Ing,Categoria_ID=@Categoria_ID,Marca_ID=@Marca_ID
WHERE Producto_ID=@Producto_ID
Select ‘0’
END
go
---------------------------------------------------------
CREATE PROC usp_ListarProductos
as
select p.Producto_ID,nom_producto,Precio,Stock,Stock_min,nom_categoria, nom_marca
from producto p,categoria c, marca m
where p.Marca_ID = m.Marca_ID
and p.Categoria_ID=c.Categoria_ID
go
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 351
GO
--==========================================================================
--> GUARDAR REGISTRO COMPRA CABEZERA
www.detodoprogramacion.org
352 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
--------------------------------------
CREATE Proc usp_GuardarRegistro_Cab
--@Registro_ID INT,
--@Nro_Registro char(10),
@Cliente_ID char(5),
@Fecha_Reg datetime,
@Descuento_ID int,
@Total money
as
Declare @nro_registro char(10)
Set @nro_registro=(Select max(nro_registro) from REGISTRO_COMPRA)
Set @nro_registro= right(‘0000000000’+ltrim(right(isnull(@nro_
registro,’0000000000’),10)+1),10)
INSERT INTO REGISTRO_COMPRA VALUES (@nro_registro,@Cliente_ID,getdate(),@
Descuento_ID,@Total)
Select max(Registro_ID) from REGISTRO_COMPRA
go
--------------------------------------
--> GUARDAR REGISTRO COMPRA DETALLE
--------------------------------------
CREATE Proc usp_GuardarRegistro_Det
@Registro_ID int,
@Producto_ID char(5),
@Cantidad int,
@Precio money
as
INSERT INTO Detalle_Registro VALUES (@Registro_ID,@Producto_ID,@Cantidad,@Precio)
Select ‘1’
go
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 353
www.detodoprogramacion.org
354 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Archivo BD_BANCOMILA.sql
Luego de haber ejecutado el primer script en la base de datos, cuyo resultado fue totalmente correcto,
vamos a ejecutar el segundo script; para esto nos conectaremos al SQL Server y crearemos un New
Query, o si no damos doble clic sobre el archivo BD_BANCOMILA.sql:
El script es el siguiente:
-- =============================================
-- BASE DE DATOS: BD_BANCOMILA
-- =============================================
USE MASTER
GO
IF EXISTS(SELECT * FROM SYS.sysdatabases WHERE name=’BDBANCOMILA’)
DROP DATABASE BDBANCOMILA
GO
CREATE DATABASE BDBANCOMILA
GO
USE BDBANCOMILA
GO
SET DATEFORMAT DMY
GO
SET NOCOUNT ON
GO
SET LANGUAGE SPANISH
GO
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 355
----------------------------------------------
CREATE TABLE Banco (
Banco_ID char(15) NOT NULL,
Nom_Banco varchar(30) NULL,
RUC char(11) NULL
)
go
ALTER TABLE Banco ADD PRIMARY KEY (Banco_ID ASC)
go
CREATE TABLE cliente (
cli_codigo char(5) NOT NULL,
cli_nombre varchar(50) NULL,
cli_telefono numeric(7,0) NULL,
cli_ruc numeric(11,0) NULL,
cli_direccion varchar(30) NULL
)
go
ALTER TABLE cliente ADD PRIMARY KEY (cli_codigo ASC)
go
CREATE TABLE Cuentas (
num_cta char(10) NOT NULL,
cli_codigo char(5) NOT NULL,
cod_cta char(3) NOT NULL,
saldo numeric(10,2) NULL,
clave char(4) NOT NULL,
Zonal_ID int NOT NULL
)
go
ALTER TABLE Cuentas ADD PRIMARY KEY (num_cta ASC)
go
CREATE TABLE Distrito (
Distrito_ID char(5) NOT NULL,
Provincia_ID char(5) NOT NULL,
Nom_Distrito varchar(30) NULL
)
go
ALTER TABLE Distrito ADD PRIMARY KEY (Distrito_ID ASC)
go
CREATE TABLE Movimientos (
num_mov int IDENTITY(1,1),
num_cta char(10) NOT NULL,
fecha datetime NULL,
tip_mov char(1) NULL,
saldo_ant numeric(10,2) NULL,
monto numeric(10,2) NULL,
saldo_nue numeric(10,2) NULL
)
go
ALTER TABLE Movimientos ADD PRIMARY KEY (num_mov ASC)
www.detodoprogramacion.org
356 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
go
CREATE TABLE Provincia (
Provincia_ID char(5) NOT NULL,
Nom_Provincia varchar(30) NULL
)
go
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 357
www.detodoprogramacion.org
358 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
--------------------------------------------------------
INSERT INTO cliente VALUES (‘C0001’,’Juan Quispe Vallejos’,5234567,54336725321,’
Av. La Marina 1234’)
INSERT INTO cliente VALUES (‘C0002’,’Lucho Mamani Luque’,6584503,56325236234,’Av.
Pardo 456 ‘)
INSERT INTO cliente VALUES (‘C0003’,’Luis Arias Castro’,5674566,67836768957,’Av.
Principal 123 ‘)
INSERT INTO cliente VALUES (‘C0004’,’Alberto Moreno Manco’,5524453,38532523450,’La
Perla Callao’)
INSERT INTO cliente VALUES (‘C0005’,’Mario Hidalgo Rai’,6789453,34532523458,’Calle
San Pedro 134’)
INSERT INTO cliente VALUES (‘C0006’,’Manuel Villalta Tala’,5632263,63568333525,’Jr
Ruiseñores 122’)
INSERT INTO cliente VALUES (‘C0007’,’Daniel Tarazo Panda’,5678356,45622462572,’Jr.
Naranjos 5689’)
INSERT INTO cliente VALUES (‘C0008’,’Monica Yanga Pajuelo’,7894568,56632545357,’Av
. Habich 543 ‘)
INSERT INTO cliente VALUES (‘C0009’,’Mario Aguila Ramos’,7894073,67233674566,’Av.
Iquitos 228 ‘)
INSERT INTO cliente VALUES (‘C0010’,’Luisa Quesada Blas’,6111345,14111351435,’Call
e Proceres 422’)
---------------------------------------
INSERT INTO cliente VALUES (‘C0011’,’JHON MORALES ‘,7685704,64223253459,’Calle
Cueva 432 ‘)
INSERT INTO cliente VALUES (‘C0012’,’FERNANDO RODAS ‘,6789456,24623325742,’Av.
Javier Prado 114’)
INSERT INTO cliente VALUES (‘C0013’,’GABRIELA ZAPATA ‘,5678466,72313254560,’Jr.
Pio XII 112 ‘)
INSERT INTO cliente VALUES (‘C0014’,’MELISSA PAICO
‘,1189453,66325234580,’Lizardo Montero 340’)
INSERT INTO cliente VALUES (‘C0015’,’SANDRA CAMPOS ‘,4563457,67362577361,’Jr.
Dominico 554’)
INSERT INTO cliente VALUES (‘C0016’,’MIGUEL RAMIREZ ‘,7460647,45632573556,’Jr.
Salavery 876 ‘)
INSERT INTO cliente VALUES (‘C0017’,’RAUL MORIENTES ‘,8975783,65362533671,’Av.
Habich 4567 ‘)
INSERT INTO cliente VALUES (‘C0018’,’JHONATAN PEÑA ‘,9442752,62243632567,’Av. La
Molina 425’)
INSERT INTO cliente VALUES (‘C0019’,’EUGENIO CAMPOS ‘,9583569,54673356250,’Av.
Wilson 678 ‘)
INSERT INTO cliente VALUES (‘C0020’,’LUCILA PARDO ‘,6546534,53476250977,’Av.
Pardo 567 ‘)
INSERT INTO cliente VALUES (‘C0021’,’ROBERTO BAGGIO ‘,2678958,87662554325,’Av.
Wilson 1267 ‘)
--------------------------------------
GO
INSERT Tipo_Cuentas VALUES(‘C01’,’CTA AHORROS SOLES’,’S’)
INSERT Tipo_Cuentas VALUES(‘C02’,’CTA AHORROS DOLARES’,’D’)
INSERT Tipo_Cuentas VALUES(‘C03’,’CTA CORRIENTE SOLES’,’S’)
INSERT Tipo_Cuentas VALUES(‘C04’,’CTA CORRIENTE DOLARES’,’D’)
INSERT Tipo_Cuentas VALUES(‘C05’,’CTS SOLES’,’S’)
INSERT Tipo_Cuentas VALUES(‘C06’,’CTS DOLARES’,’D’)
INSERT Tipo_Cuentas VALUES(‘C07’,’DEPOSITO A PLAZO FIJO SOLES’,’S’)
INSERT Tipo_Cuentas VALUES(‘C08’,’DEPOSITO A PLAZO FIJO DOLARES’,’D’)
INSERT Tipo_Cuentas VALUES(‘C09’,’CTA MAESTRA SOLES’,’S’)
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 359
www.detodoprogramacion.org
360 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 361
www.detodoprogramacion.org
362 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 363
Para esto vamos a empezar a crear con cada una de las clases:
Clase C_Datos
Carpeta Cliente
Archivo Cls_D_Clientes.cs
using System;
using System.Collections.Generic;
using System.Text;
using Microsoft.ApplicationBlocks.Data;
using System.Data;
using System.Configuration ;
using C_Entidad.Cliente;
namespace C_Datos.Cliente
{
public class Cls_D_Cliente
{
private static string conexion = ConfigurationManager.
ConnectionStrings[“conex”].ConnectionString;
public static DataTable ListarDistritos()
{ return SqlHelper.ExecuteDataTable (conexion, “usp_ListarDistritos”);
}
public static DataTable ListarProvincia()
{ return SqlHelper.ExecuteDataTable(conexion, “usp_ListarProvincia”);
}
public static DataTable ListarDistritosXProv(Cls_E_Cliente objE)
{ return SqlHelper.ExecuteDataTable(conexion, “usp_
ListarDistritosXProv”,objE.Prov_id);
}
public static DataTable GenerarCodCliente()
{ return SqlHelper.ExecuteDataTable(conexion, “usp_GenerarCodCliente”);
}
public static DataTable ListarCLientes()
{ return SqlHelper.ExecuteDataTable(conexion, “usp_ListarCLientes”);
}
public static DataTable ConsultarDatosCliente(Cls_E_Cliente objE)
{ return SqlHelper.ExecuteDataTable(conexion, “usp_
ConsultarDatosCliente”,objE.Cliente_id);
www.detodoprogramacion.org
364 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
}
public static DataTable ActualizarCliente(Cls_E_Cliente objE)
{ return SqlHelper.ExecuteDataTable(conexion, “usp_ActualizarCliente”,
objE.Cliente_id,objE.Cli_nombre,objE.Cli_apellidos,objE.Cli_fechanac,objE.Cli_
sexo,objE.Cli_dni,objE.Cli_direccion,objE.Distrito_id, objE.Cli_telefono,objE.
Cli_estadocivil, objE.Cli_email, objE.Cli_password, objE.Cli_nrocuenta,objE.Cli_
estado,objE.Tipo );
}
public static DataTable ValidarCliente(Cls_E_Cliente objE)
{ return SqlHelper.ExecuteDataTable(conexion, “usp_ValidarCliente”,
objE.Cli_email, objE.Cli_password);
}
public static DataTable BuscarCliente(Cls_E_Cliente objE)
{ return SqlHelper.ExecuteDataTable(conexion, “usp_BuscarCliente”, objE.
Cli_nombre, objE.Cli_apellidos,objE.Distrito_id);
}
public static DataTable DeshabilitarCliente(Cls_E_Cliente objE)
{ return SqlHelper.ExecuteDataTable(conexion, “usp_DeshabilitarCliente”,
objE.Cliente_id);
}
}
}
Archivo Cls_D_Cuenta.cs
using System;
using System.Collections.Generic;
using System.Text;
using Microsoft.ApplicationBlocks.Data;
using System.Data;
using System.Configuration;
using C_Entidad.Cliente;
namespace C_Datos.Cliente
{
public class Cls_D_Cuenta
{
private static string conexion = ConfigurationManager.
ConnectionStrings[“conexBanco”].ConnectionString;
public static DataTable verificarCuenta(Cls_E_Cuenta objE)
{ return SqlHelper.ExecuteDataTable(conexion, “usp_verificarCuenta”,objE.
Num_cta,objE.Clave);
}
public static DataTable ListarMovimientos(Cls_E_Cuenta objE)
{ return SqlHelper.ExecuteDataTable(conexion, “usp_ListarMovimientos”,
objE.Num_cta);
}
public static DataTable ActualizarSaldo(Cls_E_Cuenta objE)
{ return SqlHelper.ExecuteDataTable(conexion, “usp_ActualizarSaldo”, objE.
Num_cta, objE.Monto,objE.Tipo);
}
}
}
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 365
Carpeta Empleado
Archivo Cls_D_Empleado.cs
using System;
using System.Collections.Generic;
using System.Text;
using Microsoft.ApplicationBlocks.Data;
using System.Data;
using System.Configuration;
using C_Entidad.Empleado;
namespace C_Datos.Empleado
{
public class Cls_D_Empleado
{ private static string conexion = ConfigurationManager.
ConnectionStrings[“conex”].ConnectionString;
public static DataTable GenerarCodTrabajador()
{ return SqlHelper.ExecuteDataTable(conexion, “usp_
GenerarCodTrabajador”);
}
public static DataTable ListarDistritos()
{ return SqlHelper.ExecuteDataTable(conexion, “usp_ListarDistritos”);
}
public static DataTable ListarProvincia()
{ return SqlHelper.ExecuteDataTable(conexion, “usp_ListarProvincia”);
}
public static DataTable ListarDistritosXProv(Cls_E_Empleado objE)
{ return SqlHelper.ExecuteDataTable(conexion, “usp_ListarDistritosXProv”,
objE.Prov_id);
}
public static DataTable ListarCargo()
{ return SqlHelper.ExecuteDataTable(conexion, “usp_ListarCargo”);
}
public static DataTable ListarTrabajadores()
{
return SqlHelper.ExecuteDataTable(conexion, “usp_ListarTrabajadores”);
}
public static DataTable ActualizarTrabajador(Cls_E_Empleado objE )
{ return SqlHelper.ExecuteDataTable(conexion, “usp_ActualizarTrabajador”,
objE.Trabajador_id, objE.Nombre, objE.Ape_paterno, objE.Ape_materno, objE.Fecha_
nac, objE.Sexo, objE.Direccion, objE.Distrito_id, objE.Telefono, objE.Email, objE.
Password, objE.Cargo_id, objE.Estado, objE.Tipo);
}
public static DataTable ValidarTrabajador(Cls_E_Empleado objE)
{
return SqlHelper.ExecuteDataTable(conexion, “usp_ValidarTrabajador”, objE.
Email, objE.Password);
}
public static DataTable BuscarTrabajador(Cls_E_Empleado objE)
{ return SqlHelper.ExecuteDataTable(conexion, “usp_BuscarTrabajador”,
objE.Trabajador_id);
}
public static DataTable DelTrabajador(Cls_E_Empleado objE)
www.detodoprogramacion.org
366 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Carpeta Producto
Archivo Cls_D_Producto.cs
using System;
using System.Collections.Generic;
using System.Text;
using Microsoft.ApplicationBlocks.Data;
using System.Data;
using System.Configuration;
using C_Entidad.Producto;
namespace C_Datos.Producto
{
public class Cls_D_Producto
{
private static string conexion = ConfigurationManager.
ConnectionStrings[“conex”].ConnectionString;
public static DataTable GenerarCodProducto()
{ return SqlHelper.ExecuteDataTable(conexion, “usp_GenerarCodProducto”);
}
public static DataTable ListarMarca()
{ return SqlHelper.ExecuteDataTable(conexion, “usp_ListarMarca”);
}
public static DataTable ListarCategorias()
{ return SqlHelper.ExecuteDataTable(conexion, “usp_ListarCategorias”);
}
public static DataTable ActualizarProducto(Cls_E_Producto objE)
{ return SqlHelper.ExecuteDataTable(conexion, “usp_ActualizarProducto”,
objE.Producto_id,objE.Nom_producto,objE.Precio,objE.Stock ,objE.Stock_min ,objE.
Fecha_ing,objE.Categoria_id,objE.Marca_id,objE.Tipo);
}
public static DataTable ListarProductos()
{ return SqlHelper.ExecuteDataTable(conexion, “usp_ListarProductos”);
}
public static DataTable BuscarProducto(Cls_E_Producto objE)
{ return SqlHelper.ExecuteDataTable(conexion, “usp_BuscarProducto”,objE.
Producto_id);
}
public static DataTable ActualizarStock(Cls_E_Producto objE)
{
return SqlHelper.ExecuteDataTable(conexion, “usp_ActualizarStock”, objE.
Producto_id,objE.Stock );
}
public static DataTable VerificarStock(Cls_E_Producto objE)
{ return SqlHelper.ExecuteDataTable(conexion, “usp_VerificarStock”, objE.
Producto_id, objE.Stock);
}
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 367
}
}
Carpeta RegistroC
Cls_D_Registro.cs
using System;
using System.Collections.Generic;
using System.Text;
using Microsoft.ApplicationBlocks.Data;
using System.Data;
using System.Configuration;
using C_Entidad.RegistroC;
namespace C_Datos.RegistroC
{
public class Cls_D_RegistroC
{ private static string conexion = ConfigurationManager.
ConnectionStrings[“conex”].ConnectionString;
public static DataTable GuardarRegistro_Cab(Cls_E_RegistroC objE)
{return SqlHelper.ExecuteDataTable(conexion, “usp_GuardarRegistro_Cab”,
objE.Cliente_id, objE.Fecha_reg, objE.Descuento_id, objE.Total);
}
public static DataTable GuardarRegistro_Det(Cls_E_RegistroC objE)
{ return SqlHelper.ExecuteDataTable(conexion, “usp_GuardarRegistro_Det”,
objE.Registro_id, objE.Producto_id, objE.Cantidad, objE.Precio);
www.detodoprogramacion.org
368 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
}
public static DataTable ConsultarDescuento(Cls_E_RegistroC objE)
{ return SqlHelper.ExecuteDataTable(conexion, “usp_ConsultarDescuento”,
objE.Cantidad );
}
Clase C_EnƟdad
Ahora vamos a ver la creación de la clase En dad.
Ya en el ejemplo anterior de construcción de clase, hemos trabajo por completo (todas sus carpetas)
en la clase datos, en esta clase sólo trabajaremos con la primera carpeta (los archivos CLs_E_Clientes,
Cls_E_Cuentas.cs ).
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 369
Carpeta Cliente
Archivo Cls_E_Ciente.cs
using System;
using System.Collections.Generic;
using System.Text;
namespace C_Entidad.Cliente
{
public class Cls_E_Cliente
{ private string cliente_id;
public string Cliente_id
{ get { return cliente_id; }
set { cliente_id = value; }
}
private string cli_nombre;
public string Cli_nombre
{ get { return cli_nombre; }
set { cli_nombre = value; }
}
private string cli_apellidos;
public string Cli_apellidos
{ get { return cli_apellidos; }
set { cli_apellidos = value; }
}
private string cli_fechanac;
public string Cli_fechanac
{ get { return cli_fechanac; }
set { cli_fechanac = value; }
}
private string cli_sexo;
public string Cli_sexo
{ get { return cli_sexo; }
set { cli_sexo = value; }
}
private string cli_dni;
public string Cli_dni
{ get { return cli_dni; }
set { cli_dni = value; }
}
private string cli_direccion;
public string Cli_direccion
{ get { return cli_direccion; }
set { cli_direccion = value; }
}
private string prov_id;
public string Prov_id
{ get { return prov_id; }
set { prov_id = value; }
}
private string distrito_id;
public string Distrito_id
www.detodoprogramacion.org
370 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Archivo Cls_E_Cuenta.cs
using System;
using System.Collections.Generic;
using System.Text;
namespace C_Entidad.Cliente
{
public class Cls_E_Cuenta
{
private string num_cta;
public string Num_cta
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 371
}
}
Para poder conƟnuar y terminarlo, todo el script se encuentra en el proyecto, el cual está en una
carpeta que se llama Capítulo III.
Clase C_Negocio
Ahora veremos la creación de la clase Negocio, en la cual se encuentran todos los procesos con
respecto al negocio de la empresa.
Para entender esta clase trabajaremos en la carpeta cliente, la cual consta de dos archivos, los cuales
enen los siguientes dos archivos:
www.detodoprogramacion.org
372 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Carpeta Clientes
Archivos Cls_N_Cliente.cs
using System;
using System.Collections.Generic;
using System.Text;
using System.Data;
using C_Datos.Cliente;
using C_Entidad.Cliente;
namespace C_Negocio.Cliente
{
public class Cls_N_Cliente
{
public static DataTable ListarDistritosN()
{ return Cls_D_Cliente.ListarDistritos();
}
public static DataTable ListarProvinciaN()
{ return Cls_D_Cliente.ListarProvincia(); }
public static DataTable ListarDistritosXProvN(Cls_E_Cliente objE)
{ return Cls_D_Cliente.ListarDistritosXProv(objE); }
public static DataTable GenerarCodClienteN()
{ return Cls_D_Cliente.GenerarCodCliente(); }
public static DataTable ListarCLientesN()
{ return Cls_D_Cliente.ListarCLientes(); }
public static DataTable ConsultarDatosClienteN(Cls_E_Cliente objE)
{ return Cls_D_Cliente.ConsultarDatosCliente(objE); }
public static DataTable ActualizarClienteN(Cls_E_Cliente objE)
{ return Cls_D_Cliente.ActualizarCliente(objE); }
public static DataTable ValidarClienteN(Cls_E_Cliente objE)
{ return Cls_D_Cliente.ValidarCliente(objE); }
public static DataTable BuscarClienteN(Cls_E_Cliente objE)
{ return Cls_D_Cliente.BuscarCliente(objE); }
public static DataTable DeshabilitarClienteN(Cls_E_Cliente objE)
{ return Cls_D_Cliente.DeshabilitarCliente(objE);
}
}
}
Archivo Cls_N_Cuenta.cs
using System;
using System.Collections.Generic;
using System.Text;
using System.Data;
using C_Datos.Cliente;
using C_Entidad.Cliente;
namespace C_Negocio.Cliente
{
public class Cls_N_Cuenta
{
public static DataTable verificarCuentaN(Cls_E_Cuenta objE)
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 373
{
return Cls_D_Cuenta.verificarCuenta(objE);
}
public static DataTable ListarMovimientosN(Cls_E_Cuenta objE)
{
return Cls_D_Cuenta.ListarMovimientos(objE);
}
public static DataTable ActualizarSaldoN(Cls_E_Cuenta objE)
{
return Cls_D_Cuenta.ActualizarSaldo(objE);
}
}
}
Las clases que faltan desarrollar se encuentran en el CD, en la carpeta Capítulo III, pero sería
mejor que el lector intentara resolverlo tomando como ejemplo la clase datos que ha sido
desarrollada completamente.
Ahora veamos el control web Config. Sólo hemos seleccionado la parte que deseamos que puedan ver,
donde hace las referencias y la cadena de conexión.
Donde hemos seleccionado las partes que nos interesan como el Connec on String, en donde están
todos los parámetros de la conexión a la base de datos, y luego hemos seleccionado la parte de las
referencias con las cuales cuenta la aplicación.
Luego de haber construido las clases y ejecutado el script de la base datos, también de haber instalado
el AJAX, ahora tendremos que desarrollar las páginas principales.
La primera parte es la creación de los Master Page, para lo cual hemos creado los siguientes:
Administrador.master, contenido.master y principal.master. U lizaremos como ejemplo el Master
Page de la Página Principal.
www.detodoprogramacion.org
374 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Principal.master
El cual ene el siguiente código HTML, que nos permite darle este diseño a la página (figura anterior).
Si queremos apreciar todo el código lo podemos encontrar en el CD.
Ahora veamos el script que hemos generado en los eventos de dicho Master Page.
using C_Negocio.Empleado ;
using C_Entidad.Empleado ;
using C_Negocio.Cliente;
using C_Entidad.Cliente;
public partial class Principal : System.Web.UI.MasterPage
{ Cls_E_Empleado objE = new Cls_E_Empleado();
Cls_E_Cliente objEC = new Cls_E_Cliente();
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{ lblFecha.Text = DateTime.Now.Date.ToLongDateString();
if (Session[“Cliente”] == null)
{ pnlCliente.Visible = false;
pnlLogin.Visible = true;
UserName.Text = “”;
Password.Text = “”;
}
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 375
pnlLogin.Visible = true;
UserName.Text = “”;
Password.Text = “”;
}
else
{ pnlCliente.Visible = true;
pnlLogin.Visible = false;
lblCliente.Text = Session[“Cliente”].ToString();
}
}
}
protected void LoginButton_Click(object sender, EventArgs e)
{ if ((UserName.Text.Trim() == “” ) || (Password.Text.Trim () ==””) )
{ System.Windows.Forms.MessageBox.Show (“Ingrese un Usuario o Password”);
return ;
}
Session[“cliente_id”] = null;
Session[“Trabajador”] = null;
Session[“Cliente”] = null;
Session[“saldo_Cta”] = null;
Session[“nro_cuenta”] = null;
string strUsuario = UserName.Text.Trim();
string strPasswd = Password.Text.Trim();
pnlLogin.Visible = true;
pnlCliente.Visible = false;
if (rbCual.SelectedIndex == 1)
{ //ADMINITRADOR
objE.Email = strUsuario;
objE.Password = strPasswd;
DataTable tblTRab = Cls_N_Empleado.ValidarTrabajadorN(objE);
if (tblTRab.Rows.Count > 0)
{ Session[“Trabajador”] = tblTRab.Rows[0][1].ToString();
Response.Redirect(“./Empleado/MenuCliente.aspx”);
}
else
{ System.Windows.Forms.MessageBox.Show(“Usuario o Clave es
incorrecto, intente de nuevo”);
}
}
else
{ //CLIENTE
objEC.Cli_email = strUsuario;
objEC.Cli_password = strPasswd;
DataTable tblU = Cls_N_Cliente.ValidarClienteN(objEC);
if (tblU.Rows.Count > 0)
{ pnlLogin.Visible = false;
pnlCliente.Visible = true;
Session[“Cliente”] = tblU.Rows[0][1].ToString() + ‘ ‘ + tblU.
Rows[0][2].ToString();
lblCliente.Text = Session[“Cliente”].ToString();
Session[“cliente_id”] = tblU.Rows[0][0].ToString(); }
else
www.detodoprogramacion.org
376 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
{ System.Windows.Forms.MessageBox.Show(“Usuario o Pasword
Incorreto”);
}
}
}
Ahora vamos a crear la ventana Default.aspx, que u liza el master page de la página Principal.master
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 377
Ahora veamos el código que hemos producido en los eventos del WebForm:
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{ if (!Page.IsPostBack)
{
if (Session[“Cliente”] == null)
{ ((Panel)Master.FindControl(“pnlCliente”)).Visible = false;
((Panel)Master.FindControl(“pnlLogin”)).Visible = true;
else if (Session[“Cliente”].ToString().Trim() == “”)
{ ((Panel)Master.FindControl(“pnlCliente”)).Visible = false;
((Panel)Master.FindControl(“pnlLogin”)).Visible = true;
}
else
{ ((Panel)Master.FindControl(“pnlCliente”)).Visible = true;
((Panel)Master.FindControl(“pnlLogin”)).Visible = false;
}
}
}
}
Carpeta Clientes.- En el cual vamos a crear mater page, que me va a servir como base para la creación
de las otras páginas; en esta carpeta tendremos todas las páginas que hacen referencia al manejo de
los clientes.
www.detodoprogramacion.org
378 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Carpetas Flash e Imágenes.- En estas carpetas manejamos los archivos donde se encuentran los flash
que u lizamos en la aplicación; de otro lado, también almacenamos y ordenamos todas las imágenes
que u lizamos en el carrito de compra.
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 379
Carpeta Script.- Se enen todos los archivos que manejan los es los propios que se u lizan en el
formulario.
Luego de realizar una descripción genérica de la estructura de los archivos que hemos u lizado en la
aplicación, ya podemos tener una visualización estructural de la aplicación; hemos puesto sólo el script
de lás paginas principales, como referencia a todo lo que se desea realizar. Todo el aplica vo completo
lo puede encontrar en el CD, en el Capítulo IV.
Antes de ingresar al Carrito de Compra, la PC debe contar con los siguientes requisitos:
• Debe tener instalado el programa Microso Visual Studio 2005 (o versiones posteriores), el
cual permi rá abrir la aplicación.
www.detodoprogramacion.org
380 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
• Debe tener instalado el programa Microso SQL Server 2008, que permi rá ejecutar las bases
de datos (BD_BANCOMILA.sql - BD_MILA.sql).
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 381
Abriremos los dos archivos de la manera que se muestra la imagen; desde el explorador de
Windows nos ubicamos encima del archivo y damos clic en el botón derecho, y buscamos el editor
más conveniente:
Vemos cómo el script se ubica dentro del SQL Server, y desde ahí lo vamos a ejecutar.
www.detodoprogramacion.org
382 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
INSTALACIÓN DE AJAX
Ahora vamos a realizar la instalación de los controles de Extensiones AJAX.
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 383
Luego de haber ejecutado todas las ventanas mas completar la instalación del AJAX:
www.detodoprogramacion.org
384 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
1. Ingresamos a la página Web ‘Mila’ (página Web de ventas de ropa tejida a mano).
2. Al hacer clic en el menú ‘Quiénes Somos’ se podrá visualizar la información acerca de la Empresa
‘Mila’.
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 385
3. Al hacer clic en el menú ‘Productos’, se visualizará un listado de todos los productos por categoría
que ofrece dicha empresa.
4. Al hacer clic en el menú ‘Carrito’, aparecerá un mensaje que describirá que antes de ingresar al
carrito deberá loguearse como cliente de la empresa.
4.1. Si dispone de una cuenta creada, sólo deberá ingresar el login y el password respec vo como
‘Cliente’, haciendo un clic en el primer radiobu on.
www.detodoprogramacion.org
386 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 387
4.4 El cliente ahora podrá ingresar al ‘Carrito’, para así hacer sus pedidos.
4.5 El cliente podrá elegir el producto que desee y la can dad que requiera.
www.detodoprogramacion.org
388 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
4.6 El producto y la can dad elegida por el cliente serán añadidos automá camente al carito de
compras, en donde nos mostrará las opciones de ‘Eliminar Producto’, ‘Seguir comprando’,
‘Cancelar la compra’, ‘Recalcular’ y ‘Realizar la compra’.
4.7 Al elegir la opción ‘Seguir comprando’, nos mostrará nuevamente el listado de los productos
para elegir otro y añadirlo nuevamente al carrito de compras.
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 389
4.8 Al agregar el nuevo producto al carrito de compras, nos mostrará el listado del carrito en
donde estarán los productos elegidos con las can dades requeridas por el cliente.
4.9 Al hacer un clic en el checkbox y en el botón Eliminar Productos, el producto será eliminado
automá camente del carrito de compras.
www.detodoprogramacion.org
390 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
4.10 Luego se mostrará el listado de los productos que siguen en el carrito de compras.
4.11 Además, el cliente podrá modificar la can dad de cada producto elegido.
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 391
4.12 Al modificar la can dad de productos y presionar el botón ‘Recalcular’, el total será modificado
automá camente.
4.13 Al presionar el botón ‘Realizar Compra’ mostrará al cliente un reporte de los productos que
solicitó.
www.detodoprogramacion.org
392 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
4.14 Aparecerá un mensaje para que el cliente pueda ingresar a su cuenta y verificar su saldo antes
de proceder con la consolidación de la compra.
4.15 La página automá camente mostrará al cliente un formulario donde tendrá que acceder a su
cuenta ingresando la clave de la misma.
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 393
4.16 El cliente debe ingresar la clave de su cuenta haciendo clic en los números que aparecen en un
recuadro al costado del login.
4.17 El cliente, al acceder a su cuenta, podrá observar los datos de su cuenta y su saldo disponible.
www.detodoprogramacion.org
394 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
4.18 Al hacer clic en el botón ‘Ver Movimientos’, el cliente podrá observar los movimientos y saldos
de su cuenta.
4.19 Al hacer clic en el botón ‘Ir al Carrito de Compras’, podrá observar el carrito de compras con
el listado de los productos seleccionados.
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 395
4.20 Al hacer clic en el botón ‘Aceptar Compra’, se mostrará un mensaje de que la compra se realizó
con éxito.
4.21 El cliente después de realizar la compra puede cerrar su sesión haciendo clic en el hipervínculo
‘Salir’, que se encuentra en la parte superior de la página; luego visualizará un mensaje de
confirmación de cierre de la sesión.
www.detodoprogramacion.org
396 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
4.22 Si el usuario no es un cliente de la empresa y quiere agregarse como cliente nuevo, tendrá que
registrarse haciendo un clic en el hipervínculo ‘No estás inscrito?’.
4.23 El cliente podrá visualizar un formulario donde deberá ingresar sus datos para registrarse.
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 397
4.24 El cliente deberá llenar todos los datos que solicite el formulario.
4.25 Al presionar el Botón ‘Registrarse’, y si los datos están bien ingresados, aparecerá un mensaje
de que el usuario ya está registrado y listo para loguearse; en caso contrario, aparecerá un
mensaje de que hay datos mal ingresados.
www.detodoprogramacion.org
398 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
4.26 En el login, el usuario ‘Administrador’ o trabajador puede loguearse haciendo clic al radiobu on
de ‘Administrador’.
4.27 Al ingresar a su sesión, el Administrador podrá visualizar el submenú conformado por: ‘Cliente’,
‘Producto’, ‘Empleado’, ‘Reportes’, ‘Ventas’ y ‘Salir’.
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 399
www.detodoprogramacion.org
400 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 401
www.detodoprogramacion.org
402 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 403
www.detodoprogramacion.org
404 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
4.33 En el menú ‘Reportes’, el administrador podrá hacer la consulta respec va de los ‘Clientes’,
‘Trabajadores’, ‘Productos’ y ‘Registro de Compra’.
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 405
www.detodoprogramacion.org
406 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 407
www.detodoprogramacion.org
408 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
4.32 En el menú ‘Ventas’, el administrador podrá hacer la consulta respec va de las ventas por
cliente e intervalo de fechas.
www.detodoprogramacion.org
Capítulo 4: Aplicación del carrito de compra 409
5. En el menú principal ‘Contáctenos’, se mostrará al usuario un formulario donde podrá ingresar sus
datos y el mensaje, para luego reenviarle la respuesta correspondiente a su respec vo correo.
www.detodoprogramacion.org
CAPÍTULO
QUÉ ES EL SQLBULKCOPY
Permite realizar eficazmente una carga masiva de una tabla de SQL Server con datos procedentes de
otro origen.
Microso SQL Server incluye una conocida u lidad de línea de comandos denominada bcp para mover
datos de una tabla a otra, ya sea en un solo servidor o entre servidores.
La clase SqlBulkCopy permite escribir soluciones de código administrado que proporcionan una
funcionalidad similar. Hay otras maneras de cargar datos en una tabla de SQL Server (por ejemplo:
instrucciones INSERT), pero el rendimiento de SqlBulkCopy es mucho mayor.
Este aplica vo nos permite realizar copias masivas de una tabla a otra, que realizamos vía web, así
como también crear una tabla, en caso no exista la tabla donde se desea copiar; adicionalmente, toma
los pos de datos del manejador de base de datos, permite que tú decidas cómo auten ficarte. Es un
aplica vo pequeño, pero con caracterís cas especiales que te van a gustar.
Empecemos trabajando con el formulario de ingreso, al cual le hemos puesto como nombre default2.
aspx
En esta Página de Ingreso, nosotros ingresamos el código, luego seleccionamos los pos de
auten ficación que existe; si fuera de po SQL, nos mostraría dos controles más para ingresar el
usuario y clave.
www.detodoprogramacion.org
412 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 5: Aplicación de copias masivas y manejo de imágenes 413
En dicha página estamos invocando a la página Default3.aspx, la cual tendrá el siguiente diseño.
Ahora veamos la Página de Ingreso y de selección de tablas, llamada default3.aspx, desde el cual
podemos crear una nueva tabla o realizar la copia masiva.
Antes de ver la codificación, en el código HTML, debemos adicionar el llamado a los link de Agregar
Nueva Tabla, Regresar y Realizar Copia.
<tr>
<td colspan=”2” align=”left”>
<asp:HyperLink ID=”HyperLink2” runat=”server” NavigateUrl=”~/Default4.aspx”
style=”font-size: 12px; color: #99cc33; font-family: Verdana; text-decoration:
none” >
- Agregar Nueva Tabla -</asp:HyperLink></td>
<td style=”width: 100px” align=”right”>
<asp:HyperLink ID=”HyperLink1” runat=”server” NavigateUrl=”~/Default2.aspx”
style=”font-size: 12px; color: #990033; font-family: Verdana; text-decoration:
none”><- Regresar</asp:HyperLink></td>
</tr>
………………………………………….
…………………………………………….
<tr>
<td align=”right” colspan=”3”>
<asp:HyperLink ID=”HyperLink3” runat=”server” Font-Bold=”True”
NavigateUrl=”~/Default5.aspx”
Style=”font-size: 12px; color: #999966; font-family: Verdana; text-
decoration: none”>.-
*| <- Realizar Copia -> |*-.</asp:HyperLink></td>
</tr>
www.detodoprogramacion.org
414 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 5: Aplicación de copias masivas y manejo de imágenes 415
Ahora veremos la codificación del WebForm default4.aspx, agregar una nueva tabla a la base de datos.
www.detodoprogramacion.org
416 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 5: Aplicación de copias masivas y manejo de imágenes 417
www.detodoprogramacion.org
418 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
ddl2 = (DropDownList)GridView1.Rows[GridView1.EditIndex].Cells[1].
FindControl(“DropDownList1”);
ddl2.DataSource = Lista(“select * from sys.types”);
ddl2.DataTextField = “name”; ddl2.DataValueField = “name”; ddl2.
DataBind();
ViewState[“dt”] = dt;
}
catch (Exception ex) { String m = ex.Message; }
}
void CrearNTab()
{ dt.Columns.Add(“Des”, typeof(String));
dt.Columns.Add(“Tipo”, typeof(String));
dt.Columns.Add(“Can”, typeof(String));
}
www.detodoprogramacion.org
Capítulo 5: Aplicación de copias masivas y manejo de imágenes 419
Y ahora veamos el WebForm donde podemos realizar la copia masiva, que es el default5.aspx, en el
cual pondremos las dos tablas donde se desea copiar:
www.detodoprogramacion.org
420 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
DropDownList1.DataTextField = “name”;
DropDownList1.DataValueField = “object_id”;
DropDownList1.DataBind();
www.detodoprogramacion.org
Capítulo 5: Aplicación de copias masivas y manejo de imágenes 421
if (dtOr.Rows.Count == dtDes.Rows.Count)
{
int tip1 = 0, tip2 = 0, lon1 = 0, lon2 = 0; int contar = 0;
for (int i = 0; i < dtDes.Rows.Count; i++)
{ tip1 = Convert.ToInt32(dtOr.Rows[i][3]); lon1 = Convert.
ToInt32(dtOr.Rows[i][5]);
tip2 = Convert.ToInt32(dtDes.Rows[i][3]); lon2 = Convert.
ToInt32(dtDes.Rows[i][5]);
if (tip1 == tip2 && lon1 == lon2) { contar++; }
}
if (dtOr.Rows.Count == contar) { obj.Msg(“Datos comprobados
correctamente”); } else { obj.Msg(“Columnas incompatibles”); }
}
else { obj.Msg(“Columnas incompatibles”); }
SqlConnection oFuenteDatosConn = new SqlConnection(con);
oFuenteDatosConn.Open();
SqlCommand oCmd = new SqlCommand(“DELETE FROM “ + DropDownList2.
SelectedItem.Text.ToString() , oFuenteDatosConn);
oCmd.ExecuteNonQuery();
oCmd.CommandType = CommandType.Text;
oCmd.CommandText = ViewState[“origen”].ToString();
SqlDataReader oReader = oCmd.ExecuteReader();
SqlConnection oDestinoDatosConn = new SqlConnection(con);
oDestinoDatosConn.Open();
SqlBulkCopy oSqlBulkCopy_Clientes = new SqlBulkCopy(oDestinoDatosConn);
oSqlBulkCopy_Clientes.DestinationTableName = DropDownList2.
SelectedItem.Text.ToString();
oSqlBulkCopy_Clientes.WriteToServer(oReader);
oSqlBulkCopy_Clientes.Close(); oReader.Close();
oDestinoDatosConn.Close(); oFuenteDatosConn.Close();
oDestinoDatosConn = new SqlConnection(con);
SqlDataAdapter dataAdapter = new SqlDataAdapter(ViewState[“destino”].
ToString(),oDestinoDatosConn);
DataSet dsClientesCopia = new DataSet();
dataAdapter.Fill(dsClientesCopia, “CopiaClientes”);
GridView2.DataSource = dsClientesCopia;
GridView2.DataMember = “CopiaClientes”;
GridView2.DataBind(); dataAdapter.Dispose();
Lbltot1.Text = “ “ + dsClientesCopia.Tables[0].Rows.Count;
}
catch (Exception ex) { String m = ex.Message; }
}
#region [Funciones]
private DataTable SelectDataFromSource(String connectionString)
{
www.detodoprogramacion.org
422 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
#endregion
www.detodoprogramacion.org
Capítulo 5: Aplicación de copias masivas y manejo de imágenes 423
En caso de que se elija SQL, nos mostrará dos controles más en el cual ingresaremos el usuario y la
clave.
Luego de habernos auten ficado, elegimos la base de datos con la cual deseamos trabajar; en este
caso, para el ejemplo vamos a realizarlo con la base de datos Northwind, y luego daremos clic en el
link de ingresar.
Ahora vamos a visualizar las tablas y cada vez que seleccionemos alguna podremos ver sus datos.
www.detodoprogramacion.org
424 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Desde esta ventana podemos crear una nueva tabla o realizar la copia masiva; primero elegiremos
cómo crear una tabla.
En caso de que no exista la tabla para hacer la copia, podemos crearla en ese momento, de tal manera
que nos sirva como repositorio de la información a copiar.
Luego de haber visto este proceso, regresemos a la ventana de seleccionar tabla y daremos clic en el
botón realizar copia.
www.detodoprogramacion.org
Capítulo 5: Aplicación de copias masivas y manejo de imágenes 425
Ahora, seleccionamos las tablas de las que deseamos realizar la copia masiva:
Podemos notar cuál es la tabla origen de donde deseamos copiar y la tabla des no, que es la nueva
tabla donde vamos a copiar la información; al final, el resultado nos va a mostrar que las dos tablas
enen la misma can dad de registros.
Si el BLOB se almacena como texto, por ejemplo, un campo text de SQL Server, puede pasar dicho
BLOB como parámetro de cadena. Si el BLOB se almacena en formato binario, por ejemplo, un campo
image de SQL Server, puede pasar una matriz de po byte como parámetro binario.
Un BLOB puede ser bastante grande y, por lo tanto, es posible que uƟlice una gran canƟdad de
memoria del sistema cuando se escribe como un único valor, lo que produce una reducción del
rendimiento de la aplicación.
Para reducir la can dad de memoria u lizada al escribir un valor BLOB, puede escribir el BLOB en la
base de datos, en ‘fragmentos’. El proceso de escritura de un BLOB en una base de datos de esta forma
depende de las caracterís cas del origen de datos. Para ver un ejemplo sobre la forma de escribir un
valor BLOB en SQL Server, en ‘fragmentos’, vea Conservar recursos al escribir valores BLOB en SQL
Server.
www.detodoprogramacion.org
426 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
En la cual ingresaremos el nombre y el estado de un viajero, luego daremos clic en el botón examinar,
el cual nos permi rá seleccionar un gráfico:
www.detodoprogramacion.org
Capítulo 5: Aplicación de copias masivas y manejo de imágenes 427
Aquí podemos seleccionar una gráfico y, luego, dar clic en el Botón guardar. Ahora revisemos la base
de datos para poder visualizar cómo se ha guardado la información:
Ahora vamos a visualizar la información que hemos almacenado; para esto daremos clic en la opción
de listado.
Donde la información nos presentará de la siguiente manera la información que hemos ingresado:
En el cual podemos ver los registros que hemos ingresado; en la parte izquierda notamos un link
que nos permi ría poder ver la imagen relacionada a ese registro. Para ver cómo se puede visualizar,
buscaremos cualquier registro y daremos clic en ese link.
www.detodoprogramacion.org
428 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Dando como resultado el llamado el siguiente formulario, que se mostrará de esta forma:
De esta manera, trabajamos con los Archivos Gráficos o archivos de po texto grande.
Luego de haber visto cómo trabaja, vamos a revisar el código que se ha generado para dicho aplica vo:
Lo primero que debemos hacer es generar una base de datos que nos permita guardar la información;
esto lo haremos de la manera más sencilla, mediante el siguiente script:
CREATE DATABASE dbBancaVirtual
GO
USE dbBancaVirtual
GO
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
IF NOT EXISTS (SELECT * FROM sys.objects WHERE object_id = OBJECT_ID(N’[dbo].
[travelers]’) AND type in (N’U’))
BEGIN
CREATE TABLE [dbo].[travelers](
[id] [int] IDENTITY(1,1) NOT NULL,
[nombre] [varchar](50) NULL,
[foto] [image] NULL,
[estado] [char](1) NULL,
CONSTRAINT [PK_travelers] PRIMARY KEY CLUSTERED
(
[id] ASC
)WITH (PAD_INDEX = OFF, IGNORE_DUP_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
END
GO
www.detodoprogramacion.org
Capítulo 5: Aplicación de copias masivas y manejo de imágenes 429
www.detodoprogramacion.org
430 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Dim id As String
id = lblid.Text
Dim con As New SqlConnection(“Server=.;database=dbBancaVirtual;Integra
ted Security=True”)
Dim da As New SqlDataAdapter(“SELECT * FROM travelers where id=’” +
id.ToString() + “’”, con)
Dim mycb As SqlCommandBuilder = New SqlCommandBuilder(da)
Dim ds As New DataSet()
da.MissingSchemaAction = MissingSchemaAction.AddWithKey
con.Open()
da.Fill(ds, “travelers”)
Dim fs As New FileStream(“” + lblruta.Text.Trim() + “”, FileMode.
OpenOrCreate, FileAccess.Read)
‘Grabacion de La Grafica
Dim mydata(fs.Length) As Byte
fs.Read(mydata, 0, fs.Length)
fs.Close()
ds.Tables(“Travelers”).Rows(0)(“foto”) = mydata
da.Update(ds, “Travelers”)
fs = Nothing
mycb = Nothing
ds = Nothing
da = Nothing
con.Close()
con = Nothing
MsgBox(“Archivo guardado en la base de datos”)
Response.Redirect(“listado.aspx”)
Catch ex As Exception
End Try
End Sub
End Class
www.detodoprogramacion.org
Capítulo 5: Aplicación de copias masivas y manejo de imágenes 431
Este página puede llamar la página de listado (listado.aspx), la cual tendrá la siguiente estructura:
www.detodoprogramacion.org
432 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Ahora si queremos cargar una foto relacionada con el registro insertado, llamamos a la página foto.
aspx.
End Sub
End Class
Bien, si se dan cuenta la aplicación es muy sencilla, la puedes mejorar poniéndole otros controles u
otras validaciones. Inténtalo.
www.detodoprogramacion.org
Capítulo 5: Aplicación de copias masivas y manejo de imágenes 433
Bueno, es un script muy simple, el cual desde el botón btnSideBar llama a un archivo de po es lo, el
cual ene por nombre default.css. Ahora, veamos las siguientes caracterís cas de dicho archivo:
body { margin:0;
padding:0;
background: url(images/bg_body.jpg) left top repeat;
font-family:Arial, Helvetica, sans-serif;
font-size:12px; }
#wrapper {width:100%;
display:block; }
#container {width:980px;
margin-left:auto;
margin-right:auto;
height:100%; }
#head { display:block;
height:80px;
background:url(images/logo.jpg) left center no-repeat; }
#outContent{ background:url(images/top_content.jpg) left top no-repeat;
display:block;
padding:20px 20px 20px 0px; }
#content { display:block;
background: url(images/bg_content.jpg) left top repeat-y;
margin:0;
}
#bottomContent{
display:block;
margin:0;
background:url(images/bottom_content.jpg) left bottom no-repeat;
height:20px;
}
#sidebar {
float:left;
width:250px;
padding:60px 0 0 0;
}
#details {
float:left;
width:690px;
padding:10px 0 0 0;
}
.clearFix {
display:block;
clear:both;
height:1px;
}
.btnSidebar {
background:url(images/btnSidebar.jpg) left top no-repeat;
color:#FFFFFF;
text-decoration:none;
height:51px;
display:block;
padding:0 0 0 40px;
font:bold 16px/40px Arial, Helvetica, sans-serif;
www.detodoprogramacion.org
434 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
}
.padding {
padding:15px;}
En el mercado, casi la mayoría de aplicaciones trabajan con gráficos y videos. En el siguiente ejemplo
vamos a emplear los dos pos, trabajando con base de datos.
Lo primero que vamos hacer, es crear una base de datos y un par de tablas para trabajar ahí la
información requerida:
www.detodoprogramacion.org
Capítulo 5: Aplicación de copias masivas y manejo de imágenes 435
Bien, ahora vamos a codificar; para esto, el formulario que es default.aspx lo dividiremos en tres partes.
Ahora vamos a poner la parte donde aparecen los registros insertados, en forma de listado.
www.detodoprogramacion.org
436 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 5: Aplicación de copias masivas y manejo de imágenes 437
www.detodoprogramacion.org
438 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
</asp:TemplateField>
<asp:BoundField DataField=”Codigo” HeaderText=”Cod Registro” />
<asp:BoundField DataField=”nombre” HeaderText=”Artista” />
<asp:BoundField DataField=”cancion” HeaderText=”Tema” />
</Columns>
<RowStyle BackColor=”#F7F6F3” ForeColor=”#333333” />
<EditRowStyle BackColor=”#999999” />
<SelectedRowStyle BackColor=”#E2DED6” Font-Bold=”True”
ForeColor=”#333333” />
<PagerStyle BackColor=”#284775” ForeColor=”White”
HorizontalAlign=”Center” />
<HeaderStyle BackColor=”#5D7B9D” Font-Bold=”True” ForeColor=”White” />
<AlternatingRowStyle BackColor=”White” ForeColor=”#284775” />
</asp:GridView>
<br />
<br />
<table >
<tr>
<td style=”width: 100px; height: 511px” valign=”top”>
<asp:DataList ID=”DataList1” runat=”server”>
<ItemTemplate>
<table border=”1”>
<tr>
<td style=”width: 100px; height: 18px”>
<asp:Label ID=”Label7” runat=”server”
Text=”Cod Registro:” Width=”128px” Font-Bold=”True” ForeColor=”#000099”></
asp:Label></td>
<td style=”width: 100px; height: 18px”>
<asp:Label ID=”Label6” runat=”server” Text=’<%#
Eval(“codigo”) %>’ Width=”124px” Font-Bold=”True” ForeColor=”#0066CC”></
asp:Label></td>
</tr>
<tr>
<td style=”width: 100px”>
<asp:Label ID=”Label2” runat=”server”
Text=”Artista:” Width=”128px” Font-Bold=”True” ForeColor=”#000099”></asp:Label></
td>
<td style=”width: 100px”>
<asp:Label ID=”Label8” runat=”server”
Text=’<%# Eval(“Nombre”) %>’ Width=”157px” Font-Bold=”True” ForeColor=”#0066CC”></
asp:Label></td>
</tr>
<tr>
<td style=”width: 100px; height: 21px”>
<asp:Label ID=”Label3” runat=”server”
Text=”Tema:” Width=”128px” Font-Bold=”True” ForeColor=”#000099”></asp:Label></td>
<td style=”width: 100px; height: 21px”>
<asp:Label ID=”Label9”
runat=”server” Text=’<%# Eval(“Cancion”) %>’ Width=”157px” Font-Bold=”True”
ForeColor=”#0066CC”></asp:Label></td>
</tr>
<tr>
<td style=”width: 100px”>
</td>
www.detodoprogramacion.org
Capítulo 5: Aplicación de copias masivas y manejo de imágenes 439
Esto es el código HTML en el cual hemos subrayado algunos aspectos que se deben tener cuenta en la
creación de tu página.
Bien, ahora veamos el script que desarrollaremos en los eventos del formulario, el cual es el siguiente:
El evento que vamos a desarrollar es el del botón Grabar, en el cual grabaremos la imagen y guardaremos
los archivos en una carpeta.
Imports System.Data.SqlClient
Imports System.Data
www.detodoprogramacion.org
440 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
End If
If FileUpload2.PostedFile.FileName = “” Then
lblmensaje.Text = “Seleccione el Video”
lblmensaje.ForeColor = Drawing.Color.Red
lblmensaje.Font.Bold = True
Exit Sub
End If
Dim video As String = FileUpload2.PostedFile.FileName.Substring( _
FileUpload2.PostedFile.FileName.LastIndexOf(“\”) + 1)
FileUpload2.PostedFile.SaveAs(Server.MapPath(“Videos/”) + video)
My.Computer.FileSystem.RenameFile( _
Server.MapPath(“Videos/”) + video, lblcodigo.Text + “.flv”)
Try
If Not Page.IsPostBack Then
If Request.QueryString(“cod”) = “” Then
Call GenerarCodigo()
Call ListadoCantate()
Else
FlashVideo1.VideoURL = “~/Videos/” & Request.
QueryString(“cod”) & “.flv”
DataList1.DataSource = Session(“data”)
DataList1.DataBind()
GridView1.DataSource = Session(“tbl”)
GridView1.AllowPaging = True
GridView1.PageSize = 5
GridView1.DataBind()
End If
www.detodoprogramacion.org
Capítulo 5: Aplicación de copias masivas y manejo de imágenes 441
End If
Catch ex As Exception
End Try
End Sub
Ahora crearemos unas subru nas que nos permiten limpiar los controles, listar los cantantes y generar
código u lizando el procedimiento almacenado USP_GENERAR:
Sub nuevo()
txtcancion.Text = “”
txtnombre.Text = “”
txtnombre.Focus()
End Sub
Sub ListadoCantate()
Dim da As New SqlDataAdapter(“USPlISTADO”, cn)
Dim tbl As New DataTable
da.Fill(tbl)
Session(“tbl”) = tbl
GridView1.DataSource = Session(“tbl”)
GridView1.AllowPaging = True
GridView1.PageSize = 5
GridView1.DataBind()
End Sub
Sub GenerarCodigo()
Dim cmd As New SqlCommand(“USP_GENERAR”, cn)
cmd.CommandType = CommandType.StoredProcedure
cn.Open()
Dim cod As String = cmd.ExecuteScalar
lblcodigo.Text = cod
cn.Close()
End Sub
www.detodoprogramacion.org
442 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
da.Fill(tbl)
Session(“data”) = tbl
DataList1.DataSource = Session(“data”)
DataList1.DataBind()
lblcodigo.Text = GridView1.SelectedRow.Cells(2).Text
txtnombre.Text = GridView1.SelectedRow.Cells(3).Text
txtcancion.Text = GridView1.SelectedRow.Cells(4).Text
End Sub
www.detodoprogramacion.org
Capítulo 5: Aplicación de copias masivas y manejo de imágenes 443
www.detodoprogramacion.org
444 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
En primer lugar cargamos la página, la cual nos va a mostrar la página donde ingresaremos la
información.
Donde hemos puesto en un círculo los datos que se han ingresado, como por ejemplo: el nombre del
ar sta, el nombre de la canción; en el caso de la foto y el video, lo recuperamos de archivos que ya
existen. Luego damos clic en el botón Grabar. Si todo es correcto nos mostrará una ventana de alerta
de la siguiente manera:
www.detodoprogramacion.org
Capítulo 5: Aplicación de copias masivas y manejo de imágenes 445
Ahora, si nosotros quisiéramos ver la información de los registros que tenemos, damos clic en el botón
seleccionar:
El cual nos permi ría visualizar el detalle del registro seleccionado, de la siguiente manera:
www.detodoprogramacion.org
446 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Si queremos seleccionar la foto para poder visualizarla, esta se mostraría de la siguiente manera:
Ahora, si queremos visualizar el archivo de video que hemos adicionado al registro, lo podemos hacer
dando clic en el Botón de reproducción.
Bueno, este es otro ejemplo de cómo se pueden manejar gráficos y videos desde ASP.NET. Ojalá te
guste, no olvides que el código fuente lo puedes encontrar en la carpeta del Capítulo 5. Suerte.
www.detodoprogramacion.org
CAPÍTULO
DEFINICIÓN
Una consulta es una expresión que recupera datos de un origen de datos. Normalmente, se expresan
en un lenguaje de consultas especializado. A lo largo del empo se han ido desarrollando lenguajes
diferentes para los dis ntos pos de orígenes de datos, como SQL para las bases de datos relacionales
y XQuery para XML.
Por consiguiente, los programadores han tenido que aprender un nuevo lenguaje de consultas para cada
po de formato u origen de datos que deben admi r. LINQ simplifica esta situación, proporcionando un
modelo coherente para trabajar con datos de dis ntos pos de formatos y orígenes de datos. En una
consulta LINQ siempre se trabaja con objetos. Se u lizan los mismos modelos de codificación básicos
para consultar y transformar datos de documentos XML, bases de datos SQL, conjuntos de datos ADO.
NET, colecciones .NET y cualquier otro formato para el que haya disponible un proveedor LINQ.
LINQ define operadores de consulta estándar que permiten a lenguajes habilitados con LINQ filtrar,
enumerar y crear proyecciones de varios pos de colecciones usando la misma sintaxis. Tales
colecciones pueden incluir arreglos (vectores) y clases, XML, conjuntos de datos desde bases de datos
relacionales y orígenes de datos de terceros. El proyecto LINQ usa caracterís cas de la versión 2.0
del .NET Framework, nuevos ensamblados relacionados con LINQ, así como extensiones para los
lenguajes C# y Visual Basic .NET. Microso ha distribuido una versión previa del LINQ, consistente de
estas bibliotecas y compiladores para C# 3.0 y Visual Basic 9. Otros lenguajes, como F# y Nemerle, han
anunciado brindar soporte preliminar.
www.detodoprogramacion.org
448 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 449
www.detodoprogramacion.org
450 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 451
www.detodoprogramacion.org
452 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 453
@nom_act varchar(60)
as
select nom_activ
from actividad
where nom_activ like ‘%’ + @nom_act + ‘%’
go
www.detodoprogramacion.org
454 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 455
Ahora empecemos a desarrollar. En Visual Studio 2008 creamos un nuevo si o web con lenguaje Visual
Basic y elegimos un Web Site; lo desarrollaremos en Visual Basic.
www.detodoprogramacion.org
456 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
En el App_Code, clic derecho y agregamos un nuevo item llamado LINQ TO SQL CLASSES.
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 457
Arrastramos las tablas y los procedimientos con las cuales vamos a trabajar, es decir, que de la base que
hemos seleccionado arrastramos todos los objetos.
Se debe tomar en cuenta que para la conexión con la base de datos y los procedimientos deben
ser agregados al LINQ TO SQL CLASSES que se creó anteriormente y guardarlo para uƟlizar
nuestros procedimientos almacenados.
www.detodoprogramacion.org
458 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
A con nuación, pondremos el código que hemos desarrollado en los eventos donde hemos trabajado:
Imports System.Linq
Imports System.Data.Linq
Partial Class buscador
Inherits System.Web.UI.Page
Sub lista_todo()
Try
End Try
End Sub
End Sub
Sub lis_parti()
Try
Dim a1 As String = txtparticular.Text
Dim a2 As String = txtape1.Text
Dim a3 As String = txtape2.Text
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 459
GridView1.DataSource = part
GridView1.DataBind()
Catch ex As Exception
End Try
End Sub
End Try
End Sub
End Class
Si nos damos cuenta, para este proceso de consultas múl ples no es necesario u lizar mucho código,
u lizando la clase linq podemos aprovechar al máximo las relaciones de las tablas, los procedimientos
almacenados, etc.
Bueno, siguiendo con los procesos que realiza la aplicación, podemos ver que en esta página se pueden
realizar búsquedas de números telefónicos de empresas y de personas par culares, con algunos datos
brindados por nuestros clientes.
www.detodoprogramacion.org
460 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
En la parte inferior se cargan todos los registros con los cuales se encuentran en la base de datos (en la
página se listan todas las empresas que existen).
En este ejemplo, lo que hacemos es escribir en distrito una parte de la palabra, y nuestro sistema
reconocerá las palabras relacionas con un autoposback.
Después, seleccionas el distrito que indicamos para confirmar que busque sólo en ese distrito toda la
información, tanto de personas par culares o empresas.
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 461
En este ejemplo realizamos la búsqueda de un par cular en ese distrito con el nombre y el primer
apellido del par cular, para ubicarlo en la dirección y teléfono que constan por ese nombre.
Ahora, buscaremos empresas pero por su ac vidad, en este caso ‘ocio’, pero podemos truncarlo, es
decir escribir las primeras letras.
Realizando la búsqueda se nos mostrarán dos registros que cumplen con la caracterís ca que hemos
puesto en ac vidad ‘ocio’ que existen en todos los distritos.
www.detodoprogramacion.org
462 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
En este caso, realizaremos la búsqueda de una empresa por su nombre y la dirección, cabe mencionar
que esto nos ayuda mucho por la razón que los bancos enen dis ntas sucursales y así podemos
realizar la búsqueda de un banco en un lugar específico para saber su número telefónico.
Bueno, este ejemplo nos ha servido para poder entrar al mundo de LINQ con ASP.NET, sigamos viendo
algunos más.
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 463
Se incluye en el Visual Studio 2008, en el cual nos va a permi r manipular mejor la información dentro
de nuestras aplicaciones; se basa en varias funcionalidades, tanto como XML y Base de datos, como
orientado a Objetos.
Muchos conceptos que LINQ fueron probados en Cω (C OMEGA), un proyecto de inves gación de
Microso .
OBJETIVO: El obje vo de crear LINQ es permi r que todo el código hecho en Visual Studio (incluidas
las llamadas a bases de datos, datasets, XMLs) sean también orientados a objetos. Antes de LINQ, la
manipulación de datos externos tenía un concepto más estructurado que orientado a objetos. Además,
LINQ trata de facilitar y estandarizar el acceso a dichos objetos.
USAR LINQ CON ASP.NET: Puede u lizar Language-Integrated Query (LINQ) en páginas web para
recuperar y modificar datos. LINQ aplica los principios de la programación orientada a objetos a los
datos relacionales. Proporciona un modelo de programación unificado para realizar consultas de datos
de pos diferentes de orígenes de datos.
• Control Linqdatasource: Proporciona una manera fácil de conectar a los datos de una base de
datos o a una recolección de datos en memoria como una matriz. El control crea dinámicamente
las consultas LINQ a par r de los valores proporcionados mediante declaración.
Al recuperar datos de una clase de contexto de datos LINQ to SQL, también puede configurar
un control LinqDataSource para administrar las operaciones de actualización, inserción y
eliminación. El control realiza estas tareas sin requerir que se escriban comandos SQL para ello.
Ejemplo:
Para mostrar los datos en una página web, enlace un control enlazado a datos al control
LinqDataSource. Los controles GridView y DetailsView son ejemplos de controles enlazados a datos.
www.detodoprogramacion.org
464 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
• Control Objectdatasource: Se u liza cuando se desea interactuar con los datos de una manera
más compleja que la que permite el control LinqDataSource. Por ejemplo, puede crear un
método de actualización que permita establecer valores en tablas combinadas.
El control ObjectDataSource se puede u lizar con una clase LINQ to SQL. Para ello, se establece
la propiedad TypeName en el nombre de la clase de contexto de datos. También se establecen
los métodos SelectMethod, UpdateMethod, InsertMethod y DeleteMethod en los métodos de
la clase de contexto de datos que realizan las operaciones correspondientes.
CONSULTAS LINQ: Puede incluir consultas LINQ en una página web sin u lizar un control de origen
de datos. Puede u lizar una consulta LINQ si necesita u lizar un operador de consulta que no está
disponible en el control LinqDataSource. También puede u lizarlo si desea mostrar datos de sólo
lectura en un control enlazado a datos sin el procesamiento necesario para crear un control de origen
de datos. Para obtener una lista de los operadores de consulta que están disponibles en el control
LinqDataSource, vea Información general sobre el control de servidor web LinqDataSource.
En el ejemplo siguiente, se muestra cómo incluir una consulta LINQ en una página web. El ejemplo
muestra los resultados de la consulta en un control GridView.
LINQ to SQL es una implementación de O/RM (object rela onal mapping, mapeador de objetos
relacionales) nos permite modelar bases de datos relacionales con clases de .NET. Podemos consultar
bases de datos con LINQ, así como actualizar, añadir, borrar datos de ellas.
• Modelando bases de datos con LINQ to SQL: Visual Studio viene con un diseñador de LINQ to
SQL que nos aporta una forma fácil de modelar y visualizar una base de datos como un modelo
de objeto de LINQ to SQL. Usando ese diseñador puedo crear fácilmente una representación de
la base de datos ‘Northwind’.
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 465
5. Usando el diseñador LINQ to SQL puedo crear fácilmente una representación de la base de
datos ‘Neptuno’. U lizaremos las tablas categoría y Neptuno para hacer un ejemplo sencillo:
www.detodoprogramacion.org
466 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 467
www.detodoprogramacion.org
468 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
8. Nos aparecerán en el primer combo aquellas tablas que hemos seleccionado en el Linq to SQL;
en este caso, usaremos la tabla categoría y seleccionaremos aquellos campos que usaremos
para llenar nuestro combo. Y finalmente finish.
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 469
9. En este cuadro seleccionamos el campo que queremos que sea en el combo y los valores que
tendrán.
10. Al ejecutar este será nuestro resultado. Nuestro combo estará lleno con las categorías
correspondientes.
11. Ahora, llenaremos nuestro Gridview con los productos de acuerdo a la categoría seleccionada,
para ello, realizaremos los mismos pasos que realizamos en el combo, pero a nuestro nuevo
LINQ lo llamaremos BASE2.
Cuando lleguemos a este cuadro, seleccionaremos la tabla productos y de igual manera los
campos que mostraremos o usaremos, pero ahora seleccionamos el botón where para indicar
el campo que dará la condición, en este ejemplo será el campo idcategoria.
www.detodoprogramacion.org
470 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
12. Antes de ejecutar daremos un repaso a nuestro ejercicio, en el cual veremos cada uno de los
LINQ creados para cada control: BASE Y BASE2.
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 471
13. Esta será la presentación final, con nuestro pequeño ejemplo implementado seleccionamos
una categoría del combo y en el Gridview veremos los productos que pertenecen a la categoría.
as
Insert Categories values (
@Categoria,
‘Esto es por Procedimiento almacenado’,
null
)
www.detodoprogramacion.org
472 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Seleccionar la tabla categoría y observar que el método de inserción es realizado por el Run me de
Linq.
Dentro del Web Form, en el método dentro del botón, creamos lo siguiente:
db.Categories.InsertOnSubmit(ct);
db.SubmitChanges();
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 473
www.detodoprogramacion.org
474 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Seleccionemos la tabla Categorías, y en propiedades modifiquemos la opción Insert por Use Run me.
Acá enlazamos con los campos correspondientes de los campos de la tabla con los campos de la
en dad categoría, así como se muestra en la siguiente figura:
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 475
Observación:
Retrasar la carga
LINQ to SQL permite a los desarrolladores especificar si las propiedades de las en dades deben
precargarse o retrasarse hasta el primer acceso. Podemos personalizar las reglas de precarga/retraso
para las propiedades de las en dades seleccionando cualquier propiedad o asociación en el diseñador,
y en las propiedades poner la propiedad ‘Delay Loaded’ a true o false.
Por poner un ejemplo, imaginemos la clase en dad ‘Category’ del modelo anterior. La tabla ‘Categories’
de la base de datos ‘NorthWind’ ene una columna ‘Picture’ que contenga una imagen (potencialmente
grande) para cada categoría, y sólo queremos esa imagen cuando vaya a usarla (y no cuando esté
haciendo una consulta para obtener los nombres de las categorías en una lista).
Podríamos configurar la propiedad Picture para que retrase su carga seleccionándola en el diseñador
de LINQ to SQL, y en las propiedades poner ‘Delay Loaded’ a true:
www.detodoprogramacion.org
476 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
1. Primero realizaremos nuestro mantenimiento de clientes, usando LINQ este será nuestro
diseño:
2. Usando el diseñador LINQ to SQL que ya usamos en el ejemplo anterior, seleccionamos la tabla
que usaremos.
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 477
www.detodoprogramacion.org
478 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 479
6. Seleccionamos la tabla que usaremos, en este caso la tabla clientes, luego seleccionamos el
botón ADVANCED.
7. Automá camente aparecerá la siguiente ventana, la cual nos brinda opciones de eliminar,
insertar y actualizar. Siguiendo, ac varemos los recuadros para realizar nuestro manteamiento.
www.detodoprogramacion.org
480 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 481
www.detodoprogramacion.org
482 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
U lizando el LINQ to SQL, usaremos la tabla Categoria para realizar este primer diseño.
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 483
Siempre debemos guardar el archivo creado, que en este caso le pusimos como nombre DataCategoria.
dbml.
www.detodoprogramacion.org
484 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 485
Seleccionamos el archivo dbml que hemos creado para realizar este ejemplo. Luego seleccionamos la
tabla que usaremos con sus respec vos campos.
www.detodoprogramacion.org
486 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Ahora, al hacer clic en el botón, se mostrará una ventana emergente en la cual mostraremos todos
aquellos productos que pertenezcan a esa categoría.
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 487
Primero, en el formulario que llamará a la ventana emergente tendremos que hacer este código:
Protected Sub GridView1_PreRender(ByVal sender As Object, ByVal e As System.
EventArgs) Handles GridView1.PreRender
For i As Integer = 0 To Me.GridView1.Rows.Count - 1
Dim btn As Button = CType(GridView1.Rows(i).Cells(3).Controls(1), Button)
btn.Attributes.Add(“Onclick”, “window.open(‘Default.aspx?cod=” & GridView1.
Rows(i).Cells(0).Text & “&cat=” & GridView1.Rows(i).Cells(1).Text & “’)”)
Next
End Sub
De esta manera, tendremos el formulario ya realizado y ejecutado. Para ello tuvimos que usar este
código:
Partial Class _Default
Inherits System.Web.UI.Page
Dim cn As New System.Data.SqlClient.SqlConnection(“server=(local);integrated
security=sspi;database=neptuno”)
www.detodoprogramacion.org
488 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 489
Para poder hacer este ejemplo, tenemos que crear vistas en la base de datos en las cuales estamos
trabajando.
CREATE VIEW CLIENTES_PEDIDOS_VENTAS
AS
SELECT TOP 89 C.IDCLIENTE,NOMBRECOMPAÑIA,COUNT(P.IDPEDIDO) AS [CANTIDAD PEDIDOS],
SUM(PRECIOUNIDAD*CANTIDAD) AS [TOTAL DE VENTA]
FROM CLIENTES C ,PEDIDOS P,[DETALLES DE PEDIDOS]DT
WHERE C.IDCLIENTE=P.IDCLIENTE AND P.IDPEDIDO=DT.IDPEDIDO
GROUP BY C.IDCLIENTE,NOMBRECOMPAÑIA
ORDER BY C.IDCLIENTE ASC
GO
www.detodoprogramacion.org
490 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Una vez creada las vistas, haremos el LINQ to SQL para hacer el llamado de nuestras vistas. Y los
llamaremos LinkTemporal.
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 491
Guardamos los cambios. Y al seleccionar el primer Gridview seleccionamos el LinkTemporal que hemos
creado previamente.
www.detodoprogramacion.org
492 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Repe mos todos los pasos que anteriormente hemos señalado, y al ejecutar este será el resultado.
Seleccionamos el botón por código e ingresamos el código:
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 493
Ahora, al seleccionar mostraremos los pedidos del cliente y seguiremos los siguientes pasos. Para
mostrar los pedidos del cliente realizamos los siguientes pasos:
www.detodoprogramacion.org
494 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Al seleccionar el botón WHERE, tenemos que indicar el idcliente, que es el campo foráneo entre las
dos vistas:
Al finalizar y ejecutar, este será el resultado, seleccionamos el cliente y sus respec vos pedidos:
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 495
Finalmente, veremos los productos por pedido seleccionado. Para ello tendremos que hacer esta
pequeña programación:
Protected Sub GridView3_SelectedIndexChanged(ByVal sender As Object, ByVal e As
System.EventArgs) Handles GridView3.SelectedIndexChanged
Dim cad As String = “select * from listadodetalle where idpedido=” &
GridView3.SelectedRow.Cells(1).Text
Dim da As New System.Data.SqlClient.SqlDataAdapter(cad, cn)
Dim tbl As New System.Data.DataTable
da.Fill(tbl)
GridView4.DataSource = tbl
GridView4.DataBind()
End Sub
www.detodoprogramacion.org
496 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Para realizar consultas de LINQ con la base de datos MySQL se necesita el instalador de doConnect
for MySQL, que se puede descargar del siguiente link: hƩp://www.devart.com/dotconnect/, que nos
permite realizar accesos de modo LINQ con MySQL:
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 497
Luego veremos la siguiente página, donde nos permi rá hacer los downloads de la página principal:
www.detodoprogramacion.org
498 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 499
www.detodoprogramacion.org
500 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 501
Aquí notamos los componentes de MySQL para LINQ que se agregan al Visual Studio después de haber
concluido la instalación:
www.detodoprogramacion.org
502 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Después de adicionar, creamos un nuevo proyecto Web en el lenguaje que deseen. En este ejemplo
u lizaremos el Visual C#.
Agregamos un nuevo App_Code para que se puedan guardar los archivos que se generan al agregar el
contexto de MySQL.
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 503
Agregamos un nuevo elemento de po LINQ to SQL Model, que se agregó automá camente después
de instalar el driver anteriormente mencionado; este archivo nos abrirá una interfaz que nos permi rá
la conexión con MySQL:
Ahora realizaremos la conexión con MySQL ingresando los siguientes parámetros, realizamos un test a
la conexión para que todo este OK.
www.detodoprogramacion.org
504 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Aquí en el panel que se muestra, se podrán arrastrar las en dades de la base datos la cual seleccionamos:
Para el ejemplo, arrastraremos las en dades que necesitamos; observemos que también trae sus
propias relaciones entre ellas, para de esa manera facilitar las consultas que deseemos realizar.
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 505
Ahora entraremos a la programación del ejercicio propuesto: instanciamos una variable a la clase
ContextNortwind:
Se declara una variable LINQ (ciudades), esta tendrá una variable pivote que instancia la tabla
Employees; seleccionamos el campo ciudad y aplicamos la propiedad Dis nct() para que los datos no
se repitan:
Para el dropdowlist se declara una variable que recupera su valor y realizamos lo mismo que en
el ejemplo anterior, con la diferencia que manejamos una condicional where (donde) en la cual
comparamos que la ciudad seleccionada sea igual a las de los empleados de esa ciudad.
www.detodoprogramacion.org
506 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Al igual que los ejemplos anteriores, se declara la variable linq, pero en este caso se relacionan 3
en dades; para calcular la suma de total de la venta del pedido elegido se agrega a la consulta anterior
la propiedad Sum(instancia=> instancia.columna_a_sumar).
www.detodoprogramacion.org
Capítulo 6: Aplicación trabajando con Linq (ejemplos cortos) 507
Bueno, ya hemos visto varios ejemplos de cómo trabajar con el Linq; en la carpeta Capítulo VII podemos
encontrar todos los ejemplos de este capítulo.
www.detodoprogramacion.org
CAPÍTULO
Aplicación de
7 Facturación WEB
EJEMPLO DE CONCURRENCIAS
Bien, vamos a trabajar un ejemplo de concurrencia. El caso es que es una po de control de registros
de los manejos de información, de tal manera que podamos controlar que el registro que estamos
seleccionando no lo podemos u lizar hasta que lo liberemos de la primera selección. Ahora veamos
cómo trabaja el ejemplo:
En primer término, tenemos cargado un formulario que se llama producto.aspx, el cual te permite
hacer consultas; en este caso estamos consultando productos y hemos elegido el producto 11, tal
como se ve en el ejemplo:
www.detodoprogramacion.org
510 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
En ese mismo instante, lanzamos otro formulario al cual le llamamos Lista_Producto.aspx, en el que
podemos seleccionar cualquier registro; en este caso vamos a seleccionar el mismo registro, tal como
se ve en el ejemplo:
En ese caso, vamos a modificar el registro seleccionado, de tal manera que cambiaremos el stock, de
esta manera:
www.detodoprogramacion.org
Capítulo 7: Aplicación de Facturación WEB 511
Seguidamente, vamos a dar clic en el botón actualizar, produciéndose este mensaje de error:
Y luego, si liberamos esto, el archivo de consulta de la grabación se hará efec va, tal como se muestra
en el siguiente cuadro:
Bien, ahora empezaremos a ver el código que hemos realizado, pero ante debemos decir que vamos a
trabajar con la base de datos NegocioWeb_Data; también se debe correr el siguiente script:
use NegocioWeb
go
)
AS
UPDATE Productos
SET NombreProducto = @NombreProducto,
CantidadPorUnidad = @CantidadPorUnidad,
PrecioUnidad = @PrecioUnidad,
UnidadesEnExistencia = @UnidadesEnExistencia
WHERE IdProducto = @IdProducto
www.detodoprogramacion.org
512 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Ahora veamos la codificación que hemos realizado en los dos diferentes WebForms con los cuales
hemos trabajado.
Empecemos con la página Lista_Producto.aspx, este es el script; primero veamos las validaciones que
hemos insertado en la página, lo vamos a ver por el código HTML.
Codigo HTML
<tr>
<td style=”height: 26px; text-align: right”> Código Producto</td>
<td style=”height: 26px; text-align: left”>
<asp:TextBox ID=”txtidprodcto” runat=”server” Width=”185px”
Enabled=”False”></asp:TextBox>
<asp:RequiredFieldValidator ID=”RequiredFieldValidator1” runat=”server”
ControlToValidate=”txtidprodcto” ErrorMessage=”Debe ingresar el codigo
del producto”> *
</asp:RequiredFieldValidator></td>
</tr>
<tr style=”color: #000000”>
<td style=”height: 21px; text-align: right”> Nombre Producto</td>
<td style=”height: 21px; text-align: left”>
<asp:TextBox ID=”txtnombreproducto” runat=”server” Width=”183px”></
asp:TextBox>
<asp:RequiredFieldValidator ID=”RequiredFieldValidator2” runat=”server”
ControlToValidate=”txtnombreproducto”ErrorMessage=”Debe ingresar el nombre
del producto”> *
</asp:RequiredFieldValidator></td>
</tr>
<tr style=”color: #000000”>
<td style=”height: 21px; text-align: right”>Precio</td>
<td style=”height: 21px; text-align: left”>
www.detodoprogramacion.org
Capítulo 7: Aplicación de Facturación WEB 513
Ahora sí, empecemos. Veamos el código que hemos desarrollado en los eventos:
Imports System.Data
Imports System.Data.Sql
Imports System.Data.SqlClient
Partial Class Lista_Producto
Inherits System.Web.UI.Page
www.detodoprogramacion.org
514 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Sub listar()
Dim cn As New SqlConnection
Dim da As New SqlDataAdapter
Try
Dim comando As New SqlCommand
comando.Connection = cn
Dim ds As New DataSet
cn.ConnectionString = “Data source=.;database=negocioweb;integrated
security=yes”
comando.CommandType = Data.CommandType.Text
comando.CommandText = “SELECT * FROM Productos”
da.SelectCommand = comando
cn.Open()
da.Fill(ds)
GridView1.DataSource = ds.Tables.Item(0)
GridView1.DataBind()
www.detodoprogramacion.org
Capítulo 7: Aplicación de Facturación WEB 515
Catch ex As Exception
Response.Write(“<script>alert(‘” + ex.Message.ToString() + “’)</
script>”)
Finally
cn.close()
cn.Dispose()
End Try
End Sub
www.detodoprogramacion.org
516 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Imports System.Data
Imports System.Data.SqlClient
Partial Class _Default
Inherits System.Web.UI.Page
www.detodoprogramacion.org
Capítulo 7: Aplicación de Facturación WEB 517
INGRESO DE USUARIO
- Se quiso controlar el acceso de personal para el manejo de la factura.
- Se debe ingresar su id de empleado y una contraseña que se le asigna, en este logueo se valida que
el usuario exista y que esté ac vo.
MENÚ DE OPCIONES:
Una vez registrado el usuario, visualizaremos una lista de opciones de trabajo a realizar. Estas son:
Ingresar Nueva Factura: según el local al cual pertenece el usuario, se mostrará su número de factura.
Consulta de Facturas: acá se hacen todas las consultas sobre las facturas.
Anular Facturas: las facturas que enen problemas y deben ser anuladas; no todos los empleados
pueden anular una factura, sólo los administradores.
www.detodoprogramacion.org
518 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
2 3
Si el cliente no está registrado, nos da la opción de registrarlo, ingresamos sus datos y le damos clic al
link Insertar Cliente.
Al insertar con éxito al cliente, ya podemos visualizar su código de cliente, al costado de su nombre;
con esto ya podemos empezar a registrar la factura.
www.detodoprogramacion.org
Capítulo 7: Aplicación de Facturación WEB 519
Búsqueda de Cliente, en el caso de ya tenerlo registrado, se da clic en esta opción para buscarlo.
Los pos de búsqueda son por nombre, código y ruc; según lo que escribamos y le demos clic en el
botón buscar, cargará los datos.
Nosotros sólo le damos clic al link seleccionar y cargarán sus datos en las cajas de texto.
www.detodoprogramacion.org
520 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Si la can dad a sacar es menor a la can dad actual, no se podrá solicitar ese producto.
Una vez que le damos clic a agregar, se guardará en nuestro detalle de la factura.
Aquí podemos seguir ingresando nuestros productos, incluso los mismos, sólo actualizaría la can dad,
y esta debe de ser menor al stock.
www.detodoprogramacion.org
Capítulo 7: Aplicación de Facturación WEB 521
Una vez que tenemos nuestros productos ya ingresados, le daremos clic al botón aceptar.
www.detodoprogramacion.org
522 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
CONSULTA DE FACTURAS
Acá hay 5 modos de búsqueda:
- Búsqueda de las facturas mayores a una fecha.
- Búsqueda de Factura entre 2 fechas.
- Búsqueda por nombre de cliente.
- Búsqueda por Nombre de Empleado.
- Búsqueda mayor a un monto ingresado.
ANULAR FACTURAS
Estas se cargan por local y sólo los ven los que enen privilegios.
www.detodoprogramacion.org
Capítulo 7: Aplicación de Facturación WEB 523
Acá se selecciona una factura, carga los datos, le damos clic en anular y se anula la factura.
Nos pedirá una confirmación para anular la factura.
www.detodoprogramacion.org
524 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Bueno, hemos visto cómo trabaja el proceso de facturacion. Ahora sería bueno que tú mejores este
módulo para que se adecue a las necesidades que pudieras tener.
Por ejemplo, hemos creado tres clases que van a tener las funciones y subru nas, propiedades y
variables con las cuales se trabajarán:
www.detodoprogramacion.org
Capítulo 7: Aplicación de Facturación WEB 525
Default.aspx
www.detodoprogramacion.org
526 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
{ String[] usu=neg.buscarNombreUsuario(int.Parse(txtcod.Text),txtpass.Text);
if (int.Parse(usu[0]) > 0)
{
usu[0] = txtcod.Text;
Session[“usu”] = usu;
Server.Transfer(“Menu.aspx”);
}
else { lblmsj.Text = “Codigo u Contraseña Incorrecta”; }
}
}
Antes de ver el WebForm menu, debemos ver el masterpage que lo ene como base.
Para esto, veamos el codigo HTML que con ene este Master Page:
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>Untitled Page</title>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
<table style=”width: 1144px”>
<tr>
<td colspan=”3” style=”height: 98px; text-align: left”>
<table>
<tr>
<td style=”width: 100px; text-align: right”>
<asp:Label ID=”Label1” runat=”server” Font-
Bold=”True” ForeColor=”#000099” Text=”Numero:”></asp:Label></td>
<td style=”width: 275px; text-align: left”>
<asp:Label ID=”lblnum” runat=”server” Font-
Bold=”True”></asp:Label></td>
</tr>
<tr> <td style=”width: 100px; height: 21px; text-align:
right”>
www.detodoprogramacion.org
Capítulo 7: Aplicación de Facturación WEB 527
www.detodoprogramacion.org
528 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
</tr>
<tr>
<td style=”width: 536px”> </td>
<td style=”width: 452px”> </td>
<td style=”width: 443px”> </td>
</tr>
</table>
</div>
</form>
</body>
</html>
<script language=”javascript”>
function soloNumeros(){
var x=window.event.keyCode;
www.detodoprogramacion.org
Capítulo 7: Aplicación de Facturación WEB 529
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
ConsultaFactura.aspx:
Ahora, el código que a con nuación sigue está escrito en el código HTML:
<script runat=”server”>
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
//son 5 textbox que se deshabilitan al inicio
txtclie.Enabled = false;
txtemp.Enabled = false;
www.detodoprogramacion.org
530 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
txtfec1.Enabled = false;
txtfec2.Enabled = false;
txtmonto.Enabled = false;
ckfecha1.Enabled = false;
ckfecha2.Enabled = false;
PF.Negocio.FacturaNeg fneg = new PF.Negocio.FacturaNeg();
Session[“todos”] = fneg.listaCliFac();
GridView1.DataSource = Session[“todos”];
GridView1.DataBind();
txtmonto.Attributes.Add(“onkeypress”, “soloNumeros();”);
}
}
protected void GridView1_PageIndexChanging(object sender,
GridViewPageEventArgs e)
{ GridView gv = (GridView)sender;
gv.PageIndex = e.NewPageIndex;
GridView1.DataSource = Session[“todos”];
GridView1.DataBind();
}
www.detodoprogramacion.org
Capítulo 7: Aplicación de Facturación WEB 531
txtclie.Enabled = true;
}
else { txtclie.Enabled = false; txtclie.Text = “”; }
}
protected void ckemplreado_CheckedChanged(object sender, EventArgs e)
{
if (ckemplreado.Checked)
{
txtemp.Enabled = true;
}
else { txtemp.Enabled = false; txtemp.Text = “”; }
}
protected void ckmonto_CheckedChanged(object sender, EventArgs e)
{
if (ckmonto.Checked)
{
txtmonto.Enabled = true;
}
else { txtmonto.Enabled = false; txtmonto.Text = “”; }
}
www.detodoprogramacion.org
532 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
{ opt = 12;
t1 = txtclie.Text;
t2 = txtemp.Text;
}
if ((ckcliente.Checked && ckemplreado.Checked && ckmonto.Checked &&
(ckfecha2.Checked == false && ckfecha1.Checked == false )))
{ opt = 16;
t1 = txtclie.Text;
t2 = txtemp.Text;
lista = fneg.busquedaTodos(12, t1, t2, lista);
t1 = txtmonto.Text;
}
Session[“todos”] = fneg.busquedaTodos(opt, t1, t2, lista);
GridView1.DataSource = Session[“todos”];
GridView1.DataBind();
}
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{ if (e.CommandName.Equals(“Select”))
{ int local = int.Parse(GridView1.Rows[int.Parse(e.CommandArgument.
ToString())].Cells[0].Text);
int numf = int.Parse(GridView1.Rows[int.Parse(e.CommandArgument.
ToString())].Cells[1].Text);
PF.Negocio.FacturaNeg fneg = new PF.Negocio.FacturaNeg();
System.Collections.Generic.List<PF.Entidad.Factura> f = fneg.
facturaProductos(numf,local);
GridView2.DataSource = f;
GridView2.DataBind();
}
}
</script>
www.detodoprogramacion.org
Capítulo 7: Aplicación de Facturación WEB 533
if (!Page.IsPostBack)
{
PF.Negocio.FacturaNeg fneg = new PF.Negocio.FacturaNeg();
String[] usu = (String[])Session[“usu”];
int local = (int)Session[“local”];
PF.Entidad.Factura f= new PF.Entidad.Factura();
Session[“factura”] = fneg.listaFacturaCliente(local);
if (fneg.validarNivel(int.Parse(usu[0])))
{
GridView1.DataSource = Session[“factura”];
GridView1.DataBind();
if (GridView1.Rows.Count < 1) {
lblmsj.Text = “No Se Encontraton Facturas Disponibles”;
}
}
else { lblmsj.Text = “Acceso Denegado, No tiene suficientes
Privilegios”; UpdatePanel1.Visible = false; }
}
}
}
}
protected void GridView1_PageIndexChanging(object sender,
GridViewPageEventArgs e)
{
GridView gv = (GridView)sender;
gv.PageIndex = e.NewPageIndex;
GridView1.DataSource = Session[“factura”];
GridView1.DataBind();
}
www.detodoprogramacion.org
534 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
}
}
}
protected void limpiar() {
lbllocal.Text = “”;
lblcodcli.Text =””;
lblfecha.Text = “”;
lblnomcli.Text = “”;
lblnumfac.Text = “”;
}
</script>
www.detodoprogramacion.org
Capítulo 7: Aplicación de Facturación WEB 535
El código que vamos a mostrar se encuentra desarrollado en los eventos del WebForm:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections.Generic;
using PF.Entidad;
using PF.Negocio;
public partial class nuevafactura : System.Web.UI.Page
{
txtruccli.Attributes.Add(“onkeypress”, “soloNumeros();”);
txttelcli.Attributes.Add(“onkeypress”, “soloNumeros();”);
usu = (String[])Session[“usu”];
lblcodemp.Text = usu[0];
lblvendedor.Text = usu[1];
panelCliente.Visible = false;
// btn002.Visible = false;
panelProductos.Visible = false;
dptcategoria.DataSource = fneg.ListarCategoria();
dptcategoria.DataTextField = “Nom_usu”;
dptcategoria.DataValueField = “Id_usu”;
dptcategoria.DataBind();
dptcategoria.Enabled = false;
www.detodoprogramacion.org
536 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
generarFactura();
}
}
// bindCitiesGrid();
}
www.detodoprogramacion.org
Capítulo 7: Aplicación de Facturación WEB 537
txttelcli.Text = cli.Tel_clie;
}
}
protected void LinkButton1_Click(object sender, EventArgs e)
{
panelCliente.Visible = true;
//btn002.Visible = true;
}
www.detodoprogramacion.org
538 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
}
protected void gvProductos_RowCommand(object sender, GridViewCommandEventArgs
e)
{
if (e.CommandName.Equals(“Select”)) {
GridView2.DataSource = lisprod;
GridView2.DataBind();
Session[“listaprod”] = lisprod;
cargaTotales();
}
else {
lbl.Text = “Cant. No Valida”;
}
www.detodoprogramacion.org
Capítulo 7: Aplicación de Facturación WEB 539
cant.Text = “”;
}
}
}
}
protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowIndex > -1)
{
Label lbl=(Label)e.Row.Cells[4].FindControl(“lbltotal”);
lbl.Text = “” + (double.Parse(e.Row.Cells[2].Text) * int.Parse(e.Row.
Cells[3].Text));
}
protected void GridView2_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName.Equals(“Select”)) {
www.detodoprogramacion.org
540 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
Session[“listaprod”]=lisprod;
}
protected void LinkButton3_Click(object sender, EventArgs e)
{
panelProductos.Visible = false;
//llenando el detalle
foreach (Producto p in lprod) {
Det_Factura deta = new Det_Factura();
deta.Num_L1 = int.Parse(lbllocal.Text);
deta.Num_Fac1 = int.Parse(lblnumfac.Text);
deta.Num_prod = p.Num_prod;
deta.Cant = p.Cantidad;
deta.Descuento = 0;
fac.Detalle.Add(deta);
}
if (fneg.insertarFactura(fac)){
generarFactura();
LimpiarGrid();
LimpiarTexto();
Response.Write(“<script>alert(‘Factura Guardada con Exito !!!’)</
script>”);
www.detodoprogramacion.org
Capítulo 7: Aplicación de Facturación WEB 541
//----------------------
productos = new List<Producto>();
productos = fneg.listarProducto();
gvProductos.DataSource = productos;
gvProductos.DataBind();
//----------------------
}
else {
Response.Write(“<script>alert(‘No se Pudo Guardar la Factura’)</
script>”);
}
}
}
}
protected void LinkButton4_Click(object sender, EventArgs e)
{
panelCliente.Visible = false;
//btn002.Visible = false;
}
protected void btnclear_Click(object sender, EventArgs e)
{
LimpiarGrid();
generarFactura();
LimpiarTexto();
}
protected void btncancel_Click(object sender, EventArgs e)
{
LimpiarGrid();
}
protected void LinkButton1_Click1(object sender, EventArgs e)
{
if (txtnomcli.Text.Length > 0)
{
cli.Nom_clie = txtnomcli.Text;
cli.Ruc_clie = txtruccli.Text;
cli.Dir_clie= txtdircli.Text ;
cli.Tel_clie=txttelcli.Text;
String cod = neg.insertarCliente(cli);
www.detodoprogramacion.org
542 Aplicaciones desarrolladas con ASP, AJAX y JQUERY
lblcodcli.Text =cod;
cliente = neg.getClientes();
GridView1.DataSource = cliente;
GridView1.DataBind();
}
}
}
Bien, ya depende de usted poder mejorar este proceso de facturación. Suerte. No olvides que el código
fuente se encuentra en la carpeta Capítulo VII. Nos Vemos.
www.detodoprogramacion.org
Impreso en los Talleres Gráficos de
Surquillo
7199700 – 7199701
Julio 2010
www.detodoprogramacion.org