Tutorial Microsoft WebMatrix

56
Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO Página 1 Correo: [email protected] | [email protected] Twitter: @fredyfx

description

El presente tutorial fue expuesto en el IX Congreso Internacional de Ingeniería de Sistemas, Software y Telecomunicaciones de la Universidad Privada Antenor Orrego, espero sea de vuestra utilidad.

Transcript of Tutorial Microsoft WebMatrix

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 1

Correo: [email protected] | [email protected]

Twitter: @fredyfx

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 2

Tutorial Microsoft WebMatrix

Contenido Términos y Condiciones de uso .................................................................................... 4

Previo a la Instalación ................................................................................................. 4

Advertencia ............................................................................................................. 4

Instalación .............................................................................................................. 5

Introducción a Microsoft WebMatrix ............................................................................ 12

Características ......................................................................................................... 12

Elementos de la Interfaz ............................................................................................ 13

Iniciando el tutorial ................................................................................................... 15

HTML Básico ......................................................................................................... 15

Hojas de estilo ...................................................................................................... 16

Sintaxis Razor ....................................................................................................... 21

Creando una Interfaz consistente ............................................................................. 22

Header .............................................................................................................. 23

Footer ............................................................................................................... 25

Programación básica .............................................................................................. 25

intro.cshtml ........................................................................................................ 25

Formularios ........................................................................................................... 28

form.cshtml ....................................................................................................... 28

Creación de Base de datos ...................................................................................... 30

Operaciones CRUD ................................................................................................. 33

Create ............................................................................................................... 34

Read ................................................................................................................. 34

Update .............................................................................................................. 35

Delete ............................................................................................................... 36

Creación de estructura ........................................................................................... 37

Login .................................................................................................................... 37

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 3

_AppStart.cshtml ................................................................................................... 37

Carpeta account .................................................................................................... 38

new.cshtml ........................................................................................................ 38

login.cshtml ....................................................................................................... 40

logout.cshtml ..................................................................................................... 41

Carpeta crud ......................................................................................................... 41

read.cshtml ........................................................................................................ 42

create.cshtml ..................................................................................................... 43

update.cshtml .................................................................................................... 45

delete.cshtml ..................................................................................................... 47

Carpeta reports ..................................................................................................... 49

pricereport.cshtml ............................................................................................... 49

stockreport.cshtml .............................................................................................. 49

reports.cshtml ....................................................................................................... 49

error.cshtml .......................................................................................................... 50

web.config ............................................................................................................ 50

Finalizando el tutorial ................................................................................................ 51

Recursos Extras ....................................................................................................... 55

Palabras Finales ....................................................................................................... 56

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 4

Términos y Condiciones de uso [02 minutos]

Duración del tutorial: 1 Hora y 45 Minutos, 105 minutos en total distribuidos en: 15 de

introducción, 80 de programación y 10 de preguntas/respuestas. Si faltase tiempo, con

gusto las dudas que tengan serán respondidas mediante correo electrónico o vía twitter.

Para el presente tutorial no se requiere experiencia alguna en desarrollo web pero sí

conocimiento en desarrollo de aplicaciones, hoy aprenderemos con ejemplos simples y

directos, tengan en cuenta las siguientes recomendaciones para lograr un aprendizaje

exitoso:

Celulares en silencio.

Tener sus sentidos enfocados en el presente tutorial.

Leer detenidamente este material.

Prohibida la navegación en internet y reproducción de música.

Las preguntas se realizarán al final; se sugiere anotar cualquier tipo de duda para

luego hacerla saber; en caso falte tiempo para la resolución de dudas, vía correo

electrónico obtendrán respuestas.

Previo a la Instalación [02 minutos]

Actualmente sus computadoras ya se encuentran configuradas con todos los elementos que

utilizaremos, como verán en la imagen adjunta, tenemos instalado algunos módulos, como

el soporte para PHP, sí, tal y como están pensando: ¿Pero PHP no solo corre sobre un

apache? También corre sobre Internet Information Services (más conocido como IIS,

servidor web de Microsoft)

Advertencia [01 minuto]

Si también programan utilizando un servidor local como apache (con netbeans / eclipse /

wamp / xampp), tendrán problemas con el puerto 80 ya que lo estará usando el IIS

(referencia: localhost). Para solucionar este asunto tienen 2 opciones:

Configuran el apache para que utilice otro puerto.

Deshabilitar el IIS de manera temporal.

Por efectos de practicidad, veremos la 2da opción: nos dirigimos a Panel de control ->

Programas -> Programas y características -> Activar o desactivar las características de

Windows. Desmarcamos todo Internet Information Services, si requiere reinciar la

computadora, se reinicia y listo!

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 5

Instalación [00 minutos] [Cada quien ya tiene instalado en casa]

Para quienes no dispongan de Microsoft WebMatrix en sus ordenadores, podrán descargarlo

en el siguiente enlace: http://go.microsoft.com/fwlink/?LinkID=205867

Una vez descargado, procedemos a ejecutar:

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 6

Debemos tener en cuenta los requisitos que necesita Microsoft WebMatrix.

Una vez aceptado los requisitos, procederá a descargarlos.

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 7

Al final obtendremos un reporte sobre todo lo instalado en nuestra computadora.

Ahora tenemos instalado Microsoft WebMatrix, podemos agregar componentes adicionales:

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 8

Viene lo interesante, instalaremos un módulo de soporte de PHP, para ello, se busca primero

“PHP” y luego clickeamos en el botón “agregar”.

De manera automática, se agregarán las dependencias

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 9

Debemos tener en cuenta que también se necesitará el conector MySQL/Net; y si todavía no

tienes el MySQL Instalado, se recomienda instalar las GUI Tools como el MySQL Query

Browser y/o MySQL Workbench, debido a que si solo se instala el MySQL, tendrás el manejo

via consola y via WebMatrix únicamente.

Ahora procedemos a verificar los elementos añadidos

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 10

Y procederemos con la instalación!

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 11

Aceptamos los términos y condiciones de uso

Esperamos mientras se ejecuta la descarga de los componentes antes mencionados

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 12

Listo, tenemos completamente preparado nuestro entorno de trabajo

Introducción a Microsoft WebMatrix [02 minuto]

WebMatrix es un software gratuito que trae consigo un conjunto de herramientas para

facilitar el desarrollo web utilizando ASP.net o PHP y una gran interacción con aplicaciones

Open Source tales como sistemas de gestores de contenido como Wordpress, Drupal, entre

otros.

Características [03 minutos]

Soporta PHP.

Internet Information Services Express [IIS Express] -> Servidor Web

ASP.net (VB | C#) -> Web Framework.

SQL Server Compact Edition [SQL Server CE] -> Gestor de Base de Datos nativo,

también soporta conexión con MySQL [Requiere un conector adicional].

Análisis de SEO y Rendimiento.

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 13

Elementos de la Interfaz [05 minutos]

La intefaz que utiliza WebMatrix, es sencilla permitiendo una fácil navegación, del mismo

modo, los elementos son muy intuitivos, por lo cual permite adaptarse en poco tiempo, a su

vez, cabe mencionar que el menú principal que posee cuenta con estilo “Ribbon” (el cual

apareció en Office 2007).

Esta herramienta se divide prácticamente en 4 bloques:

Menú [Sección verde]

Elementos de trabajo [Sección naranja]

Contenido [Sección negra]

Panel [Sección azul]

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 14

A continuación se detallarán las interfaces:

Nos encontramos con las solicitudes, es decir, lo que pasa a

través del servidor mediante posts y gets; las opciones

generales del servidor: aquí es donde seleccionamos si

soporta ASP.net y/o PHP, si habilitamos SSL y qué páginas

serán mostradas primero.

Archivos, portapapeles, edición, vistas, iniciar visual studio,

cargar e instalar extensiones, son las opciones que

encontramos en esta sección.

Aquí podemos crear nuevas bases de datos tanto en SQL

Server CE como en MySQL [requiere extensión], del mismo

modo, crear tablas, modificar las conexiones, crear

consultas, vistas, procedimientos almacenados y realizar

una migración a SQL Server.

Se detallan informes de Rendimiento del sitio web, tanto de

tiempo, como de recursos, a su vez se obtiene un informe

SEO [Search Engine Optimization] para conocer qué tanta

aceptación tendrá nuestra web con los bots de los

buscadores.

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 15

Iniciando el tutorial [80 minutos]

El presente tutorial busca dar un panorama general sobre la programación de aplicaciones

web: login de acceso, la seguridad web basado en los roles de usuario, un mantenimiento a

una tabla (agregar, editar, buscar, eliminar) y un par de reportes gráficos.

1. [10 minutos] Conociendo HTML

2. [10 minutos] Estilo haciendo uso de CSS a los bloques.

3. [10 minutos] Sintaxis Razor

4. [05 minutos] Creación de una interfaz consistente.

5. [05 minutos] Programación básica.

6. [07 minutos] Formularios: envío de variables métodos GET y POST

7. [10 minutos] Creación de Base de Datos: Tabla productos.

8. [10 minutos] Operaciones CRUD [Create Read Update Delete].

9. [03 minutos] Creación de estructura del proyecto.

10. [10 minutos] Login de acceso al sistema -> Sesiones.

HTML Básico [10 minutos]

Los elementos HTML son componentes que especifican como los documentos HTML deben

ser construidos y que tipo de contenido debe ser posicionado en que lugar de un documento

HTML.Los nombres de elementos son encerrados entre picos, también denominados

paréntesis angulares: <NombreElemento>, los cuales son llamados etiquetas. Si el elemento

contiene otro contenido, este termina con una etiqueta de cierre, donde el nombre del

elemento es precedido por un slash: </NombreElemento>.

Etiquetas Descripción <a>

</a>

Es uno de los elementos más importantes del HTML. Es el encargado de crear

los típicos vínculos hipertextuales. Puede actuar como origen y como destino

de estos enlaces. Además son muy apreciadas sus capacidades dinámicas.

<br /> br de "break" - ruptura. Fuerza al ruptura (o salto) de linea. <div>

</div> div de "division" - división. Sirve para crear secciones o agrupar contenidos.

<fieldset>

/fieldset> El elemento fieldset (grupo de campos) permite organizar en grupos los

campos de un formulario.

<legend>

</legend> El elemento <legend> (leyenda) crea un título para un grupos los campos

(<fieldset>) de un formulario.

<p></p> El elemento p (párrafo) es el apropiado para distribuir el texto en párrafos.

<input> El elemento input (<input>) es usado para crear controles interactivos para

formularios basados en la web.

<img> Esta etiqueta inserta una imagen.

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 16

Hojas de estilo [10 minutos]

Comenzamos creando la carpeta

“style” y dentro de ella ubicaremos

a nuestra hoja de estilos *(CSS)

llamada StyleSheet.css

Luego de ello procedemos a definir

las características de los elementos

HTML.

*El código de nuestro CSS se encuentra líneas abajo.

Otra característica de Microsoft WebMatrix en la edición de hojas de estilo es su sencillez

para la definición de color por ejemplo, además de tener intellisense activado para la

rápida búsqueda de propiedades, te especifica en la descripción de cada elemento.

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 17

A continuación presentamos el código de nuestra hoja de estilo llamada StyleSheet.css

/*Con esto definimos valores generales*/ * { margin:0; padding:0; } body, div, span, p, a, img, ul, ol, li, table, th, tr, td, form, fieldset, legend, dl, dt, dd, blockquote, applet, object { border:0; } body { padding: 15px; font: 12px/1.4 Verdana, Helvetica, sans-serif; font-size: 12px; color: #000; width: 960px; background-color: rgba(0, 0, 0, 0.07); } #header{ width: 960px; height: 150px; background-color: #235980; color: #fff; } #login{ float: right; padding-top: 20px; padding-right: 20px; clear: none; } #titulo{ clear: none; padding: 20px; } #menu{ background-color: #235980; width: 960px; color: #fff; } #menu li{ border-color: #ff6a00; border-style: solid; display: inline; padding: 10px;

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 18

font-size: 16px; color: #fff; } #help li{ font-size: 10px; display: inline; } a:hover { background-color: #2586d7; color: #ecff00; } a { color:#fff; text-decoration:none; border:none; } .enlace{ color: #000; } .footer { background-color: #235980; text-align: center; color: #fff; font-size: 12px; margin-top: 20px; padding: 5px; } img a { border:none; } h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, Sans Serif; margin:0 0 10px 0; } h1 { font-size:230%; } h2 { font-size:183%; font-weight: bold; }

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 19

h3 { font-size:140%; font-weight: bold; } h4 { font-size:120%; font-weight: bold; } h5 { font-size:100%; } h1.title { border-bottom:1px dotted #84a1af; margin:0 0 20px 0; } label { float:left; width: 15em; margin-right: 6em; } fieldset { padding: 1em; border: 1px solid; width: 35em; } legend { padding: 2px 4px; border: 1px solid; font-weight:bold; } /* Para resaltar los errores de validacion*/ .validation-summary-errors { font-weight:bold; color:red; font-size: 11pt; padding-left: 20px; float: right; margin: 50px 80px 0px 0px; } /* Para el slider*/ /* el rectangulo contenedor */ #slider_container_1 {

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 20

height: 375px; margin:0 auto; padding: 10px; width: 500px; -moz-border-radius: 10px 10px; -webkit-border-radius: 10px 10px; border-radius: 10px 10px; } /* el rectangulo con las imagenes */ #SliderName { height: 375px; margin: auto; width: 500px; } /* las flecha para ir hacia atras (son imagenes de 24x24 */ .SliderNamePrev, .SliderNameNext { background: url() no-repeat center center; display: block; height: 24px; position: absolute; text-decoration: none; top: 155px; width: 24px; } /* la flecha para ir hacia atras */ .SliderNamePrev { background-image: url('../images/left.png'); left: 10px; } /* la flecha para ir hacia adelante*/ .SliderNameNext { background-image: url('../images/right.png'); right: 10px; } /* el rectangulo con los textos */ .SliderNameDescription { font-family: Verdana; font-size: 25px; padding: 5px; text-align: left; } /* la barra de navegacion inferior */ #SliderNameNavigation { background-color: #FFF; height: 0px; margin: 10px 0 0 0;

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 21

text-align: center; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } /* Publicidad de las comunidades */ .cherryL{ float: left; } .cherryR{ float: right; }

Sintaxis Razor [10 minutos]

La sintaxis Razor ofrece todo el poder de

ASP.NET, pero con una sintaxis simplificada que

es más fácil de aprender, de tal manera que

comprendes mejor la lógica de la programación

llegando a ser altamente productivos. Con

mucho esfuerzo, dedicación y constante

práctica llegaremos a ser ¡Expertos en

desarrollo web! A pesar de que esta sintaxis es

muy simple de usar, su relación familiar con

ASP.NET y el framework .NET significa que a

medida que los sitios que desarrollaremos se

vuelven más sofisticados, tenemos el poder

para lograrlo.

Para conocer esta sintaxis, debemos tener en cuenta que:

Las declaraciones comienzan con el caracter “arroba” @

Se encierran bloques de código entre llaves.

Dentro de un bloque, se termina cada instrucción de código con un punto y coma,

excepto si está mezclado con código HTML.

Se colocan valores literales entre comillas.

El código es sensitivo como en C#.

Gran parte de su codificación implica objetos.

Los espacios en blanco no afectan el funcionamiento.

Razor Sintaxis

ASP.net

.Net Framework

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 22

<!-- Single statement blocks --> @{ var numero = 7; } @{ var saludo = "Greetings World, we are programmers!"; } <!-- Inline expressions --> <p>El valor de su cuenta es: @numero </p> <p>Su mensaje : @mensaje</p> <!-- Multi-statement block --> @{

var diasemana = DateTime.Now.DayOfWeek; var saludocompleto = saludo + " Hoy es: " + diasemana; var saludoCompleto = saludo + " este es otro saludo";

}

Creando una Interfaz consistente [05 minutos]

¿Se imaginan estar programando los bloques o secciones por

página sin la necesidad de tener todo en cada una? Seamos

más productivos, ahorremos tiempo y reutilicemos código!

Dentro de la carpeta “style”, creamos 3 archivo:

header.cshtml

slider.cshtml

footer.cshtml

StyleSheet.css

Todas las páginas que veremos en este tutorial tendrán el siguiente esquema:

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 23

Header

Nuestro “Header” contiene un pequeño formulario de login, por lo cual se optó de fusionar

junto con el menú en un mismo archivo llamado “header.cshtml” ubicado dentro de la

carpeta style:

@{ var mensaje = "Tutorial Microsoft WebMatrix"; } <head> <meta charset="utf-8"> <meta name=”description” content="tutorial desarrollado para el IX Congreso Internacional de Ingeniería de Software, Sistemas de Información y Telecomunicaciones UPAO 2012"> <title >:: IX Congreso Sistemas, Software, Telecomunicaciones UPAO::</title> <link rel="stylesheet" type="text/css" media="screen" href="@Href("~/style/StyleSheet.css")" /> <script src="@Href("~/js/sliderman.1.3.6.js")" type="text/javascript"></script> </head> <div id="header"> <div id="login"> @if(WebSecurity.IsAuthenticated) { <p>Bienvenido, @WebSecurity.CurrentUserName |

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 24

<a href="@Href("~/account/logout.cshtml")">Salir del sistema</a></p> } else { <form method="post" action="@Href("~/account/login.cshtml")"> Usuario: <input type="text" name="username"> Password: <input type="password" name="password"> <input type="submit" title="Acceder al sistema"> </form> <div id="help"> <ul> <li><a href="#">Olvidé mi password</a></li> <li><a href="@Href("~/account/new.cshtml")">| Cuenta nueva</a></li> <li> | Exactamente son: @DateTime.Now</li> </ul> </div> }</div> <div id="titulo"> <a href="@Href("~/index.cshtml")"><h1>@mensaje</h1></a> <h2><a href="http://www.upao.edu.pe/congreso_sistemas/2012" target="_blank"> IX Congreso Internacional de Ingeniería de Software, Sistemas de Información y Telecomunicaciones UPAO 2012 </a> </h2> </div> </div> <br /> <div id="menu"> <ol> <li><a href="@Href("~/intro.cshtml")">Introduccion</a></li> <li><a href="@Href("~/form.cshtml")">Formularios</a></li> <li><a href="@Href("~/crud/read.cshtml")">Operaciones CRUD</a></li> <li><a href="@Href("~/reports.cshtml")">Reportes</a></li> </ol> </div>

Dando como resultado:

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 25

Detalle importante:

La utilización de una referencia @Href("~/intro.cshtml") crea una URL del tipo:

http://<server>/intro.cshtml es muy útil ya que se convierte simple nuestra

organización de archivos.

Footer <div class="footer"> ® Tutorial Desarrollo de Aplicaciones Web con Microsoft WebMatrix © Todos los derechos reservados - 2012 </div>

El resultado:

Programación básica [05 minutos]

A continuación se presenta el archivo intro.cshtml, el cual se creará en la raíz del proyecto

intro.cshtml @{ /* Response.CacheControl = "no-cache"; if (!WebSecurity.IsAuthenticated) { var returnUrl = "~/index.cshtml"; Response.Redirect(returnUrl); } */ } <!DOCTYPE html> <html lang="es-pe"> @RenderPage("~/style/header.cshtml") <body> <h1>Comenzando a programar en la Web!</h1> <p>Esperamos que el presente tutorial sea de su agrado</p> @{ // Estructuras condicionales simples var saldo = 4.99;

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 26

if(saldo == 0) { <p>Tienes cero nuevos soles de saldo.</p> } else if (saldo > 0 && saldo <= 5) { <p>Tu saldo @saldo es muy bajo.</p> } else { <p>Tu saldo es: $@saldo</p> } // Estructuras condicionales múltiples var weekday = "Miercoles"; var greeting = ""; switch(weekday) { case "Lunes": greeting = "Iniciamos la semana con todo el power!"; break; case "Martes": greeting = "Segundo día, vamos avanzando!"; break; case "Miercoles": greeting = "Día de tutoriales!"; break; default: greeting = "Algún otro día debe ser"; break; } <p>Veamos, @weekday, el mensaje para hoy es: @greeting</p> // Estructuras repetitivas for(var i = 0; i < 4; i++) { <p>Linea #: @i</p> } var countNum = 0; while (countNum < 5) { countNum += 1; <p>Line #@countNum: </p> } // Arreglos { <h3>Team Members</h3> string[] teamMembers = {"Matt", "Joanne", "Robert", "Nancy"}; foreach (var person in teamMembers) { <p>@person</p> } }

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 27

//Diccionario de datos { var myScores = new Dictionary<string, int>(); myScores.Add("test1", 71); myScores.Add("test2", 82); myScores.Add("test3", 100); myScores.Add("test4", 59); <p>Mi nota en el test 3 es: @myScores["test3"]%</p> @(myScores["test4"] = 79); <p>Mi nota corregida en el test 4 es: @myScores["test4"]%</p> } // Manejo de excepciones float numeroa = 5; float numerob= 0; float resultado = numeroa/numerob; try{ <p>@resultado</p> }catch(Exception ex ){ <b>Errores:</b> @ex.Message; <p>@ex.Data</p> }finally{ } } @RenderPage("~/style/footer.cshtml") </body> </html> Dando como resultado:

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 28

Formularios [07 minutos] [Métodos POST y GET]

En la programación de aplicaciones web, tenemos que tener en cuenta que son envíos de

peticiones http al servidor, por lo que se utilizan POST y GET, ambos envían las variables, a

diferencian de GET que hace uso del paso de las mismas vía url, POST no lo hace. Luego de

programar form.cshtml podremos ver con mayor claridad la diferencia mencionada.

form.cshtml

Editamos el archivo form.cshtml con el siguiente código:

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 29

@{ /* Response.CacheControl = "no-cache"; if (!WebSecurity.IsAuthenticated) { var returnUrl = "~/index.cshtml"; Response.Redirect(returnUrl); } */ } <!DOCTYPE html> <html> @RenderPage("/style/header.cshtml") <body> <h1>Bienvenido al tutorial</h1> <div style="float: left; margin-right: 10px;"> <fieldset> <form action="" method="post"> <div> Ingrese su nombre: <input type="text" name="vnombre" value=""> <input type="submit" value="Enviar!" /> </div> <div> @if (IsPost){ if (Request["vnombre"].IsEmpty()){ <p style="color: #ff0000">*No olvide ingresar su nombre</p> }else{ <p> Bienvenido: <b> @Request["vnombre"] ! </b> Prepárate, vamos a programar en la web </p> } } </div> </form> </fieldset> <br /> </div> <fieldset> <form action="" method="get"> Numero A:<input type="text" name="numeroa" size="4" /> Numero B:<input type="text" name="numerob" size="4" /> <input type="submit" value=" La suma es: "/> @{ float numeroa = Request.QueryString["numeroa"].AsFloat(); float numerob = Request.QueryString["numerob"].AsFloat(); float resultado = numeroa+numerob; if(Request.QueryString["numeroa"].IsEmpty() || Request.QueryString["numerob"].IsEmpty()){ <p style="color: #ff0000">*No olvide ingresar datos numéricos</p> }else{

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 30

<b>@resultado</b> } } </form> </fieldset> </div> @RenderPage("/style/footer.cshtml") </body> </html>

Dando como resultado:

Haciendo uso de GET

Creación de Base de datos [10 minutos] [Haciendo uso de SQL Server CE]

En esta ocasión creamos una base de datos llamada “Tutorial” haciendo uso de SQL Server

Compact Edition, del siguiente modo:

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 31

Primero seleccionamos “Base

de Datos” en el panel ubicado

en la parte inferior izquierda

Segundo, seleccionamos base de datos de SQL Server CE,

para que aparezca MySQL, se requiere un conector

adicional.

Tercero, colocamos un nombre a nuestra base de datos,

en este caso, “Razor” como se ve en la imagen de la

derecha.

Ahora que ya disponemos de la base de datos,

procedemos a crear una nueva tabla ya sea utilizando click

derecho y “Nueva tabla” ó directamente en el botón

seleccionado “Nueva tabla”

En la creación de tablas, debemos tener siempre en cuenta cuáles serán nuestras llaves

primarias, y si serán autogeneradas (1, 2, 3, 4…) por la misma base de datos.

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 32

Como verán en las imágenes con ayuda de un zoom, se define el nombre del campo de la

tabla, luego se selecciona el tipo de dato, después se marcan los checks siguientes, lo que

genera el bloqueo de “Permitir valores NULL”, finalmente nos queda nuestra tabla productos

con los campos: id, nombre, descripción, precio, stock.

Ahora a poblar la tabla! Para ello nos dirigimos hacia “Datos”, y bueno, insertamos datos:

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 33

Operaciones CRUD [10 minutos]

Se denominan operaciones CRUD por el siguiente detalle:

Create Read Update Delete, es decir, operaciones de

inserción, selección, actualización [ó modificación] y

eliminación de datos de una tabla en una base de datos, para

ello utilizaremos lenguaje SQL (Structured Query Language).

Anteriormente visualizamos la creación de una base de datos

junto con una tabla y su respectivo poblamiento en directo.

Veamos cómo trabaja una base de datos y luego crearemos

los formularios!

Para manipular los datos en una base de datos, la lógica es:

1. Abrimos conexión a la base de datos.

2. Establecemos el Query (Consulta SQL).

3. Ejecutamos el Query.

4. Obtenemos resultado de la ejecución.

5. Cerramos la conexión.

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 34

Create

Sintaxis: INSERT INTO <NombreTabla> (campo1, campo2, …) VALUES (valor1, valor2, …) Ejemplo: INSERT INTO productos (nombre, descripcion, precio, stock) VALUES ('pilas duracell','baterias de larga duracion',2.50,40)

Read

Al igual que un “Hola mundo” que es la primera línea de código que vemos al iniciar en el

mundo de la programación, con las consultas en base de datos iniciamos con un “SELECT *

FROM <NombreTabla>”, esto quiere decir que seleccionará todos los campos que se

encuentren en la tabla definida.

Detalle importante: No es una buena práctica (Referencia: Situaciones de rendimiento), por

lo que se recomienda colocar los campos a seleccionar.

Sintaxis: SELECT <campo1>, <campo2>,<campo3>,<campoN-1>, <campoN> FROM <NombreTabla> Ejemplo: SELECT id, nombre, descripcion, precio, stock FROM productos

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 35

Update

Con el comando Update actualizaremos los datos, para ello necesitamos la respuesta a la

pregunta ¿Qué dato? O ¿Qué datos? De esta respuesta establecemos la condición necesaria.

Sintaxis: UPDATE <tabla> SET <campo1> = <nuevo valor>, <campo2> = <nuevo valor> WHERE <condición> Ejemplo 01:

UPDATE productos SET nombre='bluetooth', descripcion='sinmark v2', precio=25.70, stock=20 WHERE id=5 Ejemplo 02: UPDATE productos SET stock=100 WHERE id<15

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 36

Delete

Borraremos los datos y la pregunta al igual que en el caso de actualización: ¿Qué dato? O

¿Qué datos? Veamos!

Sintaxis: DELETE FROM <NombreTabla> WHERE <Condición> Ejemplo: DELETE FROM productos WHERE id=6

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 37

Creación de estructura [03 minutos] [Creamos las carpetas, vamos archivo por archivo]

Esta es la estructura final de nuestro pequeño tutorial:

Login [10 minutos]

Para tener un login, primero que debemos hacer es tener una tabla llamada “usuarios” con

las siguientes características:

Campo Tipo de

dato

Valor

predeterminado

¿Es clave

primaria?

¿Es

identidad?

Permitir

valores

NULL

usuarioid int Sí Sí No

email nvarchar(50) NULL No No No

_AppStart.cshtml Ahora procederemos a crear un archivo llamado “_AppStart.cshtml”, este archivo se

ejecutará al iniciar nuestra aplicación, el código que contiene es el siguiente:

@{ WebSecurity.InitializeDatabaseConnection("Razor", "usuarios", "usuarioid", "email", true); } <!DOCTYPE html> <html lang="es-pe">

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 38

<head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html>

Estas 3 tablas adicionales fueron generadas gracias al

archivo anterior, contienen una lógica básica en la seguridad:

Membership, que contiene la contraseña de acceso y otros

detalles, los roles de usuario, y la tabla de mezcla entre

usuarios y roles.

Carpeta account

Archivo para crear nuevas cuenta de usuario, en la raíz del proyecto crearemos una carpeta

llamada account con los siguientes archivos

new.cshtml @{ var username = ""; var password = ""; var confirmPassword = ""; var errorMessage = ""; if(!IsPost) { if(WebSecurity.IsAuthenticated){ errorMessage = String.Format("Estás actualmente logeado. (Usuario: {0})", WebSecurity.CurrentUserName); } } if(IsPost) { WebSecurity.Logout(); username = Request["username"]; password = Request["password"]; confirmPassword = Request["confirmPassword"]; if(username.IsEmpty()) { ModelState.AddError("username", "Complete el nombre de usuario"); }

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 39

if(password.IsEmpty() || confirmPassword.IsEmpty()) { ModelState.AddError("password","Complete su contraseña"); } if(password != confirmPassword) { ModelState.AddError("password", "*Debe ser la misma contraseña."); } if(!username.IsEmpty()) { if(WebSecurity.UserExists(username)) { ModelState.AddError("username","el usuario ya existe"); }else { if(ModelState.IsValid) { WebSecurity.CreateUserAndAccount(username,password,null,false); WebSecurity.Login(username, password, true); Response.Redirect("~/intro.cshtml"); } } } } } <!DOCTYPE html> <html lang="es-pe"> @RenderPage("~/style/header.cshtml") <body> <h1>Nuevo usuario</h1> <div style="float: left;clear: none"> <form method="post"> <fieldset> <legend>Registros</legend> <div style="clear: none;"> <label>Usuario (email):</label> <input name="username" type="text" size="50" value="" /> </div> <div> <label>Password:</label> <input type="password" name="password" id="password" size="50" value="" /> </div> <div> <label>Confirmación de Password:</label> <input type="password" name="confirmPassword" id="confirmPassword" size="50" value="" /> </div> <div> <br /> <input type="submit" value="Registrar nuevo usuario!"

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 40

size="50"/> <a href="@Href("~/index.cshtml")"><input type="button" value=" Regresar " /></a> </div> </fieldset> </form> </div> <p>@Html.ValidationSummary("Mensajes:")</p> <div style="clear: both;"> <br /> @RenderPage("~/style/footer.cshtml") </div> </body> </html>

login.cshtml

@{ var username = ""; var password = ""; var errorMessage = ""; if(IsPost){ username = Request["username"]; password = Request["password"]; if(username.IsEmpty() || password.IsEmpty()){ Response.Redirect("~/index.cshtml"); }else{ if(WebSecurity.Login(username,password,true)){ Response.Redirect("~/intro.cshtml"); }else { errorMessage = "Login was not successful."; } } } } <!DOCTYPE html> <html lang="es-pe"> @RenderPage("~/style/header.cshtml") <body> <h1>Login</h1> <fieldset> <form method="post"> @if(WebSecurity.IsAuthenticated){ <p>You are currently logged in as @WebSecurity.CurrentUserName. <a href="@Href("~/Logout")">Log out</a>

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 41

</p> } <p> <label for="username">Username:</label><br/> <input type="text" name="username" id="username" value="" /> </p> <p> <label for="password">Password:</label><br/> <input type="password" name="password" id="password" value="" /> </p> <p> <input type="submit" value="Submit" /> </p> <p style="color: #000">No user name? <br /> <a style="color: #000" href="@Href("~/account/new.cshtml")"> >>Register<<</a></p> <p style="color: #000"> <a style="color: #000" href="@Href("~/index.cshtml")">Regresa al inicio</a></p> </form> </fieldset> <p> @if(errorMessage != ""){ <span class="errorMessage">@errorMessage</span> } </p> @RenderPage("~/style/footer.cshtml") </body> </html>

logout.cshtml

@{ WebSecurity.Logout(); Response.Redirect("~/index.cshtml"); }

Carpeta crud

Debemos tener nuestra base de datos creada y con algunos datos ingresos como en el

ejemplo antes mostrado.

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 42

read.cshtml

@{ Response.CacheControl = "no-cache"; if (!WebSecurity.IsAuthenticated) { var returnUrl = "~/index.cshtml"; Response.Redirect(returnUrl); } var db = Database.Open("Razor"); var selectQueryString = "SELECT * FROM productos ORDER BY id"; db.Close(); } <!DOCTYPE html> <html lang="es-pe"> @RenderPage("../style/header.cshtml") <body> <div id="contenido"> <h1>Listando Productos</h1> <form action="create.cshtml"> <button onclick="">Agregar nuevo producto</button> </form> <br /> <table> <thead> <tr> <th>Id</th> <th>Producto</th> <th>Descripcion</th> <th>Precio</th> <th>Stock</th> <th>Operaciones</th> </tr> </thead> <tbody> @foreach(var row in db.Query(selectQueryString)){ <tr> <td>@row.id</td> <td>@row.nombre</td> <td>@row.descripcion</td> <td>@row.precio</td> <td>@row.stock</td> <td><a class="enlace" href="@Href("~/crud/update.cshtml",row.id)">Editar</a> | <a class="enlace" href="@Href("~/crud/delete.cshtml", row.id)">Eliminar</a></td> </tr> }

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 43

</tbody> </table> </div> @RenderPage("/style/footer.cshtml") </body> </html>

create.cshtml

@{ Response.CacheControl = "no-cache"; if (!WebSecurity.IsAuthenticated) { var returnUrl = "~/index.cshtml"; Response.Redirect(returnUrl); } // Abrimos conexión a base de datos var db = Database.Open("Razor"); var titulo = "Agregando nuevo producto"; // Recibimos las variables var nombre = Request["nombre"]; var descripcion = Request["descripcion"]; var precio = Request["precio"]; var stock = Request["stock"]; // Si se ha recargado la página if (IsPost) { // Leemos el nombre del producto nombre = Request["nombre"]; // Validamos que contenga datos if (nombre.IsEmpty()) { ModelState.AddError("nombre", "Se necesita el nombre del producto."); } descripcion = Request["descripcion"]; if (descripcion.IsEmpty()) { ModelState.AddError("descripcion", "Se necesita la descripcion del producto."); } stock = Request["stock"]; if (stock.IsEmpty()) { ModelState.AddError("stock", "Se necesita el stock del producto."); }

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 44

precio = Request["precio"]; if (precio.IsEmpty()) { ModelState.AddError("precio", "Se necesita el precio del producto."); } if(ModelState.IsValid) { // Establecemos la consulta de inserción. var insertQuery = "INSERT INTO Productos (nombre, descripcion, precio, stock) " + "VALUES (@0, @1, @2, @3)"; db.Execute(insertQuery, nombre, descripcion, precio.AsFloat(), stock.AsInt()); // Mostramos la página que contiene la lista de productos. Response.Redirect(@Href("~/crud/read.cshtml")); db.Close(); } } } <!DOCTYPE html> <html> @RenderPage("../style/header.cshtml") <body> <h1>@titulo</h1> <div style="float: left;clear: none"> <form method="post" action=""> <fieldset> <legend>Registros</legend> <div style="clear: none;"> <label>Nombre:</label> <input name="nombre" type="text" size="50" value="@nombre" /> </div> <div> <label>Descripcion:</label> <input name="descripcion" type="text" size="50" value="@descripcion" /> </div> <div> <label>Precio:</label> <input name="precio" type="text" size="50" value="@precio" /> </div> <div> <label>Stock:</label> <input name="stock" type="text" size="50" value="@stock" /> </div> <div> <br /> @if ( Roles.IsUserInRole("master")) { <input type="submit" value=" Registrar nuevo producto! " size="50"/>

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 45

}else{ <input type="submit" value=" Registrar nuevo producto! " disabled="disabled" size="50"/> } <a href="@Href("~/crud/read.cshtml")"><input type="button" value=" Regresar " /></a> </div> </fieldset> </form> </div> <p>@Html.ValidationSummary("Errors encontrados:")</p> </div> <div style="clear: both;"> <br /> @RenderPage("~/style/footer.cshtml") </div> </body> </html>

update.cshtml

@{ Response.CacheControl = "no-cache"; if (!WebSecurity.IsAuthenticated) { var returnUrl = "~/index.cshtml"; Response.Redirect(returnUrl); } var db = Database.Open("Razor"); var consulta = "SELECT * FROM productos WHERE id=@0"; var productoid = UrlData[0]; if (productoid.IsEmpty()) { Response.Redirect(@Href("~/crud/read.cshtml")); } var row = db.QuerySingle(consulta, productoid); var nombre = row.nombre; var descripcion = row.descripcion; var precio = row.precio; var stock = row.stock; if (IsPost) {

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 46

// Leemos el nombre del producto nombre = Request["nombre"]; if (String.IsNullOrEmpty(nombre)) { ModelState.AddError("nombre", "Se necesita el nombre del producto."); } descripcion = Request["descripcion"]; if (String.IsNullOrEmpty(descripcion)) { ModelState.AddError("descripcion", "Se necesita la descripcion del producto."); } stock = Request["stock"]; if (String.IsNullOrEmpty(stock)) { ModelState.AddError("stock", "Se necesita el stock del producto."); } precio = Request["precio"]; if (String.IsNullOrEmpty(precio)) { ModelState.AddError("precio", "Se necesita el precio del producto."); } if(ModelState.IsValid) { var updateQueryString = "UPDATE productos SET nombre=@0, descripcion=@1, precio=@2, stock=@3 WHERE id=@4" ; db.Execute(updateQueryString, nombre, descripcion, precio, stock, productoid); Response.Redirect(@Href("~/crud/read.cshtml")); } } } <!DOCTYPE html> <html> @RenderPage("../style/header.cshtml") <body> <h1>Editando producto</h1> <p>@Html.ValidationSummary("Errors encontrados:")</p> <form method="post" action=""> <fieldset> <legend>Actualización de producto</legend> <div> <label>Nombre:</label> <input name="nombre" type="text" size="50" value="@nombre" /> </div> <div> <label>Descripcion:</label> <input name="descripcion" type="text" size="50" value="@descripcion"

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 47

/> </div> <div> <label>Precio:</label> <input name="precio" type="text" size="50" value="@precio" /> </div> <div> <label>Stock:</label> <input name="stock" type="text" size="50" value="@stock" /> </div> <div> <br /> @if ( Roles.IsUserInRole("master")) { <input type="submit" value=" Guardar edición " size="50"/> }else{ <input type="submit" value=" Guardar edición " disabled="disabled" size="50"/> } <a href="@Href("~/crud/read.cshtml")"><input type="button" value=" Regresar " /></a> </div> </fieldset> </form> @RenderPage("~/style/footer.cshtml") </body> </html>

delete.cshtml

@{ Response.CacheControl = "no-cache"; if (!WebSecurity.IsAuthenticated) { var returnUrl = "~/index.cshtml"; Response.Redirect(returnUrl); } var db = Database.Open("Razor"); var productoid = UrlData[0]; if (productoid.IsEmpty()) { Response.Redirect(@Href("~/crud/read.cshtml")); } var producto = db.QuerySingle("SELECT * FROM productos WHERE ID = @0", productoid);

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 48

if( IsPost && !productoid.IsEmpty()) { var deleteQueryString = "DELETE FROM productos WHERE Id=@0"; db.Execute(deleteQueryString, productoid); Response.Redirect("~/crud/read.cshtml"); } } <!DOCTYPE html> <html lang="es-pe"> @RenderPage("../style/header.cshtml") <body> <h1>Borrando productos - Confirmación</h1> <form method="post" action=""> <h3>¿Estás seguro que deseas borrar el siguiente producto?</h3> <fieldset> <p> Nombre: @producto.nombre <br /> Descripcion: @producto.descripcion <br /> Precio: @producto.precio <br /> Stock: @producto.stock <br /> </p> @if ( Roles.IsUserInRole("master")) { <input type="submit" value=" SI " /> }else { <input type="submit" value=" SI " disabled="disabled" /> } <a href="@Href("~/crud/read.cshtml")"><input type="button" value=" NO " /></a> </fieldset> </form> @RenderPage("~/style/footer.cshtml") </body> </html>

Como verán, se encuentran con botones deshabilitados, los

cuales ejecutan los comandos necesarios para interactuar

con la base de datos, lo que se tiene que hacer es crear un

rol llamado “master”

Se requiere haber creado un usuario antes, el cual será del

tipo administrador, en este caso lo definimos como “master”,

ir a la tabla siguiente y actualizarlos datos del UuserId con el

RoleId.

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 49

Carpeta reports

pricereport.cshtml @{ var db = Database.Open("Razor"); var data = db.Query("SELECT nombre, precio FROM productos"); var myChart = new Chart(width: 600, height: 400, theme:ChartTheme.Green) .AddTitle("PRECIOS de los productos de la tienda Razor") .DataBindTable(dataSource: data, xField: "nombre") .Write(); }

stockreport.cshtml @{ var db = Database.Open("Razor"); var data = db.Query("SELECT nombre, stock FROM productos"); var myChart = new Chart(width: 600, height: 400) .AddTitle("STOCK de los productos de la tienda Razor") .DataBindTable(dataSource: data, xField: "nombre") .Write(); }

reports.cshtml En la raíz del proyecto va este archivo con el siguiente código:

<!DOCTYPE html> <html lang="es-pe"> @RenderPage("~/style/header.cshtml") <body> <h1>Reportes Gráficos</h1> <form method="post"> <fieldset> <legend>Reportando</legend> Seleccione tipo de reporte: <select name="opcionreporte"> <option value="stock">Stock de productos</option> <option value="precio">Precio de productos</option> </select> <input type="submit" onclick="" value="Obtener Reporte" > </fieldset> </form> @{ if(IsPost) { var or = Request["opcionreporte"]; if(or=="stock")

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 50

{ <p>El reporte es:</p> <img src="/reports/stockreport.cshtml" alt="grafico" /> } if(or=="precio") { <p>El reporte es:</p> <img src="/reports/pricereport.cshtml" alt="grafico" /> } } } @RenderPage("~/style/footer.cshtml") </body> </html>

error.cshtml Este archivo, también va dentro de la raíz del proyecto.

<!DOCTYPE html> <html lang="es-pe"> @RenderPage("~/style/header.cshtml") <body> <h1>Error 404</h1> <fieldset> <legend>Not Found</legend> <p>Lo sentimos, la página solicitada no existe</p> </fieldset> @RenderPage("/style/footer.cshtml") </body> </html>

web.config Al igual que el anterior archivo, también va dentro de la raíz.

<?xml version="1.0" encoding="utf-8"?> <configuration> <system.web> <compilation debug="false" targetFramework="4.0" /> <customErrors mode="On" defaultRedirect="error.cshtml" /> </system.web> </configuration>

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 51

Finalizando el tutorial

Para publicar el sitio creado en internet necesitamos tener un hosting, creamos una cuenta

trial de 30 días gratis (teniendo en cuenta que luego dicha cuenta deberá ser eliminada

manualmente antes que los 30 días terminen, para evitar cobros por parte del servidor

hacia ustedes). En el siguiente enlace: http://hosting.parking.ru/webmatrix.aspx

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 52

En la sección de Services, nos dirigimos hacia Web, desplegando los sub-items que hay

dentro, en la sección derecha clickeamos en Get XML for WeMatrix

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 53

Ahora, en nuestra

herramienta, vamos a la

opción de publicar, ubicada

en la parte superior del

menú principal:

Aparecerán las siguientes opciones:

Luego de haber seleccionado el archivo que descargamos con anterioridad, se mostrará la

siguiente ventana:

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 54

Continuamos con la tarea de publicación:

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 55

En la parte inferior de WebMatrix, encontramos el avance de la publicación.

Al final de la publicación, la herramienta nos dará un Log (archivo que guarda todo tipo de

movimiento, indicando fechas/horas, y tareas efectuadas principalmente, puede ser vía

texto plano o mediante algún tipo de formato especial como HTML. NO confundir con meta-

dato)

Recursos Extras

Microsoft Virtual Academy http://www.microsoftvirtualacademy.com

Elementos HTML https://developer.mozilla.org/es/docs/HTML/Elemento

Comunidad Académica en Tecnologías Microsoft “UPAO.net“

http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

Comunidades Microsoft Perú http://www.facebook.com/CMSPeru

Microsoft Geeks http://geeks.ms

Blog de Rodrígo Díaz Concha, Microsoft MVP ASP.net/Silverlight

http://rdiazconcha.com

Blog de Gonzalo “Chalalo” Pérez Correa, Microsoft MVP ASP/ASP.NET http://chalalo.cl

Blog de Peter Concha – MSP de Ecuador http://ptrconcha.wordpress.com/

W3Schools http://www.w3schools.com/aspnet/razor_intro.asp

Mike's web log

http://www.mikepope.com/blog/displayblog.aspx?category=webmatrix

Tutorial Inicial de ASP.net http://www.asp.net/web-pages/content-guide

Comunidad Académica Microsoft UPAO.net | IEEE Computer Society UPAO

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

Página 56

Palabras Finales

Gracias por su paciencia, dedicación y esfuerzo, espero que hayan aprendido cómo se

trabaja una aplicación en la web, ahora es su turno de compartir el conocimiento en su

grupo de amigos.

Internet es mucho más que ratos de juego y ocio en las redes sociales, éstas mismas tienen

gran material de cientos, miles y millones de cibernautas que también van compartiendo

conocimiento, el punto clave es buscar y de preferencia en inglés, si desconoces el inglés, no

hay problema, en internet también se aprende idiomas.

Siempre busquen, investiguen más allá de lo que las clases pueden llegar, no veamos la

competencia entre nuestros entornos, la verdadera competencia radica en superarse a uno

mismo día a día.

En Facebook existen grupos de programación bastante buenos tanto en inglés como en

español, en Youtube hay gran cantidad de tutoriales desde muy básicos hasta niveles

increíbles, en Twitter, por medio de #hastags encuentras información en directo y las

personas responden con bastante respeto.

Y bueno, ya estando en el final de la redacción del tutorial, los invito a participar de la

comunidad en tecnologías Microsoft UPAO.net y/o formar parte de la IEEE Computer Society

UPAO, del mismo modo los invito visitar un proyecto blogero: www.codesinapsys.com y sin

nada más que agregar me despido hasta una próxima ocasión.

¡Saludos!

Atte. Fredy Rubén Guibert Díaz.

Fundador de la Comunidad en Tecnologías Microsoft UPAO.net | Presidente IEEE Computer

Society UPAO

PD: Si quedaron dudas pendientes, un correo a: [email protected] ó

[email protected] y desean elegir una opción más simple: envíen un tweet @fredyfx