1
Presentación de Microsoft Web Matrix y guía para la instalación de la
herramienta y una primera prueba de uso.
Cuando alguien se inicia en una tecnología, ya sea .NET, Java, PHP, etc., siempre se enfrenta con un
primer desafío 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 tecnologías de la forma más “indolora” posible. Como fruto de este esfuerzo ha
nacido WebMatrix.
Introducción 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 también nos permitiría, para aquellos cuyo dominio actual sea
PHP, trabajar con esta tecnología. Pero como no sólo de frameworks vive el desarrollador, en el
capítulo de bases de datos también podremos gozar de una gran interoperabilidad, puesto que
WebMatrix es capaz de manejar SQL Server Compact (un “versión” de SQL Server especialmente
pensado para proyectos web), SQL Server e incluso MySQL, para que ningún desarrollador PHP eche
de menos las herramientas a las que más acostumbrado está.
De este modo, aquellos que empiecen a utilizar WebMatrix podrán hacerlo con las tecnologías que ya
conocen y, posteriormente si están interesados en ello, crear proyectos con nuevas tecnologías sin
salir del entorno que ya conocen bien.
En este artículo veremos cómo instalar WebMatrix y nos familiarizaremos con la organización de la
interfaz de la herramienta y la forma en que se utiliza.
Instalación de WebMatrix
Actualmente Microsoft ha simplificado la instalación de la mayoría de sus productos web mediante el
uso de Web Platform Installer, un programa gracias al que con un par de clicks tendremos no sólo la
aplicación 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 botón verde “Install Now” para descargarnos un pequeño
instalador (apenas 85KB).
Atención: Es muy importante asegurarse de que el combo de idioma de la parte superior izquierda está
configurado para mostrarnos la página en English (United States). La razón es que si seleccionamos Español, nos
bajará la versión 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 artículo.
La siguiente imagen nos muestra cómo es la pantalla y el combo que tenemos que configurar
correctamente.
2
Una vez que se haya bajado “Web Platform Installer” y esté funcionando, sólo tenemos que pulsar en
“Products” y, posteriormente, en el botón “Add” junto a “Microsoft WebMatrix Beta 3” para
seleccionarlo como descarga.
3
Tras pulsar sobre el botón “Install” nos aparecerá una pantalla a modo de resumen, indicándonos 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 tecnología WebDeploy, que facilita los
despliegues. Aceptando se iniciará el proceso de instalación. 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 permitiría 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 máquina (puesto que Web Platform Installer los requiere para realizar las
instalaciones que le indiquemos), lo que puede no ser nuestra intención.
Primeras pruebas
Al arrancar WebMatrix podremos elegir siempre entre cuatro opciones.
• My Sites: desde esta opción podremos acceder a los proyectos que ya hayamos creado con
anterioridad con WebMatrix.
• Site From Web Gallery: esta opción nos da acceso a poder modificar con WebMatrix muchas
de las aplicaciones web más 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 galerías
de fotos, listas de deseos, etc. También incluye un sitio “vacío”.
4
• Site From Folder: con esta opción 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. Tendríamos que elegir la opción 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 habría 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 aplicación. Una vez hayamos pulsado
sobre el botón 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 intención de facilitar la vida a los
desarrolladores que quieran realizar proyectos web con ASP.NET, pero que también admite diversas
otras tecnologías. En el artículo anterior explicamos cómo se puede instalar WebMatrix y en este
artículo veremos cuáles 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.
5
Banda de controles superior
En la zona superior tenemos la ya clásica “Ribbon” que viera la luz en Office 2007 y que poco a poco
se extiende por la mayoría de productos de Microsoft. En esta zona tenemos dos partes bien
diferenciadas: a la izquierda se sitúan 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 línea vertical de división se sitúan controles que son “sensibles” al
contexto. Esto quiere decir que, en función del espacio de trabajo que estemos usando en ese
momento en WebMatrix, aparecerán 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 permitirán acciones como crear uno nuevo, guardar,
abrir, etc.; en cambio, con el espacio de trabajo de bases de datos, los botones nos ofrecerán crear
una nueva base de datos, ejecutar una consulta, etc.
Espacios de trabajo de la aplicación
En la parte inferior izquierda podemos seleccionar entre los diferentes espacios de trabajo de la
aplicación. WebMatrix es una herramienta que pretende abarcar todas las funciones que un desarrollo
web tiene que realizar para poner una aplicación web en producción. Para mantener un conjunto de
funcionalidades tan dispar accesible y organizado, los espacios de trabajo permiten mostrar y ocultar
botones y menús en función del tipo de trabajo que queramos realizar en ese momento con el
proyecto.
Existen cuatro espacios de trabajo para elegir:
6
• Site: este espacio de trabajo nos da acceso a funciones generales del sitio, como establecer
una nueva configuración 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
aplicación, etc.
• Files: este espacio de trabajo sirve para gestionar los ficheros que componen nuestro
proyecto, incluida su edición. Desde aquí haremos buena parte del trabajo de desarrollo, como
son editar y modificar nuestro código, 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, añadir 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 selección 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
aparecerán las tablas, conexiones, etc., que hemos definido hasta ese momento.
7
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 código que nos permite modificar ficheros ASP, ASP.NET. PHP, HTML, JavaScript y CSS.
También aquí podremos interactuar con nuestras base de datos, obteniendo tanto resultados de
consultas ejecutadas contra ellas, como introduciendo nuevas tuplas en ellas.
Conclusión de la presentación de WebMatrix
Hasta el momento hemos tratado simplemente de presentar las características principales de esta
herramienta de Microsoft. Hemos visto cómo instalar WebMatrix, cómo crear un primer proyecto y
cómo está organizada la ventana principal sobre la que se realiza la mayor parte del trabajo. A partir
de ahora nos será más 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 artículos continuaremos hablando sobre esta herramienta y cómo utilizarla para hacer
proyectos web.
Enlaces de referencia sobre WebMatrix
Antes de terminar esta introducción a WebMatrix queremos ofrecer algunos enlaces donde los
interesados pueden obtener más información, 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. Después de haber hablado sobre WebMatrix en anteriores entregas del Manual de WebMatrix, vamos a
comenzar a poner manos en la masa y ver cómo se crearían aplicaciones web con esta herramienta.
Pero antes queremos comenzar explicando una sintaxis que utilizaremos en nuestro día a día, llamada
Razor, que quizás el lector no conozca todavía.
8
Este es el primero de tres artículos 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 opción
para programar aplicaciones web en ASP.NET MVC 3.
Motor de Vistas
Razor no es en realidad un lenguaje de programación, sino simplemente un motor de vistas. ¿Qué
significa esto? Básicamente, hay que analizar qué significan las siglas MVC: corresponden al término
Modelo-Vista-Controlador, forma en que se denomina a uno de los patrones de arquitectura más
populares. En MVC se pretende separar completamente la información que gestiona nuestra aplicación
(el Modelo) de la forma en que se presenta (la Vista), desacoplando ambas capas mediante una capa
intermedia (el Controlador) que contendrá toda la lógica para trasladar los datos a la presentación
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
más cómodos.
Objetivos de Razor
Son varios los objetivos que Microsoft se ha marcado en la creación de este motor de vistas, entre los
que destacaríamos:
• Compacto, expresivo y fluido: buscan reducir la cantidad de código que necesitamos para
crear las vistas, evitando que tengamos que denotar de una forma especial cada línea de
código procedural. El compilador será lo suficientemente inteligente como para inferir, en
muchas ocasiones, qué tipo de código estamos escribiendo.
• Fácil de aprender: aunque esto es siempre relativo, puesto que depende del bagaje previo
del desarrollador y de sus capacidades, con sólo este artículo y los dos próximos 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 decisión última será nuestra.
• Testeable: podremos crear tests unitarios de las vistas.
El Hola Mundo con Razor
Vamos a hacer nuestro primer y clásico “Hola Mundo” con Razor. Para ello, nos vamos a apoyar en
WebMatrix. En un artículo anterior vimos cómo podemos crear un proyecto vacío. Para añadir un
fichero a este proyecto tenemos que situarnos en el espacio de trabajo de “Files” y, posteriormente,
pulsar el botón “New” en la barra de botones superior. Al pulsar “New” se nos desplegarán dos
opciones bajo él: “New File…” y “New Folder”. Elegimos la primera puesto que sólo queremos añadir
un fichero. Veremos entonces aparecer una pantalla como la siguiente:
9
En esta pantalla simplemente tenemos que darle un nombre al nuevo fichero (algo como
“HolaMundo.cshtml” y después 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 más complejo que el clásico “Hola Mundo”, pero nos permitirá analizar unos
cuantos detalles fundamentales de Razor.
En primer lugar, como se puede ver, es posible mezclar código procedural y código HTML de forma
sencilla y sin tener que recurrir a montones de secuencias “<%” como ocurre en ASP.NET clásico, o
cualquiera que sea el carácter 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
código procedural, ejecutable en el servidor en el momento de mandar la página 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 más:
• En la primera llamada, “@nombre”, estamos haciendo referencia a una variable. Esta variable
está definida en la zona superior del código. Esta definición es código C#. Este detalle es
10
importante: en Razor todo el código que no es HTML (es decir, el código procedural) se puede
programar en C# y en VB.NET a día de hoy.
• En esta primera llamada, en el código 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 más adelante qué significa esto.
El resultado de este bloque de información sería una página “dinámica”, 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 clásico “Hola Mundo” pero con algo más de funcionalidad. En los próximos dos
artículos analizaremos más en profundidad los aspectos fundamentales del lenguaje, como la
definición 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 artículo sobre esta serie de tres dedicada a Razor conocimos que la denominación más
correcta para Razor es la de “motor de vistas”, descubrimos los objetivos que busca su creación y
aprendimos a crear el clásico “Hola Mundo”. En este artículo 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 código a ejecutar en el lado del
11
servidor. Con este carácter podemos introducir sentencias “inline” y sentencias compuestas por una o
más líneas de código. Ejemplos de cada uno de estos tipos serían:
<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 participación 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 código, compuestos por una o más
líneas. 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 excepción. Cuando
programemos con WebMatrix y hagamos uso de Razor tendremos que usar clases y objetos. No es el
objetivo de este artículo explicar la Programación Orientada a Objetos, campo suficientemente amplio
como para haber inspirado centenares de libros en los últimos 25 años. Sin embargo, una explicación
lo más ligera y sencilla posible no vendrá mal para quienes se aproximen por primera vez a este
concepto.
En la POO tenemos la noción 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, podríamos decir que “Perro” es una clase. Todos
aquellos que forman parte de esta clase Perro compartirán en común comportamientos como correr,
comer o ladrar, y propiedades como el color, el peso o la edad.
Un objeto es una instanciación concreta de una clase. Es decir, es tomar ese molde o patrón que es la
clase para crear un elemento concreto. En el mundo real esto lo podríamos traducir como “mi perro”,
“el perro del vecino” o “el perro de la esquina”. Todos ellos pertenecen a un mismo género, la clase
“Perro”, y todos ellos van a correr, comer y ladrar, pero tendrán valores distintos para sus
propiedades, unos serán blancos, otros más delgados, etc.
Hecho este minimalista esbozo de la relación entre clases y objetos, en Razor vamos a tener a nuestra
disposición la programación con clases y objetos. En el ejemplo del “Hola Mundo” descrito en el
artículo anterior, vimos cómo, accediendo a la propiedad “Now” del objeto DateTime, obteníamos la
fecha actual. No será, sin embargo, la única clase y objeto con la que nos iremos familiarizando
conforme nos adentremos en la programación con Razor.
Veremos más 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 métodos. Por ahora es suficiente con conocer esta relación entre clases, objetos,
propiedades y métodos.
Variables y Cadenas
Las variables nos van a servir para almacenar información. En Razor podemos elegir entre crearlas
como “var” para no tener que darles un tipo, o bien indicarles explícitamente dicho tipo, ya sea “int”
12
para enteros, “string” para cadenas de texto, “decimal” para números decimales, etc. Es importante
reseñar que los nombres que les demos a las variables son sensibles a mayúsculas. 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 mayúsculas, por lo que tampoco podríamos definir una variable como
“INT variable”. Veamos algunos ejemplos:
@{ // Declaración 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 carácter comillas dobles, como suele ser habitual. En
caso de necesitar escapar un carácter especial, la forma de fácil es utilizar el carácter @. Ojo, no
debemos confundir este carácter @ con el otro carácter @ del que hemos estado hablando hasta
ahora y que sirve para definir fragmentos de código en Razor. Unos ejemplos a continuación:
@{ // Declaracion de cadenas var cadena = "Esto es una cadena estandar"; var cadenaBackslash = @"Cadena con backslash \"; var cadenaComillas = @"Cadena con ""comillas"""; }
toma de decisiones, ejecución 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 ejecución en función de una
condición lógica. Existe un tipo concreto conocido como “bool” que nos sirve para definir variables que
sólo podrán contener uno de estos dos valores: verdadero o falso. En el siguiente fragmento de código
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
método “HaSidoExitoso” de un objeto “miObjeto”. Este resultado, al estar almacenado en una variable
booleana, sólo puede ser verdadero o falso.
A partir de ahí, utilizando el operador de decisión 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”).
13
Existe otro operador de decisión, 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, podríamos definir tres etiquetas “case” para cada uno de esos tres valores. El
siguiente ejemplo nos aclara cómo 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 instrucción break y contendrán todas las instrucciones que queremos
ejecutar para ese caso. En el ejemplo, sin embargo, nos hemos limitado a definir unos cuantos
comentarios (que nunca aparecerán en el HTML devuelto al cliente, al igual que todo el código 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
mayoría de casos, para realizar control de errores.
Bucles y colecciones en la sintaxis de Razor
En cuanto a los bucles, en un artículo anterior hablábamos sobre clases y objetos. Vamos a introducir
un nuevo concepto: las colecciones. No son más que lo que su propio nombre indica, colecciones u
estructuras de datos que contienen múltiples objetos de un mismo tipo. Es decir, que una colección
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 colección. Por ejemplo, si el resultado de un método es una colección de enteros con las
edades de los usuarios de una página y queremos mostrar por pantalla dichos valores, lo más práctico
es iterar por esta colección 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> } }
14
Como se puede ver en el código, en primer lugar se define una colección de enteros del 1 al 4. Esto se
hace creando una variable “colección” cuyo tipo será “int[]”. Es importante indicar que, en C# (y por
ende en Razor), podemos crear una colección o array de cualquier tipo situando los caracteres [] tras
el tipo, como en este ejemplo.
Una vez creada la colección, la recorreremos con el operador for. Para ello, necesitamos una variable
contador, que nos permite saber en qué posición de la colección nos encontramos. Desde los tiempos
de C, 40 años atrás, i ha sido el nombre más popular para este tipo de variables (seguido de j, k, l,
etc.), así que sigamos la tradición.
Una vez definida la variable, tenemos que indicar el límite del bucle con una sentencia lógica. En este
caso estamos accediendo a la propiedad “Length” de la colección (no olvidemos que todo son objetos
y los objetos tienen propiedades con valores que les definen, como el número de elementos en este
caso).
La última cláusula sirve para indicar cuantos avances queremos en nuestra variable contadora al
finalizar cada iteración del bucle (el operador ++ nos sirve para indicarle que sólo uno). Resumiendo,
el bucle entero se leería, en lenguaje natural, así:
“Define una variable contador i con valor inicial 0, que no puede ser mayor que el número de
elementos de la colección, y que avanza una posición en cada iteración”
Posteriormente, con el bloque de llaves definimos el código que queremos ejecutar en cada iteración
del bucle. En este caso lo que estamos haciendo es, para cada iteración, acceder a un elemento de la
colección. 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
colección; en concreto, al elemento que ocupa la posición representada por el valor de la variable
contador. Como es habitual, el primero de los elementos de la colección ocupa la posición 0. El
resultado del fragmento de código que hemos visto sería una imagen parecida a la siguiente.
15
Existen otros operadores de bucle, como While y Foreach, que dejaremos para investigación del lector
en los enlaces que se proveen en la sección de Bibliografía.
estructurar un proyecto web desarrollado con la herramienta WebMatrix.
Estructurar el aspecto
Hoy en día cualquier sitio web se estructura de una forma más compleja que simples páginas
enlazadas las unas a las otras. Como mínimo, en la mayoría de sitios nos encontramos con una
cabecera y un pie compartido por cada página, formando una estructura estática sobre la que se van
mostrando los contenidos del sitio.
Como no podía ser de otro modo, WebMatrix nos ofrece la posibilidad de recrear estas estructuras, por
complejas que sean. A continuación vamos a crear una bastante común: una página “maestra”, una
página de cabecera y otra de pie. Partiendo de un proyecto vacío (en un artículo anterior se vio cómo
crearlos), vamos a ver cómo 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
vacío, sólo aparecerá el nombre del mismo.
Con el botón derecho del ratón haremos aparecer el menú contextual, en el que elegiremos la opción
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 añadiremos un nuevo fichero con la
opción “New File”. Nos aparecerá un cuadro de diálogo similar al que podemos ver en la siguiente
16
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 sólo podrán visualizarse si
se cargan como parte de otros ficheros que no tengan ese prefijo.
Del nuevo fichero HTML borraremos todo el código y simplemente escribiremos lo siguiente:
<div>Esto es la cabecera</div>
Repetiremos la operación para añadir 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 página maestra. Añadimos
un nuevo fichero a la carpeta “Compartido” de nombre “_Maestra.cshtml”. El código de esta nueva
página 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>
17
Analicemos este fragmento de código. Puesto que va a ser la página contenedora de todas las demás,
es necesario que defina las etiquetas html, head y body. En el interior del cuerpo estamos cargando el
contenido de las páginas Cabecera y Pie que hemos creado anteriormente, utilizando el comando
RenderPage, que como se puede deducir por su nombre permite renderizar una página como un
fragmento HTML dentro de otra.
Nos quedan dos pasos para poder ver el resultado: crear una página de contenido y enlazar en ella a
la página maestra que acabamos de definir. Añadimos un nuevo fichero MiPrimerContenido.cshtml.
Destacar que no vamos a ponerle el signo ‘_’ como prefijo, puesto que esta página sí será navegable.
En el interior de esta nueva página, algo tan simple como esto:
@{ Layout = "/Compartido/_Maestra.cshtml";} <div>Esto es el contenido principal</div>
Si tenemos abierta la página MiPrimerContenido.cshtml, podemos navegar directamente a ella
pulsando el botón “Run” que aparece en la banda de iconos de la zona superior de WebMatrix. El
resultado debería ser algo parecido a lo que podemos ver en la siguiente imagen.
Añadir un estilo:
A nivel de presentación, no es especialmente impactante, pero estamos simplemente estructurando
contenido y compartiéndolo. Sin embargo, desde WebMatrix también podemos trabajar con archivos
CSS y aprovechar que su editor de código nos resalta este lenguaje. Añadamos una carpeta “Estilo” y
dentro un nuevo fichero de tipo CSS con un nombre tan original como “Estilos.css”. En su interior
podríamos definir algo muy sencillo, como esto:
body { margin: 0;
18
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 pequeño cambio en el fichero _Maestra.cshtml. Vamos a enlazar en él este nuevo
fichero de CSS, además de definir un par de etiquetas div para aprovechar los estilos que hemos
creado. El resultado podría ser algo así:
<!DOCTYPE html> <head> <title> Titulo de la pagina </title> <link href="@Href("/Estilo/Estilos.css")" rel="styl esheet" 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 cómo se alteran tanto los colores como los tamaños de la página. De este
fragmento de código lo más interesante es el método @Href. Su función consiste en crear una URL
que sea compatible con cualquier navegador, a partir de un fichero local.
Comunicación entre páginas
Hemos visto cómo podemos ir organizando el aspecto de nuestra página web añadiendo distintos
bloques, en forma de páginas web independientes. Sin embargo, el ser independientes puede llegar a
ser un problema. Por ejemplo, supongamos que queremos modificar el Título de la ventana,
haciéndolo de forma acorde al contenido que estamos cargando. Necesitaríamos comunicar la página
que aloja el contenido (y conoce dicho Título) con la página Maestra, que es la única que tiene acceso
a la etiqueta <title>.
La forma de lograr esta comunicación es tan sencilla como todas las cosas en WebMatrix. Tenemos
que hacer uso del objeto PageData, una colección de parejas nombre/valor que nos permite comunicar
entre distintas páginas.
En nuestro ejemplo, el primer paso sería modificar la página de contenido MiPrimerContenido.cshtml
que añadimos anteriormente. Desde ella situaríamos el valor del Título, que posteriormente va a leer
la página maestra. La sentencia para lograrlo es muy sencilla:
19
@{ PageData["Titulo"] = "Mi Primer Contenido"; }
Ahora, para consumir este valor desde la página maestra, que es la única que puede establecer el
título, introduciríamos esta sentencia:
<head> <title>@PageData["Titulo"]</title> </head>
Sencillo, ¿verdad? Tan sencillo como potente, puesto que de este modo podremos intercambiar
información entre páginas, al tipo que cada una se ocupa de recuperar la información que le
corresponde.
Conclusiones
Con muy poco esfuerzo y aún menos código hemos conseguido definir una estructura básica pero lo
suficientemente potente como para gestionar muchos sitios web, permitiendo reutilizar una gran
cantidad de código. También hemos visto cómo comunicar los fragmentos que componen la página
web, para poder cargar contenido desde unos referenciado por otros.
Gestionar una base de datos con WebMatrix.
1. Introducción
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 más habitual. En WebMatrix tenemos un muy
buen soporte para gestionar las bases de datos de nuestras aplicaciones, tanto para su definición
como para la introducción y consulta de datos.
En cuanto a las bases de datos que pueden gestionarse con WebMatrix, SQL Server Compact Edition
viene como opción por defecto. SQL Server CE no es precisamente un producto novedoso, puesto que
ya hace años 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 más web. Para ello, entre las novedades que presenta, destacaríamos 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 instalación ninguna. Simplemente hay que copiar los binarios de SQLCE al
directorio bin de nuestra aplicación 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 aplicación web.
• Diseñadores gráficos 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 están soportadas, con lo que en cualquier momento podemos pasar a una
base de datos más potente si nuestra aplicación web comienza a demandarlo.
Para la gente que esté más familiarizada con MySQL, WebMatrix también ofrece soporte. Por lo tanto,
no quedan excusas para no utilizarlo, vengamos del entorno que vengamos.
20
2. Definir una base de datos
Antes de ver cómo podemos insertar, actualizar, borrar y consultar información de una base de datos,
empecemos por lo más básico: cómo definir esa base de datos. En WebMatrix todas estas operaciones
se hacen desde el espacio de trabajo de "Databases".
Si nuestra aplicación no tiene todavía una base de datos, en la parte central podremos ver un enlace
directo para añadir una nueva base de datos, bajo el mensaje "Add a Database to your site". Si
pulsamos en él automáticamente 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 botón "New Table" que aparece en
la barra de iconos superior.
21
Como vemos en la imagen, al crear la tabla se crea automáticamente 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 indicándonos que es necesario cuando queramos guardar la tabla. Y si borramos la
columna e intentamos guardar la tabla vacía, tampoco nos lo permitirá.
Para poder darle nombre a esta columna, simplemente nos dirigimos al grid de propiedades y en la
sección (Name) indicamos el valor. En la imagen anterior también podemos ver resaltados los
controles que podemos utilizar para añadir nuevas columnas (o eliminarlas), así como establecer
relaciones entre tablas cuando ya exista más 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
automáticamente un valor a las columnas identidad cuando se inserta una fila. Las columnas
de clave primaria suelen ser de identidad, para poder delegar la creación del valor de la clave.
Sólo aplica a columnas de tipo numérico
• 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.
Añadamos 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 límites.
22
• Autor: columna de tipo nvarchar de 100 de longitud. Permitiremos valores nulos en ella.
• Fecha: columna de tipo datetime.
Con esto ya tendríamos nuestra tabla configurada. Para guardarla, pulsaríamos el botón 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 creación para bases de
datos SQL Server CE. Sin embargo, es una característica que se espera que esté próximamente
disponible.
Con WebMatrix también podemos introducir datos en las tablas de nuestra base de datos. Basta con
pulsar sobre el botón "Data" en la pestaña Table, una vez que hayamos seleccionado la tabla en la que
queremos introducir la información. El proceso de edición es el típico de cualquier grid de datos. Es
importante recordar que no podemos dejar sin información 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 automática. 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 través del editor de WebMatrix en la tabla
"Post" creada anteriormente.
23
introducir y consumir información en nuestras bases de datos.
1. Introducir información
Partiremos de la tabla Post que creamos en el artículo anterior y veremos cómo introducir datos en
ella mediante código, que es el procedimiento que habitualmente seguiremos. Para ello, vamos a crear
una página nueva, "Postear.cshtml", que servirá para introducir un nuevo post en la base de datos. El
código de esta página sería 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>
24
</form> Empecemos analizando el HTML. Se compone de una tabla con 3 campos para introducir
título, contenido y autor, más un botón para procesar la información. Cuando pulsemos el botón, el
posteo se realizará sobre la propia página, y ahí entrará en juego el código que hemos definido en la
parte superior.
Analicemos cada uno de los pasos que están descritos y qué métodos están involucrados:
1. En primer lugar, definimos que sólo se ejecutará este código si la petición a la página se ha
realizado mediante HTTP-POST, al estar comprobándose a variable "IsPost", que nos indica si
hemos llegado a la página mediante una petición de este tipo.
2. En caso de que estemos ejecutando una petición por POST, abrimos una conexión con la base
de datos mediante el método Open de la clase Database, pasándole como parámetro 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 conexión, escribimos la sentencia SQL que queremos ejecutar y se la
pasamos al método Execute, junto con los parámetros que hemos definido en dicha sentencia.
Estos valores los obtenemos de Request, que es donde los hemos situado con el HTML que
acompaña a la página (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
inserción.
5. Por último, realizamos una redirección a una página pasándole como parámetro este id.
Utilizamos el método Href para calcular la URL de una forma independiente del navegador que
esté renderizando la página, y recurrimos a Response.Redirect para hacer efectiva la
redirección.
Idealmente, la página MostrarPost se encargaría de enseñarnos el resultado de la información que
hemos introducido, ya convenientemente formateada. Para ello, deberíamos recuperar de la base de
datos la información previamente insertada. Veamos cómo podríamos hacer eso.
2. Consultar información
Necesitamos poder leer información en las tablas de nuestra base de datos, así como mostrarla a
través de un fragmento de código HTML. A continuación un ejemplo de ambas necesidades
combinadas para generar una página con información dinámica.
@{ var db = Database.Open("Mi Blog"); var consulta = "SELECT Titulo, Contenido, Autor, Fecha FROM Post W HERE PostId = @0"; var postInfo = db.QuerySingle(consulta, Request["Po stId"]); } <h1>@postInfo.Titulo</h1> <h3> publicado el @postInfo.Fecha por @postInfo.Aut or</h3> <div style="border: .2em dotted #900; width:350"> @postInfo.Contenido </div>
El HTML de nuevo es lo más sencillo posible, puesto que no es objeto de estos artículos poner el
acento sobre cómo realizar una página web vistosa. Como se ve, mostramos la información que
25
contiene un objeto llamado postInfo; en concreto, los campos Titulo, Fecha, Autor y Contenido. Pero,
¿cómo hemos obtenido este objeto postInfo? Echemos un ojo al código en la parte superior.
En primer lugar, abrimos una conexión a la base de datos y creamos una sentencia SQL como ya
hemos aprendido en la sección anterior. La diferencia es que ahora no vamos a ejecutar sino consultar
nuestra base de datos. Existen tres métodos distintos para realizar esta operación:
• Query: ejecuta la sentencia y devuelve una colección de resultados. Podremos iterar por todos
ellos utilizando el operador "foreach", que nos devolverá una fila cada vez hasta recorrer
entera la colección.
• QueryValue: nos devuelve un valor único. Es ideal, por ejemplo, si nuestra consulta tiene que
devolvernos el número de filas que cumplan una condición, o el valor que suman todas ellas
para una columna concreta.
• QuerySingle: es el método que estamos ejecutando y sirve para devolver un único registro. En
nuestro caso, al estar buscando por el ID, sabemos que sólo 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 difícil imaginar que,
dinámicamente, nuestro código es capaz de inferir cómo 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 posición de
la columna, algo mucho más propenso a errores y menos legible.
El resultado de nuestra página MostrarPost.cshtml podemos verlo en la siguiente imagen:
En este artículo aprenderemos cómo utilizar los mecanismos de seguridad
que ASP.NET WebPages nos ofrece y cómo podemos hacer uso de ellos
desde WebMatrix.
26
Este es el primero de los artículos dedicados a la seguridad en el desarrollo bajo WebMatrix, que
estamos viendo dentro del Manual de Microsoft WebMatrix.
En esta primera parte veremos cómo 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 cómo forma podemos autenticarnos y autorizar en base a estos
mecanismos.
1. Crear base de datos de usuarios
Antes de pretender realizar ninguna clase de autenticación, es necesario que tengamos una base de
datos contra la que poder realizar esta operación. En ella deberemos guardar información sobre los
usuarios y sus roles, para poder autorizar ciertas acciones en función de la pertenencia del usuario a
ellos.
En WebMatrix no puede ser más sencillo crear esta base de datos. WebSecurity es el helper que nos
va a acompañar durante éste y el siguiente artículo, pieza central sobre la que gira toda la seguridad.
Esta clase nos ofrece un método llamado InitializeDatabaseConnection, que servirá para definir las
tablas que respaldarán nuestro sistema de seguridad.
Esta llamada debemos hacerla sólo una vez y debe hacerse antes que cualquier otro proceso de carga,
por razones obvias. Pero, ¿dónde podríamos realizarla para asegurarnos que no se realiza más de una
vez y que las tablas estén listas antes de estarlo, prácticamente, la propia aplicación? 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 página web, permitiéndonos establecer valores globales (como podrían ser claves
compartidas por todas las páginas) o ejecutar procesos que son necesarios antes de arrancar la
aplicación, como éste que estamos explicando.
Para ello, añadiremos una nueva página _AppStart.cshtml en la carpeta raíz de nuestro proyecto e
introduciremos en ella el siguiente fragmento de código:
@{ WebSecurity.InitializeDatabaseConnection( "Mi Blog", "Usuario", "UsuarioId", "Nombre", true); }
Vamos a analizar cada uno de los parámetros 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 tuviéramos unas tablas para la seguridad de nuestra aplicación, deberíamos pasar
"false" en este parámetro.
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:
27
Como vemos, se ha creado una tabla Usuario. Esta tabla podría ser una tabla que utilizáramos para
almacenar información extra sobre cada uno de nuestros usuarios, como direcciones de correo, físicas,
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 número de campos relacionados con la
contraseña y su gestión.
También 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 función de su pertenencia. Ambas
tablas están conectadas a través de la tabla intermedia UsersInRoles. Es, en conjunto, un modelo
sencillo y fácilmente comprensible.
2. Registrar usuarios
Ya tenemos nuestra base de datos lista para almacenar nuevos usuarios y permitirnos posteriores
operaciones de autenticación y autorización. Sin embargo, lo primero será facilitar a los visitantes a
nuestro sitio web registrarse como usuarios. Para ello deberíamos crear una página "Registrar.cshtml"
desde la que los usuarios puedan introducir su nombre y su contraseña. Un ejemplo de código lo más
sencillo posible sería el siguiente:
@{ if(IsPost) { var sentenciaInsercion = "INSERT INTO Usuari o (Nombre) VALUES (@0)"; var db = Database.Open("Mi Blog"); db.Execute(sentenciaInsercion, Request["nomb reusuario"]); WebSecurity.CreateAccount(Request["nombreusu ario"], Request["password"]); } } <form method="post" action=""> <fieldset> <legend>Registrarse como usuario</legend> <div> <label for="nombreusuario">Nombre:</la bel> <input type="text" name="nombreusuario " value="@Request["nombreusuario"]"/> </div> <div> <label for="nombreusuario">Clave:</label> <input type="password" name="password" value ="@Request["password"]"/>
28
</div> </fieldset> <div><input type="submit" value="Registrarse" /></d iv> </form>
El código HTML es lo suficientemente sencillo como para no necesitar mayores comentarios. En cuanto
al código 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 contraseña.
A esta llamada podemos pasarle también 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 sería necesario enviarlo por correo al usuario que se acaba de
registrar, para que posteriormente procediera a confirmar el registro pasándole, a la página
correspondiente, dicho token y realizando nosotros una llamada WebSecurity.ConfirmAccount con el
token como único parámetro. Sin embargo, en aras de la sencillez, vamos a dejar el registro tal cual,
sin necesidad de realizar una posterior confirmación con ese token.
En este segundo artículo dedicado a la seguridad en aplicaciones
desarrolladas con WebMatrix aprenderemos cómo gestionar la
autenticación y autorización de usuarios.
1. Autenticarse
En el anterior artículo aprendimos cómo registrar nuevos usuarios. Una vez hecho eso, el siguiente
paso es permitir que se autentiquen en nuestra aplicación para darles acceso a mayores privilegios.
Para ello crearíamos una página "Loguear.cshtml" para proceder a la autenticación que podría tener
un código como el siguiente:
@{ if(IsPost) { if(WebSecurity.Login( Request["nombreusuario"], Request["password"]) == t rue) { <text>Usuario autenticado</text> } else { <text>Autenticación 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>
29
<input type="password" name="password" value="@Request["password"]"/> </div> </fieldset> <div><input type="submit" value="Loguear" /></div> </form>
La parte del código HTML es prácticamente idéntica a la que veíamos en el anterior artículo. En cuanto
al código procedural, se realiza una llamada al método Login del helper WebSecurity. Este método
acepta como parámetros el nombre de usuario y la contraseña, más un parámetro opcional de tipo
booleano que sirve para indicar si queremos que la aplicación 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 código HTML de la
página, con un resultado como el que se puede ver en la siguiente figura:
Con esto completaríamos la funcionalidad necesaria para realizar autenticaciones, pero nos faltaría la
parte de la autorización, es decir, asegurarnos de que un usuario tiene los permisos necesarios para
poder acceder a un recurso o funcionalidad. Veamos cómo hacerlo.
2. Autorización
El proceso habitual de autorización consiste en tres pasos:
1. Comprobar las credenciales. Si existen, se le da acceso al recurso.
2. Si no existen las credenciales, se le pide al usuario que se autentique.
3. Se le redirige a una página de forma automática para que pueda autenticarse.
4. Una vez que se ha autenticado correctamente, se le redirige al recurso que inicialmente quería
acceder.
30
Veamos cómo podemos reproducir este proceso con WebMatrix. En primer lugar, necesitaríamos una
página para hacer la autenticación como la que hemos creado antes. En segundo lugar,
necesitaríamos crear una página que tuviera control de acceso. Vamos a añadir una página
"Comentar.cshtml" que permita dejar un comentario en un post. Para poder comentar, vamos a
requerir que el usuario esté autenticado. Una primera aproximación al código sería 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, P ostId) 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 código HTML recogemos los dos datos que necesitamos: el identificador del post al que
vamos a enlazar el comentario y el contenido del comentario. Podríamos no requerir este identificador
si enlazáramos la página de comentarios desde la página del post, pero no es objeto de este artículo
entrar en este tipo de complejidades.
En cuanto al código procedural, podemos ver que el primer paso es comprobar si el usuario está
autenticado. De no estarlo, se realiza una redirección automática a la página de Logueo, pasando
como parámetro la URL a la que queremos que se retorne una vez se haya completado
satisfactoriamente la autenticación.
En caso de que el usuario sí esté autenticado y hayamos llegado a la página por HTTP-POST (por
ejemplo, tras pulsar el botón de "Comentar", introducimos el comentario en la base de datos.
31
Destacar que utilizando el helper WebSecurity tenemos acceso a mucha información sobre el contexto
de seguridad. Algunos de los métodos más destacados serían:
• 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
autenticación del usuario, volviendo a ser un usuario anónimo.
En este artículo 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 información valiosa.
WebMatrix, en su afán por simplificar el desarrollo de sitios web, ofrece un gran número de clases
Helper para facilitarnos trabajar con este tipo de servicios con apenas un par de líneas de código.
1. Twitter
Cada vez quedan menos sitios web que no tengan su propia cuenta en Twitter, desde la que ofrecer
enlaces a la información 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 mayoría de los
casos, la presencia de Twitter en el sitio web se realiza mediante la integración de uno de los controles
de timeline que nos ofrece la propia web de Twitter.
La integración es sencilla, basta con copiar y pegar un trozo de código relativamente grande en
nuestras páginas. Sin embargo, que sea relativamente sencilla y rápida no significa que sea ni
elegante ni cómoda, puesto que estamos introduciendo algo totalmente ajeno en nuestro desarrollo.
Sería, por tanto, mucho más deseable hacer esa integración con código propio. Aquí es donde aparece
WebMatrix y uno de sus Helpers para ayudarnos: el helper Twitter.
Este helper tiene dos métodos principales con los que poder trabajar:
• Profile: este método recupera la información específica para una cuenta determinada. Sus
parámetros, además del nombre de la cuenta, sirven para personalizar el aspecto que va a
tener la caja en la que se presenta la información.
• Search: este método sirve para mostrar la información relacionada con una cadena de
búsqueda, dentro de Twitter. Al igual que el método anterior, tiene un gran número de
parámetros que sirven para personalizar el aspecto de la caja que muestra los resultados.
Veamos un ejemplo de uso rápido. Imaginemos que tenemos una aplicación con una barra lateral y
queremos mostrar en ella la información relacionada con una cuenta de Twitter. El fragmento de
código que necesitaríamos sería algo como lo siguiente:
<h4>Barra lateral</h4> @Twitter.Profile("deswebcom")
32
Como podemos ver, una y nada más que una línea de código necesitamos para integrar
correctamente Twitter en nuestras páginas. Si quisiéramos, en lugar de mostrar un perfil concreto,
hacer una búsqueda la forma sería la misma, salvo que llamaríamos al método "Search". El resultado,
en ambos casos, sería algo parecido a la siguiente imagen.
Ambos, como ya comentábamos antes, pueden recibir una serie de parámetros opcionales que sirven
para personalizar el aspecto de la caja. En la bibliografía se pueden encontrar enlaces a páginas en las
que se enumeran estos parámetros así como su uso.
2. Facebook
Junto con Twitter, la otra red social por excelencia a día de hoy. En este caso, el Helper que tenemos
a nuestra disposición nos permite añadir el famoso botón "Me Gusta". Este Helper, llamado como es
obvio "Facebook", tiene un único método Like. Este método tiene 6 parámetros opcionales. Aparte de
los habituales relacionados con el aspecto, estos son los más relevantes:
• Url: el primer parámetro nos permite modificar la url que el usuario va a indicar que le gusta.
Por defecto, la url será la de la página que contiene el botón.
• Action: podemos cambiar la acción por defecto, "Me gusta", por una como "Recomiendo",
mediante este parámetro.
• 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 código con varios botones mostrando los valores para los distintos parámetros:
<div> <br/> @Facebook.LikeButton("http://www.desarrollo.com") <br/> @Facebook.LikeButton(
33
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, páginas de Microblogging, etc., desde las
que nuestros usuarios se pueden hacer eco de los contenidos de nuestras aplicaciones web. Hacer uso
de estos enlaces también resulta tan sencillo como los ejemplos que hemos visto hasta ahora de
integración con otros servicios de la web 2.0, como Facebook o Twitter.
Esta integración de enlaces de compartición se hace mediante el Helper LinkShare, que nos genera
automáticamente enlaces a los siguientes sitios: Delicious, Digg, Google Buzz, Facebook, Reddit,
StumbleUpon y Twitter. Sólo tiene un método que podamos invocar, "GetHtml", y un único parámetro
obligatorio: el título de la página, para que conste en algunos sitios que lo pueden necesitar (como
Delicious, por ejemplo).
34
El resultado sería una ristra de botones similares a la siguiente imagen:
Y si pulsamos, por ejemplo, en el botón de Twitter nos conectará a Twitter.com y tras loguearnos nos
creará automáticamente 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 búsquedas de forma sencilla. Este
Helper expone dos métodos: SearchBox y AdvancedSearchBox. En cuanto al primero, puede recibir
dos parámetros, 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 código sería éste:
<div> <br/> @Bing.SearchBox() </div> <div> <br/> @Bing.AdvancedSearchBox() </div>
El resultado sería la clásica caja con un botón a la derecha en forma de lupa, con fondo naranja. Si
utilizamos dicha caja para realizar una búsqueda, se nos abría una nueva ventana en la que podremos
navegar por los resultados de Bing para ese término.
Sin embargo, mucho más espectacular es la opción de búsqueda avanzada, puesto que aunque la caja
es idéntica, 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 búsqueda para el término "Prueba".
35
En lo relativo a la denominada Web Social, lo más rápido, simple y
funcional, se puede obtener con la ayuda de los ASP.NET Web Helpers. A lo largo del artículo 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. Twitter
2. FaceBook
3. LinkShare
o Delicious (del.icio.us)
o Digg
o Google Buzz (Google Reader)
o FaceBook
o Reddit!
o Stumble it!
o Twitter
4. Bing
Instalación de ASP.NET Web Helpers Library
Iniciamos en WebMatrix un nuevo proyecto basado en una plantilla (Template).
36
Seleccionamos una plantilla de tipo Sitio vacío y le damos un determinado Site Name (optamos en
nuestro ejemplo porque sea WebHelpers). Finalmente hacemos clic sobre el botón OK.
37
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 dónde podremos realizar las correspondientes tareas administrativas.
Entre ellas, se encuentran la gestión de los denominados Web Helpers, que es lo que nos interesa más
inmediatamente.
38
Dado que es la primera vez que acudimos a las labores de administración en éste proyecto, se nos
pide que creemos una contraseña y la confirmemos. Tras lo cual deberemos hacer clic sobre el botón
Create Password, que ya se encontrará activo.
39
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.
40
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 botón derecho del ratón sobre el título
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. Nótese, sin la barra de subrayado inicial, es
fundamental éste leve cambio.
41
42
Volvemos al explorador de Internet y nos disponemos a iniciar sesión en el ASP.NET Web Pages
Administration.
Escribimos la contraseña que habíamos creado y hacemos clic sobre Login.
Tras unos instantes se nos mostrará un listado de todos los paquetes instalables. En condiciones
generales, navegaríamos en búsqueda del deseado o utilizaríamos la opción Search.
43
En éste caso concreto el ASP.NET Web Helpers Library, en su última versión, es el primero mostrado.
Hacemos clic sobre el botón Install que se encuentra inmediatamente a su derecha.
44
En éste caso concreto el ASP.NET Web Helpers Library, en su última versión, es el primero mostrado.
Hacemos clic sobre el botón Install que se encuentra inmediatamente a su derecha.
45
Se nos pedirá confirmación para la instalación. Léase detenidamente que en efecto es ese el paquete
deseado y prosígase haciendo clic en el botón Install.
46
Al final ya podremos cerrar la sesión, haciendo clic en Logout, cerrar el explorador de Internet si no lo
estábamos 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 botón derecho del ratón sobre el título
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 recién instalado y que en la carpeta Admin se ha creado un nuevo archivo,
ahora hay dos, el de contraseñas y el de configuración de los paquetes.
47
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 implementación.
Soporte para Twitter
Con los ASP.NET Web Helpers podemos ya dar soporte para:
• Profile: Listado de Tweets de un usuario
• Search: Búsqueda de Tweets acerca de un determinado tema
• List: Listado de Tweets de una determinada lista de Twitter de un usuario
• TweetButton: Botón de crear un Tweet de la página
• FollowButton: Botón para seguir al usuario Twitter propietario de la página
Los pasos a seguir son muy sencillos:
1. Crear un archivo nuevo de tipo cshtml, al que daremos cómo nombre, por ejemplo, Twitter.
2. Sustituimos todo su código por el que se muestra en el listado que sigue.
3. Hacemos clic con el botón derecho del ratón sobre el nombre del archivo y seleccionamos la
opción 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>
48
<body> @Twitter.Profile("jpt219", width: 400, avat ars: true, numberOfTweets: 20, scrollBar: true) @Twitter.Search("Windows 8", width: 400, av atars: true, scrollBar: true) @Twitter.List("jpt219", "abierta") @Twitter.TweetButton() @Twitter.FollowButton("jpt219") </body> </html>
49
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 artículo posterior.
Simplemente implementará el LikeButton de FaceBook, para informar que esa página nos ha gustado,
siempre que el usuario que pulse el botón sea a su vez usuario de FaceBook –algo bien conocido por
todos-. Los pasos a seguir son los mismos que antes:
1. Crear un archivo nuevo de tipo cshtml, al que daremos cómo nombre, por ejemplo, FaceBook.
2. Sustituimos todo su código por el que se muestra en el listado que sigue.
3. Hacemos clic con el botón derecho del ratón sobre el nombre del archivo y seleccionamos la
opción Launch in browser. @{ } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> @Facebook.LikeButton() </body> </html>
Hacemos clic con el botón derecho del ratón sobre el nombre del archivo y seleccionamos la opción
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 más potente helper de la colección ASP.NET Web Helpers, es una muy simple
botonera que nos abre nuestra página a gran número de sites sociales de la red y eso con –
literalmente- una simple línea de código.
Los pasos a seguir son los descritos:
1. Crear un archivo nuevo de tipo cshtml, al que daremos cómo nombre, por ejemplo, Twitter.
2. Sustituimos todo su código por el que se muestra en el listado que sigue. Ponemos
"LinkShare", porque es el nombre de nuestra página, no porque sea el nombre del Helper.
Téngase bien en cuenta.
3. Hacemos clic con el botón derecho del ratón sobre el nombre del archivo y seleccionamos la
opción Launch in browser. @{ }
50
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> @LinkShare.GetHtml("LinkShare") </body> </html>
Hacemos clic con el botón derecho del ratón sobre el nombre del archivo y seleccionamos la opción
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)
• Reddit!
• Stumble it!
Búsquedas con Bing
Los ASP.NET Web Helpers permiten crear una SearchBox simple del buscador Bing de una manera
muy rápida y relativamente flexible.
Los pasos a seguir son los ya consabidos:
1. Crear un archivo nuevo de tipo cshtml, al que daremos cómo nombre, por ejemplo, Bing.
2. Sustituimos todo su código por el que se muestra en el listado que sigue.
3. Hacemos clic con el botón derecho del ratón sobre el nombre del archivo y seleccionamos la
opción Launch in browser .@{ Bing.SiteTitle = "Microsoft España"; Bing.SiteUrl = "http://www.microsoft.com/es-es" ; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> @Bing.SearchBox();
51
</body> </html>
Top Related