Sie sind auf Seite 1von 51

Presentacin de Microsoft Web Matrix y gua para la instalacin de la herramienta y una primera prueba de uso.

Cuando alguien se inicia en una tecnologa, ya sea .NET, Java, PHP, etc., siempre se enfrenta con un primer desafo en las herramientas con las que va a tener que empezar a trabajar. Cualquiera que se haya aproximado por primera vez a Java o .NET se habr sentido al menos un poco intimidado por Eclipse o Visual Studio. Microsoft lleva tiempo intentando ofrecer herramientas sencillas que permitan a los desarrolladores iniciarse con sus tecnologas de la forma ms indolora posible. Como fruto de este esfuerzo ha nacido WebMatrix.

Introduccin a WebMatrix
Microsoft WebMatrix es una herramienta con la que podremos empezar a crear proyectos con ASP.NET de una forma muy sencilla, pero que tambin nos permitira, para aquellos cuyo dominio actual sea PHP, trabajar con esta tecnologa. Pero como no slo de frameworks vive el desarrollador, en el captulo de bases de datos tambin podremos gozar de una gran interoperabilidad, puesto que WebMatrix es capaz de manejar SQL Server Compact (un versin de SQL Server especialmente pensado para proyectos web), SQL Server e incluso MySQL, para que ningn desarrollador PHP eche de menos las herramientas a las que ms acostumbrado est. De este modo, aquellos que empiecen a utilizar WebMatrix podrn hacerlo con las tecnologas que ya conocen y, posteriormente si estn interesados en ello, crear proyectos con nuevas tecnologas sin salir del entorno que ya conocen bien. En este artculo veremos cmo instalar WebMatrix y nos familiarizaremos con la organizacin de la interfaz de la herramienta y la forma en que se utiliza.

Instalacin de WebMatrix
Actualmente Microsoft ha simplificado la instalacin de la mayora de sus productos web mediante el uso de Web Platform Installer, un programa gracias al que con un par de clicks tendremos no slo la aplicacin que queramos instalar sino las dependencias de la misma. Para utilizarlo, simplemente tenemos que navegar a www.microsoft.com/web/webmatrix/download. Desde aqu hay que pulsar sobre el botn verde Install Now para descargarnos un pequeo instalador (apenas 85KB).
Atencin: Es muy importante asegurarse de que el combo de idioma de la parte superior izquierda est configurado para mostrarnos la pgina en English (United States). La razn es que si seleccionamos Espaol, nos bajar la versin 2.0 de Web Platform Installer, en lugar de 3.0 que es la que necesitamos para poder descargarnos WebMatrix. Ojo! sobre este asunto, que es de vital importancia al menos en el momento de escribir este artculo.

La siguiente imagen nos muestra cmo es la pantalla y el combo que tenemos que configurar correctamente.

Una vez que se haya bajado Web Platform Installer y est funcionando, slo tenemos que pulsar en Products y, posteriormente, en el botn Add junto a Microsoft WebMatrix Beta 3 para seleccionarlo como descarga.

Tras pulsar sobre el botn Install nos aparecer una pantalla a modo de resumen, indicndonos las dependencias que es necesario instalar para que WebMatrix funcione. Esto incluye, entre otros, la base de datos SQL Server Compact o un cliente de la tecnologa WebDeploy, que facilita los despliegues. Aceptando se iniciar el proceso de instalacin. Cuando termine procederemos a cerrar la pantalla y arrancar, posteriormente, WebMatrix desde el enlace correspondiente en el men de Inicio. La pantalla de Web Platform Installer nos ofrece un enlace en cuyo interior podemos leer Launch, que nos permitira arrancar WebMatrix directamente desde ah. Sin embargo, debemos tener en cuenta que de hacerlo de esta forma, estaremos ejecutando WebMatrix con los permisos de Administrador de la mquina (puesto que Web Platform Installer los requiere para realizar las instalaciones que le indiquemos), lo que puede no ser nuestra intencin.

Primeras pruebas
Al arrancar WebMatrix podremos elegir siempre entre cuatro opciones.

My Sites: desde esta opcin podremos acceder a los proyectos que ya hayamos creado con anterioridad con WebMatrix. Site From Web Gallery: esta opcin nos da acceso a poder modificar con WebMatrix muchas de las aplicaciones web ms populares, como WordPress, Umbraco, DotNetNuke, etc. Site From Template: podemos usar este men si queremos crear un sitio nuevo, pero a partir de una cierta estructura. En este men tendremos, entre otras, plantillas para galeras de fotos, listas de deseos, etc. Tambin incluye un sitio vaco.

Site From Folder: con esta opcin podremos crear un sitio web a partir del contenido de un directorio ya existente, ideal si tenemos un proyecto ya creado con otra herramienta que queremos mejorar con WebMatrix.

Supongamos que queremos empezar desde cero. Tendramos que elegir la opcin de Site From Template, pulsar sobre Empty Site, darle un nombre al nuevo sitio que estamos a punto de crear y pulsar en OK. La siguiente imagen nos indica qu campos habra que rellenar para lograrlo.

Este nuevo proyecto crear una serie de ficheros y carpetas que, en caso de buscarlas, encontraremos alojadas en el directorio My Web Sites, dentro de una carpeta con el mismo nombre que le hayamos dado al proyecto web. El directorio My Web Sites podemos encontrarlo en el directorio de Documentos del usuario con el que estemos ejecutando la aplicacin. Una vez hayamos pulsado sobre el botn de OK la herramienta da paso a la pantalla principal de trabajo de WebMatrix.

pantalla principal del programa.


WebMatrix es una herramienta con la que Microsoft tiene la intencin de facilitar la vida a los desarrolladores que quieran realizar proyectos web con ASP.NET, pero que tambin admite diversas otras tecnologas. En el artculo anterior explicamos cmo se puede instalar WebMatrix y en este artculo veremos cules son los componentes de la pantalla principal que nos encontraremos al trabajar con el programa. En la pantalla principal, tal como podemos ver en la siguiente imagen, podemos distinguir cuatro zonas fundamentales.

Banda de controles superior


En la zona superior tenemos la ya clsica Ribbon que viera la luz en Office 2007 y que poco a poco se extiende por la mayora de productos de Microsoft. En esta zona tenemos dos partes bien diferenciadas: a la izquierda se sitan controles para manejar el servidor web IIS que lleva en su interior WebMatrix. Podemos, por tanto, desplegar, arrancar, parar, etc., nuestros proyectos web. A la derecha de la primera lnea vertical de divisin se sitan controles que son sensibles al contexto. Esto quiere decir que, en funcin del espacio de trabajo que estemos usando en ese momento en WebMatrix, aparecern distintos conjuntos de botones que nos faciliten acciones nicamente relacionadas con ese espacio de trabajo. Por ejemplo, cuando tengamos seleccionado el espacio de trabajo de Ficheros, los botones nos permitirn acciones como crear uno nuevo, guardar, abrir, etc.; en cambio, con el espacio de trabajo de bases de datos, los botones nos ofrecern crear una nueva base de datos, ejecutar una consulta, etc.

Espacios de trabajo de la aplicacin


En la parte inferior izquierda podemos seleccionar entre los diferentes espacios de trabajo de la aplicacin. WebMatrix es una herramienta que pretende abarcar todas las funciones que un desarrollo web tiene que realizar para poner una aplicacin web en produccin. Para mantener un conjunto de funcionalidades tan dispar accesible y organizado, los espacios de trabajo permiten mostrar y ocultar botones y mens en funcin del tipo de trabajo que queramos realizar en ese momento con el proyecto. Existen cuatro espacios de trabajo para elegir:

Site: este espacio de trabajo nos da acceso a funciones generales del sitio, como establecer una nueva configuracin de despliegue, investigar las peticiones que se han realizado a nuestro sitio alojado en el IIS embebido en WebMatrix, configurar la ruta virtual de la aplicacin, etc. Files: este espacio de trabajo sirve para gestionar los ficheros que componen nuestro proyecto, incluida su edicin. Desde aqu haremos buena parte del trabajo de desarrollo, como son editar y modificar nuestro cdigo, crear carpetas, etc. Databases: este espacio de trabajo nos permite manejar las bases de datos sobre las que van a correr nuestros sitios web. Desde aqu ser posible crear nuevas bases de datos, nuevas tablas, aadir datos, consultarlos, etc.

Reports: desde este espacio de trabajo podremos realizar funciones de SEO sobre nuestros sitios web, con el objetivo de mejorar su posicionamiento y su amigabilidad hacia los buscadores web. Pulsar en cada uno de estos espacios de trabajo har que la funcionalidad que nos ofrece la pantalla principal cambie.

Elementos del proyecto


En la parte izquierda de la ventana, sobre la seleccin de espacios de trabajo del proyecto, podemos comprobar de qu elementos se compone nuestro sitio. Esta zona es sensible al espacio de trabajo elegido, con lo que, cuando tengamos seleccionado el espacio de trabajo de ficheros, podremos ver qu archivos y carpetas componen el proyecto. En cambio, al pulsar sobre bases de datos, nos aparecern las tablas, conexiones, etc., que hemos definido hasta ese momento.

Zona central
La zona central es la zona de trabajo. Cuando abramos un elemento del proyecto, ser en esta zona donde se cargar para que podamos interactuar con l. En esta zona se nos cargar, por ejemplo, el editor de cdigo que nos permite modificar ficheros ASP, ASP.NET. PHP, HTML, JavaScript y CSS. Tambin aqu podremos interactuar con nuestras base de datos, obteniendo tanto resultados de consultas ejecutadas contra ellas, como introduciendo nuevas tuplas en ellas.

Conclusin de la presentacin de WebMatrix


Hasta el momento hemos tratado simplemente de presentar las caractersticas principales de esta herramienta de Microsoft. Hemos visto cmo instalar WebMatrix, cmo crear un primer proyecto y cmo est organizada la ventana principal sobre la que se realiza la mayor parte del trabajo. A partir de ahora nos ser ms sencillo ir aprendiendo las distintas posibilidades que WebMatrix nos ofrece para cada uno de los distintos roles que un desarrollador web termina asumiendo cuando crea un proyecto web: un poco de administrador del servidor web, un poco de administrador de bases de datos, algo de SEO y mucho de programador. En sucesivos artculos continuaremos hablando sobre esta herramienta y cmo utilizarla para hacer proyectos web.

Enlaces de referencia sobre WebMatrix


Antes de terminar esta introduccin a WebMatrix queremos ofrecer algunos enlaces donde los interesados pueden obtener ms informacin, directamente de los sitios de Microsoft. Centro de desarrollo ASP.NET: http://msdn.microsoft.com/es-es/asp.net/default.aspx Sitio Oficial de WebMatrix: http://www.microsoft.com/web/webmatrix/ Descarga de WebMatrix: www.microsoft.com/web/webmatrix/download

Iniciamos las explicaciones sobre Razor, una de las sintaxis con las que podemos crear aplicaciones web con la herramienta WebMatrix de Microsoft.
Despus de haber hablado sobre WebMatrix en anteriores entregas del Manual de WebMatrix, vamos a comenzar a poner manos en la masa y ver cmo se crearan aplicaciones web con esta herramienta. Pero antes queremos comenzar explicando una sintaxis que utilizaremos en nuestro da a da, llamada Razor, que quizs el lector no conozca todava.

Este es el primero de tres artculos que van a tratar de dar a conocer una de las sintaxis que se utiliza para crear aplicaciones web en WebMatrix. Su nombre es Razor y, originalmente, naci como opcin para programar aplicaciones web en ASP.NET MVC 3.

Motor de Vistas
Razor no es en realidad un lenguaje de programacin, sino simplemente un motor de vistas. Qu significa esto? Bsicamente, hay que analizar qu significan las siglas MVC: corresponden al trmino Modelo-Vista-Controlador, forma en que se denomina a uno de los patrones de arquitectura ms populares. En MVC se pretende separar completamente la informacin que gestiona nuestra aplicacin (el Modelo) de la forma en que se presenta (la Vista), desacoplando ambas capas mediante una capa intermedia (el Controlador) que contendr toda la lgica para trasladar los datos a la presentacin visual que deseamos realizar. ASP.NET MVC 3 respeta firmemente estos principios, hasta el punto de existir varias sintaxis con las que expresar de qu modo queremos crear nuestra vista, siendo 100% reutilizables tanto los controladores como los modelos que tengamos por debajo. De este modo han ido naciendo distintos motores de vistas, como Razor, que nos permiten crear dichas vistas de la forma en que nos sintamos ms cmodos.

Objetivos de Razor
Son varios los objetivos que Microsoft se ha marcado en la creacin de este motor de vistas, entre los que destacaramos:

Compacto, expresivo y fluido: buscan reducir la cantidad de cdigo que necesitamos para crear las vistas, evitando que tengamos que denotar de una forma especial cada lnea de cdigo procedural. El compilador ser lo suficientemente inteligente como para inferir, en muchas ocasiones, qu tipo de cdigo estamos escribiendo. Fcil de aprender: aunque esto es siempre relativo, puesto que depende del bagaje previo del desarrollador y de sus capacidades, con slo este artculo y los dos prximos dejaremos asentados conceptos lo suficientemente amplios como para hacer frente al 80% de la funcionalidad que podamos necesitar de Razor. Funciona en cualquier editor de texto, luego no vamos a tener que estar anclados a Visual Studio, WebMatrix o cualquier otra herramienta para crear nuestros ficheros Razor. Obviamente, el soporte al lenguaje es superior en una herramienta como Visual Studio, donde tendremos toda la potencia de IntelliSense a nuestro alcance, que si editamos simplemente con el Block de Notas, pero la decisin ltima ser nuestra. Testeable: podremos crear tests unitarios de las vistas.

El Hola Mundo con Razor


Vamos a hacer nuestro primer y clsico Hola Mundo con Razor. Para ello, nos vamos a apoyar en WebMatrix. En un artculo anterior vimos cmo podemos crear un proyecto vaco. Para aadir un fichero a este proyecto tenemos que situarnos en el espacio de trabajo de Files y, posteriormente, pulsar el botn New en la barra de botones superior. Al pulsar New se nos desplegarn dos opciones bajo l: New File y New Folder. Elegimos la primera puesto que slo queremos aadir un fichero. Veremos entonces aparecer una pantalla como la siguiente:

En esta pantalla simplemente tenemos que darle un nombre al nuevo fichero (algo como HolaMundo.cshtml y despus de aceptar, en el fichero que nos aparecer listo para editar, sustituir el HTML que nos crea por defecto por algo parecido a esto:
@{ var nombre = "Pedro"; } <html> <body> <h2>Hola @nombre, son las @DateTime.Now</h2> </body> </html>

Este ejemplo es algo ms complejo que el clsico Hola Mundo, pero nos permitir analizar unos cuantos detalles fundamentales de Razor. En primer lugar, como se puede ver, es posible mezclar cdigo procedural y cdigo HTML de forma sencilla y sin tener que recurrir a montones de secuencias <% como ocurre en ASP.NET clsico, o cualquiera que sea el carcter de escape que se utilice en el lenguaje al que uno est acostumbrado. Aqu, con una simple @, el compilador de Razor ser capaz de interpretar que estamos describiendo cdigo procedural, ejecutable en el servidor en el momento de mandar la pgina al navegador bajo solicitud, en lugar de HTML puro tratable como simple texto. En este ejemplo vemos dos apariciones de esta @ con la que nos iremos familiarizando cada vez ms:

En la primera llamada, @nombre, estamos haciendo referencia a una variable. Esta variable est definida en la zona superior del cdigo. Esta definicin es cdigo C#. Este detalle es

importante: en Razor todo el cdigo que no es HTML (es decir, el cdigo procedural) se puede programar en C# y en VB.NET a da de hoy.

En esta primera llamada, en el cdigo procedural, le hemos dado un valor a la variable nombre, una cadena de texto que contiene el nombre propio Pedro.

En la segunda llamada, @DateTime.Now, estamos haciendo uso de la propiedad de un objeto para obtener la fecha actual. Veremos ms adelante qu significa esto. El resultado de este bloque de informacin sera una pgina dinmica, puesto con cada nueva recarga de la misma obtendremos un saludo con la fecha en este instante. La siguiente imagen nos muestra el resultado.

Conclusiones
Hemos aprendido que Razor es un motor de vistas, hemos desgranado sus objetivos y hemos hecho un primer ejemplo, el clsico Hola Mundo pero con algo ms de funcionalidad. En los prximos dos artculos analizaremos ms en profundidad los aspectos fundamentales del lenguaje, como la definicin de clases, objetos, variables, tipos de datos, bucles, etc

sintaxis Razor
Estamos aprendiendo acerca del desarrollo de aplicaciones con WebMatrix y dedicando nuestros esfuerzos en estos momentos a aprender Razor. En el primer artculo sobre esta serie de tres dedicada a Razor conocimos que la denominacin ms correcta para Razor es la de motor de vistas, descubrimos los objetivos que busca su creacin y aprendimos a crear el clsico Hola Mundo. En este artculo empezaremos a desgranar de forma individual los aspectos fundamentales de Razor.

Los caracteres especiales: @, { } y ;


Hay tres caracteres fundamentales para Razor: la arroba (@), las llaves ({ }) y el punto y coma (;). En cuanto a la arroba, nos permite introducir fragmentos de cdigo a ejecutar en el lado del

10

servidor. Con este carcter podemos introducir sentencias inline y sentencias compuestas por una o ms lneas de cdigo. Ejemplos de cada uno de estos tipos seran:
<h1>Sentencia inline: Son las @DateTime.Now</h1> @{ var cadena = "Esto es una sentencia de una sola linea"; } @{ var otraCadena = "Esto es una sentencia"; otraCadena = otraCadena + "en multiples lineas"; }

En este ejemplo podemos ver ya la participacin de los otros dos caracteres especiales: el punto y coma y las llaves. En el caso del punto y coma, sirve para terminar cualquier sentencia que no sea inline. Las llaves, por su parte, sirven para definir bloques de cdigo, compuestos por una o ms lneas. Cualquiera que haya trabajado con lenguajes cuya sintaxis derive del lenguaje C encontrar tremendamente familiares estas reglas.

Clases y Objetos
Toda la plataforma .NET est orientada a objetos y Razor no iba a ser una excepcin. Cuando programemos con WebMatrix y hagamos uso de Razor tendremos que usar clases y objetos. No es el objetivo de este artculo explicar la Programacin Orientada a Objetos, campo suficientemente amplio como para haber inspirado centenares de libros en los ltimos 25 aos. Sin embargo, una explicacin lo ms ligera y sencilla posible no vendr mal para quienes se aproximen por primera vez a este concepto. En la POO tenemos la nocin de Clase como una forma de representar un concepto del mundo real. La clase, por tanto, va a definir comportamientos y propiedades compartidas por todos aquellos que forman parte de l. Trasladando esto al mundo real, podramos decir que Perro es una clase. Todos aquellos que forman parte de esta clase Perro compartirn en comn comportamientos como correr, comer o ladrar, y propiedades como el color, el peso o la edad. Un objeto es una instanciacin concreta de una clase. Es decir, es tomar ese molde o patrn que es la clase para crear un elemento concreto. En el mundo real esto lo podramos traducir como mi perro, el perro del vecino o el perro de la esquina. Todos ellos pertenecen a un mismo gnero, la clase Perro, y todos ellos van a correr, comer y ladrar, pero tendrn valores distintos para sus propiedades, unos sern blancos, otros ms delgados, etc. Hecho este minimalista esbozo de la relacin entre clases y objetos, en Razor vamos a tener a nuestra disposicin la programacin con clases y objetos. En el ejemplo del Hola Mundo descrito en el artculo anterior, vimos cmo, accediendo a la propiedad Now del objeto DateTime, obtenamos la fecha actual. No ser, sin embargo, la nica clase y objeto con la que nos iremos familiarizando conforme nos adentremos en la programacin con Razor. Veremos ms adelante como existen clases para gestionar la base de datos, clases para comunicarnos con servicios web tan conocidos como Twitter o Facebook, clases para gestionar la seguridad, etc. Y todas estas clases las instanciaremos en objetos concretos antes de hacer uso de ellas; es decir, antes de invocar a sus mtodos. Por ahora es suficiente con conocer esta relacin entre clases, objetos, propiedades y mtodos.

Variables y Cadenas
Las variables nos van a servir para almacenar informacin. En Razor podemos elegir entre crearlas como var para no tener que darles un tipo, o bien indicarles explcitamente dicho tipo, ya sea int

11

para enteros, string para cadenas de texto, decimal para nmeros decimales, etc. Es importante resear que los nombres que les demos a las variables son sensibles a maysculas. Es decir, no ser lo mismo una variable tabla que una variable Tabla o TABLA. Esto es, en realidad, porque toda la sintaxis de Razor es sensible a maysculas, por lo que tampoco podramos definir una variable como INT variable. Veamos algunos ejemplos:
@{ // Declaracin de variables con y sin tipo var variableSinTipo = 5; int variableConTipo = 5; int variableCONTIPO = 6; // diferente a la anterior }

En cuanto a las cadenas, se definen utilizando el carcter comillas dobles, como suele ser habitual. En caso de necesitar escapar un carcter especial, la forma de fcil es utilizar el carcter @. Ojo, no debemos confundir este carcter @ con el otro carcter @ del que hemos estado hablando hasta ahora y que sirve para definir fragmentos de cdigo en Razor. Unos ejemplos a continuacin:
@{ // Declaracion de cadenas var cadena = "Esto es una cadena estandar"; var cadenaBackslash = @"Cadena con backslash \"; var cadenaComillas = @"Cadena con ""comillas"""; }

toma de decisiones, ejecucin de bucles y el uso de colecciones de valores.

Toma de decisiones en Razor


Existen varios operadores en Razor tanto para definir distintos flujos de ejecucin en funcin de una condicin lgica. Existe un tipo concreto conocido como bool que nos sirve para definir variables que slo podrn contener uno de estos dos valores: verdadero o falso. En el siguiente fragmento de cdigo podemos ver un ejemplo:
@{ bool resultado = miObjeto.HaSidoExitoso(); if (resultado == true) { <h1>Ha salido bien.</h1> } else { <h1>Ha fallado.</h1> } }

Analicemos el fragmento. En primer lugar recogemos en la variable resultado lo que nos devuelve el mtodo HaSidoExitoso de un objeto miObjeto. Este resultado, al estar almacenado en una variable booleana, slo puede ser verdadero o falso. A partir de ah, utilizando el operador de decisin if/else, podemos mostrar en el HTML final dos posibles mensajes: uno si el resultado ha sido exitoso (valor true) y otro si el resultado ha fallado (valor contrario, false).

12

Existe otro operador de decisin, llamado switch, que nos facilitar trabajar con rangos de opciones. Por ejemplo, si el valor de un resultado es un entero de entre 1 y 3, y queremos ejecutar sentencias distintas para cada caso, podramos definir tres etiquetas case para cada uno de esos tres valores. El siguiente ejemplo nos aclara cmo hacerlo.
@{ int resultado = miObjeto.OtroMetodo(); switch (resultado) { case 1: // Codigo para el resultado igual a 1 break; case 2: // Codigo para el resultado igual a 2 break; case 3: // Codigo para el resultado igual a 3 break; default: // Codigo para resultado distinto de 1, 2 y 3 break; } }

Como vemos, por cada posible valor del resultado definimos una etiqueta case con el valor que aplica. Estas etiquetas se cierran con la instruccin break y contendrn todas las instrucciones que queremos ejecutar para ese caso. En el ejemplo, sin embargo, nos hemos limitado a definir unos cuantos comentarios (que nunca aparecern en el HTML devuelto al cliente, al igual que todo el cdigo que se ejecuta en el servidor). Por ltimo, la etiqueta default nos sirve para definir un caso por defecto en caso de que el valor de la variable sobre la que se ejecuta el switch, sea distinto a todos los considerados. Suele servir, en la mayora de casos, para realizar control de errores.

Bucles y colecciones en la sintaxis de Razor


En cuanto a los bucles, en un artculo anterior hablbamos sobre clases y objetos. Vamos a introducir un nuevo concepto: las colecciones. No son ms que lo que su propio nombre indica, colecciones u estructuras de datos que contienen mltiples objetos de un mismo tipo. Es decir, que una coleccin podr serlo de enteros, de booleanos, de cadenas de texto, pero no podr serlo de varios tipos a la vez. Ser frecuente que queramos ejecutar instrucciones repetidas sobre todos los objetos que forman parte de una coleccin. Por ejemplo, si el resultado de un mtodo es una coleccin de enteros con las edades de los usuarios de una pgina y queremos mostrar por pantalla dichos valores, lo ms prctico es iterar por esta coleccin de elementos y, para cada uno, generar el mismo fragmento HTML para visualizar su valor por pantalla. El operador principal para lograr esto es for. Veamos un ejemplo:
@{ int[] coleccion = new int[] { 1, 2, 3, 4 }; for (int i=0; i<coleccion.Length; i++) { <h1>Numero @coleccion[i]</h1> } }

13

Como se puede ver en el cdigo, en primer lugar se define una coleccin de enteros del 1 al 4. Esto se hace creando una variable coleccin cuyo tipo ser int[]. Es importante indicar que, en C# (y por ende en Razor), podemos crear una coleccin o array de cualquier tipo situando los caracteres [] tras el tipo, como en este ejemplo. Una vez creada la coleccin, la recorreremos con el operador for. Para ello, necesitamos una variable contador, que nos permite saber en qu posicin de la coleccin nos encontramos. Desde los tiempos de C, 40 aos atrs, i ha sido el nombre ms popular para este tipo de variables (seguido de j, k, l, etc.), as que sigamos la tradicin. Una vez definida la variable, tenemos que indicar el lmite del bucle con una sentencia lgica. En este caso estamos accediendo a la propiedad Length de la coleccin (no olvidemos que todo son objetos y los objetos tienen propiedades con valores que les definen, como el nmero de elementos en este caso). La ltima clusula sirve para indicar cuantos avances queremos en nuestra variable contadora al finalizar cada iteracin del bucle (el operador ++ nos sirve para indicarle que slo uno). Resumiendo, el bucle entero se leera, en lenguaje natural, as: Define una variable contador i con valor inicial 0, que no puede ser mayor que el nmero de elementos de la coleccin, y que avanza una posicin en cada iteracin Posteriormente, con el bloque de llaves definimos el cdigo que queremos ejecutar en cada iteracin del bucle. En este caso lo que estamos haciendo es, para cada iteracin, acceder a un elemento de la coleccin. Para ello utilizamos la sintaxis siguiente:
Nombre_Variable_Coleccion[Variable_Contador];

Con esta sintaxis lo que estamos haciendo es acceder a un de los elementos que compone la coleccin; en concreto, al elemento que ocupa la posicin representada por el valor de la variable contador. Como es habitual, el primero de los elementos de la coleccin ocupa la posicin 0. El resultado del fragmento de cdigo que hemos visto sera una imagen parecida a la siguiente.

14

Existen otros operadores de bucle, como While y Foreach, que dejaremos para investigacin del lector en los enlaces que se proveen en la seccin de Bibliografa.

estructurar un proyecto web desarrollado con la herramienta WebMatrix.

Estructurar el aspecto
Hoy en da cualquier sitio web se estructura de una forma ms compleja que simples pginas enlazadas las unas a las otras. Como mnimo, en la mayora de sitios nos encontramos con una cabecera y un pie compartido por cada pgina, formando una estructura esttica sobre la que se van mostrando los contenidos del sitio. Como no poda ser de otro modo, WebMatrix nos ofrece la posibilidad de recrear estas estructuras, por complejas que sean. A continuacin vamos a crear una bastante comn: una pgina maestra, una pgina de cabecera y otra de pie. Partiendo de un proyecto vaco (en un artculo anterior se vio cmo crearlos), vamos a ver cmo hacerlo. Crear la cabecera y el pie: Para empezar, nos situaremos sobre el espacio de trabajo de Files en WebMatrix. Sobre el men de espacios de trabajo veremos la estructura de nuestro proyecto. Siendo como es ste un proyecto vaco, slo aparecer el nombre del mismo. Con el botn derecho del ratn haremos aparecer el men contextual, en el que elegiremos la opcin de New Folder. A este nuevo directorio le vamos a dar el nombre de Compartido, puesto que los contenidos que en l introduzcamos van a ser compartidos por todo el sitio web. Cuando lo hayamos hecho, de nuevo con el men contextual aadiremos un nuevo fichero con la opcin New File. Nos aparecer un cuadro de dilogo similar al que podemos ver en la siguiente

15

imagen. Elegiremos CSHTML como tipo de fichero, que es el que corresponde a los ficheros HTML con sintaxis Razor en C#. El nombre que le daremos a este nuevo fichero ser _Cabecera.cshtml.

Nombrar al fichero con un signo _ delante no es casual. En WebMatrix, los ficheros con ese signo como prefijo no se pueden navegar directamente. Es decir, estos ficheros slo podrn visualizarse si se cargan como parte de otros ficheros que no tengan ese prefijo. Del nuevo fichero HTML borraremos todo el cdigo y simplemente escribiremos lo siguiente:
<div>Esto es la cabecera</div>

Repetiremos la operacin para aadir un fichero _Pie.html, que contendr el siguiente fragmento HTML:
<div>Esto es el pie</div>

Ahora que tenemos la cabecera y el pie estamos listos para crear nuestra pgina maestra. Aadimos un nuevo fichero a la carpeta Compartido de nombre _Maestra.cshtml. El cdigo de esta nueva pgina ser el siguiente:
<!DOCTYPE html> <head> <title> Titulo de la pagina </title> </head> <body> @RenderPage("/Compartido/_Cabecera.cshtml") <div id="main"> @RenderBody() </div> @RenderPage("/Compartido/_Pie.cshtml") </body> </html>

16

Analicemos este fragmento de cdigo. Puesto que va a ser la pgina contenedora de todas las dems, es necesario que defina las etiquetas html, head y body. En el interior del cuerpo estamos cargando el contenido de las pginas Cabecera y Pie que hemos creado anteriormente, utilizando el comando RenderPage, que como se puede deducir por su nombre permite renderizar una pgina como un fragmento HTML dentro de otra. Nos quedan dos pasos para poder ver el resultado: crear una pgina de contenido y enlazar en ella a la pgina maestra que acabamos de definir. Aadimos un nuevo fichero MiPrimerContenido.cshtml. Destacar que no vamos a ponerle el signo _ como prefijo, puesto que esta pgina s ser navegable. En el interior de esta nueva pgina, algo tan simple como esto:
@{ Layout = "/Compartido/_Maestra.cshtml";} <div>Esto es el contenido principal</div>

Si tenemos abierta la pgina MiPrimerContenido.cshtml, podemos navegar directamente a ella pulsando el botn Run que aparece en la banda de iconos de la zona superior de WebMatrix. El resultado debera ser algo parecido a lo que podemos ver en la siguiente imagen.

Aadir un estilo: A nivel de presentacin, no es especialmente impactante, pero estamos simplemente estructurando contenido y compartindolo. Sin embargo, desde WebMatrix tambin podemos trabajar con archivos CSS y aprovechar que su editor de cdigo nos resalta este lenguaje. Aadamos una carpeta Estilo y dentro un nuevo fichero de tipo CSS con un nombre tan original como Estilos.css. En su interior podramos definir algo muy sencillo, como esto:
body { margin: 0;

17

padding: 1em; background-color: #ffffff; font: 125%/1.75em Verdana, sans-serif; color: #006600; } #cabecera, #pie { margin: 0; padding: 0; color: #996600; font: 200%/2.00em Times New Roma; }

Ahora hagamos un pequeo cambio en el fichero _Maestra.cshtml. Vamos a enlazar en l este nuevo fichero de CSS, adems de definir un par de etiquetas div para aprovechar los estilos que hemos creado. El resultado podra ser algo as:
<!DOCTYPE html> <head> <title> Titulo de la pagina </title> <link href="@Href("/Estilo/Estilos.css")" rel="stylesheet" type="text/css" /> </head> <body> <div id="cabecera"> @RenderPage("/Compartido/_Cabecera.cshtml") </div> <div id="main"> @RenderBody() </div> <div id="pie"> @RenderPage("/Compartido/_Pie.cshtml") </div> </body> </html>

Si refrescamos veremos cmo se alteran tanto los colores como los tamaos de la pgina. De este fragmento de cdigo lo ms interesante es el mtodo @Href. Su funcin consiste en crear una URL que sea compatible con cualquier navegador, a partir de un fichero local.

Comunicacin entre pginas


Hemos visto cmo podemos ir organizando el aspecto de nuestra pgina web aadiendo distintos bloques, en forma de pginas web independientes. Sin embargo, el ser independientes puede llegar a ser un problema. Por ejemplo, supongamos que queremos modificar el Ttulo de la ventana, hacindolo de forma acorde al contenido que estamos cargando. Necesitaramos comunicar la pgina que aloja el contenido (y conoce dicho Ttulo) con la pgina Maestra, que es la nica que tiene acceso a la etiqueta <title>. La forma de lograr esta comunicacin es tan sencilla como todas las cosas en WebMatrix. Tenemos que hacer uso del objeto PageData, una coleccin de parejas nombre/valor que nos permite comunicar entre distintas pginas. En nuestro ejemplo, el primer paso sera modificar la pgina de contenido MiPrimerContenido.cshtml que aadimos anteriormente. Desde ella situaramos el valor del Ttulo, que posteriormente va a leer la pgina maestra. La sentencia para lograrlo es muy sencilla:

18

@{ PageData["Titulo"] = "Mi Primer Contenido"; }

Ahora, para consumir este valor desde la pgina maestra, que es la nica que puede establecer el ttulo, introduciramos esta sentencia:
<head> <title>@PageData["Titulo"]</title> </head>

Sencillo, verdad? Tan sencillo como potente, puesto que de este modo podremos intercambiar informacin entre pginas, al tipo que cada una se ocupa de recuperar la informacin que le corresponde.

Conclusiones
Con muy poco esfuerzo y an menos cdigo hemos conseguido definir una estructura bsica pero lo suficientemente potente como para gestionar muchos sitios web, permitiendo reutilizar una gran cantidad de cdigo. Tambin hemos visto cmo comunicar los fragmentos que componen la pgina web, para poder cargar contenido desde unos referenciado por otros.

Gestionar una base de datos con WebMatrix.

1. Introduccin
Pocas son las aplicaciones web que no hacen uso de alguna clase de persistencia de datos. Entre las distintas opciones, sin duda una base de datos es la ms habitual. En WebMatrix tenemos un muy buen soporte para gestionar las bases de datos de nuestras aplicaciones, tanto para su definicin como para la introduccin y consulta de datos. En cuanto a las bases de datos que pueden gestionarse con WebMatrix, SQL Server Compact Edition viene como opcin por defecto. SQL Server CE no es precisamente un producto novedoso, puesto que ya hace aos que salieron sus primeras versiones, eminentemente orientadas a aplicaciones en SmartPhones. Sin embargo, con WebMatrix se ha decidido dar un gran impulso a su desarrollo y reorientarla hacia un entorno ms web. Para ello, entre las novedades que presenta, destacaramos las siguientes:

Funciona perfectamente con las APIs existentes de manejo de datos, como ADO.NET, Entity Framework e incluso ORMs de terceros como NHibernate. No requiere instalacin ninguna. Simplemente hay que copiar los binarios de SQLCE al directorio bin de nuestra aplicacin ASP.NET. Se ejecuta sobre entornos "medium trust", es decir, no es necesario que el administrador de nuestro hosting nos instale SQL Server CE para poder utilizarlo en nuestras aplicaciones web. Nosotros mismos podemos hacerlo, simplemente moviendo los binarios a la carpeta bin de nuestra aplicacin web.

Diseadores grficos tanto para WebMatrix como para Visual Studio (en todas sus ediciones). En cualquier caso, SQL Server CE no es la nica base de datos que podemos utilizar. Todas las versiones de SQL Server estn soportadas, con lo que en cualquier momento podemos pasar a una base de datos ms potente si nuestra aplicacin web comienza a demandarlo.
Para la gente que est ms familiarizada con MySQL, WebMatrix tambin ofrece soporte. Por lo tanto, no quedan excusas para no utilizarlo, vengamos del entorno que vengamos.

19

2. Definir una base de datos


Antes de ver cmo podemos insertar, actualizar, borrar y consultar informacin de una base de datos, empecemos por lo ms bsico: cmo definir esa base de datos. En WebMatrix todas estas operaciones se hacen desde el espacio de trabajo de "Databases". Si nuestra aplicacin no tiene todava una base de datos, en la parte central podremos ver un enlace directo para aadir una nueva base de datos, bajo el mensaje "Add a Database to your site". Si pulsamos en l automticamente nos crear un nuevo fichero .sdf (por defecto tendr el mismo nombre que el proyecto), en la zona de la ventana dedicada a los elementos que comenten dicho proyecto. Podemos verlo en la imagen:

Una vez creada la base de datos, el siguiente paso es empezar a crear tablas en ella. Vamos a crear una primera tabla de nombre "Post". Es tan sencillo como pulsar el botn "New Table" que aparece en la barra de iconos superior.

20

Como vemos en la imagen, al crear la tabla se crea automticamente una columna. Es necesario darle un nombre a esta columna si queremos poder guardar la tabla, de lo contrario nos aparecer un mensaje de error indicndonos que es necesario cuando queramos guardar la tabla. Y si borramos la columna e intentamos guardar la tabla vaca, tampoco nos lo permitir. Para poder darle nombre a esta columna, simplemente nos dirigimos al grid de propiedades y en la seccin (Name) indicamos el valor. En la imagen anterior tambin podemos ver resaltados los controles que podemos utilizar para aadir nuevas columnas (o eliminarlas), as como establecer relaciones entre tablas cuando ya exista ms de una. Analicemos las propiedades que podemos definir para una columna y qu significa cada una:

(Name): es el nombre que queremos darle a la columna. La columna no podr guardarse si no le damos un identificador. Allow Nulls: nos sirve para indicar si permitimos que se almacenen valores nulos en la columna. Data Type: el tipo de datos que corresponde a la columna. Default Value: valor por defecto para la columna Is Identity?: sirve para indicar si la columna es identidad. SQL Server asigna automticamente un valor a las columnas identidad cuando se inserta una fila. Las columnas de clave primaria suelen ser de identidad, para poder delegar la creacin del valor de la clave. Slo aplica a columnas de tipo numrico Length: sirve para indicar la longitud de la columna, en aquellas que tenga sentido, como cuando son de tipo nvarchar.

Is Primary Key?: permite para indicar si la columna forma parte de la clave primaria de la tabla. Aadamos las siguientes columnas a nuestra tabla "Post":

PostId: columna de clave primaria y de identidad, de tipo bigint, no aceptar valores nulos. Titulo: columna de tipo nvarchar de 1000 de longitud. Contenido: columna de tipo ntext, para permitir que el contenido crezca sin lmites.

21

Fecha: columna de tipo datetime. Con esto ya tendramos nuestra tabla configurada. Para guardarla, pulsaramos el botn de Guardar o bien Control+S, lo que har aparecer una ventana emergente para introducir el nombre que queremos darle a esta nueva tabla: Post. En cuanto a las relaciones entre tablas, en este momento no es posible su creacin para bases de datos SQL Server CE. Sin embargo, es una caracterstica que se espera que est prximamente disponible. Con WebMatrix tambin podemos introducir datos en las tablas de nuestra base de datos. Basta con pulsar sobre el botn "Data" en la pestaa Table, una vez que hayamos seleccionado la tabla en la que queremos introducir la informacin. El proceso de edicin es el tpico de cualquier grid de datos. Es importante recordar que no podemos dejar sin informacin aquellas celdas asociadas a columnas que no soportan valores de nulo y que no podemos modificar las celdas de columnas de tipo identidad, puesto que esos valores son asignados por la base de datos de forma automtica. WebMatrix nos avisar en caso de introducir datos cuyo formato no se ajusta al tipo de datos definido para la columna, evitando as que cometamos errores. En la imagen podemos ver unas cuentas filas introducidas a travs del editor de WebMatrix en la tabla "Post" creada anteriormente.

Autor: columna de tipo nvarchar de 100 de longitud. Permitiremos valores nulos en ella.

22

introducir y consumir informacin en nuestras bases de datos.

1. Introducir informacin
Partiremos de la tabla Post que creamos en el artculo anterior y veremos cmo introducir datos en ella mediante cdigo, que es el procedimiento que habitualmente seguiremos. Para ello, vamos a crear una pgina nueva, "Postear.cshtml", que servir para introducir un nuevo post en la base de datos. El cdigo de esta pgina sera algo parecido a esto:
@{ Layout = "/Compartido/_Maestra.cshtml"; PageData["Titulo"] = "Postear"; if (IsPost) { var db = Database.Open("Mi Blog"); var sentenciaInsercion = "INSERT INTO Post (Titulo, Contenido, Autor, Fecha) VALUES (@0, @1, @2, @3)"; db.Execute(sentenciaInsercion, Request["titulo"], Request["contenido"], Request["autor"], DateTime.Now.ToString()); var id = db.GetLastInsertId(); Response.Redirect(@Href("/MostrarPost?PostId=" + id)); } } <form method="post" action=""> <table> <tr> <td><label>Titulo</label></td> <td> <input type="text" name="titulo" size="52" value="@Request["titulo"]"/> </td> </tr> <tr> <td><label>Contenido</label></td> <td> <textarea name="contenido" rows="15" cols="40" value="@Request["contenido"]"></textarea> </td> </tr> <tr> <td><label>Autor</label></td> <td> <input type="text" name="autor" size="52" value="@Request["autor"]"/> </td> </tr> <tr> <td> <input type="submit" value="Publicar" /> </td> </tr> </table>

23

</form> Empecemos analizando el HTML. Se compone de una tabla con 3 campos para introducir ttulo, contenido y autor, ms un botn para procesar la informacin. Cuando pulsemos el botn, el posteo se realizar sobre la propia pgina, y ah entrar en juego el cdigo que hemos definido en la parte superior.

Analicemos cada uno de los pasos que estn descritos y qu mtodos estn involucrados: En primer lugar, definimos que slo se ejecutar este cdigo si la peticin a la pgina se ha realizado mediante HTTP-POST, al estar comprobndose a variable "IsPost", que nos indica si hemos llegado a la pgina mediante una peticin de este tipo. 2. En caso de que estemos ejecutando una peticin por POST, abrimos una conexin con la base de datos mediante el mtodo Open de la clase Database, pasndole como parmetro el nombre de dicha base de datos. Un detalle, la clase DateTime contiene una propiedad "Now" que nos devuelve la fecha de ese instante, ideal para poder indicar en qu momento hemos insertado el post. 3. Una vez abierta la conexin, escribimos la sentencia SQL que queremos ejecutar y se la pasamos al mtodo Execute, junto con los parmetros que hemos definido en dicha sentencia. Estos valores los obtenemos de Request, que es donde los hemos situado con el HTML que acompaa a la pgina (campos "value" de las etiquetas input y textarea) 4. Recuperamos el ID que la base de datos nos ha generado para esta nueva fila en la tabla Post. Recordemos que hemos definido la columna PostId como identidad en nuestra tabla, lo que significa que SQL Server CE se encargar de generar un valor para ella con cada nueva insercin. 5. Por ltimo, realizamos una redireccin a una pgina pasndole como parmetro este id. Utilizamos el mtodo Href para calcular la URL de una forma independiente del navegador que est renderizando la pgina, y recurrimos a Response.Redirect para hacer efectiva la redireccin. Idealmente, la pgina MostrarPost se encargara de ensearnos el resultado de la informacin que hemos introducido, ya convenientemente formateada. Para ello, deberamos recuperar de la base de datos la informacin previamente insertada. Veamos cmo podramos hacer eso. 1.

2. Consultar informacin
Necesitamos poder leer informacin en las tablas de nuestra base de datos, as como mostrarla a travs de un fragmento de cdigo HTML. A continuacin un ejemplo de ambas necesidades combinadas para generar una pgina con informacin dinmica.
@{ var db = Database.Open("Mi Blog"); var consulta = "SELECT Titulo, Contenido, Autor, Fecha FROM Post WHERE PostId = @0"; var postInfo = db.QuerySingle(consulta, Request["PostId"]); } <h1>@postInfo.Titulo</h1> <h3> publicado el @postInfo.Fecha por @postInfo.Autor</h3> <div style="border: .2em dotted #900; width:350"> @postInfo.Contenido </div>

El HTML de nuevo es lo ms sencillo posible, puesto que no es objeto de estos artculos poner el acento sobre cmo realizar una pgina web vistosa. Como se ve, mostramos la informacin que

24

contiene un objeto llamado postInfo; en concreto, los campos Titulo, Fecha, Autor y Contenido. Pero, cmo hemos obtenido este objeto postInfo? Echemos un ojo al cdigo en la parte superior. En primer lugar, abrimos una conexin a la base de datos y creamos una sentencia SQL como ya hemos aprendido en la seccin anterior. La diferencia es que ahora no vamos a ejecutar sino consultar nuestra base de datos. Existen tres mtodos distintos para realizar esta operacin:

Query: ejecuta la sentencia y devuelve una coleccin de resultados. Podremos iterar por todos ellos utilizando el operador "foreach", que nos devolver una fila cada vez hasta recorrer entera la coleccin. QueryValue: nos devuelve un valor nico. Es ideal, por ejemplo, si nuestra consulta tiene que devolvernos el nmero de filas que cumplan una condicin, o el valor que suman todas ellas para una columna concreta.

QuerySingle: es el mtodo que estamos ejecutando y sirve para devolver un nico registro. En nuestro caso, al estar buscando por el ID, sabemos que slo habr una fila que cumpla este criterio (o ninguna, algo a tener en cuenta puesto que en tal caso nos devolver un valor nulo). Ya sabemos que nuestra fila est contenida en el objeto postInfo. No es difcil imaginar que, dinmicamente, nuestro cdigo es capaz de inferir cmo se llaman las columnas que queremos consultar y crea propiedades en este objeto, para que podamos acceder a los valores concretos de esta fila por sus nombres, en lugar de tener que utilizar engorrosos ndices basados en la posicin de la columna, algo mucho ms propenso a errores y menos legible. El resultado de nuestra pgina MostrarPost.cshtml podemos verlo en la siguiente imagen:

En este artculo aprenderemos cmo utilizar los mecanismos de seguridad que ASP.NET WebPages nos ofrece y cmo podemos hacer uso de ellos desde WebMatrix.

25

Este es el primero de los artculos dedicados a la seguridad en el desarrollo bajo WebMatrix, que estamos viendo dentro del Manual de Microsoft WebMatrix. En esta primera parte veremos cmo crear la infraestructura para registrar usuarios, es decir, crear la tabla en la base de datos y el formulario de registro de usuarios. En la segunda parte dedicada a la seguridad, repasaremos de cmo forma podemos autenticarnos y autorizar en base a estos mecanismos.

1. Crear base de datos de usuarios


Antes de pretender realizar ninguna clase de autenticacin, es necesario que tengamos una base de datos contra la que poder realizar esta operacin. En ella deberemos guardar informacin sobre los usuarios y sus roles, para poder autorizar ciertas acciones en funcin de la pertenencia del usuario a ellos. En WebMatrix no puede ser ms sencillo crear esta base de datos. WebSecurity es el helper que nos va a acompaar durante ste y el siguiente artculo, pieza central sobre la que gira toda la seguridad. Esta clase nos ofrece un mtodo llamado InitializeDatabaseConnection, que servir para definir las tablas que respaldarn nuestro sistema de seguridad. Esta llamada debemos hacerla slo una vez y debe hacerse antes que cualquier otro proceso de carga, por razones obvias. Pero, dnde podramos realizarla para asegurarnos que no se realiza ms de una vez y que las tablas estn listas antes de estarlo, prcticamente, la propia aplicacin? La respuesta es sencilla: en el archivo _AppStart.cshtml. Este fichero permite definir procesos y acciones que queramos que se realicen antes de ejecutarse ninguna pgina web, permitindonos establecer valores globales (como podran ser claves compartidas por todas las pginas) o ejecutar procesos que son necesarios antes de arrancar la aplicacin, como ste que estamos explicando. Para ello, aadiremos una nueva pgina _AppStart.cshtml en la carpeta raz de nuestro proyecto e introduciremos en ella el siguiente fragmento de cdigo:
@{ WebSecurity.InitializeDatabaseConnection( "Mi Blog", "Usuario", "UsuarioId", "Nombre", true); }

Vamos a analizar cada uno de los parmetros que pasamos a esta llamada:

El primero es el nombre de la base de datos donde se van a crear las tablas relacionadas con la seguridad. El segundo es el nombre de la tabla que va a contener los usuarios El tercero es el nombre de la columna que va a servir de identificador para cada una fila El cuarto es el nombre de la columna que va a contener el nombre del usuario.

El quinto nos sirve para indicarle a la llamada que debe crear las tablas por nosotros. En caso de que ya tuviramos unas tablas para la seguridad de nuestra aplicacin, deberamos pasar "false" en este parmetro. Una vez ejecutada correctamente esta sentencia, vamos a poder ver mediante el espacio de trabajo de "Databases" que hay cuatro tablas nuevas en nuestra base de datos. El siguiente diagrama muestra estas tablas y sus campos:

26

Como vemos, se ha creado una tabla Usuario. Esta tabla podra ser una tabla que utilizramos para almacenar informacin extra sobre cada uno de nuestros usuarios, como direcciones de correo, fsicas, datos personales, etc. Est conectada con la verdadera tabla de usuarios, desde el punto de vista de la seguridad, que es la tabla Membership que contiene un buen nmero de campos relacionados con la contrasea y su gestin. Tambin se crea una tabla "Roles", para poder gestionar en qu roles queremos tener a nuestros usuarios y poder darles acceso o no a recursos y operaciones en funcin de su pertenencia. Ambas tablas estn conectadas a travs de la tabla intermedia UsersInRoles. Es, en conjunto, un modelo sencillo y fcilmente comprensible.

2. Registrar usuarios
Ya tenemos nuestra base de datos lista para almacenar nuevos usuarios y permitirnos posteriores operaciones de autenticacin y autorizacin. Sin embargo, lo primero ser facilitar a los visitantes a nuestro sitio web registrarse como usuarios. Para ello deberamos crear una pgina "Registrar.cshtml" desde la que los usuarios puedan introducir su nombre y su contrasea. Un ejemplo de cdigo lo ms sencillo posible sera el siguiente:
@{ if(IsPost) { var sentenciaInsercion = "INSERT INTO Usuario (Nombre) VALUES (@0)"; var db = Database.Open("Mi Blog"); db.Execute(sentenciaInsercion, Request["nombreusuario"]); WebSecurity.CreateAccount(Request["nombreusuario"], Request["password"]); } } <form method="post" action=""> <fieldset> <legend>Registrarse como usuario</legend> <div> <label for="nombreusuario">Nombre:</label> <input type="text" name="nombreusuario" value="@Request["nombreusuario"]"/> </div> <div> <label for="nombreusuario">Clave:</label> <input type="password" name="password" value="@Request["password"]"/>

27

</div> </fieldset> <div><input type="submit" value="Registrarse" /></div> </form>

El cdigo HTML es lo suficientemente sencillo como para no necesitar mayores comentarios. En cuanto al cdigo en la parte superior, podemos ver que se realizan dos operaciones. En primer lugar, se inserta el nuevo usuario en la tabla Usuario. Una vez que ya tengamos una nueva fila en Usuario podremos proceder a registrarle en nuestras tablas de seguridad, con la llamada WebSecurity.CreateAccount, a la que le pasaremos el nombre y la contrasea. A esta llamada podemos pasarle tambin un booleano para indicar si queremos que el usuario no sea efectivo hasta estar confirmado. En caso de hacerlo as, la llamada a WebSecurity.CreateAccount nos devolver un token. Dicho token sera necesario enviarlo por correo al usuario que se acaba de registrar, para que posteriormente procediera a confirmar el registro pasndole, a la pgina correspondiente, dicho token y realizando nosotros una llamada WebSecurity.ConfirmAccount con el token como nico parmetro. Sin embargo, en aras de la sencillez, vamos a dejar el registro tal cual, sin necesidad de realizar una posterior confirmacin con ese token.

En este segundo artculo dedicado a la seguridad en aplicaciones desarrolladas con WebMatrix aprenderemos cmo gestionar la autenticacin y autorizacin de usuarios.

1. Autenticarse
En el anterior artculo aprendimos cmo registrar nuevos usuarios. Una vez hecho eso, el siguiente paso es permitir que se autentiquen en nuestra aplicacin para darles acceso a mayores privilegios. Para ello crearamos una pgina "Loguear.cshtml" para proceder a la autenticacin que podra tener un cdigo como el siguiente:
@{ if(IsPost) { if(WebSecurity.Login( Request["nombreusuario"], Request["password"]) == true) { <text>Usuario autenticado</text> } else { <text>Autenticacin fallida</text> } } } <form method="post" action=""> <fieldset> <legend>Loguearse como usuario</legend> <div> <label for="nombreusuario">Nombre:</label> <input type="text" name="nombreusuario" value="@Request["nombreusuario"]"/> </div> <div> <label for="nombreusuario">Clave:</label>

28

<input type="password" name="password" value="@Request["password"]"/> </div> </fieldset> <div><input type="submit" value="Loguear" /></div> </form>

La parte del cdigo HTML es prcticamente idntica a la que veamos en el anterior artculo. En cuanto al cdigo procedural, se realiza una llamada al mtodo Login del helper WebSecurity. Este mtodo acepta como parmetros el nombre de usuario y la contrasea, ms un parmetro opcional de tipo booleano que sirve para indicar si queremos que la aplicacin web nos recuerde, mediante el establecimiento de una cookie. La llamada devolver un booleano para indicarnos si hemos sigo correctamente autenticados. Como vemos, mediante las etiquetas "" podemos definir un mensaje directamente en el cdigo HTML de la pgina, con un resultado como el que se puede ver en la siguiente figura:

Con esto completaramos la funcionalidad necesaria para realizar autenticaciones, pero nos faltara la parte de la autorizacin, es decir, asegurarnos de que un usuario tiene los permisos necesarios para poder acceder a un recurso o funcionalidad. Veamos cmo hacerlo.

2. Autorizacin
El proceso habitual de autorizacin consiste en tres pasos: 1. 2. 3. 4. Comprobar las credenciales. Si existen, se le da acceso al recurso. Si no existen las credenciales, se le pide al usuario que se autentique. Se le redirige a una pgina de forma automtica para que pueda autenticarse. Una vez que se ha autenticado correctamente, se le redirige al recurso que inicialmente quera acceder.

29

Veamos cmo podemos reproducir este proceso con WebMatrix. En primer lugar, necesitaramos una pgina para hacer la autenticacin como la que hemos creado antes. En segundo lugar, necesitaramos crear una pgina que tuviera control de acceso. Vamos a aadir una pgina "Comentar.cshtml" que permita dejar un comentario en un post. Para poder comentar, vamos a requerir que el usuario est autenticado. Una primera aproximacin al cdigo sera algo as:
@{ if (WebSecurity.IsAuthenticated == false) { Response.Redirect("/Loguear?UrlRetorno=/Comentar"); } else { if(IsPost) { /* Insertar en BD el comentario */ var db = Database.Open("Mi blog"); string sentenciaInsercion = "INSERT INTO Comentario (Autor, Contenido, Fecha, PostId) VALUES (@0, @1, @2, @3)"; db.Execute( sentenciaInsercion, WebSecurity.CurrentUserName, Request["comentario"], DateTime.Now.ToString(), Request["postid"].AsInt()); } } } <form method="post" action=""> <fieldset> <legend>Comentar el post</legend> <div> <label>Post ID</label> <input type="text" name="postid" value="@Request["postid"]" /> </div> <div> <label>Comentario</label> <textarea name="comentario" rows="15" cols="40" value="@Request["comentario"]"></textarea> </div> </legend> </fieldset> <div><input type="submit" value="Comentar" /></div> </form> En el cdigo HTML recogemos los dos datos que necesitamos: el identificador del post al que vamos a enlazar el comentario y el contenido del comentario. Podramos no requerir este identificador si enlazramos la pgina de comentarios desde la pgina del post, pero no es objeto de este artculo entrar en este tipo de complejidades.

En cuanto al cdigo procedural, podemos ver que el primer paso es comprobar si el usuario est autenticado. De no estarlo, se realiza una redireccin automtica a la pgina de Logueo, pasando como parmetro la URL a la que queremos que se retorne una vez se haya completado satisfactoriamente la autenticacin. En caso de que el usuario s est autenticado y hayamos llegado a la pgina por HTTP-POST (por ejemplo, tras pulsar el botn de "Comentar", introducimos el comentario en la base de datos.

30

Destacar que utilizando el helper WebSecurity tenemos acceso a mucha informacin sobre el contexto de seguridad. Algunos de los mtodos ms destacados seran:

WebSecurity.ChangePassword: nos permite cambiar el password para un usuario determinado. WebSecurity.CurrentUserId y WebSecurity.CurrentUserName: nos devuelve el id y el nombre del usuario actualmente autenticado. WebSecurity.Login y WebSecurity.Logout: como su nombre indica, autentica o revierte la autenticacin del usuario, volviendo a ser un usuario annimo.

En este artculo iremos desgranando algunos de los Helpers sociales que dispone WebMatrix, para integrar las aplicaciones web desarrolladas con servicios de la web 2.0, como Facebook, Twitter, Delicious, etc.
Todos conocemos, a estas alturas, de la importancia de integrar correctamente nuestras aplicaciones web con lo que se ha dado en llamar la Web 2.0. Facebook, Twitter, Delicious, Google Buzz, etc., son algunos de los servicios de la web social que es importante tener presentes en nuestros sitios, puesto que nos proporcionan visibilidad e informacin valiosa. WebMatrix, en su afn por simplificar el desarrollo de sitios web, ofrece un gran nmero de clases Helper para facilitarnos trabajar con este tipo de servicios con apenas un par de lneas de cdigo.

1. Twitter
Cada vez quedan menos sitios web que no tengan su propia cuenta en Twitter, desde la que ofrecer enlaces a la informacin que van publicando, dialogar con los usuarios, etc. Tener presencia en Twitter e integrar dicha presencia en el sitio web, viene a ser un todo en uno. En la gran mayora de los casos, la presencia de Twitter en el sitio web se realiza mediante la integracin de uno de los controles de timeline que nos ofrece la propia web de Twitter. La integracin es sencilla, basta con copiar y pegar un trozo de cdigo relativamente grande en nuestras pginas. Sin embargo, que sea relativamente sencilla y rpida no significa que sea ni elegante ni cmoda, puesto que estamos introduciendo algo totalmente ajeno en nuestro desarrollo. Sera, por tanto, mucho ms deseable hacer esa integracin con cdigo propio. Aqu es donde aparece WebMatrix y uno de sus Helpers para ayudarnos: el helper Twitter. Este helper tiene dos mtodos principales con los que poder trabajar:

Profile: este mtodo recupera la informacin especfica para una cuenta determinada. Sus parmetros, adems del nombre de la cuenta, sirven para personalizar el aspecto que va a tener la caja en la que se presenta la informacin.

Search: este mtodo sirve para mostrar la informacin relacionada con una cadena de bsqueda, dentro de Twitter. Al igual que el mtodo anterior, tiene un gran nmero de parmetros que sirven para personalizar el aspecto de la caja que muestra los resultados. Veamos un ejemplo de uso rpido. Imaginemos que tenemos una aplicacin con una barra lateral y queremos mostrar en ella la informacin relacionada con una cuenta de Twitter. El fragmento de cdigo que necesitaramos sera algo como lo siguiente:
<h4>Barra lateral</h4> @Twitter.Profile("deswebcom")

31

Como podemos ver, una y nada ms que una lnea de cdigo necesitamos para integrar correctamente Twitter en nuestras pginas. Si quisiramos, en lugar de mostrar un perfil concreto, hacer una bsqueda la forma sera la misma, salvo que llamaramos al mtodo "Search". El resultado, en ambos casos, sera algo parecido a la siguiente imagen.

Ambos, como ya comentbamos antes, pueden recibir una serie de parmetros opcionales que sirven para personalizar el aspecto de la caja. En la bibliografa se pueden encontrar enlaces a pginas en las que se enumeran estos parmetros as como su uso.

2. Facebook
Junto con Twitter, la otra red social por excelencia a da de hoy. En este caso, el Helper que tenemos a nuestra disposicin nos permite aadir el famoso botn "Me Gusta". Este Helper, llamado como es obvio "Facebook", tiene un nico mtodo Like. Este mtodo tiene 6 parmetros opcionales. Aparte de los habituales relacionados con el aspecto, estos son los ms relevantes:

Url: el primer parmetro nos permite modificar la url que el usuario va a indicar que le gusta. Por defecto, la url ser la de la pgina que contiene el botn. Action: podemos cambiar la accin por defecto, "Me gusta", por una como "Recomiendo", mediante este parmetro.

ShowFaces: nos sirve para para indicar, mediante un booleano, si queremos que se muestren las caras de aquellas personas que ya han indicado que les gusta este mismo tem. Un ejemplo de cdigo con varios botones mostrando los valores para los distintos parmetros:
<div> <br/> @Facebook.LikeButton("http://www.desarrollo.com") <br/> @Facebook.LikeButton(

32

url: "http://desarrolloweb.com", action: "recommend", width: 350, layout: "button_count", showFaces: true) <br/> @Facebook.LikeButton( url: "http://desarrolloweb.com", width: 350, layout: "box_count", showFaces: true) <br/> @Facebook.LikeButton( url: "http://desarrolloweb.com", width: 350, showFaces: true, colorScheme: "dark") </div>

Y una imagen sobre el aspecto que van a tener los distintos botones.

3. Enlaces para compartir


Existen bastantes agregadores de webs, sitios de enlaces, pginas de Microblogging, etc., desde las que nuestros usuarios se pueden hacer eco de los contenidos de nuestras aplicaciones web. Hacer uso de estos enlaces tambin resulta tan sencillo como los ejemplos que hemos visto hasta ahora de integracin con otros servicios de la web 2.0, como Facebook o Twitter. Esta integracin de enlaces de comparticin se hace mediante el Helper LinkShare, que nos genera automticamente enlaces a los siguientes sitios: Delicious, Digg, Google Buzz, Facebook, Reddit, StumbleUpon y Twitter. Slo tiene un mtodo que podamos invocar, "GetHtml", y un nico parmetro obligatorio: el ttulo de la pgina, para que conste en algunos sitios que lo pueden necesitar (como Delicious, por ejemplo).

33

El resultado sera una ristra de botones similares a la siguiente imagen:

Y si pulsamos, por ejemplo, en el botn de Twitter nos conectar a Twitter.com y tras loguearnos nos crear automticamente un twitt para compartir el enlace como se muestra en la siguiente imagen.

4. Bing
El ltimo servicio que podemos consumir no es exactamente "social", pero no por ello deja de resultar til conocer las posibilidades que su Helper nos ofrece. Se trata del buscador Bing, con cuyo Helper podremos realizar bsquedas de forma sencilla. Este Helper expone dos mtodos: SearchBox y AdvancedSearchBox. En cuanto al primero, puede recibir dos parmetros, la url del sitio y el ancho de la caja, ninguno de los cuales es obligatorio. Un ejemplo de su uso de ambas cajas en cdigo sera ste:
<div> <br/> @Bing.SearchBox() </div> <div> <br/> @Bing.AdvancedSearchBox() </div>

El resultado sera la clsica caja con un botn a la derecha en forma de lupa, con fondo naranja. Si utilizamos dicha caja para realizar una bsqueda, se nos abra una nueva ventana en la que podremos navegar por los resultados de Bing para ese trmino. Sin embargo, mucho ms espectacular es la opcin de bsqueda avanzada, puesto que aunque la caja es idntica, al buscar no se nos abrir una nueva ventana, sino una especie de popup enganchado a la caja que nos mostrar los resultados, sin salir de nuestro sitio web. En la siguiente imagen se puede ver esta ventana emergente conteniendo los resultados de bsqueda para el trmino "Prueba".

34

En lo relativo a la denominada Web Social, lo ms rpido, simple y funcional, se puede obtener con la ayuda de los ASP.NET Web Helpers.
A lo largo del artculo veremos el soporte, que si bien muy variado en cuanto a potencial, nos da en los siguientes mbitos de acceso a sites, blogs, foros, : 1. 2. 3. Twitter FaceBook LinkShare o Delicious (del.icio.us) o Digg o Google Buzz (Google Reader) o FaceBook o Reddit! o Stumble it! o Twitter Bing

4.

Instalacin de ASP.NET Web Helpers Library


Iniciamos en WebMatrix un nuevo proyecto basado en una plantilla (Template).

35

Seleccionamos una plantilla de tipo Sitio vaco y le damos un determinado Site Name (optamos en nuestro ejemplo porque sea WebHelpers). Finalmente hacemos clic sobre el botn OK.

36

Ya en la vista de Site en el entorno de desarrollo de WebMatrix, vemos en el panel de la derecha un enlace a ASP.NET Web Pages Administration, hacemos clic sobre l y esto nos llevar a una ventana del explorador de Internet en dnde podremos realizar las correspondientes tareas administrativas. Entre ellas, se encuentran la gestin de los denominados Web Helpers, que es lo que nos interesa ms inmediatamente.

37

Dado que es la primera vez que acudimos a las labores de administracin en ste proyecto, se nos pide que creemos una contrasea y la confirmemos. Tras lo cual deberemos hacer clic sobre el botn Create Password, que ya se encontrar activo.

38

En el siguiente paso se nos informa que deberemos llevar a cabo inmediatamente una labor previa en el entorno de desarrollo de WebMatrix y hacer clic donde se indica en el texto (Clic here). Volvemos temporalmente al entorno de WebMatrix.

39

En el entorno de desarr &nsbp; &nsbp;&nsbp;ollo de WebMatrix, si no lo estamos ya, deberemos ir a la vista Files, haciendo clic sobre la entrada en el panel inferior izquierdo. En el esquema de carpetas y archivos del Site, pulsamos con el botn derecho del ratn sobre el ttulo superior (el nombre del proyecto, WebHelpers en nuestro caso) y hacemos clic sobre Refresh, para asegurarnos que se reflejan los cambios del sistema que debieron haberse producido ltimamente. Finalmente localizamos el archivo _Password.config, dentro de la nueva carpeta Admin, dentro de App_Data y lo renombramos a Password.config. Ntese, sin la barra de subrayado inicial, es fundamental ste leve cambio.

40

41

Volvemos al explorador de Internet y nos disponemos a iniciar sesin en el ASP.NET Web Pages Administration. Escribimos la contrasea que habamos creado y hacemos clic sobre Login.

Tras unos instantes se nos mostrar un listado de todos los paquetes instalables. En condiciones generales, navegaramos en bsqueda del deseado o utilizaramos la opcin Search.

42

En ste caso concreto el ASP.NET Web Helpers Library, en su ltima versin, es el primero mostrado. Hacemos clic sobre el botn Install que se encuentra inmediatamente a su derecha.

43

En ste caso concreto el ASP.NET Web Helpers Library, en su ltima versin, es el primero mostrado. Hacemos clic sobre el botn Install que se encuentra inmediatamente a su derecha.

44

Se nos pedir confirmacin para la instalacin. Lase detenidamente que en efecto es ese el paquete deseado y prosgase haciendo clic en el botn Install.

45

Al final ya podremos cerrar la sesin, haciendo clic en Logout, cerrar el explorador de Internet si no lo estbamos utilizando y volver al entorno de desarrollo de WebMatrix. En el entorno de desarrollo de WebMatrix, si no lo estamos ya, deberemos ir a la vista Files, haciendo clic sobre la entrada en el panel inferior izquierdo. En el esquema de carpetas y archivos del Site, pulsamos con el botn derecho del ratn sobre el ttulo superior (el nombre del proyecto, WebHelpers en nuestro caso) y hacemos clic sobre Refresh, para asegurarnos que se reflejan los cambios del sistema que debieron haberse producido ltimamente. Podremos observar que se ha creado una nueva carpeta (packages) en la que se encuentra otra con los archivos del paquete recin instalado y que en la carpeta Admin se ha creado un nuevo archivo, ahora hay dos, el de contraseas y el de configuracin de los paquetes.

46

A partir de estos momentos estamos en condiciones de sacar partido de todo el potencial que nos proporcionan los ASP.NET Web Helpers. Pasamos a ver algunos ejemplos ilustrativos de su sencillez de implementacin.

Soporte para Twitter


Con los ASP.NET Web Helpers podemos ya dar soporte para:

FollowButton: Botn para seguir al usuario Twitter propietario de la pgina Los pasos a seguir son muy sencillos: Crear un archivo nuevo de tipo cshtml, al que daremos cmo nombre, por ejemplo, Twitter. Sustituimos todo su cdigo por el que se muestra en el listado que sigue. Hacemos clic con el botn derecho del ratn sobre el nombre del archivo y seleccionamos la opcin Launch in browser. Se mostrar en el explorador de Internet, en el que observaremos entradas parecidas a las mostradas en las figuras adjuntas.
@{ &nsbp; &nsbp;&nsbp; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> ; <title></title> </head>

Profile: Listado de Tweets de un usuario Search: Bsqueda de Tweets acerca de un determinado tema List: Listado de Tweets de una determinada lista de Twitter de un usuario TweetButton: Botn de crear un Tweet de la pgina

1. 2. 3.

47

<body> @Twitter.Profile("jpt219", width: 400, avatars: true, numberOfTweets: 20, scrollBar: true) @Twitter.Search("Windows 8", width: 400, avatars: true, scrollBar: true) @Twitter.List("jpt219", "abierta") @Twitter.TweetButton() @Twitter.FollowButton("jpt219") </body> </html>

48

Soporte para FaceBook


Para FaceBook los ASP.NET Web Helpers ofrecen un soporte muy limitado, pero se dispone en WebMatrix de un muy completo FaceBook Helper, del que hablaremos en un artculo posterior. Simplemente implementar el LikeButton de FaceBook, para informar que esa pgina nos ha gustado, siempre que el usuario que pulse el botn sea a su vez usuario de FaceBook algo bien conocido por todos-. Los pasos a seguir son los mismos que antes: 1. 2. 3.
@{ } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> @Facebook.LikeButton() </body> </html>

Crear un archivo nuevo de tipo cshtml, al que daremos cmo nombre, por ejemplo, FaceBook. Sustituimos todo su cdigo por el que se muestra en el listado que sigue. Hacemos clic con el botn derecho del ratn sobre el nombre del archivo y seleccionamos la opcin Launch in browser.

Hacemos clic con el botn derecho del ratn sobre el nombre del archivo y seleccionamos la opcin Launch in browser. Se mostrar en el explorador de Internet, en el que observaremos una entrada parecida a la mostrada en las figura adjunta.

Botonera LinkShare
Discreto, pero el ms potente helper de la coleccin ASP.NET Web Helpers, es una muy simple botonera que nos abre nuestra pgina a gran nmero de sites sociales de la red y eso con literalmente- una simple lnea de cdigo. Los pasos a seguir son los descritos: 1. 2. Crear un archivo nuevo de tipo cshtml, al que daremos cmo nombre, por ejemplo, Twitter. Sustituimos todo su cdigo por el que se muestra en el listado que sigue. Ponemos "LinkShare", porque es el nombre de nuestra pgina, no porque sea el nombre del Helper. Tngase bien en cuenta. Hacemos clic con el botn derecho del ratn sobre el nombre del archivo y seleccionamos la opcin Launch in browser.

3.
@{ }

49

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> @LinkShare.GetHtml("LinkShare") </body> </html>

Hacemos clic con el botn derecho del ratn sobre el nombre del archivo y seleccionamos la opcin Launch in browser. Se mostrar en el explorador de Internet, en el que observaremos una entrada parecida a la mostrada en las figura adjunta.

En definitiva, la botonera de LinkShare consta de botones de enlace para los siguientes sites:

Delicious (del.icio.us) Digg Google Buzz (Google Reader) FaceBook Reddit! Stumble it! Twitter

Bsquedas con Bing


Los ASP.NET Web Helpers permiten crear una SearchBox simple del buscador Bing de una manera muy rpida y relativamente flexible. Los pasos a seguir son los ya consabidos: 1. 2. 3.
.@{ Bing.SiteTitle = "Microsoft Espaa"; Bing.SiteUrl = "http://www.microsoft.com/es-es"; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> @Bing.SearchBox();

Crear un archivo nuevo de tipo cshtml, al que daremos cmo nombre, por ejemplo, Bing. Sustituimos todo su cdigo por el que se muestra en el listado que sigue. Hacemos clic con el botn derecho del ratn sobre el nombre del archivo y seleccionamos la opcin Launch in browser

50

</body> </html>

51

Das könnte Ihnen auch gefallen