Elaboración de un Formulario Web utilizando ASP.NET desde cero.

Transcripción

1 Elaboración de un Formulario Web utilizando ASP.NET desde cero. Realizado por: Fabricio.A.Santillana.V

2 TABLA DE CONTENIDO Pág. Introducción...3 Objetivos...4 Contenido Introducción a ASP.NET Estructura de una página ASP.NET Directivas Bloque de declaración de código Comentarios del lado del servidor Controles Ejecución del Código Instalación del Internet Information Server Instalación de.net Framework Elección de un Entorno de desarrollo integrado Creación de la plantilla CSS Implementación de ASP.NET en el código HTML Pruebas a la aplicación Web Conclusiones...32 Webgrafía...33

3 Introducción Con el auge de las tecnologías orientadas a Internet es de suma importancia conocer el uso de herramientas que nos permitan crear páginas Webs que tengan un comportamiento parecido a aplicaciones similares a las utilizadas en un PC doméstica. Una de esas tecnologías es ASP.NET incluida como componente en la plataforma.net Framework de la corporación Microsoft. Esta tecnología permite ejecutar páginas tipo Web en forma dinámica insertando códigos que no son propios de lenguajes de hipertexto. Es una tecnología que cuenta con varios años de desarrollo y una gran variedad de documentación que no se puede abarcar con un solo documento, pero a lo largo de este se darán las generalidades para la creación de un formulario Web tan comunes en la Internet y que sea capaz de procesar la información y generar una salida. Para ello se capturara información elemental de una persona como: Nombre, Apellido, Fecha de cumpleaños, Sexo y Estado civil para luego determinar su edad en años y estado civil dependiendo del sexo. 3

4 Objetivos Objetivo Generales Adquirir información Básica acerca de la Tecnología ASP.NET Objetivos Específicos Obtener conocimiento acerca del de ASP.NET mediante el uso de herramientas propias de.net y fabricantes de terceros. Desarrollar un formulario Web capaz de procesar información y generar una salida. 4

5 Contenido 5

6 1. Introducción a ASP.NET ASP.NET es un framework para aplicaciones Web desarrollado y comercializado por Microsoft. Es usado por programadores para construir sitios Web dinámicos, aplicaciones Web y servicios Web XML. Apareció en enero de 2002 con la versión 1.0 del.net Framework, y es la tecnología sucesora de la tecnología Active Server Pages (ASP). ASP.NET esta construido sobre el Common Language Runtime, permitiendo a los programadores escribir código ASP.NET usando cualquier lenguaje admitido por el.net Framework. 1.1 Estructura de una página ASP.NET Una página ASP.NET consiste en: directiva, Bloque de declaración de código, Comentario del lado del servidor, Control y Ejecución 6

7 1.2 Directivas Las directivas especifican los valores que utilizarán la página y los compiladores de controles de usuario cuando procesan páginas de formularios Web Forms ASP.NET (.aspx) y archivos de controles de usuario (.ascx). ASP.NET trata todos los bloques de directivas (<%@ %>) que no contienen nombres explícitos de directivas como Page (para páginas) o como Control (para controles de usuario). 1.3 Bloque de declaración de código Los bloques de declaraciones de código definen secciones de código de servidor incrustadas en archivos de aplicación ASP.NET dentro de bloques de script marcados con un atributo runat="server", cuando su valor es "server", este atributo especifica que el código incluido en el bloque script se ejecuta en el servidor y no en el cliente. Este atributo es necesario para los bloques de código de servidor. 1.4 Comentarios del lado del servidor Permiten a los desarrolladores incrustar comentarios de código en cualquier parte de un archivo de aplicación ASP.NET (excepto en el interior de los bloques de código <script>). El contenido incluido entre las etiquetas de apertura y cierre de los elementos de comentarios en el servidor, ya sea texto de literales o de código de ASP.NET, no se procesará en el servidor ni se representará en la página resultante. Los bloques de comentarios en el servidor ASP.NET tienen los mismos usos que los bloques de comentarios específicos de lenguajes tradicionales, 7

8 incluidos la documentación y la comprobación. Por ejemplo, se pueden utilizar comentarios de servidor para describir secciones de marcado en un archivo o para comentar uno o más controles de servidor declarados en una página. Estos comentarios se pueden utilizar en casi todos los tipos de archivo de aplicación ASP.NET, incluso páginas Web, controles de usuario, archivos Global.asax, páginas principales y archivos de máscara. 1.5 Controles De manera predeterminada, los elementos HTML contenidos en un archivo ASP.NET se tratan como texto literal y no se puede hacer referencia a ellos en el código del servidor. Para que estos elementos estén accesibles mediante programación, puede indicar que un elemento HTML se trate como un control de servidor; para ello, debe agregar el atributo runat="server". También puede establecer el atributo id del elemento para disponer de una manera de hacer referencia al control mediante programación. A continuación, se establecen atributos para declarar argumentos de propiedades y enlaces de eventos en las instancias del control de servidor. 1.6 Ejecución del Código Esta sección es la encargada de ejecutar el código declarado en el bloque delimitado por <script>. 8

9 2. Instalación del Internet Information Server Antes de iniciar con la creación del formulario Web, mediante el uso de ASP.NET, debemos cumplir con algunos requisitos uno de los cuales es contar con el Internet Information Server ejecutándose como servidor en nuestra PC. Antes de entrar en detalles, en cuanto a la instalación del Internet Information Server también conocido como: IIS, es importante conocer acerca de Qué es el IIS? Gracias a Wikipedia es posible responder a esta pregunta. El IIS es una serie de servicios para los ordenadores que funcionan con Windows. Originalmente era parte del Option Pack para Windows NT. Luego fue integrado en otros sistemas operativos de Microsoft destinados a ofrecer servicios, como Windows 2000 o Windows Server Windows XP Profesional incluye una versión limitada de IIS. Los servicios que ofrece son: FTP, SMTP, NNTP y HTTP/HTTPS. Este servicio convierte a un ordenador en un servidor de Internet o Intranet es decir que en las computadoras que tienen este servicio instalado se pueden publicar páginas Web tanto local como remotamente (servidor web). El servidor web se basa en varios módulos que le dan capacidad para procesar distintos tipos de páginas, por ejemplo Microsoft incluye los de Active Server Pages (ASP) y ASP.NET. También pueden ser incluidos los de otros fabricantes, como PHP o Perl. Así es, el IIS convierte un PC domestica que ejecute Windows como sistema operativo en un servidor, gracias a él no será posible ejecutar el código ASP.NET de la aplicación Web. 9

10 Para instalarlo debemos tener a la mano el CD de instalación del Sistema Operativo, para efecto de este documento Windows xp Pro, dado que a la fecha de redactar este documento no se encontraba disponible para su descarga. Introducimos el CD de instalación de Windows a la unidad de CD-ROM y accedemos a Panel de control y luego a Agregar o quitar programas seleccionamos la opción Agregar o quitar componentes de Windows. Luego se desplegara un asistente que nos permite agregar como componente del sistema el IIS. Los pasos aquí mencionados se muestran en forman visual a continuación: Paso 1: Accedemos a panel de control 10

11 Paso 2: Seleccionamos la opción Agregar o quitar programas 11

12 Paso 3: Le damos clic a Agregar o quitar componentes de Windows y se desplegara un asistente. Último paso: Seleccionamos para agregar el Servicio de Internet Information Server y ejecutamos el asistente. Y listo! 12

13 Para verificar que IIS se encuentra activo abrimos nuestro navegador y escribimos en la barra de direcciones y debe cargarse un página similar a esta: 13

14 3. Instalación de.net Framework El.NET Framework es la plataforma desarrollada por Microsoft que incorpora como componente a ASP.NET necesario para el desarrollo del formulario Web que deseamos crear. Para ellos demos descargar desde el sitio oficial de Microsoft y descargar la última versión de la plataforma la cuales pueden encontrarse paquetes previos o paquete redistribuible completo. En este caso elegimos el de paquetes previos, porque, resulta mucho más cómodo, ya que, el programa de instalación analiza y determina los componentes a instalar automáticamente descargándolos desde Internet. Paso a seguir para su instalación: Paso 1: Una vez que obtenemos el archivo. Lo ejecutamos y se inicia la instalación. 14

15 Paso 2: En este punto el programa descargara desde Internet los archivos necesarios para la instalación. Si poseemos una velocidad de 56 Kbps debemos esperar cerca de 2 hras. 15

16 Paso 3: Culminada la descarga se inicia la instalación de los componentes. 4. Elección de un Entorno de desarrollo integrado Una vez instalado los principales requisitos para la elaboración de la aplicación Web en ASP.NET, IIS y.net Framework, sólo nos hace falta un editor que nos permite escribir código fuente y así completar un entorno que nos permita aplicar a ASP.NET. Para ello demos estar seguro con que requisitos debe contar el mismo, puesto que, en este punto podemos utilizar desde Bloque de Notas hasta el propio Visual Studio. Sino queremos instalar Visual Studio por requisitos tan elevados o Bloque de Notas por su simpleza extrema es posible utilizar otros, eso si, debe ser capaz de contar con soporte para ASP.NET. En este caso se utilizara Adobe Dreamweaver. 16

17 Dreamweaver cuenta con el soporte necesario para la creación de un formulario Web con ASP.NET, incluso, podemos agregarle una hoja CSS que nos permita darle estilo. Para ello sólo elegimos nuevo proyecto en el menú de archivo. Seleccionamos en tipo de página ASP.NET C# y cualquier diseño entre otros parámetros de la página que creemos. Recordemos que IIS posee soporte para varios lenguajes, por lo que, usaremos C#, de allí el porque de ASP.NET C#. En la siguiente imagen se muestra el asistente para la creación de un nuevo documento. El siguiente paso será configurar nuestro sitio para que el IIS sea capaz de ejecutar el código AST.NET. Dreamweaver despliega un asistente la primera vez que seleccionamos vista previa. 17

18 La primera parte del asistente nos solicita un nombre para el sitio y la dirección Web en ella escribimos del sitio]/. El sitio será guardado en la ruta C:\Inetpub\wwwroot, directorio virtual del IIS. El siguiente paso le indicamos al asistente que se trabajara con tecnología de servidor y le indicamos con cual seleccionando ASP.NET C# 18

19 El tercer y último paso será elegir la forma como se trabajara con el archivo. El asistente detectara automáticamente que IIS está instalado en el equipo y determinara la ruta. 5. Creación de una plantilla CSS Para la creación de un formulario en ASP.NET no es necesario el uso de una plantilla CSS, pero la misma nos permitirá dividir la página Web en secciones que nos permita una distribución más ordenada y vistosa de los distintos elementos del formulario. Para ello debemos tener en mente como queremos que luzca, es decir, un diseño que nos permita tener una noción de la distribución del los controles ASP.NET que utilicemos. Es posible que cada persona que lea este documento tenga gustos diferentes por lo que pueda que existan infinitas posibilidades para un diseño. Primero se inicia con el bosquejo o maquetación de la plantilla, mediante el uso de la etiqueta <div></div> y a cada etiqueta se le asignara un id y así dividiremos el cuerpo o <body> del documento HTML en secciones, estas seccionas aun no se le aplica el estilo necesario que es el que le dará realce a cada contenedor. 19

20 Algo similar a esto: Todos los estilos que apliquemos estarán encerrados por así decirlo, en una gran caja lo cual se le llamara contenedor, dentro de este contenedor estarán definidas el resto de las cajas: encabezado, contenido y pie de página, con los id: encabezado, contenido y pie_de_pagina respectivamente. La caja, con el id: contenido, será dividida en otras 6 secciones: Id= Sección1 : contendrá los controles Textbox para el nombre y apellido. Id= Sección2 : contendrá los controles Textbox para el día, DropDownList para el mes y Textbox para el año de nacimiento. Id= Sección3 : le dará estilo a los controles Checkbox para el sexo. Id= Sección4 : para el controles DropDownList el cual determinara el estado civil. 20

21 Id= Sección5 : mostrara un botón. Esta sección no es obligatoria dado que no es necesario asignarle un estilo a un botón, pero para contar con mayor control sobre el se ha declarado dentro de una caja. Id= desplegar : mostrara un mensaje. Aplicando lo mencionado anteriormente el código HTML tendrá un aspecto parecido a este: Ahora se aplicara el estilo, para ello utilizaremos el código CSS necesarios el cual le dará color a la cajas creadas. Si desea conocer más acerca de CSS visite la siguiente dirección: 21

22 Cuando vallamos a utilizar código CSS nos colocamos en la sección del head y bajo las etiquetas <style type="text/css"> </style> Se aplicara un color azul marino al encabezado y a pie_de_pagina. A las secciones se intercalara el color gris y blanco para que el usuario no se confunda con los distintos controles asp.net que utilicemos. Usted puede aplicar el estilo que guste y recomiendo que tome el código que se muestra a continuación y experimente con él. 22

23 Como estamos utilizando una clases debemos cambiar la etiqueta <body> por <body class="onecolelsctrhdr"> este le indica al navegador que un estilo se aplica en forma global. El aspecto que presenta la página Web será similar a este: 23

24 Ya hemos aplicado una plantilla CSS. 6. Implementación de ASP.NET en el código HTML Ahora es necesaria la aplicación de la lógica de programación que hará que el formulario funcione y así como ocurre con el diseño CSS no existen dos personas que piensen igual en cuanto a la programación dado que pueden existir muchas posibles soluciones. Como lenguaje utilizare C# por lo que recomiendo que ingresen en: Cada vez que escribimos código ASP.NET debemos indicarle al navegador que dicha sección no será ejecutada por él, sino, por el servidor para ello lo indicamos con <form runat="server" id="formulario"> </form> dicha operación. Los principales controles ASP.NET que se utilizaran el formulario son: Textbox, DropDownList y CheckBox. Su ejecución la indicamos con la etiqueta <asp:>. Por ejemplo: <asp:checkbox ID="hombre" runat="server" /> donde asp:checkbox es la ejecución del control, ID= nombre donde se almacenara el valor que retorne el control y runat="server" indicara que será el servidor quien lo ejecute. Una vez que hallamos finalizado con la implementación del ASP.NET en el cuerpo del HTML procedemos a escribir el código fuente C#, para ello indicamos con la directiva: <%@ Page Language="C#" %> antes del código HTML y con ello indicamos que lenguaje se esta usando. Seguido por las etiquetas <script runat="server"> </script> dentro de las cuales escribamos el código. 24

25 La parte C# del formulario seria similar a esta: 25

26 26

27 La parte HTML CSS y ASP.NET sería similar a esta: 27

28 28

29 29

30 30

31 El aspecto final del formulario sería: 7. Pruebas a la aplicación Web Ya hemos terminado con el formulario! sólo resta realizar pruebas al formulario, corregir errores de lógica. Recordemos que el archivo ASP.NET fue guardado del lado del servidor en la ruta C:\Inetpub\wwwroot\carpeta donde la carpeta es aquella que definimos en el punto 4. 31

32 Conclusiones ASP.NET esta basado en el modelo de programación rápida. ASP.NET permite el uso e integración de componentes ya existentes. Facilita la programación Web y las pruebas con el Internet Information Server, ya que, no es necesario hacer uso de herramientas más complejas. ASP.NET ofrece un nuevo nivel de abstracción dado que permite crear con facilidad aplicaciones Webs. 32

33 Webgrafía 1. Wikipedia. Internet Information Server [en línea]. < [Consultada: 15 de junio del 2008] 2. Wikipedia. ASP.NET [en línea]. < [Consultada: 15 de junio del 2008] 3. Microsoft. Directivas para las páginas Web ASP.NET [en línea]. < [Consultada: 14 de junio del 2008]. 4. Microsoft. Bloques de declaración de código [en línea]. < [Consultada: 13 de junio del 2008]. 33