ASP.NET. Bienvenidos a éste nuevo curso de programación en ASP.NET.

Transcripción

1

2 ASP.NET Bienvenidos a éste nuevo curso de programación en ASP.NET. ASP.NET es la siguiente versión de ASP (Active Server Pages), un producto que creó Microsoft para el desarrollo de aplicaciones y páginas Web dinámicas y que con el advenimiento del framework de.net también se incluyó dicho producto en la filiar de Visual Studio. ASP fue la alternativa que lanzó Microsoft un año después de que PHP saliera a la luz como un lenguaje del servidor que trabajaría con páginas dinámicas. En un principio el lenguaje establecido para que trabajara con el lenguaje de programación de Visual Basic Script, mientras que ASP aportaba un motor de objetos que realizaría funciones varias en la aplicación de páginas dinámicas. En el año 2001, ASP se integró con la tecnología.net lo que le permitió dar un salto cuantitativo en lo que respecta al lenguaje de programación utilizado. Ahora ASP.NET podría programarse en varios de los lenguajes de programación que incluía la solución de Visual Studio.NET; si es verdad que el lenguaje más utilizado por el 90% de los desarrolladores de ASP.NET es Visual Basic.NET. La elección del lenguaje no afectaba al motor de objetos de ASP.NET, el cual era mucho más grande, con mayores recursos y mejores objetos y funciones. La diferencia que tiene ASP con ASP.NET principalmente radica en la mejora empresarial, la potencia y el rendimiento de la segunda sobre la primera; además las páginas ASP, se compilan en el motor del servidor en cada solicitud de la página mientras que en ASP.NET solamente se compilan una vez para muchas peticiones. Además ASP.NET permite una estructura de los lenguajes que integran la página dinámica de manera que se permita establecer un código limpio y no se produzca una mezcla de lenguajes que ensucien el código. Por tanto en ASP.NET los proyectos Web se compilan estableciendo los archivos en la carpeta del servidor en diferentes marcas, como puede ser CSS, JavaScript, AJAX, XHTML, etc. El objetivo de dicho curso es aprender a utilizar las aplicaciones de tu producto Visual Studio.NET para crear aplicaciones Web que utilizarás en tus páginas de ASP.NET. Aprenderás a subir archivos, crear lógica para la programación del sistema y la estructura de la página en ASP.NET. Éste capítulo que empieza ahora te brindará la oportunidad de conocer los fundamentos del sistema ASP.NET y de cómo funciona una aplicación ASP.NET.

3 FUNDAMENTOS. Una aplicación Web está diseñada para utilizar la red mundial WWW de manera remota y online, ejecutando las instrucciones que proceden de un servidor conectado a la infraestructura de la Internet. La arquitectura básica de una aplicación Web se basa en el Cliente / Servidor, según la cual un servidor provee a un único o a varios clientes que descargarán el contenido de la Web a su ordenador. El cliente recibirá la información que le responda el servidor. El cliente puede ser cualquier dispositivo capaz de interpretar una página Web, siendo los clientes más conocidos como los navegadores Web, que reproducirán la información del servidor. La información que interpretan los navegadores Web, es un flujo de código HTML, CSS, JavaScript o XML. El servidor es el que se encarga de traducir la lógica del programa Web y enviarla al cliente en forma de código Web para que lo pueda procesar. El servidor se hará cargo de traducir código que el navegador no pueda entender por sí solo (como lo es ASP.NET y PHP) y lo convertirá en código HTML que interpretará el navegador; por lo tanto llamaremos servidor Web al servidor que se ocupa de ésta función. Entre el servidor y el transporte debe de existir un bus de datos capaz de transportar los datos desde uno a otro y viceversa. Por lo general es la Internet la que se encarga de esta función (los paquetes viajarán por diversas redes hasta llegar a su destino). Estructura de una aplicación ASP.NET Hemos indicado que en toda aplicación Web necesitamos un servidor y un cliente que muestre los resultados del servidor. Está claro que el servidor Web no realizará una interpretación correcta al cliente si en su interior no está todo el software correctamente instalado o actualizado, por lo que en el servidor deberá de existir varios programas que se comuniquen con el servidor para ejecutar la lógica de una aplicación y un programa específico que actúe de servidor Web.

4 Las aplicaciones ASP.NET los interpreta un programa conocido como Motor de ASP.NET, y que interpreta la solicitud que le manda Internet Information Server (IIS). EL motor de ASP.NET devuelve un objeto del tipo HttpRequest con toda la información de la aplicación (datos de un formulario, información del estado de la conexión, tipo de navegador, etc.). Los proyectos ASP.NET se componen de varios módulos. Cada página del sitio Web se compone de dos partes; una primera con una extensión.aspx en la cual estará contenida todo el código XHTML estático y las marcas que corresponden a los componentes utilizados en la página en cuestión y, otra con la extensión.aspx.vb, alojando el código Visual Basic correspondiente a la lógica de la aplicación. Cuando se recibe por primera vez una solicitud para una página Web, el motor de ASP.NET la compila; es decir, realiza una interpretación de la misma. Ayudándose del compilador del lenguaje utilizado, obtiene un ensamblado, es decir, un proyecto de la página Web que se aloja en memoria y que se puede ejecutar todas las veces que se quiera. El cliente siempre tendrá un resultado en forma de HTML, CSS, JavaScript sin importar la lógica de la aplicación ASP.NET.

5 Protocolo Http. Http, es el protocolo de red ubicado en la capa de aplicación de los navegadores y que utiliza conexiones TCP en un nivel de transporte OSI. La comunicación se inicia estableciendo una conexión entre el cliente y el servidor y se compartirán datos entre ambos una vez que la conexión se haya efectuado. Todos los clientes envían información al servidor a través del protocolo Http. El protocolo Http nació para permitir el acceso a las páginas Web a los navegadores a través de unas normas estipuladas: El cliente envía una solicitud al servidor acompañada de un URI. El servidor recibe la solicitud, la interpreta y procesa la información para mostrarla correctamente al cliente. El cliente recibe la respuesta. Es capaz de saber si la operación se ha resuelto correctamente y muestra la información recibida si es correcta. La solicitud Http, es siempre una solicitud enviada del cliente al servidor. Cuando un cliente envía información al servidor, éste recibe algo parecido: GET /index.htm HTTP/1.1 Host: User-Agent: Id--Navegador Siendo la primera línea la que contiene el comando que tiene que ejecutar el servidor, la página asociada, y la versión del protocolo que utiliza el cliente en el momento del envío. En la versión 1.1 del protocolo HTML, existen 8 instrucciones diferentes, como puede ser GET, POST, PUT, DELETE, HEAD Y OPTIONS. Cada instrucción realiza una acción diferente. En la segunda línea se identifica al servidor al cual se dirige la solicitud. La última línea incluye información del software del cliente que ha mandado la solicitud. Cuando el servidor recibe la solicitud, éste realiza la operación que le pide el cliente en un instante de tiempo, manteniendo el protocolo Http abierto y a la espera de respuesta. Si transcurrido un tiempo específico, el cliente no recibe una respuesta del servidor, éste devolverá un Timeout, notificando al cliente un problema con la solicitud. La respuesta del servidor si la solicitud del cliente ha sido recibida será del tipo:

6 HTTP / OK Content-Type: text/html Content-Length: nnn <html>... </html> En la primera línea se indica la versión del protocolo y se indicará mediante un código numérico si la operación ha tenido éxito. En éste caso el número 200 devuelve un OK, lo que indica que si se ha realizado la solicitud del cliente. El cliente podrá interpretar el cuerpo de la respuesta según el tipo de contenido que en el caso de la cabecera del servidor será del tipo text / html. Cuando el servidor responde al cliente, se cierra la conexión entre ambos, por lo que cualquier petición posterior deberá de abrir una nueva conexión. Para mantener información de estado entre solicitudes corresponde a la aplicación Web comportarse como tal haciendo que la respuesta mantenga la información de estado de la solicitud abierta. Pero también depende a la infraestructura sobre la que está construida, y en éste caso será de ASP.NET. ASP.NET y ViewState. En ASP.NET el estado de las solicitudes se mantiene gracias a ViewState. Con ViewState queda implicados campos ocultos, interfaces y componentes en la respuesta del servidor al cliente, lo que permite que entre el cliente y el servidor se mantenga una conexión abierta. El objeto ViewState se clasifica en tres partes:

7 El IStateManager es una interfaz, la definición de la firma (nombre, tipo de retorno y lista de parámetros) de un conjunto de métodos que pueden ser implementados por otras clases. En este caso, la implementa la clase Control y que viene definida por System.Web.UI que deriva de ASP.NET. Ésta clase obliga a la interfaz a contar con los métodos LoadViewState, SaveViewState y TrackViewState. El estado del control se mantiene bajo un objeto StateBag. La clase Page deriva de la clase Control y representa cualquier página ASP.NET. Si examinamos el código fuente que recibe el navegador de un servidor ASP.NET obtendremos siempre un formulario con un elemento oculto llamado _VIEWSTATE: <head><title>home Page</title></head> <body> <form method="post" action="default.aspx" id="ct101"> <div class="aspnethidden"> <input type="hidden" name="_viewstate" id="_viewstate" value="**************************************************"/> </div> </form> </body> EL valor oculto está codificado en base de 64 y representa el estado y el contenido de todos los elementos contenido en ella. La forma en la cual ASP.NET mantiene la conexión abierta entre solicitudes se compone: 1. Cuando llega la solicitud, el motor de ASP.NET crea todos los componentes que forman la página y establece su valor por defecto. Después se convoca al método TrackViewState de cada control, activando el seguimiento de modificaciones en sus propiedades. 2. Si el comando Http recibido ha sido POST indica que el usuario ha actuado sobre la página y que no ha sido la primera conexión entre servidor y cliente. Entonces se recibe un campo _VIEWSTATE. El motor de ASP.NET recibirá el contenido de dicho campo, lo descodificará e invocará al método LoadViewState de cada control para mantener su estado. 3. En el campo oculto recibido anteriormente _VIEWSTATE, se recibirá toda la información de los controles de la página. El usuario espera que

8 los datos introducidos se mantengan de nuevo antes de enviar el formulario si ha de volver a operar sobre ellos. 4. Ahora se comienza a la lectura del código de la aplicación, los objetos y el estado. 5. Cuando la aplicación ha terminado, el motor de ASP.NET recorre la página y todos los elementos invocando al método SaveViewState, obteniendo el estado de cada uno de ellos. En dicho estado se encuentran las propiedades modificadas en un estado inicial de TrackViewState. El conjunto de estados se volverá a codificar en base 64 y se introduce la respuesta en un campo oculto _VIEWSTATE. Resumiendo, el motor de ASP.NET interpreta el código que le manda el cliente, lo resuelve y lo traduce de nuevo a un lenguaje que entienda el navegador. Después lo vuelve a codificar modificando el estado de los objetos que incluya la página ASP.NET para una posterior conexión. DESCARGANDO EL PRODUCTO Como en otros cursos, vamos a utilizar una herramienta de trabajo específica para desarrollar páginas ASP.NET. Una aplicación Web es una estructura en la cual se insertan objetos que muestran o realizan una función exclusiva en la propia página Web dando lugar a una aplicación interactiva y online disponible a través de Internet. Las aplicaciones ASP.NET pueden crearse con simples editores de texto para la interfaz del código de diseño (HTML, CSS, JavaScript), como para el código de la lógica (Visual Basic). Recuerda que como hemos mencionado anteriormente, la aplicación Web de ASP.NET requiere de directorios o módulos que guardan los estilos, la lógica o la estructura de la página Web. Con ello estoy diciendo que podríamos realizar aplicaciones ASP.NET pequeñas para no ensuciar mucho el código Web. Aunque podremos utilizar programas de desarrollo complejos como DreamWeaver CS6 y aprovechar el servidor de Xampp instalado en nuestro sistema para probar el resultado de una página ASP.NET, me voy a decantar por la herramienta de Visual Studio.NET para la resolución de páginas ASP.NET. Desde la página de Microsoft Visual Studio te podrás bajar una versión de prueba para poder desarrollar tus programas.net y realizar páginas ASP.NET con las que incluir código de programación.net. A continuación te voy a mostrar tres caminos para realizar páginas ASP.NET, pero recuerda que en este curso yo utilizaré Visual Studio 2013 aunque puedo mostrar imágenes que proceden de otras soluciones.

9 Diseño Web ASP.NET mediante Apache XAMPP. Para usar ASP dentro del servidor Web XAMPP, deberás (obviamente), tener instalado el servidor XAMPP. Deberemos de bajarnos un módulo extra para XAMPP llamado mod_aspdotnet y que instalarás de la siguiente manera. Una vez descargado el módulo desde la página principal o desde la página de descargas de Cursosindustriales, abre la carpeta en la cual tienes instalado el Xampp. Por defecto debería de ser C:\Xampp. Dentro de ella, deberías de tener una carpeta llamada Apache, por lo que la ruta final sería: C:\Xampp\Apache Dentro de ésta última carpeta deberás de tener todos los archivos y carpetas para la configuración del servidor XAMPP. En la carpeta conf, existen otras carpetas de configuración de la aplicación. Abre la carpeta Extra que está dentro de la carpeta conf, y dentro de ella está el archivo que deberás de abrir con el editor de texto NOTEPAD, llamado httpd-xampp.conf. Es posible que si abres directamente el programa se te abra la ventana de que Windows no puede abrir la aplicación.

10 Esto no significa que no exista un programa para abrir, sino que simplemente no tienes vinculado éste tipo de archivos para la apertura con el programa adecuado. Selecciona el RadioButton Seleccionar un programa de la lista de programas instalados y se abrirá una ventana con los programas que posiblemente abrirán ese archivo. Selecciona el Notepad y pulsa sobre el CheckBox Usar siempre el programa seleccionado para abrir este tipo de archivos. Con ello se abrirá siempre el notepad al abrir éste tipo de archivos.config.

11 Entre las etiquetas <IfModule alias_module> y </IfModule> agregaremos sin eliminar el código anterior otro código: #asp.net LoadModule aspdotnet_module "modules/mod_aspdotnet.so" AddHandler asp.net asax ascx ashx asmx aspx axd config cs csproj licx rem resources resx soap vb vbproj vsdisco webinfo <IfModule mod_aspdotnet.cpp> AspNetMount /SampleASP "c:/xampp/asp_docs" Alias /SampleASP "c:/xampp/asp_docs" <Directory "c:/xampp/asp_docs"> Options FollowSymlinks ExecCGI Order allow,deny Allow from all DirectoryIndex index.htm index.aspx </Directory> AliasMatch /aspnet_client/system_web/(\d+)_(\d+)_(\d+)_(\d+)/(.*) "C:/Windows/Microsoft.NET/Framework/v$1.$2.$3/ASP.NETClientFiles/$4" <Directory "C:/Windows/Microsoft.NET/Framework/v*/ASP.NETClientFiles"> Options FollowSymlinks Order allow,deny Allow from all </Directory> </IfModule> #asp.net

12 Quedando de tal forma: Ahora solo te queda reiniciar el servidor Xampp (previamente guarda el archivo) y podrás utilizar XAMPP como servidor para ASP.NET. Ahora debemos ir a la carpeta principal de XAMPP (C:\Xampp), y crear una nueva carpeta llamada asp_docs en la cual se incluirán todos los proyectos ASP.NET.

13 Reinicia el XAMPP (en caso de que lo tuvieses abierto para coger los nuevos cambios). Visual Web Developer Express. Se trata de una herramienta gratuita de Microsoft que en su última versión incluye las capacidades de ASP.NET 4.0. La descarga de la aplicación la puedes hacer directamente desde el sitio de Microsoft o en la zona de descargas de la página de cursosindustriales.net. Visual Web Developer Express es una versión muy limitada en cuanto al uso de base de datos, pero ofrece los elementos necesarios para construir aplicaciones básicas y medianamente complejas para empezar el desarrollo de páginas ASP.NET. Antes de descargar la versión Express de Visual Web Developer 2010 deberás de tener instalado el Windows Web App Gallery, y una vez te hayas descargado e instalado el programa podrás descargarte la versión Express del Visual Web Developed. La instalación de los archivos y del programa dependerá de la velocidad de internet que tengas en tu ordenador y de los programas de Microsoft que tengas instalados en el mismo. Cuando el programa haya realizado una comprobación del sistema, comenzará la instalación y carga de producto de la plataforma Web. Pulsa sobre Opciones cuando se cargue el programa instalador.

14 Se mostrará la siguiente ventana:

15 Pulsa sobre Aceptar e Instalar y el proceso de instalación continuará y se mostrará la ventana en la cual se mostrará los archivos necesarios que descargará de Internet la aplicación para proceder a la instalación de la misma. En una instalación media, requiere de un espacio en disco de casi 1Gb y con una mala conexión puedes estar un largo rato procediendo a la instalación del programa, del servidor y de los archivos necesarios para ejecutar todo el contenido. Visual Web Developer permite implementar otros lenguajes de programación como puede ser C# o Visual Basic. Pero sin duda uno de los fallos más significativos del programa es que solo trabaja con base de datos locales y no remotos, entorpeciendo a las aplicaciones ASP.NET que trabajan con bases de datos. El entorno de trabajo de Visual Web es muy similar al IDE de cualquier lenguaje de.net.

16 Microsoft Expression Web. Simulando a la forma de trabajar del actual DreamWeaver CS6 o el antiguo FrontPage, esta aplicación está diseñada para los diseñadores Web más que para los programadores Web, ya que el entorno de trabajo es muy parecido al de los programas de desarrollo Web. Aunque prácticamente es muy similar a los anteriores, con Microsoft Expression Web no puede editarse código Visual Basic, ni ASP.NET, ni compilar, ni depurar los proyectos. ELEMENTOS DE UNA APLICACIÓN. Cuando creamos aplicaciones ASP.NET debemos de tener en cuenta de que la misma está formada por varios elementos que estableceremos. Módulos. Los módulos forman el proyecto. Enumerados en el explorador de soluciones de la aplicación que ejecute la página, los módulos dependen de una plantilla inicial utilizada para crear el proyecto y del lenguaje de programación usado en la aplicación ASP.NET, aunque se pueden crear proyectos vacíos sin cargar plantilla inicial. Con una plantilla por defecto, se cargarán varios módulos del tipo.aspx, que contienen el diseño de la interfaz y que, cada uno de ellos, lleva ligado un archivo.aspx.vb con el código asociado a esa interfaz. Página principal. Se llamará Site.master y estará acompañada de un módulo de configuración llamado Web.config para realizar cambios desde la aplicación en la que programemos en ASP.NET, y una serie de carpetas que contendrán los datos locales de la página Web como código HTML, CSS, JavaScript. La carpeta Account guardará los datos de los usuarios en el caso del registro y acceso a la Web. Desde el Explorador de soluciones del programa seleccionado podrás eliminar módulos completos o administrar nuevos elementos.

17 Módulos.aspx. Cada página Web que tenga la aplicación ASP.NET contará con un módulo con extensión.aspx, encargado de almacenar los elementos de interfaz o estilos y apariencia. A continuación se muestra una estructura básica de una aplicación ASP.NET. <%@ page title="titulo" languaje="vb" autoeventwirepup="false" codefile="default.aspx.vb" Inherits="_Default"%> <html> <body> <form runat="server"> <div> <asp:listbox ID="ListBox1" runa="server"> </asp:listbox> </div> </form> </body> </html> La primera marca es un archivo de una directiva de ASP.NET Las directivas se inician siempre mediante <%@. Ésta directiva Page identifica al módulo como una página, un objeto que deriva de la clase System.Web.Ui.Page de ASP.NET. El atributo lenguaje identifica al módulo según el lenguaje de programación usado (vb). El atributo CodeFile indica el módulo que tiene asociado ésta página y en el cual está el código de programación. Mediante el atributo Inherits, se hereda la clase de otra clase llamada _Default. El resto de código es una combinación de HTML, CSS y JavaScript. Las marcas con apertura <asp: que se usan junto al atributo runat, serán tratadas por el servidor únicamente siendo el cliente el que reciba el resultado. Módulos.aspx.vb. Cada página tiene asociada un módulo de éste tipo. El código de un módulo.aspx.vb es como se muestra a continuación:

18 Partial Class _Default Inherits System.Web.Ui.Page Protected Sub Page_load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load End Sub End Class Te explico. El código define una nueva clase llamada _Default que deriva de System.Web.Ui.Page. Observa que la página en el módulo.aspx establece su contenido. La definición de ésta clase se compondrá de variables temporales, métodos, cadenas, y operaciones lógicas que se ejecutarán al inicio de la página ASP.NET. Módulos de configuración. Todos los módulos de las páginas ASP.NET cuenta con un módulo de configuración llamado Web.config y que conlleva parámetros de configuración específicos para cada proyecto en particular. Módulos de eventos globales. Éste módulo contiene cinco métodos asociados a los eventos de inicio y finalización de la aplicación, inicio y finalización de la sesión y el tratamiento de errores. EMPEZANDO A JUGAR. Como he dicho previamente, en este curso voy a utilizar la herramienta de desarrollo de Visual Studio.NET Pero en esta parte del curso te muestro la configuración en un visual Studio 2010.Puedes bajarte otras aplicaciones y seguir el curso mientras que desarrollas con esos otros programas, pero tal vez puedas liarte un poco, aunque las versiones Express suelen compartir el mismo IDE que Visual Studio.NET. Abre el programa desarrollador.

19 Selecciona Nuevo Proyecto en la ventana principal de la aplicación. Y en la ventana que aparece selecciona Web y Proyecto Web ASP.NET.

20 Como nombre ponle Prueba o algo similar ya que es una página de prueba y no una página para subirla al servidor. Una vez que pulses Aceptar se muestra la ventana típica del IDE de desarrollo Web de Visual Studio, la cual es un reflejo de los otros programas de desarrollo Web como el Visual Web Developed de Microsoft. Como puedes ver VS.NET te muestra los archivos que ha necesitado para generar este proyecto en el Explorador de servidores. Puedes ver que está el archivo Default con extensión.aspx, el archivo Site Map y el Web Config, de los que hablamos en el punto anterior, aparte de

21 otros archivos y carpetas que servirán para guardar contenido multimedia y script de programación. Cuando pulsas sobre F5 o el icono designado para Play, se ejecuta la página Web desde el servidor propio del VS. Y acto seguido se abre la página Web en cuestión.

22 En la ventana de trabajo principal, en la zona inferior, al igual que ocurre con otros programas de desarrollo Web tienes la opción de elegir el tipo de vista para el trabajo en la ventana principal, es decir en modo de diseño, mixto o de código. Vamos a seleccionar Código para que nos muestre el código fuente de la página. Entre las etiquetas designadas mediante <%@ y su cierre %> se incluye la cabecera de la página en ASP.NET. La directiva Page hace referencia a la página ASP en cuestión e indica mediante los atributos que la acompañan el título de la misma, el lenguaje utilizado en ella, la dirección del sitio local, la manera de auto ejecutarse, y el archivo en el cual se escribirá todo el código fuente de las aplicaciones en VB que utilizará la página. El atributo de la cabecera CodeBehind establece el archivo que cargará la página ASP.NET en donde se guardará todo el código de Visual Basic.NET que utilizará la página ASP.NET.

23 El atributo Inherits, se refiere exclusivamente al archivo con el que va a trabajar ASP.NET y que está designado con la página de inicio y la clase que genera automáticamente el código de Visual Basic cuando se construye el proyecto. El atributo AutoEventWireup te permite cargar eventos desde el inicio de la página, es decir te permite cargar elementos desde el inicio o no cargarlos. Por defecto su valor es False, para que no los cargue, pero se puede cambiar a True, ya que solo admite estos dos valores. Bien aquí concluye éste primer capítulo del curso de ASP.NET. En el siguiente capítulo entraremos con detalle en las herramientas que se pueden utilizar en ASP.NET y como el IDE de Visual Studio.NET las administra y las coloca para poder ver el efecto representado en la aplicación Web. Espero que te haya servido, y que te ofrezca una oportunidad de conseguir un trabajo en el futuro. Por favor, si te planteas donar ayudarás a que esta Web siga creciendo.