reporte de practica itesco

64
INSTITUTO TECNOLOGICO SUPERIOR DE COATZACOALCOS ALUMNO: JUAN EDUARDO SANDOVAL HERNANDEZ MATERIA: DESARROLLO DE APLICACIONES WEB DOCENTE: L. I. CINTHYA PEREZ VILCHIS CARRERA: INGENIERIA INFORMATICA GRADO: 6to SEMESTRE GRUPO: “A” NOMBRE DE LA ACTIVIDAD: REPORTE DE PRACTICA #6

Upload: escaflonw

Post on 06-Nov-2015

19 views

Category:

Documents


2 download

DESCRIPTION

Reporte de practica de Desarrollo De Aplicaciones Web del ITESCO

TRANSCRIPT

  • INSTITUTO TECNOLOGICO SUPERIOR DE

    COATZACOALCOS

    ALUMNO:

    JUAN EDUARDO SANDOVAL HERNANDEZ

    MATERIA:

    DESARROLLO DE APLICACIONES WEB

    DOCENTE:

    L. I. CINTHYA PEREZ VILCHIS

    CARRERA:

    INGENIERIA INFORMATICA

    GRADO:

    6to SEMESTRE

    GRUPO:

    A

    NOMBRE DE LA ACTIVIDAD:

    REPORTE DE PRACTICA #6

  • 1) Seleccionamos el programa Microsoft Visual Studio 2008. Clic derecho sobre l y Abrir. Una vez en ejecucin, se presenta su Pgina de inicio, en ella elegimos Crear: Proyecto.

    2) Automticamente se muestra una ventana para la configuracin del Nuevo proyecto.

    Seleccionamos Visual C#; su plantilla de Biblioteca de clases, le asignamos un Nombre, en este caso se llamar: BESGCA y el Nombre de la solucin es: SGCA. Clic en Aceptar para guardar los cambios.

  • 3) Se presenta la interfaz para agregar el cdigo de realizacin de actividades. Se ingresa dentro de las llaves del public class Class1, contenida dentro del namespace BESGCA.

    4) Cambiamos el nombre de Class1 por el de Asignatura a la misma e ingresamos la

    estructuracin de sus actividades a travs de una regin de Atributos para identificar caractersticas de la misma.

  • 5) Construimos una regin de Propiedades para la clase Asignatura.

    6) Creamos la regin de Constructores e ingresamos dos tipos (el primero no recibe

    parmetros, pero el segundo s) para determinar los aspectos que se asignaran a los atributos de la clase.

  • 7) Inicializamos la regin de Mtodos, asignamos cuatro; para la asignacin de los objetos de tipo Asignatura, que realizaran los procesos de Almacenar, Actualizar, Eliminar y Consultar las materias que sean ingresadas.

    8) Despus de ingresar el cdigo correspondiente a la clase Asignatura, le colocamos un

    nombre al archivo, para identificarlo dentro del proyecto. Ahora se llamar BEAsignatura. Sobre el archivo que dice Class1.cs, damos Clic derecho/Cambiar nombre.

  • 9) En la imagen de abajo se muestra como queda identificado el archivo para el desarrollo del proyecto.

    10) Ahora, agregamos un nuevo proyecto. Sobre el nombre de la Solucin: SGCA,

    damos Clic derecho/Agregar/Nuevo proyecto. Tal y como se muestra en la imagen.

  • 11) Se presenta la ventana para la configuracin del nuevo proyecto, seleccionamos uno de tipo Visual C# y la plantilla de Biblioteca de clases. Le asignamos el nombre de: ADSGCA y clic en Aceptar.

    12) Dentro del nuevo proyecto, el archivo Class1.cs que se crea, se modifica y se le

    asigna un nuevo nombre. Sobre el documento Clic derecho/Cambiar nombre.

  • 13) La modificacin del archivo, queda de la siguiente forma (imagen) . Se le asigna el nombre de ADAsignatura.

    14) Ahora vamos a agregar una nueva referencia para el funcionamiento del proyecto.

    Sobre la carpeta que dice References, damos Clic derecho/Agregar referencia.

  • 15) La nueva referencia se agrega desde una ventana que se muestra automticamente (imagen de abajo). Del apartado de Proyectos, seleccionamos BESGCA y damos clic en Aceptar.

    16) Expandimos la carpeta References para verificar si se encuentra la referencia

    BESGCA que se acaba de agregar.

  • 17) Ingresamos una nueva referencia para la funcionalidad del proyecto (imagen). Sobre la carpeta References damos Clic derecho/Agregar referencia.

    18) Del apartado .NET agregamos la referencia System.Configuration. Clic en Aceptar.

  • 19) Expandimos la carpeta de References para checar el ingreso de la nueva referencia. Por otro lado creamos tres regiones; una de Atributos, otra de Constructores y una de Mtodos para la clase ADAsignatura, e ingresamos el cdigo correspondiente.

    20) Agregamos cuatro using al archivo ADAsignatura.cs (imagen) para permitir la

    conexin y hacer referencia a otros proyectos y clases. Ingresamos los using: System.Configuration, System.Data, System.Data.SqlClient y BESGCA. Cada uno est predestinado y configurado para realizar ciertas operaciones.

    21) Asignamos el cdigo correspondiente a las regiones creadas anteriormente, cada una

    tiene asignada un nombre. Empezamos con los Atributos de la clase ADAsignatura".

  • 22) Continuamos con el ingreso del cdigo para la regin de Constructores.

  • 23) Ahora en la regin de Mtodos, se ingresa el cdigo correspondiente. Se crea el mtodo AgregarAsignatura.

    24) Se construye el mtodo ActualizarAsignatura.

  • 25) Generamos el mtodo EliminarAsignatura.

    26) Se crea el mtodo ObtenerAsignatura.

  • 27) Ahora, sobre el nombre de la solucin: SGCA, damos Clic derecho/Agregar/Nuevo Proyecto. Tal y como se muestra en la imagen.

    28) Seleccionamos las caractersticas del nuevo proyecto, optamos por la plantilla Web

    y la Aplicacin de Servicio Web de ASP.NET. Le asignamos un nombre: WSSGCA. Clic en Aceptar.

  • 29) Sobre el nombre WSSGCS del nuevo proyecto damos Clic derecho/Agregar/Nuevo elemento.

    30) Configuramos el nuevo elemento, seleccionamos la plantilla Web y el Servicio

    Web. Le asignamos el nombre de WSAsignatura. Clic en Agregar.

  • 31) Doble clic en el elemento para abrirlo. Sobre el mismo, Clic derecho/Ver marcado.

    32) Dentro del proyecto WSSGCA, en la carpeta que dice References damos Clic

    derecho/Agregar referencia.

  • 33) Del apartado de Proyectos seleccionamos las referencias ADSGCA y BESGCA. Clic en Aceptar.

    34) Expandimos la carpeta References para verificar si las referencias se agregaron

    exitosamente.

  • 35) Una vez abierto el archivo WSAsignatura.asmx ingresamos el cdigo correspondiente para las actividades a realizar.

    36) Por otro lado, necesitamos construir una Base de Datos para poder vincular el

    Servicio Web que estamos construyendo; esta contendr la informacin correspondiente a las Asignaturas que se ingresaran para su muestra. Abrimos SQL Server Management Studio y comenzamos a crearla, seleccionamos Nueva consulta, conectamos con el servidor.

  • 37) Ingresamos el cdigo que se designar a la creacin de la Base de Datos DBSGCA y a la tabla ASIGNATURA; esta a su vez integra los campos id y nombre. Seleccionamos la sentencia y la Ejecutamos, en la parte inferior se muestra el resultado de la ejecucin.

    38) En el Explorador de objetos, seleccionamos Bases de datos y damos clic en

    Actualizar.

  • 39) Agregamos otra parte de cdigo dentro de la creacin de la BD. En este caso ingresamos un procedimiento almacenado que se llama ConsultarAsignaturas, que afectar a la tabla ASIGNATURAS. Lo Ejecutamos y sobre Bases de datos; Actualizar.

    40) Realizamos la insercin de valores a los campos id: 1 y nombre: PRUEBA,

    contenidos en la tabla ASIGNATURA. Lo Ejecutamos y sobre Bases de datos; Actualizar. En la parte inferior se muestra que se afect una fila de la tabla.

  • 41) Nos regresamos al proyecto que estamos creando en Visual Studio y realizamos una nueva accin. En el men Ver seleccionamos el apartado de Explorador de servidores.

    42) Sobre Conexiones de datos, Clic derecho/Agregar conexin, seleccionamos el origen

    de los datos, en este caso estamos vinculando la BD de SQL Server, por ello elegimos Microsoft SQL Server, clic en Continuar.

  • 43) Agregamos la conexin; Origen de datos: Microsoft SQL Server (SqlClient), Nombre del servidor: (local) y Nombre de la base de datos: DBSGCA. Clic en Aceptar.

    44) En la imagen podemos observar que la Conexin de datos resulto satisfactoriamente.

    En el Explorador de servidores nos damos cuenta de que se vincul la Base de Datos DBSGCA con el Proyecto que estamos creando. Ahora sobre el Proyecto WSSGCA Clic derecho/Agregar/Nuevo elemento.

  • 45) Configuramos el nuevo elemento; seleccionamos Conjunto de datos, dejamos por defecto el nombre que tiene asignado el archivo y Aceptar.

    46) En el Explorador de soluciones, observamos que el nuevo elemento se agreg

    correctamente, lo expandimos para observar su contenido.

  • 47) Sobre el archivo Web.config doble clic para abrir. En la imagen se muestra su contenido.

    48) En la lnea 19, donde se especifica el nombre de la Base de Datos, borramos el

    anterior DBSGCAConnectionString y asignamos DBSGCA el que se encuentra en la BD que creamos en SQL Server.

  • 49) Cerramos todos los archivos abiertos y realizamos la accin de Generar solucin.

    50) Ahora, sobre el archivo WSAsignatura.asmx damos Clic derecho/Ver en el

    explorador.

  • 51) El archivo es ejecutado y se muestra en el Explorador Web.

    52) Sobre el nombre de la solucin SGCA Clic derecho/Agregar/Nuevo proyecto.

  • 53) Configuramos el nuevo proyecto. Seleccionamos la plantilla Web y su correspondiente Aplicacin web ASP.NET, le asignamos el nombre de WASGCA y Aceptar.

    54) Abrimos el archivo Default.aspx.

  • 55) En el proyecto WASGCA, tenemos la carpeta References, sobre ella Clic derecho/Agregar referencia de servicio.

    56) Se muestra automticamente una ventana que dice Agregar referencia de servicio,

    damos clic en el botn que dice Avanzadas y Aceptar.

  • 57) Aparece la ventana de Configuracin de referencia de servicio, clic en el botn Agregar referencia web y damos Aceptar.

    58) Damos clic sobre la opcin que dice Servicios Web de esta solucin.

  • 59) Se muestra la siguiente ventana, en ella damos clic en donde dice WSAsignatura.

    60) Aparece la ventana del servicio web WSAsignatura y solamente damos clic en

    donde dice Agregar Referencia.

  • 61) Se presenta un mensaje de confirmacin, para aceptar o no la nueva referencia web que se est ingresando.

    62) Como estaba abierto el archivo Default.aspx, en la parte inferior se muestra tres

    opciones Diseo, Dividir y Cdigo, actualmente nos encontramos en la seccin del Cdigo.

  • 63) Ahora cambiaremos a la seccin de Diseo, para hacer una representacin grfica de las opciones contenidas en la pgina y de cmo esta se va a observar en el Explorador Web.

    64) Del apartado de Cuadro de herramientas, en la seccin de Datos, seleccionamos

    la opcin GridView (tabla) y lo arrastramos hacia el lado derecho (seccin blanca).

  • 65) Una vez agregado el nuevo objeto, nos colocamos sobre l y damos Clic derecho/Ver cdigo.

    66) Nos abre una nueva ventana, donde podemos observar la instruccin que se crea

    automticamente al agregar el objeto, dentro de ella asignamos un cdigo para definir las acciones que realizar una vez en ejecucin. Una vez realizado lo anterior cerramos el archivo.

  • 67) Ahora, sobre el archivo Default.aspx, damos Clic derecho/Ver el explorador.

    68) Ejecutamos dicha actividad y se muestra la siguiente informacin en el Explorador

    Web.

  • 69) Seleccionamos el archivo Default.aspx, Clic derecho/Abrir.

    70) Muestra su interfaz inicial y en la parte inferior seleccionamos la opcin de Diseo.

  • 71) Del Cuadro de herramientas, de la seccin Estndar, seleccionamos un Label y lo arrastramos hacia la derecha, por debajo de la tabla que ingresamos anteriormente.

    72) Sobre la misma interfaz, damos Clic derecho/Ver cdigo.

  • 73) Automticamente nos muestra la ventana donde se crea y se ingresa el cdigo de cada uno de los objetos que se utilizan en la seccin de Diseo. Podemos observar en la imagen de abajo (parte sombreada) que se han ingresado algunas sentencias referente a las propiedades que contendr el objeto Label.

    74) Regresamos a seccin de Diseo, ahora adjudicaremos algunas propiedades al

    objeto Label. Clic sobre la opcin Default.aspx que est por debajo de la flecha.

  • 75) Una vez hecho lo anterior, sobre el objeto damos Clic derecho/Propiedades.

    76) En la opcin que dice Visible, cambiamos la configuracin que tenia de True a

    False.

  • 77) Sobre el objeto GridView Clic derecho/Propiedades.

    78) En el apartado de Eventos, en la opcin que dice DataBound; seleccionamos la

    frase que dice GridView1_DataBound.

  • 79) Verificamos si el nuevo GridView1_DataBound evento del GridView se cre satisfactoriamente. Podemos observar en la imagen (parte sombreada) que s.

    80) Abrimos el archivo WSAsignatura.asmx. Clic derecho/Abrir.

  • 81) Actualmente este archivo contiene un mtodo que se llama: ListaAsignaturas, ahora ingresaremos un mtodo ms que se llama: AlmacenarAsignatura.

    82) Tambin adjuntamos otro mtodo, este se llama: ActualizarAsignatura.

  • 83) Por ultimo ingresamos el mtodo EliminarAsignatura.

    84) Una vez finalizado el ingreso de los mtodos, verificamos si realmente estos se

    pueden observar desde el Explorar Web. Sobre el archivo WSAsignatura Clic derecho/Ver en el explorador.

  • 85) Automticamente se abre el Explorador Web y se muestra la pgina donde se pueden visualizar los mtodos que anteriormente acabamos de ingresar.

    86) Cerramos el Explorador Web.

  • 87) Abrimos el archivo Default.aspx.

    88) Una vez abierto, seleccionamos el apartado de Diseo.

  • 89) En la vista de Diseo, debajo del Label1, escribimos Agregar Asignatura. Del apartado de Cuadro de herramientas en la seccin Estndar seleccionamos la opcin Label y lo arrastramos hacia la derecha (realizamos dos veces esa accin); generamos otro objeto llamado: Label2 (sobre l, Clic derecho/Propiedades) a este, en su propiedad Text le colocamos ttulo de Nombre. Como arrastramos dos veces el Label generamos un tercero.

    90) Al Label3, al igual que el anterior (Label2), damos Clic derecho/Propiedades. En su

    propiedad Text le asignamos el nombre de Id Asignatura.

  • 91) Despus de haber ingresado los Label a la seccin de Diseo, le toca el turno a los TextBox, del Cuadro de herramientas, en el apartado de Estndar, seleccionamos y arrastramos hacia la derecha. En la imagen se puede observar en qu lugar lo colocamos, ahora sobre l, Clic derecho/Propiedades; en su apartado (ID) le asignamos el ttulo de TxtNombre.

    92) Tambin agregamos otro nuevo TextBox, al igual que el anterior, sobre l, Clic

    derecho/Propiedades, en su apartado (ID) asignamos el nombre de TxtId.

  • 93) Insertamos ahora un Button, lo seleccionamos y arrastramos hacia la derecha, en la imagen de abajo se muestra donde se coloca este objeto. Sobre l, Clic derecho/Propiedades y en el apartado de Text asignamos el nombre de Agregar.

    94) En el mismo apartado de Propiedades, en la opcin (ID) asignamos el nombre de

    BtnAgregar.

  • 95) Volvemos a agregar un nuevo Button, ahora en la parte superior de Agregar Asignatura . Igual que en el anterior, modificamos sus propiedades. En el apartado de Text asignndole el nombre de Consultar Asignatura.

    96) En el apartado de (ID) le asignamos el nombre de BtnConsultar.

  • 97) Una vez finalizado el diseo de la pgina web, que se mostrar en el Explorador. Verificamos el cdigo que se ha generado por el ingreso de los objetos. Sobre la seccin de Diseo, Clic derecho/Ver cdigo.

    98) Se muestra la ventana que contiene el cdigo de las herramientas ingresadas. En

    primer lugar aparece el mtodo Page_Load; su cdigo. que lo ejecuta lo eliminamos.

  • 99) En segundo lugar aparece el evento del botn BtnConsultar; el cdigo que quitamos del mtodo Page_Load lo agregamos dentro del botn mencionado anteriormente.

    100) Por ltimo, aparece el evento del botn BtnAgregar, ingresamos su cdigo, tal y

    como se muestra en la imagen de abajo.

  • 101) Despus de haber realizado lo anterior, ahora toca generar la solucin de todo el proyecto. Sobre el nombre de la solucin SGCA, damos Clic derecho/Generar solucin.

    102) Podemos observar en la parte inferior de la pantalla que nos dice: Compilacin

    correcta.

  • 103) Regresamos a la Base de datos que creamos anteriormente. Ejecutamos la insercin de registros en la tabla ASIGNATURA. Despus de haberlo realizado, es hora de actualizar las operaciones hechas.

    104) Regresamos al Proyecto SGCA. Sobre el archivo WSAsignatura, Clic derecho/Ver

    en el explorador.

  • 105) Automticamente se ejecuta el Explorador Web y se muestra la pgina. Podemos observar que se encuentran los cuatro mtodos declarados en el archivo WSAsignatura.asmx. Seleccionamos la opcin que dice ListaAsignaturas.

    106) Se muestra una nueva ventana, damos clic en el botn Invocar.

  • 107) Muestra la siguiente informacin, en la cual se describen las asignaturas ingresadas en la Base de Datos. Despus, cerramos el Explorar Web.

    108) Ahora, sobre el archivo Default.aspx, damos Clic derecho/Ver en el explorador.

  • 109) Se ejecuta el Explorador Web y muestra el diseo de la pgina web, tal y como la habamos creado anteriormente con las herramientas. Damos clic sobre el botn Consultar Asignatura.

    110) Al accionar la ejecucin del botn Consultar Asignatura, se muestra la tabla con la

    informacin de las Asignaturas ingresadas en la Base de Datos.

  • 111) Ingresamos una nueva Asignatura, asignamos el Nombre: Redes y su Id: 8, clic en el botn Agregar. Podemos observar en la parte inferior de la tabla que nos muestra una excepcin y no permite insertar la nueva materia, esto es a raz de que falta declarar ciertos parmetros para que esa accin se lleve a cabo.

    112) Sobre nuestro archivo ADAsignatura.cs damos Clic derecho/Abrir.

  • 113) Seleccionamos el mtodo ObtenerAsignatura() dentro de nuestro archivo, lo copiamos y pegamos por debajo del mismo.

    114) Despus de haber realizado lo anterior, modificamos ciertos parmetros dentro del

    mtodo. La asignacin del valor BEAsignatura se quita y se estipula el valor de string, en cada una de las partes antes ocupada por el elemento mencionado en primer lugar.

  • 115) Generamos la solucin para dicho archivo, as guardamos los cambios realizados. En la parte inferior de la imagen dice Compilacin correcta.

    116) Ahora, seleccionamos el archivo WSAsignatura.asmx, clic derecho sobre l, abrir.

  • 117) Dentro del archivo, seleccionamos el mtodo ListaAsignaturas() y lo copiamos.

    118) Una vez copiado, lo pegamos por debajo del mismo mtodo, tal y como se muestra

    en la imagen. Modificamos valores que antes estaban asignados con el concepto de BEAsignatura, ahora los cambiamos a string y escribimos un mensaje de excepcin.

  • 119) Generamos su solucin para verificar que no haya errores de compilacin.

    120) Cerramos los archivos antes abiertos y de manera general, sobre el nombre de la

    solucin SGCA damos Clic derecho/Generar solucin. En la parte inferior podemos observar que nos muestra Compilacin correcta.

  • 121) Sobre el archivo WSAsignatura.asmx Clic derecho/Ver en el explorador.

    122) Automticamente se ejecuta el Explorador Web, y podemos observar el contenido de

    dicho archivo. Se muestran los 4 mtodos que tenamos anteriormente, pero como agregamos el de ListaAsignaturaNombre se increment a 5. En la imagen se muestra la nueva configuracin.

  • 123) Seleccionamos el nuevo mtodo ListaAsignaturasNombre visualizado en la pgina del Explorador. Nos gua hacia otra pgina interna. Sobre el botn que dice Invocar damos clic.

    124) Muestra los nombres de cada una de las Asignaturas ingresadas en la BD.

  • 125) Regresamos a la pgina inicial. Seleccionamos la instruccin que dice descripcin de servicios y damos clic.

    126) Nos direcciona hacia otra pgina.